carbon-components-svelte/types/index.d.ts

Svelte implementation of the Carbon Design System

// Type definitions for carbon-components-svelte 0.16.0
// Project: https://github.com/IBM/carbon-components-svelte

export class CarbonSvelteComponent {
  $$prop_def: {};

  $$slot_def: {};

  // stub all `on:{eventname}` directives
  $on(eventname: string, handler: (e: Event) => any): () => void;
}

export class Accordion extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify alignment of accordion item chevron icon
     * @default "end"
     */
    align?: "start" | "end";

    /**
     * Set to `true` to display the skeleton state
     * @default false
     */
    skeleton?: boolean;
  };

  $$slot_def: { default: {} };
}

export class AccordionItem extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;

    /**
     * Specify the ARIA label for the accordion item chevron icon
     * @default "Expand/Collapse"
     */
    iconDescription?: string;
  };

  $$slot_def: { title: {}; default: {} };
}

export class AccordionSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the number of accordion items to render
     * @default 4
     */
    count?: number;

    /**
     * Set to `false` to close the first accordion item
     * @default true
     */
    open?: boolean;
  };
}

export class Breadcrumb extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class BreadcrumbItem extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: { props: any } };
}

export class BreadcrumbSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to hide the breadcrumb trailing slash
     * @default false
     */
    noTrailingSlash?: boolean;

    /**
     * Specify the number of breadcrumb items to render
     * @default 3
     */
    count?: number;
  };
}

export class Button extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the kind of button
     * @default "primary"
     */
    kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";

    /**
     * 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: {} };
}

export class ButtonSet extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to stack the buttons vertically
     * @default false
     */
    stacked?: boolean;
  };

  $$slot_def: { default: {} };
}

export class ButtonSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the `href` to use an anchor link
     */
    href?: string;

    /**
     * Set to `true` to use the small variant
     * @default false
     */
    small?: boolean;
  };
}

export class Checkbox extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;
  };
}

export class CheckboxSkeleton extends CarbonSvelteComponent {}

export class ClickableTile extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to click the tile
     * @default false
     */
    clicked?: boolean;

    /**
     * Set to `true` to enable the light variant
     * @default false
     */
    light?: boolean;

    /**
     * Set the `href`
     */
    href?: string;
  };

  $$slot_def: { default: {} };
}

export class CodeSnippet extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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 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: {} };
}

export class CodeSnippetSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the type of code snippet
     * @default "single"
     */
    type?: "single" | "inline" | "multi";
  };
}

type ColumnSize = boolean | number;

interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;

export class Column extends CarbonSvelteComponent {
  $$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: {} };
}

interface ComboBoxItem {
  id: string;
  text: string;
}

export class ComboBox extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the combobox items
     */
    items?: ComboBoxItem[];

    /**
     * Override the display of a combobox item
     */
    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
     */
    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;
  };
}

export class ComposedModal extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class Content extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the id for the main element
     * @default "main-content"
     */
    id?: string;
  };

  $$slot_def: { default: {} };
}

export class ContentSwitcher extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the selected index of the switch item
     * @default 0
     */
    selectedIndex?: number;

    /**
     * Set to `true` to enable the light variant
     * @default false
     */
    light?: boolean;
  };

  $$slot_def: { default: {} };
}

export class Copy extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class CopyButton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the title and ARIA label for the copy button
     * @default "Copy to clipboard"
     */
    iconDescription?: string;
  };
}

export class DataTable extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the data table headers
     */
    headers?: { key: string; value: string }[];

    /**
     * Specify the rows the data table should render
     * keys defined in `headers` are used for the row ids
     */
    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` to enable a sticky header
     * @default false
     */
    stickyHeader?: boolean;
  };

  $$slot_def: { default: { props: any } };
}

export class DataTableSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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
     */
    headers?: string[];

    /**
     * Set to `false` to hide the toolbar
     * @default true
     */
    showToolbar?: boolean;
  };
}

export class DatePicker extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class DatePickerInput extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;
  };
}

export class DatePickerSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to use the range variant
     * @default false
     */
    range?: boolean;

    /**
     * Set an id to be used by the label element
     */
    id?: string;
  };
}

type DropdownItemId = string;

type DropdownItemText = string;

interface DropdownItem {
  id: DropdownItemId;
  text: DropdownItemText;
}

export class Dropdown extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the dropdown items
     */
    items?: DropdownItem[];

    /**
     * Override the display of a dropdown item
     */
    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;
  };
}

export class DropdownSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to use the inline variant
     * @default false
     */
    inline?: boolean;
  };
}

export class ExpandableTile extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to expand the tile
     * @default false
     */
    expanded?: boolean;

    /**
     * Set to `true` to enable the light variant
     * @default false
     */
    light?: boolean;

    /**
     * Specify the max height of the tile  (number of pixels)
     * @default 0
     */
    tileMaxHeight?: number;

    /**
     * Specify the padding of the tile (number of pixels)
     * @default 0
     */
    tilePadding?: number;

    /**
     * Specify the icon text of the collapsed tile
     * @default "Interact to expand Tile"
     */
    tileCollapsedIconText?: string;

    /**
     * Specify the icon text of the expanded tile
     * @default "Interact to collapse Tile"
     */
    tileExpandedIconText?: string;

    /**
     * Specify the tabindex
     * @default "0"
     */
    tabindex?: string;

    /**
     * Set an id for the top-level div element
     */
    id?: string;

    /**
     * Obtain a reference to the input HTML element
     * @default null
     */
    ref?: null | HTMLElement;
  };

  $$slot_def: { above: {}; below: {} };
}

export class FileUploader extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the file uploader status
     * @default "uploading"
     */
    status?: "uploading" | "edit" | "complete";

    /**
     * Specify the accepted file types
     */
    accept?: string[];

    /**
     * Obtain the uploaded file names
     */
    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
     */
    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;
  };
}

export class FileUploaderButton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the accepted file types
     */
    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;
  };
}

type Files = string[];

export class FileUploaderDropContainer extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the accepted file types
     */
    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
     */
    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;
  };
}

export class FileUploaderItem extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;
  };
}

export class FileUploaderSkeleton extends CarbonSvelteComponent {}

export class Filename extends CarbonSvelteComponent {
  $$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;
  };
}

export class FluidForm extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class Form extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class FormGroup extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class FormItem extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class FormLabel extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set an id to be used by the label element
     */
    id?: string;
  };

  $$slot_def: { default: {} };
}

export class Grid extends CarbonSvelteComponent {
  $$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: {} };
}

export class Header extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `false` to hide the side nav by default
     * @default true
     */
    expandedByDefault?: boolean;

    /**
     * Set to `true` to open the side nav
     * @default false
     */
    isSideNavOpen?: boolean;

    /**
     * Specify the ARIA label for the header
     */
    uiShellAriaLabel?: string;

    /**
     * Specify the `href` attribute
     */
    href?: string;

    /**
     * Specify the company name
     */
    company?: string;

    /**
     * Specify the platform name
     * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
     */
    platformName?: string;

    /**
     * Obtain a reference to the HTML anchor element
     * @default null
     */
    ref?: null | HTMLAnchorElement;
  };

  $$slot_def: { "skip-to-content": {}; platform: {}; default: {} };
}

export class HeaderAction extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to open the panel
     * @default false
     */
    isOpen?: boolean;

    /**
     * Specify the icon props
     */
    icon?: {
      render: typeof import("carbon-icons-svelte/lib/Add16").default;
      skeleton: boolean;
    };

    /**
     * Specify the text
     * Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
     */
    text?: string;

    /**
     * Obtain a reference to the button HTML element
     * @default null
     */
    ref?: null | HTMLButtonElement;
  };

  $$slot_def: { text: {}; default: {} };
}

export class HeaderActionLink extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to use the active state
     * @default false
     */
    linkIsActive?: boolean;

    /**
     * Specify the `href` attribute
     */
    href?: string;

    /**
     * Specify the icon props
     */
    icon?: {
      render: typeof import("carbon-icons-svelte/lib/Add16").default;
      skeleton: boolean;
    };

    /**
     * Obtain a reference to the HTML anchor element
     * @default null
     */
    ref?: null | HTMLAnchorElement;
  };
}

export class HeaderActionSearch extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to focus the search
     * @default false
     */
    searchIsActive?: boolean;
  };
}

export class HeaderGlobalAction extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to use the active variant
     * @default false
     */
    isActive?: boolean;

    /**
     * Specify the icon to render
     */
    icon?: typeof import("carbon-icons-svelte/lib/Add16").default;

    /**
     * Obtain a reference to the HTML button element
     * @default null
     */
    ref?: null | HTMLButtonElement;
  };

  $$slot_def: { default: {} };
}

export class HeaderNav extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the ARIA label for the nav
     */
    ariaLabel?: string;
  };

  $$slot_def: { default: {} };
}

export class HeaderNavItem extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the `href` attribute
     */
    href?: string;

    /**
     * Specify the text
     */
    text?: string;

    /**
     * Obtain a reference to the HTML anchor element
     * @default null
     */
    ref?: null | HTMLAnchorElement;
  };
}

export class HeaderNavMenu extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set to `true` to toggle the expanded state
     * @default false
     */
    expanded?: boolean;

    /**
     * Specify the `href` attribute
     * @default "/"
     */
    href?: string;

    /**
     * Specify the text
     */
    text?: string;

    /**
     * Obtain a reference to the HTML anchor element
     * @default null
     */
    ref?: null | HTMLAnchorElement;

    /**
     * Specify the ARIA label for the chevron icon
     * @default "Expand/Collapse"
     */
    iconDescription?: string;
  };

  $$slot_def: { default: {} };
}

export class HeaderPanelDivider extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class HeaderPanelLink extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Specify the `href` attribute
     */
    href?: string;

    /**
     * Obtain a reference to the HTML anchor element
     * @default null
     */
    ref?: null | HTMLAnchorElement;
  };

  $$slot_def: { default: {} };
}

export class HeaderPanelLinks extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class HeaderUtilities extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class Icon extends CarbonSvelteComponent {
  $$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;
  };
}

export class IconSkeleton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the size of the icon
     * @default 16
     */
    size?: number;
  };
}

export class InlineLoading extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the loading status
     * @default "active"
     */
    status?: "active" | "inactive" | "finished" | "error";

    /**
     * Set the loading description
     */
    description?: string;

    /**
     * Specify the ARIA label for the loading icon
     */
    iconDescription?: string;

    /**
     * Specify the timeout delay (ms) after `status` is set to "success"
     * @default 1500
     */
    successDelay?: number;
  };
}

export class InlineNotification extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class Link extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class ListBox extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

type ListBoxFieldTranslationId = "close" | "open";

export class ListBoxField extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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
     */
    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: {} };
}

export class ListBoxMenu extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

type ListBoxMenuIconTranslationId = "close" | "open";

export class ListBoxMenuIcon extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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
     */
    translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
  };
}

export class ListBoxMenuItem extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";

export class ListBoxSelection extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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
     */
    translateWithId?: (id: ListBoxSelectionTranslationId) => string;

    /**
     * Obtain a reference to the top-level HTML element
     * @default null
     */
    ref?: null | HTMLElement;
  };
}

export class ListItem extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class Loading extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;
  };
}

export class Modal extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: { label: {}; heading: {}; default: {} };
}

export class ModalBody extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class ModalFooter extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

export class ModalHeader extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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: {} };
}

type MultiSelectItemId = string;

type MultiSelectItemText = string;

interface MultiSelectItem {
  id: MultiSelectItemId;
  text: MultiSelectItemText;
}

export class MultiSelect extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the multiselect items
     */
    items?: MultiSelectItem[];

    /**
     * Override the display of a multiselect item
     */
    itemToString?: (item: MultiSelectItem) => string;

    /**
     * Set the selected ids
     */
    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
     */
    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
     */
    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;
  };
}

export class NotificationActionButton extends CarbonSvelteComponent {
  $$slot_def: { default: {} };
}

export class NotificationButton extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * 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;
  };
}

export class NotificationIcon extends CarbonSvelteComponent {
  $$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;
  };
}

export class NotificationTextDetails extends CarbonSvelteComponent {
  $$prop_def: {
    /**
     * Set the type of notification
     * @default "toast"
     */
    notificationType?: "toast" | "inline";

    /**
     * Specify the title text
     * @default "Title"
     */
    title?: s