Reactive audit (#449)

* refactor(search): resolve svelte file paths

* docs(Search): add reactive example

* refactor(tag): use class name directive for tag types, resolve svelte icon path

* chore(button-skeleton): deprecate small prop

* fix(breadcrumb-item): type default slot

* refactor(breadcrumb-skeleton): omit unused index

* refactor(aspect-ratio): use class name directive

* refactor(accordion): use the class name directive, resolve svelte icon paths

* refactor(code-snippet): use class name directive, resolve svelte icon paths

* fix(code-snippet-skeleton): CodeSnippetSkeleton can only be single or multi

* refactor(content-switcher): use class name directive

* docs(content-switcher): add reactive example

* docs(content-switcher): remove unused import

* docs(toggle): add reactive example

* refactor(tooltip-definition): use class name directive

* refactor(tooltip-icon): use class name directive

* refactor(tooltip): resolve svelte icon import

* fix(select): type dispatched change event

* refactor(select): resolve svelte icon import

* feat(select-item): spread rest props, avoid $ variable name

* fix(pagination-nav): type dispatched events

* refactor(pagination): resolve svelte imports

* fix(pagination): type dispatched update event

* fix(overflow-menu): type dispatched close event

* fix(number-input): type dispatched change event

* refactor(modal): use class name directive, resolve svelte imports

* refactor(inline-loading): use class name directive, resolve svelte imports

* refactor(composed-modal): resolve svelte icon imports

* refactor(combo-box): resolve svelte imports

* fix(fluid-form): rest props should not override Form class

* refactor(progress-step): resolve svelte icon imports

docs/src/pages/components/ContentSwitcher.svx

@@ -24,6 +24,10 @@ components: ["ContentSwitcher", "Switch"]
   <Switch text="Recommended" />
 </ContentSwitcher>
 
+### Reactive example
+
+<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
+
 ### Light variant
 
 <ContentSwitcher light>

docs/src/pages/components/Search.svx

@@ -13,6 +13,10 @@ The `Search` component size is extra-large by default. There are [large](#large-
 
 <Search placeholder="Search catalog..." value="Cloud functions" />
 
+### Reactive example
+
+<FileSource src="/framed/Search/SearchReactive" />
+
 ### Light variant
 
 <Search light />

docs/src/pages/components/Toggle.svx

@@ -15,6 +15,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" toggled />
 
+### Reactive example
+
+<FileSource src="/framed/Toggle/ToggleReactive" />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { ContentSwitcher, Switch, Button } from "carbon-components-svelte";
+
+  let selectedIndex = 1;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<ContentSwitcher bind:selectedIndex>
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+  <Switch text="Recommended" />
+</ContentSwitcher>
+
+<div>
+  <Button
+    size="small"
+    disabled="{selectedIndex === 2}"
+    on:click="{() => (selectedIndex = 2)}"
+  >
+    Set selected to 2
+  </Button>
+</div>
+
+<div>Selected index: {selectedIndex}</div>

docs/src/pages/framed/Search/SearchReactive.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { Search, ButtonSet, Button } from "carbon-components-svelte";
+
+  let value = "";
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Search bind:value />
+
+<div>
+  <ButtonSet>
+    <Button
+      size="small"
+      disabled="{value === 'Cloud functions'}"
+      on:click="{() => (value = 'Cloud functions')}"
+    >
+      Set value
+    </Button>
+    <Button
+      kind="ghost"
+      size="small"
+      disabled="{value.length === 0}"
+      on:click="{() => (value = '')}"
+    >
+      Clear value
+    </Button>
+  </ButtonSet>
+</div>
+
+<div>Value: {value}</div>

docs/src/pages/framed/Toggle/ToggleReactive.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Toggle, Button } from "carbon-components-svelte";
+
+  let toggled = true;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Toggle labelText="Push notifications" bind:toggled />
+
+<div>
+  <Button size="small" on:click="{() => (toggled = !toggled)}">
+    Toggle
+    {toggled ? 'off' : 'on'}
+  </Button>
+</div>
+
+<div>Toggled: {toggled}</div>