diff --git a/package.json b/package.json index 753fb622..5cb52e32 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "types": "./types/index.d.ts", "sideEffects": false, "scripts": { + "check-types": "svelte-check --workspace tests", "prettier": "prettier --write './**/*.{svelte,js,md}'", "publish-examples": "node scripts/publish-examples", "build:css": "node scripts/build-css", @@ -39,6 +40,7 @@ "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", "svelte": "^3.29.4", + "svelte-check": "^1.1.6", "svelte-loader": "^2.13.6", "typescript": "^4.0.5" }, diff --git a/tests/carbon-components-svelte-tests.svelte b/tests/carbon-components-svelte-tests.svelte new file mode 100644 index 00000000..38f82cf6 --- /dev/null +++ b/tests/carbon-components-svelte-tests.svelte @@ -0,0 +1,21 @@ + + + + + text + + + diff --git a/types/Accordion/Accordion.d.ts b/types/Accordion/Accordion.d.ts new file mode 100644 index 00000000..f7bc09e3 --- /dev/null +++ b/types/Accordion/Accordion.d.ts @@ -0,0 +1,38 @@ +/// + +export default class Accordion { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the accordion + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts new file mode 100644 index 00000000..66a7528b --- /dev/null +++ b/types/Accordion/AccordionItem.d.ts @@ -0,0 +1,43 @@ +/// + +export default class AccordionItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the title of the accordion item heading + * Alternatively, use the named slot "title" (e.g.
...
) + * @default "title" + */ + title?: string; + + /** + * Set to `true` to open the first accordion item + * @default false + */ + open?: boolean; + + /** + * Set to `true` to disable the accordion item + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the accordion item chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + title: {}; + }; + + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Accordion/AccordionSkeleton.d.ts b/types/Accordion/AccordionSkeleton.d.ts new file mode 100644 index 00000000..0a1f9e45 --- /dev/null +++ b/types/Accordion/AccordionSkeleton.d.ts @@ -0,0 +1,36 @@ +/// + +export default class AccordionSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of accordion items to render + * @default 4 + */ + count?: number; + + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Specify the size of the accordion + */ + size?: "sm" | "xl"; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts new file mode 100644 index 00000000..a2d58318 --- /dev/null +++ b/types/AspectRatio/AspectRatio.d.ts @@ -0,0 +1,17 @@ +/// + +export default class AspectRatio { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the aspect ratio + * @default "2x1" + */ + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/Breadcrumb.Skeleton.d.ts b/types/Breadcrumb/Breadcrumb.Skeleton.d.ts new file mode 100644 index 00000000..072b4f16 --- /dev/null +++ b/types/Breadcrumb/Breadcrumb.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class BreadcrumbSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Specify the number of breadcrumb items to render + * @default 3 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/Breadcrumb.d.ts b/types/Breadcrumb/Breadcrumb.d.ts new file mode 100644 index 00000000..7ec1eea1 --- /dev/null +++ b/types/Breadcrumb/Breadcrumb.d.ts @@ -0,0 +1,27 @@ +/// + +export default class Breadcrumb { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the breadcrumb trailing slash + * @default false + */ + noTrailingSlash?: boolean; + + /** + * Set to `true` to display skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Breadcrumb/BreadcrumbItem.d.ts b/types/Breadcrumb/BreadcrumbItem.d.ts new file mode 100644 index 00000000..77b5dfe4 --- /dev/null +++ b/types/Breadcrumb/BreadcrumbItem.d.ts @@ -0,0 +1,26 @@ +/// + +export default class BreadcrumbItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Set to `true` if the breadcrumb item represents the current page + * @default false + */ + isCurrentPage?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/Button.Skeleton.d.ts b/types/Button/Button.Skeleton.d.ts new file mode 100644 index 00000000..4cd5aa0a --- /dev/null +++ b/types/Button/Button.Skeleton.d.ts @@ -0,0 +1,30 @@ +/// + +export default class ButtonSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the size of button skeleton + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts new file mode 100644 index 00000000..522fdacd --- /dev/null +++ b/types/Button/Button.d.ts @@ -0,0 +1,96 @@ +/// + +export default class Button { + $$prop_def: { + /** + * Specify the kind of button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"; + + /** + * Specify the size of button + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` for the icon-only variant + * @default false + */ + hasIconOnly?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the ARIA label for the button icon + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * `hasIconOnly` must be set to `true` + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g. ) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to disable the button + * @default false + */ + disabled?: boolean; + + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the `type` attribute for the button element + * @default "button" + */ + type?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Button/ButtonSet.d.ts b/types/Button/ButtonSet.d.ts new file mode 100644 index 00000000..cb5277d2 --- /dev/null +++ b/types/Button/ButtonSet.d.ts @@ -0,0 +1,17 @@ +/// + +export default class ButtonSet { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to stack the buttons vertically + * @default false + */ + stacked?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Checkbox/Checkbox.Skeleton.d.ts b/types/Checkbox/Checkbox.Skeleton.d.ts new file mode 100644 index 00000000..b2eca382 --- /dev/null +++ b/types/Checkbox/Checkbox.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class CheckboxSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts new file mode 100644 index 00000000..22b602bf --- /dev/null +++ b/types/Checkbox/Checkbox.d.ts @@ -0,0 +1,79 @@ +/// + +export default class Checkbox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify whether the checkbox is checked + * @default false + */ + checked?: boolean; + + /** + * Specify whether the checkbox is indeterminate + * @default false + */ + indeterminate?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` for the checkbox to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set a name for the input element + * @default "" + */ + name?: string; + + /** + * Specify the title attribute for the label element + */ + title?: string; + + /** + * Set an id for the input label + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "check", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CodeSnippet/CodeSnippet.Skeleton.d.ts b/types/CodeSnippet/CodeSnippet.Skeleton.d.ts new file mode 100644 index 00000000..eebcfc80 --- /dev/null +++ b/types/CodeSnippet/CodeSnippet.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class CodeSnippetSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts new file mode 100644 index 00000000..4aeb2784 --- /dev/null +++ b/types/CodeSnippet/CodeSnippet.d.ts @@ -0,0 +1,112 @@ +/// + +export default class CodeSnippet { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + + /** + * Set the code snippet text + * Alternatively, use the default slot (e.g. {`code`}) + */ + code?: string; + + /** + * Set to `true` to expand a multi-line code snippet (type="multi") + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to hide the copy button + * @default false + */ + hideCopyButton?: boolean; + + /** + * Set to `true` to wrap the text + * Note that `type` must be "multi" + * @default false + */ + wrapText?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Specify the ARIA label for the copy button icon + */ + copyButtonDescription?: string; + + /** + * Specify the ARIA label of the copy button + */ + copyLabel?: string; + + /** + * Specify the feedback text displayed when clicking the snippet + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Specify the show less text + * `type` must be "multi" + * @default "Show less" + */ + showLessText?: string; + + /** + * Specify the show more text + * `type` must be "multi" + * @default "Show more" + */ + showMoreText?: string; + + /** + * Set to `true` to enable the show more/less button + * @default false + */ + showMoreLess?: boolean; + + /** + * Set an id for the code element + */ + id?: string; + + /** + * Obtain a reference to the pre HTML element + * @default null + */ + ref?: null | HTMLPreElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts new file mode 100644 index 00000000..f1a28bd7 --- /dev/null +++ b/types/ComboBox/ComboBox.d.ts @@ -0,0 +1,129 @@ +/// + +interface ComboBoxItem { + id: string; + text: string; +} + +export default class ComboBox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the combobox items + * @default [] + */ + items?: ComboBoxItem[]; + + /** + * Override the display of a combobox item + * @default (item) => item.text || item.id + */ + itemToString?: (item: ComboBoxItem) => string; + + /** + * Set the selected item by value index + */ + selectedIndex?: number; + + /** + * Specify the selected combobox value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to disable the combobox + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text of the combobox + * @default "" + */ + titleText?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to open the combobox menu dropdown + * @default false + */ + open?: boolean; + + /** + * Determine if an item should be filtered given the current combobox value + * @default () => true + */ + shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Obtain a reference to the list HTML element + * @default null + */ + listRef?: null | HTMLDivElement; + }; + + $$slot_def: {}; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; + $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts new file mode 100644 index 00000000..35069cb1 --- /dev/null +++ b/types/ComposedModal/ComposedModal.d.ts @@ -0,0 +1,60 @@ +/// + +export default class ComposedModal { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the composed modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Specify a class for the inner modal + * @default "" + */ + containerClass?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void; + $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalBody.d.ts b/types/ComposedModal/ModalBody.d.ts new file mode 100644 index 00000000..0a0bfce7 --- /dev/null +++ b/types/ComposedModal/ModalBody.d.ts @@ -0,0 +1,23 @@ +/// + +export default class ModalBody { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts new file mode 100644 index 00000000..63125f67 --- /dev/null +++ b/types/ComposedModal/ModalFooter.d.ts @@ -0,0 +1,45 @@ +/// + +export default class ModalFooter { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Specify a class for the primary button + */ + primaryClass?: string; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a class for the secondary button + */ + secondaryClass?: string; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ComposedModal/ModalHeader.d.ts b/types/ComposedModal/ModalHeader.d.ts new file mode 100644 index 00000000..3fccc16e --- /dev/null +++ b/types/ComposedModal/ModalHeader.d.ts @@ -0,0 +1,54 @@ +/// + +export default class ModalHeader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the modal title + * @default "" + */ + title?: string; + + /** + * Specify the modal label + * @default "" + */ + label?: string; + + /** + * Specify the label class + * @default "" + */ + labelClass?: string; + + /** + * Specify the title class + * @default "" + */ + titleClass?: string; + + /** + * Specify the close class + * @default "" + */ + closeClass?: string; + + /** + * Specify the close icon class + * @default "" + */ + closeIconClass?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts new file mode 100644 index 00000000..87ba9635 --- /dev/null +++ b/types/ContentSwitcher/ContentSwitcher.d.ts @@ -0,0 +1,33 @@ +/// + +export default class ContentSwitcher { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the selected index of the switch item + * @default 0 + */ + selectedIndex?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the size of the content switcher + */ + size?: "sm" | "xl"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts new file mode 100644 index 00000000..6281e9ff --- /dev/null +++ b/types/ContentSwitcher/Switch.d.ts @@ -0,0 +1,46 @@ +/// + +export default class Switch { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the switch text + * Alternatively, use the named slot "text" (e.g. ...) + * @default "Provide text" + */ + text?: string; + + /** + * Set to `true` for the switch to be selected + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to disable the switch + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the button element + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Copy/Copy.d.ts b/types/Copy/Copy.d.ts new file mode 100644 index 00000000..41292983 --- /dev/null +++ b/types/Copy/Copy.d.ts @@ -0,0 +1,31 @@ +/// + +export default class Copy { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the feedback text shown after clicking the button + * @default "Copied!" + */ + feedback?: string; + + /** + * Set the timeout duration (ms) to display feedback text + * @default 2000 + */ + feedbackTimeout?: number; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts new file mode 100644 index 00000000..c1c9f515 --- /dev/null +++ b/types/CopyButton/CopyButton.d.ts @@ -0,0 +1,17 @@ +/// + +export default class CopyButton { + $$prop_def: { + /** + * Set the title and ARIA label for the copy button + * @default "Copy to clipboard" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts new file mode 100644 index 00000000..0c011da4 --- /dev/null +++ b/types/DataTable/DataTable.d.ts @@ -0,0 +1,122 @@ +/// + +type Headers = { + key: string; + value: string; + display?: (item) => string; + sort?: (a, b) => number; + empty?: boolean; + columnMenu?: boolean; +}[]; + +export default class DataTable { + $$prop_def: { + /** + * Specify the data table headers + * @default [] + */ + headers?: Headers; + + /** + * Specify the rows the data table should render + * keys defined in `headers` are used for the row ids + * @default [] + */ + rows?: Object[]; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` for the expandable variant + * Automatically set to `true` if `batchExpansion` is `true` + * @default false + */ + expandable?: boolean; + + /** + * Set to `true` to enable batch expansion + * @default false + */ + batchExpansion?: boolean; + + /** + * Specify the row ids to be expanded + * @default [] + */ + expandedRowIds?: string[]; + + /** + * Set to `true` for the radio selection variant + * @default false + */ + radio?: boolean; + + /** + * Set to `true` for the selectable variant + * Automatically set to `true` if `radio` or `batchSelection` are `true` + * @default false + */ + selectable?: boolean; + + /** + * Set to `true` to enable batch selection + * @default false + */ + batchSelection?: boolean; + + /** + * Specify the row ids to be selected + * @default [] + */ + selectedRowIds?: string[]; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + cell: { row: any; cell: any }; + ["expanded-row"]: { row: any }; + }; + + $on(eventname: "click:header--expand", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:header", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:row--expand", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts new file mode 100644 index 00000000..cbdbcaca --- /dev/null +++ b/types/DataTable/Table.d.ts @@ -0,0 +1,46 @@ +/// + +export default class Table { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Set to `true` for the bordered variant + * @default false + */ + shouldShowBorder?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableBody.d.ts b/types/DataTable/TableBody.d.ts new file mode 100644 index 00000000..bcc26bd5 --- /dev/null +++ b/types/DataTable/TableBody.d.ts @@ -0,0 +1,11 @@ +/// + +export default class TableBody { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableCell.d.ts b/types/DataTable/TableCell.d.ts new file mode 100644 index 00000000..6eeb4538 --- /dev/null +++ b/types/DataTable/TableCell.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableCell { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts new file mode 100644 index 00000000..0afec925 --- /dev/null +++ b/types/DataTable/TableContainer.d.ts @@ -0,0 +1,29 @@ +/// + +export default class TableContainer { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableHead.d.ts b/types/DataTable/TableHead.d.ts new file mode 100644 index 00000000..d62cfad9 --- /dev/null +++ b/types/DataTable/TableHead.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableHead { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts new file mode 100644 index 00000000..9f0a97a7 --- /dev/null +++ b/types/DataTable/TableHeader.d.ts @@ -0,0 +1,32 @@ +/// + +export default class TableHeader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `scope` attribute + * @default "col" + */ + scope?: string; + + /** + * Override the default id translations + * @default () => "" + */ + translateWithId?: () => string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/TableRow.d.ts b/types/DataTable/TableRow.d.ts new file mode 100644 index 00000000..5f6d8f8a --- /dev/null +++ b/types/DataTable/TableRow.d.ts @@ -0,0 +1,15 @@ +/// + +export default class TableRow { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/Toolbar.d.ts b/types/DataTable/Toolbar.d.ts new file mode 100644 index 00000000..8bf7139c --- /dev/null +++ b/types/DataTable/Toolbar.d.ts @@ -0,0 +1,17 @@ +/// + +export default class Toolbar { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the toolbar size + * @default "default" + */ + size?: "sm" | "default"; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts new file mode 100644 index 00000000..31e79dad --- /dev/null +++ b/types/DataTable/ToolbarBatchActions.d.ts @@ -0,0 +1,17 @@ +/// + +export default class ToolbarBatchActions { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Override the total items selected text + * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected` + */ + formatTotalSelected?: (totalSelected: number) => string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarContent.d.ts b/types/DataTable/ToolbarContent.d.ts new file mode 100644 index 00000000..f263726d --- /dev/null +++ b/types/DataTable/ToolbarContent.d.ts @@ -0,0 +1,11 @@ +/// + +export default class ToolbarContent { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarMenu.d.ts b/types/DataTable/ToolbarMenu.d.ts new file mode 100644 index 00000000..ab04b15b --- /dev/null +++ b/types/DataTable/ToolbarMenu.d.ts @@ -0,0 +1,11 @@ +/// + +export default class ToolbarMenu { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarMenuItem.d.ts b/types/DataTable/ToolbarMenuItem.d.ts new file mode 100644 index 00000000..95f5095b --- /dev/null +++ b/types/DataTable/ToolbarMenuItem.d.ts @@ -0,0 +1,13 @@ +/// + +export default class ToolbarMenuItem { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTable/ToolbarSearch.d.ts b/types/DataTable/ToolbarSearch.d.ts new file mode 100644 index 00000000..7bec1b77 --- /dev/null +++ b/types/DataTable/ToolbarSearch.d.ts @@ -0,0 +1,43 @@ +/// + +export default class ToolbarSearch { + $$prop_def: { + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Set to `true` to expand the search bar + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to keep the search bar expanded + * @default false + */ + persistent?: boolean; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DataTableSkeleton/DataTableSkeleton.d.ts b/types/DataTableSkeleton/DataTableSkeleton.d.ts new file mode 100644 index 00000000..efe7bf3f --- /dev/null +++ b/types/DataTableSkeleton/DataTableSkeleton.d.ts @@ -0,0 +1,55 @@ +/// + +export default class DataTableSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of columns + * @default 5 + */ + columns?: number; + + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set the size of the data table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to apply zebra styles to the datatable rows + * @default false + */ + zebra?: boolean; + + /** + * Set to `false` to hide the header + * @default true + */ + showHeader?: boolean; + + /** + * Set the column headers + * If `headers` has one more items, `count` is ignored + * @default [] + */ + headers?: string[]; + + /** + * Set to `false` to hide the toolbar + * @default true + */ + showToolbar?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePicker.Skeleton.d.ts b/types/DatePicker/DatePicker.Skeleton.d.ts new file mode 100644 index 00000000..b545fd96 --- /dev/null +++ b/types/DatePicker/DatePicker.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class DatePickerSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the range variant + * @default false + */ + range?: boolean; + + /** + * Set an id to be used by the label element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts new file mode 100644 index 00000000..6c74518c --- /dev/null +++ b/types/DatePicker/DatePicker.d.ts @@ -0,0 +1,75 @@ +/// + +export default class DatePicker { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the date picker type + * @default "simple" + */ + datePickerType?: "simple" | "single" | "range"; + + /** + * Specify the date picker input value + * @default "" + */ + value?: string; + + /** + * Specify the element to append the calendar to + */ + appendTo?: HTMLElement; + + /** + * Specify the date format + * @default "m/d/Y" + */ + dateFormat?: string; + + /** + * Specify the maximum date + * @default null + */ + maxDate?: null | string | Date; + + /** + * Specify the minimum date + * @default null + */ + minDate?: null | string | Date; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Set to `true` to use the short variant + * @default false + */ + short?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set an id for the date picker element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts new file mode 100644 index 00000000..74e73908 --- /dev/null +++ b/types/DatePicker/DatePickerInput.d.ts @@ -0,0 +1,87 @@ +/// + +export default class DatePickerInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input type + * @default "text" + */ + type?: string; + + /** + * Specify the input placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Specify the Regular Expression for the input value + * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" + */ + pattern?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the calendar icon + * @default "" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Set a name for the input element + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Dropdown/Dropdown.Skeleton.d.ts b/types/Dropdown/Dropdown.Skeleton.d.ts new file mode 100644 index 00000000..0066d3e5 --- /dev/null +++ b/types/Dropdown/Dropdown.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class DropdownSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts new file mode 100644 index 00000000..691dec6c --- /dev/null +++ b/types/Dropdown/Dropdown.d.ts @@ -0,0 +1,121 @@ +/// + +type DropdownItemId = string; + +type DropdownItemText = string; + +interface DropdownItem { + id: DropdownItemId; + text: DropdownItemText; +} + +export default class Dropdown { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the dropdown items + * @default [] + */ + items?: DropdownItem[]; + + /** + * Override the display of a dropdown item + * @default (item) => item.text || item.id + */ + itemToString?: (item: DropdownItem) => string; + + /** + * Specify the selected item index + */ + selectedIndex?: number; + + /** + * Specify the type of dropdown + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the size of the dropdown field + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + */ + label?: string; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the list box + */ + name?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: {}; + + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploader.Skeleton.d.ts b/types/FileUploader/FileUploader.Skeleton.d.ts new file mode 100644 index 00000000..0a553f94 --- /dev/null +++ b/types/FileUploader/FileUploader.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class FileUploaderSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts new file mode 100644 index 00000000..22cf364d --- /dev/null +++ b/types/FileUploader/FileUploader.d.ts @@ -0,0 +1,84 @@ +/// + +export default class FileUploader { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Obtain the uploaded file names + * @default [] + */ + files?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of clearing the array of uploaded files + * @constant + * @default () => { files = []; } + */ + clearFiles?: () => any; + + /** + * Specify the label description + * @default "" + */ + labelDescription?: string; + + /** + * Specify the label title + * @default "" + */ + labelTitle?: string; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the button label + * @default "" + */ + buttonLabel?: string; + + /** + * Specify the ARIA label used for the status icons + * @default "Provide icon description" + */ + iconDescription?: string; + + /** + * Specify a name attribute for the file button uploader input + * @default "" + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts new file mode 100644 index 00000000..fc7246d3 --- /dev/null +++ b/types/FileUploader/FileUploaderButton.d.ts @@ -0,0 +1,77 @@ +/// + +export default class FileUploaderButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to disable label changes + * @default false + */ + disableLabelChanges?: boolean; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the label role + * @default "button" + */ + role?: string; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts new file mode 100644 index 00000000..74b309f6 --- /dev/null +++ b/types/FileUploader/FileUploaderDropContainer.d.ts @@ -0,0 +1,78 @@ +/// + +type Files = string[]; + +export default class FileUploaderDropContainer { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the accepted file types + * @default [] + */ + accept?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of validating uploaded files + * The default behavior does not validate files + * @default (files) => files + */ + validateFiles?: (files: Files) => Files; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the `role` attribute of the drop container + * @default "button" + */ + role?: string; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void; + $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void; + $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "add", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts new file mode 100644 index 00000000..19fd8536 --- /dev/null +++ b/types/FileUploader/FileUploaderItem.d.ts @@ -0,0 +1,54 @@ +/// + +export default class FileUploaderItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the error subject text + * @default "" + */ + errorSubject?: string; + + /** + * Specify the error body text + * @default "" + */ + errorBody?: string; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Specify the file uploader name + * @default "" + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FileUploader/Filename.d.ts b/types/FileUploader/Filename.d.ts new file mode 100644 index 00000000..aef005d4 --- /dev/null +++ b/types/FileUploader/Filename.d.ts @@ -0,0 +1,29 @@ +/// + +export default class Filename { + $$prop_def: { + /** + * Specify the file name status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FluidForm/FluidForm.d.ts b/types/FluidForm/FluidForm.d.ts new file mode 100644 index 00000000..c3bcbd43 --- /dev/null +++ b/types/FluidForm/FluidForm.d.ts @@ -0,0 +1,11 @@ +/// + +export default class FluidForm { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Form/Form.d.ts b/types/Form/Form.d.ts new file mode 100644 index 00000000..e5e78ac9 --- /dev/null +++ b/types/Form/Form.d.ts @@ -0,0 +1,16 @@ +/// + +export default class Form { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts new file mode 100644 index 00000000..e7a156d2 --- /dev/null +++ b/types/FormGroup/FormGroup.d.ts @@ -0,0 +1,39 @@ +/// + +export default class FormGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Set to `true` to render a form requirement + * @default false + */ + message?: boolean; + + /** + * Specify the message text + * @default "" + */ + messageText?: string; + + /** + * Specify the legend text + * @default "" + */ + legendText?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormItem/FormItem.d.ts b/types/FormItem/FormItem.d.ts new file mode 100644 index 00000000..55cf3eac --- /dev/null +++ b/types/FormItem/FormItem.d.ts @@ -0,0 +1,15 @@ +/// + +export default class FormItem { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/FormLabel/FormLabel.d.ts b/types/FormLabel/FormLabel.d.ts new file mode 100644 index 00000000..ee9f97e2 --- /dev/null +++ b/types/FormLabel/FormLabel.d.ts @@ -0,0 +1,20 @@ +/// + +export default class FormLabel { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id to be used by the label element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts new file mode 100644 index 00000000..e3162fd9 --- /dev/null +++ b/types/Grid/Column.d.ts @@ -0,0 +1,75 @@ +/// + +type ColumnSize = boolean | number; + +interface ColumnSizeDescriptor { + span?: ColumnSize; + offset: number; +} + +type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; + +export default class Column { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + + /** + * Specify the aspect ratio of the column + */ + aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; + + /** + * Set the small breakpoint + */ + sm?: ColumnBreakpoint; + + /** + * Set the medium breakpoint + */ + md?: ColumnBreakpoint; + + /** + * Set the large breakpoint + */ + lg?: ColumnBreakpoint; + + /** + * Set the extra large breakpoint + */ + xlg?: ColumnBreakpoint; + + /** + * Set the maximum breakpoint + */ + max?: ColumnBreakpoint; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Grid.d.ts b/types/Grid/Grid.d.ts new file mode 100644 index 00000000..4b4e9da5 --- /dev/null +++ b/types/Grid/Grid.d.ts @@ -0,0 +1,54 @@ +/// + +export default class Grid { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to use the fullWidth variant + * @default false + */ + fullWidth?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Grid/Row.d.ts b/types/Grid/Row.d.ts new file mode 100644 index 00000000..d2adef0b --- /dev/null +++ b/types/Grid/Row.d.ts @@ -0,0 +1,48 @@ +/// + +export default class Row { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + }; + + $$slot_def: { + default: { props: undefined }; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Icon/Icon.Skeleton.d.ts b/types/Icon/Icon.Skeleton.d.ts new file mode 100644 index 00000000..0726550a --- /dev/null +++ b/types/Icon/Icon.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class IconSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the icon + * @default 16 + */ + size?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts new file mode 100644 index 00000000..a5d23bd7 --- /dev/null +++ b/types/Icon/Icon.d.ts @@ -0,0 +1,25 @@ +/// + +export default class Icon { + $$prop_def: { + /** + * Specify the icon from `carbon-icons-svelte` to render + * Icon size must be 16px (e.g. `Add16`, `Task16`) + */ + render?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/InlineLoading/InlineLoading.d.ts b/types/InlineLoading/InlineLoading.d.ts new file mode 100644 index 00000000..1b7cf01f --- /dev/null +++ b/types/InlineLoading/InlineLoading.d.ts @@ -0,0 +1,36 @@ +/// + +export default class InlineLoading { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the loading status + * @default "active" + */ + status?: "active" | "inactive" | "finished" | "error"; + + /** + * Set the loading description + */ + description?: string; + + /** + * Specify the ARIA label for the loading icon + */ + iconDescription?: string; + + /** + * Specify the timeout delay (ms) after `status` is set to "success" + * @default 1500 + */ + successDelay?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "success", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts new file mode 100644 index 00000000..357137ff --- /dev/null +++ b/types/Link/Link.d.ts @@ -0,0 +1,49 @@ +/// + +export default class Link { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the link + */ + size?: "sm" | "lg"; + + /** + * Specify the href value + */ + href?: string; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to allow visited styles + * @default false + */ + visited?: boolean; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLParagraphElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBox.d.ts b/types/ListBox/ListBox.d.ts new file mode 100644 index 00000000..778c1d15 --- /dev/null +++ b/types/ListBox/ListBox.d.ts @@ -0,0 +1,54 @@ +/// + +export default class ListBox { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the list box + */ + size?: "sm" | "xl"; + + /** + * Set the type of the list box + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Set to `true` to open the list box + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the list box + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts new file mode 100644 index 00000000..e4427b10 --- /dev/null +++ b/types/ListBox/ListBoxField.d.ts @@ -0,0 +1,61 @@ +/// + +type ListBoxFieldTranslationId = "close" | "open"; + +export default class ListBoxField { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to disable the list box field + * @default false + */ + disabled?: boolean; + + /** + * Specify the role attribute + * @default "combobox" + */ + role?: string; + + /** + * Specify the tabindex + * @default "-1" + */ + tabindex?: string; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxFieldTranslationId) => string; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts new file mode 100644 index 00000000..826c346d --- /dev/null +++ b/types/ListBox/ListBoxMenu.d.ts @@ -0,0 +1,23 @@ +/// + +export default class ListBoxMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLDivElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts new file mode 100644 index 00000000..36b04bd3 --- /dev/null +++ b/types/ListBox/ListBoxMenuIcon.d.ts @@ -0,0 +1,31 @@ +/// + +type ListBoxMenuIconTranslationId = "close" | "open"; + +export default class ListBoxMenuIcon { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to open the list box menu icon + * @default false + */ + open?: boolean; + + /** + * Default translation ids + * @constant + * @default { close: "close", open: "open" } + */ + translationIds?: { close: "close"; open: "open" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxMenuIconTranslationId) => string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxMenuItem.d.ts b/types/ListBox/ListBoxMenuItem.d.ts new file mode 100644 index 00000000..b351a6e0 --- /dev/null +++ b/types/ListBox/ListBoxMenuItem.d.ts @@ -0,0 +1,26 @@ +/// + +export default class ListBoxMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to enable the active state + * @default false + */ + active?: boolean; + + /** + * Set to `true` to enable the highlighted state + * @default false + */ + highlighted?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts new file mode 100644 index 00000000..d177ca03 --- /dev/null +++ b/types/ListBox/ListBoxSelection.d.ts @@ -0,0 +1,42 @@ +/// + +type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; + +export default class ListBoxSelection { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of selected items + */ + selectionCount?: any; + + /** + * Set to `true` to disable the list box selection + * @default false + */ + disabled?: boolean; + + /** + * Default translation ids + * @constant + * @default { clearAll: "clearAll", clearSelection: "clearSelection", } + */ + translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: ListBoxSelectionTranslationId) => string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: {}; + + $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ListItem/ListItem.d.ts b/types/ListItem/ListItem.d.ts new file mode 100644 index 00000000..c0842915 --- /dev/null +++ b/types/ListItem/ListItem.d.ts @@ -0,0 +1,15 @@ +/// + +export default class ListItem { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Loading/Loading.d.ts b/types/Loading/Loading.d.ts new file mode 100644 index 00000000..a56718b5 --- /dev/null +++ b/types/Loading/Loading.d.ts @@ -0,0 +1,38 @@ +/// + +export default class Loading { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + + /** + * Set to `false` to disable the active state + * @default true + */ + active?: boolean; + + /** + * Set to `false` to disable the overlay + * @default true + */ + withOverlay?: boolean; + + /** + * Specify the label description + * @default "Active loading indicator" + */ + description?: string; + + /** + * Set an id for the label element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts new file mode 100644 index 00000000..3cb86af3 --- /dev/null +++ b/types/Modal/Modal.d.ts @@ -0,0 +1,131 @@ +/// + +export default class Modal { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the modal + */ + size?: "xs" | "sm" | "lg"; + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to enable alert mode + * @default false + */ + alert?: boolean; + + /** + * Set to `true` to use the passive variant + * @default false + */ + passiveModal?: boolean; + + /** + * Specify the modal heading + */ + modalHeading?: string; + + /** + * Specify the modal label + */ + modalLabel?: string; + + /** + * Specify the ARIA label for the modal + */ + modalAriaLabel?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close the modal" + */ + iconDescription?: string; + + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Set to `true` for the primary button to be triggered when pressing "Enter" + * @default true + */ + shouldSubmitOnEnter?: boolean; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Set to `true` to prevent the modal from closing when clicking outside + * @default false + */ + preventCloseOnClickOutside?: boolean; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; + label: {}; + heading: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:button--secondary", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "open", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts new file mode 100644 index 00000000..1dd9e4db --- /dev/null +++ b/types/MultiSelect/MultiSelect.d.ts @@ -0,0 +1,165 @@ +/// + +type MultiSelectItemId = string; + +type MultiSelectItemText = string; + +interface MultiSelectItem { + id: MultiSelectItemId; + text: MultiSelectItemText; +} + +export default class MultiSelect { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the multiselect items + * @default [] + */ + items?: MultiSelectItem[]; + + /** + * Override the display of a multiselect item + * @default (item) => item.text || item.id + */ + itemToString?: (item: MultiSelectItem) => string; + + /** + * Set the selected ids + * @default [] + */ + selectedIds?: MultiSelectItemId[]; + + /** + * Specify the multiselect value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ + size?: "sm" | "lg" | "xl"; + + /** + * Specify the type of multiselect + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the selection feedback after selecting items + * @default "top-after-reopen" + */ + selectionFeedback?: "top" | "fixed" | "top-after-reopen"; + + /** + * Set to `true` to disable the dropdown + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to filter items + * @default false + */ + filterable?: boolean; + + /** + * Override the filtering logic + * The default filtering is an exact string comparison + * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) + */ + filterItem?: (item: MultiSelectItem, value: string) => string; + + /** + * Set to `true` to open the dropdown + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the locale + * @default "en" + */ + locale?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Override the sorting logic + * The default sorting compare the item text value + * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) + */ + sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; + + /** + * Override the default translation ids + */ + translateWithId?: (id: any) => string; + + /** + * Specify the title text + * @default "" + */ + titleText?: string; + + /** + * Set to `true` to pass the item to `itemToString` in the checkbox + * @default false + */ + useTitleInItem?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the list box label + * @default "" + */ + label?: string; + + /** + * Set an id for the list box component + */ + id?: string; + + /** + * Specify a name attribute for the select + */ + name?: string; + }; + + $$slot_def: {}; + + $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/InlineNotification.d.ts b/types/Notification/InlineNotification.d.ts new file mode 100644 index 00000000..54a96b07 --- /dev/null +++ b/types/Notification/InlineNotification.d.ts @@ -0,0 +1,71 @@ +/// + +export default class InlineNotification { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "inline" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + actions: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationActionButton.d.ts b/types/Notification/NotificationActionButton.d.ts new file mode 100644 index 00000000..86fc5a36 --- /dev/null +++ b/types/Notification/NotificationActionButton.d.ts @@ -0,0 +1,15 @@ +/// + +export default class NotificationActionButton { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts new file mode 100644 index 00000000..2f526c01 --- /dev/null +++ b/types/Notification/NotificationButton.d.ts @@ -0,0 +1,35 @@ +/// + +export default class NotificationButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the title of the icon + */ + title?: string; + + /** + * Specify the ARIA label for the icon + * @default "Close icon" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationIcon.d.ts b/types/Notification/NotificationIcon.d.ts new file mode 100644 index 00000000..f391d511 --- /dev/null +++ b/types/Notification/NotificationIcon.d.ts @@ -0,0 +1,27 @@ +/// + +export default class NotificationIcon { + $$prop_def: { + /** + * Specify the kind of notification icon + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/NotificationTextDetails.d.ts b/types/Notification/NotificationTextDetails.d.ts new file mode 100644 index 00000000..3445a04f --- /dev/null +++ b/types/Notification/NotificationTextDetails.d.ts @@ -0,0 +1,35 @@ +/// + +export default class NotificationTextDetails { + $$prop_def: { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Notification/ToastNotification.d.ts b/types/Notification/ToastNotification.d.ts new file mode 100644 index 00000000..fd0436e8 --- /dev/null +++ b/types/Notification/ToastNotification.d.ts @@ -0,0 +1,76 @@ +/// + +export default class ToastNotification { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the type of notification + * @default "toast" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after opening it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/NumberInput/NumberInput.Skeleton.d.ts b/types/NumberInput/NumberInput.Skeleton.d.ts new file mode 100644 index 00000000..9761bb4d --- /dev/null +++ b/types/NumberInput/NumberInput.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class NumberInputSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts new file mode 100644 index 00000000..0eb5011e --- /dev/null +++ b/types/NumberInput/NumberInput.d.ts @@ -0,0 +1,141 @@ +/// + +type NumberInputTranslationId = "increment" | "decrement"; + +export default class NumberInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the size of the input + */ + size?: "sm" | "xl"; + + /** + * Specify the input value + * @default "" + */ + value?: string; + + /** + * Specify the step increment + * @default 1 + */ + step?: number; + + /** + * Specify the maximum value + */ + max?: number; + + /** + * Specify the minimum value + */ + min?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` for the input to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to enable the mobile variant + * @default false + */ + mobile?: boolean; + + /** + * Set to `true` to allow for an empty value + * @default false + */ + allowEmpty?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the increment icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + label?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Override the default translation ids + * @default (id) => defaultTranslations[id] + */ + translateWithId?: (id: NumberInputTranslationId) => string; + + /** + * Default translation ids + * @constant + * @default { increment: "increment", decrement: "decrement", } + */ + translationIds?: { increment: "increment"; decrement: "decrement" }; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + label: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts new file mode 100644 index 00000000..840e4c07 --- /dev/null +++ b/types/OrderedList/OrderedList.d.ts @@ -0,0 +1,27 @@ +/// + +export default class OrderedList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + + /** + * Set to `true` to use native list styles + * @default false + */ + native?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts new file mode 100644 index 00000000..fabd27dd --- /dev/null +++ b/types/OverflowMenu/OverflowMenu.d.ts @@ -0,0 +1,85 @@ +/// + +export default class OverflowMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the overflow menu + */ + size?: "sm" | "xl"; + + /** + * Specify the direction of the overflow menu relative to the button + * @default "bottom" + */ + direction?: "top" | "bottom"; + + /** + * Set to `true` to open the menu + * @default false + */ + open?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to flip the menu relative to the button + * @default false + */ + flipped?: boolean; + + /** + * Specify the menu options class + */ + menuOptionsClass?: string; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the icon class + */ + iconClass?: string; + + /** + * Specify the ARIA label for the icon + * @default "Open and close list of options" + */ + iconDescription?: string; + + /** + * Set an id for the button element + */ + id?: string; + + /** + * Obtain a reference to the trigger button element + * @default null + */ + buttonRef?: null | HTMLButtonElement; + + /** + * Obtain a reference to the overflow menu element + * @default null + */ + menuRef?: null | HTMLUListElement; + }; + + $$slot_def: { + default: {}; + menu: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/OverflowMenu/OverflowMenuItem.d.ts b/types/OverflowMenu/OverflowMenuItem.d.ts new file mode 100644 index 00000000..e3270bf1 --- /dev/null +++ b/types/OverflowMenu/OverflowMenuItem.d.ts @@ -0,0 +1,67 @@ +/// + +export default class OverflowMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the item text + * Alternatively, use the default slot for a custom element + * @default "Provide text" + */ + text?: string; + + /** + * Specify the `href` attribute if the item is a link + * @default "" + */ + href?: string; + + /** + * Set to `true` if the item should be focused when opening the menu + * @default false + */ + primaryFocus?: boolean; + + /** + * Set to `true` to disable the item + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to include a divider + * @default false + */ + hasDivider?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `false` to omit the button `title` attribute + * @default true + */ + requireTitle?: boolean; + + /** + * Set an id for the top-level element + */ + id?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Pagination/Pagination.Skeleton.d.ts b/types/Pagination/Pagination.Skeleton.d.ts new file mode 100644 index 00000000..3947119d --- /dev/null +++ b/types/Pagination/Pagination.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class PaginationSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.d.ts new file mode 100644 index 00000000..0ff0c2b5 --- /dev/null +++ b/types/Pagination/Pagination.d.ts @@ -0,0 +1,105 @@ +/// + +export default class Pagination { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current page index + * @default 1 + */ + page?: number; + + /** + * Specify the total number of items + * @default 0 + */ + totalItems?: number; + + /** + * Set to `true` to disable the pagination + * @default false + */ + disabled?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + + /** + * Specify the items per page text + * @default "Items per page:" + */ + itemsPerPageText?: string; + + /** + * Override the item text + * @default (min, max) => `${min}–${max} items` + */ + itemText?: (min: number, max: number) => string; + + /** + * Override the item range text + * @default (min, max, total) => `${min}–${max} of ${total} items` + */ + itemRangeText?: (min: number, max: number, total: number) => string; + + /** + * Set to `true` to disable the page input + * @default false + */ + pageInputDisabled?: boolean; + + /** + * Set to `true` to disable the page size input + * @default false + */ + pageSizeInputDisabled?: boolean; + + /** + * Specify the number of items to display in a page + * @default 10 + */ + pageSize?: number; + + /** + * Specify the available page sizes + * @default [10] + */ + pageSizes?: number[]; + + /** + * Set to `true` if the number of pages is unknown + * @default false + */ + pagesUnknown?: boolean; + + /** + * Override the page text + * @default (page) => `page ${page}` + */ + pageText?: (page: number) => string; + + /** + * Override the page range text + * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}` + */ + pageRangeText?: (current: number, total: number) => string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "update", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts new file mode 100644 index 00000000..9f448952 --- /dev/null +++ b/types/PaginationNav/PaginationNav.d.ts @@ -0,0 +1,48 @@ +/// + +export default class PaginationNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current page index + * @default 0 + */ + page?: number; + + /** + * Specify the total number of pages + * @default 10 + */ + total?: number; + + /** + * Specify the total number of pages to show + * @default 10 + */ + shown?: number; + + /** + * Set to `true` to loop the navigation + * @default false + */ + loop?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "click:button--next", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts b/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts new file mode 100644 index 00000000..c646df9a --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicator.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class ProgressIndicatorSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Specify the number of steps to render + * @default 4 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressIndicator.d.ts b/types/ProgressIndicator/ProgressIndicator.d.ts new file mode 100644 index 00000000..5caab63d --- /dev/null +++ b/types/ProgressIndicator/ProgressIndicator.d.ts @@ -0,0 +1,40 @@ +/// + +export default class ProgressIndicator { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the current step index + * @default 0 + */ + currentIndex?: number; + + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + + /** + * Set to `true` to specify whether the progress steps should be split equally in size in the div + * @default false + */ + spaceEqually?: boolean; + + /** + * Set to `true` to prevent updating `currentIndex` + * @default false + */ + preventChangeOnClick?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ProgressIndicator/ProgressStep.d.ts b/types/ProgressIndicator/ProgressStep.d.ts new file mode 100644 index 00000000..f56ccf9a --- /dev/null +++ b/types/ProgressIndicator/ProgressStep.d.ts @@ -0,0 +1,63 @@ +/// + +export default class ProgressStep { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` for the complete variant + * @default false + */ + complete?: boolean; + + /** + * Set to `true` to use the current variant + * @default false + */ + current?: boolean; + + /** + * Set to `true` to disable the progress step + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the step description + * @default "" + */ + description?: string; + + /** + * Specify the step label + * @default "" + */ + label?: string; + + /** + * Specify the step secondary label + * @default "" + */ + secondaryLabel?: string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: { props: { class: "bx--progress-label" } }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButton/RadioButton.Skeleton.d.ts b/types/RadioButton/RadioButton.Skeleton.d.ts new file mode 100644 index 00000000..bf50fc5c --- /dev/null +++ b/types/RadioButton/RadioButton.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class RadioButtonSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts new file mode 100644 index 00000000..c5c81164 --- /dev/null +++ b/types/RadioButton/RadioButton.d.ts @@ -0,0 +1,63 @@ +/// + +export default class RadioButton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the value of the radio button + * @default "" + */ + value?: string; + + /** + * Set to `true` to check the radio button + * @default false + */ + checked?: boolean; + + /** + * Set to `true` to disable the radio button + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the checkbox input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts new file mode 100644 index 00000000..3f93e4a0 --- /dev/null +++ b/types/RadioButtonGroup/RadioButtonGroup.d.ts @@ -0,0 +1,44 @@ +/// + +export default class RadioButtonGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set the selected radio button value + */ + selected?: string; + + /** + * Set to `true` to disable the radio buttons + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the orientation of the radio buttons + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + + /** + * Set an id for the container div element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Search/Search.Skeleton.d.ts b/types/Search/Search.Skeleton.d.ts new file mode 100644 index 00000000..e08b82de --- /dev/null +++ b/types/Search/Search.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class SearchSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts new file mode 100644 index 00000000..8f936cb2 --- /dev/null +++ b/types/Search/Search.d.ts @@ -0,0 +1,100 @@ +/// + +export default class Search { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + * @default "xl" + */ + size?: "sm" | "lg" | "xl"; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the search input + * @default false + */ + disabled?: boolean; + + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Specify the `type` attribute of the search input + * @default "text" + */ + type?: string; + + /** + * Specify the `placeholder` attribute of the search input + * @default "Search..." + */ + placeholder?: string; + + /** + * Specify the `autocomplete` attribute + * @default "off" + */ + autocomplete?: "on" | "off"; + + /** + * Set to `true` to auto focus the search element + * @default false + */ + autofocus?: boolean; + + /** + * Specify the close button label text + * @default "Clear search input" + */ + closeButtonLabelText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/Select.Skeleton.d.ts b/types/Select/Select.Skeleton.d.ts new file mode 100644 index 00000000..a8924f96 --- /dev/null +++ b/types/Select/Select.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class SelectSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts new file mode 100644 index 00000000..726a120f --- /dev/null +++ b/types/Select/Select.d.ts @@ -0,0 +1,93 @@ +/// + +export default class Select { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the selected item value + */ + selected?: string; + + /** + * Set the size of the select input + */ + size?: "sm" | "xl"; + + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to disable the select element + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the select element + */ + id?: string; + + /** + * Specify a name attribute for the select element + */ + name?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Set to `true` to not render a label + * @default false + */ + noLabel?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts new file mode 100644 index 00000000..c2d925dc --- /dev/null +++ b/types/Select/SelectItem.d.ts @@ -0,0 +1,33 @@ +/// + +export default class SelectItem { + $$prop_def: { + /** + * Specify the option value + * @default "" + */ + value?: string; + + /** + * Specify the option text + * @default "" + */ + text?: string; + + /** + * Set to `true` to hide the option + * @default false + */ + hidden?: boolean; + + /** + * Set to `true` to disable the option + * @default false + */ + disabled?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Select/SelectItemGroup.d.ts b/types/Select/SelectItemGroup.d.ts new file mode 100644 index 00000000..fafae7e0 --- /dev/null +++ b/types/Select/SelectItemGroup.d.ts @@ -0,0 +1,23 @@ +/// + +export default class SelectItemGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to disable the optgroup element + * @default false + */ + disabled?: boolean; + + /** + * Specify the label attribute of the optgroup element + * @default "Provide label" + */ + label?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts new file mode 100644 index 00000000..369d2597 --- /dev/null +++ b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts @@ -0,0 +1,13 @@ +/// + +export default class SkeletonPlaceholder { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/SkeletonText/SkeletonText.d.ts b/types/SkeletonText/SkeletonText.d.ts new file mode 100644 index 00000000..4fddde79 --- /dev/null +++ b/types/SkeletonText/SkeletonText.d.ts @@ -0,0 +1,37 @@ +/// + +export default class SkeletonText { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of lines to render + * @default 3 + */ + lines?: number; + + /** + * Set to `true` to use the heading size variant + * @default false + */ + heading?: boolean; + + /** + * Set to `true` to use the paragraph size variant + * @default false + */ + paragraph?: boolean; + + /** + * Specify the width of the text (% or px) + * @default "100%" + */ + width?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Slider/Slider.Skeleton.d.ts b/types/Slider/Slider.Skeleton.d.ts new file mode 100644 index 00000000..12c9a388 --- /dev/null +++ b/types/Slider/Slider.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class SliderSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.d.ts new file mode 100644 index 00000000..b78b1c2e --- /dev/null +++ b/types/Slider/Slider.d.ts @@ -0,0 +1,115 @@ +/// + +export default class Slider { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the value of the slider + * @default 0 + */ + value?: number; + + /** + * Set the maximum slider value + * @default 100 + */ + max?: number; + + /** + * Specify the label for the max value + * @default "" + */ + maxLabel?: string; + + /** + * Set the minimum slider value + * @default 0 + */ + min?: number; + + /** + * Specify the label for the min value + * @default "" + */ + minLabel?: string; + + /** + * Set the step value + * @default 1 + */ + step?: number; + + /** + * Set the step multiplier value + * @default 4 + */ + stepMultiplier?: number; + + /** + * Set to `true` to require a value + * @default false + */ + required?: boolean; + + /** + * Specify the input type + * @default "number" + */ + inputType?: string; + + /** + * Set to `true` to disable the slider + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to hide the text input + * @default false + */ + hideTextInput?: boolean; + + /** + * Set an id for the slider div element + */ + id?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set a name for the slider element + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredList.Skeleton.d.ts b/types/StructuredList/StructuredList.Skeleton.d.ts new file mode 100644 index 00000000..06029486 --- /dev/null +++ b/types/StructuredList/StructuredList.Skeleton.d.ts @@ -0,0 +1,25 @@ +/// + +export default class StructuredListSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts new file mode 100644 index 00000000..9010508d --- /dev/null +++ b/types/StructuredList/StructuredList.d.ts @@ -0,0 +1,33 @@ +/// + +export default class StructuredList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListBody.d.ts b/types/StructuredList/StructuredListBody.d.ts new file mode 100644 index 00000000..6511b0d0 --- /dev/null +++ b/types/StructuredList/StructuredListBody.d.ts @@ -0,0 +1,15 @@ +/// + +export default class StructuredListBody { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListCell.d.ts b/types/StructuredList/StructuredListCell.d.ts new file mode 100644 index 00000000..bb3ce0f4 --- /dev/null +++ b/types/StructuredList/StructuredListCell.d.ts @@ -0,0 +1,27 @@ +/// + +export default class StructuredListCell { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListHead.d.ts b/types/StructuredList/StructuredListHead.d.ts new file mode 100644 index 00000000..247bf484 --- /dev/null +++ b/types/StructuredList/StructuredListHead.d.ts @@ -0,0 +1,15 @@ +/// + +export default class StructuredListHead { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListInput.d.ts b/types/StructuredList/StructuredListInput.d.ts new file mode 100644 index 00000000..75ac8264 --- /dev/null +++ b/types/StructuredList/StructuredListInput.d.ts @@ -0,0 +1,44 @@ +/// + +export default class StructuredListInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/StructuredList/StructuredListRow.d.ts b/types/StructuredList/StructuredListRow.d.ts new file mode 100644 index 00000000..d66bacf9 --- /dev/null +++ b/types/StructuredList/StructuredListRow.d.ts @@ -0,0 +1,34 @@ +/// + +export default class StructuredListRow { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts new file mode 100644 index 00000000..65378f14 --- /dev/null +++ b/types/Tabs/Tab.d.ts @@ -0,0 +1,50 @@ +/// + +export default class Tab { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the tab label + * Alternatively, use the default slot (e.g. Label) + * @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: {}; + }; + + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/TabContent.d.ts b/types/Tabs/TabContent.d.ts new file mode 100644 index 00000000..0deb1a25 --- /dev/null +++ b/types/Tabs/TabContent.d.ts @@ -0,0 +1,16 @@ +/// + +export default class TabContent { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/Tabs.d.ts b/types/Tabs/Tabs.d.ts new file mode 100644 index 00000000..acde5530 --- /dev/null +++ b/types/Tabs/Tabs.d.ts @@ -0,0 +1,39 @@ +/// + +export default class Tabs { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "change", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts new file mode 100644 index 00000000..d1a1deca --- /dev/null +++ b/types/Tabs/TabsSkeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TabsSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the number of tabs to render + * @default 4 + */ + count?: number; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tag/Tag.Skeleton.d.ts b/types/Tag/Tag.Skeleton.d.ts new file mode 100644 index 00000000..326858a7 --- /dev/null +++ b/types/Tag/Tag.Skeleton.d.ts @@ -0,0 +1,13 @@ +/// + +export default class TagSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & {}; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts new file mode 100644 index 00000000..1aac8261 --- /dev/null +++ b/types/Tag/Tag.d.ts @@ -0,0 +1,60 @@ +/// + +export default class Tag { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: { props: { class: "bx--tag__label" } }; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextArea/TextArea.Skeleton.d.ts b/types/TextArea/TextArea.Skeleton.d.ts new file mode 100644 index 00000000..5be5edc6 --- /dev/null +++ b/types/TextArea/TextArea.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TextAreaSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts new file mode 100644 index 00000000..1b943998 --- /dev/null +++ b/types/TextArea/TextArea.d.ts @@ -0,0 +1,99 @@ +/// + +export default class TextArea { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts new file mode 100644 index 00000000..cd9a40ff --- /dev/null +++ b/types/TextInput/PasswordInput.d.ts @@ -0,0 +1,121 @@ +/// + +export default class PasswordInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/TextInput.Skeleton.d.ts b/types/TextInput/TextInput.Skeleton.d.ts new file mode 100644 index 00000000..8d3e0daf --- /dev/null +++ b/types/TextInput/TextInput.Skeleton.d.ts @@ -0,0 +1,19 @@ +/// + +export default class TextInputSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts new file mode 100644 index 00000000..f2cfb6cf --- /dev/null +++ b/types/TextInput/TextInput.d.ts @@ -0,0 +1,123 @@ +/// + +export default class TextInput { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + + /** + * Set to `true` to indicate an warning state + * @default false + */ + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + + /** + * Set to `true` to use inline version + * @default false + */ + inline?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts new file mode 100644 index 00000000..1f54c8e2 --- /dev/null +++ b/types/Tile/ClickableTile.d.ts @@ -0,0 +1,33 @@ +/// + +export default class ClickableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to click the tile + * @default false + */ + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set the `href` + */ + href?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts new file mode 100644 index 00000000..380b8f43 --- /dev/null +++ b/types/Tile/ExpandableTile.d.ts @@ -0,0 +1,70 @@ +/// + +export default class ExpandableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/RadioTile.d.ts b/types/Tile/RadioTile.d.ts new file mode 100644 index 00000000..03312c5a --- /dev/null +++ b/types/Tile/RadioTile.d.ts @@ -0,0 +1,58 @@ +/// + +export default class RadioTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.d.ts new file mode 100644 index 00000000..a688f8a5 --- /dev/null +++ b/types/Tile/SelectableTile.d.ts @@ -0,0 +1,70 @@ +/// + +export default class SelectableTile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/Tile.d.ts b/types/Tile/Tile.d.ts new file mode 100644 index 00000000..717b0be7 --- /dev/null +++ b/types/Tile/Tile.d.ts @@ -0,0 +1,21 @@ +/// + +export default class Tile { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tile/TileGroup.d.ts b/types/Tile/TileGroup.d.ts new file mode 100644 index 00000000..98b1b307 --- /dev/null +++ b/types/Tile/TileGroup.d.ts @@ -0,0 +1,29 @@ +/// + +export default class TileGroup { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "select", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts new file mode 100644 index 00000000..77a53d4f --- /dev/null +++ b/types/TimePicker/TimePicker.d.ts @@ -0,0 +1,106 @@ +/// + +export default class TimePicker { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the size of the input + */ + size?: "sm" | "xl"; + + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts new file mode 100644 index 00000000..e0218924 --- /dev/null +++ b/types/TimePicker/TimePickerSelect.d.ts @@ -0,0 +1,60 @@ +/// + +export default class TimePickerSelect { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + + /** + * @default true + */ + 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Toggle/Toggle.Skeleton.d.ts b/types/Toggle/Toggle.Skeleton.d.ts new file mode 100644 index 00000000..c4edef3a --- /dev/null +++ b/types/Toggle/Toggle.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class ToggleSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts new file mode 100644 index 00000000..d1631a85 --- /dev/null +++ b/types/Toggle/Toggle.d.ts @@ -0,0 +1,57 @@ +/// + +export default class Toggle { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ToggleSmall/ToggleSmall.Skeleton.d.ts b/types/ToggleSmall/ToggleSmall.Skeleton.d.ts new file mode 100644 index 00000000..7ee04409 --- /dev/null +++ b/types/ToggleSmall/ToggleSmall.Skeleton.d.ts @@ -0,0 +1,24 @@ +/// + +export default class ToggleSmallSkeleton { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/ToggleSmall/ToggleSmall.d.ts b/types/ToggleSmall/ToggleSmall.d.ts new file mode 100644 index 00000000..d03bb6f0 --- /dev/null +++ b/types/ToggleSmall/ToggleSmall.d.ts @@ -0,0 +1,57 @@ +/// + +export default class ToggleSmall { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts new file mode 100644 index 00000000..a1026aaa --- /dev/null +++ b/types/Tooltip/Tooltip.d.ts @@ -0,0 +1,90 @@ +/// + +export default class Tooltip { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: { + default: {}; + triggerText: {}; + icon: {}; + }; + + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts new file mode 100644 index 00000000..a9bec238 --- /dev/null +++ b/types/TooltipDefinition/TooltipDefinition.d.ts @@ -0,0 +1,46 @@ +/// + +export default class TooltipDefinition { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + tooltip: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts new file mode 100644 index 00000000..4d8b7492 --- /dev/null +++ b/types/TooltipIcon/TooltipIcon.d.ts @@ -0,0 +1,45 @@ +/// + +export default class TooltipIcon { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/Content.d.ts b/types/UIShell/Content.d.ts new file mode 100644 index 00000000..f2956ecd --- /dev/null +++ b/types/UIShell/Content.d.ts @@ -0,0 +1,17 @@ +/// + +export default class Content { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the id for the main element + * @default "main-content" + */ + id?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts new file mode 100644 index 00000000..ec195157 --- /dev/null +++ b/types/UIShell/GlobalHeader/Header.d.ts @@ -0,0 +1,54 @@ +/// + +export default class Header { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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. ...) + * @default "" + */ + platformName?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: { + default: {}; + ["skip-to-content"]: {}; + platform: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts new file mode 100644 index 00000000..a588430a --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts @@ -0,0 +1,38 @@ +/// + +export default class HeaderAction { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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.
...
) + */ + text?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + text: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "undefined", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts new file mode 100644 index 00000000..d69ea619 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts @@ -0,0 +1,31 @@ +/// + +export default class HeaderActionLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the icon props + */ + icon?: { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts new file mode 100644 index 00000000..79e45517 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts @@ -0,0 +1,18 @@ +/// + +export default class HeaderActionSearch { + $$prop_def: { + /** + * Set to `true` to focus the search + * @default false + */ + searchIsActive?: boolean; + }; + + $$slot_def: {}; + + $on(eventname: "focusInputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: "inputSearch", cb: (event: CustomEvent) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNav.d.ts b/types/UIShell/GlobalHeader/HeaderNav.d.ts new file mode 100644 index 00000000..0682d233 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNav.d.ts @@ -0,0 +1,16 @@ +/// + +export default class HeaderNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts new file mode 100644 index 00000000..c33b9d5f --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts @@ -0,0 +1,33 @@ +/// + +export default class HeaderNavItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts new file mode 100644 index 00000000..68c03b0d --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts @@ -0,0 +1,48 @@ +/// + +export default class HeaderNavMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the `href` attribute + * @default "/" + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + + /** + * Specify the ARIA label for the chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; + $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts new file mode 100644 index 00000000..d119f1d7 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderPanelDivider { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts new file mode 100644 index 00000000..719fd36b --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelLink.d.ts @@ -0,0 +1,23 @@ +/// + +export default class HeaderPanelLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts new file mode 100644 index 00000000..c9e0c119 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderPanelLinks { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/GlobalHeader/HeaderUtilities.d.ts b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts new file mode 100644 index 00000000..27451169 --- /dev/null +++ b/types/UIShell/GlobalHeader/HeaderUtilities.d.ts @@ -0,0 +1,11 @@ +/// + +export default class HeaderUtilities { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/HeaderGlobalAction.d.ts b/types/UIShell/HeaderGlobalAction.d.ts new file mode 100644 index 00000000..cefda50a --- /dev/null +++ b/types/UIShell/HeaderGlobalAction.d.ts @@ -0,0 +1,29 @@ +/// + +export default class HeaderGlobalAction { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the active variant + * @default false + */ + isActive?: boolean; + + /** + * Specify the icon to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts new file mode 100644 index 00000000..84f3aed3 --- /dev/null +++ b/types/UIShell/SideNav/SideNav.d.ts @@ -0,0 +1,28 @@ +/// + +export default class SideNav { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavItems.d.ts b/types/UIShell/SideNav/SideNavItems.d.ts new file mode 100644 index 00000000..1380a084 --- /dev/null +++ b/types/UIShell/SideNav/SideNavItems.d.ts @@ -0,0 +1,11 @@ +/// + +export default class SideNavItems { + $$prop_def: {}; + + $$slot_def: { + default: {}; + }; + + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts new file mode 100644 index 00000000..7d961a5f --- /dev/null +++ b/types/UIShell/SideNav/SideNavLink.d.ts @@ -0,0 +1,37 @@ +/// + +export default class SideNavLink { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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 }; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts new file mode 100644 index 00000000..19d0b427 --- /dev/null +++ b/types/UIShell/SideNav/SideNavMenu.d.ts @@ -0,0 +1,34 @@ +/// + +export default class SideNavMenu { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * 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 }; + + /** + * Obtain a reference to the HTML button element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts new file mode 100644 index 00000000..701fbd44 --- /dev/null +++ b/types/UIShell/SideNav/SideNavMenuItem.d.ts @@ -0,0 +1,31 @@ +/// + +export default class SideNavMenuItem { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to select the item + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the item text + */ + text?: string; + + /** + * Obtain a reference to the HTML anchor element + * @default null + */ + ref?: null | HTMLAnchorElement; + }; + + $$slot_def: {}; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UIShell/SkipToContent.d.ts b/types/UIShell/SkipToContent.d.ts new file mode 100644 index 00000000..fd95515c --- /dev/null +++ b/types/UIShell/SkipToContent.d.ts @@ -0,0 +1,24 @@ +/// + +export default class SkipToContent { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Specify the `href` attribute + * @default "#main-content" + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts new file mode 100644 index 00000000..ae7c3839 --- /dev/null +++ b/types/UnorderedList/UnorderedList.d.ts @@ -0,0 +1,21 @@ +/// + +export default class UnorderedList { + $$prop_def: svelte.JSX.HTMLAttributes & { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + }; + + $$slot_def: { + default: {}; + }; + + $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; + $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; + $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; + $on(eventname: string, cb: (event: Event) => void): () => void; +} diff --git a/types/index.d.ts b/types/index.d.ts index 8f0b41d2..006ee9cf 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,5379 +1,154 @@ -// Type definitions for carbon-components-svelte 0.22.0 -// Project: https://github.com/IBM/carbon-components-svelte - -export class CarbonSvelteComponent { - $$prop_def: {}; - - $$slot_def: {}; - - // stub all `on:{eventname}` directives - $on(eventname: string, handler: (e: Event) => any): () => void; -} - -export class Accordion extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the accordion - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class AccordionItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the title of the accordion item heading - * Alternatively, use the named slot "title" (e.g.
...
) - * @default "title" - */ - title?: string; - - /** - * Set to `true` to open the first accordion item - * @default false - */ - open?: boolean; - - /** - * Set to `true` to disable the accordion item - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the accordion item chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - - $$slot_def: { title: {}; default: {} }; -} - -export class AccordionSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of accordion items to render - * @default 4 - */ - count?: number; - - /** - * Specify alignment of accordion item chevron icon - * @default "end" - */ - align?: "start" | "end"; - - /** - * Specify the size of the accordion - */ - size?: "sm" | "xl"; - - /** - * Set to `false` to close the first accordion item - * @default true - */ - open?: boolean; - }; -} - -export class AspectRatio extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the aspect ratio - * @default "2x1" - */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; - }; - - $$slot_def: { default: {} }; -} - -export class Breadcrumb extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Set to `true` to display skeleton state - * @default false - */ - skeleton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class BreadcrumbItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Set to `true` if the breadcrumb item represents the current page - * @default false - */ - isCurrentPage?: boolean; - }; - - $$slot_def: { default: { props: any } }; -} - -export class BreadcrumbSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Specify the number of breadcrumb items to render - * @default 3 - */ - count?: number; - }; -} - -export class Button extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the kind of button - * @default "primary" - */ - kind?: - | "primary" - | "secondary" - | "tertiary" - | "ghost" - | "danger" - | "danger-tertiary" - | "danger-ghost"; - - /** - * Specify the size of button - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` for the icon-only variant - * @default false - */ - hasIconOnly?: boolean; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the ARIA label for the button icon - */ - iconDescription?: string; - - /** - * Set the alignment of the tooltip relative to the icon - * `hasIconOnly` must be set to `true` - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g. ) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to disable the button - * @default false - */ - disabled?: boolean; - - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the `type` attribute for the button element - * @default "button" - */ - type?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class ButtonSet extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to stack the buttons vertically - * @default false - */ - stacked?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ButtonSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Specify the size of button skeleton - * @default "default" - */ - size?: "default" | "field" | "small"; - - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - }; -} - -export class Checkbox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify whether the checkbox is checked - * @default false - */ - checked?: boolean; - - /** - * Specify whether the checkbox is indeterminate - * @default false - */ - indeterminate?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` for the checkbox to be read-only - * @default false - */ - readonly?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set a name for the input element - * @default "" - */ - name?: string; - - /** - * Specify the title attribute for the label element - */ - title?: string; - - /** - * Set an id for the input label - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class CheckboxSkeleton extends CarbonSvelteComponent {} - -export class ClickableTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to click the tile - * @default false - */ - clicked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set the `href` - */ - href?: string; - }; - - $$slot_def: { default: {} }; -} - -export class CodeSnippet extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - - /** - * Set the code snippet text - * Alternatively, use the default slot (e.g. {`code`}) - */ - code?: string; - - /** - * Set to `true` to expand a multi-line code snippet (type="multi") - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to hide the copy button - * @default false - */ - hideCopyButton?: boolean; - - /** - * Set to `true` to wrap the text - * Note that `type` must be "multi" - * @default false - */ - wrapText?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Specify the ARIA label for the copy button icon - */ - copyButtonDescription?: string; - - /** - * Specify the ARIA label of the copy button - */ - copyLabel?: string; - - /** - * Specify the feedback text displayed when clicking the snippet - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Specify the show less text - * `type` must be "multi" - * @default "Show less" - */ - showLessText?: string; - - /** - * Specify the show more text - * `type` must be "multi" - * @default "Show more" - */ - showMoreText?: string; - - /** - * Set to `true` to enable the show more/less button - * @default false - */ - showMoreLess?: boolean; - - /** - * Set an id for the code element - */ - id?: string; - - /** - * Obtain a reference to the pre HTML element - * @default null - */ - ref?: null | HTMLPreElement; - }; - - $$slot_def: { default: {} }; -} - -export class CodeSnippetSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of code snippet - * @default "single" - */ - type?: "single" | "inline" | "multi"; - }; -} - -type ColumnSize = boolean | number; - -interface ColumnSizeDescriptor { - span?: ColumnSize; - offset: number; -} - -type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; - -export class Column extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - - /** - * Specify the aspect ratio of the column - */ - aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; - - /** - * Set the small breakpoint - */ - sm?: ColumnBreakpoint; - - /** - * Set the medium breakpoint - */ - md?: ColumnBreakpoint; - - /** - * Set the large breakpoint - */ - lg?: ColumnBreakpoint; - - /** - * Set the extra large breakpoint - */ - xlg?: ColumnBreakpoint; - - /** - * Set the maximum breakpoint - */ - max?: ColumnBreakpoint; - }; - - $$slot_def: { default: {} }; -} - -interface ComboBoxItem { - id: string; - text: string; -} - -export class ComboBox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the combobox items - * @default [] - */ - items?: ComboBoxItem[]; - - /** - * Override the display of a combobox item - */ - itemToString?: (item: ComboBoxItem) => string; - - /** - * Set the selected item by value index - */ - selectedIndex?: number; - - /** - * Specify the selected combobox value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "xl"; - - /** - * Set to `true` to disable the combobox - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text of the combobox - * @default "" - */ - titleText?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to open the combobox menu dropdown - * @default false - */ - open?: boolean; - - /** - * Determine if an item should be filtered given the current combobox value - */ - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Obtain a reference to the list HTML element - * @default null - */ - listRef?: null | HTMLDivElement; - }; -} - -export class ComposedModal extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the composed modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Specify a class for the inner modal - * @default "" - */ - containerClass?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { default: {} }; -} - -export class Content extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the id for the main element - * @default "main-content" - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class ContentSwitcher extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the selected index of the switch item - * @default 0 - */ - selectedIndex?: number; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the size of the content switcher - */ - size?: "sm" | "xl"; - }; - - $$slot_def: { default: {} }; -} - -export class Copy extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the feedback text shown after clicking the button - * @default "Copied!" - */ - feedback?: string; - - /** - * Set the timeout duration (ms) to display feedback text - * @default 2000 - */ - feedbackTimeout?: number; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class CopyButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the title and ARIA label for the copy button - * @default "Copy to clipboard" - */ - iconDescription?: string; - }; -} - -export class DataTable extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the data table headers - * @default [] - */ - headers?: { - key: string; - value: string; - display?: (item) => string; - sort?: (a, b) => number; - empty?: boolean; - columnMenu?: boolean; - }[]; - - /** - * Specify the rows the data table should render - * keys defined in `headers` are used for the row ids - * @default [] - */ - rows?: Object[]; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` for the expandable variant - * Automatically set to `true` if `batchExpansion` is `true` - * @default false - */ - expandable?: boolean; - - /** - * Set to `true` to enable batch expansion - * @default false - */ - batchExpansion?: boolean; - - /** - * Specify the row ids to be expanded - * @default [] - */ - expandedRowIds?: string[]; - - /** - * Set to `true` for the radio selection variant - * @default false - */ - radio?: boolean; - - /** - * Set to `true` for the selectable variant - * Automatically set to `true` if `radio` or `batchSelection` are `true` - * @default false - */ - selectable?: boolean; - - /** - * Set to `true` to enable batch selection - * @default false - */ - batchSelection?: boolean; - - /** - * Specify the row ids to be selected - * @default [] - */ - selectedRowIds?: string[]; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { - default: {}; - "cell-header": { header: any }; - cell: { row: any; cell: any }; - "expanded-row": { row: any }; - }; -} - -export class DataTableSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of columns - * @default 5 - */ - columns?: number; - - /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set the size of the data table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to apply zebra styles to the datatable rows - * @default false - */ - zebra?: boolean; - - /** - * Set to `false` to hide the header - * @default true - */ - showHeader?: boolean; - - /** - * Set the column headers - * If `headers` has one more items, `count` is ignored - * @default [] - */ - headers?: string[]; - - /** - * Set to `false` to hide the toolbar - * @default true - */ - showToolbar?: boolean; - }; -} - -export class DatePicker extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the date picker type - * @default "simple" - */ - datePickerType?: "simple" | "single" | "range"; - - /** - * Specify the date picker input value - * @default "" - */ - value?: string; - - /** - * Specify the element to append the calendar to - */ - appendTo?: HTMLElement; - - /** - * Specify the date format - * @default "m/d/Y" - */ - dateFormat?: string; - - /** - * Specify the maximum date - * @default null - */ - maxDate?: null | string | Date; - - /** - * Specify the minimum date - * @default null - */ - minDate?: null | string | Date; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Set to `true` to use the short variant - * @default false - */ - short?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set an id for the date picker element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class DatePickerInput extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input type - * @default "text" - */ - type?: string; - - /** - * Specify the input placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the Regular Expression for the input value - * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" - */ - pattern?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the ARIA label for the calendar icon - * @default "" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Set a name for the input element - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class DatePickerSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the range variant - * @default false - */ - range?: boolean; - - /** - * Set an id to be used by the label element - */ - id?: string; - }; -} - -type DropdownItemId = string; - -type DropdownItemText = string; - -interface DropdownItem { - id: DropdownItemId; - text: DropdownItemText; -} - -export class Dropdown extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the dropdown items - * @default [] - */ - items?: DropdownItem[]; - - /** - * Override the display of a dropdown item - */ - itemToString?: (item: DropdownItem) => string; - - /** - * Specify the selected item index - */ - selectedIndex?: number; - - /** - * Specify the type of dropdown - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the size of the dropdown field - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - */ - label?: string; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the list box - */ - name?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; -} - -export class DropdownSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - }; -} - -export class ExpandableTile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to expand the tile - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the max height of the tile (number of pixels) - * @default 0 - */ - tileMaxHeight?: number; - - /** - * Specify the padding of the tile (number of pixels) - * @default 0 - */ - tilePadding?: number; - - /** - * Specify the icon text of the collapsed tile - * @default "Interact to expand Tile" - */ - tileCollapsedIconText?: string; - - /** - * Specify the icon text of the expanded tile - * @default "Interact to collapse Tile" - */ - tileExpandedIconText?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level div element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { above: {}; below: {} }; -} - -export class FileUploader extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Obtain the uploaded file names - * @default [] - */ - files?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of clearing the array of uploaded files - * @constant - */ - clearFiles?: () => any; - - /** - * Specify the label description - * @default "" - */ - labelDescription?: string; - - /** - * Specify the label title - * @default "" - */ - labelTitle?: string; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the button label - * @default "" - */ - buttonLabel?: string; - - /** - * Specify the ARIA label used for the status icons - * @default "Provide icon description" - */ - iconDescription?: string; - - /** - * Specify a name attribute for the file button uploader input - * @default "" - */ - name?: string; - }; -} - -export class FileUploaderButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to disable label changes - * @default false - */ - disableLabelChanges?: boolean; - - /** - * Specify the kind of file uploader button - * @default "primary" - */ - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the label role - * @default "button" - */ - role?: string; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -type Files = string[]; - -export class FileUploaderDropContainer extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the accepted file types - * @default [] - */ - accept?: string[]; - - /** - * Set to `true` to allow multiple files - * @default false - */ - multiple?: boolean; - - /** - * Override the default behavior of validating uploaded files - * The default behavior does not validate files - */ - validateFiles?: (files: Files) => Files; - - /** - * Specify the label text - * @default "Add file" - */ - labelText?: string; - - /** - * Specify the `role` attribute of the drop container - * @default "button" - */ - role?: string; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify `tabindex` attribute - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class FileUploaderItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file uploader status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the error subject text - * @default "" - */ - errorSubject?: string; - - /** - * Specify the error body text - * @default "" - */ - errorBody?: string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Specify the file uploader name - * @default "" - */ - name?: string; - }; -} - -export class FileUploaderSkeleton extends CarbonSvelteComponent {} - -export class Filename extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the file name status - * @default "uploading" - */ - status?: "uploading" | "edit" | "complete"; - - /** - * Specify the ARIA label used for the status icons - * @default "" - */ - iconDescription?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - }; -} - -export class FluidForm extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Form extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class FormGroup extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Set to `true` to render a form requirement - * @default false - */ - message?: boolean; - - /** - * Specify the message text - * @default "" - */ - messageText?: string; - - /** - * Specify the legend text - * @default "" - */ - legendText?: string; - }; - - $$slot_def: { default: {} }; -} - -export class FormItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class FormLabel extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id to be used by the label element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Grid extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to use the condensed variant - * @default false - */ - condensed?: boolean; - - /** - * Set to `true` to use the narrow variant - * @default false - */ - narrow?: boolean; - - /** - * Set to `true` to use the fullWidth variant - * @default false - */ - fullWidth?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class Header extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `false` to hide the side nav by default - * @default true - */ - expandedByDefault?: boolean; - - /** - * Set to `true` to open the side nav - * @default false - */ - isSideNavOpen?: boolean; - - /** - * Specify the ARIA label for the header - */ - uiShellAriaLabel?: string; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the company name - */ - company?: string; - - /** - * Specify the platform name - * Alternatively, use the named slot "platform" (e.g. ...) - * @default "" - */ - platformName?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - - $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; -} - -export class HeaderAction extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to open the panel - * @default false - */ - isOpen?: boolean; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Specify the text - * Alternatively, use the named slot "text" (e.g.
...
) - */ - text?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { text: {}; default: {} }; -} - -export class HeaderActionLink extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the active state - * @default false - */ - linkIsActive?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class HeaderActionSearch extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to focus the search - * @default false - */ - searchIsActive?: boolean; - }; -} - -export class HeaderGlobalAction extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the active variant - * @default false - */ - isActive?: boolean; - - /** - * Specify the icon to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderNav extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderNavItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class HeaderNavMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the `href` attribute - * @default "/" - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - - /** - * Specify the ARIA label for the chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelDivider extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderPanelLink extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelLinks extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderUtilities extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Icon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the icon from `carbon-icons-svelte` to render - * Icon size must be 16px (e.g. `Add16`, `Task16`) - */ - render?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - }; -} - -export class IconSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the icon - * @default 16 - */ - size?: number; - }; -} - -export class InlineLoading extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the loading status - * @default "active" - */ - status?: "active" | "inactive" | "finished" | "error"; - - /** - * Set the loading description - */ - description?: string; - - /** - * Specify the ARIA label for the loading icon - */ - iconDescription?: string; - - /** - * Specify the timeout delay (ms) after `status` is set to "success" - * @default 1500 - */ - successDelay?: number; - }; -} - -export class InlineNotification extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "inline" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {}; actions: {} }; -} - -export class Link extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the link - */ - size?: "sm" | "lg"; - - /** - * Specify the href value - */ - href?: string; - - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - - /** - * Set to `true` to disable the checkbox - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to allow visited styles - * @default false - */ - visited?: boolean; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLAnchorElement | HTMLParagraphElement; - }; - - $$slot_def: { default: {} }; -} - -export class ListBox extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the list box - */ - size?: "sm" | "xl"; - - /** - * Set the type of the list box - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Set to `true` to open the list box - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the list box - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxFieldTranslationId = "close" | "open"; - -export class ListBoxField extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to disable the list box field - * @default false - */ - disabled?: boolean; - - /** - * Specify the role attribute - * @default "combobox" - */ - role?: string; - - /** - * Specify the tabindex - * @default "-1" - */ - tabindex?: string; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxFieldTranslationId) => string; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { default: {} }; -} - -export class ListBoxMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLDivElement; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxMenuIconTranslationId = "close" | "open"; - -export class ListBoxMenuIcon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to open the list box menu icon - * @default false - */ - open?: boolean; - - /** - * Default translation ids - * @constant - * @default { close: "close", open: "open" } - */ - translationIds?: { close: "close"; open: "open" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxMenuIconTranslationId) => string; - }; -} - -export class ListBoxMenuItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to enable the active state - * @default false - */ - active?: boolean; - - /** - * Set to `true` to enable the highlighted state - * @default false - */ - highlighted?: boolean; - }; - - $$slot_def: { default: {} }; -} - -type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; - -export class ListBoxSelection extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of selected items - */ - selectionCount?: any; - - /** - * Set to `true` to disable the list box selection - * @default false - */ - disabled?: boolean; - - /** - * Default translation ids - * @constant - * @default { clearAll: "clearAll", clearSelection: "clearSelection", } - */ - translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" }; - - /** - * Override the default translation ids - */ - translateWithId?: (id: ListBoxSelectionTranslationId) => string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; -} - -export class ListItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Loading extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the small variant - * @default false - */ - small?: boolean; - - /** - * Set to `false` to disable the active state - * @default true - */ - active?: boolean; - - /** - * Set to `false` to disable the overlay - * @default true - */ - withOverlay?: boolean; - - /** - * Specify the label description - * @default "Active loading indicator" - */ - description?: string; - - /** - * Set an id for the label element - */ - id?: string; - }; -} - -export class Modal extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the size of the modal - */ - size?: "xs" | "sm" | "lg"; - - /** - * Set to `true` to open the modal - * @default false - */ - open?: boolean; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - - /** - * Set to `true` to enable alert mode - * @default false - */ - alert?: boolean; - - /** - * Set to `true` to use the passive variant - * @default false - */ - passiveModal?: boolean; - - /** - * Specify the modal heading - */ - modalHeading?: string; - - /** - * Specify the modal label - */ - modalLabel?: string; - - /** - * Specify the ARIA label for the modal - */ - modalAriaLabel?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close the modal" - */ - iconDescription?: string; - - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Set to `true` for the primary button to be triggered when pressing "Enter" - * @default true - */ - shouldSubmitOnEnter?: boolean; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a selector to be focused when opening the modal - * @default "[data-modal-primary-focus]" - */ - selectorPrimaryFocus?: string; - - /** - * Set to `true` to prevent the modal from closing when clicking outside - * @default false - */ - preventCloseOnClickOutside?: boolean; - - /** - * Set an id for the top-level element - */ - id?: string; - - /** - * Obtain a reference to the top-level HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { label: {}; heading: {}; default: {} }; -} - -export class ModalBody extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` if the modal contains form elements - * @default false - */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalFooter extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Specify a class for the primary button - */ - primaryClass?: string; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a class for the secondary button - */ - secondaryClass?: string; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalHeader extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the modal title - * @default "" - */ - title?: string; - - /** - * Specify the modal label - * @default "" - */ - label?: string; - - /** - * Specify the label class - * @default "" - */ - labelClass?: string; - - /** - * Specify the title class - * @default "" - */ - titleClass?: string; - - /** - * Specify the close class - * @default "" - */ - closeClass?: string; - - /** - * Specify the close icon class - * @default "" - */ - closeIconClass?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {} }; -} - -type MultiSelectItemId = string; - -type MultiSelectItemText = string; - -interface MultiSelectItem { - id: MultiSelectItemId; - text: MultiSelectItemText; -} - -export class MultiSelect extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the multiselect items - * @default [] - */ - items?: MultiSelectItem[]; - - /** - * Override the display of a multiselect item - */ - itemToString?: (item: MultiSelectItem) => string; - - /** - * Set the selected ids - * @default [] - */ - selectedIds?: MultiSelectItemId[]; - - /** - * Specify the multiselect value - * @default "" - */ - value?: string; - - /** - * Set the size of the combobox - */ - size?: "sm" | "lg" | "xl"; - - /** - * Specify the type of multiselect - * @default "default" - */ - type?: "default" | "inline"; - - /** - * Specify the selection feedback after selecting items - * @default "top-after-reopen" - */ - selectionFeedback?: "top" | "fixed" | "top-after-reopen"; - - /** - * Set to `true` to disable the dropdown - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to filter items - * @default false - */ - filterable?: boolean; - - /** - * Override the filtering logic - * The default filtering is an exact string comparison - */ - filterItem?: (item: MultiSelectItem, value: string) => string; - - /** - * Set to `true` to open the dropdown - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the locale - * @default "en" - */ - locale?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Override the sorting logic - * The default sorting compare the item text value - */ - sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; - - /** - * Override the default translation ids - */ - translateWithId?: (id: any) => string; - - /** - * Specify the title text - * @default "" - */ - titleText?: string; - - /** - * Set to `true` to pass the item to `itemToString` in the checkbox - * @default false - */ - useTitleInItem?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the invalid state text - * @default "" - */ - invalidText?: string; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the list box label - * @default "" - */ - label?: string; - - /** - * Set an id for the list box component - */ - id?: string; - - /** - * Specify a name attribute for the select - */ - name?: string; - }; -} - -export class NotificationActionButton extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class NotificationButton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the title of the icon - */ - title?: string; - - /** - * Specify the ARIA label for the icon - * @default "Close icon" - */ - iconDescription?: string; - }; -} - -export class NotificationIcon extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the kind of notification icon - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; -} - -export class NotificationTextDetails extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the title text - * @default "Title" - */ - title?: 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 CarbonSvelteComponent { - $$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; - - /** - * Override the default translation ids - */ - translateWithId?: (id: NumberInputTranslationId) => string; - - /** - * Default translation ids - * @constant - * @default { increment: "increment", decrement: "decrement", } - */ - translationIds?: { increment: "increment"; decrement: "decrement" }; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - - $$slot_def: { label: {} }; -} - -export class NumberInputSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class OrderedList extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - - /** - * Set to `true` to use native list styles - * @default false - */ - native?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class OverflowMenu extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the overflow menu - */ - size?: "sm" | "xl"; - - /** - * Specify the direction of the overflow menu relative to the button - * @default "bottom" - */ - direction?: "top" | "bottom"; - - /** - * Set to `true` to open the menu - * @default false - */ - open?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to flip the menu relative to the button - * @default false - */ - flipped?: boolean; - - /** - * Specify the menu options class - */ - menuOptionsClass?: string; - - /** - * Specify the icon from `carbon-icons-svelte` to render - */ - icon?: typeof import("carbon-icons-svelte/lib/Add16").default; - - /** - * Specify the icon class - */ - iconClass?: string; - - /** - * Specify the ARIA label for the icon - * @default "Open and close list of options" - */ - iconDescription?: string; - - /** - * Set an id for the button element - */ - id?: string; - - /** - * Obtain a reference to the trigger button element - * @default null - */ - buttonRef?: null | HTMLButtonElement; - - /** - * Obtain a reference to the overflow menu element - * @default null - */ - menuRef?: null | HTMLUListElement; - }; - - $$slot_def: { menu: {}; default: {} }; -} - -export class OverflowMenuItem extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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; - - /** - * Set to `true` to disable the page size input - * @default false - */ - pageSizeInputDisabled?: boolean; - - /** - * Specify the number of items to display in a page - * @default 10 - */ - pageSize?: number; - - /** - * Specify the available page sizes - * @default [10] - */ - pageSizes?: number[]; - - /** - * Set to `true` if the number of pages is unknown - * @default false - */ - pagesUnknown?: boolean; - - /** - * Override the page text - */ - 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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent {} - -export class PasswordInput extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the current step index - * @default 0 - */ - currentIndex?: number; - - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Set to `true` to specify whether the progress steps should be split equally in size in the div - * @default false - */ - spaceEqually?: boolean; - - /** - * Set to `true` to prevent updating `currentIndex` - * @default false - */ - preventChangeOnClick?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ProgressIndicatorSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the vertical variant - * @default false - */ - vertical?: boolean; - - /** - * Specify the number of steps to render - * @default 4 - */ - count?: number; - }; -} - -export class ProgressStep extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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"; - - /** - * Set an id for the container div element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class RadioButtonSkeleton extends CarbonSvelteComponent {} - -export class RadioTile extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @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 CarbonSvelteComponent { - $$prop_def: { - /** - * - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - - /** - * Set to `true` to display the skeleton state - * @default false - */ - skeleton?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the search input - * @default false - */ - disabled?: boolean; - - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Specify the `type` attribute of the search input - * @default "text" - */ - type?: string; - - /** - * Specify the `placeholder` attribute of the search input - * @default "Search..." - */ - placeholder?: string; - - /** - * Specify the `autocomplete` attribute - * @default "off" - */ - autocomplete?: "on" | "off"; - - /** - * Set to `true` to auto focus the search element - * @default false - */ - autofocus?: boolean; - - /** - * Specify the close button label text - * @default "Clear search input" - */ - closeButtonLabelText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class SearchSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * - * @default false - */ - small?: boolean; - - /** - * Specify the size of the search input - * @default "xl" - */ - size?: "sm" | "lg" | "xl"; - }; -} - -export class Select extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class SelectableTile extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class SideNavLink extends CarbonSvelteComponent { - $$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; - }; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class SideNavMenu extends CarbonSvelteComponent { - $$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; - }; - - /** - * Obtain a reference to the HTML button element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { default: {} }; -} - -export class SideNavMenuItem extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the item - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the item text - */ - text?: string; - - /** - * Obtain a reference to the HTML anchor element - * @default null - */ - ref?: null | HTMLAnchorElement; - }; -} - -export class SkeletonPlaceholder extends CarbonSvelteComponent {} - -export class SkeletonText extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the value of the slider - * @default 0 - */ - value?: number; - - /** - * Set the maximum slider value - * @default 100 - */ - max?: number; - - /** - * Specify the label for the max value - * @default "" - */ - maxLabel?: string; - - /** - * Set the minimum slider value - * @default 0 - */ - min?: number; - - /** - * Specify the label for the min value - * @default "" - */ - minLabel?: string; - - /** - * Set the step value - * @default 1 - */ - step?: number; - - /** - * Set the step multiplier value - * @default 4 - */ - stepMultiplier?: number; - - /** - * Set to `true` to require a value - * @default false - */ - required?: boolean; - - /** - * Specify the input type - * @default "number" - */ - inputType?: string; - - /** - * Set to `true` to disable the slider - * @default false - */ - disabled?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to hide the text input - * @default false - */ - hideTextInput?: boolean; - - /** - * Set an id for the slider div element - */ - id?: string; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set a name for the slider element - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the HTML element - * @default null - */ - ref?: null | HTMLElement; - }; -} - -export class SliderSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class StructuredList extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class StructuredListCell extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class StructuredListInput extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the switch text - * Alternatively, use the named slot "text" (e.g. ...) - * @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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the tab label - * Alternatively, use the default slot (e.g. Label) - * @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 CarbonSvelteComponent { - $$prop_def: { - /** - * Set an id for the top-level element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Table extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableCell extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableContainer extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableHeader extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class Tabs extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the number of tabs to render - * @default 4 - */ - count?: number; - }; -} - -export class Tag extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent {} - -export class TextArea extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class TextInput extends CarbonSvelteComponent { - $$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; - - /** - * Set to `true` to indicate an warning state - * @default false - */ - warn?: boolean; - - /** - * Specify the warning state text - * @default "" - */ - warnText?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - - /** - * Set to `true` to mark the field as required - * @default false - */ - required?: boolean; - - /** - * Set to `true` to use inline version - * @default false - */ - inline?: boolean; - }; -} - -export class TextInputSkeleton extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - -export class Tile extends CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TileGroup extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the size of the input - */ - size?: "sm" | "xl"; - - /** - * 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 CarbonSvelteComponent { - $$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; - - /** - * - * @default true - */ - 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 CarbonSvelteComponent { - $$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 opening it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class Toggle extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; -} - -export class ToggleSmall extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set an id for the input element - */ - id?: string; - }; -} - -export class Toolbar extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the toolbar size - * @default "default" - */ - size?: "sm" | "default"; - }; - - $$slot_def: { default: {} }; -} - -export class ToolbarBatchActions extends CarbonSvelteComponent { - $$prop_def: { - /** - * Override the total items selected text - */ - formatTotalSelected?: (totalSelected: number) => string; - }; - - $$slot_def: { default: {} }; -} - -export class ToolbarContent extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarMenu extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarMenuItem extends CarbonSvelteComponent { - $$slot_def: { default: {} }; -} - -export class ToolbarSearch extends CarbonSvelteComponent { - $$prop_def: { - /** - * Specify the value of the search input - * @default "" - */ - value?: string; - - /** - * Set to `true` to expand the search bar - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to keep the search bar expanded - * @default false - */ - persistent?: boolean; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class Tooltip extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$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: {}; tooltip: {} }; -} - -export class TooltipIcon extends CarbonSvelteComponent { - $$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 CarbonSvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the nested variant - * @default false - */ - nested?: boolean; - }; - - $$slot_def: { default: {} }; -} +export { default as SkeletonText } from "./SkeletonText/SkeletonText"; +export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton"; +export { default as Accordion } from "./Accordion/Accordion"; +export { default as AccordionItem } from "./Accordion/AccordionItem"; +export { default as AspectRatio } from "./AspectRatio/AspectRatio"; +export { default as BreadcrumbSkeleton } from "./Breadcrumb/Breadcrumb.Skeleton"; +export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb"; +export { default as Link } from "./Link/Link"; +export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem"; +export { default as ButtonSkeleton } from "./Button/Button.Skeleton"; +export { default as Button } from "./Button/Button"; +export { default as ButtonSet } from "./Button/ButtonSet"; +export { default as CheckboxSkeleton } from "./Checkbox/Checkbox.Skeleton"; +export { default as Checkbox } from "./Checkbox/Checkbox"; +export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher"; +export { default as Switch } from "./ContentSwitcher/Switch"; +export { default as Copy } from "./Copy/Copy"; +export { default as CopyButton } from "./CopyButton/CopyButton"; +export { default as ListBox } from "./ListBox/ListBox"; +export { default as ListBoxField } from "./ListBox/ListBoxField"; +export { default as ListBoxMenu } from "./ListBox/ListBoxMenu"; +export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon"; +export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem"; +export { default as ListBoxSelection } from "./ListBox/ListBoxSelection"; +export { default as ComboBox } from "./ComboBox/ComboBox"; +export { default as ComposedModal } from "./ComposedModal/ComposedModal"; +export { default as ModalHeader } from "./ComposedModal/ModalHeader"; +export { default as ModalBody } from "./ComposedModal/ModalBody"; +export { default as ModalFooter } from "./ComposedModal/ModalFooter"; +export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippet.Skeleton"; +export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet"; +export { default as RadioButton } from "./RadioButton/RadioButton"; +export { default as RadioButtonSkeleton } from "./RadioButton/RadioButton.Skeleton"; +export { default as Table } from "./DataTable/Table"; +export { default as TableBody } from "./DataTable/TableBody"; +export { default as TableCell } from "./DataTable/TableCell"; +export { default as TableContainer } from "./DataTable/TableContainer"; +export { default as TableHead } from "./DataTable/TableHead"; +export { default as TableHeader } from "./DataTable/TableHeader"; +export { default as TableRow } from "./DataTable/TableRow"; +export { default as DataTable } from "./DataTable/DataTable"; +export { default as Toolbar } from "./DataTable/Toolbar"; +export { default as ToolbarContent } from "./DataTable/ToolbarContent"; +export { default as SearchSkeleton } from "./Search/Search.Skeleton"; +export { default as Search } from "./Search/Search"; +export { default as ToolbarSearch } from "./DataTable/ToolbarSearch"; +export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions"; +export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu"; +export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem"; +export { default as ToolbarMenu } from "./DataTable/ToolbarMenu"; +export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem"; +export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton"; +export { default as DatePicker } from "./DatePicker/DatePicker"; +export { default as DatePickerInput } from "./DatePicker/DatePickerInput"; +export { default as DatePickerSkeleton } from "./DatePicker/DatePicker.Skeleton"; +export { default as Dropdown } from "./Dropdown/Dropdown"; +export { default as DropdownSkeleton } from "./Dropdown/Dropdown.Skeleton"; +export { default as Loading } from "./Loading/Loading"; +export { default as Filename } from "./FileUploader/Filename"; +export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton"; +export { default as FileUploader } from "./FileUploader/FileUploader"; +export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem"; +export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer"; +export { default as FileUploaderSkeleton } from "./FileUploader/FileUploader.Skeleton"; +export { default as Form } from "./Form/Form"; +export { default as FluidForm } from "./FluidForm/FluidForm"; +export { default as FormGroup } from "./FormGroup/FormGroup"; +export { default as FormItem } from "./FormItem/FormItem"; +export { default as FormLabel } from "./FormLabel/FormLabel"; +export { default as Grid } from "./Grid/Grid"; +export { default as Row } from "./Grid/Row"; +export { default as Column } from "./Grid/Column"; +export { default as IconSkeleton } from "./Icon/Icon.Skeleton"; +export { default as Icon } from "./Icon/Icon"; +export { default as InlineLoading } from "./InlineLoading/InlineLoading"; +export { default as ListItem } from "./ListItem/ListItem"; +export { default as MultiSelect } from "./MultiSelect/MultiSelect"; +export { default as Modal } from "./Modal/Modal"; +export { default as NotificationButton } from "./Notification/NotificationButton"; +export { default as NotificationIcon } from "./Notification/NotificationIcon"; +export { default as NotificationTextDetails } from "./Notification/NotificationTextDetails"; +export { default as ToastNotification } from "./Notification/ToastNotification"; +export { default as InlineNotification } from "./Notification/InlineNotification"; +export { default as NotificationActionButton } from "./Notification/NotificationActionButton"; +export { default as NumberInput } from "./NumberInput/NumberInput"; +export { default as NumberInputSkeleton } from "./NumberInput/NumberInput.Skeleton"; +export { default as OrderedList } from "./OrderedList/OrderedList"; +export { default as Select } from "./Select/Select"; +export { default as SelectSkeleton } from "./Select/Select.Skeleton"; +export { default as SelectItem } from "./Select/SelectItem"; +export { default as SelectItemGroup } from "./Select/SelectItemGroup"; +export { default as Pagination } from "./Pagination/Pagination"; +export { default as PaginationSkeleton } from "./Pagination/Pagination.Skeleton"; +export { default as PaginationNav } from "./PaginationNav/PaginationNav"; +export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; +export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicator.Skeleton"; +export { default as ProgressStep } from "./ProgressIndicator/ProgressStep"; +export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup"; +export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder"; +export { default as Slider } from "./Slider/Slider"; +export { default as SliderSkeleton } from "./Slider/Slider.Skeleton"; +export { default as StructuredList } from "./StructuredList/StructuredList"; +export { default as StructuredListSkeleton } from "./StructuredList/StructuredList.Skeleton"; +export { default as StructuredListBody } from "./StructuredList/StructuredListBody"; +export { default as StructuredListHead } from "./StructuredList/StructuredListHead"; +export { default as StructuredListCell } from "./StructuredList/StructuredListCell"; +export { default as StructuredListRow } from "./StructuredList/StructuredListRow"; +export { default as StructuredListInput } from "./StructuredList/StructuredListInput"; +export { default as Tabs } from "./Tabs/Tabs"; +export { default as Tab } from "./Tabs/Tab"; +export { default as TabContent } from "./Tabs/TabContent"; +export { default as TabsSkeleton } from "./Tabs/TabsSkeleton"; +export { default as TagSkeleton } from "./Tag/Tag.Skeleton"; +export { default as Tag } from "./Tag/Tag"; +export { default as TextArea } from "./TextArea/TextArea"; +export { default as TextAreaSkeleton } from "./TextArea/TextArea.Skeleton"; +export { default as TextInput } from "./TextInput/TextInput"; +export { default as TextInputSkeleton } from "./TextInput/TextInput.Skeleton"; +export { default as PasswordInput } from "./TextInput/PasswordInput"; +export { default as Tile } from "./Tile/Tile"; +export { default as ClickableTile } from "./Tile/ClickableTile"; +export { default as ExpandableTile } from "./Tile/ExpandableTile"; +export { default as SelectableTile } from "./Tile/SelectableTile"; +export { default as RadioTile } from "./Tile/RadioTile"; +export { default as TileGroup } from "./Tile/TileGroup"; +export { default as TimePicker } from "./TimePicker/TimePicker"; +export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect"; +export { default as Toggle } from "./Toggle/Toggle"; +export { default as ToggleSkeleton } from "./Toggle/Toggle.Skeleton"; +export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall"; +export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmall.Skeleton"; +export { default as Tooltip } from "./Tooltip/Tooltip"; +export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition"; +export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon"; +export { default as Header } from "./UIShell/GlobalHeader/Header"; +export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction"; +export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink"; +export { default as HeaderActionSearch } from "./UIShell/GlobalHeader/HeaderActionSearch"; +export { default as HeaderNav } from "./UIShell/GlobalHeader/HeaderNav"; +export { default as HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem"; +export { default as HeaderNavMenu } from "./UIShell/GlobalHeader/HeaderNavMenu"; +export { default as HeaderPanelDivider } from "./UIShell/GlobalHeader/HeaderPanelDivider"; +export { default as HeaderPanelLink } from "./UIShell/GlobalHeader/HeaderPanelLink"; +export { default as HeaderPanelLinks } from "./UIShell/GlobalHeader/HeaderPanelLinks"; +export { default as HeaderUtilities } from "./UIShell/GlobalHeader/HeaderUtilities"; +export { default as SideNav } from "./UIShell/SideNav/SideNav"; +export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems"; +export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink"; +export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu"; +export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem"; +export { default as Content } from "./UIShell/Content"; +export { default as SkipToContent } from "./UIShell/SkipToContent"; +export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction"; +export { default as UnorderedList } from "./UnorderedList/UnorderedList"; diff --git a/yarn.lock b/yarn.lock index c7ddfb32..3549c21e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -120,6 +120,11 @@ resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== +"@types/pug@^2.0.4": + version "2.0.4" + resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2" + integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI= + "@types/resolve@1.17.1": version "1.17.1" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6" @@ -127,6 +132,13 @@ dependencies: "@types/node" "*" +"@types/sass@^1.16.0": + version "1.16.0" + resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d" + integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA== + dependencies: + "@types/node" "*" + abbrev@1: version "1.1.1" resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" @@ -207,6 +219,14 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: "@types/color-name" "^1.1.1" color-convert "^2.0.1" +anymatch@~3.1.1: + version "3.1.1" + resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142" + integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + aproba@^1.0.3: version "1.2.0" resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" @@ -311,6 +331,11 @@ big.js@^5.2.2: resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== +binary-extensions@^2.0.0: + version "2.1.0" + resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9" + integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ== + block-stream@*: version "0.0.9" resolved "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a" @@ -326,7 +351,7 @@ brace-expansion@^1.1.7: balanced-match "^1.0.0" concat-map "0.0.1" -braces@^3.0.1: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -433,6 +458,21 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chokidar@^3.4.1: + version "3.4.3" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b" + integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.1.2" + ci-info@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" @@ -656,6 +696,11 @@ delegates@^1.0.0: resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o= +detect-indent@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd" + integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA== + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -1015,6 +1060,13 @@ gh-pages@^3.1.0: fs-extra "^8.1.0" globby "^6.1.0" +glob-parent@~5.1.0: + version "5.1.1" + resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" + integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ== + dependencies: + is-glob "^4.0.1" + glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@~7.1.1: version "7.1.6" resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" @@ -1190,6 +1242,13 @@ is-arrayish@^0.3.1: resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-callable@^1.1.4, is-callable@^1.2.2: version "1.2.2" resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9" @@ -1200,6 +1259,11 @@ is-date-object@^1.0.1: resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== +is-extglob@^2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" + integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= + is-finite@^1.0.0: version "1.1.0" resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3" @@ -1222,6 +1286,13 @@ is-fullwidth-code-point@^3.0.0: resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== +is-glob@^4.0.1, is-glob@~4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc" + integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg== + dependencies: + is-extglob "^2.1.1" + is-module@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" @@ -1581,6 +1652,11 @@ mimic-fn@^2.1.0: resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +min-indent@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" + integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg== + minimatch@^3.0.4, minimatch@~3.0.2: version "3.0.4" resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" @@ -1678,7 +1754,7 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4: semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" -normalize-path@^3.0.0: +normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== @@ -1935,7 +2011,7 @@ performance-now@^2.1.0: resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.5, picomatch@^2.2.2: +picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2: version "2.2.2" resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== @@ -2097,6 +2173,13 @@ readable-stream@^2.0.1, readable-stream@^2.0.6: string_decoder "~1.1.1" util-deprecate "~1.0.1" +readdirp@~3.5.0: + version "3.5.0" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e" + integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ== + dependencies: + picomatch "^2.2.1" + redent@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde" @@ -2381,6 +2464,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +source-map@^0.7.3: + version "0.7.3" + resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" + integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== + sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8: version "1.4.8" resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" @@ -2571,6 +2659,13 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" +strip-indent@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" + integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ== + dependencies: + min-indent "^1.0.0" + strip-outer@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631" @@ -2609,6 +2704,20 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svelte-check@^1.1.6: + version "1.1.6" + resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.6.tgz#705fea71a757511f47894cdfa1ffab6e5c5cab4d" + integrity sha512-9CTehTTy02B4b7hsSp/F0JO8LrI3hNAgXfBtQ2JkxbDSLqlMPM5d2wcMrSzws9QQg6clRfBnn44wx3h/XYWWmg== + dependencies: + chalk "^4.0.0" + chokidar "^3.4.1" + glob "^7.1.6" + import-fresh "^3.2.1" + minimist "^1.2.5" + source-map "^0.7.3" + svelte-preprocess "^4.0.0" + typescript "*" + svelte-dev-helper@^1.1.9: version "1.1.9" resolved "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3" @@ -2622,6 +2731,16 @@ svelte-loader@^2.13.6: loader-utils "^1.1.0" svelte-dev-helper "^1.1.9" +svelte-preprocess@^4.0.0: + version "4.5.2" + resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9" + integrity sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q== + dependencies: + "@types/pug" "^2.0.4" + "@types/sass" "^1.16.0" + detect-indent "^6.0.0" + strip-indent "^3.0.0" + svelte@^3.29.4: version "3.29.4" resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.4.tgz#d0f80cb58109ef52963855c23496f7153bb2eb7e" @@ -2706,7 +2825,7 @@ type-fest@^0.11.0: resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1" integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ== -typescript@^4.0.5: +typescript@*, typescript@^4.0.5: version "4.0.5" resolved "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389" integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==