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

COMPONENT_INDEX.md

@@ -193,10 +193,10 @@
 ### Props
 
 | Prop name       | Kind             | Reactive | Type                 | Default value                  | Description                                                                                                                              |
-| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | disabled        | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to disable the accordion item                                                                                              |
 | open            | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to open the first accordion item                                                                                           |
-| title           | <code>let</code> | No       | <code>string</code>  | <code>"title"</code>           | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
+| title           | <code>let</code> | No       | <code>string</code>  | <code>"title"</code>           | Specify the title of the accordion item heading<br />Alternatively, use the "title" slot (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
 | iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon                                                                               |
 
 ### Slots
@@ -295,8 +295,8 @@ None.
 ### Slots
 
 | Slot name | Default | Props                                                                     | Fallback |
-| :-------- | :------ | :---- | :------- |
+| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
-| --        | Yes     | --    | --       |
+| --        | Yes     | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | --       |
 
 ### Events
 
@@ -388,10 +388,10 @@ None.
 ### Props
 
 | Prop name | Kind             | Reactive | Type                                                 | Default value          | Description                          |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | -------------------------------------- |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
 | href      | <code>let</code> | No       | <code>string</code>                                  | --                     | Set the `href` to use an anchor link |
 | size      | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton  |
-| small     | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>     | Set to `true` to use the small variant |
+| small     | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>     | --                                   |
 
 ### Slots
 
@@ -528,8 +528,8 @@ None.
 ### Props
 
 | Prop name | Kind             | Reactive | Type                                 | Default value         | Description                  |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | --------------------- | ---------------------------- |
+| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- |
-| type      | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
+| type      | <code>let</code> | No       | <code>"single" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
 
 ### Slots
 
@@ -2296,13 +2296,13 @@ export type NumberInputTranslationId = "increment" | "decrement";
 ### Events
 
 | Event name | Type       | Detail              |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>number</code> |
 | click      | forwarded  | --                  |
 | mouseover  | forwarded  | --                  |
 | mouseenter | forwarded  | --                  |
 | mouseleave | forwarded  | --                  |
 | input      | forwarded  | --                  |
-| change     | dispatched | --     |
 
 ## `NumberInputSkeleton`
 
@@ -2378,13 +2378,13 @@ None.
 ### Events
 
 | Event name | Type       | Detail                                        |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :-------------------------------------------- |
+| close      | dispatched | <code>{ index: number; text: string; }</code> |
 | click      | forwarded  | --                                            |
 | mouseover  | forwarded  | --                                            |
 | mouseenter | forwarded  | --                                            |
 | mouseleave | forwarded  | --                                            |
 | keydown    | forwarded  | --                                            |
-| close      | dispatched | --     |
 
 ## `OverflowMenuItem`
 
@@ -2445,8 +2445,8 @@ None.
 ### Events
 
 | Event name | Type       | Detail                                           |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :----------------------------------------------- |
-| update     | dispatched | --     |
+| update     | dispatched | <code>{ pageSize: number; page: number; }</code> |
 
 ## `PaginationNav`
 
@@ -2468,10 +2468,10 @@ None.
 ### Events
 
 | Event name             | Type       | Detail                         |
-| :--------------------- | :--------- | :----- |
+| :--------------------- | :--------- | :----------------------------- |
-| click:button--previous | dispatched | --     |
+| change                 | dispatched | <code>{ page: number; }</code> |
-| click:button--next     | dispatched | --     |
+| click:button--previous | dispatched | <code>{ page: number; }</code> |
-| change                 | dispatched | --     |
+| click:button--next     | dispatched | <code>{ page: number; }</code> |
 
 ## `PaginationSkeleton`
 
@@ -2835,9 +2835,9 @@ None.
 ### Events
 
 | Event name | Type       | Detail              |
-| :--------- | :--------- | :----- |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>string</code> |
 | blur       | forwarded  | --                  |
-| change     | dispatched | --     |
 
 ## `SelectItem`
 
@@ -3321,10 +3321,10 @@ None.
 ### Props
 
 | Prop name | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                      |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
 | ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the button HTML element                                                                    |
 | selected  | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` for the switch to be selected                                                                      |
-| text      | <code>let</code> | No       | <code>string</code>                        | <code>"Provide text"</code>                      | Specify the switch text<br />Alternatively, use the named slot "text" (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
+| text      | <code>let</code> | No       | <code>string</code>                        | <code>"Provide text"</code>                      | Specify the switch text<br />Alternatively, use the "text" slot (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
 | disabled  | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the switch                                                                              |
 | id        | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                                                                 |
 

docs/src/COMPONENT_API.json

@@ -191,7 +191,7 @@
         {
           "name": "title",
           "kind": "let",
-          "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
+          "description": "Specify the title of the accordion item heading\nAlternatively, use the \"title\" slot (e.g., <div slot=\"title\">...</div>)",
           "type": "string",
           "value": "\"title\"",
           "isFunction": false,
@@ -456,7 +456,13 @@
           "reactive": false
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        {
+          "name": "__default__",
+          "default": true,
+          "slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
+        }
+      ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "li" },
         { "type": "forwarded", "name": "mouseover", "element": "li" },
@@ -492,7 +498,6 @@
         {
           "name": "small",
           "kind": "let",
-          "description": "Set to `true` to use the small variant",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
@@ -906,7 +911,7 @@
         {
           "name": "text",
           "kind": "let",
-          "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)",
+          "description": "Specify the switch text\nAlternatively, use the \"text\" slot  (e.g., <span slot=\"text\">...</span>)",
           "type": "string",
           "value": "\"Provide text\"",
           "isFunction": false,
@@ -1884,7 +1889,7 @@
           "name": "type",
           "kind": "let",
           "description": "Set the type of code snippet",
-          "type": "\"single\" | \"inline\" | \"multi\"",
+          "type": "\"single\" | \"multi\"",
           "value": "\"single\"",
           "isFunction": false,
           "constant": false,
@@ -3122,12 +3127,16 @@
         }
       ],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "close",
+          "detail": "{ index: number; text: string; }"
+        },
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },
         { "type": "forwarded", "name": "mouseenter", "element": "button" },
         { "type": "forwarded", "name": "mouseleave", "element": "button" },
-        { "type": "forwarded", "name": "keydown", "element": "button" },
+        { "type": "forwarded", "name": "keydown", "element": "button" }
-        { "type": "dispatched", "name": "close" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "button" }
@@ -6125,12 +6134,12 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "input", "element": "input" },
+        { "type": "forwarded", "name": "input", "element": "input" }
-        { "type": "dispatched", "name": "change" }
       ],
       "typedefs": [
         {
@@ -6345,33 +6354,8 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
-        { "type": "forwarded", "name": "blur", "element": "select" },
+        { "type": "dispatched", "name": "change", "detail": "string" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "blur", "element": "select" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
-    },
-    {
-      "moduleName": "SelectSkeleton",
-      "filePath": "/src/Select/SelectSkeleton.svelte",
-      "props": [
-        {
-          "name": "hideLabel",
-          "kind": "let",
-          "description": "Set to `true` to hide the label text",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        }
-      ],
-      "slots": [],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
@@ -6423,37 +6407,8 @@
       ],
       "slots": [],
       "events": [],
-      "typedefs": []
-    },
-    {
-      "moduleName": "SelectItemGroup",
-      "filePath": "/src/Select/SelectItemGroup.svelte",
-      "props": [
-        {
-          "name": "disabled",
-          "kind": "let",
-          "description": "Set to `true` to disable the optgroup element",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "label",
-          "kind": "let",
-          "description": "Specify the label attribute of the optgroup element",
-          "type": "string",
-          "value": "\"Provide label\"",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        }
-      ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
-      "events": [],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "optgroup" }
+      "rest_props": { "type": "Element", "name": "option" }
     },
     {
       "moduleName": "Pagination",
@@ -6621,7 +6576,13 @@
         }
       ],
       "slots": [],
-      "events": [{ "type": "dispatched", "name": "update" }],
+      "events": [
+        {
+          "type": "dispatched",
+          "name": "update",
+          "detail": "{ pageSize: number; page: number; }"
+        }
+      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
@@ -6706,9 +6667,21 @@
       ],
       "slots": [],
       "events": [
-        { "type": "dispatched", "name": "click:button--previous" },
+        {
-        { "type": "dispatched", "name": "click:button--next" },
+          "type": "dispatched",
-        { "type": "dispatched", "name": "change" }
+          "name": "change",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--previous",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--next",
+          "detail": "{ page: number; }"
+        }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
@@ -6971,6 +6944,61 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "SelectSkeleton",
+      "filePath": "/src/Select/SelectSkeleton.svelte",
+      "props": [
+        {
+          "name": "hideLabel",
+          "kind": "let",
+          "description": "Set to `true` to hide the label text",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [],
+      "events": [
+        { "type": "forwarded", "name": "click", "element": "div" },
+        { "type": "forwarded", "name": "mouseover", "element": "div" },
+        { "type": "forwarded", "name": "mouseenter", "element": "div" },
+        { "type": "forwarded", "name": "mouseleave", "element": "div" }
+      ],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
+    {
+      "moduleName": "SelectItemGroup",
+      "filePath": "/src/Select/SelectItemGroup.svelte",
+      "props": [
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the optgroup element",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "label",
+          "kind": "let",
+          "description": "Specify the label attribute of the optgroup element",
+          "type": "string",
+          "value": "\"Provide label\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "optgroup" }
+    },
     {
       "moduleName": "SkeletonPlaceholder",
       "filePath": "/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte",

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>

src/Accordion/Accordion.svelte

@@ -43,10 +43,11 @@
 {:else}
   <ul
     class:bx--accordion="{true}"
+    class:bx--accordion--start="{align === 'start'}"
+    class:bx--accordion--end="{align === 'end'}"
+    class:bx--accordion--sm="{size === 'sm'}"
+    class:bx--accordion--xl="{size === 'xl'}"
     {...$$restProps}
-    class="bx--accordion--{align}
-      {size && `bx--accordion--${size}`}
-      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter

src/Accordion/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    */
   export let title = "title";
 
@@ -15,7 +15,7 @@
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
 
   let initialDisabled = disabled;
 
@@ -38,8 +38,9 @@
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
   class:bx--accordion__item--disabled="{disabled}"
+  class:bx--accordion__item--expanding="{animation === 'expanding'}"
+  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
   {...$$restProps}
-  class="bx--accordion__item--{animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;
@@ -70,11 +71,11 @@
       class="bx--accordion__arrow"
       aria-label="{iconDescription}"
     />
-    <div class="bx--accordion__title">
+    <div class:bx--accordion__title="{true}">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class="bx--accordion__content">
+  <div class:bx--accordion__content="{true}">
     <slot />
   </div>
 </li>

src/Accordion/AccordionSkeleton.svelte

@@ -17,17 +17,18 @@
   /** Set to `false` to close the first accordion item */
   export let open = true;
 
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
-  import { SkeletonText } from "../SkeletonText";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <ul
-  class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
+  class:bx--accordion="{true}"
+  class:bx--accordion--start="{align === 'start'}"
+  class:bx--accordion--end="{align === 'end'}"
+  class:bx--accordion--sm="{size === 'sm'}"
+  class:bx--accordion--xl="{size === 'xl'}"
   {...$$restProps}
-  class="bx--accordion--{align}
-    {size && `bx--accordion--${size}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
@@ -49,7 +50,7 @@
       </div>
     </li>
   {/if}
-  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
     <li class="bx--accordion__item">
       <span class="bx--accordion__heading">
         <ChevronRight16 class="bx--accordion__arrow" />

src/AspectRatio/AspectRatio.svelte

@@ -7,9 +7,15 @@
 </script>
 
 <div
-  {...$$restProps}
   class:bx--aspect-ratio="{true}"
-  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
+  class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
+  class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
+  class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
+  class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
+  class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
+  class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
+  class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
+  {...$$restProps}
 >
   <div class:bx--aspect-ratio--object="{true}">
     <slot />

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
+   */
+
   /**
    * Set the `href` to use an anchor link
    * @type {string}
@@ -8,7 +12,7 @@
   /** Set to `true` if the breadcrumb item represents the current page */
   export let isCurrentPage = false;
 
-  import { Link } from "../Link";
+  import Link from "../Link/Link.svelte";
 </script>
 
 <li

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -7,16 +7,16 @@
 </script>
 
 <div
+  class:bx--skeleton="{true}"
   class:bx--breadcrumb="{true}"
   class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
-  class:bx--skeleton="{true}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: count }, (_, i) => i) as item (item)}
     <div class:bx--breadcrumb-item="{true}">
       <span class:bx--link="{true}">&nbsp;</span>
     </div>

src/Button/ButtonSkeleton.svelte

@@ -11,7 +11,10 @@
    */
   export let size = "default";
 
-  /** Set to `true` to use the small variant */
+  /**
+   * @deprecated this prop will be removed in the next major release
+   * Use size="small" instead
+   */
   export let small = false;
 </script>
 

src/CodeSnippet/CodeSnippet.svelte

@@ -70,10 +70,10 @@
   export let ref = null;
 
   import { tick } from "svelte";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
-  import { Copy } from "../Copy";
+  import Copy from "../Copy/Copy.svelte";
-  import { CopyButton } from "../CopyButton";
+  import CopyButton from "../CopyButton/CopyButton.svelte";
   import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   function setShowMoreLess() {
@@ -101,12 +101,14 @@
   {#if type === 'inline'}
     {#if hideCopyButton}
       <span
-        class="bx--snippet {type && `bx--snippet--${type}`}
+        class:bx--snippet="{true}"
-          {type === 'inline' && 'bx--btn--copy'}
+        class:bx--snippet--expand="{expanded}"
-          {expanded && 'bx--snippet--expand'}
+        class:bx--snippet--light="{light}"
-          {light && 'bx--snippet--light'}
+        class:bx--snippet--no-copy="{hideCopyButton}"
-          {hideCopyButton && 'bx--snippet--no-copy'}
+        class:bx--snippet--wraptext="{wrapText}"
-          {wrapText && 'bx--snippet--wraptext'}"
+        class:bx--snippet--single="{type === 'single'}"
+        class:bx--snippet--inline="{type === 'inline'}"
+        class:bx--snippet--multi="{type === 'multi'}"
         {...$$restProps}
       >
         <code id="{id}">
@@ -144,8 +146,10 @@
       class:bx--snippet--light="{light}"
       class:bx--snippet--no-copy="{hideCopyButton}"
       class:bx--snippet--wraptext="{wrapText}"
+      class:bx--snippet--single="{type === 'single'}"
+      class:bx--snippet--inline="{type === 'inline'}"
+      class:bx--snippet--multi="{type === 'multi'}"
       {...$$restProps}
-      class="{type && `bx--snippet--${type}`} {$$restProps.class}"
       on:mouseover
       on:mouseenter
       on:mouseleave
@@ -153,8 +157,8 @@
       <div
         role="{type === 'single' ? 'textbox' : undefined}"
         tabindex="{type === 'single' ? '0' : undefined}"
-        class:bx--snippet-container="{true}"
         aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
+        class:bx--snippet-container="{true}"
       >
         <code>
           <pre bind:this="{ref}">

src/CodeSnippet/CodeSnippetSkeleton.svelte

@@ -1,14 +1,14 @@
 <script>
   /**
    * Set the type of code snippet
-   * @type {"single" | "inline" | "multi"}
+   * @type {"single" | "multi"}
    */
   export let type = "single";
 </script>
 
 <div
-  class:bx--snippet="{true}"
   class:bx--skeleton="{true}"
+  class:bx--snippet="{true}"
   class:bx--snippet--single="{type === 'single'}"
   class:bx--snippet--multi="{type === 'multi'}"
   {...$$restProps}

src/ComboBox/ComboBox.svelte

@@ -83,15 +83,13 @@
   export let listRef = null;
 
   import { createEventDispatcher, afterUpdate, tick } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
-  import {
+  import ListBox from "../ListBox/ListBox.svelte";
-    ListBox,
+  import ListBoxField from "../ListBox/ListBoxField.svelte";
-    ListBoxField,
+  import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
-    ListBoxMenu,
+  import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
-    ListBoxMenuIcon,
+  import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
-    ListBoxMenuItem,
+  import ListBoxSelection from "../ListBox/ListBoxSelection.svelte";
-    ListBoxSelection,
-  } from "../ListBox";
 
   const dispatch = createEventDispatcher();
 

src/ComposedModal/ComposedModal.svelte

@@ -54,15 +54,13 @@
   });
 
   function focus(element) {
-    if (selectorPrimaryFocus == null) {
+    if (selectorPrimaryFocus == null) return;
-      return;
-    }
     const node =
       (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
     if (node != null) node.focus();
   }
 
-  $: opened = false;
+  let opened = false;
   $: didOpen = open;
 
   onMount(async () => {
@@ -116,7 +114,10 @@
   <div
     bind:this="{innerModal}"
     class:bx--modal-container="{true}"
-    class="{size && `bx--modal-container--${size}`} {containerClass}"
+    class:bx--modal-container--xs="{size === 'xs'}"
+    class:bx--modal-container--sm="{size === 'sm'}"
+    class:bx--modal-container--lg="{size === 'lg'}"
+    class="{containerClass}"
     on:click="{() => {
       didClickInnerModal = true;
     }}"

src/ComposedModal/ModalFooter.svelte

@@ -24,7 +24,7 @@
   export let danger = false;
 
   import { getContext } from "svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const { closeModal, submit } = getContext("ComposedModal");
 </script>

src/ComposedModal/ModalHeader.svelte

@@ -21,7 +21,7 @@
   export let iconDescription = "Close";
 
   import { getContext } from "svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
 
   const { closeModal } = getContext("ComposedModal");
 </script>

src/ContentSwitcher/ContentSwitcher.svelte

@@ -64,8 +64,9 @@
   role="tablist"
   class:bx--content-switcher="{true}"
   class:bx--content-switcher--light="{light}"
+  class:bx--content-switcher--sm="{size === 'sm'}"
+  class:bx--content-switcher--xl="{size === 'xl'}"
   {...$$restProps}
-  class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/ContentSwitcher/Switch.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the switch text
-   * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
+   * Alternatively, use the "text" slot  (e.g., <span slot="text">...</span>)
    */
   export let text = "Provide text";
 

src/FluidForm/FluidForm.svelte

@@ -1,12 +1,10 @@
 <script>
   import { setContext } from "svelte";
-  import { Form } from "../Form";
+  import Form from "../Form/Form.svelte";
 
-  setContext("Form", {
+  setContext("Form", { isFluid: true });
-    isFluid: true,
-  });
 </script>
 
-<Form class="bx--form--fluid" {...$$restProps}>
+<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}">
   <slot />
 </Form>

src/InlineLoading/InlineLoading.svelte

@@ -21,9 +21,9 @@
   export let successDelay = 1500;
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";
-  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
-  import Error20 from "carbon-icons-svelte/lib/Error20";
+  import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
-  import { Loading } from "../Loading";
+  import Loading from "../Loading/Loading.svelte";
 
   const dispatch = createEventDispatcher();
 

src/Modal/Modal.svelte

@@ -69,8 +69,8 @@
   export let ref = null;
 
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -160,7 +160,9 @@
     aria-modal="true"
     aria-label="{ariaLabel}"
     class:bx--modal-container="{true}"
-    class="{size && `bx--modal-container--${size}`}"
+    class:bx--modal-container--xs="{size === 'xs'}"
+    class:bx--modal-container--sm="{size === 'sm'}"
+    class:bx--modal-container--lg="{size === 'lg'}"
     on:click="{() => {
       didClickInnerModal = true;
     }}"

src/NumberInput/NumberInput.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   * @event {number} change
    */
 
   /**
@@ -91,9 +92,9 @@
   export let ref = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
+  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
-  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
+  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",

src/OverflowMenu/OverflowMenu.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ index: number; text: string; }} close
+   */
+
   /**
    * Specify the size of the overflow menu
    * @type {"sm" | "xl"}
@@ -52,7 +56,7 @@
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
-  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
+  import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
   import { formatStyle } from "./formatStyle";
 
   const dispatch = createEventDispatcher();

src/Pagination/Pagination.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ pageSize: number; page: number; }} update
+   */
+
   /** Specify the current page index */
   export let page = 1;
 
@@ -65,10 +69,11 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { createEventDispatcher } from "svelte";
-  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
-  import { Select, SelectItem } from "../Select";
+  import Select from "../Select/Select.svelte";
+  import SelectItem from "../Select/SelectItem.svelte";
 
   const dispatch = createEventDispatcher();
 

src/Pagination/PaginationSkeleton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { SkeletonText } from "../SkeletonText";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <div

src/PaginationNav/PaginationNav.svelte

@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {{ page: number; }} change
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
+   */
+
   /** Specify the current page index */
   export let page = 0;
 
@@ -18,11 +24,11 @@
   export let backwardText = "Previous page";
 
   import { afterUpdate, createEventDispatcher } from "svelte";
-  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
   import PaginationOverflow from "./PaginationOverflow.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
   const MIN = 4;

src/PaginationNav/PaginationOverflow.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ index: number; }} select
+   */
+
   /** Specify the pivot start index */
   export let fromIndex = 0;
 
@@ -6,7 +10,7 @@
   export let count = 0;
 
   import { createEventDispatcher } from "svelte";
-  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16";
+  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
 
   const dispatch = createEventDispatcher();

src/ProgressIndicator/ProgressStep.svelte

@@ -24,8 +24,8 @@
   export let id = "ccs-" + Math.random().toString(36);
 
   import { onMount, getContext } from "svelte";
-  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
+  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16/CheckmarkOutline16.svelte";
-  import Warning16 from "carbon-icons-svelte/lib/Warning16";
+  import Warning16 from "carbon-icons-svelte/lib/Warning16/Warning16.svelte";
 
   let step = {};
 

src/Search/Search.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * @deprecated this prop will be removed in the next major release
-   * Set to `true` to use the small variant
+   * Use size="sm" instead
    * @type {boolean} [small=false]
    */
   export let small = false;
@@ -70,9 +70,9 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
-  import Close20 from "carbon-icons-svelte/lib/Close20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
-  import Search16 from "carbon-icons-svelte/lib/Search16";
+  import Search16 from "carbon-icons-svelte/lib/Search16/Search16.svelte";
   import SearchSkeleton from "./SearchSkeleton.svelte";
 
   const dispatch = createEventDispatcher();

src/Select/Select.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {string} change
+   */
+
   /**
    * Specify the selected item value
    * @type {string}
@@ -52,8 +56,8 @@
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";
   import { writable } from "svelte/store";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);

src/Select/SelectItem.svelte

@@ -17,8 +17,8 @@
 
   let selected = false;
 
-  const unsubscribe = ctx.selectedValue.subscribe(($) => {
+  const unsubscribe = ctx.selectedValue.subscribe((currentValue) => {
-    selected = $ === value;
+    selected = currentValue === value;
   });
 
   onDestroy(() => {
@@ -32,8 +32,7 @@
   hidden="{hidden}"
   selected="{selected}"
   class:bx--select-option="{true}"
-  class="{$$restProps.class}"
+  {...$$restProps}
-  style="{$$restProps.style}"
 >
   {text || value}
 </option>

src/Tag/Tag.svelte

@@ -1,11 +1,9 @@
 <script>
-  /**
+  /** @restProps {div | span} */
-   * @restProps {div | span}
-   */
 
   /**
    * Specify the type of tag
-   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
+   * @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
    */
   export let type = undefined;
 
@@ -24,7 +22,7 @@
   /** Set an id for the filterable tag */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import Close16 from "carbon-icons-svelte/lib/Close16";
+  import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
   import TagSkeleton from "./TagSkeleton.svelte";
 </script>
 
@@ -44,8 +42,17 @@
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
       class:bx--tag--filter="{filter}"
-      {...$$restProps}
+      class:bx--tag--red="{type === 'red'}"
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
     >
       <slot props="{{ class: 'bx--tag__label' }}">
         <span class:bx--tag__label="{true}">{type}</span>
@@ -67,8 +74,17 @@
     <span
       class:bx--tag="{true}"
       class:bx--tag--disabled="{disabled}"
-      {...$$restProps}
+      class:bx--tag--red="{type === 'red'}"
-      class="{type && `bx--tag--${type}`} {$$restProps.class}"
+      class:bx--tag--magenta="{type === 'magenta'}"
+      class:bx--tag--purple="{type === 'purple'}"
+      class:bx--tag--blue="{type === 'blue'}"
+      class:bx--tag--cyan="{type === 'cyan'}"
+      class:bx--tag--teal="{type === 'teal'}"
+      class:bx--tag--green="{type === 'green'}"
+      class:bx--tag--gray="{type === 'gray'}"
+      class:bx--tag--cool-gray="{type === 'cool-gray'}"
+      class:bx--tag--warm-gray="{type === 'warm-gray'}"
+      class:bx--tag--high-contrast="{type === 'high-contrast'}"
       on:click
       on:mouseover
       on:mouseenter

src/Tooltip/Tooltip.svelte

@@ -64,7 +64,7 @@
   export let refIcon = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import Information16 from "carbon-icons-svelte/lib/Information16";
+  import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
 
   const dispatch = createEventDispatcher();
 

src/TooltipDefinition/TooltipDefinition.svelte

@@ -51,8 +51,11 @@
     class:bx--tooltip__trigger--definition="{true}"
     class:bx--tooltip--hidden="{!visible}"
     class:bx--tooltip--visible="{visible}"
-    class="{direction && `bx--tooltip--${direction}`}
+    class:bx--tooltip--top="{direction === 'top'}"
-      {align && `bx--tooltip--align-${align}`}"
+    class:bx--tooltip--bottom="{direction === 'bottom'}"
+    class:bx--tooltip--align-start="{align === 'start'}"
+    class:bx--tooltip--align-center="{align === 'center'}"
+    class:bx--tooltip--align-end="{align === 'end'}"
     on:click
     on:mouseover
     on:mouseenter

src/TooltipIcon/TooltipIcon.svelte

@@ -36,10 +36,14 @@
   class:bx--tooltip__trigger="{true}"
   class:bx--tooltip--a11y="{true}"
   class:bx--tooltip--hidden="{hidden}"
+  class:bx--tooltip--top="{direction === 'top'}"
+  class:bx--tooltip--right="{direction === 'right'}"
+  class:bx--tooltip--bottom="{direction === 'bottom'}"
+  class:bx--tooltip--left="{direction === 'left'}"
+  class:bx--tooltip--align-start="{align === 'start'}"
+  class:bx--tooltip--align-center="{align === 'center'}"
+  class:bx--tooltip--align-end="{align === 'end'}"
   {...$$restProps}
-  class="{direction && `bx--tooltip--${direction}`}
-    {align && `bx--tooltip--align-${align}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

tests/NumberInput.test.svelte

@@ -2,7 +2,12 @@
   import { NumberInput, NumberInputSkeleton } from "../types";
 </script>
 
-<NumberInput label="Clusters" />
+<NumberInput
+  label="Clusters"
+  on:change="{(e) => {
+    console.log(e.detail); // number
+  }}"
+/>
 
 <NumberInput
   label="Clusters"

tests/OverflowMenu.test.svelte

@@ -3,7 +3,11 @@
   import Add16 from "carbon-icons-svelte/lib/Add16";
 </script>
 
-<OverflowMenu>
+<OverflowMenu
+  on:close="{(e) => {
+    console.log(e.detail); // { index: number; text: string; }
+  }}"
+>
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem
     href="https://cloud.ibm.com/docs/api-gateway/"

tests/Pagination.test.svelte

@@ -2,7 +2,13 @@
   import { Pagination, PaginationSkeleton } from "../types";
 </script>
 
-<Pagination totalItems="{102}" pageSizes="{[10, 15, 20]}" />
+<Pagination
+  totalItems="{102}"
+  pageSizes="{[10, 15, 20]}"
+  on:update="{(e) => {
+    console.log(e.detail); // { pageSize: number; page: number; }
+  }}"
+/>
 
 <Pagination totalItems="{102}" page="{4}" />
 

tests/PaginationNav.test.svelte

@@ -4,4 +4,16 @@
 
 <PaginationNav />
 
-<PaginationNav total="{3}" loop />
+<PaginationNav
+  total="{3}"
+  loop
+  on:change="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+  on:click:button--next="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+  on:click:button--previous="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+/>

types/Accordion/AccordionItem.d.ts

@@ -3,7 +3,7 @@
 export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    * @default "title"
    */
   title?: string;

types/Breadcrumb/BreadcrumbItem.d.ts

@@ -16,7 +16,7 @@ export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLEleme
 export default class BreadcrumbItem {
   $$prop_def: BreadcrumbItemProps;
   $$slot_def: {
-    default: {};
+    default: { props?: { ["aria-current"]?: string; class: "bx--link" } };
   };
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Button/ButtonSkeleton.d.ts

@@ -13,7 +13,6 @@ export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLEleme
   size?: "default" | "field" | "small";
 
   /**
-   * Set to `true` to use the small variant
    * @default false
    */
   small?: boolean;

types/CodeSnippet/CodeSnippetSkeleton.d.ts

@@ -5,7 +5,7 @@ export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTML
    * Set the type of code snippet
    * @default "single"
    */
-  type?: "single" | "inline" | "multi";
+  type?: "single" | "multi";
 }
 
 export default class CodeSnippetSkeleton {

types/ContentSwitcher/Switch.d.ts

@@ -3,7 +3,7 @@
 export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Specify the switch text
-   * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
+   * Alternatively, use the "text" slot  (e.g., <span slot="text">...</span>)
    * @default "Provide text"
    */
   text?: string;

types/NumberInput/NumberInput.d.ts

@@ -133,11 +133,11 @@ export default class NumberInput {
     label: {};
   };
 
+  $on(eventname: "change", cb: (event: CustomEvent<number>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
   $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/OverflowMenu/OverflowMenu.d.ts

@@ -77,11 +77,11 @@ export default class OverflowMenu {
     menu: {};
   };
 
+  $on(eventname: "close", cb: (event: CustomEvent<{ index: number; text: string }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
-  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/Pagination/Pagination.d.ts

@@ -102,6 +102,6 @@ export default class Pagination {
   $$prop_def: PaginationProps;
   $$slot_def: {};
 
-  $on(eventname: "update", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "update", cb: (event: CustomEvent<{ pageSize: number; page: number }>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/PaginationNav/PaginationNav.d.ts

@@ -42,8 +42,8 @@ export default class PaginationNav {
   $$prop_def: PaginationNavProps;
   $$slot_def: {};
 
-  $on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
-  $on(eventname: "click:button--next", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:button--previous", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:button--next", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/Select/Select.d.ts

@@ -89,7 +89,7 @@ export default class Select {
     default: {};
   };
 
+  $on(eventname: "change", cb: (event: CustomEvent<string>) => void): () => void;
   $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/Select/SelectItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 
-export interface SelectItemProps {
+export interface SelectItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["option"]> {
   /**
    * Specify the option value
    * @default ""

types/index.d.ts

@@ -86,9 +86,7 @@ export { default as NumberInput } from "./NumberInput/NumberInput";
 export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton";
 export { default as OrderedList } from "./OrderedList/OrderedList";
 export { default as Select } from "./Select/Select";
-export { default as SelectSkeleton } from "./Select/SelectSkeleton";
 export { default as SelectItem } from "./Select/SelectItem";
-export { default as SelectItemGroup } from "./Select/SelectItemGroup";
 export { default as Pagination } from "./Pagination/Pagination";
 export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
 export { default as PaginationNav } from "./PaginationNav/PaginationNav";
@@ -96,6 +94,8 @@ export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndica
 export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
 export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
 export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup";
+export { default as SelectSkeleton } from "./Select/SelectSkeleton";
+export { default as SelectItemGroup } from "./Select/SelectItemGroup";
 export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder";
 export { default as Slider } from "./Slider/Slider";
 export { default as SliderSkeleton } from "./Slider/SliderSkeleton";