test: add TS types

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 */
@@ -51,8 +54,8 @@
   });
 
   function focus(element) {
-    if(selectorPrimaryFocus == null) {
-      return
+    if (selectorPrimaryFocus == null) {
+      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 {Header[]} Headers
-   * @slot {{ row: Object; }} expanded-row
-   * @slot {{ header: Header}} cell-header
-   * @slot {{ row: Object; cell: Object; }} cell
-   * @event {{ header?: Header; row?: Object; cell?: Object; }} click
+   * @typedef {string} Key
+   * @typedef {any} Value
+   * @typedef {{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} EmptyHeader
+   * @typedef {{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} NonEmptyHeader
+   * @typedef {NonEmptyHeader | EmptyHeader} DataTableHeader
+   * @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 {Object} click:row
-   * @event {Object} mouseenter:row
-   * @event {Object} mouseleave:row
-   * @event {{ expanded: boolean; row: Object; }} click:row--expand
-   * @event {Object} click:cell
+   * @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {Row} click:row
+   * @event {Row} mouseenter:row
+   * @event {Row} mouseleave:row
+   * @event {{ expanded: boolean; row: Row; }} click:row--expand
+   * @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 */