refactor(types): rewrite type definitions to account for intrinsic attributes

types/Accordion/Accordion.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Accordion/AccordionItem.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+    title: {};
+  };
+
+  $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Accordion/AccordionSkeleton.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,17 @@
+/// <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";
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Breadcrumb/Breadcrumb.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Button/Button.Skeleton.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Button/Button.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: { props: undefined };
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Button/ButtonSet.d.ts

@@ -0,0 +1,17 @@
+/// <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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Checkbox/Checkbox.Skeleton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class CheckboxSkeleton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Checkbox/Checkbox.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "check", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/CodeSnippet/CodeSnippet.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/// <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";
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/CodeSnippet/CodeSnippet.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ComboBox/ComboBox.d.ts

@@ -0,0 +1,129 @@
+/// <reference types="svelte" />
+
+interface ComboBoxItem {
+  id: string;
+  text: string;
+}
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void;
+  $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void;
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="svelte" />
+
+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 | HTMLElement;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
+  $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ComposedModal/ModalBody.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ComposedModal/ModalFooter.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ComposedModal/ModalHeader.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ContentSwitcher/ContentSwitcher.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="svelte" />
+
+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";
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ContentSwitcher/Switch.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Copy/Copy.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/CopyButton/CopyButton.d.ts

@@ -0,0 +1,17 @@
+/// <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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/DataTable.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="svelte" />
+
+type Headers = {
+  key: string;
+  value: string;
+  display?: (item) => string;
+  sort?: (a, b) => number;
+  empty?: boolean;
+  columnMenu?: 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;
+  };
+
+  $$slot_def: {
+    default: {};
+    cell: { row: any; cell: any };
+    ["expanded-row"]: { row: any };
+  };
+
+  $on(eventname: "click:header--expand", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:header", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "mouseenter:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "mouseleave:row", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:row--expand", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:cell", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/Table.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableBody.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class TableBody {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tbody"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableCell.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableCell {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["td"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableContainer.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableHead.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableHead {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["thead"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableHeader.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/TableRow.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class TableRow {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["tr"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/Toolbar.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+
+export default class Toolbar {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> & {
+    /**
+     * Specify the toolbar size
+     * @default "default"
+     */
+    size?: "sm" | "default";
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarBatchActions.d.ts

@@ -0,0 +1,17 @@
+/// <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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class ToolbarContent {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarMenu.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class ToolbarMenu {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarMenuItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class ToolbarMenuItem {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTable/ToolbarSearch.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DataTableSkeleton/DataTableSkeleton.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DatePicker/DatePicker.Skeleton.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DatePicker/DatePicker.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "undefined", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/DatePicker/DatePickerInput.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Dropdown/Dropdown.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Dropdown/Dropdown.d.ts

@@ -0,0 +1,121 @@
+/// <reference types="svelte" />
+
+type DropdownItemId = string;
+
+type DropdownItemText = string;
+
+interface DropdownItem {
+  id: DropdownItemId;
+  text: DropdownItemText;
+}
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/FileUploader.Skeleton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class FileUploaderSkeleton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/FileUploader.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="svelte" />
+
+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?: string[];
+
+    /**
+     * Obtain the uploaded file names
+     * @default []
+     */
+    files?: string[];
+
+    /**
+     * 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?: () => any;
+
+    /**
+     * 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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "add", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "remove", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/FileUploaderButton.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="svelte" />
+
+export default class FileUploaderButton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> & {
+    /**
+     * Specify the accepted file types
+     * @default []
+     */
+    accept?: string[];
+
+    /**
+     * 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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/FileUploaderDropContainer.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="svelte" />
+
+type Files = string[];
+
+export default class FileUploaderDropContainer {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+    /**
+     * Specify the accepted file types
+     * @default []
+     */
+    accept?: string[];
+
+    /**
+     * 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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void;
+  $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void;
+  $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "add", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/FileUploaderItem.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "delete", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FileUploader/Filename.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FluidForm/FluidForm.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="svelte" />
+
+export default class FluidForm {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Form/Form.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="svelte" />
+
+export default class Form {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["form"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FormGroup/FormGroup.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FormItem/FormItem.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class FormItem {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/FormLabel/FormLabel.d.ts

@@ -0,0 +1,20 @@
+/// <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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Grid/Column.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="svelte" />
+
+type ColumnSize = boolean | number;
+
+interface ColumnSizeDescriptor {
+  span?: ColumnSize;
+  offset: number;
+}
+
+type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
+
+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;
+  };
+
+  $$slot_def: {
+    default: { props: undefined };
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Grid/Grid.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: { props: undefined };
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Grid/Row.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: { props: undefined };
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Icon/Icon.Skeleton.d.ts

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

types/Icon/Icon.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/InlineLoading/InlineLoading.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "success", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Link/Link.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBox.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBoxField.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="svelte" />
+
+type ListBoxFieldTranslationId = "close" | "open";
+
+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 | HTMLElement;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBoxMenu.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="svelte" />
+
+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 input HTML element
+     * @default null
+     */
+    ref?: null | HTMLDivElement;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBoxMenuIcon.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="svelte" />
+
+type ListBoxMenuIconTranslationId = "close" | "open";
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBoxMenuItem.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListBox/ListBoxSelection.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="svelte" />
+
+type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ListItem/ListItem.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class ListItem {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> & {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Loading/Loading.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Modal/Modal.d.ts

@@ -0,0 +1,131 @@
+/// <reference types="svelte" />
+
+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 | HTMLElement;
+  };
+
+  $$slot_def: {
+    default: {};
+    label: {};
+    heading: {};
+  };
+
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:button--secondary", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,165 @@
+/// <reference types="svelte" />
+
+type MultiSelectItemId = string;
+
+type MultiSelectItemText = string;
+
+interface MultiSelectItem {
+  id: MultiSelectItemId;
+  text: MultiSelectItemText;
+}
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: "select", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/InlineNotification.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+    actions: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/NotificationActionButton.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="svelte" />
+
+export default class NotificationActionButton {
+  $$prop_def: {};
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/NotificationButton.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/NotificationIcon.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/NotificationTextDetails.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Notification/ToastNotification.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/NumberInput/NumberInput.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/NumberInput/NumberInput.d.ts

@@ -0,0 +1,141 @@
+/// <reference types="svelte" />
+
+type NumberInputTranslationId = "increment" | "decrement";
+
+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;
+  };
+
+  $$slot_def: {
+    label: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/OrderedList/OrderedList.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+    menu: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/OverflowMenu/OverflowMenuItem.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Pagination/Pagination.Skeleton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class PaginationSkeleton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Pagination/Pagination.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "update", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/PaginationNav/PaginationNav.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "click:button--next", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/ProgressIndicator/ProgressStep.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: { props: { class: "bx--progress-label" } };
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/RadioButton/RadioButton.Skeleton.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class RadioButtonSkeleton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/RadioButton/RadioButton.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="svelte" />
+
+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;
+
+    /**
+     * Set 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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Search/Search.Skeleton.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="svelte" />
+
+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";
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Search/Search.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+  $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+  $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Select/Select.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/// <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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Select/Select.d.ts

@@ -0,0 +1,93 @@
+/// <reference types="svelte" />
+
+export default class Select {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+    /**
+     * Specify the selected item value
+     */
+    selected?: string;
+
+    /**
+     * 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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Select/SelectItem.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Select/SelectItemGroup.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {
+    default: {};
+  };
+
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+
+export default class SkeletonPlaceholder {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {};
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="svelte" />
+
+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;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}

types/Slider/Slider.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="svelte" />
+
+export default class SliderSkeleton {
+  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> & {
+    /**
+     * Set to `true` to hide the label text
+     * @default false
+     */
+    hideLabel?: boolean;
+  };
+
+  $$slot_def: {};
+
+  $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+  $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+  $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+  $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+  $on(eventname: string, cb: (event: Event) => void): () => void;
+}