test: add TS types

COMPONENT_INDEX.md

@@ -352,8 +352,8 @@ None.
 ### Slots
 
 | Slot name | Default | Props                                                                                                                                           | Fallback |
-| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
+| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
-| --        | Yes     | <code>{ props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | --       |
+| --        | Yes     | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | --       |
 
 ### Events
 
@@ -576,8 +576,8 @@ type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 ### Slots
 
 | Slot name | Default | Props                                                         | Fallback |
-| :-------- | :------ | :------------------------------------------- | :------- |
+| :-------- | :------ | :------------------------------------------------------------ | :------- |
-| --        | Yes     | <code>{ props?: { class: string; } } </code> | --       |
+| --        | Yes     | <code>{props: { class: string; [key: string]: any; }} </code> | --       |
 
 ### Events
 
@@ -645,7 +645,7 @@ None.
 | danger                     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to use the danger variant                               |
 | preventCloseOnClickOutside | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to prevent the modal from closing when clicking outside |
 | containerClass             | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                           | Specify a class for the inner modal                                   |
-| selectorPrimaryFocus       | <code>let</code> | No       | <code>string</code>                       | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal               |
+| selectorPrimaryFocus       | <code>let</code> | No       | <code>null &#124; string</code>           | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal               |
 
 ### Slots
 
@@ -757,28 +757,48 @@ None.
 ### Types
 
 ```ts
-interface Header {
+type Key = string;
-  key: string;
+
-  value: string;
+type Value = any;
-  display?: (item) => string;
+
-  sort?: (a, b) => number;
+interface EmptyHeader {
-  empty?: boolean;
+  key: Key;
+  empty: boolean;
+  display?: (item: Value) => Value;
+  sort?: (a: Value, b: Value) => 0 | -1 | 1;
   columnMenu?: boolean;
 }
 
-type Headers = Header[];
+interface NonEmptyHeader {
+  key: Key;
+  value: Value;
+  display?: (item: Value) => Value;
+  sort?: (a: Value, b: Value) => 0 | -1 | 1;
+  columnMenu?: boolean;
+}
+
+type DataTableHeader = NonEmptyHeader | EmptyHeader;
+
+type Row = Record<Key, Value>;
+
+type RowId = string;
+
+interface Cell {
+  key: Key;
+  value: Value;
+}
 ```
 
 ### Props
 
 | Prop name      | Kind             | Reactive | Type                                                | Default value      | Description                                                                                                         |
 | :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| selectedRowIds | <code>let</code> | Yes      | <code>string[]</code>                               | <code>[]</code>    | Specify the row ids to be selected                                                                                  |
+| selectedRowIds | <code>let</code> | Yes      | <code>RowId[]</code>                                | <code>[]</code>    | Specify the row ids to be selected                                                                                  |
 | selectable     | <code>let</code> | Yes      | <code>boolean</code>                                | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
-| expandedRowIds | <code>let</code> | Yes      | <code>string[]</code>                               | <code>[]</code>    | Specify the row ids to be expanded                                                                                  |
+| expandedRowIds | <code>let</code> | Yes      | <code>RowId[]</code>                                | <code>[]</code>    | Specify the row ids to be expanded                                                                                  |
 | expandable     | <code>let</code> | Yes      | <code>boolean</code>                                | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
-| rows           | <code>let</code> | Yes      | <code>Object[]</code>                               | <code>[]</code>    | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
+| rows           | <code>let</code> | Yes      | <code>Row[]</code>                                  | <code>[]</code>    | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
-| headers        | <code>let</code> | No       | <code>Headers</code>                                | <code>[]</code>    | Specify the data table headers                                                                                      |
+| headers        | <code>let</code> | No       | <code>DataTableHeader[]</code>                      | <code>[]</code>    | Specify the data table headers                                                                                      |
 | size           | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code> | --                 | Set the size of the data table                                                                                      |
 | title          | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>    | Specify the title of the data table                                                                                 |
 | description    | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>    | Specify the description of the data table                                                                           |
@@ -792,24 +812,24 @@ type Headers = Header[];
 ### Slots
 
 | Slot name    | Default | Props                                     | Fallback                                                                        |
-| :----------- | :------ | :------------------------------------------- | :------------------------------------------------------------------------------ |
+| :----------- | :------ | :---------------------------------------- | :------------------------------------------------------------------------------ |
 | --           | Yes     | --                                        | --                                                                              |
-| cell         | No      | <code>{ row: Object; cell: Object; } </code> | <code>{headers[j].display ? headers[j].display(cell.value) : cell.value}</code> |
+| cell         | No      | <code>{ row: Row; cell: Cell; } </code>   | <code>{headers[j].display ? headers[j].display(cell.value) : cell.value}</code> |
-| cell-header  | No      | <code>{ header: Header} </code>              | <code>{header.value}</code>                                                     |
+| cell-header  | No      | <code>{ header: NonEmptyHeader; } </code> | <code>{header.value}</code>                                                     |
-| expanded-row | No      | <code>{ row: Object; } </code>               | --                                                                              |
+| expanded-row | No      | <code>{ row: Row; } </code>               | --                                                                              |
 
 ### Events
 
 | Event name           | Type       | Detail                                                                                                 |
-| :------------------- | :--------- | :-------------------------------------------------------------------------------------------- |
+| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
-| click                | dispatched | <code>{ header?: Header; row?: Object; cell?: Object; }</code>                                |
+| click                | dispatched | <code>{ header?: DataTableHeader; row?: Row; cell?: Cell; }</code>                                     |
 | click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                    |
-| click:header         | dispatched | <code>{ header: Header; sortDirection: "ascending" &#124; "descending" &#124; "none" }</code> |
+| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection: "ascending" &#124; "descending" &#124; "none" }</code> |
-| click:row            | dispatched | <code>Object</code>                                                                           |
+| click:row            | dispatched | <code>Row</code>                                                                                       |
-| mouseenter:row       | dispatched | <code>Object</code>                                                                           |
+| mouseenter:row       | dispatched | <code>Row</code>                                                                                       |
-| mouseleave:row       | dispatched | <code>Object</code>                                                                           |
+| mouseleave:row       | dispatched | <code>Row</code>                                                                                       |
-| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Object; }</code>                                              |
+| click:row--expand    | dispatched | <code>{ expanded: boolean; row: Row; }</code>                                                          |
-| click:cell           | dispatched | <code>Object</code>                                                                           |
+| click:cell           | dispatched | <code>Cell</code>                                                                                      |
 
 ## `DataTableSkeleton`
 
@@ -844,7 +864,7 @@ None.
 
 | Prop name      | Kind             | Reactive | Type                                                 | Default value                                    | Description                                   |
 | :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value          | <code>let</code> | Yes      | <code>string</code>                                  | <code>""</code>                                  | Specify the date picker input value           |
+| value          | <code>let</code> | Yes      | <code>number &#124; string</code>                    | <code>""</code>                                  | Specify the date picker input value           |
 | datePickerType | <code>let</code> | No       | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code>                            | Specify the date picker type                  |
 | appendTo       | <code>let</code> | No       | <code>HTMLElement</code>                             | --                                               | Specify the element to append the calendar to |
 | dateFormat     | <code>let</code> | No       | <code>string</code>                                  | <code>"m/d/Y"</code>                             | Specify the date format                       |
@@ -1335,8 +1355,8 @@ None.
 ### Slots
 
 | Slot name | Default | Props                                                           | Fallback |
-| :-------- | :------ | :------------------------------------------- | :------- |
+| :-------- | :------ | :-------------------------------------------------------------- | :------- |
-| --        | Yes     | <code>{ props?: { class: string; } } </code> | --       |
+| --        | Yes     | <code>{ props: { class: string; [key: string]: any; } } </code> | --       |
 
 ### Events
 
@@ -1607,8 +1627,8 @@ None.
 ### Props
 
 | Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
-| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- |
+| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
-| render    | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render<br />Icon size must be 16px (e.g. `Add16`, `Task16`) |
+| render    | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 | skeleton  | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to display the skeleton state           |
 
 ### Slots
@@ -2068,7 +2088,7 @@ interface MultiSelectItem {
 ### Props
 
 | Prop name         | Kind             | Reactive | Type                                                                                           | Default value                                                                       | Description                                                                           |
-| :---------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
 | open              | <code>let</code> | Yes      | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to open the dropdown                                                    |
 | value             | <code>let</code> | Yes      | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the multiselect value                                                         |
 | selectedIds       | <code>let</code> | Yes      | <code>MultiSelectItemId[]</code>                                                               | <code>[]</code>                                                                     | Set the selected ids                                                                  |
@@ -2083,7 +2103,7 @@ interface MultiSelectItem {
 | light             | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to enable the light variant                                             |
 | locale            | <code>let</code> | No       | <code>string</code>                                                                            | <code>"en"</code>                                                                   | Specify the locale                                                                    |
 | placeholder       | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the placeholder text                                                          |
-| sortItem          | <code>let</code> | No       | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code>      | Override the sorting logic<br />The default sorting compare the item text value       |
+| sortItem          | <code>let</code> | No       | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code>      | Override the sorting logic<br />The default sorting compare the item text value       |
 | translateWithId   | <code>let</code> | No       | <code>(id: any) => string</code>                                                               | --                                                                                  | Override the default translation ids                                                  |
 | titleText         | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the title text                                                                |
 | useTitleInItem    | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to pass the item to `itemToString` in the checkbox                      |
@@ -2205,7 +2225,7 @@ type NumberInputTranslationId = "increment" | "decrement";
 | Prop name       | Kind               | Reactive | Type                                                            | Default value                                                    | Description                                    |
 | :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- |
 | ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element   |
-| value           | <code>let</code>   | Yes      | <code>string</code>                                             | <code>""</code>                                                  | Specify the input value                        |
+| value           | <code>let</code>   | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                                  | Specify the input value                        |
 | size            | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | --                                                               | Set the size of the input                      |
 | step            | <code>let</code>   | No       | <code>number</code>                                             | <code>1</code>                                                   | Specify the step increment                     |
 | max             | <code>let</code>   | No       | <code>number</code>                                             | --                                                               | Specify the maximum value                      |
@@ -2438,8 +2458,8 @@ None.
 | Prop name         | Kind             | Reactive | Type                                                            | Default value                                    | Description                                           |
 | :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
 | ref               | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                | Obtain a reference to the input HTML element          |
-| type              | <code>let</code> | Yes      | <code>string</code>                                             | <code>"password"</code>                          | Specify the input type                                |
+| type              | <code>let</code> | Yes      | <code>"text" &#124; "password"</code>                           | <code>"password"</code>                          | Set to `"text"` to toggle the password visibility     |
-| value             | <code>let</code> | Yes      | <code>string</code>                                             | <code>""</code>                                  | Specify the input value                               |
+| value             | <code>let</code> | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                  | Specify the input value                               |
 | size              | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                   | --                                               | Set the size of the input                             |
 | placeholder       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the placeholder text                          |
 | hidePasswordLabel | <code>let</code> | No       | <code>string</code>                                             | <code>"Hide password"</code>                     | Specify the hide password label text                  |
@@ -2674,8 +2694,8 @@ None.
 ### Slots
 
 | Slot name | Default | Props                                                           | Fallback |
-| :-------- | :------ | :--------------------------------------------------------------- | :------- |
+| :-------- | :------ | :-------------------------------------------------------------- | :------- |
-| --        | Yes     | <code>{ props?: { class: string; [key: string]: any; } } </code> | --       |
+| --        | Yes     | <code>{ props: { class: string; [key: string]: any; } } </code> | --       |
 
 ### Events
 
@@ -2749,7 +2769,7 @@ None.
 | Prop name   | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
 | :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
 | ref         | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
-| selected    | <code>let</code> | Yes      | --                                         | --                                               | Specify the selected item value                 |
+| selected    | <code>let</code> | Yes      | <code>string</code>                        | --                                               | Specify the selected item value                 |
 | size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>              | --                                               | Set the size of the select input                |
 | inline      | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to use the inline variant         |
 | light       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant       |
@@ -3633,7 +3653,7 @@ None.
 | Prop name   | Kind             | Reactive | Type                                      | Default value                                    | Description                                   |
 | :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
 | ref         | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element  |
-| value       | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                  | Specify the input value                       |
+| value       | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>                                  | Specify the input value                       |
 | size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | --                                               | Set the size of the input                     |
 | type        | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input type                        |
 | placeholder | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the placeholder text                  |
@@ -3783,7 +3803,7 @@ None.
 | Prop name       | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
 | :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
-| value           | <code>let</code> | Yes      | <code>string</code>                        | <code>""</code>                                  | Specify the select value                        |
+| value           | <code>let</code> | Yes      | <code>number &#124; string</code>          | <code>""</code>                                  | Specify the select value                        |
 | disabled        | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the select             |
 | iconDescription | <code>let</code> | No       | <code>string</code>                        | <code>"Open list of options"</code>              | Specify the ARIA label for the chevron icon     |
 | labelText       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
@@ -4040,7 +4060,7 @@ None.
 | :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- |
 | ref        | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>  | Obtain a reference to the input HTML element  |
 | expanded   | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to expand the search bar        |
-| value      | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>    | Specify the value of the search input         |
+| value      | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>    | Specify the value of the search input         |
 | persistent | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to keep the search bar expanded |
 | tabindex   | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>   | Specify the tabindex                          |
 

docs/src/COMPONENT_API.json

@@ -178,7 +178,11 @@
         }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" }
+      "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" },
+      "extends": {
+        "interface": "AccordionSkeletonProps",
+        "import": "\"./AccordionSkeleton\""
+      }
     },
     {
       "moduleName": "AccordionItem",
@@ -349,7 +353,11 @@
         }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" }
+      "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
+      "extends": {
+        "interface": "BreadcrumbSkeletonProps",
+        "import": "\"./BreadcrumbSkeleton\""
+      }
     },
     {
       "moduleName": "Link",
@@ -646,7 +654,7 @@
         {
           "name": "__default__",
           "default": true,
-          "slot_props": "{ props?: { role: \"button\"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
+          "slot_props": "{ props: { role: \"button\"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }"
         }
       ],
       "events": [
@@ -668,7 +676,11 @@
         }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "ButtonSkeleton" }
+      "rest_props": { "type": "Element", "name": "button | a | div" },
+      "extends": {
+        "interface": "ButtonSkeletonProps",
+        "import": "\"./ButtonSkeleton\""
+      }
     },
     {
       "moduleName": "ButtonSet",
@@ -1031,7 +1043,8 @@
         { "type": "forwarded", "name": "animationend", "element": "Copy" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "Copy" }
+      "rest_props": { "type": "InlineComponent", "name": "Copy" },
+      "extends": { "interface": "CopyProps", "import": "\"../Copy/Copy\"" }
     },
     {
       "moduleName": "ListBox",
@@ -1654,7 +1667,7 @@
           "name": "selectorPrimaryFocus",
           "kind": "let",
           "description": "Specify a selector to be focused when opening the modal",
-          "type": "string",
+          "type": "null | string",
           "value": "\"[data-modal-primary-focus]\"",
           "isFunction": false,
           "constant": false,
@@ -2411,7 +2424,7 @@
           "name": "headers",
           "kind": "let",
           "description": "Specify the data table headers",
-          "type": "Headers",
+          "type": "DataTableHeader[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -2421,7 +2434,7 @@
           "name": "rows",
           "kind": "let",
           "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
-          "type": "Object[]",
+          "type": "Row[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -2500,7 +2513,7 @@
           "name": "expandedRowIds",
           "kind": "let",
           "description": "Specify the row ids to be expanded",
-          "type": "string[]",
+          "type": "RowId[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -2540,7 +2553,7 @@
           "name": "selectedRowIds",
           "kind": "let",
           "description": "Specify the row ids to be selected",
-          "type": "string[]",
+          "type": "RowId[]",
           "value": "[]",
           "isFunction": false,
           "constant": false,
@@ -2563,25 +2576,25 @@
           "name": "cell",
           "default": false,
           "fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}",
-          "slot_props": "{ row: Object; cell: Object; }"
+          "slot_props": "{ row: Row; cell: Cell; }"
         },
         {
           "name": "cell-header",
           "default": false,
           "fallback": "{header.value}",
-          "slot_props": "{ header: Header}"
+          "slot_props": "{ header: NonEmptyHeader; }"
         },
         {
           "name": "expanded-row",
           "default": false,
-          "slot_props": "{ row: Object; }"
+          "slot_props": "{ row: Row; }"
         }
       ],
       "events": [
         {
           "type": "dispatched",
           "name": "click",
-          "detail": "{ header?: Header; row?: Object; cell?: Object; }"
+          "detail": "{ header?: DataTableHeader; row?: Row; cell?: Cell; }"
         },
         {
           "type": "dispatched",
@@ -2591,28 +2604,46 @@
         {
           "type": "dispatched",
           "name": "click:header",
-          "detail": "{ header: Header; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
+          "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
         },
-        { "type": "dispatched", "name": "click:row", "detail": "Object" },
+        { "type": "dispatched", "name": "click:row", "detail": "Row" },
-        { "type": "dispatched", "name": "mouseenter:row", "detail": "Object" },
+        { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
-        { "type": "dispatched", "name": "mouseleave:row", "detail": "Object" },
+        { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
         {
           "type": "dispatched",
           "name": "click:row--expand",
-          "detail": "{ expanded: boolean; row: Object; }"
+          "detail": "{ expanded: boolean; row: Row; }"
         },
-        { "type": "dispatched", "name": "click:cell", "detail": "Object" }
+        { "type": "dispatched", "name": "click:cell", "detail": "Cell" }
       ],
       "typedefs": [
+        { "type": "string", "name": "Key", "ts": "type Key = string" },
+        { "type": "any", "name": "Value", "ts": "type Value = any" },
         {
-          "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }",
+          "type": "{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }",
-          "name": "Header",
+          "name": "EmptyHeader",
-          "ts": "interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }"
+          "ts": "interface EmptyHeader { key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }"
         },
         {
-          "type": "Header[]",
+          "type": "{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }",
-          "name": "Headers",
+          "name": "NonEmptyHeader",
-          "ts": "type Headers = Header[]"
+          "ts": "interface NonEmptyHeader { key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }"
+        },
+        {
+          "type": "NonEmptyHeader | EmptyHeader",
+          "name": "DataTableHeader",
+          "ts": "type DataTableHeader = NonEmptyHeader | EmptyHeader"
+        },
+        {
+          "type": "Record<Key, Value>",
+          "name": "Row",
+          "ts": "type Row = Record<Key, Value>"
+        },
+        { "type": "string", "name": "RowId", "ts": "type RowId = string" },
+        {
+          "type": "{ key: Key; value: Value; }",
+          "name": "Cell",
+          "ts": "interface Cell { key: Key; value: Value; }"
         }
       ],
       "rest_props": { "type": "InlineComponent", "name": "TableContainer" }
@@ -2858,7 +2889,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the value of the search input",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,
@@ -3193,7 +3224,11 @@
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" }
+      "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" },
+      "extends": {
+        "interface": "OverflowMenuProps",
+        "import": "\"../OverflowMenu/OverflowMenu\""
+      }
     },
     {
       "moduleName": "ToolbarMenuItem",
@@ -3209,7 +3244,11 @@
         }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" }
+      "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" },
+      "extends": {
+        "interface": "OverflowMenuItemProps",
+        "import": "\"../OverflowMenu/OverflowMenuItem\""
+      }
     },
     {
       "moduleName": "DataTableSkeleton",
@@ -3313,7 +3352,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the date picker input value",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,
@@ -4600,11 +4639,12 @@
         {
           "name": "__default__",
           "default": true,
-          "slot_props": "{ props?: { class: string; } }"
+          "slot_props": "{ props: { class: string; [key: string]: any; } }"
         }
       ],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
     },
     {
       "moduleName": "Row",
@@ -4675,11 +4715,12 @@
         {
           "name": "__default__",
           "default": true,
-          "slot_props": "{ props?: { class: string; [key: string]: any; } }"
+          "slot_props": "{ props: { class: string; [key: string]: any; } }"
         }
       ],
       "events": [],
-      "typedefs": []
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
     },
     {
       "moduleName": "Column",
@@ -4784,7 +4825,7 @@
         {
           "name": "__default__",
           "default": true,
-          "slot_props": "{ props?: { class: string; } }"
+          "slot_props": "{props: { class: string; [key: string]: any; }}"
         }
       ],
       "events": [],
@@ -4804,7 +4845,8 @@
           "name": "ColumnBreakpoint",
           "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor"
         }
-      ]
+      ],
+      "rest_props": { "type": "Element", "name": "div" }
     },
     {
       "moduleName": "IconSkeleton",
@@ -4838,7 +4880,7 @@
         {
           "name": "render",
           "kind": "let",
-          "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)",
+          "description": "Specify the icon from `carbon-icons-svelte` to render",
           "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
           "isFunction": false,
           "constant": false,
@@ -4867,7 +4909,11 @@
         { "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "InlineComponent", "name": "IconSkeleton" }
+      "rest_props": { "type": "Element", "name": "svg" },
+      "extends": {
+        "interface": "IconSkeletonProps",
+        "import": "\"./IconSkeleton\""
+      }
     },
     {
       "moduleName": "InlineLoading",
@@ -5084,7 +5130,7 @@
           "name": "sortItem",
           "kind": "let",
           "description": "Override the sorting logic\nThe default sorting compare the item text value",
-          "type": "(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem",
+          "type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)",
           "value": "(a, b) =>     a.text.localeCompare(b.text, locale, { numeric: true })",
           "isFunction": true,
           "constant": false,
@@ -5823,7 +5869,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the input value",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,
@@ -6110,6 +6156,7 @@
           "name": "selected",
           "kind": "let",
           "description": "Specify the selected item value",
+          "type": "string",
           "isFunction": false,
           "constant": false,
           "reactive": true
@@ -7832,7 +7879,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the input value",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,
@@ -8055,7 +8102,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the input value",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,
@@ -8064,8 +8111,8 @@
         {
           "name": "type",
           "kind": "let",
-          "description": "Specify the input type",
+          "description": "Set to `\"text\"` to toggle the password visibility",
-          "type": "string",
+          "type": "\"text\" | \"password\"",
           "value": "\"password\"",
           "isFunction": false,
           "constant": false,
@@ -8820,7 +8867,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the select value",
-          "type": "string",
+          "type": "number | string",
           "value": "\"\"",
           "isFunction": false,
           "constant": false,

docs/src/pages/components/SelectableTile.svx

@@ -1,9 +1,9 @@
 ---
-components: ["TileGroup", "SelectableTile"]
+components: ["SelectableTile"]
 ---
 
 <script>
-  import { TileGroup, SelectableTile } from "carbon-components-svelte";
+  import { SelectableTile } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 

src/Accordion/Accordion.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"./AccordionSkeleton"} AccordionSkeletonProps */
+
   /**
    * Specify alignment of accordion item chevron icon
    * @type {"start" | "end"}

src/Breadcrumb/Breadcrumb.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"./BreadcrumbSkeleton"} BreadcrumbSkeletonProps */
+
   /** Set to `true` to hide the breadcrumb trailing slash */
   export let noTrailingSlash = false;
 

src/Button/Button.svelte

@@ -1,6 +1,8 @@
 <script>
   /**
-   * @slot {{ props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
+   * @extends {"./ButtonSkeleton"} ButtonSkeletonProps
+   * @restProps {button | a | div}
+   * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
    */
 
   /**

src/ComposedModal/ComposedModal.svelte

@@ -17,7 +17,10 @@
   /** Specify a class for the inner modal */
   export let containerClass = "";
 
-  /** Specify a selector to be focused when opening the modal */
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @type {null | string}
+   */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
 
   /** Obtain a reference to the top-level HTML element */
@@ -52,7 +55,7 @@
 
   function focus(element) {
     if (selectorPrimaryFocus == null) {
-      return
+      return;
     }
     const node =
       (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;

src/CopyButton/CopyButton.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"../Copy/Copy"} CopyProps */
+
   /** Set the title and ARIA label for the copy button */
   export let iconDescription = "Copy to clipboard";
 

src/DataTable/DataTable.svelte

@@ -1,30 +1,36 @@
 <script>
   /**
-   * @typedef {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }} Header
+   * @typedef {string} Key
-   * @typedef {Header[]} Headers
+   * @typedef {any} Value
-   * @slot {{ row: Object; }} expanded-row
+   * @typedef {{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} EmptyHeader
-   * @slot {{ header: Header}} cell-header
+   * @typedef {{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} NonEmptyHeader
-   * @slot {{ row: Object; cell: Object; }} cell
+   * @typedef {NonEmptyHeader | EmptyHeader} DataTableHeader
-   * @event {{ header?: Header; row?: Object; cell?: Object; }} click
+   * @typedef {Record<Key, Value>} Row
+   * @typedef {string} RowId
+   * @typedef {{ key: Key; value: Value; }} Cell
+   * @slot {{ row: Row; }} expanded-row
+   * @slot {{ header: NonEmptyHeader; }} cell-header
+   * @slot {{ row: Row; cell: Cell; }} cell
+   * @event {{ header?: DataTableHeader; row?: Row; cell?: Cell; }} click
    * @event {{ expanded: boolean; }} click:header--expand
-   * @event {{ header: Header; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
-   * @event {Object} click:row
+   * @event {Row} click:row
-   * @event {Object} mouseenter:row
+   * @event {Row} mouseenter:row
-   * @event {Object} mouseleave:row
+   * @event {Row} mouseleave:row
-   * @event {{ expanded: boolean; row: Object; }} click:row--expand
+   * @event {{ expanded: boolean; row: Row; }} click:row--expand
-   * @event {Object} click:cell
+   * @event {Cell} click:cell
    */
 
   /**
    * Specify the data table headers
-   * @type {Headers}
+   * @type {DataTableHeader[]}
    */
   export let headers = [];
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
-   * @type {Object[]}
+   * @type {Row[]}
    */
   export let rows = [];
 
@@ -59,7 +65,7 @@
 
   /**
    * Specify the row ids to be expanded
-   * @type {string[]}
+   * @type {RowId[]}
    */
   export let expandedRowIds = [];
 
@@ -77,7 +83,7 @@
 
   /**
    * Specify the row ids to be selected
-   * @type {string[]}
+   * @type {RowId[]}
    */
   export let selectedRowIds = [];
 

src/DataTable/ToolbarMenu.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"../OverflowMenu/OverflowMenu"} OverflowMenuProps */
+
   import { getContext } from "svelte";
   import Settings16 from "carbon-icons-svelte/lib/Settings16";
   import { OverflowMenu } from "../OverflowMenu";

src/DataTable/ToolbarMenuItem.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"../OverflowMenu/OverflowMenuItem"} OverflowMenuItemProps */
+
   import { OverflowMenuItem } from "../OverflowMenu";
 </script>
 

src/DataTable/ToolbarSearch.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the value of the search input */
+  /**
+   * Specify the value of the search input
+   * @type {number | string}
+   */
   export let value = "";
 
   /** Set to `true` to expand the search bar */

src/DatePicker/DatePicker.svelte

@@ -9,7 +9,10 @@
    */
   export let datePickerType = "simple";
 
-  /** Specify the date picker input value */
+  /**
+   * Specify the date picker input value
+   * @type {number | string}
+   */
   export let value = "";
 
   /**

src/Grid/Column.svelte

@@ -3,6 +3,8 @@
    * @typedef {boolean | number} ColumnSize
    * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
    * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
+   * @restProps {div}
+   * @slot {{props: { class: string; [key: string]: any; }}}
    */
 
   /**

src/Grid/Grid.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
-   * @slot {{ props?: { class: string; } }}
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
    */
 
   /**

src/Grid/Row.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
-   * @slot {{ props?: { class: string; [key: string]: any; } }}
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
    */
 
   /**

src/Icon/Icon.svelte

@@ -1,7 +1,11 @@
 <script>
+  /**
+   * @extends {"./IconSkeleton"} IconSkeletonProps
+   * @restProps {svg}
+   */
+
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * Icon size must be 16px (e.g. `Add16`, `Task16`)
    * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let render = undefined;

src/MultiSelect/MultiSelect.svelte

@@ -67,7 +67,7 @@
   /**
    * Override the sorting logic
    * The default sorting compare the item text value
-   * @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem}
+   * @type {((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)}
    */
   export let sortItem = (a, b) =>
     a.text.localeCompare(b.text, locale, { numeric: true });

src/NumberInput/NumberInput.svelte

@@ -9,7 +9,10 @@
    */
   export let size = undefined;
 
-  /** Specify the input value */
+  /**
+   * Specify the input value
+   * @type {number | string}
+   */
   export let value = "";
 
   /** Specify the step increment */

src/Select/Select.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the selected item value */
+  /**
+   * Specify the selected item value
+   * @type {string}
+   */
   export let selected = undefined;
 
   /**

src/TextInput/PasswordInput.svelte

@@ -5,10 +5,16 @@
    */
   export let size = undefined;
 
-  /** Specify the input value */
+  /**
+   * Specify the input value
+   * @type {number | string}
+   */
   export let value = "";
 
-  /** Specify the input type */
+  /**
+   * Set to `"text"` to toggle the password visibility
+   * @type {"text" | "password"}
+   */
   export let type = "password";
 
   /** Specify the placeholder text */

src/TextInput/TextInput.svelte

@@ -5,7 +5,10 @@
    */
   export let size = undefined;
 
-  /** Specify the input value */
+  /**
+   * Specify the input value
+   * @type {number | string}
+   */
   export let value = "";
 
   /** Specify the input type */

src/TimePicker/TimePickerSelect.svelte

@@ -1,5 +1,8 @@
 <script>
-  /** Specify the select value */
+  /**
+   * Specify the select value
+   * @type {number | string}
+   */
   export let value = "";
 
   /** Set to `true` to disable the select */

tests/Accordion.test.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+  import { Accordion, AccordionItem } from "../types";
+</script>
+
+<Accordion>
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion align="start">
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion>
+  <AccordionItem>
+    <div slot="title">
+      <h5>Natural Language Classifier</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem>
+    <div slot="title">
+      <h5>Natural Language Understanding</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem>
+    <div slot="title">
+      <h5>Language Translator</h5>
+      <div>AI / Machine Learning</div>
+    </div>
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion>
+  <AccordionItem open title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion size="xl">
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion size="sm">
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion disabled>
+  <AccordionItem title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion>
+  <AccordionItem disabled title="Natural Language Classifier">
+    <p>
+      Natural Language Classifier uses advanced natural language processing and
+      machine learning techniques to create custom classification models. Users
+      train their data and the service predicts the appropriate category for the
+      inputted text.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Natural Language Understanding">
+    <p>
+      Analyze text to extract meta-data from content such as concepts, entities,
+      emotion, relations, sentiment and more.
+    </p>
+  </AccordionItem>
+  <AccordionItem title="Language Translator">
+    <p>
+      Translate text, documents, and websites from one language to another.
+      Create industry or region-specific translations via the service's
+      customization capability.
+    </p>
+  </AccordionItem>
+</Accordion>
+
+<Accordion skeleton />
+
+<Accordion skeleton align="start" />
+
+<Accordion skeleton count="{3}" />
+
+<Accordion skeleton open="{false}" />
+
+<Accordion skeleton size="xl" />
+
+<Accordion skeleton size="sm" />

tests/AspectRatio.test.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { AspectRatio, Tile } from "../types";
+</script>
+
+<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
+  2x1
+</AspectRatio>
+
+<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
+  16x9
+</AspectRatio>
+
+<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
+  4x3
+</AspectRatio>
+
+<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
+  1x1
+</AspectRatio>
+
+<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
+  3x4
+</AspectRatio>
+
+<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
+  9x16
+</AspectRatio>
+
+<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
+  1x2
+</AspectRatio>
+
+<AspectRatio ratio="16x9">
+  <Tile style="height: 100%">Content</Tile>
+</AspectRatio>

tests/AspectRatioColumns.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+    <Column
+      aspectRatio="2x1"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      2x1
+    </Column>
+  </Row>
+</Grid>

tests/Breadcrumb.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Breadcrumb, BreadcrumbItem } from "../types";
+</script>
+
+<Breadcrumb>
+  <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
+  <BreadcrumbItem href="/reports">Annual reports</BreadcrumbItem>
+  <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
+</Breadcrumb>
+
+<Breadcrumb noTrailingSlash>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
+</Breadcrumb>
+
+<Breadcrumb noTrailingSlash skeleton count="{3}" />

tests/Breadcrumbs.test.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  type Items = { href?: string; text: string }[];
+
+  export let items: Items = [
+    { href: "/", text: "Dashboard" },
+    { href: "/reports", text: "Annual reports" },
+    { href: "/reports/2019", text: "2019" },
+  ];
+
+  import { Row, Column, Breadcrumb, BreadcrumbItem } from "../types";
+</script>
+
+<Row>
+  <Column>
+    <Breadcrumb>
+      {#each items as item, i}
+        <BreadcrumbItem
+          href="{item.href}"
+          isCurrentPage="{i === items.length - 1}"
+        >
+          {item.text}
+        </BreadcrumbItem>
+      {/each}
+    </Breadcrumb>
+  </Column>
+</Row>

tests/Button.test.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Button } from "../types";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+</script>
+
+<Button>Primary button</Button>
+
+<Button kind="secondary">Secondary button</Button>
+
+<Button kind="tertiary">Tertiary button</Button>
+
+<Button kind="ghost">Ghost button</Button>
+
+<Button kind="danger">Danger button</Button>
+
+<Button kind="danger-tertiary">Danger tertiary button</Button>
+
+<Button kind="danger-ghost">Danger ghost button</Button>
+
+<Button icon="{Add16}">With icon</Button>
+
+<Button
+  icon="{Add16}"
+  hasIconOnly
+  tooltipPosition="bottom"
+  tooltipAlignment="center"
+  iconDescription="Tooltip text"
+/>
+
+<Button href="#">Link button</Button>
+
+<Button as let:props>
+  <p {...props}>Custom element</p>
+</Button>
+
+<Button size="field">Primary</Button>
+
+<Button size="field" kind="secondary">Secondary</Button>
+
+<Button size="field" kind="tertiary">Tertiary</Button>
+
+<Button size="field" kind="ghost">Ghost</Button>
+
+<Button size="field" kind="danger">Danger</Button>
+
+<Button size="small">Primary</Button>
+
+<Button size="small" kind="secondary">Secondary</Button>
+
+<Button size="small" kind="tertiary">Tertiary</Button>
+
+<Button size="small" kind="ghost">Ghost</Button>
+
+<Button size="small" kind="danger">Danger</Button>
+
+<Button disabled>Disabled button</Button>
+
+<Button skeleton />
+
+<Button skeleton size="field" />
+
+<Button skeleton size="small" />

tests/Checkbox.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Checkbox } from "../types";
+</script>
+
+<Checkbox labelText="Label text" />
+
+<Checkbox labelText="Label text" checked />
+
+<Checkbox labelText="Label text" indeterminate />
+
+<Checkbox labelText="Label text" hideLabel />
+
+<Checkbox labelText="Label text" disabled />
+
+<Checkbox skeleton />

tests/ClickableTile.test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { ClickableTile } from "../types";
+</script>
+
+<ClickableTile href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</ClickableTile>
+
+<ClickableTile light href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</ClickableTile>

tests/CodeSnippet.test.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { CodeSnippet, InlineNotification } from "../types";
+
+  let code = `// helpers.js
+  
+export function multiply(a: number, b: number) {
+  return a * b;
+}
+
+export function divide(a: number, b: number) {
+  return a / b;
+}
+
+export function add(a: number, b: number) {
+  return a + b;
+}
+
+export function subtract(a: number, b: number) {
+  return a - b;
+}`;
+
+  let comment = `
+> \`../types\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
+
+> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
+`;
+</script>
+
+<InlineNotification
+  svx-ignore
+  lowContrast
+  title="Note:"
+  subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
+  kind="info"
+  hideCloseButton
+/>
+
+<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+
+<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
+
+<CodeSnippet type="multi" code="{code}" />
+
+<CodeSnippet type="multi" code="{code}" hideCopyButton />
+
+<CodeSnippet wrapText type="multi" code="{comment}" />
+
+<CodeSnippet skeleton />
+
+<CodeSnippet type="multi" skeleton />

tests/ComboBox.test.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { ComboBox } from "../types";
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  selectedIndex="{1}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<ComboBox
+  light
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  size="xl"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  size="sm"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<ComboBox
+  disabled
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>

tests/ComposedModal.test.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import {
+    ComposedModal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+    Checkbox,
+  } from "../types";
+
+  let checked = false;
+</script>
+
+<ComposedModal open>
+  <ModalHeader title="Confirm changes" />
+  <ModalBody hasForm>
+    <Checkbox labelText="I have reviewed the changes" bind:checked />
+  </ModalBody>
+  <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
+</ComposedModal>

tests/CondensedGrid.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid condensed>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

tests/ContentSwitcher.test.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { ContentSwitcher, Switch } from "../types";
+  import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
+  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
+</script>
+
+<ContentSwitcher>
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+</ContentSwitcher>
+
+<ContentSwitcher selectedIndex="{1}">
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+  <Switch text="Recommended" />
+</ContentSwitcher>
+
+<ContentSwitcher light>
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+</ContentSwitcher>
+
+<ContentSwitcher>
+  <Switch>
+    <div style="display: flex; align-items: center;">
+      <Bullhorn16 style="margin-right: 0.5rem;" />
+      Latest news
+    </div>
+  </Switch>
+  <Switch>
+    <div style="display: flex; align-items: center;">
+      <Analytics16 style="margin-right: 0.5rem;" />
+      Trending
+    </div>
+  </Switch>
+</ContentSwitcher>
+
+<Bullhorn16 style="margin-right: 0.5rem;" />
+
+<Analytics16 style="margin-right: 0.5rem;" />
+
+<ContentSwitcher size="xl">
+  <Switch text="All" />
+  <Switch text="Archived" />
+</ContentSwitcher>
+
+<ContentSwitcher size="sm">
+  <Switch text="All" />
+  <Switch text="Archived" />
+</ContentSwitcher>
+
+<ContentSwitcher>
+  <Switch disabled text="All" />
+  <Switch disabled text="Archived" />
+</ContentSwitcher>

tests/CopyButton.test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { CopyButton, InlineNotification } from "../types";
+</script>
+
+<InlineNotification
+  svx-ignore
+  lowContrast
+  title="Note:"
+  subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
+  kind="info"
+  hideCloseButton
+/>
+
+<CopyButton on:click />
+
+<CopyButton on:click feedback="Copied to clipboard" />

tests/CopyableCodeSnippet.test.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let copy = (text: string) => text;
+  export let code = "yarn add -D carbon-component-svelte";
+
+  import { CodeSnippet } from "../types";
+</script>
+
+<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>

tests/DangerModal.test.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Button, Modal } from "../types";
+
+  let open = false;
+</script>
+
+<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
+
+<Modal
+  danger
+  bind:open
+  modalHeading="Delete all instances"
+  primaryButtonText="Delete"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>This is a permanent action and cannot be undone.</p>
+</Modal>

tests/DataTable.test.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import {
+    DataTable,
+    DataTableSkeleton,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
+    Button,
+    Link,
+  } from "../types";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+  ];
+
+  function sort(a: any, b: any) {
+    if (new Date(a) > new Date(b)) return 1;
+    return 0;
+  }
+</script>
+
+<DataTable headers="{headers}" rows="{rows}" />
+
+<DataTable headers="{headers}" rows="{rows}">
+  <span slot="cell-header" let:header>
+    {#if header.key === 'port'}
+      {header.value}
+      (network)
+    {:else}{header.value}{/if}
+  </span>
+  <span slot="cell" let:cell>
+    {#if cell.key === 'rule' && cell.value === 'Round robin'}
+      <Link
+        inline
+        href="https://en.wikipedia.org/wiki/Round-robin_DNS"
+        target="_blank"
+      >
+        {cell.value}
+        <Launch16 />
+      </Link>
+    {:else}{cell.value}{/if}
+  </span>
+</DataTable>
+
+<DataTable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+/>
+
+<DataTable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+>
+  <Toolbar>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
+<DataTable
+  size="short"
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{headers}"
+  rows="{rows}"
+>
+  <Toolbar size="sm">
+    <ToolbarContent>
+      <ToolbarSearch />
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>
+
+<DataTable zebra headers="{headers}" rows="{rows}" />
+
+<DataTable size="tall" headers="{headers}" rows="{rows}" />
+
+<DataTable size="short" headers="{headers}" rows="{rows}" />
+
+<DataTable size="compact" headers="{headers}" rows="{rows}" />
+
+<DataTable sortable headers="{headers}" rows="{rows}" />
+
+<DataTable
+  sortable
+  title="Load balancers"
+  description="Your organization's active load balancers."
+  headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}"
+  rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}"
+/>
+
+<DataTable expandable headers="{headers}" rows="{rows}">
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+<DataTable batchExpansion headers="{headers}" rows="{rows}">
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+<DataTableSkeleton />
+
+<DataTableSkeleton
+  headers="{['Name', 'Protocol', 'Port', 'Rule']}"
+  rows="{10}"
+/>
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
+
+<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />

tests/DataTableAppendColumns.test.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { DataTable, OverflowMenu, OverflowMenuItem } from "../types";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+    { key: "overflow", empty: true },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+</script>
+
+<DataTable sortable headers="{headers}" rows="{rows}">
+  <span slot="cell" let:cell>
+    {#if cell.key === 'overflow'}
+      <OverflowMenu flipped>
+        <OverflowMenuItem text="Restart" />
+        <OverflowMenuItem
+          href="https://cloud.ibm.com/docs/loadbalancer-service"
+          text="API documentation"
+        />
+        <OverflowMenuItem danger text="Stop" />
+      </OverflowMenu>
+    {:else}{cell.value}{/if}
+  </span>
+</DataTable>

tests/DataTableBatchSelection.test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { DataTable } from "../types";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable
+  batchSelection
+  bind:selectedRowIds
+  headers="{headers}"
+  rows="{rows}"
+/>

tests/DataTableBatchSelectionToolbar.test.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {
+    DataTable,
+    Toolbar,
+    ToolbarContent,
+    ToolbarSearch,
+    ToolbarMenu,
+    ToolbarMenuItem,
+    ToolbarBatchActions,
+    Button,
+  } from "../types";
+  import Save16 from "carbon-icons-svelte/lib/Save16";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[0].id, rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
+  <Toolbar>
+    <ToolbarBatchActions>
+      <Button icon="{Save16}">Save</Button>
+    </ToolbarBatchActions>
+    <ToolbarContent>
+      <ToolbarSearch />
+      <ToolbarMenu>
+        <ToolbarMenuItem primaryFocus>Restart all</ToolbarMenuItem>
+        <ToolbarMenuItem href="https://cloud.ibm.com/docs/loadbalancer-service">
+          API documentation
+        </ToolbarMenuItem>
+        <ToolbarMenuItem danger>Stop all</ToolbarMenuItem>
+      </ToolbarMenu>
+      <Button>Create balancer</Button>
+    </ToolbarContent>
+  </Toolbar>
+</DataTable>

tests/DatePicker.test.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { DatePicker, DatePickerSkeleton, DatePickerInput } from "../types";
+</script>
+
+<DatePicker>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+<DatePicker>
+  <DatePickerInput
+    hideLabel
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+
+<DatePicker light>
+  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+<DatePicker>
+  <DatePickerInput
+    size="xl"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+
+<DatePicker>
+  <DatePickerInput
+    size="sm"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+
+<DatePicker>
+  <DatePickerInput
+    invalid
+    invalidText="Invalid date"
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+
+<DatePicker>
+  <DatePickerInput
+    disabled
+    labelText="Date of birth"
+    placeholder="mm/dd/yyyy"
+  />
+</DatePicker>
+
+<DatePicker datePickerType="single">
+  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
+</DatePicker>
+
+<DatePickerSkeleton />

tests/Dropdown.test.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Dropdown, DropdownSkeleton } from "../types";
+</script>
+
+<Dropdown
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  itemToString="{(item) => {
+    return item.text + ' (' + item.id + ')';
+  }}"
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  light
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  type="inline"
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  size="xl"
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  size="sm"
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<Dropdown
+  disabled
+  titleText="Contact"
+  selectedIndex="{0}"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<DropdownSkeleton />

tests/DynamicCodeSnippet.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { ToggleSmall, CodeSnippet } from "../types";
+
+  let toggled = false;
+
+  $: length = toggled ? 20 : 10;
+  $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
+</script>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Trigger snippet overflow"
+  bind:toggled
+/>
+<CodeSnippet type="multi" code="{code}" />

tests/ExpandableTile.test.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { ExpandableTile } from "../types";
+</script>
+
+<ExpandableTile>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+
+<ExpandableTile expanded>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>
+
+<ExpandableTile light>
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>

tests/FileUploader.test.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import {
+    FileUploaderButton,
+    FileUploader,
+    FileUploaderDropContainer,
+    FileUploaderItem,
+    FileUploaderSkeleton,
+  } from "../types";
+</script>
+
+<FileUploaderButton labelText="Add files" />
+
+<FileUploader
+  multiple
+  labelTitle="Upload files"
+  buttonLabel="Add files"
+  labelDescription="Only JPEG files are accepted."
+  accept="{['.jpg', '.jpeg']}"
+  status="complete"
+/>
+
+<FileUploaderItem name="README.md" status="uploading" />
+
+<FileUploaderItem name="README.md" status="complete" />
+
+<FileUploaderItem invalid name="README.md" status="edit" />
+
+<FileUploaderDropContainer
+  labelText="Drag and drop files here or click to upload"
+  multiple
+/>
+
+<FileUploaderSkeleton />

tests/FilterableComboBox.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { ComboBox } from "../types";
+
+  function shouldFilterItem(item: { text: string }, value?: any) {
+    if (!value) return true;
+    return item.text.toLowerCase().includes(value.toLowerCase());
+  }
+</script>
+
+<ComboBox
+  titleText="Contact"
+  placeholder="Select contact method"
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  shouldFilterItem="{shouldFilterItem}"
+/>

tests/FluidForm.test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { FluidForm, TextInput, PasswordInput } from "../types";
+</script>
+
+<FluidForm>
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
+  <PasswordInput
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>

tests/Form.test.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import {
+    Form,
+    FormGroup,
+    Checkbox,
+    RadioButtonGroup,
+    RadioButton,
+    Select,
+    SelectItem,
+    Button,
+  } from "../types";
+</script>
+
+<Form on:submit>
+  <FormGroup legendText="Checkboxes">
+    <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
+    <Checkbox id="checkbox-1" labelText="Checkbox Label" />
+    <Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
+  </FormGroup>
+  <FormGroup legendText="Radio buttons">
+    <RadioButtonGroup name="radio-button-group" selected="default-selected">
+      <RadioButton
+        id="radio-1"
+        value="standard"
+        labelText="Standard Radio Button"
+      />
+      <RadioButton
+        id="radio-2"
+        value="default-selected"
+        labelText="Default Selected Radio Button"
+      />
+      <RadioButton
+        id="radio-4"
+        value="disabled"
+        labelText="Disabled Radio Button"
+        disabled
+      />
+    </RadioButtonGroup>
+  </FormGroup>
+  <FormGroup>
+    <Select id="select-1" labelText="Select menu" value="placeholder-item">
+      <SelectItem
+        disabled
+        hidden
+        value="placeholder-item"
+        text="Choose an option"
+      />
+      <SelectItem value="option-1" text="Option 1" />
+      <SelectItem value="option-2" text="Option 2" />
+      <SelectItem value="option-3" text="Option 3" />
+    </Select>
+  </FormGroup>
+  <Button type="submit">Submit</Button>
+</Form>

tests/FullWidthGrid.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid fullWidth>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

tests/Grid.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

tests/HeaderNav.test.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "../types";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

tests/HeaderSwitcher.test.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderPanelLinks,
+    HeaderPanelDivider,
+    HeaderPanelLink,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "../types";
+
+  let isSideNavOpen = false;
+  let isOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderAction bind:isOpen>
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+  </HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

tests/HeaderUtilities.test.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import {
+    Header,
+    HeaderUtilities,
+    HeaderAction,
+    HeaderActionSearch,
+    HeaderGlobalAction,
+    HeaderPanelLinks,
+    HeaderPanelDivider,
+    HeaderPanelLink,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "../types";
+  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+
+  let isSideNavOpen = false;
+  let isOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderActionSearch />
+    <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust20}" />
+    <HeaderAction bind:isOpen>
+      <HeaderPanelLinks>
+        <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelDivider>Switcher subject 2</HeaderPanelDivider>
+        <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 2</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 3</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 4</HeaderPanelLink>
+        <HeaderPanelLink>Switcher item 5</HeaderPanelLink>
+      </HeaderPanelLinks>
+    </HeaderAction>
+  </HeaderUtilities>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

tests/HiddenCodeSnippet.test.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { ToggleSmall, CodeSnippet } from "../types";
+
+  let toggled = false;
+
+  const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
+</script>
+
+<style>
+  .hidden {
+    display: none;
+  }
+</style>
+
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Show code snippets"
+  bind:toggled
+/>
+
+{#if toggled}
+  <h5>"Show more" will not render</h5><br />
+{/if}
+<div class:hidden="{!toggled}">
+  <CodeSnippet type="multi" code="{code}" />
+</div>
+
+{#if toggled}
+  <br /><br />
+  <h5>"Show more" will render</h5><br />
+  <div class:hidden="{!toggled}">
+    <CodeSnippet type="multi" code="{code}" />
+  </div>
+{/if}

tests/Icon.test.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Icon } from "../types";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+  import Add20 from "carbon-icons-svelte/lib/Add20";
+  import Add24 from "carbon-icons-svelte/lib/Add24";
+  import Add32 from "carbon-icons-svelte/lib/Add32";
+</script>
+
+<Icon render="{Add16}" />
+
+<Icon render="{Add20}" />
+
+<Icon render="{Add24}" />
+
+<Icon render="{Add32}" />
+
+<Icon skeleton render="{Add16}" />
+
+<Icon skeleton size="{20}" render="{Add20}" />
+
+<Icon skeleton size="{24}" render="{Add24}" />
+
+<Icon skeleton size="{32}" render="{Add32}" />

tests/InlineLoading.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { InlineLoading } from "../types";
+</script>
+
+<InlineLoading />
+
+<InlineLoading description="Loading metrics..." />
+
+<InlineLoading status="active" description="Submitting..." />
+
+<InlineLoading status="inactive" description="Cancelling..." />
+
+<InlineLoading status="finished" description="Success" />
+
+<InlineLoading status="error" description="An error occurred" />

tests/InlineLoadingUx.test.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Button, ButtonSet, InlineLoading } from "../types";
+  import { onDestroy } from "svelte";
+
+  type State = "dormant" | "active" | "finished" | "inactive";
+
+  const descriptionMap = {
+    active: "Submitting...",
+    finished: "Success",
+    inactive: "Cancelling...",
+  };
+
+  const stateMap = {
+    active: "finished",
+    inactive: "dormant",
+    finished: "dormant",
+  };
+
+  let timeout = undefined;
+  let state: State = "dormant";
+
+  function reset(incomingState?: State) {
+    if (typeof timeout === "number") {
+      clearTimeout(timeout);
+    }
+
+    if (incomingState) {
+      timeout = setTimeout(() => {
+        state = incomingState;
+      }, 2000);
+    }
+  }
+
+  onDestroy(reset);
+
+  $: reset(stateMap[state]);
+</script>
+
+<ButtonSet>
+  <Button
+    kind="ghost"
+    disabled="{state === 'dormant' || state === 'finished'}"
+    on:click="{() => (state = 'inactive')}"
+  >
+    Cancel
+  </Button>
+  {#if state !== 'dormant'}
+    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+  {:else}
+    <Button on:click="{() => (state = 'active')}">Submit</Button>
+  {/if}
+</ButtonSet>

tests/InlineNotification.test.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { InlineNotification, NotificationActionButton } from "../types";
+</script>
+
+<InlineNotification on:close />
+
+<InlineNotification
+  hideCloseButton
+  kind="warning"
+  title="Upcoming scheduled maintenance"
+/>
+
+<InlineNotification kind="warning" title="Upcoming scheduled maintenance">
+  <div slot="actions">
+    <NotificationActionButton>Learn more</NotificationActionButton>
+  </div>
+</InlineNotification>
+
+<NotificationActionButton>Learn more</NotificationActionButton>
+
+<InlineNotification kind="error" />
+
+<InlineNotification kind="info" />
+
+<InlineNotification kind="info-square" />
+
+<InlineNotification kind="success" />
+
+<InlineNotification kind="warning" />
+
+<InlineNotification kind="warning-alt" />
+
+<InlineNotification lowContrast kind="error" />
+
+<InlineNotification lowContrast kind="info" />
+
+<InlineNotification lowContrast kind="info-square" />
+
+<InlineNotification lowContrast kind="success" />
+
+<InlineNotification lowContrast kind="warning" />
+
+<InlineNotification lowContrast kind="warning-alt" />

tests/Link.test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Link } from "../types";
+</script>
+
+<Link href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
+
+<Link href="https://www.carbondesignsystem.com/" target="_blank">
+  Carbon Design System
+</Link>
+
+<Link inline href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+
+<Link size="lg" href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+
+<Link size="sm" href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+
+<Link disabled href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>
+
+<Link visited href="https://www.carbondesignsystem.com/">
+  Carbon Design System
+</Link>

tests/Loading.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Loading } from "../types";
+</script>
+
+<Loading withOverlay="{false}" />
+
+<Loading withOverlay="{false}" small />

tests/Modal.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Button, Modal } from "../types";
+
+  let open = false;
+</script>
+
+<Button on:click="{() => (open = true)}">Create database</Button>
+
+<Modal
+  bind:open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary="{() => (open = false)}"
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

tests/ModalExtraSmall.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Modal } from "../types";
+</script>
+
+<Modal
+  size="xs"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

tests/ModalLarge.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Modal } from "../types";
+</script>
+
+<Modal
+  size="lg"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

tests/ModalPreventOutsideClick.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Modal } from "../types";
+</script>
+
+<Modal
+  preventCloseOnClickOutside
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

tests/ModalSmall.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Modal } from "../types";
+</script>
+
+<Modal
+  size="sm"
+  open
+  modalHeading="Create database"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+  on:click:button--secondary
+  on:open
+  on:close
+  on:submit
+>
+  <p>Create a new Cloudant database in the US South region.</p>
+</Modal>

tests/MultiSelect.test.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { MultiSelect } from "../types";
+</script>
+
+<MultiSelect
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  sortItem="{() => {}}"
+/>
+
+<MultiSelect
+  selectedIds="{['0', '1']}"
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  itemToString="{(item) => {
+    return item.text + ' (' + item.id + ')';
+  }}"
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+  sortItem="{() => {}}"
+/>
+
+<MultiSelect
+  light
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  type="inline"
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  size="xl"
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  size="sm"
+  titleText="Contact"
+  label="Select contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>
+
+<MultiSelect
+  filterable
+  titleText="Contact"
+  placeholder="Filter contact methods..."
+  items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
+/>

tests/NarrowGrid.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid narrow>
+  <Row>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+    <Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
+  </Row>
+</Grid>

tests/NumberInput.test.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { NumberInput, NumberInputSkeleton } from "../types";
+</script>
+
+<NumberInput label="Clusters" />
+
+<NumberInput
+  label="Clusters"
+  helperText="Clusters provisioned in your region"
+/>
+
+<NumberInput
+  min="{4}"
+  max="{20}"
+  value="{4}"
+  invalidText="Number must be between 4 and 20."
+  helperText="Clusters provisioned in your region"
+  label="Clusters (4 min, 20 max)"
+/>
+
+<NumberInput hideLabel label="Clusters" />
+
+<NumberInput light label="Clusters" />
+
+<NumberInput mobile label="Clusters" />
+
+<NumberInput size="xl" label="Clusters" />
+
+<NumberInput size="sm" label="Clusters" />
+
+<NumberInput invalid invalidText="An error occurred" label="Clusters" />
+
+<NumberInput disabled label="Clusters" />
+
+<NumberInputSkeleton />
+
+<NumberInputSkeleton hideLabel />

tests/OffsetColumns.test.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm="{{ span: 1, offset: 3 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 3
+    </Column>
+    <Column
+      sm="{{ span: 2, offset: 2 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 2
+    </Column>
+    <Column
+      sm="{{ span: 3, offset: 1 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 1
+    </Column>
+    <Column
+      sm="{{ span: 4, offset: 0 }}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      Offset 0
+    </Column>
+  </Row>
+</Grid>

tests/OrderedList.test.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { OrderedList, ListItem, Link } from "../types";
+</script>
+
+<OrderedList>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+  <ListItem>Ordered list item</ListItem>
+</OrderedList>
+
+<OrderedList>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+  <ListItem>
+    <Link href="#">Ordered list item</Link>
+  </ListItem>
+</OrderedList>
+
+<OrderedList>
+  <ListItem>
+    Ordered list level 1
+    <OrderedList nested>
+      <ListItem>Ordered list level 2</ListItem>
+      <ListItem>
+        Ordered list level 3
+        <OrderedList nested>
+          <ListItem>Ordered list level 3</ListItem>
+          <ListItem>Ordered list level 3</ListItem>
+        </OrderedList>
+      </ListItem>
+    </OrderedList>
+  </ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+</OrderedList>
+
+<OrderedList native>
+  <ListItem>
+    Ordered list level 1
+    <OrderedList nested>
+      <ListItem>Ordered list level 2</ListItem>
+      <ListItem>
+        Ordered list level 3
+        <OrderedList nested>
+          <ListItem>Ordered list level 3</ListItem>
+          <ListItem>Ordered list level 3</ListItem>
+        </OrderedList>
+      </ListItem>
+    </OrderedList>
+  </ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+</OrderedList>

tests/OverflowMenu.test.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { OverflowMenu, OverflowMenuItem } from "../types";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
+</script>
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu open flipped>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu flipped direction="top">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu size="xl">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu size="sm">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem primaryFocus danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu icon="{Add16}">
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+<OverflowMenu style="width: auto;">
+  <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
+  <OverflowMenuItem text="Manage credentials" />
+  <OverflowMenuItem
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>

tests/Pagination.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Pagination, PaginationSkeleton } from "../types";
+</script>
+
+<Pagination totalItems="{102}" pageSizes="{[10, 15, 20]}" />
+
+<Pagination totalItems="{102}" page="{4}" />
+
+<Pagination totalItems="{102}" pageSizes="{[16, 36, 99]}" pageSize="{36}" />
+
+<Pagination totalItems="{102}" pageInputDisabled />
+
+<Pagination totalItems="{102}" pageSizeInputDisabled />
+
+<PaginationSkeleton />

tests/PaginationNav.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { PaginationNav } from "../types";
+</script>
+
+<PaginationNav />
+
+<PaginationNav total="{3}" loop />

tests/PassiveModal.test.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Button, Modal } from "../types";
+
+  let open = false;
+</script>
+
+<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button>
+
+<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
+  <p>
+    IBM Cloudant is a distributed, secure database with global availability and
+    zero vendor lock-in used to build web and mobile apps at scale.
+  </p>
+</Modal>

tests/PasswordInput.test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { PasswordInput } from "../types";
+</script>
+
+<PasswordInput labelText="Password" placeholder="Enter password..." />
+
+<PasswordInput
+  labelText="Password"
+  type="text"
+  placeholder="Enter password..."
+  value="as_lta0890sdfpo__!9901"
+/>
+
+<PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
+
+<PasswordInput light labelText="Password" placeholder="Enter password..." />
+
+<PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
+
+<PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
+
+<PasswordInput
+  invalid
+  invalidText="Incorrect user name or password."
+  labelText="Password"
+  placeholder="Enter password..."
+/>
+
+<PasswordInput disabled labelText="Password" placeholder="Enter password..." />

tests/PersistedHamburgerMenu.test.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SideNav,
+    SideNavItems,
+    SideNavMenu,
+    SideNavMenuItem,
+    SideNavLink,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "../types";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header
+  persistentHamburgerMenu="{true}"
+  company="IBM"
+  platformName="Carbon Svelte"
+  bind:isSideNavOpen
+>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNavItems>
+    <SideNavLink text="Link 1" />
+    <SideNavLink text="Link 2" />
+    <SideNavLink text="Link 3" />
+    <SideNavMenu text="Menu">
+      <SideNavMenuItem href="/" text="Link 1" />
+      <SideNavMenuItem href="/" text="Link 2" />
+      <SideNavMenuItem href="/" text="Link 3" />
+    </SideNavMenu>
+  </SideNavItems>
+</SideNav>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>

tests/ProgressIndicator.test.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import {
+    ProgressIndicator,
+    ProgressStep,
+    ProgressIndicatorSkeleton,
+  } from "../types";
+</script>
+
+<ProgressIndicator currentIndex="{2}">
+  <ProgressStep
+    complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Step 4"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<ProgressIndicator preventChangeOnClick currentIndex="{2}">
+  <ProgressStep
+    complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Step 4"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<ProgressIndicator spaceEqually>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<ProgressIndicator vertical>
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Really long label"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<ProgressIndicatorSkeleton count="{3}" />

tests/RadioButton.test.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {
+    FormGroup,
+    RadioButton,
+    RadioButtonSkeleton,
+    RadioButtonGroup,
+  } from "../types";
+</script>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup labelPosition="left" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical" selected="standard">
+    <RadioButton labelText="Free (1 GB)" value="free" />
+    <RadioButton labelText="Standard (10 GB)" value="standard" />
+    <RadioButton labelText="Pro (128 GB)" value="pro" />
+  </RadioButtonGroup>
+</FormGroup>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup>
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>
+
+<FormGroup legendText="Storage tier (disk)">
+  <RadioButtonGroup orientation="vertical">
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+    <RadioButtonSkeleton />
+  </RadioButtonGroup>
+</FormGroup>

tests/RadioSelectableDataTable.test.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { DataTable } from "../types";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [rows[1].id];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />

tests/RadioTile.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { TileGroup, RadioTile } from "../types";
+</script>
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile value="1">Standard plan</RadioTile>
+  <RadioTile value="2">Plus plan</RadioTile>
+</TileGroup>
+
+<TileGroup legend="Service pricing tiers">
+  <RadioTile value="0" checked>Lite plan</RadioTile>
+  <RadioTile value="1">Standard plan</RadioTile>
+  <RadioTile value="2">Plus plan</RadioTile>
+</TileGroup>

tests/ResponsiveGrid.test.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { Grid, Row, Column } from "../types";
+</script>
+
+<Grid>
+  <Row>
+    <Column
+      sm="{1}"
+      md="{4}"
+      lg="{8}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 4, lg: 8
+    </Column>
+    <Column
+      sm="{1}"
+      md="{2}"
+      lg="{2}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 2, lg: 2
+    </Column>
+    <Column
+      sm="{1}"
+      md="{1}"
+      lg="{1}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+    <Column
+      sm="{1}"
+      md="{1}"
+      lg="{1}"
+      style="outline: 1px solid var(--cds-interactive-04)"
+    >
+      sm: 1, md: 1, lg: 1
+    </Column>
+  </Row>
+</Grid>

tests/Search.test.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Search } from "../types";
+</script>
+
+<Search />
+
+<Search placeholder="Search catalog..." value="Cloud functions" />
+
+<Search light />
+
+<Search size="lg" />
+
+<Search size="sm" />
+
+<Search disabled />
+
+<Search skeleton />
+
+<Search size="lg" skeleton />
+
+<Search size="sm" skeleton />

tests/Select.test.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import {
+    Select,
+    SelectItem,
+    SelectItemGroup,
+    SelectSkeleton,
+  } from "../types";
+</script>
+
+<Select labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<Select labelText="Carbon theme" selected="g10">
+  <SelectItem value="0" text="Select a theme" disabled hidden />
+  <SelectItemGroup label="Light theme">
+    <SelectItem value="white" text="White" />
+    <SelectItem value="g10" text="Gray 10" />
+  </SelectItemGroup>
+  <SelectItemGroup label="Dark theme">
+    <SelectItem value="g90" text="Gray 90" />
+    <SelectItem value="g100" text="Gray 100" />
+  </SelectItemGroup>
+</Select>
+
+<Select light labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<Select inline labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<Select size="xl" labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<Select size="sm" labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<Select disabled labelText="Carbon theme" selected="g10">
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<SelectSkeleton />

tests/SelectableDataTable.test.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { DataTable } from "../types";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ];
+
+  const rows = [
+    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+  ];
+
+  let selectedRowIds = [];
+
+  $: console.log("selectedRowIds", selectedRowIds);
+</script>
+
+<DataTable selectable bind:selectedRowIds headers="{headers}" rows="{rows}" />

tests/SelectableTile.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { SelectableTile } from "../types";
+</script>
+
+<SelectableTile selected>Multi-select Tile</SelectableTile>
+
+<SelectableTile selected>Multi-select Tile</SelectableTile>
+
+<SelectableTile>Multi-select Tile</SelectableTile>
+
+<SelectableTile light selected>Multi-select Tile</SelectableTile>
+
+<SelectableTile light selected>Multi-select Tile</SelectableTile>
+
+<SelectableTile light>Multi-select Tile</SelectableTile>

tests/SkeletonPlaceholder.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { SkeletonPlaceholder } from "../types";
+</script>
+
+<SkeletonPlaceholder />
+
+<SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

tests/SkeletonText.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { SkeletonText } from "../types";
+</script>
+
+<SkeletonText />
+
+<SkeletonText heading />
+
+<SkeletonText heading />
+
+<SkeletonText paragraph />
+
+<SkeletonText paragraph lines="{8}" />
+
+<SkeletonText paragraph width="50%" />

tests/Slider.test.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { Slider, SliderSkeleton } from "../types";
+</script>
+
+<Slider />
+
+<Slider
+  labelText="Runtime memory (MB)"
+  min="{10}"
+  max="{990}"
+  maxLabel="990 MB"
+  value="{100}"
+/>
+
+<Slider
+  labelText="Runtime memory (MB)"
+  min="{10}"
+  max="{990}"
+  maxLabel="990 MB"
+  value="{100}"
+  step="{10}"
+/>
+
+<Slider
+  light
+  labelText="Runtime memory (MB)"
+  min="{10}"
+  max="{990}"
+  maxLabel="990 MB"
+  value="{100}"
+  step="{10}"
+/>
+
+<SliderSkeleton />
+
+<SliderSkeleton hideLabel />

tests/StructuredList.test.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import {
+    StructuredList,
+    StructuredListSkeleton,
+    StructuredListBody,
+    StructuredListHead,
+    StructuredListCell,
+    StructuredListRow,
+    StructuredListInput,
+  } from "../types";
+  import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
+</script>
+
+<StructuredList>
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>Column A</StructuredListCell>
+      <StructuredListCell head>Column B</StructuredListCell>
+      <StructuredListCell head>Column C</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 1</StructuredListCell>
+      <StructuredListCell>Row 1</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 2</StructuredListCell>
+      <StructuredListCell>Row 2</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+    <StructuredListRow>
+      <StructuredListCell noWrap>Row 3</StructuredListCell>
+      <StructuredListCell>Row 3</StructuredListCell>
+      <StructuredListCell>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+        finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+        euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+        porttitor interdum.
+      </StructuredListCell>
+    </StructuredListRow>
+  </StructuredListBody>
+</StructuredList>
+
+<StructuredList selection selected="row-1-value">
+  <StructuredListHead>
+    <StructuredListRow head>
+      <StructuredListCell head>ColumnA</StructuredListCell>
+      <StructuredListCell head>ColumnB</StructuredListCell>
+      <StructuredListCell head>ColumnC</StructuredListCell>
+      <StructuredListCell head>{''}</StructuredListCell>
+    </StructuredListRow>
+  </StructuredListHead>
+  <StructuredListBody>
+    {#each [1, 2, 3] as item}
+      <StructuredListRow label for="row-{item}">
+        <StructuredListCell>Row {item}</StructuredListCell>
+        <StructuredListCell>Row {item}</StructuredListCell>
+        <StructuredListCell>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+          magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+          sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+          vulputate nisl a porttitor interdum.
+        </StructuredListCell>
+        <StructuredListInput
+          id="row-{item}"
+          value="row-{item}-value"
+          title="row-{item}-title"
+          name="row-{item}-name"
+        />
+        <StructuredListCell>
+          <CheckmarkFilled16
+            class="bx--structured-list-svg"
+            aria-label="select an option"
+            title="select an option"
+          />
+        </StructuredListCell>
+      </StructuredListRow>
+    {/each}
+  </StructuredListBody>
+</StructuredList>
+
+<StructuredListSkeleton rows="{3}" />

tests/Tabs.test.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { Tabs, Tab, TabContent, TabsSkeleton } from "../types";
+</script>
+
+<Tabs>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+<TabContent>Content 1</TabContent>
+
+<TabContent>Content 2</TabContent>
+
+<TabContent>Content 3</TabContent>
+
+<Tabs type="container">
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+<TabContent>Content 1</TabContent>
+
+<TabContent>Content 2</TabContent>
+
+<TabContent>Content 3</TabContent>
+
+<TabsSkeleton count="{3}" />

tests/Tag.test.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Tag } from "../types";
+</script>
+
+<Tag class="my-class" style="margin: 1rem;">IBM Cloud</Tag>
+
+<Tag type="red">red</Tag>
+
+<Tag type="magenta">magenta</Tag>
+
+<Tag type="purple">purple</Tag>
+
+<Tag type="blue">blue</Tag>
+
+<Tag type="cyan">cyan</Tag>
+
+<Tag type="teal">teal</Tag>
+
+<Tag type="green">green</Tag>
+
+<Tag type="gray">gray</Tag>
+
+<Tag type="cool-gray">cool-gray</Tag>
+
+<Tag type="warm-gray">warm-gray</Tag>
+
+<Tag type="high-contrast">high-contrast</Tag>
+
+<Tag filter on:click>Filterable</Tag>
+
+<Tag skeleton />

tests/TextArea.test.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { TextArea, TextAreaSkeleton } from "../types";
+</script>
+
+<TextArea labelText="App description" placeholder="Enter a description..." />
+
+<TextArea
+  labelText="App description"
+  helperText="A rich description helps us better recommend related products and services"
+  placeholder="Enter a description..."
+/>
+
+<TextArea
+  hideLabel
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+
+<TextArea
+  light
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+
+<TextArea
+  rows="{10}"
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+
+<TextArea
+  invalid
+  invalidText="Only plain text characters are allowed"
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+
+<TextArea
+  disabled
+  labelText="App description"
+  placeholder="Enter a description..."
+/>
+
+<TextAreaSkeleton />
+
+<TextAreaSkeleton hideLabel />

tests/TextInput.test.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { TextInput, TextInputSkeleton } from "../types";
+</script>
+
+<TextInput labelText="User name" placeholder="Enter user name..." />
+
+<TextInput
+  labelText="User name"
+  helperText="Your user name is associated with your email"
+  placeholder="Enter user name..."
+/>
+
+<TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
+
+<TextInput light labelText="User name" placeholder="Enter user name..." />
+
+<TextInput inline labelText="User name" placeholder="Enter user name..." />
+
+<TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
+
+<TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
+
+<TextInput
+  invalid
+  invalidText="User name is already taken. Please try another."
+  labelText="User name"
+  placeholder="Enter user name..."
+/>
+
+<TextInput disabled labelText="User name" placeholder="Enter user name..." />
+
+<TextInputSkeleton />
+
+<TextInputSkeleton hideLabel />

tests/Tile.test.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tile } from "../types";
+</script>
+
+<Tile>Content</Tile>
+
+<Tile light>Content</Tile>

tests/TimePicker.test.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { TimePicker, TimePickerSelect, SelectItem } from "../types";
+</script>
+
+<TimePicker labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+<TimePicker light labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
+  <TimePickerSelect value="PM" disabled>
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT" disabled>
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>

tests/ToastNotification.test.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { ToastNotification } from "../types";
+</script>
+
+<ToastNotification />
+
+<ToastNotification
+  hideCloseButton
+  kind="warning"
+  title="Upcoming scheduled maintenance"
+/>
+
+<ToastNotification kind="error" />
+
+<ToastNotification kind="info" />
+
+<ToastNotification kind="info-square" />
+
+<ToastNotification kind="success" />
+
+<ToastNotification kind="warning" />
+
+<ToastNotification kind="warning-alt" />
+
+<ToastNotification lowContrast kind="error" />
+
+<ToastNotification lowContrast kind="info" />
+
+<ToastNotification lowContrast kind="info-square" />
+
+<ToastNotification lowContrast kind="success" />
+
+<ToastNotification lowContrast kind="warning" />
+
+<ToastNotification lowContrast kind="warning-alt" />

tests/Toggle.test.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Toggle, ToggleSkeleton } from "../types";
+</script>
+
+<Toggle labelText="Push notifications" />
+
+<Toggle labelText="Push notifications" toggled />
+
+<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
+
+<Toggle labelText="Push notifications" disabled />
+
+<ToggleSkeleton />