refactor(types): shorten ref, id JSDocs, use CarbonIcon type, export component props

types/Accordion/Accordion.d.ts

@@ -1,31 +1,32 @@
 /// <reference types="svelte" />
 
+export interface AccordionProps {
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @default "end"
+   */
+  align?: "start" | "end";
+
+  /**
+   * Specify the size of the accordion
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `true` to disable the accordion
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+}
+
 export default class Accordion {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
-    /**
-     * Specify alignment of accordion item chevron icon
-     * @default "end"
-     */
-    align?: "start" | "end";
-
-    /**
-     * Specify the size of the accordion
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `true` to disable the accordion
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-  };
-
+  $$prop_def: AccordionProps;
   $$slot_def: {
     default: {};
   };

types/Accordion/AccordionItem.d.ts

@@ -1,33 +1,34 @@
 /// <reference types="svelte" />
 
+export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Specify the title of the accordion item heading
+   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
+   * @default "title"
+   */
+  title?: string;
+
+  /**
+   * Set to `true` to open the first accordion item
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to disable the accordion item
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the ARIA label for the accordion item chevron icon
+   * @default "Expand/Collapse"
+   */
+  iconDescription?: string;
+}
+
 export default class AccordionItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
-    /**
-     * Specify the title of the accordion item heading
-     * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
-     * @default "title"
-     */
-    title?: string;
-
-    /**
-     * Set to `true` to open the first accordion item
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to disable the accordion item
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the ARIA label for the accordion item chevron icon
-     * @default "Expand/Collapse"
-     */
-    iconDescription?: string;
-  };
-
+  $$prop_def: AccordionItemProps;
   $$slot_def: {
     default: {};
     title: {};

types/Accordion/AccordionSkeleton.d.ts

@@ -1,31 +1,32 @@
 /// <reference types="svelte" />
 
+export interface AccordionSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * Specify the number of accordion items to render
+   * @default 4
+   */
+  count?: number;
+
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @default "end"
+   */
+  align?: "start" | "end";
+
+  /**
+   * Specify the size of the accordion
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `false` to close the first accordion item
+   * @default true
+   */
+  open?: boolean;
+}
+
 export default class AccordionSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
-    /**
-     * Specify the number of accordion items to render
-     * @default 4
-     */
-    count?: number;
-
-    /**
-     * Specify alignment of accordion item chevron icon
-     * @default "end"
-     */
-    align?: "start" | "end";
-
-    /**
-     * Specify the size of the accordion
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `false` to close the first accordion item
-     * @default true
-     */
-    open?: boolean;
-  };
-
+  $$prop_def: AccordionSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/AspectRatio/AspectRatio.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class AspectRatio {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the aspect ratio
-     * @default "2x1"
-     */
-    ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
-  };
+export interface AspectRatioProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the aspect ratio
+   * @default "2x1"
+   */
+  ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
+}
 
+export default class AspectRatio {
+  $$prop_def: AspectRatioProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/Breadcrumb.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface BreadcrumbProps {
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @default false
+   */
+  noTrailingSlash?: boolean;
+
+  /**
+   * Set to `true` to display skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+}
+
 export default class Breadcrumb {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> & {
-    /**
-     * Set to `true` to hide the breadcrumb trailing slash
-     * @default false
-     */
-    noTrailingSlash?: boolean;
-
-    /**
-     * Set to `true` to display skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-  };
-
+  $$prop_def: BreadcrumbProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,19 +1,20 @@
 /// <reference types="svelte" />
 
+export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Set the `href` to use an anchor link
+   */
+  href?: string;
+
+  /**
+   * Set to `true` if the breadcrumb item represents the current page
+   * @default false
+   */
+  isCurrentPage?: boolean;
+}
+
 export default class BreadcrumbItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Set to `true` if the breadcrumb item represents the current page
-     * @default false
-     */
-    isCurrentPage?: boolean;
-  };
-
+  $$prop_def: BreadcrumbItemProps;
   $$slot_def: {
     default: {};
   };

types/Breadcrumb/BreadcrumbSkeleton.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface BreadcrumbSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to hide the breadcrumb trailing slash
+   * @default false
+   */
+  noTrailingSlash?: boolean;
+
+  /**
+   * Specify the number of breadcrumb items to render
+   * @default 3
+   */
+  count?: number;
+}
+
 export default class BreadcrumbSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to hide the breadcrumb trailing slash
-     * @default false
-     */
-    noTrailingSlash?: boolean;
-
-    /**
-     * Specify the number of breadcrumb items to render
-     * @default 3
-     */
-    count?: number;
-  };
-
+  $$prop_def: BreadcrumbSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Button/Button.d.ts

@@ -1,89 +1,90 @@
 /// <reference types="svelte" />
 
+export interface ButtonProps {
+  /**
+   * Specify the kind of button
+   * @default "primary"
+   */
+  kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
+
+  /**
+   * Specify the size of button
+   * @default "default"
+   */
+  size?: "default" | "field" | "small";
+
+  /**
+   * Set to `true` for the icon-only variant
+   * @default false
+   */
+  hasIconOnly?: boolean;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the ARIA label for the button icon
+   */
+  iconDescription?: string;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon
+   * `hasIconOnly` must be set to `true`
+   */
+  tooltipAlignment?: "start" | "center" | "end";
+
+  /**
+   * Set the position of the tooltip relative to the icon
+   */
+  tooltipPosition?: "top" | "right" | "bottom" | "left";
+
+  /**
+   * Set to `true` to render a custom HTML element
+   * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Set to `true` to disable the button
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set the `href` to use an anchor link
+   */
+  href?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Specify the `type` attribute for the button element
+   * @default "button"
+   */
+  type?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement | HTMLButtonElement;
+}
+
 export default class Button {
-  $$prop_def: {
-    /**
-     * Specify the kind of button
-     * @default "primary"
-     */
-    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
-
-    /**
-     * Specify the size of button
-     * @default "default"
-     */
-    size?: "default" | "field" | "small";
-
-    /**
-     * Set to `true` for the icon-only variant
-     * @default false
-     */
-    hasIconOnly?: boolean;
-
-    /**
-     * Specify the icon from `carbon-icons-svelte` to render
-     */
-    icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
-    /**
-     * Specify the ARIA label for the button icon
-     */
-    iconDescription?: string;
-
-    /**
-     * Set the alignment of the tooltip relative to the icon
-     * `hasIconOnly` must be set to `true`
-     */
-    tooltipAlignment?: "start" | "center" | "end";
-
-    /**
-     * Set the position of the tooltip relative to the icon
-     */
-    tooltipPosition?: "top" | "right" | "bottom" | "left";
-
-    /**
-     * Set to `true` to render a custom HTML element
-     * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
-     * @default false
-     */
-    as?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Set to `true` to disable the button
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Specify the tabindex
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Specify the `type` attribute for the button element
-     * @default "button"
-     */
-    type?: string;
-
-    /**
-     * Obtain a reference to the HTML element
-     * @default null
-     */
-    ref?: null | HTMLAnchorElement | HTMLButtonElement;
-  };
-
+  $$prop_def: ButtonProps;
   $$slot_def: {
     default: { props: undefined };
   };

types/Button/ButtonSet.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class ButtonSet {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to stack the buttons vertically
-     * @default false
-     */
-    stacked?: boolean;
-  };
+export interface ButtonSetProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to stack the buttons vertically
+   * @default false
+   */
+  stacked?: boolean;
+}
 
+export default class ButtonSet {
+  $$prop_def: ButtonSetProps;
   $$slot_def: {
     default: {};
   };

types/Button/ButtonSkeleton.d.ts

@@ -1,25 +1,26 @@
 /// <reference types="svelte" />
 
+export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
+  /**
+   * Set the `href` to use an anchor link
+   */
+  href?: string;
+
+  /**
+   * Specify the size of button skeleton
+   * @default "default"
+   */
+  size?: "default" | "field" | "small";
+
+  /**
+   * Set to `true` to use the small variant
+   * @default false
+   */
+  small?: boolean;
+}
+
 export default class ButtonSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the `href` to use an anchor link
-     */
-    href?: string;
-
-    /**
-     * Specify the size of button skeleton
-     * @default "default"
-     */
-    size?: "default" | "field" | "small";
-
-    /**
-     * Set to `true` to use the small variant
-     * @default false
-     */
-    small?: boolean;
-  };
-
+  $$prop_def: ButtonSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Checkbox/Checkbox.d.ts

@@ -1,72 +1,74 @@
 /// <reference types="svelte" />
 
+export interface CheckboxProps {
+  /**
+   * Specify whether the checkbox is checked
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * Specify whether the checkbox is indeterminate
+   * @default false
+   */
+  indeterminate?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Set to `true` for the checkbox to be read-only
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set a name for the input element
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Specify the title attribute for the label element
+   */
+  title?: string;
+
+  /**
+   * Set an id for the input label
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class Checkbox {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify whether the checkbox is checked
-     * @default false
-     */
-    checked?: boolean;
-
-    /**
-     * Specify whether the checkbox is indeterminate
-     * @default false
-     */
-    indeterminate?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Set to `true` for the checkbox to be read-only
-     * @default false
-     */
-    readonly?: boolean;
-
-    /**
-     * Set to `true` to disable the checkbox
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set to `true` to visually hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-
-    /**
-     * Set a name for the input element
-     * @default ""
-     */
-    name?: string;
-
-    /**
-     * Specify the title attribute for the label element
-     */
-    title?: string;
-
-    /**
-     * Set an id for the input label
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: CheckboxProps;
   $$slot_def: {};
 
   $on(eventname: "check", cb: (event: CustomEvent<boolean>) => void): () => void;

types/Checkbox/CheckboxSkeleton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class CheckboxSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface CheckboxSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class CheckboxSkeleton {
+  $$prop_def: CheckboxSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/CodeSnippet/CodeSnippet.d.ts

@@ -1,104 +1,106 @@
 /// <reference types="svelte" />
 
+export interface CodeSnippetProps {
+  /**
+   * Set the type of code snippet
+   * @default "single"
+   */
+  type?: "single" | "inline" | "multi";
+
+  /**
+   * Set the code snippet text
+   * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
+   */
+  code?: string;
+
+  /**
+   * Set to `true` to expand a multi-line code snippet (type="multi")
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Set to `true` to hide the copy button
+   * @default false
+   */
+  hideCopyButton?: boolean;
+
+  /**
+   * Set to `true` to wrap the text
+   * Note that `type` must be "multi"
+   * @default false
+   */
+  wrapText?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Specify the ARIA label for the copy button icon
+   */
+  copyButtonDescription?: string;
+
+  /**
+   * Specify the ARIA label of the copy button
+   */
+  copyLabel?: string;
+
+  /**
+   * Specify the feedback text displayed when clicking the snippet
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Specify the show less text
+   * `type` must be "multi"
+   * @default "Show less"
+   */
+  showLessText?: string;
+
+  /**
+   * Specify the show more text
+   * `type` must be "multi"
+   * @default "Show more"
+   */
+  showMoreText?: string;
+
+  /**
+   * Set to `true` to enable the show more/less button
+   * @default false
+   */
+  showMoreLess?: boolean;
+
+  /**
+   * Set an id for the code element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the pre HTML element
+   * @default null
+   */
+  ref?: null | HTMLPreElement;
+}
+
 export default class CodeSnippet {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the type of code snippet
-     * @default "single"
-     */
-    type?: "single" | "inline" | "multi";
-
-    /**
-     * Set the code snippet text
-     * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
-     */
-    code?: string;
-
-    /**
-     * Set to `true` to expand a multi-line code snippet (type="multi")
-     * @default false
-     */
-    expanded?: boolean;
-
-    /**
-     * Set to `true` to hide the copy button
-     * @default false
-     */
-    hideCopyButton?: boolean;
-
-    /**
-     * Set to `true` to wrap the text
-     * Note that `type` must be "multi"
-     * @default false
-     */
-    wrapText?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Specify the ARIA label for the copy button icon
-     */
-    copyButtonDescription?: string;
-
-    /**
-     * Specify the ARIA label of the copy button
-     */
-    copyLabel?: string;
-
-    /**
-     * Specify the feedback text displayed when clicking the snippet
-     * @default "Copied!"
-     */
-    feedback?: string;
-
-    /**
-     * Set the timeout duration (ms) to display feedback text
-     * @default 2000
-     */
-    feedbackTimeout?: number;
-
-    /**
-     * Specify the show less text
-     * `type` must be "multi"
-     * @default "Show less"
-     */
-    showLessText?: string;
-
-    /**
-     * Specify the show more text
-     * `type` must be "multi"
-     * @default "Show more"
-     */
-    showMoreText?: string;
-
-    /**
-     * Set to `true` to enable the show more/less button
-     * @default false
-     */
-    showMoreLess?: boolean;
-
-    /**
-     * Set an id for the code element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the pre HTML element
-     * @default null
-     */
-    ref?: null | HTMLPreElement;
-  };
-
+  $$prop_def: CodeSnippetProps;
   $$slot_def: {
     default: {};
   };

types/CodeSnippet/CodeSnippetSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class CodeSnippetSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the type of code snippet
-     * @default "single"
-     */
-    type?: "single" | "inline" | "multi";
-  };
+export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the type of code snippet
+   * @default "single"
+   */
+  type?: "single" | "inline" | "multi";
+}
 
+export default class CodeSnippetSkeleton {
+  $$prop_def: CodeSnippetSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/ComboBox/ComboBox.d.ts

@@ -5,118 +5,121 @@ interface ComboBoxItem {
   text: string;
 }
 
+export interface ComboBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the combobox items
+   * @default []
+   */
+  items?: ComboBoxItem[];
+
+  /**
+   * Override the display of a combobox item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: ComboBoxItem) => string;
+
+  /**
+   * Set the selected item by value index
+   * @default -1
+   */
+  selectedIndex?: number;
+
+  /**
+   * Specify the selected combobox value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set the size of the combobox
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `true` to disable the combobox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title text of the combobox
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to open the combobox menu dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Determine if an item should be filtered given the current combobox value
+   * @default () => true
+   */
+  shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
+
+  /**
+   * Override the default translation ids
+   */
+  translateWithId?: (id: any) => string;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+
+  /**
+   * Obtain a reference to the list HTML element
+   * @default null
+   */
+  listRef?: null | HTMLDivElement;
+}
+
 export default class ComboBox {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the combobox items
-     * @default []
-     */
-    items?: ComboBoxItem[];
-
-    /**
-     * Override the display of a combobox item
-     * @default (item) => item.text || item.id
-     */
-    itemToString?: (item: ComboBoxItem) => string;
-
-    /**
-     * Set the selected item by value index
-     */
-    selectedIndex?: number;
-
-    /**
-     * Specify the selected combobox value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set the size of the combobox
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `true` to disable the combobox
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the title text of the combobox
-     * @default ""
-     */
-    titleText?: string;
-
-    /**
-     * Specify the placeholder text
-     * @default ""
-     */
-    placeholder?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to open the combobox menu dropdown
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Determine if an item should be filtered given the current combobox value
-     * @default () => true
-     */
-    shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
-
-    /**
-     * Override the default translation ids
-     */
-    translateWithId?: (id: any) => string;
-
-    /**
-     * Set an id for the list box component
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the input
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-
-    /**
-     * Obtain a reference to the list HTML element
-     * @default null
-     */
-    listRef?: null | HTMLDivElement;
-  };
-
+  $$prop_def: ComboBoxProps;
   $$slot_def: {};
 
   $on(

types/ComposedModal/ComposedModal.d.ts

@@ -1,49 +1,50 @@
 /// <reference types="svelte" />
 
+export interface ComposedModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the composed modal
+   */
+  size?: "xs" | "sm" | "lg";
+
+  /**
+   * Set to `true` to open the modal
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
+  /**
+   * Specify a class for the inner modal
+   * @default ""
+   */
+  containerClass?: string;
+
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @default "[data-modal-primary-focus]"
+   */
+  selectorPrimaryFocus?: string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class ComposedModal {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the composed modal
-     */
-    size?: "xs" | "sm" | "lg";
-
-    /**
-     * Set to `true` to open the modal
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to use the danger variant
-     * @default false
-     */
-    danger?: boolean;
-
-    /**
-     * Set to `true` to prevent the modal from closing when clicking outside
-     * @default false
-     */
-    preventCloseOnClickOutside?: boolean;
-
-    /**
-     * Specify a class for the inner modal
-     * @default ""
-     */
-    containerClass?: string;
-
-    /**
-     * Specify a selector to be focused when opening the modal
-     * @default "[data-modal-primary-focus]"
-     */
-    selectorPrimaryFocus?: string;
-
-    /**
-     * Obtain a reference to the top-level HTML element
-     * @default null
-     */
-    ref?: null | HTMLDivElement;
-  };
-
+  $$prop_def: ComposedModalProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalBody.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface ModalBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` if the modal contains form elements
+   * @default false
+   */
+  hasForm?: boolean;
+
+  /**
+   * Set to `true` if the modal contains scrolling content
+   * @default false
+   */
+  hasScrollingContent?: boolean;
+}
+
 export default class ModalBody {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` if the modal contains form elements
-     * @default false
-     */
-    hasForm?: boolean;
-
-    /**
-     * Set to `true` if the modal contains scrolling content
-     * @default false
-     */
-    hasScrollingContent?: boolean;
-  };
-
+  $$prop_def: ModalBodyProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalFooter.d.ts

@@ -1,42 +1,43 @@
 /// <reference types="svelte" />
 
+export interface ModalFooterProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the primary button text
+   * @default ""
+   */
+  primaryButtonText?: string;
+
+  /**
+   * Set to `true` to disable the primary button
+   * @default false
+   */
+  primaryButtonDisabled?: boolean;
+
+  /**
+   * Specify a class for the primary button
+   */
+  primaryClass?: string;
+
+  /**
+   * Specify the secondary button text
+   * @default ""
+   */
+  secondaryButtonText?: string;
+
+  /**
+   * Specify a class for the secondary button
+   */
+  secondaryClass?: string;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+}
+
 export default class ModalFooter {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the primary button text
-     * @default ""
-     */
-    primaryButtonText?: string;
-
-    /**
-     * Set to `true` to disable the primary button
-     * @default false
-     */
-    primaryButtonDisabled?: boolean;
-
-    /**
-     * Specify a class for the primary button
-     */
-    primaryClass?: string;
-
-    /**
-     * Specify the secondary button text
-     * @default ""
-     */
-    secondaryButtonText?: string;
-
-    /**
-     * Specify a class for the secondary button
-     */
-    secondaryClass?: string;
-
-    /**
-     * Set to `true` to use the danger variant
-     * @default false
-     */
-    danger?: boolean;
-  };
-
+  $$prop_def: ModalFooterProps;
   $$slot_def: {
     default: {};
   };

types/ComposedModal/ModalHeader.d.ts

@@ -1,50 +1,51 @@
 /// <reference types="svelte" />
 
+export interface ModalHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the modal title
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the modal label
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Specify the label class
+   * @default ""
+   */
+  labelClass?: string;
+
+  /**
+   * Specify the title class
+   * @default ""
+   */
+  titleClass?: string;
+
+  /**
+   * Specify the close class
+   * @default ""
+   */
+  closeClass?: string;
+
+  /**
+   * Specify the close icon class
+   * @default ""
+   */
+  closeIconClass?: string;
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @default "Close"
+   */
+  iconDescription?: string;
+}
+
 export default class ModalHeader {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the modal title
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the modal label
-     * @default ""
-     */
-    label?: string;
-
-    /**
-     * Specify the label class
-     * @default ""
-     */
-    labelClass?: string;
-
-    /**
-     * Specify the title class
-     * @default ""
-     */
-    titleClass?: string;
-
-    /**
-     * Specify the close class
-     * @default ""
-     */
-    closeClass?: string;
-
-    /**
-     * Specify the close icon class
-     * @default ""
-     */
-    closeIconClass?: string;
-
-    /**
-     * Specify the ARIA label for the close icon
-     * @default "Close"
-     */
-    iconDescription?: string;
-  };
-
+  $$prop_def: ModalHeaderProps;
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/ContentSwitcher.d.ts

@@ -1,25 +1,26 @@
 /// <reference types="svelte" />
 
+export interface ContentSwitcherProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the selected index of the switch item
+   * @default 0
+   */
+  selectedIndex?: number;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the size of the content switcher
+   */
+  size?: "sm" | "xl";
+}
+
 export default class ContentSwitcher {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the selected index of the switch item
-     * @default 0
-     */
-    selectedIndex?: number;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Specify the size of the content switcher
-     */
-    size?: "sm" | "xl";
-  };
-
+  $$prop_def: ContentSwitcherProps;
   $$slot_def: {
     default: {};
   };

types/ContentSwitcher/Switch.d.ts

@@ -1,38 +1,40 @@
 /// <reference types="svelte" />
 
+export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Specify the switch text
+   * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
+   * @default "Provide text"
+   */
+  text?: string;
+
+  /**
+   * Set to `true` for the switch to be selected
+   * @default false
+   */
+  selected?: boolean;
+
+  /**
+   * Set to `true` to disable the switch
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set an id for the button element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+}
+
 export default class Switch {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
-    /**
-     * Specify the switch text
-     * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
-     * @default "Provide text"
-     */
-    text?: string;
-
-    /**
-     * Set to `true` for the switch to be selected
-     * @default false
-     */
-    selected?: boolean;
-
-    /**
-     * Set to `true` to disable the switch
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set an id for the button element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the button HTML element
-     * @default null
-     */
-    ref?: null | HTMLButtonElement;
-  };
-
+  $$prop_def: SwitchProps;
   $$slot_def: {
     default: {};
   };

types/Copy/Copy.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface CopyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Set the feedback text shown after clicking the button
+   * @default "Copied!"
+   */
+  feedback?: string;
+
+  /**
+   * Set the timeout duration (ms) to display feedback text
+   * @default 2000
+   */
+  feedbackTimeout?: number;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+}
+
 export default class Copy {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
-    /**
-     * Set the feedback text shown after clicking the button
-     * @default "Copied!"
-     */
-    feedback?: string;
-
-    /**
-     * Set the timeout duration (ms) to display feedback text
-     * @default 2000
-     */
-    feedbackTimeout?: number;
-
-    /**
-     * Obtain a reference to the button HTML element
-     * @default null
-     */
-    ref?: null | HTMLButtonElement;
-  };
-
+  $$prop_def: CopyProps;
   $$slot_def: {
     default: {};
   };

types/CopyButton/CopyButton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class CopyButton {
-  $$prop_def: {
-    /**
-     * Set the title and ARIA label for the copy button
-     * @default "Copy to clipboard"
-     */
-    iconDescription?: string;
-  };
+export interface CopyButtonProps {
+  /**
+   * Set the title and ARIA label for the copy button
+   * @default "Copy to clipboard"
+   */
+  iconDescription?: string;
+}
 
+export default class CopyButton {
+  $$prop_def: CopyButtonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/DataTable/DataTable.d.ts

@@ -11,106 +11,107 @@ interface Header {
 
 type Headers = Header[];
 
+export interface DataTableProps {
+  /**
+   * Specify the data table headers
+   * @default []
+   */
+  headers?: Headers;
+
+  /**
+   * Specify the rows the data table should render
+   * keys defined in `headers` are used for the row ids
+   * @default []
+   */
+  rows?: Object[];
+
+  /**
+   * Set the size of the data table
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Specify the title of the data table
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the description of the data table
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Set to `true` to use zebra styles
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Set to `true` for the expandable variant
+   * Automatically set to `true` if `batchExpansion` is `true`
+   * @default false
+   */
+  expandable?: boolean;
+
+  /**
+   * Set to `true` to enable batch expansion
+   * @default false
+   */
+  batchExpansion?: boolean;
+
+  /**
+   * Specify the row ids to be expanded
+   * @default []
+   */
+  expandedRowIds?: string[];
+
+  /**
+   * Set to `true` for the radio selection variant
+   * @default false
+   */
+  radio?: boolean;
+
+  /**
+   * Set to `true` for the selectable variant
+   * Automatically set to `true` if `radio` or `batchSelection` are `true`
+   * @default false
+   */
+  selectable?: boolean;
+
+  /**
+   * Set to `true` to enable batch selection
+   * @default false
+   */
+  batchSelection?: boolean;
+
+  /**
+   * Specify the row ids to be selected
+   * @default []
+   */
+  selectedRowIds?: string[];
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class DataTable {
-  $$prop_def: {
-    /**
-     * Specify the data table headers
-     * @default []
-     */
-    headers?: Headers;
-
-    /**
-     * Specify the rows the data table should render
-     * keys defined in `headers` are used for the row ids
-     * @default []
-     */
-    rows?: Object[];
-
-    /**
-     * Set the size of the data table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Specify the title of the data table
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the description of the data table
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Set to `true` to use zebra styles
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `true` for the sortable variant
-     * @default false
-     */
-    sortable?: boolean;
-
-    /**
-     * Set to `true` for the expandable variant
-     * Automatically set to `true` if `batchExpansion` is `true`
-     * @default false
-     */
-    expandable?: boolean;
-
-    /**
-     * Set to `true` to enable batch expansion
-     * @default false
-     */
-    batchExpansion?: boolean;
-
-    /**
-     * Specify the row ids to be expanded
-     * @default []
-     */
-    expandedRowIds?: string[];
-
-    /**
-     * Set to `true` for the radio selection variant
-     * @default false
-     */
-    radio?: boolean;
-
-    /**
-     * Set to `true` for the selectable variant
-     * Automatically set to `true` if `radio` or `batchSelection` are `true`
-     * @default false
-     */
-    selectable?: boolean;
-
-    /**
-     * Set to `true` to enable batch selection
-     * @default false
-     */
-    batchSelection?: boolean;
-
-    /**
-     * Specify the row ids to be selected
-     * @default []
-     */
-    selectedRowIds?: string[];
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: DataTableProps;
   $$slot_def: {
     default: {};
-    ["expanded-row"]: { row: Object };
-    ["cell-header"]: { header: Header };
     cell: { row: Object; cell: Object };
+    ["cell-header"]: { header: Header };
+    ["expanded-row"]: { row: Object };
   };
 
   $on(

types/DataTable/Table.d.ts

@@ -1,43 +1,44 @@
 /// <reference types="svelte" />
 
+export interface TableProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+  /**
+   * Set the size of the table
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Set to `true` to use zebra styles
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `true` to use static width
+   * @default false
+   */
+  useStaticWidth?: boolean;
+
+  /**
+   * Set to `true` for the bordered variant
+   * @default false
+   */
+  shouldShowBorder?: boolean;
+
+  /**
+   * Set to `true` for the sortable variant
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class Table {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
-    /**
-     * Set the size of the table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Set to `true` to use zebra styles
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `true` to use static width
-     * @default false
-     */
-    useStaticWidth?: boolean;
-
-    /**
-     * Set to `true` for the bordered variant
-     * @default false
-     */
-    shouldShowBorder?: boolean;
-
-    /**
-     * Set to `true` for the sortable variant
-     * @default false
-     */
-    sortable?: boolean;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: TableProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableBody.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableBody {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
+export interface TableBodyProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> {}
 
+export default class TableBody {
+  $$prop_def: TableBodyProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableCell.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableCell {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
+export interface TableCellProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> {}
 
+export default class TableCell {
+  $$prop_def: TableCellProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableContainer.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the title of the data table
+   * @default ""
+   */
+  title?: string;
+
+  /**
+   * Specify the description of the data table
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Set to `true` to enable a sticky header
+   * @default false
+   */
+  stickyHeader?: boolean;
+}
+
 export default class TableContainer {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the title of the data table
-     * @default ""
-     */
-    title?: string;
-
-    /**
-     * Specify the description of the data table
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Set to `true` to enable a sticky header
-     * @default false
-     */
-    stickyHeader?: boolean;
-  };
-
+  $$prop_def: TableContainerProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHead.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableHead {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
+export interface TableHeadProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> {}
 
+export default class TableHead {
+  $$prop_def: TableHeadProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableHeader.d.ts

@@ -1,25 +1,27 @@
 /// <reference types="svelte" />
 
+export interface TableHeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
+  /**
+   * Specify the `scope` attribute
+   * @default "col"
+   */
+  scope?: string;
+
+  /**
+   * Override the default id translations
+   * @default () => ""
+   */
+  translateWithId?: () => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class TableHeader {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> & {
-    /**
-     * Specify the `scope` attribute
-     * @default "col"
-     */
-    scope?: string;
-
-    /**
-     * Override the default id translations
-     * @default () => ""
-     */
-    translateWithId?: () => string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-  };
-
+  $$prop_def: TableHeaderProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/TableRow.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class TableRow {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
+export interface TableRowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> {}
 
+export default class TableRow {
+  $$prop_def: TableRowProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/Toolbar.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class Toolbar {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
-    /**
-     * Specify the toolbar size
-     * @default "default"
-     */
-    size?: "sm" | "default";
-  };
+export interface ToolbarProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
+  /**
+   * Specify the toolbar size
+   * @default "default"
+   */
+  size?: "sm" | "default";
+}
 
+export default class Toolbar {
+  $$prop_def: ToolbarProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarBatchActions.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class ToolbarBatchActions {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Override the total items selected text
-     * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
-     */
-    formatTotalSelected?: (totalSelected: number) => string;
-  };
+export interface ToolbarBatchActionsProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Override the total items selected text
+   * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
+   */
+  formatTotalSelected?: (totalSelected: number) => string;
+}
 
+export default class ToolbarBatchActions {
+  $$prop_def: ToolbarBatchActionsProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarContent.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarContent {
-  $$prop_def: {};
+export interface ToolbarContentProps {}
 
+export default class ToolbarContent {
+  $$prop_def: ToolbarContentProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarMenu.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarMenu {
-  $$prop_def: {};
+export interface ToolbarMenuProps {}
 
+export default class ToolbarMenu {
+  $$prop_def: ToolbarMenuProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarMenuItem.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ToolbarMenuItem {
-  $$prop_def: {};
+export interface ToolbarMenuItemProps {}
 
+export default class ToolbarMenuItem {
+  $$prop_def: ToolbarMenuItemProps;
   $$slot_def: {
     default: {};
   };

types/DataTable/ToolbarSearch.d.ts

@@ -1,38 +1,39 @@
 /// <reference types="svelte" />
 
+export interface ToolbarSearchProps {
+  /**
+   * Specify the value of the search input
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set to `true` to expand the search bar
+   * @default false
+   */
+  expanded?: boolean;
+
+  /**
+   * Set to `true` to keep the search bar expanded
+   * @default false
+   */
+  persistent?: boolean;
+
+  /**
+   * Specify the tabindex
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class ToolbarSearch {
-  $$prop_def: {
-    /**
-     * Specify the value of the search input
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set to `true` to expand the search bar
-     * @default false
-     */
-    expanded?: boolean;
-
-    /**
-     * Set to `true` to keep the search bar expanded
-     * @default false
-     */
-    persistent?: boolean;
-
-    /**
-     * Specify the tabindex
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: ToolbarSearchProps;
   $$slot_def: {};
 
   $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;

types/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -1,50 +1,51 @@
 /// <reference types="svelte" />
 
+export interface DataTableSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> {
+  /**
+   * Specify the number of columns
+   * @default 5
+   */
+  columns?: number;
+
+  /**
+   * Specify the number of rows
+   * @default 5
+   */
+  rows?: number;
+
+  /**
+   * Set the size of the data table
+   */
+  size?: "compact" | "short" | "tall";
+
+  /**
+   * Set to `true` to apply zebra styles to the datatable rows
+   * @default false
+   */
+  zebra?: boolean;
+
+  /**
+   * Set to `false` to hide the header
+   * @default true
+   */
+  showHeader?: boolean;
+
+  /**
+   * Set the column headers
+   * If `headers` has one more items, `count` is ignored
+   * @default []
+   */
+  headers?: string[];
+
+  /**
+   * Set to `false` to hide the toolbar
+   * @default true
+   */
+  showToolbar?: boolean;
+}
+
 export default class DataTableSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> & {
-    /**
-     * Specify the number of columns
-     * @default 5
-     */
-    columns?: number;
-
-    /**
-     * Specify the number of rows
-     * @default 5
-     */
-    rows?: number;
-
-    /**
-     * Set the size of the data table
-     */
-    size?: "compact" | "short" | "tall";
-
-    /**
-     * Set to `true` to apply zebra styles to the datatable rows
-     * @default false
-     */
-    zebra?: boolean;
-
-    /**
-     * Set to `false` to hide the header
-     * @default true
-     */
-    showHeader?: boolean;
-
-    /**
-     * Set the column headers
-     * If `headers` has one more items, `count` is ignored
-     * @default []
-     */
-    headers?: string[];
-
-    /**
-     * Set to `false` to hide the toolbar
-     * @default true
-     */
-    showToolbar?: boolean;
-  };
-
+  $$prop_def: DataTableSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/DatePicker/DatePicker.d.ts

@@ -1,66 +1,68 @@
 /// <reference types="svelte" />
 
+export interface DatePickerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the date picker type
+   * @default "simple"
+   */
+  datePickerType?: "simple" | "single" | "range";
+
+  /**
+   * Specify the date picker input value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the element to append the calendar to
+   */
+  appendTo?: HTMLElement;
+
+  /**
+   * Specify the date format
+   * @default "m/d/Y"
+   */
+  dateFormat?: string;
+
+  /**
+   * Specify the maximum date
+   * @default null
+   */
+  maxDate?: null | string | Date;
+
+  /**
+   * Specify the minimum date
+   * @default null
+   */
+  minDate?: null | string | Date;
+
+  /**
+   * Specify the locale
+   * @default "en"
+   */
+  locale?: string;
+
+  /**
+   * Set to `true` to use the short variant
+   * @default false
+   */
+  short?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set an id for the date picker element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class DatePicker {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the date picker type
-     * @default "simple"
-     */
-    datePickerType?: "simple" | "single" | "range";
-
-    /**
-     * Specify the date picker input value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Specify the element to append the calendar to
-     */
-    appendTo?: HTMLElement;
-
-    /**
-     * Specify the date format
-     * @default "m/d/Y"
-     */
-    dateFormat?: string;
-
-    /**
-     * Specify the maximum date
-     * @default null
-     */
-    maxDate?: null | string | Date;
-
-    /**
-     * Specify the minimum date
-     * @default null
-     */
-    minDate?: null | string | Date;
-
-    /**
-     * Specify the locale
-     * @default "en"
-     */
-    locale?: string;
-
-    /**
-     * Set to `true` to use the short variant
-     * @default false
-     */
-    short?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set an id for the date picker element
-     */
-    id?: string;
-  };
-
+  $$prop_def: DatePickerProps;
   $$slot_def: {
     default: {};
   };

types/DatePicker/DatePickerInput.d.ts

@@ -1,83 +1,85 @@
 /// <reference types="svelte" />
 
+export interface DatePickerInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the input
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the input type
+   * @default "text"
+   */
+  type?: string;
+
+  /**
+   * Specify the input placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the Regular Expression for the input value
+   * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
+   */
+  pattern?: string;
+
+  /**
+   * Set to `true` to disable the input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the ARIA label for the calendar icon
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Set a name for the input element
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class DatePickerInput {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the input
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Specify the input type
-     * @default "text"
-     */
-    type?: string;
-
-    /**
-     * Specify the input placeholder text
-     * @default ""
-     */
-    placeholder?: string;
-
-    /**
-     * Specify the Regular Expression for the input value
-     * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
-     */
-    pattern?: string;
-
-    /**
-     * Set to `true` to disable the input
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the ARIA label for the calendar icon
-     * @default ""
-     */
-    iconDescription?: string;
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set to `true` to visually hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Set a name for the input element
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: DatePickerInputProps;
   $$slot_def: {};
 
   $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;

types/DatePicker/DatePickerSkeleton.d.ts

@@ -1,19 +1,21 @@
 /// <reference types="svelte" />
 
+export interface DatePickerSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to use the range variant
+   * @default false
+   */
+  range?: boolean;
+
+  /**
+   * Set an id to be used by the label element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class DatePickerSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to use the range variant
-     * @default false
-     */
-    range?: boolean;
-
-    /**
-     * Set an id to be used by the label element
-     */
-    id?: string;
-  };
-
+  $$prop_def: DatePickerSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Dropdown/Dropdown.d.ts

@@ -9,111 +9,114 @@ interface DropdownItem {
   text: DropdownItemText;
 }
 
+export interface DropdownProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the dropdown items
+   * @default []
+   */
+  items?: DropdownItem[];
+
+  /**
+   * Override the display of a dropdown item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: DropdownItem) => string;
+
+  /**
+   * Specify the selected item index
+   * @default -1
+   */
+  selectedIndex?: number;
+
+  /**
+   * Specify the type of dropdown
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Specify the size of the dropdown field
+   */
+  size?: "sm" | "lg" | "xl";
+
+  /**
+   * Set to `true` to open the dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the list box label
+   */
+  label?: string;
+
+  /**
+   * Override the default translation ids
+   */
+  translateWithId?: (id: any) => string;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the list box
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the button HTML element
+   * @default null
+   */
+  ref?: null | HTMLButtonElement;
+}
+
 export default class Dropdown {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the dropdown items
-     * @default []
-     */
-    items?: DropdownItem[];
-
-    /**
-     * Override the display of a dropdown item
-     * @default (item) => item.text || item.id
-     */
-    itemToString?: (item: DropdownItem) => string;
-
-    /**
-     * Specify the selected item index
-     */
-    selectedIndex?: number;
-
-    /**
-     * Specify the type of dropdown
-     * @default "default"
-     */
-    type?: "default" | "inline";
-
-    /**
-     * Specify the size of the dropdown field
-     */
-    size?: "sm" | "lg" | "xl";
-
-    /**
-     * Set to `true` to open the dropdown
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to use the inline variant
-     * @default false
-     */
-    inline?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to disable the dropdown
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the title text
-     * @default ""
-     */
-    titleText?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Specify the list box label
-     */
-    label?: string;
-
-    /**
-     * Override the default translation ids
-     */
-    translateWithId?: (id: any) => string;
-
-    /**
-     * Set an id for the list box component
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the list box
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the button HTML element
-     * @default null
-     */
-    ref?: null | HTMLButtonElement;
-  };
-
+  $$prop_def: DropdownProps;
   $$slot_def: {};
 
   $on(

types/Dropdown/DropdownSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class DropdownSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to use the inline variant
-     * @default false
-     */
-    inline?: boolean;
-  };
+export interface DropdownSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+}
 
+export default class DropdownSkeleton {
+  $$prop_def: DropdownSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/FileUploader/FileUploader.d.ts

@@ -2,76 +2,77 @@
 
 type Files = string[];
 
+export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the file uploader status
+   * @default "uploading"
+   */
+  status?: "uploading" | "edit" | "complete";
+
+  /**
+   * Specify the accepted file types
+   * @default []
+   */
+  accept?: Files;
+
+  /**
+   * Obtain the uploaded file names
+   * @default []
+   */
+  files?: Files;
+
+  /**
+   * Set to `true` to allow multiple files
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Override the default behavior of clearing the array of uploaded files
+   * @constant
+   * @default () => { files = []; }
+   */
+  clearFiles?: () => void;
+
+  /**
+   * Specify the label description
+   * @default ""
+   */
+  labelDescription?: string;
+
+  /**
+   * Specify the label title
+   * @default ""
+   */
+  labelTitle?: string;
+
+  /**
+   * Specify the kind of file uploader button
+   * @default "primary"
+   */
+  kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
+
+  /**
+   * Specify the button label
+   * @default ""
+   */
+  buttonLabel?: string;
+
+  /**
+   * Specify the ARIA label used for the status icons
+   * @default "Provide icon description"
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify a name attribute for the file button uploader input
+   * @default ""
+   */
+  name?: string;
+}
+
 export default class FileUploader {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the file uploader status
-     * @default "uploading"
-     */
-    status?: "uploading" | "edit" | "complete";
-
-    /**
-     * Specify the accepted file types
-     * @default []
-     */
-    accept?: Files;
-
-    /**
-     * Obtain the uploaded file names
-     * @default []
-     */
-    files?: Files;
-
-    /**
-     * Set to `true` to allow multiple files
-     * @default false
-     */
-    multiple?: boolean;
-
-    /**
-     * Override the default behavior of clearing the array of uploaded files
-     * @constant
-     * @default () => { files = []; }
-     */
-    clearFiles?: () => void;
-
-    /**
-     * Specify the label description
-     * @default ""
-     */
-    labelDescription?: string;
-
-    /**
-     * Specify the label title
-     * @default ""
-     */
-    labelTitle?: string;
-
-    /**
-     * Specify the kind of file uploader button
-     * @default "primary"
-     */
-    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
-
-    /**
-     * Specify the button label
-     * @default ""
-     */
-    buttonLabel?: string;
-
-    /**
-     * Specify the ARIA label used for the status icons
-     * @default "Provide icon description"
-     */
-    iconDescription?: string;
-
-    /**
-     * Specify a name attribute for the file button uploader input
-     * @default ""
-     */
-    name?: string;
-  };
-
+  $$prop_def: FileUploaderProps;
   $$slot_def: {};
 
   $on(eventname: "add", cb: (event: CustomEvent<Files>) => void): () => void;

types/FileUploader/FileUploaderButton.d.ts

@@ -2,74 +2,76 @@
 
 type Files = string[];
 
+export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+  /**
+   * Specify the accepted file types
+   * @default []
+   */
+  accept?: Files;
+
+  /**
+   * Set to `true` to allow multiple files
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Set to `true` to disable the input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to disable label changes
+   * @default false
+   */
+  disableLabelChanges?: boolean;
+
+  /**
+   * Specify the kind of file uploader button
+   * @default "primary"
+   */
+  kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
+
+  /**
+   * Specify the label text
+   * @default "Add file"
+   */
+  labelText?: string;
+
+  /**
+   * Specify the label role
+   * @default "button"
+   */
+  role?: string;
+
+  /**
+   * Specify `tabindex` attribute
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class FileUploaderButton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> & {
-    /**
-     * Specify the accepted file types
-     * @default []
-     */
-    accept?: Files;
-
-    /**
-     * Set to `true` to allow multiple files
-     * @default false
-     */
-    multiple?: boolean;
-
-    /**
-     * Set to `true` to disable the input
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to disable label changes
-     * @default false
-     */
-    disableLabelChanges?: boolean;
-
-    /**
-     * Specify the kind of file uploader button
-     * @default "primary"
-     */
-    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
-
-    /**
-     * Specify the label text
-     * @default "Add file"
-     */
-    labelText?: string;
-
-    /**
-     * Specify the label role
-     * @default "button"
-     */
-    role?: string;
-
-    /**
-     * Specify `tabindex` attribute
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the input
-     * @default ""
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: FileUploaderButtonProps;
   $$slot_def: {};
 
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;

types/FileUploader/FileUploaderDropContainer.d.ts

@@ -2,69 +2,71 @@
 
 type Files = string[];
 
+export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the accepted file types
+   * @default []
+   */
+  accept?: Files;
+
+  /**
+   * Set to `true` to allow multiple files
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Override the default behavior of validating uploaded files
+   * The default behavior does not validate files
+   * @default (files) => files
+   */
+  validateFiles?: (files: Files) => Files;
+
+  /**
+   * Specify the label text
+   * @default "Add file"
+   */
+  labelText?: string;
+
+  /**
+   * Specify the `role` attribute of the drop container
+   * @default "button"
+   */
+  role?: string;
+
+  /**
+   * Set to `true` to disable the input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify `tabindex` attribute
+   * @default "0"
+   */
+  tabindex?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class FileUploaderDropContainer {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the accepted file types
-     * @default []
-     */
-    accept?: Files;
-
-    /**
-     * Set to `true` to allow multiple files
-     * @default false
-     */
-    multiple?: boolean;
-
-    /**
-     * Override the default behavior of validating uploaded files
-     * The default behavior does not validate files
-     * @default (files) => files
-     */
-    validateFiles?: (files: Files) => Files;
-
-    /**
-     * Specify the label text
-     * @default "Add file"
-     */
-    labelText?: string;
-
-    /**
-     * Specify the `role` attribute of the drop container
-     * @default "button"
-     */
-    role?: string;
-
-    /**
-     * Set to `true` to disable the input
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify `tabindex` attribute
-     * @default "0"
-     */
-    tabindex?: string;
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the input
-     * @default ""
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: FileUploaderDropContainerProps;
   $$slot_def: {};
 
   $on(eventname: "add", cb: (event: CustomEvent<Files>) => void): () => void;

types/FileUploader/FileUploaderItem.d.ts

@@ -1,49 +1,51 @@
 /// <reference types="svelte" />
 
+export interface FileUploaderItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
+  /**
+   * Specify the file uploader status
+   * @default "uploading"
+   */
+  status?: "uploading" | "edit" | "complete";
+
+  /**
+   * Specify the ARIA label used for the status icons
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the error subject text
+   * @default ""
+   */
+  errorSubject?: string;
+
+  /**
+   * Specify the error body text
+   * @default ""
+   */
+  errorBody?: string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify the file uploader name
+   * @default ""
+   */
+  name?: string;
+}
+
 export default class FileUploaderItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> & {
-    /**
-     * Specify the file uploader status
-     * @default "uploading"
-     */
-    status?: "uploading" | "edit" | "complete";
-
-    /**
-     * Specify the ARIA label used for the status icons
-     * @default ""
-     */
-    iconDescription?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the error subject text
-     * @default ""
-     */
-    errorSubject?: string;
-
-    /**
-     * Specify the error body text
-     * @default ""
-     */
-    errorBody?: string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-
-    /**
-     * Specify the file uploader name
-     * @default ""
-     */
-    name?: string;
-  };
-
+  $$prop_def: FileUploaderItemProps;
   $$slot_def: {};
 
   $on(eventname: "delete", cb: (event: CustomEvent<string>) => void): () => void;

types/FileUploader/FileUploaderSkeleton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class FileUploaderSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface FileUploaderSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class FileUploaderSkeleton {
+  $$prop_def: FileUploaderSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/FileUploader/Filename.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface FilenameProps {
+  /**
+   * Specify the file name status
+   * @default "uploading"
+   */
+  status?: "uploading" | "edit" | "complete";
+
+  /**
+   * Specify the ARIA label used for the status icons
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+}
+
 export default class Filename {
-  $$prop_def: {
-    /**
-     * Specify the file name status
-     * @default "uploading"
-     */
-    status?: "uploading" | "edit" | "complete";
-
-    /**
-     * Specify the ARIA label used for the status icons
-     * @default ""
-     */
-    iconDescription?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-  };
-
+  $$prop_def: FilenameProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/FluidForm/FluidForm.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class FluidForm {
-  $$prop_def: {};
+export interface FluidFormProps {}
 
+export default class FluidForm {
+  $$prop_def: FluidFormProps;
   $$slot_def: {
     default: {};
   };

types/Form/Form.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class Form {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> & {};
+export interface FormProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> {}
 
+export default class Form {
+  $$prop_def: FormProps;
   $$slot_def: {
     default: {};
   };

types/FormGroup/FormGroup.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="svelte" />
 
+export interface FormGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Set to `true` to render a form requirement
+   * @default false
+   */
+  message?: boolean;
+
+  /**
+   * Specify the message text
+   * @default ""
+   */
+  messageText?: string;
+
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legendText?: string;
+}
+
 export default class FormGroup {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> & {
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Set to `true` to render a form requirement
-     * @default false
-     */
-    message?: boolean;
-
-    /**
-     * Specify the message text
-     * @default ""
-     */
-    messageText?: string;
-
-    /**
-     * Specify the legend text
-     * @default ""
-     */
-    legendText?: string;
-  };
-
+  $$prop_def: FormGroupProps;
   $$slot_def: {
     default: {};
   };

types/FormItem/FormItem.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class FormItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface FormItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class FormItem {
+  $$prop_def: FormItemProps;
   $$slot_def: {
     default: {};
   };

types/FormLabel/FormLabel.d.ts

@@ -1,13 +1,15 @@
 /// <reference types="svelte" />
 
-export default class FormLabel {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["label"]> & {
-    /**
-     * Set an id to be used by the label element
-     */
-    id?: string;
-  };
+export interface FormLabelProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["label"]> {
+  /**
+   * Set an id to be used by the label element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
 
+export default class FormLabel {
+  $$prop_def: FormLabelProps;
   $$slot_def: {
     default: {};
   };

types/Grid/Column.d.ts

@@ -9,64 +9,65 @@ interface ColumnSizeDescriptor {
 
 type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 
+export interface ColumnProps {
+  /**
+   * 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>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @default false
+   */
+  noGutter?: boolean;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @default false
+   */
+  noGutterLeft?: boolean;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @default false
+   */
+  noGutterRight?: boolean;
+
+  /**
+   * Specify the aspect ratio of the column
+   */
+  aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
+
+  /**
+   * Set the small breakpoint
+   */
+  sm?: ColumnBreakpoint;
+
+  /**
+   * Set the medium breakpoint
+   */
+  md?: ColumnBreakpoint;
+
+  /**
+   * Set the large breakpoint
+   */
+  lg?: ColumnBreakpoint;
+
+  /**
+   * Set the extra large breakpoint
+   */
+  xlg?: ColumnBreakpoint;
+
+  /**
+   * Set the maximum breakpoint
+   */
+  max?: ColumnBreakpoint;
+}
+
 export default class Column {
-  $$prop_def: {
-    /**
-     * 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>)
-     * @default false
-     */
-    as?: boolean;
-
-    /**
-     * Set to `true` to remove the gutter
-     * @default false
-     */
-    noGutter?: boolean;
-
-    /**
-     * Set to `true` to remove the left gutter
-     * @default false
-     */
-    noGutterLeft?: boolean;
-
-    /**
-     * Set to `true` to remove the right gutter
-     * @default false
-     */
-    noGutterRight?: boolean;
-
-    /**
-     * Specify the aspect ratio of the column
-     */
-    aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
-
-    /**
-     * Set the small breakpoint
-     */
-    sm?: ColumnBreakpoint;
-
-    /**
-     * Set the medium breakpoint
-     */
-    md?: ColumnBreakpoint;
-
-    /**
-     * Set the large breakpoint
-     */
-    lg?: ColumnBreakpoint;
-
-    /**
-     * Set the extra large breakpoint
-     */
-    xlg?: ColumnBreakpoint;
-
-    /**
-     * Set the maximum breakpoint
-     */
-    max?: ColumnBreakpoint;
-  };
-
+  $$prop_def: ColumnProps;
   $$slot_def: {
     default: { props?: { class: string } };
   };

types/Grid/Grid.d.ts

@@ -1,51 +1,52 @@
 /// <reference types="svelte" />
 
+export interface GridProps {
+  /**
+   * 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>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @default false
+   */
+  condensed?: boolean;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @default false
+   */
+  narrow?: boolean;
+
+  /**
+   * Set to `true` to use the fullWidth variant
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @default false
+   */
+  noGutter?: boolean;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @default false
+   */
+  noGutterLeft?: boolean;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @default false
+   */
+  noGutterRight?: boolean;
+}
+
 export default class Grid {
-  $$prop_def: {
-    /**
-     * 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>)
-     * @default false
-     */
-    as?: boolean;
-
-    /**
-     * Set to `true` to use the condensed variant
-     * @default false
-     */
-    condensed?: boolean;
-
-    /**
-     * Set to `true` to use the narrow variant
-     * @default false
-     */
-    narrow?: boolean;
-
-    /**
-     * Set to `true` to use the fullWidth variant
-     * @default false
-     */
-    fullWidth?: boolean;
-
-    /**
-     * Set to `true` to remove the gutter
-     * @default false
-     */
-    noGutter?: boolean;
-
-    /**
-     * Set to `true` to remove the left gutter
-     * @default false
-     */
-    noGutterLeft?: boolean;
-
-    /**
-     * Set to `true` to remove the right gutter
-     * @default false
-     */
-    noGutterRight?: boolean;
-  };
-
+  $$prop_def: GridProps;
   $$slot_def: {
     default: { props?: { class: string } };
   };

types/Grid/Row.d.ts

@@ -1,45 +1,46 @@
 /// <reference types="svelte" />
 
+export interface RowProps {
+  /**
+   * 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>)
+   * @default false
+   */
+  as?: boolean;
+
+  /**
+   * Set to `true` to use the condensed variant
+   * @default false
+   */
+  condensed?: boolean;
+
+  /**
+   * Set to `true` to use the narrow variant
+   * @default false
+   */
+  narrow?: boolean;
+
+  /**
+   * Set to `true` to remove the gutter
+   * @default false
+   */
+  noGutter?: boolean;
+
+  /**
+   * Set to `true` to remove the left gutter
+   * @default false
+   */
+  noGutterLeft?: boolean;
+
+  /**
+   * Set to `true` to remove the right gutter
+   * @default false
+   */
+  noGutterRight?: boolean;
+}
+
 export default class Row {
-  $$prop_def: {
-    /**
-     * 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>)
-     * @default false
-     */
-    as?: boolean;
-
-    /**
-     * Set to `true` to use the condensed variant
-     * @default false
-     */
-    condensed?: boolean;
-
-    /**
-     * Set to `true` to use the narrow variant
-     * @default false
-     */
-    narrow?: boolean;
-
-    /**
-     * Set to `true` to remove the gutter
-     * @default false
-     */
-    noGutter?: boolean;
-
-    /**
-     * Set to `true` to remove the left gutter
-     * @default false
-     */
-    noGutterLeft?: boolean;
-
-    /**
-     * Set to `true` to remove the right gutter
-     * @default false
-     */
-    noGutterRight?: boolean;
-  };
-
+  $$prop_def: RowProps;
   $$slot_def: {
     default: { props?: { class: string } };
   };

types/Icon/Icon.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface IconProps {
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   * Icon size must be 16px (e.g. `Add16`, `Task16`)
+   */
+  render?: import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+}
+
 export default class Icon {
-  $$prop_def: {
-    /**
-     * Specify the icon from `carbon-icons-svelte` to render
-     * Icon size must be 16px (e.g. `Add16`, `Task16`)
-     */
-    render?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-  };
-
+  $$prop_def: IconProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Icon/IconSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class IconSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the icon
-     * @default 16
-     */
-    size?: number;
-  };
+export interface IconSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the icon
+   * @default 16
+   */
+  size?: number;
+}
 
+export default class IconSkeleton {
+  $$prop_def: IconSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/InlineLoading/InlineLoading.d.ts

@@ -1,30 +1,31 @@
 /// <reference types="svelte" />
 
+export interface InlineLoadingProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the loading status
+   * @default "active"
+   */
+  status?: "active" | "inactive" | "finished" | "error";
+
+  /**
+   * Set the loading description
+   */
+  description?: string;
+
+  /**
+   * Specify the ARIA label for the loading icon
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify the timeout delay (ms) after `status` is set to "success"
+   * @default 1500
+   */
+  successDelay?: number;
+}
+
 export default class InlineLoading {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the loading status
-     * @default "active"
-     */
-    status?: "active" | "inactive" | "finished" | "error";
-
-    /**
-     * Set the loading description
-     */
-    description?: string;
-
-    /**
-     * Specify the ARIA label for the loading icon
-     */
-    iconDescription?: string;
-
-    /**
-     * Specify the timeout delay (ms) after `status` is set to "success"
-     * @default 1500
-     */
-    successDelay?: number;
-  };
-
+  $$prop_def: InlineLoadingProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Link/Link.d.ts

@@ -1,42 +1,43 @@
 /// <reference types="svelte" />
 
+export interface LinkProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
+  /**
+   * Specify the size of the link
+   */
+  size?: "sm" | "lg";
+
+  /**
+   * Specify the href value
+   */
+  href?: string;
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Set to `true` to disable the checkbox
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to allow visited styles
+   * @default false
+   */
+  visited?: boolean;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement | HTMLParagraphElement;
+}
+
 export default class Link {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> & {
-    /**
-     * Specify the size of the link
-     */
-    size?: "sm" | "lg";
-
-    /**
-     * Specify the href value
-     */
-    href?: string;
-
-    /**
-     * Set to `true` to use the inline variant
-     * @default false
-     */
-    inline?: boolean;
-
-    /**
-     * Set to `true` to disable the checkbox
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to allow visited styles
-     * @default false
-     */
-    visited?: boolean;
-
-    /**
-     * Obtain a reference to the top-level HTML element
-     * @default null
-     */
-    ref?: null | HTMLAnchorElement | HTMLParagraphElement;
-  };
-
+  $$prop_def: LinkProps;
   $$slot_def: {
     default: {};
   };

types/ListBox/ListBox.d.ts

@@ -1,49 +1,50 @@
 /// <reference types="svelte" />
 
+export interface ListBoxProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the list box
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set the type of the list box
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Set to `true` to open the list box
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the list box
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+}
+
 export default class ListBox {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the list box
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set the type of the list box
-     * @default "default"
-     */
-    type?: "default" | "inline";
-
-    /**
-     * Set to `true` to open the list box
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to disable the list box
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-  };
-
+  $$prop_def: ListBoxProps;
   $$slot_def: {
     default: {};
   };

types/ListBox/ListBoxField.d.ts

@@ -2,51 +2,53 @@
 
 type ListBoxFieldTranslationId = "close" | "open";
 
+export interface ListBoxFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to disable the list box field
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the role attribute
+   * @default "combobox"
+   */
+  role?: string;
+
+  /**
+   * Specify the tabindex
+   * @default "-1"
+   */
+  tabindex?: string;
+
+  /**
+   * Default translation ids
+   * @constant
+   * @default { close: "close", open: "open" }
+   */
+  translationIds?: { close: "close"; open: "open" };
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxFieldTranslationId) => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class ListBoxField {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to disable the list box field
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the role attribute
-     * @default "combobox"
-     */
-    role?: string;
-
-    /**
-     * Specify the tabindex
-     * @default "-1"
-     */
-    tabindex?: string;
-
-    /**
-     * Default translation ids
-     * @constant
-     * @default { close: "close", open: "open" }
-     */
-    translationIds?: { close: "close"; open: "open" };
-
-    /**
-     * Override the default translation ids
-     * @default (id) => defaultTranslations[id]
-     */
-    translateWithId?: (id: ListBoxFieldTranslationId) => string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the top-level HTML element
-     * @default null
-     */
-    ref?: null | HTMLDivElement;
-  };
-
+  $$prop_def: ListBoxFieldProps;
   $$slot_def: {
     default: {};
   };

types/ListBox/ListBoxMenu.d.ts

@@ -1,19 +1,21 @@
 /// <reference types="svelte" />
 
+export interface ListBoxMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class ListBoxMenu {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the HTML element
-     * @default null
-     */
-    ref?: null | HTMLDivElement;
-  };
-
+  $$prop_def: ListBoxMenuProps;
   $$slot_def: {
     default: {};
   };

types/ListBox/ListBoxMenuIcon.d.ts

@@ -2,28 +2,29 @@
 
 type ListBoxMenuIconTranslationId = "close" | "open";
 
+export interface ListBoxMenuIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to open the list box menu icon
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Default translation ids
+   * @constant
+   * @default { close: "close", open: "open" }
+   */
+  translationIds?: { close: "close"; open: "open" };
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
+}
+
 export default class ListBoxMenuIcon {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to open the list box menu icon
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Default translation ids
-     * @constant
-     * @default { close: "close", open: "open" }
-     */
-    translationIds?: { close: "close"; open: "open" };
-
-    /**
-     * Override the default translation ids
-     * @default (id) => defaultTranslations[id]
-     */
-    translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
-  };
-
+  $$prop_def: ListBoxMenuIconProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/ListBox/ListBoxMenuItem.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface ListBoxMenuItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to enable the active state
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Set to `true` to enable the highlighted state
+   * @default false
+   */
+  highlighted?: boolean;
+}
+
 export default class ListBoxMenuItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to enable the active state
-     * @default false
-     */
-    active?: boolean;
-
-    /**
-     * Set to `true` to enable the highlighted state
-     * @default false
-     */
-    highlighted?: boolean;
-  };
-
+  $$prop_def: ListBoxMenuItemProps;
   $$slot_def: {
     default: {};
   };

types/ListBox/ListBoxSelection.d.ts

@@ -2,39 +2,40 @@
 
 type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
 
+export interface ListBoxSelectionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the number of selected items
+   */
+  selectionCount?: any;
+
+  /**
+   * Set to `true` to disable the list box selection
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Default translation ids
+   * @constant
+   * @default { clearAll: "clearAll", clearSelection: "clearSelection", }
+   */
+  translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" };
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: ListBoxSelectionTranslationId) => string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class ListBoxSelection {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the number of selected items
-     */
-    selectionCount?: any;
-
-    /**
-     * Set to `true` to disable the list box selection
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Default translation ids
-     * @constant
-     * @default { clearAll: "clearAll", clearSelection: "clearSelection", }
-     */
-    translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" };
-
-    /**
-     * Override the default translation ids
-     * @default (id) => defaultTranslations[id]
-     */
-    translateWithId?: (id: ListBoxSelectionTranslationId) => string;
-
-    /**
-     * Obtain a reference to the top-level HTML element
-     * @default null
-     */
-    ref?: null | HTMLElement;
-  };
-
+  $$prop_def: ListBoxSelectionProps;
   $$slot_def: {};
 
   $on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;

types/ListItem/ListItem.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class ListItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {};
+export interface ListItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {}
 
+export default class ListItem {
+  $$prop_def: ListItemProps;
   $$slot_def: {
     default: {};
   };

types/Loading/Loading.d.ts

@@ -1,37 +1,39 @@
 /// <reference types="svelte" />
 
+export interface LoadingProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to use the small variant
+   * @default false
+   */
+  small?: boolean;
+
+  /**
+   * Set to `false` to disable the active state
+   * @default true
+   */
+  active?: boolean;
+
+  /**
+   * Set to `false` to disable the overlay
+   * @default true
+   */
+  withOverlay?: boolean;
+
+  /**
+   * Specify the label description
+   * @default "Active loading indicator"
+   */
+  description?: string;
+
+  /**
+   * Set an id for the label element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class Loading {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to use the small variant
-     * @default false
-     */
-    small?: boolean;
-
-    /**
-     * Set to `false` to disable the active state
-     * @default true
-     */
-    active?: boolean;
-
-    /**
-     * Set to `false` to disable the overlay
-     * @default true
-     */
-    withOverlay?: boolean;
-
-    /**
-     * Specify the label description
-     * @default "Active loading indicator"
-     */
-    description?: string;
-
-    /**
-     * Set an id for the label element
-     */
-    id?: string;
-  };
-
+  $$prop_def: LoadingProps;
   $$slot_def: {};
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Modal/Modal.d.ts

@@ -1,121 +1,123 @@
 /// <reference types="svelte" />
 
+export interface ModalProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the modal
+   */
+  size?: "xs" | "sm" | "lg";
+
+  /**
+   * Set to `true` to open the modal
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Set to `true` to enable alert mode
+   * @default false
+   */
+  alert?: boolean;
+
+  /**
+   * Set to `true` to use the passive variant
+   * @default false
+   */
+  passiveModal?: boolean;
+
+  /**
+   * Specify the modal heading
+   */
+  modalHeading?: string;
+
+  /**
+   * Specify the modal label
+   */
+  modalLabel?: string;
+
+  /**
+   * Specify the ARIA label for the modal
+   */
+  modalAriaLabel?: string;
+
+  /**
+   * Specify the ARIA label for the close icon
+   * @default "Close the modal"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set to `true` if the modal contains form elements
+   * @default false
+   */
+  hasForm?: boolean;
+
+  /**
+   * Set to `true` if the modal contains scrolling content
+   * @default false
+   */
+  hasScrollingContent?: boolean;
+
+  /**
+   * Specify the primary button text
+   * @default ""
+   */
+  primaryButtonText?: string;
+
+  /**
+   * Set to `true` to disable the primary button
+   * @default false
+   */
+  primaryButtonDisabled?: boolean;
+
+  /**
+   * Set to `true` for the primary button to be triggered when pressing "Enter"
+   * @default true
+   */
+  shouldSubmitOnEnter?: boolean;
+
+  /**
+   * Specify the secondary button text
+   * @default ""
+   */
+  secondaryButtonText?: string;
+
+  /**
+   * Specify a selector to be focused when opening the modal
+   * @default "[data-modal-primary-focus]"
+   */
+  selectorPrimaryFocus?: string;
+
+  /**
+   * Set to `true` to prevent the modal from closing when clicking outside
+   * @default false
+   */
+  preventCloseOnClickOutside?: boolean;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the top-level HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class Modal {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the modal
-     */
-    size?: "xs" | "sm" | "lg";
-
-    /**
-     * Set to `true` to open the modal
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to use the danger variant
-     * @default false
-     */
-    danger?: boolean;
-
-    /**
-     * Set to `true` to enable alert mode
-     * @default false
-     */
-    alert?: boolean;
-
-    /**
-     * Set to `true` to use the passive variant
-     * @default false
-     */
-    passiveModal?: boolean;
-
-    /**
-     * Specify the modal heading
-     */
-    modalHeading?: string;
-
-    /**
-     * Specify the modal label
-     */
-    modalLabel?: string;
-
-    /**
-     * Specify the ARIA label for the modal
-     */
-    modalAriaLabel?: string;
-
-    /**
-     * Specify the ARIA label for the close icon
-     * @default "Close the modal"
-     */
-    iconDescription?: string;
-
-    /**
-     * Set to `true` if the modal contains form elements
-     * @default false
-     */
-    hasForm?: boolean;
-
-    /**
-     * Set to `true` if the modal contains scrolling content
-     * @default false
-     */
-    hasScrollingContent?: boolean;
-
-    /**
-     * Specify the primary button text
-     * @default ""
-     */
-    primaryButtonText?: string;
-
-    /**
-     * Set to `true` to disable the primary button
-     * @default false
-     */
-    primaryButtonDisabled?: boolean;
-
-    /**
-     * Set to `true` for the primary button to be triggered when pressing "Enter"
-     * @default true
-     */
-    shouldSubmitOnEnter?: boolean;
-
-    /**
-     * Specify the secondary button text
-     * @default ""
-     */
-    secondaryButtonText?: string;
-
-    /**
-     * Specify a selector to be focused when opening the modal
-     * @default "[data-modal-primary-focus]"
-     */
-    selectorPrimaryFocus?: string;
-
-    /**
-     * Set to `true` to prevent the modal from closing when clicking outside
-     * @default false
-     */
-    preventCloseOnClickOutside?: boolean;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the top-level HTML element
-     * @default null
-     */
-    ref?: null | HTMLDivElement;
-  };
-
+  $$prop_def: ModalProps;
   $$slot_def: {
     default: {};
-    label: {};
     heading: {};
+    label: {};
   };
 
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;

types/MultiSelect/MultiSelect.d.ts

@@ -9,151 +9,153 @@ interface MultiSelectItem {
   text: MultiSelectItemText;
 }
 
+export interface MultiSelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the multiselect items
+   * @default []
+   */
+  items?: MultiSelectItem[];
+
+  /**
+   * Override the display of a multiselect item
+   * @default (item) => item.text || item.id
+   */
+  itemToString?: (item: MultiSelectItem) => string;
+
+  /**
+   * Set the selected ids
+   * @default []
+   */
+  selectedIds?: MultiSelectItemId[];
+
+  /**
+   * Specify the multiselect value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set the size of the combobox
+   */
+  size?: "sm" | "lg" | "xl";
+
+  /**
+   * Specify the type of multiselect
+   * @default "default"
+   */
+  type?: "default" | "inline";
+
+  /**
+   * Specify the selection feedback after selecting items
+   * @default "top-after-reopen"
+   */
+  selectionFeedback?: "top" | "fixed" | "top-after-reopen";
+
+  /**
+   * Set to `true` to disable the dropdown
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to filter items
+   * @default false
+   */
+  filterable?: boolean;
+
+  /**
+   * Override the filtering logic
+   * The default filtering is an exact string comparison
+   * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase())
+   */
+  filterItem?: (item: MultiSelectItem, value: string) => string;
+
+  /**
+   * Set to `true` to open the dropdown
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Specify the locale
+   * @default "en"
+   */
+  locale?: string;
+
+  /**
+   * Specify the placeholder text
+   * @default ""
+   */
+  placeholder?: string;
+
+  /**
+   * Override the sorting logic
+   * 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;
+
+  /**
+   * Override the default translation ids
+   */
+  translateWithId?: (id: any) => string;
+
+  /**
+   * Specify the title text
+   * @default ""
+   */
+  titleText?: string;
+
+  /**
+   * Set to `true` to pass the item to `itemToString` in the checkbox
+   * @default false
+   */
+  useTitleInItem?: boolean;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the list box label
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Set an id for the list box component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the select
+   */
+  name?: string;
+}
+
 export default class MultiSelect {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the multiselect items
-     * @default []
-     */
-    items?: MultiSelectItem[];
-
-    /**
-     * Override the display of a multiselect item
-     * @default (item) => item.text || item.id
-     */
-    itemToString?: (item: MultiSelectItem) => string;
-
-    /**
-     * Set the selected ids
-     * @default []
-     */
-    selectedIds?: MultiSelectItemId[];
-
-    /**
-     * Specify the multiselect value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set the size of the combobox
-     */
-    size?: "sm" | "lg" | "xl";
-
-    /**
-     * Specify the type of multiselect
-     * @default "default"
-     */
-    type?: "default" | "inline";
-
-    /**
-     * Specify the selection feedback after selecting items
-     * @default "top-after-reopen"
-     */
-    selectionFeedback?: "top" | "fixed" | "top-after-reopen";
-
-    /**
-     * Set to `true` to disable the dropdown
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to filter items
-     * @default false
-     */
-    filterable?: boolean;
-
-    /**
-     * Override the filtering logic
-     * The default filtering is an exact string comparison
-     * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase())
-     */
-    filterItem?: (item: MultiSelectItem, value: string) => string;
-
-    /**
-     * Set to `true` to open the dropdown
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Specify the locale
-     * @default "en"
-     */
-    locale?: string;
-
-    /**
-     * Specify the placeholder text
-     * @default ""
-     */
-    placeholder?: string;
-
-    /**
-     * Override the sorting logic
-     * 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;
-
-    /**
-     * Override the default translation ids
-     */
-    translateWithId?: (id: any) => string;
-
-    /**
-     * Specify the title text
-     * @default ""
-     */
-    titleText?: string;
-
-    /**
-     * Set to `true` to pass the item to `itemToString` in the checkbox
-     * @default false
-     */
-    useTitleInItem?: boolean;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Specify the list box label
-     * @default ""
-     */
-    label?: string;
-
-    /**
-     * Set an id for the list box component
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the select
-     */
-    name?: string;
-  };
-
+  $$prop_def: MultiSelectProps;
   $$slot_def: {};
 
   $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void;

types/Notification/InlineNotification.d.ts

@@ -1,62 +1,63 @@
 /// <reference types="svelte" />
 
+export interface InlineNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the type of notification
+   * @default "inline"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the kind of notification
+   * @default "error"
+   */
+  kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @default false
+   */
+  lowContrast?: boolean;
+
+  /**
+   * Set the timeout duration (ms) to hide the notification after opening it
+   * @default 0
+   */
+  timeout?: number;
+
+  /**
+   * Set the `role` attribute
+   * @default "alert"
+   */
+  role?: string;
+
+  /**
+   * Specify the title text
+   * @default "Title"
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle text
+   * @default ""
+   */
+  subtitle?: string;
+
+  /**
+   * Set to `true` to hide the close button
+   * @default false
+   */
+  hideCloseButton?: boolean;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Closes notification"
+   */
+  iconDescription?: string;
+}
+
 export default class InlineNotification {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the type of notification
-     * @default "inline"
-     */
-    notificationType?: "toast" | "inline";
-
-    /**
-     * Specify the kind of notification
-     * @default "error"
-     */
-    kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
-
-    /**
-     * Set to `true` to use the low contrast variant
-     * @default false
-     */
-    lowContrast?: boolean;
-
-    /**
-     * Set the timeout duration (ms) to hide the notification after opening it
-     * @default 0
-     */
-    timeout?: number;
-
-    /**
-     * Set the `role` attribute
-     * @default "alert"
-     */
-    role?: string;
-
-    /**
-     * Specify the title text
-     * @default "Title"
-     */
-    title?: string;
-
-    /**
-     * Specify the subtitle text
-     * @default ""
-     */
-    subtitle?: string;
-
-    /**
-     * Set to `true` to hide the close button
-     * @default false
-     */
-    hideCloseButton?: boolean;
-
-    /**
-     * Specify the ARIA label for the icon
-     * @default "Closes notification"
-     */
-    iconDescription?: string;
-  };
-
+  $$prop_def: InlineNotificationProps;
   $$slot_def: {
     default: {};
     actions: {};

types/Notification/NotificationActionButton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class NotificationActionButton {
-  $$prop_def: {};
+export interface NotificationActionButtonProps {}
 
+export default class NotificationActionButton {
+  $$prop_def: NotificationActionButtonProps;
   $$slot_def: {
     default: {};
   };

types/Notification/NotificationButton.d.ts

@@ -1,30 +1,31 @@
 /// <reference types="svelte" />
 
+export interface NotificationButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  renderIcon?: import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the title of the icon
+   */
+  title?: string;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Close icon"
+   */
+  iconDescription?: string;
+}
+
 export default class NotificationButton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
-    /**
-     * Set the type of notification
-     * @default "toast"
-     */
-    notificationType?: "toast" | "inline";
-
-    /**
-     * Specify the icon from `carbon-icons-svelte` to render
-     */
-    renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
-    /**
-     * Specify the title of the icon
-     */
-    title?: string;
-
-    /**
-     * Specify the ARIA label for the icon
-     * @default "Close icon"
-     */
-    iconDescription?: string;
-  };
-
+  $$prop_def: NotificationButtonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Notification/NotificationIcon.d.ts

@@ -1,26 +1,27 @@
 /// <reference types="svelte" />
 
+export interface NotificationIconProps {
+  /**
+   * Specify the kind of notification icon
+   * @default "error"
+   */
+  kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
+
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Closes notification"
+   */
+  iconDescription?: string;
+}
+
 export default class NotificationIcon {
-  $$prop_def: {
-    /**
-     * Specify the kind of notification icon
-     * @default "error"
-     */
-    kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
-
-    /**
-     * Set the type of notification
-     * @default "toast"
-     */
-    notificationType?: "toast" | "inline";
-
-    /**
-     * Specify the ARIA label for the icon
-     * @default "Closes notification"
-     */
-    iconDescription?: string;
-  };
-
+  $$prop_def: NotificationIconProps;
   $$slot_def: {};
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Notification/NotificationTextDetails.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="svelte" />
 
+export interface NotificationTextDetailsProps {
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the title text
+   * @default "Title"
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle text
+   * @default ""
+   */
+  subtitle?: string;
+
+  /**
+   * Specify the caption text
+   * @default "Caption"
+   */
+  caption?: string;
+}
+
 export default class NotificationTextDetails {
-  $$prop_def: {
-    /**
-     * Set the type of notification
-     * @default "toast"
-     */
-    notificationType?: "toast" | "inline";
-
-    /**
-     * Specify the title text
-     * @default "Title"
-     */
-    title?: string;
-
-    /**
-     * Specify the subtitle text
-     * @default ""
-     */
-    subtitle?: string;
-
-    /**
-     * Specify the caption text
-     * @default "Caption"
-     */
-    caption?: string;
-  };
-
+  $$prop_def: NotificationTextDetailsProps;
   $$slot_def: {
     default: {};
   };

types/Notification/ToastNotification.d.ts

@@ -1,68 +1,69 @@
 /// <reference types="svelte" />
 
+export interface ToastNotificationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the type of notification
+   * @default "toast"
+   */
+  notificationType?: "toast" | "inline";
+
+  /**
+   * Specify the kind of notification
+   * @default "error"
+   */
+  kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
+
+  /**
+   * Set to `true` to use the low contrast variant
+   * @default false
+   */
+  lowContrast?: boolean;
+
+  /**
+   * Set the timeout duration (ms) to hide the notification after opening it
+   * @default 0
+   */
+  timeout?: number;
+
+  /**
+   * Set the `role` attribute
+   * @default "alert"
+   */
+  role?: string;
+
+  /**
+   * Specify the title text
+   * @default "Title"
+   */
+  title?: string;
+
+  /**
+   * Specify the subtitle text
+   * @default ""
+   */
+  subtitle?: string;
+
+  /**
+   * Specify the caption text
+   * @default "Caption"
+   */
+  caption?: string;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Closes notification"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set to `true` to hide the close button
+   * @default false
+   */
+  hideCloseButton?: boolean;
+}
+
 export default class ToastNotification {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the type of notification
-     * @default "toast"
-     */
-    notificationType?: "toast" | "inline";
-
-    /**
-     * Specify the kind of notification
-     * @default "error"
-     */
-    kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
-
-    /**
-     * Set to `true` to use the low contrast variant
-     * @default false
-     */
-    lowContrast?: boolean;
-
-    /**
-     * Set the timeout duration (ms) to hide the notification after opening it
-     * @default 0
-     */
-    timeout?: number;
-
-    /**
-     * Set the `role` attribute
-     * @default "alert"
-     */
-    role?: string;
-
-    /**
-     * Specify the title text
-     * @default "Title"
-     */
-    title?: string;
-
-    /**
-     * Specify the subtitle text
-     * @default ""
-     */
-    subtitle?: string;
-
-    /**
-     * Specify the caption text
-     * @default "Caption"
-     */
-    caption?: string;
-
-    /**
-     * Specify the ARIA label for the icon
-     * @default "Closes notification"
-     */
-    iconDescription?: string;
-
-    /**
-     * Set to `true` to hide the close button
-     * @default false
-     */
-    hideCloseButton?: boolean;
-  };
-
+  $$prop_def: ToastNotificationProps;
   $$slot_def: {
     default: {};
   };

types/NumberInput/NumberInput.d.ts

@@ -2,131 +2,133 @@
 
 type NumberInputTranslationId = "increment" | "decrement";
 
+export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the size of the input
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the input value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the step increment
+   * @default 1
+   */
+  step?: number;
+
+  /**
+   * Specify the maximum value
+   */
+  max?: number;
+
+  /**
+   * Specify the minimum value
+   */
+  min?: number;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` for the input to be read-only
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * Set to `true` to enable the mobile variant
+   * @default false
+   */
+  mobile?: boolean;
+
+  /**
+   * Set to `true` to allow for an empty value
+   * @default false
+   */
+  allowEmpty?: boolean;
+
+  /**
+   * Set to `true` to disable the input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the ARIA label for the increment icons
+   * @default ""
+   */
+  iconDescription?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Override the default translation ids
+   * @default (id) => defaultTranslations[id]
+   */
+  translateWithId?: (id: NumberInputTranslationId) => string;
+
+  /**
+   * Default translation ids
+   * @constant
+   * @default { increment: "increment", decrement: "decrement", }
+   */
+  translationIds?: { increment: "increment"; decrement: "decrement" };
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the input
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class NumberInput {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the size of the input
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Specify the input value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Specify the step increment
-     * @default 1
-     */
-    step?: number;
-
-    /**
-     * Specify the maximum value
-     */
-    max?: number;
-
-    /**
-     * Specify the minimum value
-     */
-    min?: number;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` for the input to be read-only
-     * @default false
-     */
-    readonly?: boolean;
-
-    /**
-     * Set to `true` to enable the mobile variant
-     * @default false
-     */
-    mobile?: boolean;
-
-    /**
-     * Set to `true` to allow for an empty value
-     * @default false
-     */
-    allowEmpty?: boolean;
-
-    /**
-     * Set to `true` to disable the input
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the ARIA label for the increment icons
-     * @default ""
-     */
-    iconDescription?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    label?: string;
-
-    /**
-     * Set to `true` to visually hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-
-    /**
-     * Override the default translation ids
-     * @default (id) => defaultTranslations[id]
-     */
-    translateWithId?: (id: NumberInputTranslationId) => string;
-
-    /**
-     * Default translation ids
-     * @constant
-     * @default { increment: "increment", decrement: "decrement", }
-     */
-    translationIds?: { increment: "increment"; decrement: "decrement" };
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the input
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: NumberInputProps;
   $$slot_def: {
     label: {};
   };

types/NumberInput/NumberInputSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class NumberInputSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-  };
+export interface NumberInputSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+}
 
+export default class NumberInputSkeleton {
+  $$prop_def: NumberInputSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/OrderedList/OrderedList.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface OrderedListProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ol"]> {
+  /**
+   * Set to `true` to use the nested variant
+   * @default false
+   */
+  nested?: boolean;
+
+  /**
+   * Set to `true` to use native list styles
+   * @default false
+   */
+  native?: boolean;
+}
+
 export default class OrderedList {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ol"]> & {
-    /**
-     * Set to `true` to use the nested variant
-     * @default false
-     */
-    nested?: boolean;
-
-    /**
-     * Set to `true` to use native list styles
-     * @default false
-     */
-    native?: boolean;
-  };
-
+  $$prop_def: OrderedListProps;
   $$slot_def: {
     default: {};
   };

types/OverflowMenu/OverflowMenu.d.ts

@@ -1,75 +1,77 @@
 /// <reference types="svelte" />
 
+export interface OverflowMenuProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
+  /**
+   * Specify the size of the overflow menu
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Specify the direction of the overflow menu relative to the button
+   * @default "bottom"
+   */
+  direction?: "top" | "bottom";
+
+  /**
+   * Set to `true` to open the menu
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to flip the menu relative to the button
+   * @default false
+   */
+  flipped?: boolean;
+
+  /**
+   * Specify the menu options class
+   */
+  menuOptionsClass?: string;
+
+  /**
+   * Specify the icon from `carbon-icons-svelte` to render
+   */
+  icon?: import("carbon-icons-svelte").CarbonIcon;
+
+  /**
+   * Specify the icon class
+   */
+  iconClass?: string;
+
+  /**
+   * Specify the ARIA label for the icon
+   * @default "Open and close list of options"
+   */
+  iconDescription?: string;
+
+  /**
+   * Set an id for the button element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the trigger button element
+   * @default null
+   */
+  buttonRef?: null | HTMLButtonElement;
+
+  /**
+   * Obtain a reference to the overflow menu element
+   * @default null
+   */
+  menuRef?: null | HTMLUListElement;
+}
+
 export default class OverflowMenu {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> & {
-    /**
-     * Specify the size of the overflow menu
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Specify the direction of the overflow menu relative to the button
-     * @default "bottom"
-     */
-    direction?: "top" | "bottom";
-
-    /**
-     * Set to `true` to open the menu
-     * @default false
-     */
-    open?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to flip the menu relative to the button
-     * @default false
-     */
-    flipped?: boolean;
-
-    /**
-     * Specify the menu options class
-     */
-    menuOptionsClass?: string;
-
-    /**
-     * Specify the icon from `carbon-icons-svelte` to render
-     */
-    icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
-    /**
-     * Specify the icon class
-     */
-    iconClass?: string;
-
-    /**
-     * Specify the ARIA label for the icon
-     * @default "Open and close list of options"
-     */
-    iconDescription?: string;
-
-    /**
-     * Set an id for the button element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the trigger button element
-     * @default null
-     */
-    buttonRef?: null | HTMLButtonElement;
-
-    /**
-     * Obtain a reference to the overflow menu element
-     * @default null
-     */
-    menuRef?: null | HTMLUListElement;
-  };
-
+  $$prop_def: OverflowMenuProps;
   $$slot_def: {
     default: {};
     menu: {};

types/OverflowMenu/OverflowMenuItem.d.ts

@@ -1,62 +1,64 @@
 /// <reference types="svelte" />
 
+export interface OverflowMenuItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Specify the item text
+   * Alternatively, use the default slot for a custom element
+   * @default "Provide text"
+   */
+  text?: string;
+
+  /**
+   * Specify the `href` attribute if the item is a link
+   * @default ""
+   */
+  href?: string;
+
+  /**
+   * Set to `true` if the item should be focused when opening the menu
+   * @default false
+   */
+  primaryFocus?: boolean;
+
+  /**
+   * Set to `true` to disable the item
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to include a divider
+   * @default false
+   */
+  hasDivider?: boolean;
+
+  /**
+   * Set to `true` to use the danger variant
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Set to `false` to omit the button `title` attribute
+   * @default true
+   */
+  requireTitle?: boolean;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLAnchorElement | HTMLButtonElement;
+}
+
 export default class OverflowMenuItem {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
-    /**
-     * Specify the item text
-     * Alternatively, use the default slot for a custom element
-     * @default "Provide text"
-     */
-    text?: string;
-
-    /**
-     * Specify the `href` attribute if the item is a link
-     * @default ""
-     */
-    href?: string;
-
-    /**
-     * Set to `true` if the item should be focused when opening the menu
-     * @default false
-     */
-    primaryFocus?: boolean;
-
-    /**
-     * Set to `true` to disable the item
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to include a divider
-     * @default false
-     */
-    hasDivider?: boolean;
-
-    /**
-     * Set to `true` to use the danger variant
-     * @default false
-     */
-    danger?: boolean;
-
-    /**
-     * Set to `false` to omit the button `title` attribute
-     * @default true
-     */
-    requireTitle?: boolean;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the HTML element
-     * @default null
-     */
-    ref?: null | HTMLAnchorElement | HTMLButtonElement;
-  };
-
+  $$prop_def: OverflowMenuItemProps;
   $$slot_def: {
     default: {};
   };

types/Pagination/Pagination.d.ts

@@ -1,103 +1,105 @@
 /// <reference types="svelte" />
 
+export interface PaginationProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the current page index
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Specify the total number of items
+   * @default 0
+   */
+  totalItems?: number;
+
+  /**
+   * Set to `true` to disable the pagination
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the forward button text
+   * @default "Next page"
+   */
+  forwardText?: string;
+
+  /**
+   * Specify the backward button text
+   * @default "Previous page"
+   */
+  backwardText?: string;
+
+  /**
+   * Specify the items per page text
+   * @default "Items per page:"
+   */
+  itemsPerPageText?: string;
+
+  /**
+   * Override the item text
+   * @default (min, max) => `${min}–${max} items`
+   */
+  itemText?: (min: number, max: number) => string;
+
+  /**
+   * Override the item range text
+   * @default (min, max, total) => `${min}–${max} of ${total} items`
+   */
+  itemRangeText?: (min: number, max: number, total: number) => string;
+
+  /**
+   * Set to `true` to disable the page input
+   * @default false
+   */
+  pageInputDisabled?: boolean;
+
+  /**
+   * Set to `true` to disable the page size input
+   * @default false
+   */
+  pageSizeInputDisabled?: boolean;
+
+  /**
+   * Specify the number of items to display in a page
+   * @default 10
+   */
+  pageSize?: number;
+
+  /**
+   * Specify the available page sizes
+   * @default [10]
+   */
+  pageSizes?: number[];
+
+  /**
+   * Set to `true` if the number of pages is unknown
+   * @default false
+   */
+  pagesUnknown?: boolean;
+
+  /**
+   * Override the page text
+   * @default (page) => `page ${page}`
+   */
+  pageText?: (page: number) => string;
+
+  /**
+   * Override the page range text
+   * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}`
+   */
+  pageRangeText?: (current: number, total: number) => string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class Pagination {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the current page index
-     * @default 1
-     */
-    page?: number;
-
-    /**
-     * Specify the total number of items
-     * @default 0
-     */
-    totalItems?: number;
-
-    /**
-     * Set to `true` to disable the pagination
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the forward button text
-     * @default "Next page"
-     */
-    forwardText?: string;
-
-    /**
-     * Specify the backward button text
-     * @default "Previous page"
-     */
-    backwardText?: string;
-
-    /**
-     * Specify the items per page text
-     * @default "Items per page:"
-     */
-    itemsPerPageText?: string;
-
-    /**
-     * Override the item text
-     * @default (min, max) => `${min}–${max} items`
-     */
-    itemText?: (min: number, max: number) => string;
-
-    /**
-     * Override the item range text
-     * @default (min, max, total) => `${min}–${max} of ${total} items`
-     */
-    itemRangeText?: (min: number, max: number, total: number) => string;
-
-    /**
-     * Set to `true` to disable the page input
-     * @default false
-     */
-    pageInputDisabled?: boolean;
-
-    /**
-     * Set to `true` to disable the page size input
-     * @default false
-     */
-    pageSizeInputDisabled?: boolean;
-
-    /**
-     * Specify the number of items to display in a page
-     * @default 10
-     */
-    pageSize?: number;
-
-    /**
-     * Specify the available page sizes
-     * @default [10]
-     */
-    pageSizes?: number[];
-
-    /**
-     * Set to `true` if the number of pages is unknown
-     * @default false
-     */
-    pagesUnknown?: boolean;
-
-    /**
-     * Override the page text
-     * @default (page) => `page ${page}`
-     */
-    pageText?: (page: number) => string;
-
-    /**
-     * Override the page range text
-     * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}`
-     */
-    pageRangeText?: (current: number, total: number) => string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-  };
-
+  $$prop_def: PaginationProps;
   $$slot_def: {};
 
   $on(eventname: "update", cb: (event: CustomEvent<any>) => void): () => void;

types/Pagination/PaginationSkeleton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class PaginationSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface PaginationSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class PaginationSkeleton {
+  $$prop_def: PaginationSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/PaginationNav/PaginationNav.d.ts

@@ -1,44 +1,45 @@
 /// <reference types="svelte" />
 
+export interface PaginationNavProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
+  /**
+   * Specify the current page index
+   * @default 0
+   */
+  page?: number;
+
+  /**
+   * Specify the total number of pages
+   * @default 10
+   */
+  total?: number;
+
+  /**
+   * Specify the total number of pages to show
+   * @default 10
+   */
+  shown?: number;
+
+  /**
+   * Set to `true` to loop the navigation
+   * @default false
+   */
+  loop?: boolean;
+
+  /**
+   * Specify the forward button text
+   * @default "Next page"
+   */
+  forwardText?: string;
+
+  /**
+   * Specify the backward button text
+   * @default "Previous page"
+   */
+  backwardText?: string;
+}
+
 export default class PaginationNav {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> & {
-    /**
-     * Specify the current page index
-     * @default 0
-     */
-    page?: number;
-
-    /**
-     * Specify the total number of pages
-     * @default 10
-     */
-    total?: number;
-
-    /**
-     * Specify the total number of pages to show
-     * @default 10
-     */
-    shown?: number;
-
-    /**
-     * Set to `true` to loop the navigation
-     * @default false
-     */
-    loop?: boolean;
-
-    /**
-     * Specify the forward button text
-     * @default "Next page"
-     */
-    forwardText?: string;
-
-    /**
-     * Specify the backward button text
-     * @default "Previous page"
-     */
-    backwardText?: string;
-  };
-
+  $$prop_def: PaginationNavProps;
   $$slot_def: {};
 
   $on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void;

types/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="svelte" />
 
+export interface ProgressIndicatorProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * Specify the current step index
+   * @default 0
+   */
+  currentIndex?: number;
+
+  /**
+   * Set to `true` to use the vertical variant
+   * @default false
+   */
+  vertical?: boolean;
+
+  /**
+   * Set to `true` to specify whether the progress steps should be split equally in size in the div
+   * @default false
+   */
+  spaceEqually?: boolean;
+
+  /**
+   * Set to `true` to prevent updating `currentIndex`
+   * @default false
+   */
+  preventChangeOnClick?: boolean;
+}
+
 export default class ProgressIndicator {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
-    /**
-     * Specify the current step index
-     * @default 0
-     */
-    currentIndex?: number;
-
-    /**
-     * Set to `true` to use the vertical variant
-     * @default false
-     */
-    vertical?: boolean;
-
-    /**
-     * Set to `true` to specify whether the progress steps should be split equally in size in the div
-     * @default false
-     */
-    spaceEqually?: boolean;
-
-    /**
-     * Set to `true` to prevent updating `currentIndex`
-     * @default false
-     */
-    preventChangeOnClick?: boolean;
-  };
-
+  $$prop_def: ProgressIndicatorProps;
   $$slot_def: {
     default: {};
   };

types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface ProgressIndicatorSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> {
+  /**
+   * Set to `true` to use the vertical variant
+   * @default false
+   */
+  vertical?: boolean;
+
+  /**
+   * Specify the number of steps to render
+   * @default 4
+   */
+  count?: number;
+}
+
 export default class ProgressIndicatorSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["ul"]> & {
-    /**
-     * Set to `true` to use the vertical variant
-     * @default false
-     */
-    vertical?: boolean;
-
-    /**
-     * Specify the number of steps to render
-     * @default 4
-     */
-    count?: number;
-  };
-
+  $$prop_def: ProgressIndicatorSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/ProgressIndicator/ProgressStep.d.ts

@@ -1,55 +1,57 @@
 /// <reference types="svelte" />
 
+export interface ProgressStepProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
+  /**
+   * Set to `true` for the complete variant
+   * @default false
+   */
+  complete?: boolean;
+
+  /**
+   * Set to `true` to use the current variant
+   * @default false
+   */
+  current?: boolean;
+
+  /**
+   * Set to `true` to disable the progress step
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the step description
+   * @default ""
+   */
+  description?: string;
+
+  /**
+   * Specify the step label
+   * @default ""
+   */
+  label?: string;
+
+  /**
+   * Specify the step secondary label
+   * @default ""
+   */
+  secondaryLabel?: string;
+
+  /**
+   * Set an id for the top-level element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
 export default class ProgressStep {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {
-    /**
-     * Set to `true` for the complete variant
-     * @default false
-     */
-    complete?: boolean;
-
-    /**
-     * Set to `true` to use the current variant
-     * @default false
-     */
-    current?: boolean;
-
-    /**
-     * Set to `true` to disable the progress step
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the step description
-     * @default ""
-     */
-    description?: string;
-
-    /**
-     * Specify the step label
-     * @default ""
-     */
-    label?: string;
-
-    /**
-     * Specify the step secondary label
-     * @default ""
-     */
-    secondaryLabel?: string;
-
-    /**
-     * Set an id for the top-level element
-     */
-    id?: string;
-  };
-
+  $$prop_def: ProgressStepProps;
   $$slot_def: {
     default: { props: { class: "bx--progress-label" } };
   };

types/RadioButton/RadioButton.d.ts

@@ -1,61 +1,63 @@
 /// <reference types="svelte" />
 
+export interface RadioButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the value of the radio button
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Set to `true` to check the radio button
+   * @default false
+   */
+  checked?: boolean;
+
+  /**
+   * et to `true` to disable the radio button
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label position
+   * @default "right"
+   */
+  labelPosition?: "right" | "left";
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the checkbox input
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class RadioButton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the value of the radio button
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Set to `true` to check the radio button
-     * @default false
-     */
-    checked?: boolean;
-
-    /**
-     * et to `true` to disable the radio button
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the label position
-     * @default "right"
-     */
-    labelPosition?: "right" | "left";
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set to `true` to visually hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the checkbox input
-     * @default ""
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: RadioButtonProps;
   $$slot_def: {};
 
   $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;

types/RadioButton/RadioButtonSkeleton.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class RadioButtonSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface RadioButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class RadioButtonSkeleton {
+  $$prop_def: RadioButtonSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -1,36 +1,37 @@
 /// <reference types="svelte" />
 
+export interface RadioButtonGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set the selected radio button value
+   */
+  selected?: string;
+
+  /**
+   * Set to `true` to disable the radio buttons
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label position
+   * @default "right"
+   */
+  labelPosition?: "right" | "left";
+
+  /**
+   * Specify the orientation of the radio buttons
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+
+  /**
+   * Set an id for the container div element
+   */
+  id?: string;
+}
+
 export default class RadioButtonGroup {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set the selected radio button value
-     */
-    selected?: string;
-
-    /**
-     * Set to `true` to disable the radio buttons
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the label position
-     * @default "right"
-     */
-    labelPosition?: "right" | "left";
-
-    /**
-     * Specify the orientation of the radio buttons
-     * @default "horizontal"
-     */
-    orientation?: "horizontal" | "vertical";
-
-    /**
-     * Set an id for the container div element
-     */
-    id?: string;
-  };
-
+  $$prop_def: RadioButtonGroupProps;
   $$slot_def: {
     default: {};
   };

types/Search/Search.d.ts

@@ -1,90 +1,92 @@
 /// <reference types="svelte" />
 
+export interface SearchProps {
+  /**
+   * @default false
+   */
+  small?: boolean;
+
+  /**
+   * Specify the size of the search input
+   * @default "xl"
+   */
+  size?: "sm" | "lg" | "xl";
+
+  /**
+   * Set to `true` to display the skeleton state
+   * @default false
+   */
+  skeleton?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the search input
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the value of the search input
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the `type` attribute of the search input
+   * @default "text"
+   */
+  type?: string;
+
+  /**
+   * Specify the `placeholder` attribute of the search input
+   * @default "Search..."
+   */
+  placeholder?: string;
+
+  /**
+   * Specify the `autocomplete` attribute
+   * @default "off"
+   */
+  autocomplete?: "on" | "off";
+
+  /**
+   * Set to `true` to auto focus the search element
+   * @default false
+   */
+  autofocus?: boolean;
+
+  /**
+   * Specify the close button label text
+   * @default "Clear search input"
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set an id for the input element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Obtain a reference to the input HTML element
+   * @default null
+   */
+  ref?: null | HTMLInputElement;
+}
+
 export default class Search {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * @default false
-     */
-    small?: boolean;
-
-    /**
-     * Specify the size of the search input
-     * @default "xl"
-     */
-    size?: "sm" | "lg" | "xl";
-
-    /**
-     * Set to `true` to display the skeleton state
-     * @default false
-     */
-    skeleton?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to disable the search input
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the value of the search input
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Specify the `type` attribute of the search input
-     * @default "text"
-     */
-    type?: string;
-
-    /**
-     * Specify the `placeholder` attribute of the search input
-     * @default "Search..."
-     */
-    placeholder?: string;
-
-    /**
-     * Specify the `autocomplete` attribute
-     * @default "off"
-     */
-    autocomplete?: "on" | "off";
-
-    /**
-     * Set to `true` to auto focus the search element
-     * @default false
-     */
-    autofocus?: boolean;
-
-    /**
-     * Specify the close button label text
-     * @default "Clear search input"
-     */
-    closeButtonLabelText?: string;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set an id for the input element
-     */
-    id?: string;
-
-    /**
-     * Obtain a reference to the input HTML element
-     * @default null
-     */
-    ref?: null | HTMLInputElement;
-  };
-
+  $$prop_def: SearchProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Search/SearchSkeleton.d.ts

@@ -1,19 +1,20 @@
 /// <reference types="svelte" />
 
+export interface SearchSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * @default false
+   */
+  small?: boolean;
+
+  /**
+   * Specify the size of the search input
+   * @default "xl"
+   */
+  size?: "sm" | "lg" | "xl";
+}
+
 export default class SearchSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * @default false
-     */
-    small?: boolean;
-
-    /**
-     * Specify the size of the search input
-     * @default "xl"
-     */
-    size?: "sm" | "lg" | "xl";
-  };
-
+  $$prop_def: SearchSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Select/Select.d.ts

@@ -1,88 +1,90 @@
 /// <reference types="svelte" />
 
+export interface SelectProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the selected item value
+   */
+  selected?: undefined;
+
+  /**
+   * Set the size of the select input
+   */
+  size?: "sm" | "xl";
+
+  /**
+   * Set to `true` to use the inline variant
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to disable the select element
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set an id for the select element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Specify a name attribute for the select element
+   */
+  name?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the invalid state text
+   * @default ""
+   */
+  invalidText?: string;
+
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
+  /**
+   * Set to `true` to not render a label
+   * @default false
+   */
+  noLabel?: boolean;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /**
+   * Obtain a reference to the select HTML element
+   * @default null
+   */
+  ref?: null | HTMLSelectElement;
+}
+
 export default class Select {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the selected item value
-     */
-    selected?: undefined;
-
-    /**
-     * Set the size of the select input
-     */
-    size?: "sm" | "xl";
-
-    /**
-     * Set to `true` to use the inline variant
-     * @default false
-     */
-    inline?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to disable the select element
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set an id for the select element
-     */
-    id?: string;
-
-    /**
-     * Specify a name attribute for the select element
-     */
-    name?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the invalid state text
-     * @default ""
-     */
-    invalidText?: string;
-
-    /**
-     * Specify the helper text
-     * @default ""
-     */
-    helperText?: string;
-
-    /**
-     * Set to `true` to not render a label
-     * @default false
-     */
-    noLabel?: boolean;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set to `true` to visually hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-
-    /**
-     * Obtain a reference to the select HTML element
-     * @default null
-     */
-    ref?: null | HTMLSelectElement;
-  };
-
+  $$prop_def: SelectProps;
   $$slot_def: {
     default: {};
   };

types/Select/SelectItem.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="svelte" />
 
+export interface SelectItemProps {
+  /**
+   * Specify the option value
+   * @default ""
+   */
+  value?: string;
+
+  /**
+   * Specify the option text
+   * @default ""
+   */
+  text?: string;
+
+  /**
+   * Set to `true` to hide the option
+   * @default false
+   */
+  hidden?: boolean;
+
+  /**
+   * Set to `true` to disable the option
+   * @default false
+   */
+  disabled?: boolean;
+}
+
 export default class SelectItem {
-  $$prop_def: {
-    /**
-     * Specify the option value
-     * @default ""
-     */
-    value?: string;
-
-    /**
-     * Specify the option text
-     * @default ""
-     */
-    text?: string;
-
-    /**
-     * Set to `true` to hide the option
-     * @default false
-     */
-    hidden?: boolean;
-
-    /**
-     * Set to `true` to disable the option
-     * @default false
-     */
-    disabled?: boolean;
-  };
-
+  $$prop_def: SelectItemProps;
   $$slot_def: {};
 
   $on(eventname: string, cb: (event: Event) => void): () => void;

types/Select/SelectItemGroup.d.ts

@@ -1,20 +1,21 @@
 /// <reference types="svelte" />
 
+export interface SelectItemGroupProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["optgroup"]> {
+  /**
+   * Set to `true` to disable the optgroup element
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the label attribute of the optgroup element
+   * @default "Provide label"
+   */
+  label?: string;
+}
+
 export default class SelectItemGroup {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["optgroup"]> & {
-    /**
-     * Set to `true` to disable the optgroup element
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Specify the label attribute of the optgroup element
-     * @default "Provide label"
-     */
-    label?: string;
-  };
-
+  $$prop_def: SelectItemGroupProps;
   $$slot_def: {
     default: {};
   };

types/Select/SelectSkeleton.d.ts

@@ -1,14 +1,15 @@
 /// <reference types="svelte" />
 
-export default class SelectSkeleton {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Set to `true` to hide the label text
-     * @default false
-     */
-    hideLabel?: boolean;
-  };
+export interface SelectSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to hide the label text
+   * @default false
+   */
+  hideLabel?: boolean;
+}
 
+export default class SelectSkeleton {
+  $$prop_def: SelectSkeletonProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 
-export default class SkeletonPlaceholder {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+export interface SkeletonPlaceholderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {}
 
+export default class SkeletonPlaceholder {
+  $$prop_def: SkeletonPlaceholderProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/SkeletonText/SkeletonText.d.ts

@@ -1,32 +1,33 @@
 /// <reference types="svelte" />
 
+export interface SkeletonTextProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the number of lines to render
+   * @default 3
+   */
+  lines?: number;
+
+  /**
+   * Set to `true` to use the heading size variant
+   * @default false
+   */
+  heading?: boolean;
+
+  /**
+   * Set to `true` to use the paragraph size variant
+   * @default false
+   */
+  paragraph?: boolean;
+
+  /**
+   * Specify the width of the text (% or px)
+   * @default "100%"
+   */
+  width?: string;
+}
+
 export default class SkeletonText {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> & {
-    /**
-     * Specify the number of lines to render
-     * @default 3
-     */
-    lines?: number;
-
-    /**
-     * Set to `true` to use the heading size variant
-     * @default false
-     */
-    heading?: boolean;
-
-    /**
-     * Set to `true` to use the paragraph size variant
-     * @default false
-     */
-    paragraph?: boolean;
-
-    /**
-     * Specify the width of the text (% or px)
-     * @default "100%"
-     */
-    width?: string;
-  };
-
+  $$prop_def: SkeletonTextProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

types/Slider/Slider.d.ts

@@ -1,109 +1,111 @@
 /// <reference types="svelte" />
 
+export interface SliderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Specify the value of the slider
+   * @default 0
+   */
+  value?: number;
+
+  /**
+   * Set the maximum slider value
+   * @default 100
+   */
+  max?: number;
+
+  /**
+   * Specify the label for the max value
+   * @default ""
+   */
+  maxLabel?: string;
+
+  /**
+   * Set the minimum slider value
+   * @default 0
+   */
+  min?: number;
+
+  /**
+   * Specify the label for the min value
+   * @default ""
+   */
+  minLabel?: string;
+
+  /**
+   * Set the step value
+   * @default 1
+   */
+  step?: number;
+
+  /**
+   * Set the step multiplier value
+   * @default 4
+   */
+  stepMultiplier?: number;
+
+  /**
+   * Set to `true` to require a value
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Specify the input type
+   * @default "number"
+   */
+  inputType?: string;
+
+  /**
+   * Set to `true` to disable the slider
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to hide the text input
+   * @default false
+   */
+  hideTextInput?: boolean;
+
+  /**
+   * Set an id for the slider div element
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+
+  /**
+   * Set to `true` to indicate an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+
+  /**
+   * Specify the label text
+   * @default ""
+   */
+  labelText?: string;
+
+  /**
+   * Set a name for the slider element
+   * @default ""
+   */
+  name?: string;
+
+  /**
+   * Obtain a reference to the HTML element
+   * @default null
+   */
+  ref?: null | HTMLDivElement;
+}
+
 export default class Slider {
-  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
-    /**
-     * Specify the value of the slider
-     * @default 0
-     */
-    value?: number;
-
-    /**
-     * Set the maximum slider value
-     * @default 100
-     */
-    max?: number;
-
-    /**
-     * Specify the label for the max value
-     * @default ""
-     */
-    maxLabel?: string;
-
-    /**
-     * Set the minimum slider value
-     * @default 0
-     */
-    min?: number;
-
-    /**
-     * Specify the label for the min value
-     * @default ""
-     */
-    minLabel?: string;
-
-    /**
-     * Set the step value
-     * @default 1
-     */
-    step?: number;
-
-    /**
-     * Set the step multiplier value
-     * @default 4
-     */
-    stepMultiplier?: number;
-
-    /**
-     * Set to `true` to require a value
-     * @default false
-     */
-    required?: boolean;
-
-    /**
-     * Specify the input type
-     * @default "number"
-     */
-    inputType?: string;
-
-    /**
-     * Set to `true` to disable the slider
-     * @default false
-     */
-    disabled?: boolean;
-
-    /**
-     * Set to `true` to enable the light variant
-     * @default false
-     */
-    light?: boolean;
-
-    /**
-     * Set to `true` to hide the text input
-     * @default false
-     */
-    hideTextInput?: boolean;
-
-    /**
-     * Set an id for the slider div element
-     */
-    id?: string;
-
-    /**
-     * Set to `true` to indicate an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-
-    /**
-     * Specify the label text
-     * @default ""
-     */
-    labelText?: string;
-
-    /**
-     * Set a name for the slider element
-     * @default ""
-     */
-    name?: string;
-
-    /**
-     * Obtain a reference to the HTML element
-     * @default null
-     */
-    ref?: null | HTMLElement;
-  };
-
+  $$prop_def: SliderProps;
   $$slot_def: {};
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;