test: add TS types

types/Accordion/Accordion.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
+import { AccordionSkeletonProps } from "./AccordionSkeleton";
 
-export interface AccordionProps {
+export interface AccordionProps extends AccordionSkeletonProps {
   /**
    * Specify alignment of accordion item chevron icon
    * @default "end"

types/Breadcrumb/Breadcrumb.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
+import { BreadcrumbSkeletonProps } from "./BreadcrumbSkeleton";
 
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends BreadcrumbSkeletonProps {
   /**
    * Set to `true` to hide the breadcrumb trailing slash
    * @default false

types/Button/Button.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="svelte" />
+import { ButtonSkeletonProps } from "./ButtonSkeleton";
 
-export interface ButtonProps {
+export interface ButtonProps
+  extends ButtonSkeletonProps,
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]>,
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]>,
+    svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Specify the kind of button
    * @default "primary"
@@ -87,10 +92,10 @@ export default class Button {
   $$prop_def: ButtonProps;
   $$slot_def: {
     default: {
-      props?: {
+      props: {
         role: "button";
         type?: string;
-        tabindex: string;
+        tabindex: any;
         disabled: boolean;
         href?: string;
         class: string;

types/ComposedModal/ComposedModal.d.ts

@@ -34,7 +34,7 @@ export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElemen
    * Specify a selector to be focused when opening the modal
    * @default "[data-modal-primary-focus]"
    */
-  selectorPrimaryFocus?: string;
+  selectorPrimaryFocus?: null | string;
 
   /**
    * Obtain a reference to the top-level HTML element

types/CopyButton/CopyButton.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
+import { CopyProps } from "../Copy/Copy";
 
-export interface CopyButtonProps {
+export interface CopyButtonProps extends CopyProps {
   /**
    * Set the title and ARIA label for the copy button
    * @default "Copy to clipboard"

types/DataTable/DataTable.d.ts

@@ -1,29 +1,49 @@
 /// <reference types="svelte" />
 
-interface Header {
-  key: string;
-  value: string;
-  display?: (item) => string;
-  sort?: (a, b) => number;
-  empty?: boolean;
+type Key = string;
+
+type Value = any;
+
+interface EmptyHeader {
+  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;
+}
 
 export interface DataTableProps {
   /**
    * Specify the data table headers
    * @default []
    */
-  headers?: Headers;
+  headers?: DataTableHeader[];
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
    * @default []
    */
-  rows?: Object[];
+  rows?: Row[];
 
   /**
    * Set the size of the data table
@@ -71,7 +91,7 @@ export interface DataTableProps {
    * Specify the row ids to be expanded
    * @default []
    */
-  expandedRowIds?: string[];
+  expandedRowIds?: RowId[];
 
   /**
    * Set to `true` for the radio selection variant
@@ -96,7 +116,7 @@ export interface DataTableProps {
    * Specify the row ids to be selected
    * @default []
    */
-  selectedRowIds?: string[];
+  selectedRowIds?: RowId[];
 
   /**
    * Set to `true` to enable a sticky header
@@ -109,24 +129,24 @@ export default class DataTable {
   $$prop_def: DataTableProps;
   $$slot_def: {
     default: {};
-    cell: { row: Object; cell: Object };
-    ["cell-header"]: { header: Header };
-    ["expanded-row"]: { row: Object };
+    cell: { row: Row; cell: Cell };
+    ["cell-header"]: { header: NonEmptyHeader };
+    ["expanded-row"]: { row: Row };
   };
 
   $on(
     eventname: "click",
-    cb: (event: CustomEvent<{ header?: Header; row?: Object; cell?: Object }>) => void
+    cb: (event: CustomEvent<{ header?: DataTableHeader; row?: Row; cell?: Cell }>) => void
   ): () => void;
   $on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void;
   $on(
     eventname: "click:header",
-    cb: (event: CustomEvent<{ header: Header; sortDirection: "ascending" | "descending" | "none" }>) => void
+    cb: (event: CustomEvent<{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }>) => void
   ): () => void;
-  $on(eventname: "click:row", cb: (event: CustomEvent<Object>) => void): () => void;
-  $on(eventname: "mouseenter:row", cb: (event: CustomEvent<Object>) => void): () => void;
-  $on(eventname: "mouseleave:row", cb: (event: CustomEvent<Object>) => void): () => void;
-  $on(eventname: "click:row--expand", cb: (event: CustomEvent<{ expanded: boolean; row: Object }>) => void): () => void;
-  $on(eventname: "click:cell", cb: (event: CustomEvent<Object>) => void): () => void;
+  $on(eventname: "click:row", cb: (event: CustomEvent<Row>) => void): () => void;
+  $on(eventname: "mouseenter:row", cb: (event: CustomEvent<Row>) => void): () => void;
+  $on(eventname: "mouseleave:row", cb: (event: CustomEvent<Row>) => void): () => void;
+  $on(eventname: "click:row--expand", cb: (event: CustomEvent<{ expanded: boolean; row: Row }>) => void): () => void;
+  $on(eventname: "click:cell", cb: (event: CustomEvent<Cell>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }

types/DataTable/ToolbarMenu.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
+import { OverflowMenuProps } from "../OverflowMenu/OverflowMenu";
 
-export interface ToolbarMenuProps {}
+export interface ToolbarMenuProps extends OverflowMenuProps {}
 
 export default class ToolbarMenu {
   $$prop_def: ToolbarMenuProps;

types/DataTable/ToolbarMenuItem.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
+import { OverflowMenuItemProps } from "../OverflowMenu/OverflowMenuItem";
 
-export interface ToolbarMenuItemProps {}
+export interface ToolbarMenuItemProps extends OverflowMenuItemProps {}
 
 export default class ToolbarMenuItem {
   $$prop_def: ToolbarMenuItemProps;

types/DataTable/ToolbarSearch.d.ts

@@ -5,7 +5,7 @@ export interface ToolbarSearchProps {
    * Specify the value of the search input
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
    * Set to `true` to expand the search bar

types/DatePicker/DatePicker.d.ts

@@ -11,7 +11,7 @@ export interface DatePickerProps extends svelte.JSX.HTMLAttributes<HTMLElementTa
    * Specify the date picker input value
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
    * Specify the element to append the calendar to

types/Grid/Column.d.ts

@@ -9,7 +9,7 @@ interface ColumnSizeDescriptor {
 
 type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
-export interface ColumnProps {
+export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
@@ -69,7 +69,7 @@ export interface ColumnProps {
 export default class Column {
   $$prop_def: ColumnProps;
   $$slot_def: {
-    default: { props?: { class: string } };
+    default: { props: { class: string; [key: string]: any } };
   };
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 
-export interface GridProps {
+export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
@@ -48,7 +48,7 @@ export interface GridProps {
 export default class Grid {
   $$prop_def: GridProps;
   $$slot_def: {
-    default: { props?: { class: string } };
+    default: { props: { class: string; [key: string]: any } };
   };
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Grid/Row.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 
-export interface RowProps {
+export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
@@ -42,7 +42,7 @@ export interface RowProps {
 export default class Row {
   $$prop_def: RowProps;
   $$slot_def: {
-    default: { props?: { class: string; [key: string]: any } };
+    default: { props: { class: string; [key: string]: any } };
   };
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Icon/Icon.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="svelte" />
+import { IconSkeletonProps } from "./IconSkeleton";
 
-export interface IconProps {
+export interface IconProps extends IconSkeletonProps, svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * Icon size must be 16px (e.g. `Add16`, `Task16`)
    */
   render?: typeof import("carbon-icons-svelte").CarbonIcon;
 

types/MultiSelect/MultiSelect.d.ts

@@ -99,7 +99,7 @@ export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementT
    * The default sorting compare the item text value
    * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
    */
-  sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;
+  sortItem?: ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void);
 
   /**
    * Override the default translation ids

types/NumberInput/NumberInput.d.ts

@@ -12,7 +12,7 @@ export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementT
    * Specify the input value
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
    * Specify the step increment

types/Select/Select.d.ts

@@ -4,7 +4,7 @@ export interface SelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
   /**
    * Specify the selected item value
    */
-  selected?: undefined;
+  selected?: string;
 
   /**
    * Set the size of the select input

types/TextInput/PasswordInput.d.ts

@@ -10,13 +10,13 @@ export interface PasswordInputProps extends svelte.JSX.HTMLAttributes<HTMLElemen
    * Specify the input value
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
-   * Specify the input type
+   * Set to `"text"` to toggle the password visibility
    * @default "password"
    */
-  type?: string;
+  type?: "text" | "password";
 
   /**
    * Specify the placeholder text

types/TextInput/TextInput.d.ts

@@ -10,7 +10,7 @@ export interface TextInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
    * Specify the input value
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
    * Specify the input type

types/TimePicker/TimePickerSelect.d.ts

@@ -5,7 +5,7 @@ export interface TimePickerSelectProps extends svelte.JSX.HTMLAttributes<HTMLEle
    * Specify the select value
    * @default ""
    */
-  value?: string;
+  value?: number | string;
 
   /**
    * Set to `true` to disable the select