mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
4913 lines
89 KiB
TypeScript
4913 lines
89 KiB
TypeScript
// Type definitions for carbon-components-svelte 0.9.4
|
|
// Project: https://github.com/IBM/carbon-components-svelte
|
|
|
|
class SvelteComponent {
|
|
$$prop_def: {};
|
|
|
|
$$slot_def: {};
|
|
|
|
// stub all `on:{eventname}` directives
|
|
$on(eventname: string, handler: (e: Event) => any): () => void;
|
|
}
|
|
|
|
export class Accordion extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class ButtonSkeleton extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {}
|
|
|
|
export class ClickableTile extends SvelteComponent {
|
|
$$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;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class CodeSnippet extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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";
|
|
|
|
/**
|
|
*
|
|
*/
|
|
sm?: boolean | number;
|
|
|
|
/**
|
|
* 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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
*
|
|
*/
|
|
items?: { id: string; text: string };
|
|
|
|
/**
|
|
* 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 SvelteComponent {
|
|
$$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;
|
|
|
|
/**
|
|
* 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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the id for the main element
|
|
* @default "main-content"
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class ContentSwitcher extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set the title and ARIA label for the copy button
|
|
* @default "Copy to clipboard"
|
|
*/
|
|
iconDescription?: string;
|
|
};
|
|
}
|
|
|
|
export class DataTable extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the number of columns
|
|
* @default 5
|
|
*/
|
|
columns?: number;
|
|
|
|
/**
|
|
* Specify the number of rows
|
|
* @default 5
|
|
*/
|
|
rows?: number;
|
|
|
|
/**
|
|
* Set to `true` to use the compact variant
|
|
* @default false
|
|
*/
|
|
compact?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to apply zebra styles to the datatable rows
|
|
* @default false
|
|
*/
|
|
zebra?: boolean;
|
|
|
|
/**
|
|
* Set the column headers
|
|
* If `headers` has one more items, `count` is ignored
|
|
*/
|
|
headers?: string[];
|
|
};
|
|
}
|
|
|
|
export class DatePicker extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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;
|
|
};
|
|
}
|
|
|
|
type DropdownItemId = string;
|
|
|
|
type DropdownItemText = string;
|
|
|
|
interface DropdownItem {
|
|
id: DropdownItemId;
|
|
text: DropdownItemText;
|
|
}
|
|
|
|
export class Dropdown extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
*
|
|
*/
|
|
items?: string;
|
|
|
|
/**
|
|
* 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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the inline variant
|
|
* @default false
|
|
*/
|
|
inline?: boolean;
|
|
};
|
|
}
|
|
|
|
export class ExpandableTile extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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
|
|
*/
|
|
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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
*
|
|
*/
|
|
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 SvelteComponent {
|
|
$$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 Filename extends SvelteComponent {
|
|
$$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 Form extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class FormGroup extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class FormLabel extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set an id to be used by the label element
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Grid extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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;
|
|
};
|
|
|
|
$$slot_def: { "skip-to-content": {}; platform: {}; default: {} };
|
|
}
|
|
|
|
export class HeaderAction extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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;
|
|
};
|
|
};
|
|
}
|
|
|
|
export class HeaderActionSearch extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to focus the search
|
|
* @default false
|
|
*/
|
|
searchIsActive?: boolean;
|
|
};
|
|
}
|
|
|
|
export class HeaderNav extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the ARIA label for the nav
|
|
*/
|
|
ariaLabel?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class HeaderNavItem extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the `href` attribute
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Specify the text
|
|
*/
|
|
text?: string;
|
|
};
|
|
}
|
|
|
|
export class HeaderNavMenu extends SvelteComponent {
|
|
$$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;
|
|
|
|
/**
|
|
* Specify the ARIA label for the chevron icon
|
|
* @default "Expand/Collapse"
|
|
*/
|
|
iconDescription?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class HeaderPanelDivider extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class HeaderPanelLink extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the `href` attribute
|
|
*/
|
|
href?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class HeaderPanelLinks extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class HeaderUtilities extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Icon extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set the size of the icon
|
|
* @default 16
|
|
*/
|
|
size?: number;
|
|
};
|
|
}
|
|
|
|
export class InlineLoading extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 `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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the inline variant
|
|
* @default false
|
|
*/
|
|
inline?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable the checkbox
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Obtain a reference to the top-level HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLAnchorElement | HTMLParagraphElement;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class ListBox extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
translationIds?: "close" | "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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set an id for the top-level element
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
type ListBoxMenuIconTranslationId = "close" | "open";
|
|
|
|
export class ListBoxMenuIcon extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to open the list box menu icon
|
|
* @default false
|
|
*/
|
|
open?: boolean;
|
|
|
|
/**
|
|
* Default translation ids
|
|
*/
|
|
translationIds?: undefined;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
translateWithId?: "close" | "open";
|
|
};
|
|
}
|
|
|
|
export class ListBoxMenuItem extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the number of selected items
|
|
*/
|
|
selectionCount?: any;
|
|
|
|
/**
|
|
* Set to `true` to disable the list box selection
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
translationIds?: "clearAll" | "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 SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Loading extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 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 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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class NotificationButton extends SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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 SvelteComponent {
|
|
$$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: {} };
|
|
}
|
|
|
|
type NumberInputTranslationId = "increment" | "decrement";
|
|
|
|
export class NumberInput extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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;
|
|
|
|
/**
|
|
*
|
|
*/
|
|
translateWithId?: "increment" | "decrement";
|
|
|
|
/**
|
|
* Default translation ids
|
|
*/
|
|
translationIds?: undefined;
|
|
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class NumberInputSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to hide the label text
|
|
* @default false
|
|
*/
|
|
hideLabel?: boolean;
|
|
};
|
|
}
|
|
|
|
export class OrderedList extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the nested variant
|
|
* @default false
|
|
*/
|
|
nested?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class OverflowMenu extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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;
|
|
};
|
|
|
|
$$slot_def: { menu: {}; default: {} };
|
|
}
|
|
|
|
export class OverflowMenuItem extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class Pagination extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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
|
|
*/
|
|
itemText?: (min: number, max: number) => string;
|
|
|
|
/**
|
|
* Override the item range text
|
|
*/
|
|
itemRangeText?: (min: number, max: number, total: number) => string;
|
|
|
|
/**
|
|
* Set to `true` to disable the page input
|
|
* @default false
|
|
*/
|
|
pageInputDisabled?: boolean;
|
|
|
|
/**
|
|
* Specify the number of items to display in a page
|
|
* @default 10
|
|
*/
|
|
pageSize?: number;
|
|
|
|
/**
|
|
* Specify the available page sizes
|
|
*/
|
|
pageSizes?: number[];
|
|
|
|
/**
|
|
* Set to `true` if the number of pages is unknown
|
|
* @default false
|
|
*/
|
|
pagesUnknown?: boolean;
|
|
|
|
/**
|
|
* Override the page text
|
|
*/
|
|
pageText?: (page: number) => string;
|
|
|
|
/**
|
|
* Override the page range text
|
|
*/
|
|
pageRangeText?: (current: number, total: number) => string;
|
|
|
|
/**
|
|
* Set an id for the top-level element
|
|
*/
|
|
id?: string;
|
|
};
|
|
}
|
|
|
|
export class PaginationNav extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the current page index
|
|
* @default 0
|
|
*/
|
|
page?: number;
|
|
|
|
/**
|
|
* Specify the total number of pages
|
|
* @default 10
|
|
*/
|
|
total?: number;
|
|
|
|
/**
|
|
* Specify the total number of pages to show
|
|
* @default 10
|
|
*/
|
|
shown?: number;
|
|
|
|
/**
|
|
* Set to `true` to loop the navigation
|
|
* @default false
|
|
*/
|
|
loop?: boolean;
|
|
|
|
/**
|
|
* Specify the forward button text
|
|
* @default "Next page"
|
|
*/
|
|
forwardText?: string;
|
|
|
|
/**
|
|
* Specify the backward button text
|
|
* @default "Previous page"
|
|
*/
|
|
backwardText?: string;
|
|
};
|
|
}
|
|
|
|
export class PaginationSkeleton extends SvelteComponent {}
|
|
|
|
export class PasswordInput extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set the size of the input
|
|
*/
|
|
size?: "sm" | "xl";
|
|
|
|
/**
|
|
* Specify the input value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the input type
|
|
* @default "password"
|
|
*/
|
|
type?: string;
|
|
|
|
/**
|
|
* Specify the placeholder text
|
|
* @default ""
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* Specify the hide password label text
|
|
* @default "Hide password"
|
|
*/
|
|
hidePasswordLabel?: string;
|
|
|
|
/**
|
|
* Specify the show password label text
|
|
* @default "Show password"
|
|
*/
|
|
showPasswordLabel?: string;
|
|
|
|
/**
|
|
* Set the alignment of the tooltip relative to the icon
|
|
*/
|
|
tooltipAlignment?: "start" | "center" | "end";
|
|
|
|
/**
|
|
* Set the position of the tooltip relative to the icon
|
|
*/
|
|
tooltipPosition?: "top" | "right" | "bottom" | "left";
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable the input
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the helper text
|
|
* @default ""
|
|
*/
|
|
helperText?: 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 text for the invalid state
|
|
* @default ""
|
|
*/
|
|
invalidText?: string;
|
|
|
|
/**
|
|
* 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;
|
|
};
|
|
}
|
|
|
|
export class ProgressIndicator extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the current step index
|
|
* @default 0
|
|
*/
|
|
currentIndex?: number;
|
|
|
|
/**
|
|
* Set to `true` to use the vertical variant
|
|
* @default false
|
|
*/
|
|
vertical?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class ProgressIndicatorSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the vertical variant
|
|
* @default false
|
|
*/
|
|
vertical?: boolean;
|
|
};
|
|
}
|
|
|
|
export class ProgressStep extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: any } };
|
|
}
|
|
|
|
export class RadioButton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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;
|
|
};
|
|
}
|
|
|
|
export class RadioButtonGroup extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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";
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class RadioButtonSkeleton extends SvelteComponent {}
|
|
|
|
export class RadioTile extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to check the tile
|
|
* @default false
|
|
*/
|
|
checked?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Specify the value of the radio input
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
|
|
/**
|
|
* Specify the ARIA label for the radio tile checkmark icon
|
|
* @default "Tile checkmark"
|
|
*/
|
|
iconDescription?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the input
|
|
* @default ""
|
|
*/
|
|
name?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Row extends SvelteComponent {
|
|
$$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: {} };
|
|
}
|
|
|
|
export class Search extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the small variant
|
|
* @default false
|
|
*/
|
|
small?: boolean;
|
|
|
|
/**
|
|
* Specify the size of the search input
|
|
*/
|
|
size?: "sm" | "lg";
|
|
|
|
/**
|
|
* Set to `true` to display the skeleton state
|
|
* @default false
|
|
*/
|
|
skeleton?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: 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;
|
|
};
|
|
}
|
|
|
|
export class SearchSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the small variant
|
|
* @default false
|
|
*/
|
|
small?: boolean;
|
|
};
|
|
}
|
|
|
|
export class Select extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class SelectItem extends SvelteComponent {
|
|
$$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;
|
|
};
|
|
}
|
|
|
|
export class SelectItemGroup extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class SelectSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to hide the label text
|
|
* @default false
|
|
*/
|
|
hideLabel?: boolean;
|
|
};
|
|
}
|
|
|
|
export class SelectableTile extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to select the tile
|
|
* @default false
|
|
*/
|
|
selected?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Specify the title of the selectable tile
|
|
* @default "title"
|
|
*/
|
|
title?: string;
|
|
|
|
/**
|
|
* Specify the value of the selectable tile
|
|
* @default "value"
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
|
|
/**
|
|
* Specify the ARIA label for the selectable tile checkmark icon
|
|
* @default "Tile checkmark"
|
|
*/
|
|
iconDescription?: 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: { default: {} };
|
|
}
|
|
|
|
export class SideNav extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the fixed variant
|
|
* @default false
|
|
*/
|
|
fixed?: boolean;
|
|
|
|
/**
|
|
* Specify the ARIA label for the nav
|
|
*/
|
|
ariaLabel?: string;
|
|
|
|
/**
|
|
* Set to `true` to toggle the expanded state
|
|
* @default false
|
|
*/
|
|
isOpen?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class SideNavItems extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class SideNavLink extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to select the current link
|
|
* @default false
|
|
*/
|
|
isSelected?: boolean;
|
|
|
|
/**
|
|
* Specify the `href` attribute
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Specify the text
|
|
*/
|
|
text?: string;
|
|
|
|
/**
|
|
* Specify the icon props
|
|
*/
|
|
icon?: {
|
|
render: typeof import("carbon-icons-svelte/lib/Add16").default;
|
|
skeleton: boolean;
|
|
};
|
|
};
|
|
}
|
|
|
|
export class SideNavMenu extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to toggle the expanded state
|
|
* @default false
|
|
*/
|
|
expanded?: boolean;
|
|
|
|
/**
|
|
* Specify the text
|
|
*/
|
|
text?: string;
|
|
|
|
/**
|
|
* Specify the icon props
|
|
*/
|
|
icon?: {
|
|
render: typeof import("carbon-icons-svelte/lib/Add16").default;
|
|
skeleton: boolean;
|
|
};
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class SideNavMenuItem extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to select the item
|
|
*/
|
|
isSelected?: boolean;
|
|
|
|
/**
|
|
* Specify the `href` attribute
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Specify the item text
|
|
*/
|
|
text?: string;
|
|
};
|
|
}
|
|
|
|
export class SkeletonPlaceholder extends SvelteComponent {}
|
|
|
|
export class SkeletonText extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the number of lines to render
|
|
* @default 3
|
|
*/
|
|
lines?: number;
|
|
|
|
/**
|
|
* Set to `true` to use the heading size variant
|
|
* @default false
|
|
*/
|
|
heading?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to use the paragraph size variant
|
|
* @default false
|
|
*/
|
|
paragraph?: boolean;
|
|
|
|
/**
|
|
* Specify the width of the text (% or px)
|
|
* @default "100%"
|
|
*/
|
|
width?: string;
|
|
};
|
|
}
|
|
|
|
export class SkipToContent extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the `href` attribute
|
|
* @default "#main-content"
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Slider extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the value of the slider
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Set the maximum slider value
|
|
* @default 100
|
|
*/
|
|
max?: number;
|
|
|
|
/**
|
|
* Specify the label for the max value
|
|
* @default ""
|
|
*/
|
|
maxLabel?: string;
|
|
|
|
/**
|
|
* Set the minimum slider value
|
|
* @default 0
|
|
*/
|
|
min?: number;
|
|
|
|
/**
|
|
* Specify the label for the min value
|
|
* @default ""
|
|
*/
|
|
minLabel?: string;
|
|
|
|
/**
|
|
* Set the step value
|
|
* @default 1
|
|
*/
|
|
step?: number;
|
|
|
|
/**
|
|
* Set the step multiplier value
|
|
* @default 4
|
|
*/
|
|
stepMultiplier?: number;
|
|
|
|
/**
|
|
* Set to `true` to require a value
|
|
* @default false
|
|
*/
|
|
required?: boolean;
|
|
|
|
/**
|
|
* Specify the input type
|
|
* @default "number"
|
|
*/
|
|
inputType?: string;
|
|
|
|
/**
|
|
* Set to `true` to disable the slider
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to hide the text input
|
|
* @default false
|
|
*/
|
|
hideTextInput?: boolean;
|
|
|
|
/**
|
|
* Set an id for the slider div element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Set to `true` to indicate an invalid state
|
|
* @default false
|
|
*/
|
|
invalid?: boolean;
|
|
|
|
/**
|
|
* Specify the label text
|
|
* @default ""
|
|
*/
|
|
labelText?: string;
|
|
|
|
/**
|
|
* Set a name for the slider element
|
|
* @default ""
|
|
*/
|
|
name?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLElement;
|
|
};
|
|
}
|
|
|
|
export class SliderSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to hide the label text
|
|
* @default false
|
|
*/
|
|
hideLabel?: boolean;
|
|
};
|
|
}
|
|
|
|
export class StructuredList extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the selected structured list row value
|
|
*/
|
|
selected?: string;
|
|
|
|
/**
|
|
* Set to `true` to use the bordered variant
|
|
* @default false
|
|
*/
|
|
border?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to use the selection variant
|
|
* @default false
|
|
*/
|
|
selection?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class StructuredListBody extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class StructuredListCell extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use as a header
|
|
* @default false
|
|
*/
|
|
head?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to prevent wrapping
|
|
* @default false
|
|
*/
|
|
noWrap?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class StructuredListHead extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class StructuredListInput extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to check the input
|
|
* @default false
|
|
*/
|
|
checked?: boolean;
|
|
|
|
/**
|
|
* Specify the title of the input
|
|
* @default "title"
|
|
*/
|
|
title?: string;
|
|
|
|
/**
|
|
* Specify the value of the input
|
|
* @default "value"
|
|
*/
|
|
value?: 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 StructuredListRow extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use as a header
|
|
* @default false
|
|
*/
|
|
head?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to render a label slot
|
|
* @default false
|
|
*/
|
|
label?: boolean;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class StructuredListSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the number of rows
|
|
* @default 5
|
|
*/
|
|
rows?: number;
|
|
|
|
/**
|
|
* Set to `true` to use the bordered variant
|
|
* @default false
|
|
*/
|
|
border?: boolean;
|
|
};
|
|
}
|
|
|
|
export class Switch extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class Tab extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the tab label
|
|
* Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
|
|
* @default ""
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Specify the href attribute
|
|
* @default "#"
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Set to `true` to disable the tab
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
|
|
/**
|
|
* Set an id for the top-level element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the anchor HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLAnchorElement;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TabContent extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set an id for the top-level element
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Table extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class TableBody extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TableCell extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TableContainer extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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: {} };
|
|
}
|
|
|
|
export class TableHead extends SvelteComponent {
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TableHeader extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the `scope` attribute
|
|
* @default "col"
|
|
*/
|
|
scope?: string;
|
|
|
|
/**
|
|
* Override the default id translations
|
|
*/
|
|
translateWithId?: () => string;
|
|
|
|
/**
|
|
* Set an id for the top-level element
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TableRow extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to select the row
|
|
* @default false
|
|
*/
|
|
isSelected?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class Tabs extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the selected tab index
|
|
* @default 0
|
|
*/
|
|
selected?: number;
|
|
|
|
/**
|
|
* Specify the type of tabs
|
|
* @default "default"
|
|
*/
|
|
type?: "default" | "container";
|
|
|
|
/**
|
|
* Specify the ARIA label for the chevron icon
|
|
* @default "Show menu options"
|
|
*/
|
|
iconDescription?: string;
|
|
|
|
/**
|
|
* Specify the tab trigger href attribute
|
|
* @default "#"
|
|
*/
|
|
triggerHref?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {}; content: {} };
|
|
}
|
|
|
|
export class TabsSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the number of tabs to render
|
|
* @default 4
|
|
*/
|
|
count?: number;
|
|
};
|
|
}
|
|
|
|
export class Tag extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the type of tag
|
|
*/
|
|
type?:
|
|
| "red"
|
|
| "magenta"
|
|
| "purple"
|
|
| "blue"
|
|
| "cyan"
|
|
| "teal"
|
|
| "green"
|
|
| "gray"
|
|
| "cool-gray"
|
|
| "warm-gray"
|
|
| "high-contrast";
|
|
|
|
/**
|
|
* Set to `true` to use filterable variant
|
|
* @default false
|
|
*/
|
|
filter?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable a filterable tag
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to display the skeleton state
|
|
* @default false
|
|
*/
|
|
skeleton?: boolean;
|
|
|
|
/**
|
|
* Set the title for the close button in a filterable tag
|
|
* @default "Clear filter"
|
|
*/
|
|
title?: string;
|
|
|
|
/**
|
|
* Set an id for the filterable tag
|
|
*/
|
|
id?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TagSkeleton extends SvelteComponent {}
|
|
|
|
export class TextArea extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the textarea value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the placeholder text
|
|
* @default ""
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* Specify the number of cols
|
|
* @default 50
|
|
*/
|
|
cols?: number;
|
|
|
|
/**
|
|
* Specify the number of rows
|
|
* @default 4
|
|
*/
|
|
rows?: number;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable the input
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the helper text
|
|
* @default ""
|
|
*/
|
|
helperText?: 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 text for the invalid state
|
|
* @default ""
|
|
*/
|
|
invalidText?: string;
|
|
|
|
/**
|
|
* Set an id for the textarea element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the input
|
|
*/
|
|
name?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the textarea HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLTextAreaElement;
|
|
};
|
|
}
|
|
|
|
export class TextAreaSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to visually hide the label text
|
|
* @default false
|
|
*/
|
|
hideLabel?: boolean;
|
|
};
|
|
}
|
|
|
|
export class TextInput extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set the size of the input
|
|
*/
|
|
size?: "sm" | "xl";
|
|
|
|
/**
|
|
* Specify the input value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the input type
|
|
* @default ""
|
|
*/
|
|
type?: string;
|
|
|
|
/**
|
|
* Specify the placeholder text
|
|
* @default ""
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable the input
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the helper text
|
|
* @default ""
|
|
*/
|
|
helperText?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the input
|
|
*/
|
|
name?: 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;
|
|
|
|
/**
|
|
* Obtain a reference to the input HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLInputElement;
|
|
};
|
|
}
|
|
|
|
export class TextInputSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to hide the label text
|
|
* @default false
|
|
*/
|
|
hideLabel?: boolean;
|
|
};
|
|
}
|
|
|
|
export class Tile extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TileGroup extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the selected tile value
|
|
*/
|
|
selected?: string;
|
|
|
|
/**
|
|
* Set to `true` to disable the tile group
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the legend text
|
|
* @default ""
|
|
*/
|
|
legend?: string;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TimePicker extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the input value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Specify the input type
|
|
* @default "text"
|
|
*/
|
|
type?: string;
|
|
|
|
/**
|
|
* Specify the input placeholder text
|
|
* @default "hh=mm"
|
|
*/
|
|
placeholder?: string;
|
|
|
|
/**
|
|
* Specify the `pattern` attribute for the input element
|
|
* @default "(1[012]|[1-9]):[0-5][0-9](\\s)?"
|
|
*/
|
|
pattern?: string;
|
|
|
|
/**
|
|
* Specify the `maxlength` input attribute
|
|
* @default 5
|
|
*/
|
|
maxlength?: number;
|
|
|
|
/**
|
|
* Set to `true` to enable the light variant
|
|
* @default false
|
|
*/
|
|
light?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable the input
|
|
* @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 to `true` to indicate an invalid state
|
|
* @default false
|
|
*/
|
|
invalid?: boolean;
|
|
|
|
/**
|
|
* Specify the invalid state text
|
|
* @default ""
|
|
*/
|
|
invalidText?: string;
|
|
|
|
/**
|
|
* 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: { default: {} };
|
|
}
|
|
|
|
export class TimePickerSelect extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the select value
|
|
* @default ""
|
|
*/
|
|
value?: string;
|
|
|
|
/**
|
|
* Set to `true` to disable the select
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the ARIA label for the chevron icon
|
|
* @default "Open list of options"
|
|
*/
|
|
iconDescription?: string;
|
|
|
|
/**
|
|
* 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 select element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the select element
|
|
*/
|
|
name?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the select HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLSelectElement;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class ToastNotification extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* 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 closing 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: {} };
|
|
}
|
|
|
|
export class Toggle extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to toggle the checkbox input
|
|
* @default false
|
|
*/
|
|
toggled?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable checkbox input
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the label for the untoggled state
|
|
* @default "Off"
|
|
*/
|
|
labelA?: string;
|
|
|
|
/**
|
|
* Specify the label for the toggled state
|
|
* @default "On"
|
|
*/
|
|
labelB?: string;
|
|
|
|
/**
|
|
* Specify the label text
|
|
* @default ""
|
|
*/
|
|
labelText?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the checkbox input
|
|
*/
|
|
name?: string;
|
|
};
|
|
}
|
|
|
|
export class ToggleSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the label text
|
|
* @default ""
|
|
*/
|
|
labelText?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
};
|
|
}
|
|
|
|
export class ToggleSmall extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to toggle the checkbox input
|
|
* @default false
|
|
*/
|
|
toggled?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to disable checkbox input
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the label for the untoggled state
|
|
* @default "Off"
|
|
*/
|
|
labelA?: string;
|
|
|
|
/**
|
|
* Specify the label for the toggled state
|
|
* @default "On"
|
|
*/
|
|
labelB?: string;
|
|
|
|
/**
|
|
* Specify the label text
|
|
* @default ""
|
|
*/
|
|
labelText?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Specify a name attribute for the checkbox input
|
|
*/
|
|
name?: string;
|
|
};
|
|
}
|
|
|
|
export class ToggleSmallSkeleton extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the label text
|
|
* @default ""
|
|
*/
|
|
labelText?: string;
|
|
|
|
/**
|
|
* Set an id for the input element
|
|
*/
|
|
id?: string;
|
|
};
|
|
}
|
|
|
|
export class Tooltip extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set the direction of the tooltip relative to the button
|
|
* @default "bottom"
|
|
*/
|
|
direction?: "top" | "right" | "bottom" | "left";
|
|
|
|
/**
|
|
* Set to `true` to open the tooltip
|
|
* @default false
|
|
*/
|
|
open?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to hide the tooltip icon
|
|
* @default false
|
|
*/
|
|
hideIcon?: boolean;
|
|
|
|
/**
|
|
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button
|
|
* Icon size must be 16px (e.g. `Add16`, `Task16`)
|
|
*/
|
|
icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
|
|
|
|
/**
|
|
* Specify the ARIA label for the tooltip button
|
|
* @default ""
|
|
*/
|
|
iconDescription?: string;
|
|
|
|
/**
|
|
* Specify the icon name attribute
|
|
* @default ""
|
|
*/
|
|
iconName?: string;
|
|
|
|
/**
|
|
* Set the button tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
|
|
/**
|
|
* Set an id for the tooltip
|
|
*/
|
|
tooltipId?: string;
|
|
|
|
/**
|
|
* Set an id for the tooltip button
|
|
*/
|
|
triggerId?: string;
|
|
|
|
/**
|
|
* Set the tooltip button text
|
|
* @default ""
|
|
*/
|
|
triggerText?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the trigger text HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLElement;
|
|
|
|
/**
|
|
* Obtain a reference to the tooltip HTML element
|
|
* @default null
|
|
*/
|
|
refTooltip?: null | HTMLElement;
|
|
|
|
/**
|
|
* Obtain a reference to the icon HTML element
|
|
* @default null
|
|
*/
|
|
refIcon?: null | HTMLElement;
|
|
};
|
|
|
|
$$slot_def: { triggerText: {}; icon: {}; default: {} };
|
|
}
|
|
|
|
export class TooltipDefinition extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the tooltip text
|
|
* @default ""
|
|
*/
|
|
tooltipText?: string;
|
|
|
|
/**
|
|
* Set the alignment of the tooltip relative to the icon
|
|
* @default "center"
|
|
*/
|
|
align?: "start" | "center" | "end";
|
|
|
|
/**
|
|
* Set the direction of the tooltip relative to the icon
|
|
* @default "bottom"
|
|
*/
|
|
direction?: "top" | "bottom";
|
|
|
|
/**
|
|
* Set an id for the tooltip div element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the button HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLButtonElement;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class TooltipIcon extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Specify the tooltip text
|
|
* @default ""
|
|
*/
|
|
tooltipText?: string;
|
|
|
|
/**
|
|
* Set the alignment of the tooltip relative to the icon
|
|
* @default "center"
|
|
*/
|
|
align?: "start" | "center" | "end";
|
|
|
|
/**
|
|
* Set the direction of the tooltip relative to the icon
|
|
* @default "bottom"
|
|
*/
|
|
direction?: "top" | "right" | "bottom" | "left";
|
|
|
|
/**
|
|
* Set an id for the span element
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the button HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLButtonElement;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|
|
|
|
export class UnorderedList extends SvelteComponent {
|
|
$$prop_def: {
|
|
/**
|
|
* Set to `true` to use the nested variant
|
|
* @default false
|
|
*/
|
|
nested?: boolean;
|
|
};
|
|
|
|
$$slot_def: { default: {} };
|
|
}
|