From 5c829b5afc0d55ff158973b4bef5f02891a25da9 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 10 Aug 2020 18:27:26 -0700 Subject: [PATCH 1/7] build: use svelte compiler to generate typescript definitions --- .travis.yml | 1 + package.json | 7 +- scripts/generate-docs.js | 132 + scripts/parse-component.js | 115 + src/DatePicker/DatePickerInput.svelte | 24 + src/FormGroup/FormGroup.svelte | 16 +- src/MultiSelect/MultiSelect.svelte | 12 +- src/Notification/NotificationButton.svelte | 1 + .../ProgressIndicator.Skeleton.svelte | 1 + .../ProgressIndicator.svelte | 1 + src/Select/SelectItem.svelte | 25 +- src/Slider/Slider.svelte | 85 +- src/UIShell/SideNav/SideNavMenuItem.svelte | 14 + tsconfig.json | 1 + types/index.d.ts | 5438 ++++++++++++++--- yarn.lock | 23 +- 16 files changed, 4948 insertions(+), 948 deletions(-) create mode 100644 scripts/generate-docs.js create mode 100644 scripts/parse-component.js create mode 100644 tsconfig.json diff --git a/.travis.yml b/.travis.yml index 6d847239..96f9cd1f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,4 +4,5 @@ cache: yarn script: - yarn prepack - yarn build + - node scripts/generate-docs.js - cd docs && yarn && yarn test diff --git a/package.json b/package.json index 31212730..6a94eb28 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ }, "sideEffects": false, "dependencies": { - "carbon-icons-svelte": "^10.14.0", + "carbon-icons-svelte": "^10.15.0", "flatpickr": "4.6.3" }, "devDependencies": { @@ -26,12 +26,15 @@ "@storybook/addon-storysource": "^5.3.19", "@storybook/cli": "^5.3.19", "@storybook/svelte": "^5.3.19", + "@tsconfig/svelte": "^1.0.8", "babel-loader": "^8.0.6", + "comment-parser": "^0.7.5", "rollup": "^2.22.1", "rollup-plugin-svelte": "^5.2.3", "rollup-plugin-terser": "^6.1.0", "svelte": "^3.24.1", - "svelte-loader": "^2.13.6" + "svelte-loader": "^2.13.6", + "typescript": "^3.9.7" }, "babel": { "presets": [ diff --git a/scripts/generate-docs.js b/scripts/generate-docs.js new file mode 100644 index 00000000..3f667781 --- /dev/null +++ b/scripts/generate-docs.js @@ -0,0 +1,132 @@ +const fs = require("fs"); +const rollup = require("rollup"); +const pkg = require("../package.json"); +const svelte = require("rollup-plugin-svelte"); +const resolve = require("@rollup/plugin-node-resolve").default; +const commonjs = require("@rollup/plugin-commonjs"); +const path = require("path"); +const { parseComponent } = require("./parse-component"); + +async function generateDocs() { + let definitions = ` +// Type definitions for carbon-components-svelte ${pkg.version} +// Project: https://github.com/IBM/carbon-components-svelte + +class CarbonSvelteBase { + $$prop_def: {}; + + $$slot_def: {}; + + // stub all 'on:{event}' directives + $on(eventname: string, handler: (e: Event) => any): () => void; +}\n\n`; + + const shared_types = new Set(); + const groups = new Map(); + const components = new Map(); + const bundle = await rollup.rollup({ + input: "src", + plugins: [svelte(), resolve(), commonjs()], + }); + const { output } = await bundle.generate({ format: "es", file: pkg.module }); + + for (const chunkOrAsset of output) { + if (chunkOrAsset.type !== "asset" && chunkOrAsset.isEntry) { + chunkOrAsset.exports.forEach((exportee) => { + components.set(exportee, {}); + }); + + Object.keys(chunkOrAsset.modules) + .sort() + .forEach(async (filename) => { + const { dir, ext, name } = path.parse(filename); + const moduleName = name.replace(/\./g, ""); + + if (ext === ".svelte" && components.has(moduleName)) { + const group = dir + .split("src/") + .pop() + .split("/")[0]; + + if (groups.has(group)) { + groups.set(group, [...groups.get(group), moduleName]); + } else { + groups.set(group, [moduleName]); + } + + const source = fs.readFileSync(filename, "utf-8"); + const component = parseComponent(source, { + component: moduleName, + onTypeDef: (tag) => { + if (shared_types.has(tag.name)) return; + + shared_types.add(tag.name); + + const ts_type = tag.type.startsWith("{") + ? `interface ${tag.name} ${tag.type}` + : `type ${tag.name} = ${tag.type};`; + + definitions += ts_type + "\n\n"; + }, + }); + + let $$prop_def = ""; + + component.exported_props.forEach((prop, name) => { + $$prop_def += "/**\n"; + + prop.description.split("\n").forEach((line) => { + $$prop_def += "* " + line + "\n"; + }); + + if (prop.value !== undefined) { + $$prop_def += "* @default " + prop.value + "\n"; + } + + $$prop_def += "*/\n"; + + let value = "undefined"; + + if (prop.type) { + value = prop.type; + } + + $$prop_def += name + "?: " + value + ";" + "\n\n"; + }); + + let $$slot_def = ""; + + component.slots.forEach((slot, slot_name) => { + let value = ""; + + slot.attributes.forEach((attribute) => { + if (attribute.name !== "name") { + value += attribute.name + ": any;"; + } + }); + + if (slot.default) { + $$slot_def += "default: {" + value + "};" + "\n"; + } else { + $$slot_def += + JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; + } + }); + + definitions += ` + export class ${moduleName} extends CarbonSvelteBase { + ${!!$$prop_def ? "$$prop_def: {\n" + $$prop_def + "\n}\n" : ""} + + ${!!$$slot_def ? "$$slot_def: {\n" + $$slot_def + "\n}\n" : ""} + }\n\n`; + + components.set(moduleName, component); + } + }); + } + } + + fs.writeFileSync(pkg.types, definitions); +} + +generateDocs(); diff --git a/scripts/parse-component.js b/scripts/parse-component.js new file mode 100644 index 00000000..75527b6f --- /dev/null +++ b/scripts/parse-component.js @@ -0,0 +1,115 @@ +const { parse, walk } = require("svelte/compiler"); +const commentParser = require("comment-parser"); + +function parseComponent(source, hooks) { + const exported_props = new Map(); + const slots = new Map(); + const forwarded_events = new Map(); + const dispatched_events = new Map(); + + let hasDispatchedEvents = false; + let dispatcher_name = null; + let callee = []; + + walk(parse(source), { + enter(node, parent, prop) { + switch (node.type) { + case "CallExpression": + if (hasDispatchedEvents) { + if (node.callee.name === "createEventDispatcher") { + dispatcher_name = parent.id.name; + } + } + break; + case "Identifier": + if (node.name === "createEventDispatcher") { + hasDispatchedEvents = true; + } + + if (prop === "callee") { + callee.push({ name: node.name, parent }); + } + break; + case "ExportNamedDeclaration": + const { id, init } = node.declaration.declarations[0]; + + let value = undefined; + let type = undefined; + let description = null; + + if (init != null) { + value = init.raw; + } + + const general_comments = commentParser(source); + + general_comments.forEach((comment) => { + comment.tags.forEach((tag) => { + if (tag.tag === "typedef") hooks.onTypeDef(tag); + }); + }); + + if (node.leadingComments) { + const comment = commentParser( + "/*" + node.leadingComments[0].value + "*/" + ); + + description = comment[0].description; + type = comment[0].tags[0].type; + } else { + throw Error( + `[${hooks.component}] property \`${id.name}\` should be annotated.` + ); + } + + exported_props.set(id.name, { value, type, description }); + break; + case "Slot": + let slot_name = null; + + const slot_attributes = []; + + node.attributes.forEach((attribute) => { + if (attribute.name === "name") { + slot_name = attribute.value[0].raw; + } else { + slot_attributes.push(attribute); + } + }); + + slots.set(slot_name == null ? "default" : slot_name, { + attributes: node.attributes, + children: node.children, + default: slot_name == null, + }); + break; + case "EventHandler": + if (node.expression == null) { + forwarded_events.set(node.name, node); + } + break; + } + }, + }); + + if (hasDispatchedEvents) { + callee.forEach((node) => { + if (node.name === dispatcher_name) { + const [name, detail] = node.parent.arguments; + + dispatched_events.set(name.raw, { + detail: detail ? source.slice(detail.start, detail.end) : undefined, + }); + } + }); + } + + return { + exported_props, + slots, + forwarded_events, + dispatched_events, + }; +} + +module.exports = { parseComponent }; diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte index c3fb01d2..47708ef4 100644 --- a/src/DatePicker/DatePickerInput.svelte +++ b/src/DatePicker/DatePickerInput.svelte @@ -16,7 +16,17 @@ * @type {string} [placeholder=""] */ export let placeholder = ""; + + /** + * Specify the Regular Expression for the input value + * @type {string} [placeholder="\\d{1,2}\\/\\d{1,2}\\/\\d{4}"] + */ export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"; + + /** + * Set to `true` to disable the input + * @type {boolean} [disabled=false] + */ export let disabled = false; /** @@ -30,7 +40,17 @@ * @type {string} [id] */ export let id = "ccs-" + Math.random().toString(36); + + /** + * Specify the label text + * @type {string} [labelText=""] + */ export let labelText = ""; + + /** + * Set to `true` to visually hide the label text + * @type {boolean} [hideLabel=false] + */ export let hideLabel = false; /** @@ -45,6 +65,10 @@ */ export let invalidText = ""; + /** + * Set a name for the input element + * @type {string} [name=""] + */ export let name = undefined; /** diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte index 2d89e4dc..92ee84dc 100644 --- a/src/FormGroup/FormGroup.svelte +++ b/src/FormGroup/FormGroup.svelte @@ -3,10 +3,24 @@ * Set to `true` to indicate an invalid state * @type {boolean} [invalid=false] */ - export let invalid = false; + export let invalid = false; + /** + * Set to `true` to render a form requirement + * @type {boolean} [message=false] + */ export let message = false; + + /** + * Specify the message text + * @type {string} [messageText=""] + */ export let messageText = ""; + + /** + * Specify the legend text + * @type {string} [legendText=""] + */ export let legendText = ""; diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 7d0e7e25..ff29e190 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -1,10 +1,4 @@ diff --git a/src/ProgressIndicator/ProgressIndicator.svelte b/src/ProgressIndicator/ProgressIndicator.svelte index 5c5a19ad..f61bb38b 100644 --- a/src/ProgressIndicator/ProgressIndicator.svelte +++ b/src/ProgressIndicator/ProgressIndicator.svelte @@ -7,6 +7,7 @@ /** * Set to `true` to use the vertical variant + * @type {boolean} [vertical=false] */ export let vertical = false; diff --git a/src/Select/SelectItem.svelte b/src/Select/SelectItem.svelte index cb57eca4..60a3df55 100644 --- a/src/Select/SelectItem.svelte +++ b/src/Select/SelectItem.svelte @@ -1,9 +1,28 @@ diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..567d6246 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1 @@ +{ "extends": "@tsconfig/svelte/tsconfig.json" } diff --git a/types/index.d.ts b/types/index.d.ts index 20cfdec6..f9b0a889 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,136 +1,418 @@ -// Type definitions for carbon-components-svelte 0.9 -// https://github.com/IBM/carbon-components-svelte +// Type definitions for carbon-components-svelte 0.9.4 +// Project: https://github.com/IBM/carbon-components-svelte -// Carbon Icon type from carbon-icons-svelte 10.14 -// https://github.com/IBM/carbon-icons-svelte -declare class CarbonIcon { - $$prop_def: { - id?: string; - class?: string; - tabindex?: string; - focusable?: boolean; - title?: string; - style?: string; - fill?: string; - stroke?: string; - width?: string; - height?: string; - }; - $$slot_def: { - default?: {}; - }; -} - -export class AccordionSkeleton { - $$prop_def: { - count?: number; // default: 4 - open?: boolean; // default: true - }; -} - -export class Accordion { - $$prop_def: { - align?: "start" | "end"; // default: "end" - skeleton?: boolean; // default: false - }; -} - -export class AccordionItem { - $$prop_def: { - title?: string; // default: "title" - open?: boolean; // default: false - iconDescription?: string; // default: "Expand/Collapse" - }; -} - -export class BreadcrumbSkeleton { - $$prop_def: { - noTrailingSlash?: boolean; // default: false - count?: number; // default: 3 - }; -} - -export class Breadcrumb { - $$prop_def: { - noTrailingSlash?: boolean; // default: false - skeleton?: boolean; // default: false - }; -} - -export class BreadcrumbItem { - $$prop_def: { - href?: string; - isCurrentPage?: boolean; // default: false - }; -} - -export class ButtonSkeleton { - $$prop_def: { - href?: string; - small?: boolean; // default: false - }; -} - -export class Button { - $$prop_def: { - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary" - size?: "default" | "field" | "small"; // default: "default" - hasIconOnly?: boolean; // default: false - icon?: CarbonIcon; - iconDescription?: string; - tooltipAlignment?: "start" | "center" | "end"; - tooltipPosition?: "top" | "right" | "bottom" | "left"; - as?: boolean; // default: false - skeleton?: boolean; // default: false - disabled?: boolean; // default: false - href?: string; - tabindex?: string; // default: "0" - type?: string; // default: "button" - ref?: null | HTMLAnchorElement | HTMLButtonElement; // default: null - }; -} - -export class CheckboxSkeleton { +class CarbonSvelteBase { $$prop_def: {}; + + $$slot_def: {}; + + // stub all 'on:{event}' directives + $on(eventname: string, handler: (e: Event) => any): () => void; } -export class Checkbox { +export class AccordionSkeleton extends CarbonSvelteBase { $$prop_def: { - checked?: boolean; // default: false - indeterminate?: boolean; // default: false - skeleton?: boolean; // default: false - readonly?: boolean; // default: false - disabled?: boolean; // default: false - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - name?: string; // default: "" + /** + * Specify the number of accordion items to render + * @default 4 + */ + count?: number; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; + }; +} + +export class Accordion extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify alignment of accordion item chevron icon + * @default "end" + */ + align?: "start" | "end"; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + }; + + $$slot_def: { + default: {}; + }; +} + +export class AccordionItem extends CarbonSvelteBase { + $$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; + + /** + * Specify the ARIA label for the accordion item chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + title: {}; + default: {}; + }; +} + +export class BreadcrumbSkeleton extends CarbonSvelteBase { + $$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 Breadcrumb extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$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 ButtonSkeleton extends CarbonSvelteBase { + $$prop_def: { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + }; +} + +export class Button extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the kind of button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the size of button + * @default "default" + */ + size?: "default" | "field" | "small"; + + /** + * Set to `true` for the icon-only variant + * @default false + */ + hasIconOnly?: boolean; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the ARIA label for the button icon + */ + iconDescription?: string; + + /** + * Set the alignment of the tooltip relative to the icon + * `hasIconOnly` must be set to `true` + */ + tooltipAlignment?: "start" | "center" | "end"; + + /** + * Set the position of the tooltip relative to the icon + */ + tooltipPosition?: "top" | "right" | "bottom" | "left"; + + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g. ) + * @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 CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class CheckboxSkeleton extends CarbonSvelteBase {} + +export class Checkbox extends CarbonSvelteBase { + $$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; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class CodeSnippetSkeleton { +export class CodeSnippetSkeleton extends CarbonSvelteBase { $$prop_def: { - type?: "single" | "inline" | "multi"; // default: "single" + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; }; } -export class CodeSnippet { +export class CodeSnippet extends CarbonSvelteBase { $$prop_def: { - type?: "single" | "inline" | "multi"; // default: "single" + /** + * 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; - expanded?: boolean; // default: false - light?: boolean; // default: false - skeleton?: boolean; // default: false + + /** + * Set to `true` to expand a multi-line code snippet (type="multi") + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to hide the copy button + * @default false + */ + hideCopyButton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Specify the ARIA label for the copy button icon + */ copyButtonDescription?: string; + + /** + * Specify the ARIA label of the copy button + */ copyLabel?: string; - feedback?: string; // default: "Copied!" - feedbackTimeout?: number; // default: 2000 - showLessText?: string; // default: "Show more" - showMoreLess?: boolean; // default: false + + /** + * 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; - ref?: null | HTMLPreElement; // default: null + + /** + * Obtain a reference to the pre HTML element + * @default null + */ + ref?: null | HTMLPreElement; + }; + + $$slot_def: { + default: {}; }; } @@ -139,207 +421,724 @@ interface ComboBoxItem { text: string; } -export class ComboBox { +export class ComboBox extends CarbonSvelteBase { $$prop_def: { - items?: ComboBoxItem[]; // default: [] - itemToString?: (item: ComboBoxItem) => string; // default: (item: ComboBoxItem) => string - selectedIndex?: number; // default: -1 - value?: string; // default: "" + /** + * + */ + items?: { id: string; text: string }; + + /** + * Override the display of a combobox item + */ + itemToString?: (item: ComboBoxItem) => string; + + /** + * Set the selected item by value index + */ + selectedIndex?: number; + + /** + * Specify the selected combobox value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ size?: "sm" | "xl"; - disabled?: boolean; // default: false - titleText?: string; // default: "" - placeholder?: string; // default: "" - helperText?: string; // default: "" - invalidText?: string; // default: "" - invalid?: boolean; // default: false - light?: boolean; // default: false - open?: boolean; // default: false - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; // default: () => true + + /** + * 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; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class ComposedModal { +export class ComposedModal extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the composed modal + */ size?: "xs" | "sm" | "lg"; - open?: boolean; // default: false - danger?: boolean; // default: false - containerClass?: string; // default: "" - selectorPrimaryFocus?: string; // default: "[data-modal-primary-focus]" - ref?: null | HTMLElement; // default: null + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Specify a class for the inner modal + * @default "" + */ + containerClass?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; }; } -export class ModalBody { +export class ModalBody extends CarbonSvelteBase { $$prop_def: { - hasForm?: boolean; // default: false - hasScrollingContent?: boolean; // default: false + /** + * 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 { +export class ModalFooter extends CarbonSvelteBase { $$prop_def: { - primaryButtonText?: string; // default: "" - primaryButtonDisabled?: boolean; // default: false + /** + * 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; - secondaryButtonText?: string; // default: "" + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a class for the secondary button + */ secondaryClass?: string; - danger?: boolean; // default: false + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class ModalHeader { +export class ModalHeader extends CarbonSvelteBase { $$prop_def: { - title?: string; // default: "" - label?: string; // default: "" - labelClass?: string; // default: "" - titleClass?: string; // default: "" - closeClass?: string; // default: "" - closeIconClass?: string; // default: "" - iconDescription?: string; // default: "Close" + /** + * 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: {}; }; } -export class ContentSwitcher { +export class ContentSwitcher extends CarbonSvelteBase { $$prop_def: { - selectedIndex?: number; // default: 0 - light?: boolean; // default: false + /** + * Set the selected index of the switch item + * @default 0 + */ + selectedIndex?: number; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class Switch { +export class Switch extends CarbonSvelteBase { $$prop_def: { - text?: string; // default: "Provide text" - selected?: boolean; // default: false - disabled?: boolean; // default: false + /** + * 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; - ref?: null | HTMLButtonElement; // default: null + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; }; } -export class Copy { +export class Copy extends CarbonSvelteBase { $$prop_def: { - feedback?: string; // default: "Copied!" - feedbackTimeout?: number; // default: 2000 - ref?: null | HTMLButtonElement; // default: null + /** + * 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 { +export class CopyButton extends CarbonSvelteBase { $$prop_def: { - iconDescription?: string; // default: "Copy to clipboard" + /** + * Set the title and ARIA label for the copy button + * @default "Copy to clipboard" + */ + iconDescription?: string; }; } -export class DataTable { +export class DataTable extends CarbonSvelteBase { $$prop_def: { - headers?: { key: string; value: string }; // default: [] - rows?: Object[]; // default: [] + /** + * Specify the data table headers + */ + headers?: { key: string; value: string }; + + /** + * Specify the rows the data table should render + * keys defined in `headers` are used for the row ids + */ + rows?: Object[]; + + /** + * Set the size of the data table + */ size?: "compact" | "short" | "tall"; - title?: string; // default: "" - description?: string; // default: "" - zebra?: boolean; // default: false - sortable?: boolean; // default: false - stickyHeader?: boolean; // default: false + + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { + default: { props: any }; }; } -export class Table { +export class Table extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the table + */ size?: "compact" | "short" | "tall"; - zebra?: boolean; // default: false - useStaticWidth?: boolean; // default: false - shouldShowBorder?: boolean; // default: false - sortable?: boolean; // default: false - stickyHeader?: boolean; // default: false + + /** + * 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 { - $$prop_def: {}; -} - -export class TableCell { - $$prop_def: {}; -} - -export class TableContainer { - $$prop_def: { - title?: string; // default: "" - description?: string; // default: "" - stickyHeader?: boolean; // default: false +export class TableBody extends CarbonSvelteBase { + $$slot_def: { + default: {}; }; } -export class TableHead { - $$prop_def: {}; +export class TableCell extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; } -export class TableHeader { +export class TableContainer extends CarbonSvelteBase { $$prop_def: { - scope?: string; // default: "col" - translateWithId?: () => string; // default: () => "" + /** + * 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 CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class TableHeader extends CarbonSvelteBase { + $$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; }; -} -export class TableRow { - $$prop_def: { - isSelected?: boolean; // default: false + $$slot_def: { + default: {}; }; } -export class DataTableSkeleton { +export class TableRow extends CarbonSvelteBase { $$prop_def: { - columns?: number; // default: 5 - rows?: number; // default: 5 - compact?: boolean; // default: false - zebra?: boolean; // default: false - headers?: string[]; // default: [] + /** + * Set to `true` to select the row + * @default false + */ + isSelected?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class DatePickerSkeleton { +export class DataTableSkeleton extends CarbonSvelteBase { $$prop_def: { - range?: boolean; // default: false + /** + * Specify the number of columns + * @default 5 + */ + columns?: number; + + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set to `true` to use the compact variant + * @default false + */ + compact?: boolean; + + /** + * Set to `true` to apply zebra styles to the datatable rows + * @default false + */ + zebra?: boolean; + + /** + * Set the column headers + * If `headers` has one more items, `count` is ignored + */ + headers?: string[]; + }; +} + +export class DatePicker extends CarbonSvelteBase { + $$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; }; -} -export class DatePicker { - $$prop_def: { - datePickerType?: "simple" | "single" | "range"; // default: "simple" - value?: string; // default: "" - appendTo?: HTMLElement; // default: document.body - dateFormat?: string; // default: "m/d/Y" - maxDate?: null | string | Date; // default: null - minDate?: null | string | Date; // default: null - locale?: string; // default: "en" - short?: boolean; // default: false - light?: boolean; // default: false - id?: string; + $$slot_def: { + default: {}; }; } -export class DatePickerInput { +export class DatePickerInput extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the input + */ size?: "sm" | "xl"; - type?: string; // default: "text" - placeholder?: string; // default: "" - iconDescription?: string; // default: "" + + /** + * 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; - invalid?: boolean; // default: false - invalidText?: string; // default: "" - ref?: null | HTMLInputElement; // default: null + + /** + * 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 DropdownSkeleton { +export class DropdownSkeleton extends CarbonSvelteBase { $$prop_def: { - inline?: boolean; // default: false + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; }; } @@ -352,120 +1151,431 @@ interface DropdownItem { text: DropdownItemText; } -export class Dropdown { +export class Dropdown extends CarbonSvelteBase { $$prop_def: { - items?: DropdownItem[]; // default: [] - itemToString?: (item: DropdownItem) => string; // default: (item: DropdownItem) => DropdownItemText | DropdownItemId - selectedIndex?: number; // default: -1 - type?: "default" | "inline"; // default: "default" + /** + * + */ + items?: string; + + /** + * Override the display of a dropdown item + */ + itemToString?: (item: DropdownItem) => string; + + /** + * Specify the selected item index + */ + selectedIndex?: number; + + /** + * Specify the type of dropdown + * @default "default" + */ + type?: "default" | "inline"; + + /** + * Specify the size of the dropdown field + */ size?: "sm" | "lg" | "xl"; - open?: boolean; // default: false - inline?: boolean; // default: false - light?: boolean; // default: false - disabled?: boolean; // default: false - titleText?: string; // default: "" - invalid?: boolean; // default: false - invalidText?: string; // default: "" - helperText?: string; // default: "" + + /** + * 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; - ref?: null | HTMLButtonElement; // default: null + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; }; } -export class FileUploaderSkeleton { - $$prop_def: {}; -} - -export class FileUploader { +export class FileUploader extends CarbonSvelteBase { $$prop_def: { - status?: "uploading" | "edit" | "complete"; // default: "uploading" - accept?: string[]; // default: [] - files?: string[]; // default: [] - multiple?: boolean; // default: false - clearFiles?: () => any; // default: () => void - labelDescription?: string; // default: "" - labelTitle?: string; // default: "" - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary" - buttonLabel?: string; // default: "" - iconDescription?: string; // default: "" + /** + * Specify the file uploader status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the accepted file types + */ + accept?: string[]; + + /** + * Obtain the uploaded file names + */ + files?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Override the default behavior of clearing the array of uploaded files + */ + clearFiles?: () => any; + + /** + * Specify the label description + * @default "" + */ + labelDescription?: string; + + /** + * Specify the label title + * @default "" + */ + labelTitle?: string; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the button label + * @default "" + */ + buttonLabel?: string; + + /** + * Specify the ARIA label used for the status icons + * @default "Provide icon description" + */ + iconDescription?: string; + + /** + * Specify a name attribute for the file button uploader input + * @default "" + */ name?: string; }; } -export class FileUploaderButton { +export class FileUploaderButton extends CarbonSvelteBase { $$prop_def: { - accept?: string[]; // default: [] - multiple?: boolean; // default: false - disabled?: boolean; // default: false - disableLabelChanges?: boolean; // default: false - kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; // default: "primary" - labelText?: string; // default: "Add file" - role?: string; // default: "button" - tabindex?: string; // default: "0" + /** + * Specify the accepted file types + */ + accept?: string[]; + + /** + * Set to `true` to allow multiple files + * @default false + */ + multiple?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to disable label changes + * @default false + */ + disableLabelChanges?: boolean; + + /** + * Specify the kind of file uploader button + * @default "primary" + */ + kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger"; + + /** + * Specify the label text + * @default "Add file" + */ + labelText?: string; + + /** + * Specify the label role + * @default "button" + */ + role?: string; + + /** + * Specify `tabindex` attribute + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the input element + */ id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ name?: string; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } type Files = string[]; -export class FileUploaderDropContainer { +export class FileUploaderDropContainer extends CarbonSvelteBase { $$prop_def: { - accept?: string[]; // default: [] - multiple?: boolean; // default: false - validateFiles?: (files: Files) => Files; // default: (files: Files) => Files - labelText?: string; // default: "Add file" - role?: string; // default: "button" - disabled?: boolean; // default: false - tabindex?: string; // default: "0" + /** + * + */ + 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; - name?: string; // default: "" - ref?: null | HTMLInputElement; // default: null + + /** + * 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 { +export class FileUploaderItem extends CarbonSvelteBase { $$prop_def: { - status?: "uploading" | "edit" | "complete"; // default: "uploading" - iconDescription?: string; // default: "" - invalid?: boolean; // default: false - errorSubject?: string; // default: "" - errorBody?: string; // default: "" + /** + * 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; - name?: string; // default: "" + + /** + * Specify the file uploader name + * @default "" + */ + name?: string; }; } -export class Filename { +export class Filename extends CarbonSvelteBase { $$prop_def: { - status?: "uploading" | "edit" | "complete"; // default: "uploading" - iconDescription?: string; // default: "" - invalid?: boolean; // default: false + /** + * Specify the file name status + * @default "uploading" + */ + status?: "uploading" | "edit" | "complete"; + + /** + * Specify the ARIA label used for the status icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; }; } -export class Form { - $$prop_def: {}; -} - -export class FormGroup { - $$prop_def: { - invalid?: boolean; // default: false +export class Form extends CarbonSvelteBase { + $$slot_def: { + default: {}; }; } -export class FormItem { - $$prop_def: {}; +export class FormGroup extends CarbonSvelteBase { + $$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 FormLabel { +export class FormItem extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class FormLabel extends CarbonSvelteBase { $$prop_def: { + /** + * Set an id to be used by the label element + */ id?: string; }; + + $$slot_def: { + default: {}; + }; } type ColumnSize = boolean | number; @@ -477,165 +1587,572 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; -export class Column { +export class Column extends CarbonSvelteBase { $$prop_def: { - as?: boolean; // default: false - noGutter?: boolean; // default: false - noGutterLeft?: boolean; // default: false - noGutterRight?: boolean; // default: false + /** + * 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"; - sm?: ColumnBreakpoint; + + /** + * + */ + sm?: boolean | number; + + /** + * + */ md?: ColumnBreakpoint; + + /** + * + */ lg?: ColumnBreakpoint; + + /** + * + */ xlg?: ColumnBreakpoint; + + /** + * + */ max?: ColumnBreakpoint; }; -} -export class Grid { - $$prop_def: { - as?: boolean; // default: false - condensed?: boolean; // default: false - narrow?: boolean; // default: false - fullWidth?: boolean; // default: false - noGutter?: boolean; // default: false - noGutterLeft?: boolean; // default: false - noGutterRight?: boolean; // default: false + $$slot_def: { + default: {}; }; } -export class Row { +export class Grid extends CarbonSvelteBase { $$prop_def: { - as?: boolean; // default: false - condensed?: boolean; // default: false - narrow?: boolean; // default: false - noGutter?: boolean; // default: false - noGutterLeft?: boolean; // default: false - noGutterRight?: boolean; // default: false + /** + * 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 IconSkeleton { +export class Row extends CarbonSvelteBase { $$prop_def: { - size?: number; // default: 16 + /** + * 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 Icon { +export class IconSkeleton extends CarbonSvelteBase { $$prop_def: { - render?: CarbonIcon; - skeleton?: boolean; // default: false + /** + * Set the size of the icon + * @default 16 + */ + size?: number; }; } -export class InlineLoading { +export class Icon extends CarbonSvelteBase { $$prop_def: { - status?: "active" | "inactive" | "finished" | "error"; // default: "active" + /** + * 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 InlineLoading extends CarbonSvelteBase { + $$prop_def: { + /** + * Set the loading status + * @default "active" + */ + status?: "active" | "inactive" | "finished" | "error"; + + /** + * Set the loading description + */ description?: string; - iconDescription?: string; // default: "Expand/Collapse" - successDelay?: number; // default: 1500 + + /** + * 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 Link { +export class Link extends CarbonSvelteBase { $$prop_def: { - inline?: boolean; // default: false - disabled?: boolean; // default: false - ref?: null | HTMLAnchorElement | HTMLParagraphElement; // default: null + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + + /** + * Set to `true` to disable the checkbox + * @default false + */ + disabled?: boolean; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLAnchorElement | HTMLParagraphElement; + }; + + $$slot_def: { + default: {}; }; } -export class ListBox { +export class ListBox extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the list box + */ size?: "sm" | "xl"; - type?: "default" | "inline"; // default: "default" - open?: boolean; // default: false - light?: boolean; // default: false - disable?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "" + + /** + * 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 { +export class ListBoxField extends CarbonSvelteBase { $$prop_def: { - disabled?: boolean; // default: false - role?: string; // default: "combobox" - tabindex?: string; // default: "-1" - translateWithId?: (id: ListBoxFieldTranslationId) => string; // default: (id) => string + /** + * Set to `true` to disable the list box field + * @default false + */ + disabled?: boolean; + + /** + * Specify the role attribute + * @default "combobox" + */ + role?: string; + + /** + * Specify the tabindex + * @default "-1" + */ + tabindex?: string; + + /** + * + */ + translationIds?: "close" | "open"; + + /** + * Override the default translation ids + */ + translateWithId?: (id: ListBoxFieldTranslationId) => string; + + /** + * Set an id for the top-level element + */ id?: string; - ref?: null | HTMLElement; // default: null + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + default: {}; }; } -export class ListBoxMenu { +export class ListBoxMenu extends CarbonSvelteBase { $$prop_def: { + /** + * Set an id for the top-level element + */ id?: string; }; + + $$slot_def: { + default: {}; + }; } type ListBoxMenuIconTranslationId = "close" | "open"; -export class ListBoxMenuIcon { +export class ListBoxMenuIcon extends CarbonSvelteBase { $$prop_def: { - open?: boolean; // default: false - translateWithId?: (id: ListBoxMenuIconTranslationId) => string; // default: (id) => string + /** + * Set to `true` to open the list box menu icon + * @default false + */ + open?: boolean; + + /** + * Default translation ids + */ + translationIds?: undefined; + + /** + * + */ + translateWithId?: "close" | "open"; }; } -export class ListBoxMenuItem { +export class ListBoxMenuItem extends CarbonSvelteBase { $$prop_def: { - active?: boolean; // default: false - highlighted?: boolean; // default: false + /** + * 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 { +export class ListBoxSelection extends CarbonSvelteBase { $$prop_def: { + /** + * Specify the number of selected items + */ selectionCount?: any; - disabled?: boolean; // default: false - translateWithId?: (id: ListBoxSelectionTranslationId) => string; // default: (id) => string - ref?: null | HTMLElement; // default: null + + /** + * Set to `true` to disable the list box selection + * @default false + */ + disabled?: boolean; + + /** + * + */ + translationIds?: "clearAll" | "clearSelection"; + + /** + * Override the default translation ids + */ + translateWithId?: (id: ListBoxSelectionTranslationId) => string; + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; }; } -export class ListItem { - $$prop_def: {}; +export class ListItem extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; } -export class Loading { +export class Loading extends CarbonSvelteBase { $$prop_def: { - small?: boolean; // default: false - active?: boolean; // default: true - withOverlay?: boolean; // default: false - description?: string; // default: "Active loading indicator" + /** + * 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 { +export class Modal extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the modal + */ size?: "xs" | "sm" | "lg"; - open?: boolean; // default: false - danger?: boolean; // default: false - passiveModal?: boolean; // default: false + + /** + * Set to `true` to open the modal + * @default false + */ + open?: boolean; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + + /** + * Set to `true` to use the passive variant + * @default false + */ + passiveModal?: boolean; + + /** + * Specify the modal heading + */ modalHeading?: string; + + /** + * Specify the modal label + */ modalLabel?: string; + + /** + * Specify the ARIA label for the modal + */ modalAriaLabel?: string; - iconDescription?: string; // default: "Close the modal" - hasForm?: boolean; // default: false - hasScrollingContent?: boolean; // default: false - primaryButtonText?: string; // default: "" - primaryButtonDisabled?: boolean; // default: false - shouldSubmitOnEnter?: boolean; // default: true - secondaryButtonText?: string; // default: "" - selectorPrimaryFocus?: string; // default: "[data-modal-primary-focus]" + + /** + * Specify the ARIA label for the close icon + * @default "Close the modal" + */ + iconDescription?: string; + + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Set to `true` for the primary button to be triggered when pressing "Enter" + * @default true + */ + shouldSubmitOnEnter?: boolean; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a selector to be focused when opening the modal + * @default "[data-modal-primary-focus]" + */ + selectorPrimaryFocus?: string; + + /** + * Set an id for the top-level element + */ id?: string; - ref?: null | HTMLElement; // default: null + + /** + * Obtain a reference to the top-level HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + label: {}; + heading: {}; + default: {}; }; } @@ -648,453 +2165,1581 @@ interface MultiSelectItem { text: MultiSelectItemText; } -export class MultiSelect { +export class MultiSelect extends CarbonSvelteBase { $$prop_def: { - items?: MultiSelectItem[]; // default: [] - itemToString?: (item: MultiSelectItem) => string; // default: (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId - selectedIds?: MultiSelectItemId[]; // default: [] - value?: string; // default: "" + /** + * Set the multiselect items + */ + items?: MultiSelectItem[]; + + /** + * Override the display of a multiselect item + */ + itemToString?: (item: MultiSelectItem) => string; + + /** + * Set the selected ids + */ + selectedIds?: MultiSelectItemId[]; + + /** + * Specify the multiselect value + * @default "" + */ + value?: string; + + /** + * Set the size of the combobox + */ size?: "sm" | "lg" | "xl"; - type?: "default" | "inline"; // default: "default" - selectionFeedback?: "top" | "fixed" | "top-after-reopen"; // default: "top-after-reopen" - disabled?: boolean; // default: false - filterable?: boolean; // default: false - filterItem?: (item: MultiSelectItem, value: string) => string; // default: (item: MultiSelectItem, value: string) => string - open?: boolean; // default: false - light?: boolean; // default: false - locale?: string; // default: "en" - placeholder?: string; // default: "" - sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; // default: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem + + /** + * 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; - titleText?: string; // default: "" - useTitleInItem?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "" - helperText?: string; // default: "" + + /** + * 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 InlineNotification { +export class InlineNotification extends CarbonSvelteBase { $$prop_def: { - notificationType?: "toast" | "inline"; // default: "toast" + /** + * 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"; // default: "error" - lowContrast?: boolean; // default: false - role?: string; // default: "alert" - title?: string; // default: "Title" - subtitle?: string; // default: "" - hideCloseButton?: boolean; // default: false - iconDescription?: string; // default: "Closes notification" + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; + actions: {}; }; } -export class NotificationActionButton { - $$prop_def: {}; -} - -export class NotificationButton { - $$prop_def: { - notificationType?: "toast" | "inline"; // default: "toast" - renderIcon?: CarbonIcon; - iconDescription?: string; // default: "Close icon" +export class NotificationActionButton extends CarbonSvelteBase { + $$slot_def: { + default: {}; }; } -export class NotificationIcon { +export class NotificationButton extends CarbonSvelteBase { $$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 CarbonSvelteBase { + $$prop_def: { + /** + * Specify the kind of notification icon + * @default "error" + */ kind?: | "error" | "info" | "info-square" | "success" | "warning" - | "warning-alt"; // default: "error" - notificationType?: "toast" | "inline"; // default: "toast" - iconDescription?: string; // default: "Closes notification" + | "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 { +export class NotificationTextDetails extends CarbonSvelteBase { $$prop_def: { - notificationType?: "toast" | "inline"; // default: "toast" - title?: string; // default: "Title" - subtitle?: string; // default: "" - caption?: string; // default: "Caption" + /** + * 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: {}; }; } -export class ToastNotification { +export class ToastNotification extends CarbonSvelteBase { $$prop_def: { - notificationType?: "toast" | "inline"; // default: "toast" + /** + * 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"; // default: "error" - lowContrast?: boolean; // default: false - timeout?: number; // default: 0 - role?: string; // default: "alert" - title?: string; // default: "Title" - subtitle?: string; // default: "" - caption?: string; // default: "Caption" - iconDescription?: string; // default: "Closes notification" - hideCloseButton?: boolean; // default: false + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after closing it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class NumberInputSkeleton { +export class NumberInputSkeleton extends CarbonSvelteBase { $$prop_def: { - hideLabel?: boolean; // default: false + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; }; } type NumberInputTranslationId = "increment" | "decrement"; -export class NumberInput { +export class NumberInput extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the input + */ size?: "sm" | "xl"; - value?: string; // default: "" - step?: number; // default: 1 + + /** + * 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; - light?: boolean; // default: false - readonly?: boolean; // default: false - mobile?: boolean; // default: false - allowEmpty?: boolean; // default: false - disabled?: boolean; // default: false - iconDescription?: string; // default: "" - invalid?: boolean; // default: false - invalidText?: string; // default: "Provide invalidText" - helperText?: string; // default: "" - label?: string; // default: "" - hideLabel?: boolean; // default: false - translateWithId?: (id: NumberInputTranslationId) => string; // default: (id: NumberInputTranslationId) => string + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` for the input to be read-only + * @default false + */ + readonly?: boolean; + + /** + * Set to `true` to enable the mobile variant + * @default false + */ + mobile?: boolean; + + /** + * Set to `true` to allow for an empty value + * @default false + */ + allowEmpty?: boolean; + + /** + * Set to `true` to disable the input + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the increment icons + * @default "" + */ + iconDescription?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Specify the helper text + * @default "" + */ + helperText?: string; + + /** + * Specify the label text + * @default "" + */ + label?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * + */ + translateWithId?: "increment" | "decrement"; + + /** + * Default translation ids + */ + translationIds?: undefined; + + /** + * Set an id for the input element + */ id?: string; + + /** + * Specify a name attribute for the input + */ name?: string; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + label: {}; }; } -export class OrderedList { +export class OrderedList extends CarbonSvelteBase { $$prop_def: { - nested?: boolean; // default: false + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class OverflowMenu { +export class OverflowMenu extends CarbonSvelteBase { $$prop_def: { - direction?: "top" | "bottom"; // default: "bottom" - open?: boolean; // default: false - light?: boolean; // default: false - flipped?: boolean; // default: false + /** + * 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; - icon?: CarbonIcon; + + /** + * Specify the icon from `carbon-icons-svelte` to render + */ + icon?: typeof import("carbon-icons-svelte/lib/Add16").default; + + /** + * Specify the icon class + */ iconClass?: string; - iconDescription?: string; // default: "Open and close list of options" + + /** + * Specify the ARIA label for the icon + * @default "Open and close list of options" + */ + iconDescription?: string; + + /** + * Set an id for the button element + */ + id?: string; + }; + + $$slot_def: { + menu: {}; + default: {}; + }; +} + +export class OverflowMenuItem extends CarbonSvelteBase { + $$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 PaginationSkeleton extends CarbonSvelteBase {} + +export class Pagination extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the current page index + * @default 1 + */ + page?: number; + + /** + * Specify the total number of items + * @default 0 + */ + totalItems?: number; + + /** + * Set to `true` to disable the pagination + * @default false + */ + disabled?: boolean; + + /** + * Specify the forward button text + * @default "Next page" + */ + forwardText?: string; + + /** + * Specify the backward button text + * @default "Previous page" + */ + backwardText?: string; + + /** + * Specify the items per page text + * @default "Items per page:" + */ + itemsPerPageText?: string; + + /** + * Override the item text + */ + itemText?: (min: number, max: number) => string; + + /** + * Override the item range text + */ + itemRangeText?: (min: number, max: number, total: number) => string; + + /** + * Set to `true` to disable the page input + * @default false + */ + pageInputDisabled?: boolean; + + /** + * Specify the number of items to display in a page + * @default 10 + */ + pageSize?: number; + + /** + * Specify the available page sizes + */ + pageSizes?: number[]; + + /** + * Set to `true` if the number of pages is unknown + * @default false + */ + pagesUnknown?: boolean; + + /** + * Override the page text + */ + pageText?: (page: number) => string; + + /** + * Override the page range text + */ + pageRangeText?: (current: number, total: number) => string; + + /** + * Set an id for the top-level element + */ id?: string; }; } -export class OverflowMenuItem { +export class PaginationNav extends CarbonSvelteBase { $$prop_def: { - text?: string; // default: "Provide text" - href?: string; // default: "" - primaryFocus?: boolean; // default: false - disabled?: boolean; // default: false - hasDivider?: boolean; // default: false - danger?: boolean; // default: false - requireTitle?: boolean; // default: false - id?: string; - ref?: null | HTMLAnchorElement | HTMLButtonElement; // default: null + /** + * 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 { - $$prop_def: {}; +export class ProgressIndicatorSkeleton extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + }; } -export class Pagination { +export class ProgressIndicator extends CarbonSvelteBase { $$prop_def: { - page?: number; // default: 1 - total?: number; // default: 0 - disabled?: boolean; // default: false - forwardText?: string; // default: "Next page" - backwardText?: string; // default: "Previous page" - itemsPerPageText?: string; // default: "Items per page:" - itemText?: (min: number, max: number) => string; // default: (min: number, max: number) => string - itemRangeText?: (min: number, max: number, total: number) => string; // default: (min: number, max: number, total: number) => string - pageInputDisabled?: boolean; // default: false - pageSize?: number; // default: 10 - pageSizes?: number[]; // default: [10] - pagesUnknown?: boolean; // default: false - pageText?: (page: number) => string; // default: (current: number) => string - pageRangeText?: (current: number, total: number) => string; // default: (current: number, total: number) => string + /** + * Specify the current step index + * @default 0 + */ + currentIndex?: number; + + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + }; + + $$slot_def: { + default: {}; + }; +} + +export class ProgressStep extends CarbonSvelteBase { + $$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; }; -} -export class PaginationItem { - $$prop_def: { - page?: number; // default: 0 - active?: boolean; // default: false + $$slot_def: { + default: { props: any }; }; } -export class PaginationNav { - $$prop_def: { - page?: number; // default: 0 - total?: number; // default: 10 - shown?: number; // default: 10 - loop?: boolean; // default: false - forwardText?: string; // default: "Next page" - backwardText?: string; // default: "Next page" - }; -} +export class RadioButtonSkeleton extends CarbonSvelteBase {} -export class PaginationOverflow { +export class RadioButton extends CarbonSvelteBase { $$prop_def: { - fromIndex?: number; // default: 0 - count?: number; // default: 0 - }; -} + /** + * Specify the value of the radio button + * @default "" + */ + value?: string; -export class ProgressIndicatorSkeleton { - $$prop_def: {}; -} + /** + * Set to `true` to check the radio button + * @default false + */ + checked?: boolean; -export class ProgressIndicator { - $$prop_def: { - currentIndex?: number; // default: 0 - }; -} + /** + * Set to `true` to disable the radio button + * @default false + */ + disabled?: boolean; -export class ProgressStep { - $$prop_def: { - complete?: boolean; // default: false - current?: boolean; // default: false - disabled?: boolean; // default: false - invalid?: boolean; // default: false - descripton?: string; // default: "" - label?: string; // default: "" - secondaryLabel?: string; // default: "" + /** + * 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; - }; -} -export class RadioButtonSkeleton { - $$prop_def: {}; -} - -export class RadioButton { - $$prop_def: { - value?: string; // default: "" - checked?: boolean; // default: false - disabled?: boolean; // default: false - labelPosition?: "right" | "left"; // default: "right" - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - id?: string; - name?: string; // default: "" - ref?: null | HTMLInputElement; // default: null - }; -} - -export class RadioButtonGroup { - $$prop_def: { - selected?: string; - disabled?: boolean; // default: false - labelPosition?: "right" | "left"; // default: "right" - orientation?: "horizontal" | "vertical"; // default: "horizontal" - }; -} - -export class SearchSkeleton { - $$prop_def: { - small?: boolean; // default: false - }; -} - -export class Search { - $$prop_def: { - small?: boolean; // default: false - size?: "sm" | "lg"; - skeleton?: boolean; // default: false - light?: boolean; // default: false - value?: string; // default: "text" - type?: string; // default: "text" - placeholder?: string; // default: "Search..." - autocomplete?: "on" | "off"; // default: "off" - autofocus?: boolean; // default: false - closeButtonLabelText?: string; // default: "Clear search input" - labelText?: string; // default: "" - id?: string; - ref?: null | HTMLInputElement; // default: null - }; -} - -export class SelectSkeleton { - $$prop_def: { - hideLabel?: boolean; // default: false - }; -} - -export class Select { - $$prop_def: { - selected?: string; - size?: "sm" | "xl"; - inline?: boolean; // default: false - light?: boolean; // default: false - disabled?: boolean; // default: false - id?: string; + /** + * Specify a name attribute for the checkbox input + * @default "" + */ name?: string; - invalid?: boolean; // default: false - invalidText?: string; // default: "" - helperText?: string; // default: "" - noLabel?: boolean; // default: false - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - ref?: null | HTMLSelectElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class SelectItem { - $$prop_def: {}; -} - -export class SelectItemGroup { - $$prop_def: { - disabled?: boolean; // default: false - label?: string; // default: "Provide label" - }; -} - -export class SkeletonPlaceholder { - $$prop_def: {}; -} - -export class SkeletonText { - $$prop_def: { - lines?: number; // default: 3 - heading?: boolean; // default: false - paragraph?: boolean; // default: false - width?: string; // default: "100%" - }; -} - -export class SliderSkeleton { - $$prop_def: { - hideLabel?: boolean; // default: false - }; -} - -export class Slider { - $$prop_def: { - id?: string; - invalid?: boolean; // default: false - labelText?: string; // default: "" - light?: boolean; // default: false - name?: string; // default: "" - ref?: null | HTMLElement; // default: null - }; -} - -export class StructuredListSkeleton { - $$prop_def: { - rows?: number; // default: 5 - border?: boolean; // default: false - }; -} - -export class StructuredList { +export class RadioButtonGroup extends CarbonSvelteBase { $$prop_def: { + /** + * Set the selected radio button value + */ selected?: string; - border?: boolean; // default: false - selection?: boolean; // default: false + + /** + * Set to `true` to disable the radio buttons + * @default false + */ + disabled?: boolean; + + /** + * Specify the label position + * @default "right" + */ + labelPosition?: "right" | "left"; + + /** + * Specify the orientation of the radio buttons + * @default "horizontal" + */ + orientation?: "horizontal" | "vertical"; + }; + + $$slot_def: { + default: {}; }; } -export class StructuredListBody { - $$prop_def: {}; -} - -export class StructuredListCell { +export class SearchSkeleton extends CarbonSvelteBase { $$prop_def: { - head?: boolean; // default: false - noWrap?: boolean; // default: false + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; }; } -export class StructuredListHead { - $$prop_def: {}; -} - -export class StructuredListInput { +export class Search extends CarbonSvelteBase { $$prop_def: { - checked?: boolean; // default: false - title?: string; // default: "title" - value?: string; // default: "value" + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + + /** + * Specify the size of the search input + */ + size?: "sm" | "lg"; + + /** + * Set to `true` to display the skeleton state + * @default false + */ + skeleton?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the value of the search input + * @default "" + */ + value?: string; + + /** + * Specify the `type` attribute of the search input + * @default "text" + */ + type?: string; + + /** + * Specify the `placeholder` attribute of the search input + * @default "Search..." + */ + placeholder?: string; + + /** + * Specify the `autocomplete` attribute + * @default "off" + */ + autocomplete?: "on" | "off"; + + /** + * Set to `true` to auto focus the search element + * @default false + */ + autofocus?: boolean; + + /** + * Specify the close button label text + * @default "Clear search input" + */ + closeButtonLabelText?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ id?: string; - name?: string; // default: "" - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class StructuredListRow { +export class SelectSkeleton extends CarbonSvelteBase { $$prop_def: { - head?: boolean; // default: false - label?: boolean; // default: false - tabindex?: string; // default: "0" + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; }; } -export class Tab { +export class Select extends CarbonSvelteBase { $$prop_def: { - label?: string; // default: "" - href?: string; // default: "#" - disabled?: boolean; // default: false - tabindex?: string; // default: "0" + /** + * 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; - ref?: null | HTMLAnchorElement; // default: null + + /** + * 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 TabContent { +export class SelectItem extends CarbonSvelteBase { $$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 CarbonSvelteBase { + $$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 SkeletonPlaceholder extends CarbonSvelteBase {} + +export class SkeletonText extends CarbonSvelteBase { + $$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 SliderSkeleton extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; +} + +export class Slider extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the value of the slider + * @default "" + */ + value?: string; + + /** + * Set the maximum slider value + * @default 100 + */ + max?: number; + + /** + * Specify the label for the max value + * @default "" + */ + maxLabel?: string; + + /** + * Set the minimum slider value + * @default 0 + */ + min?: number; + + /** + * Specify the label for the min value + * @default "" + */ + minLabel?: string; + + /** + * Set the step value + * @default 1 + */ + step?: number; + + /** + * Set the step multiplier value + * @default 4 + */ + stepMultiplier?: number; + + /** + * Set to `true` to require a value + * @default false + */ + required?: boolean; + + /** + * Specify the input type + * @default "number" + */ + inputType?: string; + + /** + * Set to `true` to disable the slider + * @default false + */ + disabled?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to hide the text input + * @default false + */ + hideTextInput?: boolean; + + /** + * Set an id for the slider div element + */ + id?: string; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set a name for the slider element + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the HTML element + * @default null + */ + ref?: null | HTMLElement; + }; +} + +export class StructuredListSkeleton extends CarbonSvelteBase { + $$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 StructuredList extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class StructuredListCell extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class StructuredListInput extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$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 Tab extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$prop_def: { + /** + * Set an id for the top-level element + */ id?: string; }; -} -export class Tabs { - $$prop_def: { - selected?: number; // default: 0 - type?: "default" | "container"; // default: "default" - iconDescription?: string; // default: "Expand/Collapse" - triggerHref?: string; // default: "#" + $$slot_def: { + default: {}; }; } -export class TabsSkeleton { +export class Tabs extends CarbonSvelteBase { $$prop_def: { - count?: number; // default: 4 + /** + * 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 TagSkeleton { - $$prop_def: {}; +export class TabsSkeleton extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the number of tabs to render + * @default 4 + */ + count?: number; + }; } -export class Tag { +export class TagSkeleton extends CarbonSvelteBase {} + +export class Tag extends CarbonSvelteBase { $$prop_def: { + /** + * Specify the type of tag + */ type?: | "red" | "magenta" @@ -1107,381 +3752,1342 @@ export class Tag { | "cool-gray" | "warm-gray" | "high-contrast"; - filter?: boolean; // default: false - disabled?: boolean; // default: false - skeleton?: boolean; // default: false - title?: string; // default: "Clear filter" + + /** + * 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 TextAreaSkeleton { +export class TextAreaSkeleton extends CarbonSvelteBase { $$prop_def: { - hideLabel?: boolean; // default: false + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; }; } -export class TextArea { +export class TextArea extends CarbonSvelteBase { $$prop_def: { - value?: string; // default: "" - placeholder?: string; // default: "" - cols?: number; // default: 50 - rows?: number; // default: 4 - light?: boolean; // default: false - disabled?: boolean; // default: false - helperText?: string; // default: "" - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "" + /** + * 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; - ref?: null | HTMLTextAreaElement; // default: null + + /** + * Obtain a reference to the textarea HTML element + * @default null + */ + ref?: null | HTMLTextAreaElement; }; } -export class PasswordInput { +export class PasswordInput extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the input + */ size?: "sm" | "xl"; - value?: string; // default: "" - type?: string; // default: "password" - placeholder?: string; // default: "" - hidePasswordLabel?: string; // default: "Hide password" - showPasswordLabel?: string; // default: "Show password" - tooltipAlignment?: "start" | "center" | "end"; // default: "center" - tooltipPosition?: "top" | "right" | "bottom" | "left"; // default: "bottom" - light?: boolean; // default: false - disabled?: boolean; // default: false - helperText?: string; // default: "" - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "" + + /** + * 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; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class TextInputSkeleton { +export class TextInputSkeleton extends CarbonSvelteBase { $$prop_def: { - hideLabel?: boolean; // default: false + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; }; } -export class TextInput { +export class TextInput extends CarbonSvelteBase { $$prop_def: { + /** + * Set the size of the input + */ size?: "sm" | "xl"; - value?: string; // default: "" - type?: string; // default: "" - placeholder?: string; // default: "" - light?: boolean; // default: false - disabled?: boolean; // default: false - helperText?: string; // default: "" + + /** + * 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; - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "" - ref?: null | HTMLInputElement; // default: null + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set to `true` to indicate an invalid state + * @default false + */ + invalid?: boolean; + + /** + * Specify the invalid state text + * @default "" + */ + invalidText?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; }; } -export class ClickableTile { +export class ClickableTile extends CarbonSvelteBase { $$prop_def: { - clicked?: boolean; // default: false - light?: boolean; // default: false + /** + * Set to `true` to click the tile + * @default false + */ + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class ExpandableTile { +export class ExpandableTile extends CarbonSvelteBase { $$prop_def: { - expanded?: boolean; // default: false - light?: boolean; // default: false - tileMaxHeight?: number; // default: 0 - tilePadding?: number; // default: 0 - tileCollapsedIconText?: string; // default: "Interact to expand Tile" - tileExpandedIconText?: string; // default: "Interact to collapse Tile" - tabindex?: string; // default: "0" + /** + * 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; - ref?: null | HTMLElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { + above: {}; + below: {}; }; } -export class RadioTile { +export class RadioTile extends CarbonSvelteBase { $$prop_def: { - checked?: boolean; // default: false - light?: boolean; // default: false - value?: string; // default: "" - tabindex?: string; // default: "0" - iconDescription?: string; // default: "Tile checkmark" + /** + * 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; - name?: string; // default: "" + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + }; + + $$slot_def: { + default: {}; }; } -export class SelectableTile { +export class SelectableTile extends CarbonSvelteBase { $$prop_def: { - selected?: boolean; // default: false - light?: boolean; // default: false - title?: string; // default: "title" - value?: string; // default: "value" - tabindex?: string; // default: "0" - iconDescription?: string; // default: "Tile checkmark" + /** + * 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; - name?: string; // default: "" - ref?: null | HTMLInputElement; // default: null + + /** + * 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 Tile { +export class Tile extends CarbonSvelteBase { $$prop_def: { - light?: boolean; // default: false + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + }; + + $$slot_def: { + default: {}; }; } -export class TileGroup { +export class TileGroup extends CarbonSvelteBase { $$prop_def: { + /** + * Specify the selected tile value + */ selected?: string; - disabled?: boolean; // default: false + + /** + * 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 { +export class TimePicker extends CarbonSvelteBase { $$prop_def: { - value?: string; // default: "" - type?: string; // default: "text" - placeholder?: string; // default: "hh=mm" - pattern?: string; // default: "(1[012]|[1-9]):[0-5][0-9](\\s)?" - maxLength?: number; // default: 5 - light?: boolean; // default: false - disabled?: boolean; // default: false - labelText?: string; // default: "" - hideLabel?: boolean; // default: false - invalid?: boolean; // default: false - invalidText?: string; // default: "Invalid time format." + /** + * 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; - ref?: null | HTMLInputElement; // default: null + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { + default: {}; }; } -export class TimePickerSelect { +export class TimePickerSelect extends CarbonSvelteBase { $$prop_def: { - value?: string; // default: "" - disabled?: boolean; // default: false - iconDescription?: string; // default: "Expand/Collapse" - labelText?: string; // default: "" - hideLabel?: boolean; // default: false + /** + * Specify the select value + * @default "" + */ + value?: string; + + /** + * Set to `true` to disable the select + * @default false + */ + disabled?: boolean; + + /** + * Specify the ARIA label for the chevron icon + * @default "Open list of options" + */ + iconDescription?: string; + + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + + /** + * Set an id for the select element + */ id?: string; + + /** + * Specify a name attribute for the select element + */ name?: string; - ref?: null | HTMLSelectElement; // default: null + + /** + * Obtain a reference to the select HTML element + * @default null + */ + ref?: null | HTMLSelectElement; + }; + + $$slot_def: { + default: {}; }; } -export class ToggleSkeleton { +export class ToggleSkeleton extends CarbonSvelteBase { $$prop_def: { - labelText?: string; // default: "" + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ id?: string; }; } -export class Toggle { +export class Toggle extends CarbonSvelteBase { $$prop_def: { - toggled?: boolean; // default: false - disabled?: boolean; // default: false - labelA?: string; // default: "Off" - labelB?: string; // default: "On" - labelText?: string; // default: "" + /** + * 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 { +export class ToggleSmallSkeleton extends CarbonSvelteBase { $$prop_def: { - labelText?: string; // default: "" + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ id?: string; }; } -export class ToggleSmall { +export class ToggleSmall extends CarbonSvelteBase { $$prop_def: { - toggled?: boolean; // default: false - disabled?: boolean; // default: false - labelA?: string; // default: "Off" - labelB?: string; // default: "On" - labelText?: string; // default: "" + /** + * 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 Tooltip { +export class Tooltip extends CarbonSvelteBase { $$prop_def: { - direction?: "top" | "right" | "bottom" | "left"; // default: "bottom" - open?: boolean; // default: false - hideIcon?: boolean; // default: false - icon?: CarbonIcon; // default: Information16 - iconDescription?: string; // default: "" - iconName?: string; // default: "" - tabindex?: string; // default: "0" + /** + * 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; - triggerText?: string; // default: "" - ref?: null | HTMLElement; // default: null + + /** + * 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 { +export class TooltipDefinition extends CarbonSvelteBase { $$prop_def: { - tooltipText?: string; // default: "" - align?: "start" | "center" | "end"; // default: "center" - direction?: "top" | "bottom"; // default: "bottom" + /** + * 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; - ref?: null | HTMLButtonElement; // default: null + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; }; } -export class TooltipIcon { +export class TooltipIcon extends CarbonSvelteBase { $$prop_def: { - tooltipText?: string; // default: "" - align?: "start" | "center" | "end"; // default: "center" - direction?: "top" | "right" | "bottom" | "left"; // default: "bottom" + /** + * 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; - ref?: null | HTMLButtonElement; // default: null + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + default: {}; }; } -export class Content { +export class Content extends CarbonSvelteBase { $$prop_def: { - id?: string; // default: "main-content" + /** + * Specify the id for the main element + * @default "main-content" + */ + id?: string; + }; + + $$slot_def: { + default: {}; }; } -export class SkipToContent { +export class Header extends CarbonSvelteBase { $$prop_def: { - href?: string; // default: "#main-content" - tabindex?: string; // default: "0" - }; -} + /** + * Set to `false` to hide the side nav by default + * @default true + */ + expandedByDefault?: boolean; -export class UnorderedList { - $$prop_def: { - nested?: boolean; // default: false - }; -} + /** + * Set to `true` to open the side nav + * @default false + */ + isSideNavOpen?: boolean; -export class Header { - $$prop_def: { - isSideNavOpen?: boolean; // default: false + /** + * 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. ...) + */ platformName?: string; }; + + $$slot_def: { + "skip-to-content": {}; + platform: {}; + default: {}; + }; } -export class HeaderAction { +export class HeaderAction extends CarbonSvelteBase { $$prop_def: { - isOpen?: boolean; // default: false - icon?: { render: CarbonIcon; skeleton: boolean }; + /** + * 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; - ref?: null | HTMLButtonElement; // default: null + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { + text: {}; + default: {}; }; } -export class HeaderActionLink { +export class HeaderActionLink extends CarbonSvelteBase { $$prop_def: { - linkIsActive?: boolean; // default: false + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + */ href?: string; - icon?: { render: CarbonIcon; skeleton: boolean }; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; }; } -export class HeaderActionSearch { +export class HeaderActionSearch extends CarbonSvelteBase { $$prop_def: { - searchIsActive?: boolean; // default: false + /** + * Set to `true` to focus the search + * @default false + */ + searchIsActive?: boolean; }; } -export class HeaderNav { +export class HeaderNav extends CarbonSvelteBase { $$prop_def: { + /** + * Specify the ARIA label for the nav + */ ariaLabel?: string; }; + + $$slot_def: { + default: {}; + }; } -export class HeaderNavItem { +export class HeaderNavItem extends CarbonSvelteBase { $$prop_def: { + /** + * Specify the `href` attribute + */ href?: string; + + /** + * Specify the text + */ text?: string; }; } -export class HeaderNavMenu { - $$prop_def: { - expanded?: boolean; // default: false - href?: string; // default: "/" - text?: string; - iconDescription?: string; // default: "Expand/Collapse" - }; -} - -export class HeaderPanelDivider { - $$prop_def: {}; -} - -export class HeaderPanelLink { - $$prop_def: { - href?: string; - }; -} - -export class HeaderPanelLinks { - $$prop_def: {}; -} - -export class HeaderUtilities { - $$prop_def: {}; -} - -export class HamburgerMenu { - $$prop_def: { - ariaLabel?: string; - isOpen?: boolean; // default: false - }; -} - -export class SideNav { - $$prop_def: { - ariaLabel?: string; - isOpen?: boolean; // default: false - }; -} - -export class SideNavItems { - $$prop_def: {}; -} - -export class SideNavLink { - $$prop_def: { - isSelected?: boolean; // default: false - href?: string; - text?: string; - icon?: { render: CarbonIcon; skeleton: boolean }; - }; -} - -export class SideNavMenu { +export class HeaderNavMenu extends CarbonSvelteBase { $$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; - icon?: { render: CarbonIcon; skeleton: boolean }; + + /** + * Specify the ARIA label for the chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { + default: {}; }; } -export class SideNavMenuItem { - $$prop_def: {}; +export class HeaderPanelDivider extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class HeaderPanelLink extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the `href` attribute + */ + href?: string; + }; + + $$slot_def: { + default: {}; + }; +} + +export class HeaderPanelLinks extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class HeaderUtilities extends CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class SideNav extends CarbonSvelteBase { + $$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 CarbonSvelteBase { + $$slot_def: { + default: {}; + }; +} + +export class SideNavLink extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to select the current link + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; + }; +} + +export class SideNavMenu extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; + }; + + $$slot_def: { + default: {}; + }; +} + +export class SideNavMenuItem extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to select the item + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the item text + */ + text?: string; + }; +} + +export class SkipToContent extends CarbonSvelteBase { + $$prop_def: { + /** + * Specify the `href` attribute + * @default "#main-content" + */ + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + }; + + $$slot_def: { + default: {}; + }; +} + +export class UnorderedList extends CarbonSvelteBase { + $$prop_def: { + /** + * Set to `true` to use the nested variant + * @default false + */ + nested?: boolean; + }; + + $$slot_def: { + default: {}; + }; } diff --git a/yarn.lock b/yarn.lock index a641d641..29ff9717 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1546,6 +1546,11 @@ dependencies: defer-to-connect "^1.0.1" +"@tsconfig/svelte@^1.0.8": + version "1.0.8" + resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.8.tgz#3669305544f8ccbc945dc6906e5be2e0770e7389" + integrity sha512-o6vRhB2axVYXuur37VhHeOj7KYrQD5/y51Brsgfy/ymMTP0kGIvnOLcN9IR6NuzkdKJvnNhGYMGJPOh/MHYuZQ== + "@types/anymatch@*": version "1.3.1" resolved "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" @@ -3078,10 +3083,10 @@ capture-stack-trace@^1.0.0: resolved "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw== -carbon-icons-svelte@^10.14.0: - version "10.14.0" - resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.14.0.tgz#a26984db41bb3b04afcabfdbcf481d0387c4763b" - integrity sha512-Ucfy6A0GtvCxBPNCuUaFj7QsxV6hN/R8E8L/RMoytdrkZFD+tkl5pUVOHypcmYYZF7Dumnxr6ePr2bvwyTs5lg== +carbon-icons-svelte@^10.15.0: + version "10.15.0" + resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.15.0.tgz#2e4a7f7e8c71c260239c8210d0506d023efc824f" + integrity sha512-8J9+EHA+r1gp/8upFC8PD/mpreIvC61vkqhkOgxnCVVFixidd8XK8SIaMSlUJeovjImAh2Zj4AB4aMPsl/Xubg== case-sensitive-paths-webpack-plugin@^2.2.0: version "2.3.0" @@ -3405,6 +3410,11 @@ commander@^4.0.1, commander@^4.1.1: resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== +comment-parser@^0.7.5: + version "0.7.5" + resolved "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.5.tgz#06db157a3b34addf8502393743e41897e2c73059" + integrity sha512-iH9YA35ccw94nx5244GVkpyC9eVTsL71jZz6iz5w6RIf79JLF2AsXHXq9p6Oaohyl3sx5qSMnGsWUDFIAfWL4w== + commondir@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" @@ -10057,6 +10067,11 @@ typedarray@^0.0.6: resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^3.9.7: + version "3.9.7" + resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== + uid-number@0.0.6: version "0.0.6" resolved "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81" From 25e437b7460908bc1dcc220d75683df34b7c131a Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 11 Aug 2020 06:21:06 -0700 Subject: [PATCH 2/7] chore: add prettier to format definitions/svelte files --- package.json | 3 +++ scripts/generate-docs.js | 12 +++++++----- src/Checkbox/Checkbox.Story.svelte | 4 ++-- src/CopyButton/CopyButton.Story.svelte | 2 +- src/DataTable/DataTable.Story.svelte | 16 ++++++++-------- src/Dropdown/Dropdown.Story.svelte | 2 +- src/Form/Form.Story.svelte | 2 +- src/MultiSelect/MultiSelect.Story.svelte | 4 ++-- src/StructuredList/StructuredList.svelte | 4 ++-- src/Tile/Tile.Story.svelte | 2 +- yarn.lock | 10 ++++++++++ 11 files changed, 38 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 6a94eb28..57ef5598 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "scripts": { "start": "start-storybook -p 9090", "build": "build-storybook", + "prettier": "prettier --write './**/*.svelte'", "prepack": "rollup -c" }, "sideEffects": false, @@ -29,6 +30,8 @@ "@tsconfig/svelte": "^1.0.8", "babel-loader": "^8.0.6", "comment-parser": "^0.7.5", + "prettier": "^2.0.5", + "prettier-plugin-svelte": "^1.1.0", "rollup": "^2.22.1", "rollup-plugin-svelte": "^5.2.3", "rollup-plugin-terser": "^6.1.0", diff --git a/scripts/generate-docs.js b/scripts/generate-docs.js index 3f667781..23100ffe 100644 --- a/scripts/generate-docs.js +++ b/scripts/generate-docs.js @@ -5,6 +5,7 @@ const svelte = require("rollup-plugin-svelte"); const resolve = require("@rollup/plugin-node-resolve").default; const commonjs = require("@rollup/plugin-commonjs"); const path = require("path"); +const prettier = require("prettier"); const { parseComponent } = require("./parse-component"); async function generateDocs() { @@ -43,10 +44,7 @@ class CarbonSvelteBase { const moduleName = name.replace(/\./g, ""); if (ext === ".svelte" && components.has(moduleName)) { - const group = dir - .split("src/") - .pop() - .split("/")[0]; + const group = dir.split("src/").pop().split("/")[0]; if (groups.has(group)) { groups.set(group, [...groups.get(group), moduleName]); @@ -126,7 +124,11 @@ class CarbonSvelteBase { } } - fs.writeFileSync(pkg.types, definitions); + const formatted_definitions = prettier.format(definitions, { + parser: "typescript", + }); + + fs.writeFileSync(pkg.types, formatted_definitions); } generateDocs(); diff --git a/src/Checkbox/Checkbox.Story.svelte b/src/Checkbox/Checkbox.Story.svelte index 6c795847..aa24e490 100644 --- a/src/Checkbox/Checkbox.Story.svelte +++ b/src/Checkbox/Checkbox.Story.svelte @@ -9,14 +9,14 @@ indeterminate, disabled, hideLabel, - wrapperClassName + wrapperClassName, } = $$props; const checkboxProps = { labelText, indeterminate, disabled, hideLabel, - wrapperClassName + wrapperClassName, }; let checked = true; diff --git a/src/CopyButton/CopyButton.Story.svelte b/src/CopyButton/CopyButton.Story.svelte index f131b5e6..d8035251 100644 --- a/src/CopyButton/CopyButton.Story.svelte +++ b/src/CopyButton/CopyButton.Story.svelte @@ -7,6 +7,6 @@ on:click={() => { console.log('click'); }} - on:animationend={e => { + on:animationend={(e) => { console.log('animation end', e.animationName); }} /> diff --git a/src/DataTable/DataTable.Story.svelte b/src/DataTable/DataTable.Story.svelte index af5f75a7..3427a9a1 100644 --- a/src/DataTable/DataTable.Story.svelte +++ b/src/DataTable/DataTable.Story.svelte @@ -18,7 +18,7 @@ port: 3000, rule: "Round robin", attached_groups: "Kevins VM Groups", - status: "Disabled" + status: "Disabled", }, { id: "b", @@ -27,7 +27,7 @@ port: 443, rule: "Round robin", attached_groups: "Maureens VM Groups", - status: "Starting" + status: "Starting", }, { id: "c", @@ -36,7 +36,7 @@ port: 80, rule: "DNS delegation", attached_groups: "Andrews VM Groups", - status: "Active" + status: "Active", }, { id: "d", @@ -45,7 +45,7 @@ port: 3000, rule: "Round robin", attached_groups: "Marcs VM Groups", - status: "Disabled" + status: "Disabled", }, { id: "e", @@ -54,7 +54,7 @@ port: 443, rule: "Round robin", attached_groups: "Mels VM Groups", - status: "Starting" + status: "Starting", }, { id: "f", @@ -63,8 +63,8 @@ port: 80, rule: "DNS delegation", attached_groups: "Ronjas VM Groups", - status: "Active" - } + status: "Active", + }, ]; const headers = [ { key: "name", value: "Name" }, @@ -72,7 +72,7 @@ { key: "port", value: "Port" }, { key: "rule", value: "Rule" }, { key: "attached_groups", value: "Attached Groups" }, - { key: "status", value: "Status" } + { key: "status", value: "Status" }, ]; $: sortable = true; diff --git a/src/Dropdown/Dropdown.Story.svelte b/src/Dropdown/Dropdown.Story.svelte index cdadcd22..26bcb5c6 100644 --- a/src/Dropdown/Dropdown.Story.svelte +++ b/src/Dropdown/Dropdown.Story.svelte @@ -9,7 +9,7 @@ { id: "option-0", text: "Option 1" }, { id: "option-1", text: "Option 2" }, { id: "option-2", text: "Option 3" }, - { id: "option-3", text: "Option 4" } + { id: "option-3", text: "Option 4" }, ]; $: selectedIndex = -1; diff --git a/src/Form/Form.Story.svelte b/src/Form/Form.Story.svelte index 7bd5b2f3..80617730 100644 --- a/src/Form/Form.Story.svelte +++ b/src/Form/Form.Story.svelte @@ -15,7 +15,7 @@
{ + on:submit={(event) => { console.log('on:submit', event); }}> diff --git a/src/MultiSelect/MultiSelect.Story.svelte b/src/MultiSelect/MultiSelect.Story.svelte index 32fae7b5..bd3d7448 100644 --- a/src/MultiSelect/MultiSelect.Story.svelte +++ b/src/MultiSelect/MultiSelect.Story.svelte @@ -12,8 +12,8 @@ { id: "option-4", text: - "An example option that is really long to show what should be done to handle long text" - } + "An example option that is really long to show what should be done to handle long text", + }, ]; diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte index f579446b..02eba48c 100644 --- a/src/StructuredList/StructuredList.svelte +++ b/src/StructuredList/StructuredList.svelte @@ -25,9 +25,9 @@ setContext("StructuredListWrapper", { selectedValue, - update: value => { + update: (value) => { selectedValue.set(value); - } + }, }); $: selected = $selectedValue; diff --git a/src/Tile/Tile.Story.svelte b/src/Tile/Tile.Story.svelte index bbe99c4b..8230fbca 100644 --- a/src/Tile/Tile.Story.svelte +++ b/src/Tile/Tile.Story.svelte @@ -11,7 +11,7 @@ const radioTiles = [ { value: "standard", id: "tile-1", labelText: "Selectable Tile" }, { value: "default-selected", id: "tile-2", labelText: "Selectable Tile" }, - { value: "selected", id: "tile-3", labelText: "Selectable Tile" } + { value: "selected", id: "tile-3", labelText: "Selectable Tile" }, ]; $: selected = radioTiles[1].value; diff --git a/yarn.lock b/yarn.lock index 29ff9717..9b7c6b5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8039,11 +8039,21 @@ prepend-http@^2.0.0: resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= +prettier-plugin-svelte@^1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304" + integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg== + prettier@^1.16.4: version "1.19.1" resolved "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== +prettier@^2.0.5: + version "2.0.5" + resolved "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4" + integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg== + pretty-error@^2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3" From 010fe986e92bf8696157e354ed39bd83566d209c Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 11 Aug 2020 08:38:07 -0700 Subject: [PATCH 3/7] refactor(types): integrate generate docs in rollup.config.js --- .travis.yml | 1 - package.json | 6 +- rollup.config.js | 26 +- scripts/generate-docs.js | 134 ----- scripts/{ => rollup}/parse-component.js | 13 +- scripts/rollup/plugin-generate-docs.js | 133 +++++ types/index.d.ts | 636 +++++++++--------------- 7 files changed, 386 insertions(+), 563 deletions(-) delete mode 100644 scripts/generate-docs.js rename scripts/{ => rollup}/parse-component.js (88%) create mode 100644 scripts/rollup/plugin-generate-docs.js diff --git a/.travis.yml b/.travis.yml index 96f9cd1f..6d847239 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,5 +4,4 @@ cache: yarn script: - yarn prepack - yarn build - - node scripts/generate-docs.js - cd docs && yarn && yarn test diff --git a/package.json b/package.json index 57ef5598..0504e045 100644 --- a/package.json +++ b/package.json @@ -46,10 +46,10 @@ }, "repository": { "type": "git", - "url": "https://github.com/ibm/carbon-components-svelte.git" + "url": "https://github.com/IBM/carbon-components-svelte.git" }, - "homepage": "https://github.com/ibm/carbon-components-svelte", - "bugs": "https://github.com/ibm/carbon-components-svelte/issues", + "homepage": "https://github.com/IBM/carbon-components-svelte", + "bugs": "https://github.com/IBM/carbon-components-svelte/issues", "keywords": [ "carbon", "carbon components", diff --git a/rollup.config.js b/rollup.config.js index e0ea772d..6a405cab 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -3,24 +3,26 @@ import pkg from "./package.json"; import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import svelte from "rollup-plugin-svelte"; +import generateDocs from "./scripts/rollup/plugin-generate-docs"; export default ["es", "umd"].map((format) => { const UMD = format === "umd"; - const output = { - format, - file: UMD ? pkg.main : pkg.module, - globals: { flatpickr: "flatpickr" }, - }; - - if (UMD) { - output.name = "carbon-components-svelte"; - } - return { input: "src", - output, + output: { + format, + file: UMD ? pkg.main : pkg.module, + name: UMD ? "carbon-components-svelte" : undefined, + globals: { flatpickr: "flatpickr" }, + }, external: Object.keys(pkg.dependencies), - plugins: [svelte(), resolve(), commonjs(), UMD && terser()], + plugins: [ + svelte(), + resolve(), + commonjs(), + UMD && terser(), + !UMD && generateDocs(), + ], }; }); diff --git a/scripts/generate-docs.js b/scripts/generate-docs.js deleted file mode 100644 index 23100ffe..00000000 --- a/scripts/generate-docs.js +++ /dev/null @@ -1,134 +0,0 @@ -const fs = require("fs"); -const rollup = require("rollup"); -const pkg = require("../package.json"); -const svelte = require("rollup-plugin-svelte"); -const resolve = require("@rollup/plugin-node-resolve").default; -const commonjs = require("@rollup/plugin-commonjs"); -const path = require("path"); -const prettier = require("prettier"); -const { parseComponent } = require("./parse-component"); - -async function generateDocs() { - let definitions = ` -// Type definitions for carbon-components-svelte ${pkg.version} -// Project: https://github.com/IBM/carbon-components-svelte - -class CarbonSvelteBase { - $$prop_def: {}; - - $$slot_def: {}; - - // stub all 'on:{event}' directives - $on(eventname: string, handler: (e: Event) => any): () => void; -}\n\n`; - - const shared_types = new Set(); - const groups = new Map(); - const components = new Map(); - const bundle = await rollup.rollup({ - input: "src", - plugins: [svelte(), resolve(), commonjs()], - }); - const { output } = await bundle.generate({ format: "es", file: pkg.module }); - - for (const chunkOrAsset of output) { - if (chunkOrAsset.type !== "asset" && chunkOrAsset.isEntry) { - chunkOrAsset.exports.forEach((exportee) => { - components.set(exportee, {}); - }); - - Object.keys(chunkOrAsset.modules) - .sort() - .forEach(async (filename) => { - const { dir, ext, name } = path.parse(filename); - const moduleName = name.replace(/\./g, ""); - - if (ext === ".svelte" && components.has(moduleName)) { - const group = dir.split("src/").pop().split("/")[0]; - - if (groups.has(group)) { - groups.set(group, [...groups.get(group), moduleName]); - } else { - groups.set(group, [moduleName]); - } - - const source = fs.readFileSync(filename, "utf-8"); - const component = parseComponent(source, { - component: moduleName, - onTypeDef: (tag) => { - if (shared_types.has(tag.name)) return; - - shared_types.add(tag.name); - - const ts_type = tag.type.startsWith("{") - ? `interface ${tag.name} ${tag.type}` - : `type ${tag.name} = ${tag.type};`; - - definitions += ts_type + "\n\n"; - }, - }); - - let $$prop_def = ""; - - component.exported_props.forEach((prop, name) => { - $$prop_def += "/**\n"; - - prop.description.split("\n").forEach((line) => { - $$prop_def += "* " + line + "\n"; - }); - - if (prop.value !== undefined) { - $$prop_def += "* @default " + prop.value + "\n"; - } - - $$prop_def += "*/\n"; - - let value = "undefined"; - - if (prop.type) { - value = prop.type; - } - - $$prop_def += name + "?: " + value + ";" + "\n\n"; - }); - - let $$slot_def = ""; - - component.slots.forEach((slot, slot_name) => { - let value = ""; - - slot.attributes.forEach((attribute) => { - if (attribute.name !== "name") { - value += attribute.name + ": any;"; - } - }); - - if (slot.default) { - $$slot_def += "default: {" + value + "};" + "\n"; - } else { - $$slot_def += - JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; - } - }); - - definitions += ` - export class ${moduleName} extends CarbonSvelteBase { - ${!!$$prop_def ? "$$prop_def: {\n" + $$prop_def + "\n}\n" : ""} - - ${!!$$slot_def ? "$$slot_def: {\n" + $$slot_def + "\n}\n" : ""} - }\n\n`; - - components.set(moduleName, component); - } - }); - } - } - - const formatted_definitions = prettier.format(definitions, { - parser: "typescript", - }); - - fs.writeFileSync(pkg.types, formatted_definitions); -} - -generateDocs(); diff --git a/scripts/parse-component.js b/scripts/rollup/parse-component.js similarity index 88% rename from scripts/parse-component.js rename to scripts/rollup/parse-component.js index 75527b6f..866a5894 100644 --- a/scripts/parse-component.js +++ b/scripts/rollup/parse-component.js @@ -1,7 +1,12 @@ -const { parse, walk } = require("svelte/compiler"); -const commentParser = require("comment-parser"); +import { parse, walk } from "svelte/compiler"; +import commentParser from "comment-parser"; -function parseComponent(source, hooks) { +/** + * Parse Svelte component for metadata using the Svelte compiler + * @param {string} source - raw Svelte component code + * @param {{ component: string; onTypeDef: (tag: { type: "typedef"; tag: string; name: string; }) => void;}} hooks + */ +export function parseComponent(source, hooks) { const exported_props = new Map(); const slots = new Map(); const forwarded_events = new Map(); @@ -111,5 +116,3 @@ function parseComponent(source, hooks) { dispatched_events, }; } - -module.exports = { parseComponent }; diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js new file mode 100644 index 00000000..9475e458 --- /dev/null +++ b/scripts/rollup/plugin-generate-docs.js @@ -0,0 +1,133 @@ +import fs from "fs"; +import path from "path"; +import prettier from "prettier"; +import pkg from "../../package.json"; +import { parseComponent } from "./parse-component"; + +function pluginGenerateDocs() { + let definitions = ` +// Type definitions for ${pkg.name} ${pkg.version} +// Project: ${pkg.homepage} + +class SvelteComponent { + $$prop_def: {}; + + $$slot_def: {}; + + // stub all 'on:{event}' directives + $on(eventname: string, handler: (e: Event) => any): () => void; +}\n\n`; + + const shared_types = new Set(); + const groups = new Map(); + const components = new Map(); + + return { + name: "generate-docs", + async generateBundle(options, bundle) { + for (const filename in bundle) { + const chunkOrAsset = bundle[filename]; + + if (chunkOrAsset.type !== "asset" && chunkOrAsset.isEntry) { + chunkOrAsset.exports.forEach((exportee) => { + components.set(exportee, {}); + }); + + Object.keys(chunkOrAsset.modules) + .sort() + .forEach(async (filename) => { + const { dir, ext, name } = path.parse(filename); + const moduleName = name.replace(/\./g, ""); + + if (ext === ".svelte" && components.has(moduleName)) { + const group = dir.split("src/").pop().split("/")[0]; + + if (groups.has(group)) { + groups.set(group, [...groups.get(group), moduleName]); + } else { + groups.set(group, [moduleName]); + } + + const source = fs.readFileSync(filename, "utf-8"); + const component = parseComponent(source, { + component: moduleName, + onTypeDef: (tag) => { + if (shared_types.has(tag.name)) return; + + shared_types.add(tag.name); + + const ts_type = tag.type.startsWith("{") + ? `interface ${tag.name} ${tag.type}` + : `type ${tag.name} = ${tag.type};`; + + definitions += ts_type + "\n\n"; + }, + }); + + let $$prop_def = ""; + + component.exported_props.forEach((prop, name) => { + $$prop_def += "/**\n"; + + prop.description.split("\n").forEach((line) => { + $$prop_def += "* " + line + "\n"; + }); + + if (prop.value !== undefined) { + $$prop_def += "* @default " + prop.value + "\n"; + } + + $$prop_def += "*/\n"; + + let value = "undefined"; + + if (prop.type) { + value = prop.type; + } + + $$prop_def += name + "?: " + value + ";" + "\n\n"; + }); + + let $$slot_def = ""; + + component.slots.forEach((slot, slot_name) => { + let value = ""; + + slot.attributes.forEach((attribute) => { + if (attribute.name !== "name") { + value += attribute.name + ": any;"; + } + }); + + if (slot.default) { + $$slot_def += "default: {" + value + "};" + "\n"; + } else { + $$slot_def += + JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; + } + }); + + definitions += ` + export class ${moduleName} extends SvelteComponent { + ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} + + ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} + }\n\n`; + + components.set(moduleName, component); + } + }); + } + } + }, + writeBundle() { + const formatted_definitions = prettier.format(definitions, { + parser: "typescript", + }); + + fs.writeFileSync(pkg.types, formatted_definitions); + }, + }; +} + +export default pluginGenerateDocs; diff --git a/types/index.d.ts b/types/index.d.ts index f9b0a889..d26c94e2 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,7 +1,7 @@ // Type definitions for carbon-components-svelte 0.9.4 // Project: https://github.com/IBM/carbon-components-svelte -class CarbonSvelteBase { +class SvelteComponent { $$prop_def: {}; $$slot_def: {}; @@ -10,7 +10,7 @@ class CarbonSvelteBase { $on(eventname: string, handler: (e: Event) => any): () => void; } -export class AccordionSkeleton extends CarbonSvelteBase { +export class AccordionSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the number of accordion items to render @@ -26,7 +26,7 @@ export class AccordionSkeleton extends CarbonSvelteBase { }; } -export class Accordion extends CarbonSvelteBase { +export class Accordion extends SvelteComponent { $$prop_def: { /** * Specify alignment of accordion item chevron icon @@ -41,12 +41,10 @@ export class Accordion extends CarbonSvelteBase { skeleton?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class AccordionItem extends CarbonSvelteBase { +export class AccordionItem extends SvelteComponent { $$prop_def: { /** * Specify the title of the accordion item heading @@ -68,13 +66,10 @@ export class AccordionItem extends CarbonSvelteBase { iconDescription?: string; }; - $$slot_def: { - title: {}; - default: {}; - }; + $$slot_def: { title: {}; default: {} }; } -export class BreadcrumbSkeleton extends CarbonSvelteBase { +export class BreadcrumbSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the breadcrumb trailing slash @@ -90,7 +85,7 @@ export class BreadcrumbSkeleton extends CarbonSvelteBase { }; } -export class Breadcrumb extends CarbonSvelteBase { +export class Breadcrumb extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the breadcrumb trailing slash @@ -105,12 +100,10 @@ export class Breadcrumb extends CarbonSvelteBase { skeleton?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class BreadcrumbItem extends CarbonSvelteBase { +export class BreadcrumbItem extends SvelteComponent { $$prop_def: { /** * Set the `href` to use an anchor link @@ -124,12 +117,10 @@ export class BreadcrumbItem extends CarbonSvelteBase { isCurrentPage?: boolean; }; - $$slot_def: { - default: { props: any }; - }; + $$slot_def: { default: { props: any } }; } -export class ButtonSkeleton extends CarbonSvelteBase { +export class ButtonSkeleton extends SvelteComponent { $$prop_def: { /** * Set the `href` to use an anchor link @@ -144,7 +135,7 @@ export class ButtonSkeleton extends CarbonSvelteBase { }; } -export class Button extends CarbonSvelteBase { +export class Button extends SvelteComponent { $$prop_def: { /** * Specify the kind of button @@ -228,20 +219,16 @@ export class Button extends CarbonSvelteBase { ref?: null | HTMLAnchorElement | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ButtonSet extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class ButtonSet extends SvelteComponent { + $$slot_def: { default: {} }; } -export class CheckboxSkeleton extends CarbonSvelteBase {} +export class CheckboxSkeleton extends SvelteComponent {} -export class Checkbox extends CarbonSvelteBase { +export class Checkbox extends SvelteComponent { $$prop_def: { /** * Specify whether the checkbox is checked @@ -309,7 +296,7 @@ export class Checkbox extends CarbonSvelteBase { }; } -export class CodeSnippetSkeleton extends CarbonSvelteBase { +export class CodeSnippetSkeleton extends SvelteComponent { $$prop_def: { /** * Set the type of code snippet @@ -319,7 +306,7 @@ export class CodeSnippetSkeleton extends CarbonSvelteBase { }; } -export class CodeSnippet extends CarbonSvelteBase { +export class CodeSnippet extends SvelteComponent { $$prop_def: { /** * Set the type of code snippet @@ -411,9 +398,7 @@ export class CodeSnippet extends CarbonSvelteBase { ref?: null | HTMLPreElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } interface ComboBoxItem { @@ -421,7 +406,7 @@ interface ComboBoxItem { text: string; } -export class ComboBox extends CarbonSvelteBase { +export class ComboBox extends SvelteComponent { $$prop_def: { /** * @@ -525,7 +510,7 @@ export class ComboBox extends CarbonSvelteBase { }; } -export class ComposedModal extends CarbonSvelteBase { +export class ComposedModal extends SvelteComponent { $$prop_def: { /** * Set the size of the composed modal @@ -563,12 +548,10 @@ export class ComposedModal extends CarbonSvelteBase { ref?: null | HTMLElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ModalBody extends CarbonSvelteBase { +export class ModalBody extends SvelteComponent { $$prop_def: { /** * Set to `true` if the modal contains form elements @@ -583,12 +566,10 @@ export class ModalBody extends CarbonSvelteBase { hasScrollingContent?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ModalFooter extends CarbonSvelteBase { +export class ModalFooter extends SvelteComponent { $$prop_def: { /** * Specify the primary button text @@ -625,12 +606,10 @@ export class ModalFooter extends CarbonSvelteBase { danger?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ModalHeader extends CarbonSvelteBase { +export class ModalHeader extends SvelteComponent { $$prop_def: { /** * Specify the modal title @@ -675,12 +654,10 @@ export class ModalHeader extends CarbonSvelteBase { iconDescription?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ContentSwitcher extends CarbonSvelteBase { +export class ContentSwitcher extends SvelteComponent { $$prop_def: { /** * Set the selected index of the switch item @@ -695,12 +672,10 @@ export class ContentSwitcher extends CarbonSvelteBase { light?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Switch extends CarbonSvelteBase { +export class Switch extends SvelteComponent { $$prop_def: { /** * Specify the switch text @@ -733,12 +708,10 @@ export class Switch extends CarbonSvelteBase { ref?: null | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Copy extends CarbonSvelteBase { +export class Copy extends SvelteComponent { $$prop_def: { /** * Set the feedback text shown after clicking the button @@ -759,12 +732,10 @@ export class Copy extends CarbonSvelteBase { ref?: null | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class CopyButton extends CarbonSvelteBase { +export class CopyButton extends SvelteComponent { $$prop_def: { /** * Set the title and ARIA label for the copy button @@ -774,7 +745,7 @@ export class CopyButton extends CarbonSvelteBase { }; } -export class DataTable extends CarbonSvelteBase { +export class DataTable extends SvelteComponent { $$prop_def: { /** * Specify the data table headers @@ -823,12 +794,10 @@ export class DataTable extends CarbonSvelteBase { stickyHeader?: boolean; }; - $$slot_def: { - default: { props: any }; - }; + $$slot_def: { default: { props: any } }; } -export class Table extends CarbonSvelteBase { +export class Table extends SvelteComponent { $$prop_def: { /** * Set the size of the table @@ -866,24 +835,18 @@ export class Table extends CarbonSvelteBase { stickyHeader?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TableBody extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class TableBody extends SvelteComponent { + $$slot_def: { default: {} }; } -export class TableCell extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class TableCell extends SvelteComponent { + $$slot_def: { default: {} }; } -export class TableContainer extends CarbonSvelteBase { +export class TableContainer extends SvelteComponent { $$prop_def: { /** * Specify the title of the data table @@ -904,18 +867,14 @@ export class TableContainer extends CarbonSvelteBase { stickyHeader?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TableHead extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class TableHead extends SvelteComponent { + $$slot_def: { default: {} }; } -export class TableHeader extends CarbonSvelteBase { +export class TableHeader extends SvelteComponent { $$prop_def: { /** * Specify the `scope` attribute @@ -934,12 +893,10 @@ export class TableHeader extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TableRow extends CarbonSvelteBase { +export class TableRow extends SvelteComponent { $$prop_def: { /** * Set to `true` to select the row @@ -948,12 +905,10 @@ export class TableRow extends CarbonSvelteBase { isSelected?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class DataTableSkeleton extends CarbonSvelteBase { +export class DataTableSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the number of columns @@ -987,7 +942,7 @@ export class DataTableSkeleton extends CarbonSvelteBase { }; } -export class DatePicker extends CarbonSvelteBase { +export class DatePicker extends SvelteComponent { $$prop_def: { /** * Specify the date picker type @@ -1048,12 +1003,10 @@ export class DatePicker extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class DatePickerInput extends CarbonSvelteBase { +export class DatePickerInput extends SvelteComponent { $$prop_def: { /** * Set the size of the input @@ -1132,7 +1085,7 @@ export class DatePickerInput extends CarbonSvelteBase { }; } -export class DropdownSkeleton extends CarbonSvelteBase { +export class DropdownSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the inline variant @@ -1151,7 +1104,7 @@ interface DropdownItem { text: DropdownItemText; } -export class Dropdown extends CarbonSvelteBase { +export class Dropdown extends SvelteComponent { $$prop_def: { /** * @@ -1255,7 +1208,7 @@ export class Dropdown extends CarbonSvelteBase { }; } -export class FileUploader extends CarbonSvelteBase { +export class FileUploader extends SvelteComponent { $$prop_def: { /** * Specify the file uploader status @@ -1322,7 +1275,7 @@ export class FileUploader extends CarbonSvelteBase { }; } -export class FileUploaderButton extends CarbonSvelteBase { +export class FileUploaderButton extends SvelteComponent { $$prop_def: { /** * Specify the accepted file types @@ -1392,7 +1345,7 @@ export class FileUploaderButton extends CarbonSvelteBase { type Files = string[]; -export class FileUploaderDropContainer extends CarbonSvelteBase { +export class FileUploaderDropContainer extends SvelteComponent { $$prop_def: { /** * @@ -1454,7 +1407,7 @@ export class FileUploaderDropContainer extends CarbonSvelteBase { }; } -export class FileUploaderItem extends CarbonSvelteBase { +export class FileUploaderItem extends SvelteComponent { $$prop_def: { /** * Specify the file uploader status @@ -1499,7 +1452,7 @@ export class FileUploaderItem extends CarbonSvelteBase { }; } -export class Filename extends CarbonSvelteBase { +export class Filename extends SvelteComponent { $$prop_def: { /** * Specify the file name status @@ -1521,13 +1474,11 @@ export class Filename extends CarbonSvelteBase { }; } -export class Form extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class Form extends SvelteComponent { + $$slot_def: { default: {} }; } -export class FormGroup extends CarbonSvelteBase { +export class FormGroup extends SvelteComponent { $$prop_def: { /** * Set to `true` to indicate an invalid state @@ -1554,18 +1505,14 @@ export class FormGroup extends CarbonSvelteBase { legendText?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class FormItem extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class FormItem extends SvelteComponent { + $$slot_def: { default: {} }; } -export class FormLabel extends CarbonSvelteBase { +export class FormLabel extends SvelteComponent { $$prop_def: { /** * Set an id to be used by the label element @@ -1573,9 +1520,7 @@ export class FormLabel extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } type ColumnSize = boolean | number; @@ -1587,7 +1532,7 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; -export class Column extends CarbonSvelteBase { +export class Column extends SvelteComponent { $$prop_def: { /** * Set to `true` to render a custom HTML element @@ -1645,12 +1590,10 @@ export class Column extends CarbonSvelteBase { max?: ColumnBreakpoint; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Grid extends CarbonSvelteBase { +export class Grid extends SvelteComponent { $$prop_def: { /** * Set to `true` to render a custom HTML element @@ -1696,12 +1639,10 @@ export class Grid extends CarbonSvelteBase { noGutterRight?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Row extends CarbonSvelteBase { +export class Row extends SvelteComponent { $$prop_def: { /** * Set to `true` to render a custom HTML element @@ -1741,12 +1682,10 @@ export class Row extends CarbonSvelteBase { noGutterRight?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class IconSkeleton extends CarbonSvelteBase { +export class IconSkeleton extends SvelteComponent { $$prop_def: { /** * Set the size of the icon @@ -1756,7 +1695,7 @@ export class IconSkeleton extends CarbonSvelteBase { }; } -export class Icon extends CarbonSvelteBase { +export class Icon extends SvelteComponent { $$prop_def: { /** * Specify the icon from `carbon-icons-svelte` to render @@ -1772,7 +1711,7 @@ export class Icon extends CarbonSvelteBase { }; } -export class InlineLoading extends CarbonSvelteBase { +export class InlineLoading extends SvelteComponent { $$prop_def: { /** * Set the loading status @@ -1798,7 +1737,7 @@ export class InlineLoading extends CarbonSvelteBase { }; } -export class Link extends CarbonSvelteBase { +export class Link extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the inline variant @@ -1819,12 +1758,10 @@ export class Link extends CarbonSvelteBase { ref?: null | HTMLAnchorElement | HTMLParagraphElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ListBox extends CarbonSvelteBase { +export class ListBox extends SvelteComponent { $$prop_def: { /** * Set the size of the list box @@ -1868,14 +1805,12 @@ export class ListBox extends CarbonSvelteBase { invalidText?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } type ListBoxFieldTranslationId = "close" | "open"; -export class ListBoxField extends CarbonSvelteBase { +export class ListBoxField extends SvelteComponent { $$prop_def: { /** * Set to `true` to disable the list box field @@ -1917,12 +1852,10 @@ export class ListBoxField extends CarbonSvelteBase { ref?: null | HTMLElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ListBoxMenu extends CarbonSvelteBase { +export class ListBoxMenu extends SvelteComponent { $$prop_def: { /** * Set an id for the top-level element @@ -1930,14 +1863,12 @@ export class ListBoxMenu extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } type ListBoxMenuIconTranslationId = "close" | "open"; -export class ListBoxMenuIcon extends CarbonSvelteBase { +export class ListBoxMenuIcon extends SvelteComponent { $$prop_def: { /** * Set to `true` to open the list box menu icon @@ -1957,7 +1888,7 @@ export class ListBoxMenuIcon extends CarbonSvelteBase { }; } -export class ListBoxMenuItem extends CarbonSvelteBase { +export class ListBoxMenuItem extends SvelteComponent { $$prop_def: { /** * Set to `true` to enable the active state @@ -1972,14 +1903,12 @@ export class ListBoxMenuItem extends CarbonSvelteBase { highlighted?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; -export class ListBoxSelection extends CarbonSvelteBase { +export class ListBoxSelection extends SvelteComponent { $$prop_def: { /** * Specify the number of selected items @@ -2010,13 +1939,11 @@ export class ListBoxSelection extends CarbonSvelteBase { }; } -export class ListItem extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class ListItem extends SvelteComponent { + $$slot_def: { default: {} }; } -export class Loading extends CarbonSvelteBase { +export class Loading extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the small variant @@ -2049,7 +1976,7 @@ export class Loading extends CarbonSvelteBase { }; } -export class Modal extends CarbonSvelteBase { +export class Modal extends SvelteComponent { $$prop_def: { /** * Set the size of the modal @@ -2149,11 +2076,7 @@ export class Modal extends CarbonSvelteBase { ref?: null | HTMLElement; }; - $$slot_def: { - label: {}; - heading: {}; - default: {}; - }; + $$slot_def: { label: {}; heading: {}; default: {} }; } type MultiSelectItemId = string; @@ -2165,7 +2088,7 @@ interface MultiSelectItem { text: MultiSelectItemText; } -export class MultiSelect extends CarbonSvelteBase { +export class MultiSelect extends SvelteComponent { $$prop_def: { /** * Set the multiselect items @@ -2306,7 +2229,7 @@ export class MultiSelect extends CarbonSvelteBase { }; } -export class InlineNotification extends CarbonSvelteBase { +export class InlineNotification extends SvelteComponent { $$prop_def: { /** * Set the type of notification @@ -2363,19 +2286,14 @@ export class InlineNotification extends CarbonSvelteBase { iconDescription?: string; }; - $$slot_def: { - default: {}; - actions: {}; - }; + $$slot_def: { default: {}; actions: {} }; } -export class NotificationActionButton extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class NotificationActionButton extends SvelteComponent { + $$slot_def: { default: {} }; } -export class NotificationButton extends CarbonSvelteBase { +export class NotificationButton extends SvelteComponent { $$prop_def: { /** * Set the type of notification @@ -2401,7 +2319,7 @@ export class NotificationButton extends CarbonSvelteBase { }; } -export class NotificationIcon extends CarbonSvelteBase { +export class NotificationIcon extends SvelteComponent { $$prop_def: { /** * Specify the kind of notification icon @@ -2429,7 +2347,7 @@ export class NotificationIcon extends CarbonSvelteBase { }; } -export class NotificationTextDetails extends CarbonSvelteBase { +export class NotificationTextDetails extends SvelteComponent { $$prop_def: { /** * Set the type of notification @@ -2456,12 +2374,10 @@ export class NotificationTextDetails extends CarbonSvelteBase { caption?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ToastNotification extends CarbonSvelteBase { +export class ToastNotification extends SvelteComponent { $$prop_def: { /** * Set the type of notification @@ -2530,12 +2446,10 @@ export class ToastNotification extends CarbonSvelteBase { hideCloseButton?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class NumberInputSkeleton extends CarbonSvelteBase { +export class NumberInputSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the label text @@ -2547,7 +2461,7 @@ export class NumberInputSkeleton extends CarbonSvelteBase { type NumberInputTranslationId = "increment" | "decrement"; -export class NumberInput extends CarbonSvelteBase { +export class NumberInput extends SvelteComponent { $$prop_def: { /** * Set the size of the input @@ -2669,12 +2583,10 @@ export class NumberInput extends CarbonSvelteBase { ref?: null | HTMLInputElement; }; - $$slot_def: { - label: {}; - }; + $$slot_def: { label: {} }; } -export class OrderedList extends CarbonSvelteBase { +export class OrderedList extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the nested variant @@ -2683,12 +2595,10 @@ export class OrderedList extends CarbonSvelteBase { nested?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class OverflowMenu extends CarbonSvelteBase { +export class OverflowMenu extends SvelteComponent { $$prop_def: { /** * Specify the direction of the overflow menu relative to the button @@ -2741,13 +2651,10 @@ export class OverflowMenu extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - menu: {}; - default: {}; - }; + $$slot_def: { menu: {}; default: {} }; } -export class OverflowMenuItem extends CarbonSvelteBase { +export class OverflowMenuItem extends SvelteComponent { $$prop_def: { /** * Specify the item text @@ -2804,14 +2711,12 @@ export class OverflowMenuItem extends CarbonSvelteBase { ref?: null | HTMLAnchorElement | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class PaginationSkeleton extends CarbonSvelteBase {} +export class PaginationSkeleton extends SvelteComponent {} -export class Pagination extends CarbonSvelteBase { +export class Pagination extends SvelteComponent { $$prop_def: { /** * Specify the current page index @@ -2899,7 +2804,7 @@ export class Pagination extends CarbonSvelteBase { }; } -export class PaginationNav extends CarbonSvelteBase { +export class PaginationNav extends SvelteComponent { $$prop_def: { /** * Specify the current page index @@ -2939,7 +2844,7 @@ export class PaginationNav extends CarbonSvelteBase { }; } -export class ProgressIndicatorSkeleton extends CarbonSvelteBase { +export class ProgressIndicatorSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the vertical variant @@ -2949,7 +2854,7 @@ export class ProgressIndicatorSkeleton extends CarbonSvelteBase { }; } -export class ProgressIndicator extends CarbonSvelteBase { +export class ProgressIndicator extends SvelteComponent { $$prop_def: { /** * Specify the current step index @@ -2964,12 +2869,10 @@ export class ProgressIndicator extends CarbonSvelteBase { vertical?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ProgressStep extends CarbonSvelteBase { +export class ProgressStep extends SvelteComponent { $$prop_def: { /** * Set to `true` for the complete variant @@ -3019,14 +2922,12 @@ export class ProgressStep extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: { props: any }; - }; + $$slot_def: { default: { props: any } }; } -export class RadioButtonSkeleton extends CarbonSvelteBase {} +export class RadioButtonSkeleton extends SvelteComponent {} -export class RadioButton extends CarbonSvelteBase { +export class RadioButton extends SvelteComponent { $$prop_def: { /** * Specify the value of the radio button @@ -3083,7 +2984,7 @@ export class RadioButton extends CarbonSvelteBase { }; } -export class RadioButtonGroup extends CarbonSvelteBase { +export class RadioButtonGroup extends SvelteComponent { $$prop_def: { /** * Set the selected radio button value @@ -3109,12 +3010,10 @@ export class RadioButtonGroup extends CarbonSvelteBase { orientation?: "horizontal" | "vertical"; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SearchSkeleton extends CarbonSvelteBase { +export class SearchSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the small variant @@ -3124,7 +3023,7 @@ export class SearchSkeleton extends CarbonSvelteBase { }; } -export class Search extends CarbonSvelteBase { +export class Search extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the small variant @@ -3204,7 +3103,7 @@ export class Search extends CarbonSvelteBase { }; } -export class SelectSkeleton extends CarbonSvelteBase { +export class SelectSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the label text @@ -3214,7 +3113,7 @@ export class SelectSkeleton extends CarbonSvelteBase { }; } -export class Select extends CarbonSvelteBase { +export class Select extends SvelteComponent { $$prop_def: { /** * Specify the selected item value @@ -3297,12 +3196,10 @@ export class Select extends CarbonSvelteBase { ref?: null | HTMLSelectElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SelectItem extends CarbonSvelteBase { +export class SelectItem extends SvelteComponent { $$prop_def: { /** * Specify the option value @@ -3330,7 +3227,7 @@ export class SelectItem extends CarbonSvelteBase { }; } -export class SelectItemGroup extends CarbonSvelteBase { +export class SelectItemGroup extends SvelteComponent { $$prop_def: { /** * Set to `true` to disable the optgroup element @@ -3345,14 +3242,12 @@ export class SelectItemGroup extends CarbonSvelteBase { label?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SkeletonPlaceholder extends CarbonSvelteBase {} +export class SkeletonPlaceholder extends SvelteComponent {} -export class SkeletonText extends CarbonSvelteBase { +export class SkeletonText extends SvelteComponent { $$prop_def: { /** * Specify the number of lines to render @@ -3380,7 +3275,7 @@ export class SkeletonText extends CarbonSvelteBase { }; } -export class SliderSkeleton extends CarbonSvelteBase { +export class SliderSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the label text @@ -3390,7 +3285,7 @@ export class SliderSkeleton extends CarbonSvelteBase { }; } -export class Slider extends CarbonSvelteBase { +export class Slider extends SvelteComponent { $$prop_def: { /** * Specify the value of the slider @@ -3495,7 +3390,7 @@ export class Slider extends CarbonSvelteBase { }; } -export class StructuredListSkeleton extends CarbonSvelteBase { +export class StructuredListSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the number of rows @@ -3511,7 +3406,7 @@ export class StructuredListSkeleton extends CarbonSvelteBase { }; } -export class StructuredList extends CarbonSvelteBase { +export class StructuredList extends SvelteComponent { $$prop_def: { /** * Specify the selected structured list row value @@ -3531,18 +3426,14 @@ export class StructuredList extends CarbonSvelteBase { selection?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class StructuredListBody extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class StructuredListBody extends SvelteComponent { + $$slot_def: { default: {} }; } -export class StructuredListCell extends CarbonSvelteBase { +export class StructuredListCell extends SvelteComponent { $$prop_def: { /** * Set to `true` to use as a header @@ -3557,18 +3448,14 @@ export class StructuredListCell extends CarbonSvelteBase { noWrap?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class StructuredListHead extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class StructuredListHead extends SvelteComponent { + $$slot_def: { default: {} }; } -export class StructuredListInput extends CarbonSvelteBase { +export class StructuredListInput extends SvelteComponent { $$prop_def: { /** * Set to `true` to check the input @@ -3607,7 +3494,7 @@ export class StructuredListInput extends CarbonSvelteBase { }; } -export class StructuredListRow extends CarbonSvelteBase { +export class StructuredListRow extends SvelteComponent { $$prop_def: { /** * Set to `true` to use as a header @@ -3628,12 +3515,10 @@ export class StructuredListRow extends CarbonSvelteBase { tabindex?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Tab extends CarbonSvelteBase { +export class Tab extends SvelteComponent { $$prop_def: { /** * Specify the tab label @@ -3672,12 +3557,10 @@ export class Tab extends CarbonSvelteBase { ref?: null | HTMLAnchorElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TabContent extends CarbonSvelteBase { +export class TabContent extends SvelteComponent { $$prop_def: { /** * Set an id for the top-level element @@ -3685,12 +3568,10 @@ export class TabContent extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Tabs extends CarbonSvelteBase { +export class Tabs extends SvelteComponent { $$prop_def: { /** * Specify the selected tab index @@ -3717,13 +3598,10 @@ export class Tabs extends CarbonSvelteBase { triggerHref?: string; }; - $$slot_def: { - default: {}; - content: {}; - }; + $$slot_def: { default: {}; content: {} }; } -export class TabsSkeleton extends CarbonSvelteBase { +export class TabsSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the number of tabs to render @@ -3733,9 +3611,9 @@ export class TabsSkeleton extends CarbonSvelteBase { }; } -export class TagSkeleton extends CarbonSvelteBase {} +export class TagSkeleton extends SvelteComponent {} -export class Tag extends CarbonSvelteBase { +export class Tag extends SvelteComponent { $$prop_def: { /** * Specify the type of tag @@ -3783,12 +3661,10 @@ export class Tag extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TextAreaSkeleton extends CarbonSvelteBase { +export class TextAreaSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to visually hide the label text @@ -3798,7 +3674,7 @@ export class TextAreaSkeleton extends CarbonSvelteBase { }; } -export class TextArea extends CarbonSvelteBase { +export class TextArea extends SvelteComponent { $$prop_def: { /** * Specify the textarea value @@ -3884,7 +3760,7 @@ export class TextArea extends CarbonSvelteBase { }; } -export class PasswordInput extends CarbonSvelteBase { +export class PasswordInput extends SvelteComponent { $$prop_def: { /** * Set the size of the input @@ -3991,7 +3867,7 @@ export class PasswordInput extends CarbonSvelteBase { }; } -export class TextInputSkeleton extends CarbonSvelteBase { +export class TextInputSkeleton extends SvelteComponent { $$prop_def: { /** * Set to `true` to hide the label text @@ -4001,7 +3877,7 @@ export class TextInputSkeleton extends CarbonSvelteBase { }; } -export class TextInput extends CarbonSvelteBase { +export class TextInput extends SvelteComponent { $$prop_def: { /** * Set the size of the input @@ -4086,7 +3962,7 @@ export class TextInput extends CarbonSvelteBase { }; } -export class ClickableTile extends CarbonSvelteBase { +export class ClickableTile extends SvelteComponent { $$prop_def: { /** * Set to `true` to click the tile @@ -4101,12 +3977,10 @@ export class ClickableTile extends CarbonSvelteBase { light?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ExpandableTile extends CarbonSvelteBase { +export class ExpandableTile extends SvelteComponent { $$prop_def: { /** * Set to `true` to expand the tile @@ -4162,13 +4036,10 @@ export class ExpandableTile extends CarbonSvelteBase { ref?: null | HTMLElement; }; - $$slot_def: { - above: {}; - below: {}; - }; + $$slot_def: { above: {}; below: {} }; } -export class RadioTile extends CarbonSvelteBase { +export class RadioTile extends SvelteComponent { $$prop_def: { /** * Set to `true` to check the tile @@ -4212,12 +4083,10 @@ export class RadioTile extends CarbonSvelteBase { name?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SelectableTile extends CarbonSvelteBase { +export class SelectableTile extends SvelteComponent { $$prop_def: { /** * Set to `true` to select the tile @@ -4273,12 +4142,10 @@ export class SelectableTile extends CarbonSvelteBase { ref?: null | HTMLInputElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Tile extends CarbonSvelteBase { +export class Tile extends SvelteComponent { $$prop_def: { /** * Set to `true` to enable the light variant @@ -4287,12 +4154,10 @@ export class Tile extends CarbonSvelteBase { light?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TileGroup extends CarbonSvelteBase { +export class TileGroup extends SvelteComponent { $$prop_def: { /** * Specify the selected tile value @@ -4312,12 +4177,10 @@ export class TileGroup extends CarbonSvelteBase { legend?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TimePicker extends CarbonSvelteBase { +export class TimePicker extends SvelteComponent { $$prop_def: { /** * Specify the input value @@ -4402,12 +4265,10 @@ export class TimePicker extends CarbonSvelteBase { ref?: null | HTMLInputElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TimePickerSelect extends CarbonSvelteBase { +export class TimePickerSelect extends SvelteComponent { $$prop_def: { /** * Specify the select value @@ -4456,12 +4317,10 @@ export class TimePickerSelect extends CarbonSvelteBase { ref?: null | HTMLSelectElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class ToggleSkeleton extends CarbonSvelteBase { +export class ToggleSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the label text @@ -4476,7 +4335,7 @@ export class ToggleSkeleton extends CarbonSvelteBase { }; } -export class Toggle extends CarbonSvelteBase { +export class Toggle extends SvelteComponent { $$prop_def: { /** * Set to `true` to toggle the checkbox input @@ -4520,7 +4379,7 @@ export class Toggle extends CarbonSvelteBase { }; } -export class ToggleSmallSkeleton extends CarbonSvelteBase { +export class ToggleSmallSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the label text @@ -4535,7 +4394,7 @@ export class ToggleSmallSkeleton extends CarbonSvelteBase { }; } -export class ToggleSmall extends CarbonSvelteBase { +export class ToggleSmall extends SvelteComponent { $$prop_def: { /** * Set to `true` to toggle the checkbox input @@ -4579,7 +4438,7 @@ export class ToggleSmall extends CarbonSvelteBase { }; } -export class Tooltip extends CarbonSvelteBase { +export class Tooltip extends SvelteComponent { $$prop_def: { /** * Set the direction of the tooltip relative to the button @@ -4658,14 +4517,10 @@ export class Tooltip extends CarbonSvelteBase { refIcon?: null | HTMLElement; }; - $$slot_def: { - triggerText: {}; - icon: {}; - default: {}; - }; + $$slot_def: { triggerText: {}; icon: {}; default: {} }; } -export class TooltipDefinition extends CarbonSvelteBase { +export class TooltipDefinition extends SvelteComponent { $$prop_def: { /** * Specify the tooltip text @@ -4697,12 +4552,10 @@ export class TooltipDefinition extends CarbonSvelteBase { ref?: null | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class TooltipIcon extends CarbonSvelteBase { +export class TooltipIcon extends SvelteComponent { $$prop_def: { /** * Specify the tooltip text @@ -4734,12 +4587,10 @@ export class TooltipIcon extends CarbonSvelteBase { ref?: null | HTMLButtonElement; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Content extends CarbonSvelteBase { +export class Content extends SvelteComponent { $$prop_def: { /** * Specify the id for the main element @@ -4748,12 +4599,10 @@ export class Content extends CarbonSvelteBase { id?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class Header extends CarbonSvelteBase { +export class Header extends SvelteComponent { $$prop_def: { /** * Set to `false` to hide the side nav by default @@ -4789,14 +4638,10 @@ export class Header extends CarbonSvelteBase { platformName?: string; }; - $$slot_def: { - "skip-to-content": {}; - platform: {}; - default: {}; - }; + $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; } -export class HeaderAction extends CarbonSvelteBase { +export class HeaderAction extends SvelteComponent { $$prop_def: { /** * Set to `true` to open the panel @@ -4825,13 +4670,10 @@ export class HeaderAction extends CarbonSvelteBase { ref?: null | HTMLButtonElement; }; - $$slot_def: { - text: {}; - default: {}; - }; + $$slot_def: { text: {}; default: {} }; } -export class HeaderActionLink extends CarbonSvelteBase { +export class HeaderActionLink extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the active state @@ -4854,7 +4696,7 @@ export class HeaderActionLink extends CarbonSvelteBase { }; } -export class HeaderActionSearch extends CarbonSvelteBase { +export class HeaderActionSearch extends SvelteComponent { $$prop_def: { /** * Set to `true` to focus the search @@ -4864,7 +4706,7 @@ export class HeaderActionSearch extends CarbonSvelteBase { }; } -export class HeaderNav extends CarbonSvelteBase { +export class HeaderNav extends SvelteComponent { $$prop_def: { /** * Specify the ARIA label for the nav @@ -4872,12 +4714,10 @@ export class HeaderNav extends CarbonSvelteBase { ariaLabel?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class HeaderNavItem extends CarbonSvelteBase { +export class HeaderNavItem extends SvelteComponent { $$prop_def: { /** * Specify the `href` attribute @@ -4891,7 +4731,7 @@ export class HeaderNavItem extends CarbonSvelteBase { }; } -export class HeaderNavMenu extends CarbonSvelteBase { +export class HeaderNavMenu extends SvelteComponent { $$prop_def: { /** * Set to `true` to toggle the expanded state @@ -4917,18 +4757,14 @@ export class HeaderNavMenu extends CarbonSvelteBase { iconDescription?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class HeaderPanelDivider extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class HeaderPanelDivider extends SvelteComponent { + $$slot_def: { default: {} }; } -export class HeaderPanelLink extends CarbonSvelteBase { +export class HeaderPanelLink extends SvelteComponent { $$prop_def: { /** * Specify the `href` attribute @@ -4936,24 +4772,18 @@ export class HeaderPanelLink extends CarbonSvelteBase { href?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class HeaderPanelLinks extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class HeaderPanelLinks extends SvelteComponent { + $$slot_def: { default: {} }; } -export class HeaderUtilities extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class HeaderUtilities extends SvelteComponent { + $$slot_def: { default: {} }; } -export class SideNav extends CarbonSvelteBase { +export class SideNav extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the fixed variant @@ -4973,18 +4803,14 @@ export class SideNav extends CarbonSvelteBase { isOpen?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SideNavItems extends CarbonSvelteBase { - $$slot_def: { - default: {}; - }; +export class SideNavItems extends SvelteComponent { + $$slot_def: { default: {} }; } -export class SideNavLink extends CarbonSvelteBase { +export class SideNavLink extends SvelteComponent { $$prop_def: { /** * Set to `true` to select the current link @@ -5012,7 +4838,7 @@ export class SideNavLink extends CarbonSvelteBase { }; } -export class SideNavMenu extends CarbonSvelteBase { +export class SideNavMenu extends SvelteComponent { $$prop_def: { /** * Set to `true` to toggle the expanded state @@ -5034,12 +4860,10 @@ export class SideNavMenu extends CarbonSvelteBase { }; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class SideNavMenuItem extends CarbonSvelteBase { +export class SideNavMenuItem extends SvelteComponent { $$prop_def: { /** * Set to `true` to select the item @@ -5058,7 +4882,7 @@ export class SideNavMenuItem extends CarbonSvelteBase { }; } -export class SkipToContent extends CarbonSvelteBase { +export class SkipToContent extends SvelteComponent { $$prop_def: { /** * Specify the `href` attribute @@ -5073,12 +4897,10 @@ export class SkipToContent extends CarbonSvelteBase { tabindex?: string; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } -export class UnorderedList extends CarbonSvelteBase { +export class UnorderedList extends SvelteComponent { $$prop_def: { /** * Set to `true` to use the nested variant @@ -5087,7 +4909,5 @@ export class UnorderedList extends CarbonSvelteBase { nested?: boolean; }; - $$slot_def: { - default: {}; - }; + $$slot_def: { default: {} }; } From c8b0b008c74f1b68d59a304cca87be4e584cd8ce Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 11 Aug 2020 19:52:33 -0700 Subject: [PATCH 4/7] refactor(types): separate script to generate types --- scripts/rollup/generate-types.js | 78 + scripts/rollup/plugin-generate-docs.js | 90 +- src/Grid/Column.svelte | 25 +- types/index.d.ts | 2332 ++++++++++++------------ 4 files changed, 1277 insertions(+), 1248 deletions(-) create mode 100644 scripts/rollup/generate-types.js diff --git a/scripts/rollup/generate-types.js b/scripts/rollup/generate-types.js new file mode 100644 index 00000000..3f4f26bd --- /dev/null +++ b/scripts/rollup/generate-types.js @@ -0,0 +1,78 @@ +/** + * Use library component metadata to generate TypeScript definitions. + * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components + * @param {{name: string; version: string; homepage: string;}} pkg + */ +export function generateTypes(components, pkg) { + let code = ` + // Type definitions for ${pkg.name} ${pkg.version} + // Project: ${pkg.homepage} + + class SvelteComponent { + $$prop_def: {}; + + $$slot_def: {}; + + // stub all \`on:{eventname}\` directives + $on(eventname: string, handler: (e: Event) => any): () => void; + }\n\n`; + + components.forEach((component, moduleName) => { + let $$prop_def = ""; + let $$slot_def = ""; + + component.typedefs.forEach(({ name, type }) => { + const typedef = type.startsWith("{") + ? `interface ${name} ${type}` + : `type ${name} = ${type};`; + code += typedef + "\n\n"; + }); + + component.component.exported_props.forEach((prop, name) => { + $$prop_def += "/**\n"; + + prop.description.split("\n").forEach((line) => { + $$prop_def += "* " + line + "\n"; + }); + + if (prop.value !== undefined) { + $$prop_def += "* @default " + prop.value + "\n"; + } + + $$prop_def += "*/\n"; + + let value = "undefined"; + + if (prop.type) { + value = prop.type; + } + + $$prop_def += name + "?: " + value + ";" + "\n\n"; + }); + + component.component.slots.forEach((slot, slot_name) => { + let value = ""; + + slot.attributes.forEach((attribute) => { + if (attribute.name !== "name") { + value += attribute.name + ": any;"; + } + }); + + if (slot.default) { + $$slot_def += "default: {" + value + "};" + "\n"; + } else { + $$slot_def += JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; + } + }); + + code += ` + export class ${moduleName} extends SvelteComponent { + ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} + + ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} + }\n\n`; + }); + + return { code }; +} diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js index 9475e458..cc993df2 100644 --- a/scripts/rollup/plugin-generate-docs.js +++ b/scripts/rollup/plugin-generate-docs.js @@ -1,24 +1,14 @@ import fs from "fs"; import path from "path"; -import prettier from "prettier"; import pkg from "../../package.json"; +import { format } from "prettier"; import { parseComponent } from "./parse-component"; +import { generateTypes } from "./generate-types"; +/** + * Rollup plugin to generate library TypeScript definitions and documentation. + */ function pluginGenerateDocs() { - let definitions = ` -// Type definitions for ${pkg.name} ${pkg.version} -// Project: ${pkg.homepage} - -class SvelteComponent { - $$prop_def: {}; - - $$slot_def: {}; - - // stub all 'on:{event}' directives - $on(eventname: string, handler: (e: Event) => any): () => void; -}\n\n`; - - const shared_types = new Set(); const groups = new Map(); const components = new Map(); @@ -33,6 +23,8 @@ class SvelteComponent { components.set(exportee, {}); }); + const shared_types = new Set(); + Object.keys(chunkOrAsset.modules) .sort() .forEach(async (filename) => { @@ -48,84 +40,28 @@ class SvelteComponent { groups.set(group, [moduleName]); } + const typedefs = []; const source = fs.readFileSync(filename, "utf-8"); const component = parseComponent(source, { component: moduleName, onTypeDef: (tag) => { if (shared_types.has(tag.name)) return; - shared_types.add(tag.name); - - const ts_type = tag.type.startsWith("{") - ? `interface ${tag.name} ${tag.type}` - : `type ${tag.name} = ${tag.type};`; - - definitions += ts_type + "\n\n"; + typedefs.push(tag); }, }); - let $$prop_def = ""; - - component.exported_props.forEach((prop, name) => { - $$prop_def += "/**\n"; - - prop.description.split("\n").forEach((line) => { - $$prop_def += "* " + line + "\n"; - }); - - if (prop.value !== undefined) { - $$prop_def += "* @default " + prop.value + "\n"; - } - - $$prop_def += "*/\n"; - - let value = "undefined"; - - if (prop.type) { - value = prop.type; - } - - $$prop_def += name + "?: " + value + ";" + "\n\n"; - }); - - let $$slot_def = ""; - - component.slots.forEach((slot, slot_name) => { - let value = ""; - - slot.attributes.forEach((attribute) => { - if (attribute.name !== "name") { - value += attribute.name + ": any;"; - } - }); - - if (slot.default) { - $$slot_def += "default: {" + value + "};" + "\n"; - } else { - $$slot_def += - JSON.stringify(slot_name) + ": {" + value + "};" + "\n"; - } - }); - - definitions += ` - export class ${moduleName} extends SvelteComponent { - ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} - - ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} - }\n\n`; - - components.set(moduleName, component); + components.set(moduleName, { typedefs, component }); } }); } } }, writeBundle() { - const formatted_definitions = prettier.format(definitions, { - parser: "typescript", - }); + const { code: types } = generateTypes(components, pkg); + const definitions = format(types, { parser: "typescript" }); - fs.writeFileSync(pkg.types, formatted_definitions); + fs.writeFileSync(pkg.types, definitions); }, }; } diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte index d1fffb87..205a291c 100644 --- a/src/Grid/Column.svelte +++ b/src/Grid/Column.svelte @@ -36,19 +36,34 @@ * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint */ - /** @type {ColumnBreakpoint} [sm] */ + /** + * Set the small breakpoint + * @type {ColumnBreakpoint} [sm] + */ export let sm = undefined; - /** @type {ColumnBreakpoint} [md] */ + /** + * Set the medium breakpoint + * @type {ColumnBreakpoint} [md] + */ export let md = undefined; - /** @type {ColumnBreakpoint} [lg] */ + /** + * Set the large breakpoint + * @type {ColumnBreakpoint} [lg] + */ export let lg = undefined; - /** @type {ColumnBreakpoint} [xlg] */ + /** + * Set the extra large breakpoint + * @type {ColumnBreakpoint} [xlg] + */ export let xlg = undefined; - /** @type {ColumnBreakpoint} [max] */ + /** + * Set the maximum breakpoint + * @type {ColumnBreakpoint} [max] + */ export let max = undefined; /** diff --git a/types/index.d.ts b/types/index.d.ts index d26c94e2..24b5030a 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -6,26 +6,10 @@ class SvelteComponent { $$slot_def: {}; - // stub all 'on:{event}' directives + // stub all `on:{eventname}` directives $on(eventname: string, handler: (e: Event) => any): () => void; } -export class AccordionSkeleton extends SvelteComponent { - $$prop_def: { - /** - * Specify the number of accordion items to render - * @default 4 - */ - count?: number; - - /** - * Set to `false` to close the first accordion item - * @default true - */ - open?: boolean; - }; -} - export class Accordion extends SvelteComponent { $$prop_def: { /** @@ -69,19 +53,19 @@ export class AccordionItem extends SvelteComponent { $$slot_def: { title: {}; default: {} }; } -export class BreadcrumbSkeleton extends SvelteComponent { +export class AccordionSkeleton extends SvelteComponent { $$prop_def: { /** - * Set to `true` to hide the breadcrumb trailing slash - * @default false - */ - noTrailingSlash?: boolean; - - /** - * Specify the number of breadcrumb items to render - * @default 3 + * Specify the number of accordion items to render + * @default 4 */ count?: number; + + /** + * Set to `false` to close the first accordion item + * @default true + */ + open?: boolean; }; } @@ -120,18 +104,19 @@ export class BreadcrumbItem extends SvelteComponent { $$slot_def: { default: { props: any } }; } -export class ButtonSkeleton extends SvelteComponent { +export class BreadcrumbSkeleton extends SvelteComponent { $$prop_def: { /** - * Set the `href` to use an anchor link - */ - href?: string; - - /** - * Set to `true` to use the small variant + * Set to `true` to hide the breadcrumb trailing slash * @default false */ - small?: boolean; + noTrailingSlash?: boolean; + + /** + * Specify the number of breadcrumb items to render + * @default 3 + */ + count?: number; }; } @@ -226,7 +211,20 @@ export class ButtonSet extends SvelteComponent { $$slot_def: { default: {} }; } -export class CheckboxSkeleton extends SvelteComponent {} +export class ButtonSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set the `href` to use an anchor link + */ + href?: string; + + /** + * Set to `true` to use the small variant + * @default false + */ + small?: boolean; + }; +} export class Checkbox extends SvelteComponent { $$prop_def: { @@ -296,14 +294,24 @@ export class Checkbox extends SvelteComponent { }; } -export class CodeSnippetSkeleton extends SvelteComponent { +export class CheckboxSkeleton extends SvelteComponent {} + +export class ClickableTile extends SvelteComponent { $$prop_def: { /** - * Set the type of code snippet - * @default "single" + * Set to `true` to click the tile + * @default false */ - type?: "single" | "inline" | "multi"; + clicked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; }; + + $$slot_def: { default: {} }; } export class CodeSnippet extends SvelteComponent { @@ -401,6 +409,86 @@ export class CodeSnippet extends SvelteComponent { $$slot_def: { default: {} }; } +export class CodeSnippetSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set the type of code snippet + * @default "single" + */ + type?: "single" | "inline" | "multi"; + }; +} + +type ColumnSize = boolean | number; + +interface ColumnSizeDescriptor { + span?: ColumnSize; + offset: number; +} + +type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; + +export class Column extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + + /** + * Specify the aspect ratio of the column + */ + aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; + + /** + * + */ + sm?: boolean | number; + + /** + * Set the medium breakpoint + */ + md?: ColumnBreakpoint; + + /** + * Set the large breakpoint + */ + lg?: ColumnBreakpoint; + + /** + * Set the extra large breakpoint + */ + xlg?: ColumnBreakpoint; + + /** + * Set the maximum breakpoint + */ + max?: ColumnBreakpoint; + }; + + $$slot_def: { default: {} }; +} + interface ComboBoxItem { id: string; text: string; @@ -551,107 +639,13 @@ export class ComposedModal extends SvelteComponent { $$slot_def: { default: {} }; } -export class ModalBody extends SvelteComponent { +export class Content extends SvelteComponent { $$prop_def: { /** - * Set to `true` if the modal contains form elements - * @default false + * Specify the id for the main element + * @default "main-content" */ - hasForm?: boolean; - - /** - * Set to `true` if the modal contains scrolling content - * @default false - */ - hasScrollingContent?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalFooter extends SvelteComponent { - $$prop_def: { - /** - * Specify the primary button text - * @default "" - */ - primaryButtonText?: string; - - /** - * Set to `true` to disable the primary button - * @default false - */ - primaryButtonDisabled?: boolean; - - /** - * Specify a class for the primary button - */ - primaryClass?: string; - - /** - * Specify the secondary button text - * @default "" - */ - secondaryButtonText?: string; - - /** - * Specify a class for the secondary button - */ - secondaryClass?: string; - - /** - * Set to `true` to use the danger variant - * @default false - */ - danger?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class ModalHeader extends SvelteComponent { - $$prop_def: { - /** - * Specify the modal title - * @default "" - */ - title?: string; - - /** - * Specify the modal label - * @default "" - */ - label?: string; - - /** - * Specify the label class - * @default "" - */ - labelClass?: string; - - /** - * Specify the title class - * @default "" - */ - titleClass?: string; - - /** - * Specify the close class - * @default "" - */ - closeClass?: string; - - /** - * Specify the close icon class - * @default "" - */ - closeIconClass?: string; - - /** - * Specify the ARIA label for the close icon - * @default "Close" - */ - iconDescription?: string; + id?: string; }; $$slot_def: { default: {} }; @@ -675,42 +669,6 @@ export class ContentSwitcher extends SvelteComponent { $$slot_def: { default: {} }; } -export class Switch extends SvelteComponent { - $$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 Copy extends SvelteComponent { $$prop_def: { /** @@ -797,117 +755,6 @@ export class DataTable extends SvelteComponent { $$slot_def: { default: { props: any } }; } -export class Table extends SvelteComponent { - $$prop_def: { - /** - * Set the size of the table - */ - size?: "compact" | "short" | "tall"; - - /** - * Set to `true` to use zebra styles - * @default false - */ - zebra?: boolean; - - /** - * Set to `true` to use static width - * @default false - */ - useStaticWidth?: boolean; - - /** - * Set to `true` for the bordered variant - * @default false - */ - shouldShowBorder?: boolean; - - /** - * Set to `true` for the sortable variant - * @default false - */ - sortable?: boolean; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TableBody extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableCell extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableContainer extends SvelteComponent { - $$prop_def: { - /** - * Specify the title of the data table - * @default "" - */ - title?: string; - - /** - * Specify the description of the data table - * @default "" - */ - description?: string; - - /** - * Set to `true` to enable a sticky header - * @default false - */ - stickyHeader?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class TableHead extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class TableHeader extends SvelteComponent { - $$prop_def: { - /** - * Specify the `scope` attribute - * @default "col" - */ - scope?: string; - - /** - * Override the default id translations - */ - translateWithId?: () => string; - - /** - * Set an id for the top-level element - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class TableRow extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the row - * @default false - */ - isSelected?: boolean; - }; - - $$slot_def: { default: {} }; -} - export class DataTableSkeleton extends SvelteComponent { $$prop_def: { /** @@ -1085,16 +932,6 @@ export class DatePickerInput extends SvelteComponent { }; } -export class DropdownSkeleton extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the inline variant - * @default false - */ - inline?: boolean; - }; -} - type DropdownItemId = string; type DropdownItemText = string; @@ -1208,6 +1045,75 @@ export class Dropdown extends SvelteComponent { }; } +export class DropdownSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to use the inline variant + * @default false + */ + inline?: boolean; + }; +} + +export class ExpandableTile extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to expand the tile + * @default false + */ + expanded?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the max height of the tile (number of pixels) + * @default 0 + */ + tileMaxHeight?: number; + + /** + * Specify the padding of the tile (number of pixels) + * @default 0 + */ + tilePadding?: number; + + /** + * Specify the icon text of the collapsed tile + * @default "Interact to expand Tile" + */ + tileCollapsedIconText?: string; + + /** + * Specify the icon text of the expanded tile + * @default "Interact to collapse Tile" + */ + tileExpandedIconText?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Set an id for the top-level div element + */ + id?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLElement; + }; + + $$slot_def: { above: {}; below: {} }; +} + export class FileUploader extends SvelteComponent { $$prop_def: { /** @@ -1523,76 +1429,6 @@ export class FormLabel extends SvelteComponent { $$slot_def: { default: {} }; } -type ColumnSize = boolean | number; - -interface ColumnSizeDescriptor { - span?: ColumnSize; - offset: number; -} - -type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; - -export class Column extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false - */ - as?: boolean; - - /** - * Set to `true` to remove the gutter - * @default false - */ - noGutter?: boolean; - - /** - * Set to `true` to remove the left gutter - * @default false - */ - noGutterLeft?: boolean; - - /** - * Set to `true` to remove the right gutter - * @default false - */ - noGutterRight?: boolean; - - /** - * Specify the aspect ratio of the column - */ - aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; - - /** - * - */ - sm?: boolean | number; - - /** - * - */ - md?: ColumnBreakpoint; - - /** - * - */ - lg?: ColumnBreakpoint; - - /** - * - */ - xlg?: ColumnBreakpoint; - - /** - * - */ - max?: ColumnBreakpoint; - }; - - $$slot_def: { default: {} }; -} - export class Grid extends SvelteComponent { $$prop_def: { /** @@ -1642,59 +1478,187 @@ export class Grid extends SvelteComponent { $$slot_def: { default: {} }; } -export class Row extends SvelteComponent { +export class Header extends SvelteComponent { $$prop_def: { /** - * Set to `true` to render a custom HTML element - * Props are destructured as `props` in the default slot (e.g.
...
) - * @default false + * Set to `false` to hide the side nav by default + * @default true */ - as?: boolean; + expandedByDefault?: boolean; /** - * Set to `true` to use the condensed variant + * Set to `true` to open the side nav * @default false */ - condensed?: boolean; + isSideNavOpen?: boolean; /** - * Set to `true` to use the narrow variant - * @default false + * Specify the ARIA label for the header */ - narrow?: boolean; + uiShellAriaLabel?: string; /** - * Set to `true` to remove the gutter - * @default false + * Specify the `href` attribute */ - noGutter?: boolean; + href?: string; /** - * Set to `true` to remove the left gutter - * @default false + * Specify the company name */ - noGutterLeft?: boolean; + company?: string; /** - * Set to `true` to remove the right gutter + * Specify the platform name + * Alternatively, use the named slot "platform" (e.g. ...) + */ + platformName?: string; + }; + + $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; +} + +export class HeaderAction extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to open the panel * @default false */ - noGutterRight?: boolean; + 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 SvelteComponent { + $$prop_def: { + /** + * Set to `true` to use the active state + * @default false + */ + linkIsActive?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; + }; +} + +export class HeaderActionSearch extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to focus the search + * @default false + */ + searchIsActive?: boolean; + }; +} + +export class HeaderNav extends SvelteComponent { + $$prop_def: { + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; }; $$slot_def: { default: {} }; } -export class IconSkeleton extends SvelteComponent { +export class HeaderNavItem extends SvelteComponent { $$prop_def: { /** - * Set the size of the icon - * @default 16 + * Specify the `href` attribute */ - size?: number; + href?: string; + + /** + * Specify the text + */ + text?: string; }; } +export class HeaderNavMenu extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the `href` attribute + * @default "/" + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the ARIA label for the chevron icon + * @default "Expand/Collapse" + */ + iconDescription?: string; + }; + + $$slot_def: { default: {} }; +} + +export class HeaderPanelDivider extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class HeaderPanelLink extends SvelteComponent { + $$prop_def: { + /** + * Specify the `href` attribute + */ + href?: string; + }; + + $$slot_def: { default: {} }; +} + +export class HeaderPanelLinks extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class HeaderUtilities extends SvelteComponent { + $$slot_def: { default: {} }; +} + export class Icon extends SvelteComponent { $$prop_def: { /** @@ -1711,6 +1675,16 @@ export class Icon extends SvelteComponent { }; } +export class IconSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set the size of the icon + * @default 16 + */ + size?: number; + }; +} + export class InlineLoading extends SvelteComponent { $$prop_def: { /** @@ -1737,6 +1711,66 @@ export class InlineLoading extends SvelteComponent { }; } +export class InlineNotification extends SvelteComponent { + $$prop_def: { + /** + * Set the type of notification + * @default "inline" + */ + notificationType?: "toast" | "inline"; + + /** + * Specify the kind of notification + * @default "error" + */ + kind?: + | "error" + | "info" + | "info-square" + | "success" + | "warning" + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + }; + + $$slot_def: { default: {}; actions: {} }; +} + export class Link extends SvelteComponent { $$prop_def: { /** @@ -2079,6 +2113,112 @@ export class Modal extends SvelteComponent { $$slot_def: { label: {}; heading: {}; default: {} }; } +export class ModalBody extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` if the modal contains form elements + * @default false + */ + hasForm?: boolean; + + /** + * Set to `true` if the modal contains scrolling content + * @default false + */ + hasScrollingContent?: boolean; + }; + + $$slot_def: { default: {} }; +} + +export class ModalFooter extends SvelteComponent { + $$prop_def: { + /** + * Specify the primary button text + * @default "" + */ + primaryButtonText?: string; + + /** + * Set to `true` to disable the primary button + * @default false + */ + primaryButtonDisabled?: boolean; + + /** + * Specify a class for the primary button + */ + primaryClass?: string; + + /** + * Specify the secondary button text + * @default "" + */ + secondaryButtonText?: string; + + /** + * Specify a class for the secondary button + */ + secondaryClass?: string; + + /** + * Set to `true` to use the danger variant + * @default false + */ + danger?: boolean; + }; + + $$slot_def: { default: {} }; +} + +export class ModalHeader extends SvelteComponent { + $$prop_def: { + /** + * Specify the modal title + * @default "" + */ + title?: string; + + /** + * Specify the modal label + * @default "" + */ + label?: string; + + /** + * Specify the label class + * @default "" + */ + labelClass?: string; + + /** + * Specify the title class + * @default "" + */ + titleClass?: string; + + /** + * Specify the close class + * @default "" + */ + closeClass?: string; + + /** + * Specify the close icon class + * @default "" + */ + closeIconClass?: string; + + /** + * Specify the ARIA label for the close icon + * @default "Close" + */ + iconDescription?: string; + }; + + $$slot_def: { default: {} }; +} + type MultiSelectItemId = string; type MultiSelectItemText = string; @@ -2229,66 +2369,6 @@ export class MultiSelect extends SvelteComponent { }; } -export class InlineNotification extends SvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "inline" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {}; actions: {} }; -} - export class NotificationActionButton extends SvelteComponent { $$slot_def: { default: {} }; } @@ -2377,88 +2457,6 @@ export class NotificationTextDetails extends SvelteComponent { $$slot_def: { default: {} }; } -export class ToastNotification extends SvelteComponent { - $$prop_def: { - /** - * Set the type of notification - * @default "toast" - */ - notificationType?: "toast" | "inline"; - - /** - * Specify the kind of notification - * @default "error" - */ - kind?: - | "error" - | "info" - | "info-square" - | "success" - | "warning" - | "warning-alt"; - - /** - * Set to `true` to use the low contrast variant - * @default false - */ - lowContrast?: boolean; - - /** - * Set the timeout duration (ms) to hide the notification after closing it - * @default 0 - */ - timeout?: number; - - /** - * Set the `role` attribute - * @default "alert" - */ - role?: string; - - /** - * Specify the title text - * @default "Title" - */ - title?: string; - - /** - * Specify the subtitle text - * @default "" - */ - subtitle?: string; - - /** - * Specify the caption text - * @default "Caption" - */ - caption?: string; - - /** - * Specify the ARIA label for the icon - * @default "Closes notification" - */ - iconDescription?: string; - - /** - * Set to `true` to hide the close button - * @default false - */ - hideCloseButton?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class NumberInputSkeleton extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} - type NumberInputTranslationId = "increment" | "decrement"; export class NumberInput extends SvelteComponent { @@ -2586,6 +2584,16 @@ export class NumberInput extends SvelteComponent { $$slot_def: { label: {} }; } +export class NumberInputSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; +} + export class OrderedList extends SvelteComponent { $$prop_def: { /** @@ -2714,8 +2722,6 @@ export class OverflowMenuItem extends SvelteComponent { $$slot_def: { default: {} }; } -export class PaginationSkeleton extends SvelteComponent {} - export class Pagination extends SvelteComponent { $$prop_def: { /** @@ -2844,13 +2850,112 @@ export class PaginationNav extends SvelteComponent { }; } -export class ProgressIndicatorSkeleton extends SvelteComponent { +export class PaginationSkeleton extends SvelteComponent {} + +export class PasswordInput extends SvelteComponent { $$prop_def: { /** - * Set to `true` to use the vertical variant + * 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 */ - vertical?: boolean; + 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; }; } @@ -2872,6 +2977,16 @@ export class ProgressIndicator extends SvelteComponent { $$slot_def: { default: {} }; } +export class ProgressIndicatorSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to use the vertical variant + * @default false + */ + vertical?: boolean; + }; +} + export class ProgressStep extends SvelteComponent { $$prop_def: { /** @@ -2925,8 +3040,6 @@ export class ProgressStep extends SvelteComponent { $$slot_def: { default: { props: any } }; } -export class RadioButtonSkeleton extends SvelteComponent {} - export class RadioButton extends SvelteComponent { $$prop_def: { /** @@ -3013,14 +3126,96 @@ export class RadioButtonGroup extends SvelteComponent { $$slot_def: { default: {} }; } -export class SearchSkeleton extends SvelteComponent { +export class RadioButtonSkeleton extends SvelteComponent {} + +export class RadioTile extends SvelteComponent { $$prop_def: { /** - * Set to `true` to use the small variant + * Set to `true` to check the tile * @default false */ - small?: boolean; + checked?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the value of the radio input + * @default "" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the radio tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; }; + + $$slot_def: { default: {} }; +} + +export class Row extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to render a custom HTML element + * Props are destructured as `props` in the default slot (e.g.
...
) + * @default false + */ + as?: boolean; + + /** + * Set to `true` to use the condensed variant + * @default false + */ + condensed?: boolean; + + /** + * Set to `true` to use the narrow variant + * @default false + */ + narrow?: boolean; + + /** + * Set to `true` to remove the gutter + * @default false + */ + noGutter?: boolean; + + /** + * Set to `true` to remove the left gutter + * @default false + */ + noGutterLeft?: boolean; + + /** + * Set to `true` to remove the right gutter + * @default false + */ + noGutterRight?: boolean; + }; + + $$slot_def: { default: {} }; } export class Search extends SvelteComponent { @@ -3103,13 +3298,13 @@ export class Search extends SvelteComponent { }; } -export class SelectSkeleton extends SvelteComponent { +export class SearchSkeleton extends SvelteComponent { $$prop_def: { /** - * Set to `true` to hide the label text + * Set to `true` to use the small variant * @default false */ - hideLabel?: boolean; + small?: boolean; }; } @@ -3245,6 +3440,174 @@ export class SelectItemGroup extends SvelteComponent { $$slot_def: { default: {} }; } +export class SelectSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to hide the label text + * @default false + */ + hideLabel?: boolean; + }; +} + +export class SelectableTile extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to select the tile + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Specify the title of the selectable tile + * @default "title" + */ + title?: string; + + /** + * Specify the value of the selectable tile + * @default "value" + */ + value?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; + + /** + * Specify the ARIA label for the selectable tile checkmark icon + * @default "Tile checkmark" + */ + iconDescription?: string; + + /** + * Set an id for the input element + */ + id?: string; + + /** + * Specify a name attribute for the input + * @default "" + */ + name?: string; + + /** + * Obtain a reference to the input HTML element + * @default null + */ + ref?: null | HTMLInputElement; + }; + + $$slot_def: { default: {} }; +} + +export class SideNav extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to use the fixed variant + * @default false + */ + fixed?: boolean; + + /** + * Specify the ARIA label for the nav + */ + ariaLabel?: string; + + /** + * Set to `true` to toggle the expanded state + * @default false + */ + isOpen?: boolean; + }; + + $$slot_def: { default: {} }; +} + +export class SideNavItems extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class SideNavLink extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to select the current link + * @default false + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; + }; +} + +export class SideNavMenu extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to toggle the expanded state + * @default false + */ + expanded?: boolean; + + /** + * Specify the text + */ + text?: string; + + /** + * Specify the icon props + */ + icon?: { + render: typeof import("carbon-icons-svelte/lib/Add16").default; + skeleton: boolean; + }; + }; + + $$slot_def: { default: {} }; +} + +export class SideNavMenuItem extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to select the item + */ + isSelected?: boolean; + + /** + * Specify the `href` attribute + */ + href?: string; + + /** + * Specify the item text + */ + text?: string; + }; +} + export class SkeletonPlaceholder extends SvelteComponent {} export class SkeletonText extends SvelteComponent { @@ -3275,14 +3638,22 @@ export class SkeletonText extends SvelteComponent { }; } -export class SliderSkeleton extends SvelteComponent { +export class SkipToContent extends SvelteComponent { $$prop_def: { /** - * Set to `true` to hide the label text - * @default false + * Specify the `href` attribute + * @default "#main-content" */ - hideLabel?: boolean; + href?: string; + + /** + * Specify the tabindex + * @default "0" + */ + tabindex?: string; }; + + $$slot_def: { default: {} }; } export class Slider extends SvelteComponent { @@ -3390,19 +3761,13 @@ export class Slider extends SvelteComponent { }; } -export class StructuredListSkeleton extends SvelteComponent { +export class SliderSkeleton extends SvelteComponent { $$prop_def: { /** - * Specify the number of rows - * @default 5 - */ - rows?: number; - - /** - * Set to `true` to use the bordered variant + * Set to `true` to hide the label text * @default false */ - border?: boolean; + hideLabel?: boolean; }; } @@ -3518,6 +3883,58 @@ export class StructuredListRow extends SvelteComponent { $$slot_def: { default: {} }; } +export class StructuredListSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Specify the number of rows + * @default 5 + */ + rows?: number; + + /** + * Set to `true` to use the bordered variant + * @default false + */ + border?: boolean; + }; +} + +export class Switch extends SvelteComponent { + $$prop_def: { + /** + * Specify the switch text + * Alternatively, use the named slot "text" (e.g. ...) + * @default "Provide text" + */ + text?: string; + + /** + * Set to `true` for the switch to be selected + * @default false + */ + selected?: boolean; + + /** + * Set to `true` to disable the switch + * @default false + */ + disabled?: boolean; + + /** + * Set an id for the button element + */ + id?: string; + + /** + * Obtain a reference to the button HTML element + * @default null + */ + ref?: null | HTMLButtonElement; + }; + + $$slot_def: { default: {} }; +} + export class Tab extends SvelteComponent { $$prop_def: { /** @@ -3571,6 +3988,117 @@ export class TabContent extends SvelteComponent { $$slot_def: { default: {} }; } +export class Table extends SvelteComponent { + $$prop_def: { + /** + * Set the size of the table + */ + size?: "compact" | "short" | "tall"; + + /** + * Set to `true` to use zebra styles + * @default false + */ + zebra?: boolean; + + /** + * Set to `true` to use static width + * @default false + */ + useStaticWidth?: boolean; + + /** + * Set to `true` for the bordered variant + * @default false + */ + shouldShowBorder?: boolean; + + /** + * Set to `true` for the sortable variant + * @default false + */ + sortable?: boolean; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { default: {} }; +} + +export class TableBody extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class TableCell extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class TableContainer extends SvelteComponent { + $$prop_def: { + /** + * Specify the title of the data table + * @default "" + */ + title?: string; + + /** + * Specify the description of the data table + * @default "" + */ + description?: string; + + /** + * Set to `true` to enable a sticky header + * @default false + */ + stickyHeader?: boolean; + }; + + $$slot_def: { default: {} }; +} + +export class TableHead extends SvelteComponent { + $$slot_def: { default: {} }; +} + +export class TableHeader extends SvelteComponent { + $$prop_def: { + /** + * Specify the `scope` attribute + * @default "col" + */ + scope?: string; + + /** + * Override the default id translations + */ + translateWithId?: () => string; + + /** + * Set an id for the top-level element + */ + id?: string; + }; + + $$slot_def: { default: {} }; +} + +export class TableRow extends SvelteComponent { + $$prop_def: { + /** + * Set to `true` to select the row + * @default false + */ + isSelected?: boolean; + }; + + $$slot_def: { default: {} }; +} + export class Tabs extends SvelteComponent { $$prop_def: { /** @@ -3611,8 +4139,6 @@ export class TabsSkeleton extends SvelteComponent { }; } -export class TagSkeleton extends SvelteComponent {} - export class Tag extends SvelteComponent { $$prop_def: { /** @@ -3664,15 +4190,7 @@ export class Tag extends SvelteComponent { $$slot_def: { default: {} }; } -export class TextAreaSkeleton extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to visually hide the label text - * @default false - */ - hideLabel?: boolean; - }; -} +export class TagSkeleton extends SvelteComponent {} export class TextArea extends SvelteComponent { $$prop_def: { @@ -3760,120 +4278,13 @@ export class TextArea extends SvelteComponent { }; } -export class PasswordInput extends SvelteComponent { +export class TextAreaSkeleton extends SvelteComponent { $$prop_def: { - /** - * Set the size of the input - */ - size?: "sm" | "xl"; - - /** - * Specify the input value - * @default "" - */ - value?: string; - - /** - * Specify the input type - * @default "password" - */ - type?: string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Specify the hide password label text - * @default "Hide password" - */ - hidePasswordLabel?: string; - - /** - * Specify the show password label text - * @default "Show password" - */ - showPasswordLabel?: string; - - /** - * Set the alignment of the tooltip relative to the icon - */ - tooltipAlignment?: "start" | "center" | "end"; - - /** - * Set the position of the tooltip relative to the icon - */ - tooltipPosition?: "top" | "right" | "bottom" | "left"; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Set to `true` to disable the input - * @default false - */ - disabled?: boolean; - - /** - * Specify the helper text - * @default "" - */ - helperText?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - /** * Set to `true` to visually hide the label text * @default false */ hideLabel?: boolean; - - /** - * Set to `true` to indicate an invalid state - * @default false - */ - invalid?: boolean; - - /** - * Specify the text for the invalid state - * @default "" - */ - invalidText?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; -} - -export class TextInputSkeleton extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to hide the label text - * @default false - */ - hideLabel?: boolean; }; } @@ -3962,187 +4373,14 @@ export class TextInput extends SvelteComponent { }; } -export class ClickableTile extends SvelteComponent { +export class TextInputSkeleton extends SvelteComponent { $$prop_def: { /** - * Set to `true` to click the tile + * Set to `true` to hide the label text * @default false */ - clicked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; + hideLabel?: boolean; }; - - $$slot_def: { default: {} }; -} - -export class ExpandableTile extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to expand the tile - * @default false - */ - expanded?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the max height of the tile (number of pixels) - * @default 0 - */ - tileMaxHeight?: number; - - /** - * Specify the padding of the tile (number of pixels) - * @default 0 - */ - tilePadding?: number; - - /** - * Specify the icon text of the collapsed tile - * @default "Interact to expand Tile" - */ - tileCollapsedIconText?: string; - - /** - * Specify the icon text of the expanded tile - * @default "Interact to collapse Tile" - */ - tileExpandedIconText?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Set an id for the top-level div element - */ - id?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLElement; - }; - - $$slot_def: { above: {}; below: {} }; -} - -export class RadioTile extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to check the tile - * @default false - */ - checked?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the value of the radio input - * @default "" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the radio tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - }; - - $$slot_def: { default: {} }; -} - -export class SelectableTile extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the tile - * @default false - */ - selected?: boolean; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - - /** - * Specify the title of the selectable tile - * @default "title" - */ - title?: string; - - /** - * Specify the value of the selectable tile - * @default "value" - */ - value?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - - /** - * Specify the ARIA label for the selectable tile checkmark icon - * @default "Tile checkmark" - */ - iconDescription?: string; - - /** - * Set an id for the input element - */ - id?: string; - - /** - * Specify a name attribute for the input - * @default "" - */ - name?: string; - - /** - * Obtain a reference to the input HTML element - * @default null - */ - ref?: null | HTMLInputElement; - }; - - $$slot_def: { default: {} }; } export class Tile extends SvelteComponent { @@ -4320,19 +4558,76 @@ export class TimePickerSelect extends SvelteComponent { $$slot_def: { default: {} }; } -export class ToggleSkeleton extends SvelteComponent { +export class ToastNotification extends SvelteComponent { $$prop_def: { /** - * Specify the label text - * @default "" + * Set the type of notification + * @default "toast" */ - labelText?: string; + notificationType?: "toast" | "inline"; /** - * Set an id for the input element + * Specify the kind of notification + * @default "error" */ - id?: string; + kind?: + | "error" + | "info" + | "info-square" + | "success" + | "warning" + | "warning-alt"; + + /** + * Set to `true` to use the low contrast variant + * @default false + */ + lowContrast?: boolean; + + /** + * Set the timeout duration (ms) to hide the notification after closing it + * @default 0 + */ + timeout?: number; + + /** + * Set the `role` attribute + * @default "alert" + */ + role?: string; + + /** + * Specify the title text + * @default "Title" + */ + title?: string; + + /** + * Specify the subtitle text + * @default "" + */ + subtitle?: string; + + /** + * Specify the caption text + * @default "Caption" + */ + caption?: string; + + /** + * Specify the ARIA label for the icon + * @default "Closes notification" + */ + iconDescription?: string; + + /** + * Set to `true` to hide the close button + * @default false + */ + hideCloseButton?: boolean; }; + + $$slot_def: { default: {} }; } export class Toggle extends SvelteComponent { @@ -4379,7 +4674,7 @@ export class Toggle extends SvelteComponent { }; } -export class ToggleSmallSkeleton extends SvelteComponent { +export class ToggleSkeleton extends SvelteComponent { $$prop_def: { /** * Specify the label text @@ -4438,6 +4733,21 @@ export class ToggleSmall extends SvelteComponent { }; } +export class ToggleSmallSkeleton extends SvelteComponent { + $$prop_def: { + /** + * Specify the label text + * @default "" + */ + labelText?: string; + + /** + * Set an id for the input element + */ + id?: string; + }; +} + export class Tooltip extends SvelteComponent { $$prop_def: { /** @@ -4590,316 +4900,6 @@ export class TooltipIcon extends SvelteComponent { $$slot_def: { default: {} }; } -export class Content extends SvelteComponent { - $$prop_def: { - /** - * Specify the id for the main element - * @default "main-content" - */ - id?: string; - }; - - $$slot_def: { default: {} }; -} - -export class Header extends SvelteComponent { - $$prop_def: { - /** - * Set to `false` to hide the side nav by default - * @default true - */ - expandedByDefault?: boolean; - - /** - * Set to `true` to open the side nav - * @default false - */ - isSideNavOpen?: boolean; - - /** - * Specify the ARIA label for the header - */ - uiShellAriaLabel?: string; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the company name - */ - company?: string; - - /** - * Specify the platform name - * Alternatively, use the named slot "platform" (e.g. ...) - */ - platformName?: string; - }; - - $$slot_def: { "skip-to-content": {}; platform: {}; default: {} }; -} - -export class HeaderAction extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to open the panel - * @default false - */ - isOpen?: boolean; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - - /** - * Specify the text - * Alternatively, use the named slot "text" (e.g.
...
) - */ - text?: string; - - /** - * Obtain a reference to the button HTML element - * @default null - */ - ref?: null | HTMLButtonElement; - }; - - $$slot_def: { text: {}; default: {} }; -} - -export class HeaderActionLink extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the active state - * @default false - */ - linkIsActive?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - }; -} - -export class HeaderActionSearch extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to focus the search - * @default false - */ - searchIsActive?: boolean; - }; -} - -export class HeaderNav extends SvelteComponent { - $$prop_def: { - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderNavItem extends SvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - }; -} - -export class HeaderNavMenu extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the `href` attribute - * @default "/" - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the ARIA label for the chevron icon - * @default "Expand/Collapse" - */ - iconDescription?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelDivider extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderPanelLink extends SvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - */ - href?: string; - }; - - $$slot_def: { default: {} }; -} - -export class HeaderPanelLinks extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class HeaderUtilities extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class SideNav extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to use the fixed variant - * @default false - */ - fixed?: boolean; - - /** - * Specify the ARIA label for the nav - */ - ariaLabel?: string; - - /** - * Set to `true` to toggle the expanded state - * @default false - */ - isOpen?: boolean; - }; - - $$slot_def: { default: {} }; -} - -export class SideNavItems extends SvelteComponent { - $$slot_def: { default: {} }; -} - -export class SideNavLink extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the current link - * @default false - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - }; -} - -export class SideNavMenu extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to toggle the expanded state - * @default false - */ - expanded?: boolean; - - /** - * Specify the text - */ - text?: string; - - /** - * Specify the icon props - */ - icon?: { - render: typeof import("carbon-icons-svelte/lib/Add16").default; - skeleton: boolean; - }; - }; - - $$slot_def: { default: {} }; -} - -export class SideNavMenuItem extends SvelteComponent { - $$prop_def: { - /** - * Set to `true` to select the item - */ - isSelected?: boolean; - - /** - * Specify the `href` attribute - */ - href?: string; - - /** - * Specify the item text - */ - text?: string; - }; -} - -export class SkipToContent extends SvelteComponent { - $$prop_def: { - /** - * Specify the `href` attribute - * @default "#main-content" - */ - href?: string; - - /** - * Specify the tabindex - * @default "0" - */ - tabindex?: string; - }; - - $$slot_def: { default: {} }; -} - export class UnorderedList extends SvelteComponent { $$prop_def: { /** From 5968e22bd9307c63c312174ae5abed4dfb2dda26 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 13 Aug 2020 17:24:00 -0700 Subject: [PATCH 5/7] build: add script to generate component index - move typedefs for correct type parsing --- COMPONENT_INDEX.md | 5167 +++++++++++++++++ scripts/rollup/generate-index.js | 110 + scripts/rollup/generate-types.js | 8 +- scripts/rollup/parse-component.js | 28 +- scripts/rollup/plugin-generate-docs.js | 9 +- src/ComboBox/ComboBox.svelte | 8 +- src/Dropdown/Dropdown.svelte | 12 +- .../FileUploaderDropContainer.svelte | 8 +- src/Grid/Column.svelte | 12 +- src/ListBox/ListBoxField.svelte | 8 +- src/ListBox/ListBoxMenuIcon.svelte | 8 +- src/ListBox/ListBoxSelection.svelte | 8 +- src/NumberInput/NumberInput.svelte | 8 +- types/index.d.ts | 331 +- 14 files changed, 5518 insertions(+), 207 deletions(-) create mode 100644 COMPONENT_INDEX.md create mode 100644 scripts/rollup/generate-index.js diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md new file mode 100644 index 00000000..c6a6e6db --- /dev/null +++ b/COMPONENT_INDEX.md @@ -0,0 +1,5167 @@ +# Component Index + +> 143 components exported from carbon-components-svelte 0.9.4 + +- Accordion + - [AccordionSkeleton](#accordionskeleton) + - [Accordion](#accordion) + - [AccordionItem](#accordionitem) +- Breadcrumb + - [BreadcrumbSkeleton](#breadcrumbskeleton) + - [Breadcrumb](#breadcrumb) + - [BreadcrumbItem](#breadcrumbitem) +- Button + - [ButtonSkeleton](#buttonskeleton) + - [Button](#button) + - [ButtonSet](#buttonset) +- Checkbox + - [CheckboxSkeleton](#checkboxskeleton) + - [Checkbox](#checkbox) +- CodeSnippet + - [CodeSnippetSkeleton](#codesnippetskeleton) + - [CodeSnippet](#codesnippet) +- [ComboBox](#combobox) +- ComposedModal + - [ComposedModal](#composedmodal) + - [ModalBody](#modalbody) + - [ModalFooter](#modalfooter) + - [ModalHeader](#modalheader) +- ContentSwitcher + - [ContentSwitcher](#contentswitcher) + - [Switch](#switch) +- [Copy](#copy) +- [CopyButton](#copybutton) +- DataTable + - [DataTable](#datatable) + - [Table](#table) + - [TableBody](#tablebody) + - [TableCell](#tablecell) + - [TableContainer](#tablecontainer) + - [TableHead](#tablehead) + - [TableHeader](#tableheader) + - [TableRow](#tablerow) +- [DataTableSkeleton](#datatableskeleton) +- DatePicker + - [DatePicker](#datepicker) + - [DatePickerInput](#datepickerinput) +- Dropdown + - [DropdownSkeleton](#dropdownskeleton) + - [Dropdown](#dropdown) +- FileUploader + - [FileUploader](#fileuploader) + - [FileUploaderButton](#fileuploaderbutton) + - [FileUploaderDropContainer](#fileuploaderdropcontainer) + - [FileUploaderItem](#fileuploaderitem) + - [Filename](#filename) +- [Form](#form) +- [FormGroup](#formgroup) +- [FormItem](#formitem) +- [FormLabel](#formlabel) +- Grid + - [Column](#column) + - [Grid](#grid) + - [Row](#row) +- Icon + - [IconSkeleton](#iconskeleton) + - [Icon](#icon) +- [InlineLoading](#inlineloading) +- [Link](#link) +- ListBox + - [ListBox](#listbox) + - [ListBoxField](#listboxfield) + - [ListBoxMenu](#listboxmenu) + - [ListBoxMenuIcon](#listboxmenuicon) + - [ListBoxMenuItem](#listboxmenuitem) + - [ListBoxSelection](#listboxselection) +- [ListItem](#listitem) +- [Loading](#loading) +- [Modal](#modal) +- [MultiSelect](#multiselect) +- Notification + - [InlineNotification](#inlinenotification) + - [NotificationActionButton](#notificationactionbutton) + - [NotificationButton](#notificationbutton) + - [NotificationIcon](#notificationicon) + - [NotificationTextDetails](#notificationtextdetails) + - [ToastNotification](#toastnotification) +- NumberInput + - [NumberInputSkeleton](#numberinputskeleton) + - [NumberInput](#numberinput) +- [OrderedList](#orderedlist) +- OverflowMenu + - [OverflowMenu](#overflowmenu) + - [OverflowMenuItem](#overflowmenuitem) +- Pagination + - [PaginationSkeleton](#paginationskeleton) + - [Pagination](#pagination) +- [PaginationNav](#paginationnav) +- ProgressIndicator + - [ProgressIndicatorSkeleton](#progressindicatorskeleton) + - [ProgressIndicator](#progressindicator) + - [ProgressStep](#progressstep) +- RadioButton + - [RadioButtonSkeleton](#radiobuttonskeleton) + - [RadioButton](#radiobutton) +- [RadioButtonGroup](#radiobuttongroup) +- Search + - [SearchSkeleton](#searchskeleton) + - [Search](#search) +- Select + - [SelectSkeleton](#selectskeleton) + - [Select](#select) + - [SelectItem](#selectitem) + - [SelectItemGroup](#selectitemgroup) +- [SkeletonPlaceholder](#skeletonplaceholder) +- [SkeletonText](#skeletontext) +- Slider + - [SliderSkeleton](#sliderskeleton) + - [Slider](#slider) +- StructuredList + - [StructuredListSkeleton](#structuredlistskeleton) + - [StructuredList](#structuredlist) + - [StructuredListBody](#structuredlistbody) + - [StructuredListCell](#structuredlistcell) + - [StructuredListHead](#structuredlisthead) + - [StructuredListInput](#structuredlistinput) + - [StructuredListRow](#structuredlistrow) +- Tabs + - [Tab](#tab) + - [TabContent](#tabcontent) + - [Tabs](#tabs) + - [TabsSkeleton](#tabsskeleton) +- Tag + - [TagSkeleton](#tagskeleton) + - [Tag](#tag) +- TextArea + - [TextAreaSkeleton](#textareaskeleton) + - [TextArea](#textarea) +- TextInput + - [PasswordInput](#passwordinput) + - [TextInputSkeleton](#textinputskeleton) + - [TextInput](#textinput) +- Tile + - [ClickableTile](#clickabletile) + - [ExpandableTile](#expandabletile) + - [RadioTile](#radiotile) + - [SelectableTile](#selectabletile) + - [Tile](#tile) + - [TileGroup](#tilegroup) +- TimePicker + - [TimePicker](#timepicker) + - [TimePickerSelect](#timepickerselect) +- Toggle + - [ToggleSkeleton](#toggleskeleton) + - [Toggle](#toggle) +- ToggleSmall + - [ToggleSmallSkeleton](#togglesmallskeleton) + - [ToggleSmall](#togglesmall) +- [Tooltip](#tooltip) +- [TooltipDefinition](#tooltipdefinition) +- [TooltipIcon](#tooltipicon) +- UIShell + - [Content](#content) + - [Header](#header) + - [HeaderAction](#headeraction) + - [HeaderActionLink](#headeractionlink) + - [HeaderActionSearch](#headeractionsearch) + - [HeaderNav](#headernav) + - [HeaderNavItem](#headernavitem) + - [HeaderNavMenu](#headernavmenu) + - [HeaderPanelDivider](#headerpaneldivider) + - [HeaderPanelLink](#headerpanellink) + - [HeaderPanelLinks](#headerpanellinks) + - [HeaderUtilities](#headerutilities) + - [SideNav](#sidenav) + - [SideNavItems](#sidenavitems) + - [SideNavLink](#sidenavlink) + - [SideNavMenu](#sidenavmenu) + - [SideNavMenuItem](#sidenavmenuitem) + - [SkipToContent](#skiptocontent) +- [UnorderedList](#unorderedlist) + +--- + +## Accordion + +### Import path + +```js +import { Accordion } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :-------------------------------- | :------------ | +| align | "start" | "end" | "end" | +| skeleton | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## AccordionItem + +### Import path + +```js +import { AccordionItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------- | :---------------- | +| title | string | "title" | +| open | boolean | false | +| iconDescription | string | "Expand/Collapse" | + +### Slots + +- `...` + +### Forwarded events + +- `on:animationend` +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## AccordionSkeleton + +### Import path + +```js +import { AccordionSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| count | number | 4 | +| open | boolean | true | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Breadcrumb + +### Import path + +```js +import { Breadcrumb } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------- | :------------ | +| noTrailingSlash | boolean | false | +| skeleton | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## BreadcrumbItem + +### Import path + +```js +import { BreadcrumbItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :------------------- | :------------ | +| href | string | -- | +| isCurrentPage | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## BreadcrumbSkeleton + +### Import path + +```js +import { BreadcrumbSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------- | :------------ | +| noTrailingSlash | boolean | false | +| count | number | 3 | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Button + +### Import path + +```js +import { Button } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| size | "default" | "field" | "small" | "default" | +| hasIconOnly | boolean | false | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | +| iconDescription | string | -- | +| tooltipAlignment | "start" | "center" | "end" | -- | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | +| as | boolean | false | +| skeleton | boolean | false | +| disabled | boolean | false | +| href | string | -- | +| tabindex | string | "0" | +| type | string | "button" | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ButtonSet + +### Import path + +```js +import { ButtonSet } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ButtonSkeleton + +### Import path + +```js +import { ButtonSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| href | string | -- | +| small | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Checkbox + +### Import path + +```js +import { Checkbox } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :---------------------------------------- | :------------ | +| checked | boolean | false | +| indeterminate | boolean | false | +| skeleton | boolean | false | +| readonly | boolean | false | +| disabled | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| name | string | "" | +| title | string | -- | +| id | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` + +### Dispatched events + +- `on:check` + +--- + +## CheckboxSkeleton + +### Import path + +```js +import { CheckboxSkeleton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ClickableTile + +### Import path + +```js +import { ClickableTile } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| clicked | boolean | false | +| light | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:keydown` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## CodeSnippet + +### Import path + +```js +import { CodeSnippet } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------------- | :--------------------------------------------------- | :------------ | +| type | "single" | "inline" | "multi" | "single" | +| code | string | -- | +| expanded | boolean | false | +| hideCopyButton | boolean | false | +| light | boolean | false | +| skeleton | boolean | false | +| copyButtonDescription | string | -- | +| copyLabel | string | -- | +| feedback | string | "Copied!" | +| feedbackTimeout | number | 2000 | +| showLessText | string | "Show less" | +| showMoreText | string | "Show more" | +| showMoreLess | boolean | false | +| id | string | -- | +| ref | null | HTMLPreElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:animationend` + +### Dispatched events + +No dispatched events. + +--- + +## CodeSnippetSkeleton + +### Import path + +```js +import { CodeSnippetSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :--------------------------------------------------- | :------------ | +| type | "single" | "inline" | "multi" | "single" | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Column + +### Import path + +```js +import { Column } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `Column` type definitions + +type ColumnSize = boolean | number; + +interface ColumnSizeDescriptor { + span?: ColumnSize; + offset: number; +} + +type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; +``` + +| Prop name | Type | Default value | +| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | +| as | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | +| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | +| sm | ColumnBreakpoint | -- | +| md | ColumnBreakpoint | -- | +| lg | ColumnBreakpoint | -- | +| xlg | ColumnBreakpoint | -- | +| max | ColumnBreakpoint | -- | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ComboBox + +### Import path + +```js +import { ComboBox } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `ComboBox` type definitions + +interface ComboBoxItem { + id: string; + text: string; +} +``` + +| Prop name | Type | Default value | +| :--------------- | :---------------------------------------------------------- | :------------ | +| items | ComboBoxItem[] | -- | +| itemToString | (item: ComboBoxItem) => string | -- | +| selectedIndex | number | -- | +| value | string | "" | +| size | "sm" | "xl" | -- | +| disabled | boolean | false | +| titleText | string | "" | +| placeholder | string | "" | +| helperText | string | "" | +| invalidText | string | "" | +| invalid | boolean | false | +| light | boolean | false | +| open | boolean | false | +| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | +| translateWithId | (id: any) => string | -- | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:keydown` +- `on:focus` +- `on:blur` +- `on:clear` + +### Dispatched events + +- `on:select` + +--- + +## ComposedModal + +### Import path + +```js +import { ComposedModal } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------------- | :---------------------------------------- | :--------------------------- | +| size | "xs" | "sm" | "lg" | -- | +| open | boolean | false | +| danger | boolean | false | +| containerClass | string | "" | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | +| ref | null | HTMLElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:transitionend` + +### Dispatched events + +- `on:submit` +- `on:close` +- `on:open` + +--- + +## Content + +### Import path + +```js +import { Content } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------- | +| id | string | "main-content" | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ContentSwitcher + +### Import path + +```js +import { ContentSwitcher } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :------------------- | :------------ | +| selectedIndex | number | 0 | +| light | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## Copy + +### Import path + +```js +import { Copy } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :----------------------------------------- | :------------ | +| feedback | string | "Copied!" | +| feedbackTimeout | number | 2000 | +| ref | null | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:animationend` + +### Dispatched events + +No dispatched events. + +--- + +## CopyButton + +### Import path + +```js +import { CopyButton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------ | :------------------ | +| iconDescription | string | "Copy to clipboard" | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:animationend` + +### Dispatched events + +No dispatched events. + +--- + +## DataTable + +### Import path + +```js +import { DataTable } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :-------------------------------------------------- | :------------ | +| headers | {key: string; value: string;} | -- | +| rows | Object[] | -- | +| size | "compact" | "short" | "tall" | -- | +| title | string | "" | +| description | string | "" | +| zebra | boolean | false | +| sortable | boolean | false | +| stickyHeader | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:click` +- `on:click:header` +- `on:click:row` +- `on:click:cell` + +--- + +## DataTableSkeleton + +### Import path + +```js +import { DataTableSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :-------------------- | :------------ | +| columns | number | 5 | +| rows | number | 5 | +| compact | boolean | false | +| zebra | boolean | false | +| headers | string[] | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## DatePicker + +### Import path + +```js +import { DatePicker } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------- | :--------------------------------------------------- | :------------ | +| datePickerType | "simple" | "single" | "range" | "simple" | +| value | string | "" | +| appendTo | HTMLElement | -- | +| dateFormat | string | "m/d/Y" | +| maxDate | null | string | Date | null | +| minDate | null | string | Date | null | +| locale | string | "en" | +| short | boolean | false | +| light | boolean | false | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## DatePickerInput + +### Import path + +```js +import { DatePickerInput } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :---------------------------------------- | :----------------------------- | +| size | "sm" | "xl" | -- | +| type | string | "text" | +| placeholder | string | "" | +| pattern | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | +| disabled | boolean | false | +| iconDescription | string | "" | +| id | string | -- | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| name | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:input` +- `on:keydown` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## Dropdown + +### Import path + +```js +import { Dropdown } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `Dropdown` type definitions + +type DropdownItemId = string; + +type DropdownItemText = string; + +interface DropdownItem { + id: DropdownItemId; + text: DropdownItemText; +} +``` + +| Prop name | Type | Default value | +| :-------------- | :------------------------------------------ | :------------ | +| items | DropdownItem[] | -- | +| itemToString | (item: DropdownItem) => string | -- | +| selectedIndex | number | -- | +| type | "default" | "inline" | "default" | +| size | "sm" | "lg" | "xl" | -- | +| open | boolean | false | +| inline | boolean | false | +| light | boolean | false | +| disabled | boolean | false | +| titleText | string | "" | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | -- | +| translateWithId | (id: any) => string | -- | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLButtonElement | null | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## DropdownSkeleton + +### Import path + +```js +import { DropdownSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| inline | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ExpandableTile + +### Import path + +```js +import { ExpandableTile } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------------- | :----------------------------------- | :-------------------------- | +| expanded | boolean | false | +| light | boolean | false | +| tileMaxHeight | number | 0 | +| tilePadding | number | 0 | +| tileCollapsedIconText | string | "Interact to expand Tile" | +| tileExpandedIconText | string | "Interact to collapse Tile" | +| tabindex | string | "0" | +| id | string | -- | +| ref | null | HTMLElement | null | + +### Slots + +- `...` +- `...` + +### Forwarded events + +- `on:click` +- `on:keypress` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## FileUploader + +### Import path + +```js +import { FileUploader } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- | +| status | "uploading" | "edit" | "complete" | "uploading" | +| accept | string[] | -- | +| files | string[] | -- | +| multiple | boolean | false | +| clearFiles (`constant`) | () => any | -- | +| labelDescription | string | "" | +| labelTitle | string | "" | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| buttonLabel | string | "" | +| iconDescription | string | "Provide icon description" | +| name | string | "" | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:keydown` + +### Dispatched events + +- `on:add` +- `on:remove` + +--- + +## FileUploaderButton + +### Import path + +```js +import { FileUploaderButton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | +| accept | string[] | -- | +| multiple | boolean | false | +| disabled | boolean | false | +| disableLabelChanges | boolean | false | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| labelText | string | "Add file" | +| role | string | "button" | +| tabindex | string | "0" | +| id | string | -- | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:keydown` +- `on:change` +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## FileUploaderDropContainer + +### Import path + +```js +import { FileUploaderDropContainer } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `FileUploaderDropContainer` type definitions + +type Files = string[]; +``` + +| Prop name | Type | Default value | +| :------------ | :---------------------------------------- | :------------ | +| accept | string[] | -- | +| multiple | boolean | false | +| validateFiles | (files: Files) => Files | -- | +| labelText | string | "Add file" | +| role | string | "button" | +| disabled | boolean | false | +| tabindex | string | "0" | +| id | string | -- | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:dragover` +- `on:dragleave` +- `on:drop` +- `on:keydown` +- `on:change` +- `on:click` + +### Dispatched events + +- `on:add` + +--- + +## FileUploaderItem + +### Import path + +```js +import { FileUploaderItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------------------------------------------- | :------------ | +| status | "uploading" | "edit" | "complete" | "uploading" | +| iconDescription | string | "" | +| invalid | boolean | false | +| errorSubject | string | "" | +| errorBody | string | "" | +| id | string | -- | +| name | string | "" | + +### Slots + +No slots. + +### Forwarded events + +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:delete` + +--- + +## Filename + +### Import path + +```js +import { Filename } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------------------------------------------- | :------------ | +| status | "uploading" | "edit" | "complete" | "uploading" | +| iconDescription | string | "" | +| invalid | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## Form + +### Import path + +```js +import { Form } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:submit` + +### Dispatched events + +No dispatched events. + +--- + +## FormGroup + +### Import path + +```js +import { FormGroup } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------- | :------------ | +| invalid | boolean | false | +| message | boolean | false | +| messageText | string | "" | +| legendText | string | "" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## FormItem + +### Import path + +```js +import { FormItem } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## FormLabel + +### Import path + +```js +import { FormLabel } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Grid + +### Import path + +```js +import { Grid } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :------------------- | :------------ | +| as | boolean | false | +| condensed | boolean | false | +| narrow | boolean | false | +| fullWidth | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## Header + +### Import path + +```js +import { Header } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------------- | :------------------- | :------------ | +| expandedByDefault | boolean | true | +| isSideNavOpen | boolean | false | +| uiShellAriaLabel | string | -- | +| href | string | -- | +| company | string | -- | +| platformName | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## HeaderAction + +### Import path + +```js +import { HeaderAction } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | +| isOpen | boolean | false | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | +| text | string | -- | +| ref | null | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` + +### Dispatched events + +- `on:close` + +--- + +## HeaderActionLink + +### Import path + +```js +import { HeaderActionLink } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | +| linkIsActive | boolean | false | +| href | string | -- | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## HeaderActionSearch + +### Import path + +```js +import { HeaderActionSearch } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------- | :------------------- | :------------ | +| searchIsActive | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:focusInputSearch` +- `on:focusOutInputSearch` +- `on:inputSearch` + +--- + +## HeaderNav + +### Import path + +```js +import { HeaderNav } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| ariaLabel | string | -- | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## HeaderNavItem + +### Import path + +```js +import { HeaderNavItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| href | string | -- | +| text | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keyup` +- `on:keydown` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## HeaderNavMenu + +### Import path + +```js +import { HeaderNavMenu } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------- | :---------------- | +| expanded | boolean | false | +| href | string | "/" | +| text | string | -- | +| iconDescription | string | "Expand/Collapse" | + +### Slots + +- `...` + +### Forwarded events + +- `on:keydown` +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keyup` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## HeaderPanelDivider + +### Import path + +```js +import { HeaderPanelDivider } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## HeaderPanelLink + +### Import path + +```js +import { HeaderPanelLink } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| href | string | -- | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## HeaderPanelLinks + +### Import path + +```js +import { HeaderPanelLinks } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## HeaderUtilities + +### Import path + +```js +import { HeaderUtilities } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## Icon + +### Import path + +```js +import { Icon } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------------------------------------------------------ | :------------ | +| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | +| skeleton | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## IconSkeleton + +### Import path + +```js +import { IconSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| size | number | 16 | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## InlineLoading + +### Import path + +```js +import { InlineLoading } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :----------------------------------------------------------------------- | :------------ | +| status | "active" | "inactive" | "finished" | "error" | "active" | +| description | string | -- | +| iconDescription | string | -- | +| successDelay | number | 1500 | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:success` + +--- + +## InlineNotification + +### Import path + +```js +import { InlineNotification } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| notificationType | "toast" | "inline" | "inline" | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| lowContrast | boolean | false | +| role | string | "alert" | +| title | string | "Title" | +| subtitle | string | "" | +| hideCloseButton | boolean | false | +| iconDescription | string | "Closes notification" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:close` + +--- + +## Link + +### Import path + +```js +import { Link } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :--------------------------------------------------------------------- | :------------ | +| inline | boolean | false | +| disabled | boolean | false | +| ref | null | HTMLAnchorElement | HTMLParagraphElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ListBox + +### Import path + +```js +import { ListBox } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------------------------- | :------------ | +| size | "sm" | "xl" | -- | +| type | "default" | "inline" | "default" | +| open | boolean | false | +| light | boolean | false | +| disabled | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | + +### Slots + +- `...` + +### Forwarded events + +- `on:keydown` +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## ListBoxField + +### Import path + +```js +import { ListBoxField } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `ListBoxField` type definitions + +type ListBoxFieldTranslationId = "close" | "open"; +``` + +| Prop name | Type | Default value | +| :-------------------------- | :----------------------------------------------------- | :------------------------------- | +| disabled | boolean | false | +| role | string | "combobox" | +| tabindex | string | "-1" | +| translationIds (`constant`) | { close: "close"; open: "open"; } | { close: "close", open: "open" } | +| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | +| id | string | -- | +| ref | null | HTMLElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## ListBoxMenu + +### Import path + +```js +import { ListBoxMenu } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ListBoxMenuIcon + +### Import path + +```js +import { ListBoxMenuIcon } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `ListBoxMenuIcon` type definitions + +type ListBoxMenuIconTranslationId = "close" | "open"; +``` + +| Prop name | Type | Default value | +| :-------------------------- | :-------------------------------------------------------- | :------------------------------- | +| open | boolean | false | +| translationIds (`constant`) | { close: "close"; open: "open" } | { close: "close", open: "open" } | +| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## ListBoxMenuItem + +### Import path + +```js +import { ListBoxMenuItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------- | :------------ | +| active | boolean | false | +| highlighted | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ListBoxSelection + +### Import path + +```js +import { ListBoxSelection } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `ListBoxSelection` type definitions + +type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; +``` + +| Prop name | Type | Default value | +| :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- | +| selectionCount | any | -- | +| disabled | boolean | false | +| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | { clearAll: "clearAll", clearSelection: "clearSelection", } | +| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | +| ref | null | HTMLElement | null | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:clear` + +--- + +## ListItem + +### Import path + +```js +import { ListItem } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Loading + +### Import path + +```js +import { Loading } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------- | :------------------------- | +| small | boolean | false | +| active | boolean | true | +| withOverlay | boolean | true | +| description | string | "Active loading indicator" | +| id | string | -- | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## Modal + +### Import path + +```js +import { Modal } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------------- | :---------------------------------------- | :--------------------------- | +| size | "xs" | "sm" | "lg" | -- | +| open | boolean | false | +| danger | boolean | false | +| passiveModal | boolean | false | +| modalHeading | string | -- | +| modalLabel | string | -- | +| modalAriaLabel | string | -- | +| iconDescription | string | "Close the modal" | +| hasForm | boolean | false | +| hasScrollingContent | boolean | false | +| primaryButtonText | string | "" | +| primaryButtonDisabled | boolean | false | +| shouldSubmitOnEnter | boolean | true | +| secondaryButtonText | string | "" | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | +| id | string | -- | +| ref | null | HTMLElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:keydown` +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:submit` +- `on:click:button--secondary` +- `on:close` +- `on:open` + +--- + +## ModalBody + +### Import path + +```js +import { ModalBody } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------------ | :------------------- | :------------ | +| hasForm | boolean | false | +| hasScrollingContent | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ModalFooter + +### Import path + +```js +import { ModalFooter } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------------- | :------------------- | :------------ | +| primaryButtonText | string | "" | +| primaryButtonDisabled | boolean | false | +| primaryClass | string | -- | +| secondaryButtonText | string | "" | +| secondaryClass | string | -- | +| danger | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## ModalHeader + +### Import path + +```js +import { ModalHeader } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------ | :------------ | +| title | string | "" | +| label | string | "" | +| labelClass | string | "" | +| titleClass | string | "" | +| closeClass | string | "" | +| closeIconClass | string | "" | +| iconDescription | string | "Close" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## MultiSelect + +### Import path + +```js +import { MultiSelect } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `MultiSelect` type definitions + +type MultiSelectItemId = string; + +type MultiSelectItemText = string; + +interface MultiSelectItem { + id: MultiSelectItemId; + text: MultiSelectItemText; +} +``` + +| Prop name | Type | Default value | +| :---------------- | :----------------------------------------------------------------------- | :----------------- | +| items | MultiSelectItem[] | -- | +| itemToString | (item: MultiSelectItem) => string | -- | +| selectedIds | MultiSelectItemId[] | -- | +| value | string | "" | +| size | "sm" | "lg" | "xl" | -- | +| type | "default" | "inline" | "default" | +| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | +| disabled | boolean | false | +| filterable | boolean | false | +| filterItem | (item: MultiSelectItem, value: string) => string | -- | +| open | boolean | false | +| light | boolean | false | +| locale | string | "en" | +| placeholder | string | "" | +| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | +| translateWithId | (id: any) => string | -- | +| titleText | string | "" | +| useTitleInItem | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | "" | +| id | string | -- | +| name | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:keydown` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## NotificationActionButton + +### Import path + +```js +import { NotificationActionButton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## NotificationButton + +### Import path + +```js +import { NotificationButton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :------------------------------------------------------------------ | :------------ | +| notificationType | "toast" | "inline" | "toast" | +| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | +| title | string | -- | +| iconDescription | string | "Close icon" | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## NotificationIcon + +### Import path + +```js +import { NotificationIcon } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| notificationType | "toast" | "inline" | "toast" | +| iconDescription | string | "Closes notification" | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## NotificationTextDetails + +### Import path + +```js +import { NotificationTextDetails } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :----------------------------------- | :------------ | +| notificationType | "toast" | "inline" | "toast" | +| title | string | "Title" | +| subtitle | string | "" | +| caption | string | "Caption" | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## NumberInput + +### Import path + +```js +import { NumberInput } from "carbon-components-svelte"; +``` + +### Props + +```ts +// `NumberInput` type definitions + +type NumberInputTranslationId = "increment" | "decrement"; +``` + +| Prop name | Type | Default value | +| :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- | +| size | "sm" | "xl" | -- | +| value | string | "" | +| step | number | 1 | +| max | number | -- | +| min | number | -- | +| light | boolean | false | +| readonly | boolean | false | +| mobile | boolean | false | +| allowEmpty | boolean | false | +| disabled | boolean | false | +| iconDescription | string | "" | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | "" | +| hideLabel | boolean | false | +| translateWithId | (id: NumberInputTranslationId) => string | -- | +| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:input` + +### Dispatched events + +- `on:change` + +--- + +## NumberInputSkeleton + +### Import path + +```js +import { NumberInputSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| hideLabel | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## OrderedList + +### Import path + +```js +import { OrderedList } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| nested | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## OverflowMenu + +### Import path + +```js +import { OverflowMenu } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :------------------------------------------------------------------ | :------------------------------- | +| direction | "top" | "bottom" | "bottom" | +| open | boolean | false | +| light | boolean | false | +| flipped | boolean | false | +| menuOptionsClass | string | -- | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | +| iconClass | string | -- | +| iconDescription | string | "Open and close list of options" | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +- `on:close` + +--- + +## OverflowMenuItem + +### Import path + +```js +import { OverflowMenuItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :------------------------------------------------------------------ | :------------- | +| text | string | "Provide text" | +| href | string | "" | +| primaryFocus | boolean | false | +| disabled | boolean | false | +| hasDivider | boolean | false | +| danger | boolean | false | +| requireTitle | boolean | true | +| id | string | -- | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## Pagination + +### Import path + +```js +import { Pagination } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------------- | :--------------------------------------------------------------- | :---------------- | +| page | number | 1 | +| totalItems | number | 0 | +| disabled | boolean | false | +| forwardText | string | "Next page" | +| backwardText | string | "Previous page" | +| itemsPerPageText | string | "Items per page:" | +| itemText | (min: number, max: number) => string | -- | +| itemRangeText | (min: number, max: number, total: number) => string | -- | +| pageInputDisabled | boolean | false | +| pageSize | number | 10 | +| pageSizes | number[] | -- | +| pagesUnknown | boolean | false | +| pageText | (page: number) => string | -- | +| pageRangeText | (current: number, total: number) => string | -- | +| id | string | -- | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:update` + +--- + +## PaginationNav + +### Import path + +```js +import { PaginationNav } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :------------------- | :-------------- | +| page | number | 0 | +| total | number | 10 | +| shown | number | 10 | +| loop | boolean | false | +| forwardText | string | "Next page" | +| backwardText | string | "Previous page" | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:click:button--previous` +- `on:click:button--next` +- `on:change` + +--- + +## PaginationSkeleton + +### Import path + +```js +import { PaginationSkeleton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## PasswordInput + +### Import path + +```js +import { PasswordInput } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------------- | :-------------------------------------------------------------- | :-------------- | +| size | "sm" | "xl" | -- | +| value | string | "" | +| type | string | "password" | +| placeholder | string | "" | +| hidePasswordLabel | string | "Hide password" | +| showPasswordLabel | string | "Show password" | +| tooltipAlignment | "start" | "center" | "end" | -- | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:input` +- `on:keydown` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## ProgressIndicator + +### Import path + +```js +import { ProgressIndicator } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :------------------- | :------------ | +| currentIndex | number | 0 | +| vertical | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## ProgressIndicatorSkeleton + +### Import path + +```js +import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| vertical | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ProgressStep + +### Import path + +```js +import { ProgressStep } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------- | :------------------- | :------------ | +| complete | boolean | false | +| current | boolean | false | +| disabled | boolean | false | +| invalid | boolean | false | +| description | string | "" | +| label | string | "" | +| secondaryLabel | string | "" | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## RadioButton + +### Import path + +```js +import { RadioButton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :---------------------------------------- | :------------ | +| value | string | "" | +| checked | boolean | false | +| disabled | boolean | false | +| labelPosition | "right" | "left" | "right" | +| labelText | string | "" | +| hideLabel | boolean | false | +| id | string | -- | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:change` + +### Dispatched events + +No dispatched events. + +--- + +## RadioButtonGroup + +### Import path + +```js +import { RadioButtonGroup } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :------------------------------------------ | :------------ | +| selected | string | -- | +| disabled | boolean | false | +| labelPosition | "right" | "left" | "right" | +| orientation | "horizontal" | "vertical" | "horizontal" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## RadioButtonSkeleton + +### Import path + +```js +import { RadioButtonSkeleton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## RadioTile + +### Import path + +```js +import { RadioTile } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------- | :--------------- | +| checked | boolean | false | +| light | boolean | false | +| value | string | "" | +| tabindex | string | "0" | +| iconDescription | string | "Tile checkmark" | +| id | string | -- | +| name | string | "" | + +### Slots + +- `...` + +### Forwarded events + +- `on:change` +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## Row + +### Import path + +```js +import { Row } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------ | :------------------- | :------------ | +| as | boolean | false | +| condensed | boolean | false | +| narrow | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## Search + +### Import path + +```js +import { Search } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------------- | :---------------------------------------- | :------------------- | +| small | boolean | false | +| size | "sm" | "lg" | -- | +| skeleton | boolean | false | +| light | boolean | false | +| value | string | "" | +| type | string | "text" | +| placeholder | string | "Search..." | +| autocomplete | "on" | "off" | "off" | +| autofocus | boolean | false | +| closeButtonLabelText | string | "Clear search input" | +| labelText | string | "" | +| id | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:input` + +### Dispatched events + +No dispatched events. + +--- + +## SearchSkeleton + +### Import path + +```js +import { SearchSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| small | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Select + +### Import path + +```js +import { Select } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :----------------------------------------- | :------------ | +| selected | string | -- | +| size | "sm" | "xl" | -- | +| inline | boolean | false | +| light | boolean | false | +| disabled | boolean | false | +| id | string | -- | +| name | string | -- | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| noLabel | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| ref | null | HTMLSelectElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:blur` + +### Dispatched events + +- `on:change` + +--- + +## SelectItem + +### Import path + +```js +import { SelectItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| value | string | "" | +| text | string | "" | +| hidden | boolean | false | +| disabled | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## SelectItemGroup + +### Import path + +```js +import { SelectItemGroup } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :-------------- | +| disabled | boolean | false | +| label | string | "Provide label" | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## SelectSkeleton + +### Import path + +```js +import { SelectSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| hideLabel | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## SelectableTile + +### Import path + +```js +import { SelectableTile } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :---------------------------------------- | :--------------- | +| selected | boolean | false | +| light | boolean | false | +| title | string | "title" | +| value | string | "value" | +| tabindex | string | "0" | +| iconDescription | string | "Tile checkmark" | +| id | string | -- | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## SideNav + +### Import path + +```js +import { SideNav } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| fixed | boolean | false | +| ariaLabel | string | -- | +| isOpen | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## SideNavItems + +### Import path + +```js +import { SideNavItems } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## SideNavLink + +### Import path + +```js +import { SideNavLink } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | +| isSelected | boolean | false | +| href | string | -- | +| text | string | -- | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## SideNavMenu + +### Import path + +```js +import { SideNavMenu } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | +| expanded | boolean | false | +| text | string | -- | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## SideNavMenuItem + +### Import path + +```js +import { SideNavMenuItem } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------- | :------------------- | :------------ | +| isSelected | boolean | -- | +| href | string | -- | +| text | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## SkeletonPlaceholder + +### Import path + +```js +import { SkeletonPlaceholder } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## SkeletonText + +### Import path + +```js +import { SkeletonText } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| lines | number | 3 | +| heading | boolean | false | +| paragraph | boolean | false | +| width | string | "100%" | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## SkipToContent + +### Import path + +```js +import { SkipToContent } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :-------------- | +| href | string | "#main-content" | +| tabindex | string | "0" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## Slider + +### Import path + +```js +import { Slider } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :------------- | :----------------------------------- | :------------ | +| value | string | "" | +| max | number | 100 | +| maxLabel | string | "" | +| min | number | 0 | +| minLabel | string | "" | +| step | number | 1 | +| stepMultiplier | number | 4 | +| required | boolean | false | +| inputType | string | "number" | +| disabled | boolean | false | +| light | boolean | false | +| hideTextInput | boolean | false | +| id | string | -- | +| invalid | boolean | false | +| labelText | string | "" | +| name | string | "" | +| ref | null | HTMLElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## SliderSkeleton + +### Import path + +```js +import { SliderSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| hideLabel | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## StructuredList + +### Import path + +```js +import { StructuredList } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| selected | string | -- | +| border | boolean | false | +| selection | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:change` + +--- + +## StructuredListBody + +### Import path + +```js +import { StructuredListBody } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## StructuredListCell + +### Import path + +```js +import { StructuredListCell } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| head | boolean | false | +| noWrap | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## StructuredListHead + +### Import path + +```js +import { StructuredListHead } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## StructuredListInput + +### Import path + +```js +import { StructuredListInput } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :---------------------------------------- | :------------ | +| checked | boolean | false | +| title | string | "title" | +| value | string | "value" | +| id | string | -- | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## StructuredListRow + +### Import path + +```js +import { StructuredListRow } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| head | boolean | false | +| label | boolean | false | +| tabindex | string | "0" | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## StructuredListSkeleton + +### Import path + +```js +import { StructuredListSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| rows | number | 5 | +| border | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Switch + +### Import path + +```js +import { Switch } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :----------------------------------------- | :------------- | +| text | string | "Provide text" | +| selected | boolean | false | +| disabled | boolean | false | +| id | string | -- | +| ref | null | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:keydown` + +### Dispatched events + +No dispatched events. + +--- + +## Tab + +### Import path + +```js +import { Tab } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :----------------------------------------- | :------------ | +| label | string | "" | +| href | string | "#" | +| disabled | boolean | false | +| tabindex | string | "0" | +| id | string | -- | +| ref | null | HTMLAnchorElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TabContent + +### Import path + +```js +import { TabContent } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## Table + +### Import path + +```js +import { Table } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :-------------------------------------------------- | :------------ | +| size | "compact" | "short" | "tall" | -- | +| zebra | boolean | false | +| useStaticWidth | boolean | false | +| shouldShowBorder | boolean | false | +| sortable | boolean | false | +| stickyHeader | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## TableBody + +### Import path + +```js +import { TableBody } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## TableCell + +### Import path + +```js +import { TableCell } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TableContainer + +### Import path + +```js +import { TableContainer } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :----------- | :------------------- | :------------ | +| title | string | "" | +| description | string | "" | +| stickyHeader | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## TableHead + +### Import path + +```js +import { TableHead } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TableHeader + +### Import path + +```js +import { TableHeader } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------------ | :------------ | +| scope | string | "col" | +| translateWithId | () => string | -- | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:click` + +### Dispatched events + +No dispatched events. + +--- + +## TableRow + +### Import path + +```js +import { TableRow } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------- | :------------------- | :------------ | +| isSelected | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Tabs + +### Import path + +```js +import { Tabs } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :---------------------------------------- | :------------------ | +| selected | number | 0 | +| type | "default" | "container" | "default" | +| iconDescription | string | "Show menu options" | +| triggerHref | string | "#" | + +### Slots + +- `...` + +### Forwarded events + +- `on:keypress` +- `on:click` + +### Dispatched events + +- `on:change` + +--- + +## TabsSkeleton + +### Import path + +```js +import { TabsSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| count | number | 4 | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Tag + +### Import path + +```js +import { Tag } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | +| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | +| filter | boolean | false | +| disabled | boolean | false | +| skeleton | boolean | false | +| title | string | "Clear filter" | +| id | string | -- | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TagSkeleton + +### Import path + +```js +import { TagSkeleton } from "carbon-components-svelte"; +``` + +### Props + +No exported props. + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TextArea + +### Import path + +```js +import { TextArea } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------------------------------- | :------------ | +| value | string | "" | +| placeholder | string | "" | +| cols | number | 50 | +| rows | number | 4 | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLTextAreaElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:input` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## TextAreaSkeleton + +### Import path + +```js +import { TextAreaSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| hideLabel | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TextInput + +### Import path + +```js +import { TextInput } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :---------------------------------------- | :------------ | +| size | "sm" | "xl" | -- | +| value | string | "" | +| type | string | "" | +| placeholder | string | "" | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| id | string | -- | +| name | string | -- | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| ref | null | HTMLInputElement | null | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:input` +- `on:keydown` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## TextInputSkeleton + +### Import path + +```js +import { TextInputSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| hideLabel | boolean | false | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Tile + +### Import path + +```js +import { Tile } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| light | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## TileGroup + +### Import path + +```js +import { TileGroup } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| selected | string | -- | +| disabled | boolean | false | +| legend | string | "" | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +- `on:select` + +--- + +## TimePicker + +### Import path + +```js +import { TimePicker } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :---------------------------------------- | :------------ | +| value | string | "" | +| type | string | "text" | +| placeholder | string | "hh=mm" | +| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | +| maxlength | number | 5 | +| light | boolean | false | +| disabled | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLInputElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:input` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## TimePickerSelect + +### Import path + +```js +import { TimePickerSelect } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :----------------------------------------- | :--------------------- | +| value | string | "" | +| disabled | boolean | false | +| iconDescription | string | "Open list of options" | +| labelText | string | "" | +| hideLabel | boolean | false | +| id | string | -- | +| name | string | -- | +| ref | null | HTMLSelectElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ToastNotification + +### Import path + +```js +import { ToastNotification } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| notificationType | "toast" | "inline" | "toast" | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| lowContrast | boolean | false | +| timeout | number | 0 | +| role | string | "alert" | +| title | string | "Title" | +| subtitle | string | "" | +| caption | string | "Caption" | +| iconDescription | string | "Closes notification" | +| hideCloseButton | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +- `on:close` + +--- + +## Toggle + +### Import path + +```js +import { Toggle } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| toggled | boolean | false | +| disabled | boolean | false | +| labelA | string | "Off" | +| labelB | string | "On" | +| labelText | string | "" | +| id | string | -- | +| name | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:keyup` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## ToggleSkeleton + +### Import path + +```js +import { ToggleSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| labelText | string | "" | +| id | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## ToggleSmall + +### Import path + +```js +import { ToggleSmall } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| toggled | boolean | false | +| disabled | boolean | false | +| labelA | string | "Off" | +| labelB | string | "On" | +| labelText | string | "" | +| id | string | -- | +| name | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:change` +- `on:keyup` +- `on:focus` +- `on:blur` + +### Dispatched events + +No dispatched events. + +--- + +## ToggleSmallSkeleton + +### Import path + +```js +import { ToggleSmallSkeleton } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------ | :------------ | +| labelText | string | "" | +| id | string | -- | + +### Slots + +No slots. + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- + +## Tooltip + +### Import path + +```js +import { Tooltip } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------------- | :------------------------------------------------------------------ | :------------ | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | +| open | boolean | false | +| hideIcon | boolean | false | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | +| iconDescription | string | "" | +| iconName | string | "" | +| tabindex | string | "0" | +| tooltipId | string | -- | +| triggerId | string | -- | +| triggerText | string | "" | +| ref | null | HTMLElement | null | +| refTooltip | null | HTMLElement | null | +| refIcon | null | HTMLElement | null | + +### Slots + +- `...` + +### Forwarded events + +No forwarded events. + +### Dispatched events + +No dispatched events. + +--- + +## TooltipDefinition + +### Import path + +```js +import { TooltipDefinition } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :------------------------------------------------ | :------------ | +| tooltipText | string | "" | +| align | "start" | "center" | "end" | "center" | +| direction | "top" | "bottom" | "bottom" | +| id | string | -- | +| ref | null | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:focus` + +### Dispatched events + +No dispatched events. + +--- + +## TooltipIcon + +### Import path + +```js +import { TooltipIcon } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :---------- | :-------------------------------------------------------------- | :------------ | +| tooltipText | string | "" | +| align | "start" | "center" | "end" | "center" | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | +| id | string | -- | +| ref | null | HTMLButtonElement | null | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` +- `on:focus` + +### Dispatched events + +No dispatched events. + +--- + +## UnorderedList + +### Import path + +```js +import { UnorderedList } from "carbon-components-svelte"; +``` + +### Props + +| Prop name | Type | Default value | +| :-------- | :------------------- | :------------ | +| nested | boolean | false | + +### Slots + +- `...` + +### Forwarded events + +- `on:click` +- `on:mouseover` +- `on:mouseenter` +- `on:mouseleave` + +### Dispatched events + +No dispatched events. + +--- diff --git a/scripts/rollup/generate-index.js b/scripts/rollup/generate-index.js new file mode 100644 index 00000000..6dedfdd5 --- /dev/null +++ b/scripts/rollup/generate-index.js @@ -0,0 +1,110 @@ +const toLink = (text) => text.toLowerCase().replace(/\s+/g, "-"); + +const toMdLink = (text) => `[${text}](#${toLink(text)})`; + +const formatType = (type) => `${type.replace(/\|/g, "|")}`; + +const HEADER_PROPS = "| Prop name | Type | Default value |\n| :- | :- | :- |\n"; + +/** + * Use library component metadata to generate component documentation in markdown format. + * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components + * @param {Map} groups + * @param {{name: string; version: string; homepage: string;}} pkg + */ +export function generateIndex(components, groups, pkg) { + let code = `# Component Index\n\n`; + + code += `> ${components.size} components exported from ${pkg.name} ${pkg.version}\n\n`; + + groups.forEach((group, component_group) => { + if (group.length > 1) { + code += `- ${component_group}\n`; + group.forEach((component) => { + code += ` - ${toMdLink(component)}\n`; + }); + } else { + code += `- ${toMdLink(component_group)}\n`; + } + }); + + code += "---\n"; + + components.forEach((component, moduleName) => { + const { + typedefs, + component: { exported_props, slots, forwarded_events, dispatched_events }, + } = component; + + code += `## ${moduleName}\n\n`; + code += `### Import path\n\n`; + code += `\`\`\`js\nimport { ${moduleName} } from "${pkg.name}";\n\`\`\`\n\n`; + + code += "### Props\n\n"; + + if (exported_props.size > 0) { + if (typedefs.length > 0) { + let definitions = ""; + + typedefs.forEach(({ name, type }) => { + const typedef = type.startsWith("{") + ? `interface ${name} ${type}` + : `type ${name} = ${type};`; + + definitions += `${typedef}\n\n`; + }); + + code += `\`\`\`ts\n// \`${moduleName}\` type definitions\n\n${definitions}\n\`\`\`\n\n`; + } + + code += HEADER_PROPS; + + exported_props.forEach((prop, name) => { + code += `| ${name}${ + prop.kind === "const" ? " (`constant`)" : "" + } | ${formatType(prop.type)} | ${prop.value || "--"}|\n`; + }); + } else { + code += "No exported props.\n\n"; + } + + code += "### Slots\n\n"; + + if (slots.size > 0) { + if (slots.get("default")) { + code += "- `...`\n"; + } else { + slots.forEach((slot, name) => { + if (slot.default) return; + code += `- \`...\`\n`; + }); + } + } else { + code += "No slots.\n\n"; + } + + code += "### Forwarded events\n\n"; + + if (forwarded_events.size > 0) { + forwarded_events.forEach((event, name) => { + code += `- \`on:${name}\`\n`; + }); + } else { + code += "No forwarded events.\n\n"; + } + + code += "### Dispatched events\n\n"; + + if (dispatched_events.size > 0) { + dispatched_events.forEach((event, name) => { + code += `- \`on:${name}\`\n`; + }); + } else { + code += "No dispatched events.\n\n"; + } + + code += "---\n"; + }); + + return { code }; +} diff --git a/scripts/rollup/generate-types.js b/scripts/rollup/generate-types.js index 3f4f26bd..9c0c796d 100644 --- a/scripts/rollup/generate-types.js +++ b/scripts/rollup/generate-types.js @@ -8,7 +8,7 @@ export function generateTypes(components, pkg) { // Type definitions for ${pkg.name} ${pkg.version} // Project: ${pkg.homepage} - class SvelteComponent { + export class CarbonSvelteComponent { $$prop_def: {}; $$slot_def: {}; @@ -35,6 +35,10 @@ export function generateTypes(components, pkg) { $$prop_def += "* " + line + "\n"; }); + if (prop.kind === "const") { + $$prop_def += "* @constant\n"; + } + if (prop.value !== undefined) { $$prop_def += "* @default " + prop.value + "\n"; } @@ -67,7 +71,7 @@ export function generateTypes(components, pkg) { }); code += ` - export class ${moduleName} extends SvelteComponent { + export class ${moduleName} extends CarbonSvelteComponent { ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} diff --git a/scripts/rollup/parse-component.js b/scripts/rollup/parse-component.js index 866a5894..1379b5e0 100644 --- a/scripts/rollup/parse-component.js +++ b/scripts/rollup/parse-component.js @@ -40,10 +40,16 @@ export function parseComponent(source, hooks) { let value = undefined; let type = undefined; + let kind = node.declaration.kind; let description = null; if (init != null) { - value = init.raw; + if (init.type === "ObjectExpression") { + value = source.slice(init.start, init.end).replace(/\n/g, " "); + type = value; + } else { + value = init.raw; + } } const general_comments = commentParser(source); @@ -60,14 +66,15 @@ export function parseComponent(source, hooks) { ); description = comment[0].description; - type = comment[0].tags[0].type; + + type = comment[0].tags[comment[0].tags.length - 1].type; } else { throw Error( `[${hooks.component}] property \`${id.name}\` should be annotated.` ); } - exported_props.set(id.name, { value, type, description }); + exported_props.set(id.name, { kind, value, type, description }); break; case "Slot": let slot_name = null; @@ -82,10 +89,17 @@ export function parseComponent(source, hooks) { } }); + let default_value = ""; + + node.children.forEach((child) => { + default_value += `${source.slice(child.start, child.end)}\n`; + }); + slots.set(slot_name == null ? "default" : slot_name, { attributes: node.attributes, children: node.children, default: slot_name == null, + default_value, }); break; case "EventHandler": @@ -102,9 +116,11 @@ export function parseComponent(source, hooks) { if (node.name === dispatcher_name) { const [name, detail] = node.parent.arguments; - dispatched_events.set(name.raw, { - detail: detail ? source.slice(detail.start, detail.end) : undefined, - }); + if (name.value !== undefined) { + dispatched_events.set(name.value, { + detail: detail ? source.slice(detail.start, detail.end) : undefined, + }); + } } }); } diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js index cc993df2..2e87ac10 100644 --- a/scripts/rollup/plugin-generate-docs.js +++ b/scripts/rollup/plugin-generate-docs.js @@ -4,6 +4,7 @@ import pkg from "../../package.json"; import { format } from "prettier"; import { parseComponent } from "./parse-component"; import { generateTypes } from "./generate-types"; +import { generateIndex } from "./generate-index"; /** * Rollup plugin to generate library TypeScript definitions and documentation. @@ -59,9 +60,13 @@ function pluginGenerateDocs() { }, writeBundle() { const { code: types } = generateTypes(components, pkg); - const definitions = format(types, { parser: "typescript" }); + fs.writeFileSync(pkg.types, format(types, { parser: "typescript" })); - fs.writeFileSync(pkg.types, definitions); + const { code: index } = generateIndex(components, groups, pkg); + fs.writeFileSync( + "./COMPONENT_INDEX.md", + format(index, { parser: "markdown" }) + ); }, }; } diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index b6737180..9f92fe21 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -1,8 +1,4 @@ + + + diff --git a/examples/rollup-typescript/rollup.config.js b/examples/rollup-typescript/rollup.config.js new file mode 100644 index 00000000..0125f5af --- /dev/null +++ b/examples/rollup-typescript/rollup.config.js @@ -0,0 +1,83 @@ +import svelte from "rollup-plugin-svelte"; +import resolve from "@rollup/plugin-node-resolve"; +import commonjs from "@rollup/plugin-commonjs"; +import livereload from "rollup-plugin-livereload"; +import { terser } from "rollup-plugin-terser"; +import sveltePreprocess from "svelte-preprocess"; +import typescript from "@rollup/plugin-typescript"; + +const production = !process.env.ROLLUP_WATCH; + +function serve() { + let server; + + function toExit() { + if (server) server.kill(0); + } + + return { + writeBundle() { + if (server) return; + server = require("child_process").spawn( + "npm", + ["run", "start", "--", "--dev"], + { + stdio: ["ignore", "inherit", "inherit"], + shell: true, + } + ); + + process.on("SIGTERM", toExit); + process.on("exit", toExit); + }, + }; +} + +export default { + input: "src/main.ts", + output: { + sourcemap: true, + format: "iife", + name: "app", + file: "public/build/bundle.js", + }, + plugins: [ + svelte({ + // enable run-time checks when not in production + dev: !production, + // we'll extract any component CSS out into + // a separate file - better for performance + css: (css) => { + css.write("public/build/bundle.css"); + }, + preprocess: sveltePreprocess(), + }), + + // If you have external dependencies installed from + // npm, you'll most likely need these plugins. In + // some cases you'll need additional configuration - + // consult the documentation for details: + // https://github.com/rollup/plugins/tree/master/packages/commonjs + resolve({ + browser: true, + dedupe: ["svelte"], + }), + commonjs(), + typescript({ sourceMap: !production }), + + // In dev mode, call `npm run start` once + // the bundle has been generated + !production && serve(), + + // Watch the `public` directory and refresh the + // browser on changes when not in production + !production && livereload("public"), + + // If we're building for production (npm run build + // instead of npm run dev), minify + production && terser(), + ], + watch: { + clearScreen: false, + }, +}; diff --git a/examples/rollup-typescript/src/App.svelte b/examples/rollup-typescript/src/App.svelte new file mode 100644 index 00000000..566cb8ec --- /dev/null +++ b/examples/rollup-typescript/src/App.svelte @@ -0,0 +1,15 @@ + + + + + + Tooltip content + diff --git a/examples/rollup-typescript/src/main.ts b/examples/rollup-typescript/src/main.ts new file mode 100644 index 00000000..aba70f6a --- /dev/null +++ b/examples/rollup-typescript/src/main.ts @@ -0,0 +1,5 @@ +import App from "./App.svelte"; + +const app = new App({ target: document.body }); + +export default app; diff --git a/examples/rollup-typescript/tsconfig.json b/examples/rollup-typescript/tsconfig.json new file mode 100644 index 00000000..418c3aa5 --- /dev/null +++ b/examples/rollup-typescript/tsconfig.json @@ -0,0 +1,5 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "include": ["src/**/*"], + "exclude": ["node_modules/*", "__sapper__/*", "public/*"] +} diff --git a/examples/rollup-typescript/yarn.lock b/examples/rollup-typescript/yarn.lock new file mode 100644 index 00000000..74c182fa --- /dev/null +++ b/examples/rollup-typescript/yarn.lock @@ -0,0 +1,934 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3": + version "7.10.4" + resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" + integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== + dependencies: + "@babel/highlight" "^7.10.4" + +"@babel/helper-validator-identifier@^7.10.4": + version "7.10.4" + resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" + integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== + +"@babel/highlight@^7.10.4": + version "7.10.4" + resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143" + integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + chalk "^2.0.0" + js-tokens "^4.0.0" + +"@emmetio/extract-abbreviation@0.1.6": + version "0.1.6" + resolved "https://registry.npmjs.org/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz#e4a9856c1057f0aff7d443b8536477c243abe28c" + integrity sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw== + +"@rollup/plugin-commonjs@^14.0.0": + version "14.0.0" + resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0" + integrity sha512-+PSmD9ePwTAeU106i9FRdc+Zb3XUWyW26mo5Atr2mk82hor8+nPwkztEjFo8/B1fJKfaQDg9aM2bzQkjhi7zOw== + dependencies: + "@rollup/pluginutils" "^3.0.8" + commondir "^1.0.1" + estree-walker "^1.0.1" + glob "^7.1.2" + is-reference "^1.1.2" + magic-string "^0.25.2" + resolve "^1.11.0" + +"@rollup/plugin-node-resolve@^8.0.0": + version "8.4.0" + resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.4.0.tgz#261d79a680e9dc3d86761c14462f24126ba83575" + integrity sha512-LFqKdRLn0ShtQyf6SBYO69bGE1upV6wUhBX0vFOUnLAyzx5cwp8svA0eHUnu8+YU57XOkrMtfG63QOpQx25pHQ== + dependencies: + "@rollup/pluginutils" "^3.1.0" + "@types/resolve" "1.17.1" + builtin-modules "^3.1.0" + deep-freeze "^0.0.1" + deepmerge "^4.2.2" + is-module "^1.0.0" + resolve "^1.17.0" + +"@rollup/plugin-typescript@^4.0.0": + version "4.1.2" + resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-4.1.2.tgz#6f910430276ae3e53a47a12ad65820627e7b6ad9" + integrity sha512-+7UlGat/99e2JbmGNnIauxwEhYLwrL7adO/tSJxUN57xrrS3Ps+ZzYpLCDGPZJ57j+ZJTZLLN89KXW9JMEB+jg== + dependencies: + "@rollup/pluginutils" "^3.0.1" + resolve "^1.14.1" + +"@rollup/pluginutils@^3.0.1", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0": + version "3.1.0" + resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b" + integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg== + dependencies: + "@types/estree" "0.0.39" + estree-walker "^1.0.1" + picomatch "^2.2.2" + +"@tsconfig/svelte@^1.0.0": + version "1.0.9" + resolved "https://registry.npmjs.org/@tsconfig/svelte/-/svelte-1.0.9.tgz#d03d2f5576fdc2b1f1bda90f6b158329fbcffbd8" + integrity sha512-MBOxtWcFODCgnm6dSRIVHSjoSDzjZ0p/G5cc8v9sNNJhvtKuTbvMRJMO8WJVJAXTCScm/nKgSG7GTlMhC9cdjw== + +"@types/color-name@^1.1.1": + version "1.1.1" + resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" + integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== + +"@types/estree@*": + version "0.0.45" + resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884" + integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g== + +"@types/estree@0.0.39": + version "0.0.39" + resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" + integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== + +"@types/node@*": + version "14.0.27" + resolved "https://registry.npmjs.org/@types/node/-/node-14.0.27.tgz#a151873af5a5e851b51b3b065c9e63390a9e0eb1" + integrity sha512-kVrqXhbclHNHGu9ztnAwSncIgJv/FaxmzXJvGXNdcCpV1b8u1/Mi6z6m0vwy0LzKeXFTPLH0NzwmoJ3fNCIq0g== + +"@types/parse-json@^4.0.0": + version "4.0.0" + 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" + integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw== + 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" "*" + +ansi-styles@^3.2.1: + version "3.2.1" + resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" + integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== + dependencies: + color-convert "^1.9.0" + +ansi-styles@^4.1.0: + version "4.2.1" + resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359" + integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA== + dependencies: + "@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" + +async-limiter@~1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd" + integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ== + +balanced-match@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" + integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= + +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== + +brace-expansion@^1.1.7: + version "1.1.11" + resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" + integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== + dependencies: + balanced-match "^1.0.0" + concat-map "0.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== + dependencies: + fill-range "^7.0.1" + +buffer-from@^1.0.0: + version "1.1.1" + resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" + integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== + +builtin-modules@^3.1.0: + version "3.1.0" + resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" + integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw== + +callsites@^3.0.0: + version "3.1.0" + resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73" + integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== + +carbon-components-svelte@^0.9.5: + version "0.9.5" + resolved "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.9.5.tgz#064f35adb2ca96180c26cf93604eb4b2104e5653" + integrity sha512-G7zAnq9bdebHvyR4so1EDmj6bM2ENFEvMvNrOrXpE8SbrCZ1Aqn/E5gy3Lk2ZiTuUlqNK5Zs4R2mRSAuippWyA== + dependencies: + carbon-icons-svelte "^10.14.0" + flatpickr "4.6.3" + +carbon-icons-svelte@^10.14.0: + version "10.15.0" + resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.15.0.tgz#2e4a7f7e8c71c260239c8210d0506d023efc824f" + integrity sha512-8J9+EHA+r1gp/8upFC8PD/mpreIvC61vkqhkOgxnCVVFixidd8XK8SIaMSlUJeovjImAh2Zj4AB4aMPsl/Xubg== + +chalk@^2.0.0: + version "2.4.2" + resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + +chalk@^4.0.0: + version "4.1.0" + resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a" + integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + +chokidar@^3.3.0, chokidar@^3.4.1: + version "3.4.2" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d" + integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A== + 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.4.0" + optionalDependencies: + fsevents "~2.1.2" + +color-convert@^1.9.0: + version "1.9.3" + resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" + integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== + dependencies: + color-name "1.1.3" + +color-convert@^2.0.1: + version "2.0.1" + resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" + integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== + dependencies: + color-name "~1.1.4" + +color-name@1.1.3: + version "1.1.3" + resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" + integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= + +color-name@~1.1.4: + version "1.1.4" + resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" + integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== + +commander@^2.20.0: + version "2.20.3" + resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" + integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== + +commondir@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" + integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs= + +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" + integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= + +cosmiconfig@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982" + integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg== + dependencies: + "@types/parse-json" "^4.0.0" + import-fresh "^3.1.0" + parse-json "^5.0.0" + path-type "^4.0.0" + yaml "^1.7.2" + +dedent-js@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305" + integrity sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU= + +deep-freeze@^0.0.1: + version "0.0.1" + resolved "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84" + integrity sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ= + +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + +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== + +error-ex@^1.3.1: + version "1.3.2" + resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" + integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g== + dependencies: + is-arrayish "^0.2.1" + +escape-string-regexp@^1.0.5: + version "1.0.5" + resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" + integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= + +estree-walker@^0.6.1: + version "0.6.1" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" + integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== + +estree-walker@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" + integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== + +estree-walker@^2.0.1: + version "2.0.1" + resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz#f8e030fb21cefa183b44b7ad516b747434e7a3e0" + integrity sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg== + +fill-range@^7.0.1: + version "7.0.1" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" + integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== + dependencies: + to-regex-range "^5.0.1" + +flatpickr@4.6.3: + version "4.6.3" + resolved "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.3.tgz#15a8b76b6e34e3a072861250503a5995b9d3bc60" + integrity sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ== + +fs.realpath@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" + integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= + +fsevents@~2.1.2: + version "2.1.3" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" + integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== + +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.1.2, glob@^7.1.6: + version "7.1.6" + resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" + integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + +has-flag@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" + integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= + +has-flag@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b" + integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ== + +import-fresh@^3.1.0: + version "3.2.1" + resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66" + integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ== + dependencies: + parent-module "^1.0.0" + resolve-from "^4.0.0" + +inflight@^1.0.4: + version "1.0.6" + resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" + integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= + dependencies: + once "^1.3.0" + wrappy "1" + +inherits@2: + version "2.0.4" + resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" + integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== + +is-arrayish@^0.2.1: + version "0.2.1" + resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" + integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= + +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-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-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" + integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= + +is-number@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" + integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== + +is-reference@^1.1.2: + version "1.2.1" + resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7" + integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ== + dependencies: + "@types/estree" "*" + +jest-worker@^26.0.0: + version "26.3.0" + resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f" + integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw== + dependencies: + "@types/node" "*" + merge-stream "^2.0.0" + supports-color "^7.0.0" + +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + +json-parse-better-errors@^1.0.1: + version "1.0.2" + resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" + integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== + +jsonc-parser@^1.0.0: + version "1.0.3" + resolved "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-1.0.3.tgz#1d53d7160e401a783dbceabaad82473f80e6ad7e" + integrity sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g== + +lines-and-columns@^1.1.6: + version "1.1.6" + resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" + integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= + +livereload-js@^3.1.0: + version "3.3.1" + resolved "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz#61f887468086762e61fb2987412cf9d1dda99202" + integrity sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ== + +livereload@^0.9.1: + version "0.9.1" + resolved "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz#65125dabdf2db4fd3f1169e953fe56e3bcc6f477" + integrity sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw== + dependencies: + chokidar "^3.3.0" + livereload-js "^3.1.0" + opts ">= 1.2.0" + ws "^6.2.1" + +lodash@^4.17.19: + version "4.17.20" + resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" + integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + +lower-case@^2.0.1: + version "2.0.1" + resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7" + integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ== + dependencies: + tslib "^1.10.0" + +magic-string@^0.25.2, magic-string@^0.25.3: + version "0.25.7" + resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" + integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== + dependencies: + sourcemap-codec "^1.4.4" + +merge-stream@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60" + integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w== + +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: + version "3.0.4" + resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" + integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== + dependencies: + brace-expansion "^1.1.7" + +minimist@^1.2.5: + version "1.2.5" + resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" + integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== + +no-case@^3.0.3: + version "3.0.3" + resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8" + integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw== + dependencies: + lower-case "^2.0.1" + tslib "^1.10.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== + +once@^1.3.0: + version "1.4.0" + resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" + integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E= + dependencies: + wrappy "1" + +"opts@>= 1.2.0": + version "2.0.2" + resolved "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz#a17e189fbbfee171da559edd8a42423bc5993ce1" + integrity sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg== + +parent-module@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" + integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g== + dependencies: + callsites "^3.0.0" + +parse-json@^5.0.0: + version "5.0.1" + resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.0.1.tgz#7cfe35c1ccd641bce3981467e6c2ece61b3b3878" + integrity sha512-ztoZ4/DYeXQq4E21v169sC8qWINGpcosGv9XhTDvg9/hWvx/zrFkc9BiWxR58OJLHGk28j5BL0SDLeV2WmFZlQ== + dependencies: + "@babel/code-frame" "^7.0.0" + error-ex "^1.3.1" + json-parse-better-errors "^1.0.1" + lines-and-columns "^1.1.6" + +pascal-case@^3.1.1: + version "3.1.1" + resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f" + integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA== + dependencies: + no-case "^3.0.3" + tslib "^1.10.0" + +path-is-absolute@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" + integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= + +path-parse@^1.0.6: + version "1.0.6" + resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" + integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + +path-type@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" + integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== + +picomatch@^2.0.4, 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== + +prettier-plugin-svelte@1.1.0: + version "1.1.0" + resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.1.0.tgz#e6ec282d8457598b0c02164083b11ad8cb8ab304" + integrity sha512-wmIggG/ryV0wcmE9D5p+k5TwKDpS2SGKJpF6IV1aYHK7dkBJD+di1w47Ci00DRsI4RrXZRC2Ef37DSyrTb6Zqg== + +prettier@2.0.5: + version "2.0.5" + resolved "https://registry.npmjs.org/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4" + integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg== + +randombytes@^2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" + integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== + dependencies: + safe-buffer "^5.1.0" + +readdirp@~3.4.0: + version "3.4.0" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada" + integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ== + dependencies: + picomatch "^2.2.1" + +require-relative@^0.8.7: + version "0.8.7" + resolved "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de" + integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4= + +resolve-from@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" + integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== + +resolve@^1.11.0, resolve@^1.14.1, resolve@^1.17.0: + version "1.17.0" + resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" + integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== + dependencies: + path-parse "^1.0.6" + +rollup-plugin-livereload@^1.0.0: + version "1.3.0" + resolved "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd" + integrity sha512-abyqXaB21+nFHo+vJULBqfzNx6zXABC19UyvqgDfdoxR/8pFAd041GO+GIUe8ZYC2DbuMUmioh1Lvbk14YLZgw== + dependencies: + livereload "^0.9.1" + +rollup-plugin-svelte@^5.0.3: + version "5.2.3" + resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-5.2.3.tgz#efdc15e3e3fdd9b9f1100fdc14a8532b4e587bc8" + integrity sha512-513vOht9A93OV7fvmpIq8mD1JFgTZ5LidmpULKM2Od9P1l8oI5KwvO32fwCnASuVJS1EkRfvCnS7vKQ8DF4srg== + dependencies: + require-relative "^0.8.7" + rollup-pluginutils "^2.8.2" + sourcemap-codec "^1.4.8" + +rollup-plugin-terser@^6.0.0: + version "6.1.0" + resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-6.1.0.tgz#071866585aea104bfbb9dd1019ac523e63c81e45" + integrity sha512-4fB3M9nuoWxrwm39habpd4hvrbrde2W2GG4zEGPQg1YITNkM3Tqur5jSuXlWNzbv/2aMLJ+dZJaySc3GCD8oDw== + dependencies: + "@babel/code-frame" "^7.8.3" + jest-worker "^26.0.0" + serialize-javascript "^3.0.0" + terser "^4.7.0" + +rollup-pluginutils@^2.8.2: + version "2.8.2" + resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" + integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== + dependencies: + estree-walker "^0.6.1" + +rollup@^2.3.4: + version "2.25.0" + resolved "https://registry.npmjs.org/rollup/-/rollup-2.25.0.tgz#5c69aa9a19b7ae2fd26520d790c01e7a46c9b6ea" + integrity sha512-S+OzytEaqcLugXAqesmJMb1Q16I6h1ps8F3AOX7yMZ1OkkuOATJH/x2lqJJtjQo2/d+0J4j62M2RbvgmxvOuCw== + optionalDependencies: + fsevents "~2.1.2" + +safe-buffer@^5.1.0: + version "5.2.1" + resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" + integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + +serialize-javascript@^3.0.0: + version "3.1.0" + resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea" + integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg== + dependencies: + randombytes "^2.1.0" + +source-map-support@~0.5.12: + version "0.5.19" + resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" + integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw== + dependencies: + buffer-from "^1.0.0" + source-map "^0.6.0" + +source-map@^0.6.0, source-map@~0.6.1: + version "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" + integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== + +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" + +supports-color@^5.3.0: + version "5.5.0" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" + integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== + dependencies: + has-flag "^3.0.0" + +supports-color@^7.0.0, supports-color@^7.1.0: + version "7.1.0" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" + integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== + dependencies: + has-flag "^4.0.0" + +svelte-check@^1.0.0: + version "1.0.15" + resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.0.15.tgz#2a17667cf76ca7d1cea4ea55bb8099739aa90d35" + integrity sha512-Sv1yh7U5m4WK8P7pV4mBEBvR+kfdlp00NiHYUVaguEUiwnubiNu6OVkqkpMK1RrwIrvz789Asc6RKV3K8zPsuQ== + dependencies: + chalk "^4.0.0" + chokidar "^3.4.1" + glob "^7.1.6" + minimist "^1.2.5" + svelte-language-server "*" + vscode-languageserver "6.1.1" + vscode-languageserver-protocol "3.15.3" + vscode-languageserver-types "3.15.1" + vscode-uri "2.1.1" + +svelte-language-server@*: + version "0.10.94" + resolved "https://registry.npmjs.org/svelte-language-server/-/svelte-language-server-0.10.94.tgz#562f99a7a8af16153123851b3c58249515c2a511" + integrity sha512-Weul5ItSoI6PnNoDZ25sgSKsYVVkwWU2QOHv0Yi8nGkgv3djVjqLl8urx8/W4SvIqiirdO3xk1VPnXEJt2KLug== + dependencies: + cosmiconfig "^6.0.0" + estree-walker "^2.0.1" + lodash "^4.17.19" + magic-string "^0.25.3" + prettier "2.0.5" + prettier-plugin-svelte "1.1.0" + source-map "^0.7.3" + svelte "3.24.0" + svelte-preprocess "~3.9.11" + svelte2tsx "*" + typescript "*" + vscode-css-languageservice "4.1.0" + vscode-emmet-helper "1.2.17" + vscode-html-languageservice "3.0.4-next.15" + vscode-languageserver "6.1.1" + vscode-languageserver-types "3.15.1" + vscode-uri "2.1.1" + +svelte-preprocess@^4.0.0: + version "4.0.12" + resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.0.12.tgz#39d1d179258288f496ac06e3db7afcd94d17b4d2" + integrity sha512-nAzVj5M98YzxdoDh9F9NuIaGMn8kjf8SnjRB2IduZIRYjrS5qkrGeHR2ba+CnOUOlMTZ/rQ2jpGeCwnyjgqr5Q== + dependencies: + "@types/pug" "^2.0.4" + "@types/sass" "^1.16.0" + detect-indent "^6.0.0" + strip-indent "^3.0.0" + +svelte-preprocess@~3.9.11: + version "3.9.12" + resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-3.9.12.tgz#21e8452e45c6a4d89df37a38714af4a0186df3a1" + integrity sha512-OX8a7drmlYcX/bLKbtRTvcc0lYu5Ub78D4B/GVxac2zeyrj1e5vEJU6BsxFbc/8kFDqI6BgsCLZAqsFDr/KrDQ== + dependencies: + "@types/pug" "^2.0.4" + "@types/sass" "^1.16.0" + detect-indent "^6.0.0" + strip-indent "^3.0.0" + +svelte2tsx@*: + version "0.1.81" + resolved "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.81.tgz#9d2d84347db91b48a9b1db93dba8029d0ba78319" + integrity sha512-pIViXckZJ+C84Y87n0a3Eh/AMkk68rfEzG78iXJPsQkVmcdKBKOy+Pb0ckXrxIMT4jC4TIUImn5Qkphfar6N2g== + dependencies: + dedent-js "^1.0.1" + pascal-case "^3.1.1" + +svelte@3.24.0: + version "3.24.0" + resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.0.tgz#6565a42c9705796fa66c6abb4fedc09f4323a4a8" + integrity sha512-VFXom6EP2DK83kxy4ZlBbaZklSbZIrpNH3oNXlPYHJUuW4q1OuAr3ZoYbfIVTVYPDgrI7Yq0gQcOhDlAtO4qfw== + +svelte@^3.0.0: + version "3.24.1" + resolved "https://registry.npmjs.org/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b" + integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ== + +terser@^4.7.0: + version "4.8.0" + resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17" + integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw== + dependencies: + commander "^2.20.0" + source-map "~0.6.1" + source-map-support "~0.5.12" + +to-regex-range@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" + integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== + dependencies: + is-number "^7.0.0" + +tslib@^1.10.0: + version "1.13.0" + resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" + integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== + +tslib@^2.0.0: + version "2.0.1" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e" + integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ== + +typescript@*, typescript@^3.9.3: + version "3.9.7" + resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" + integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== + +vscode-css-languageservice@4.1.0: + version "4.1.0" + resolved "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-4.1.0.tgz#144c8274e0bf1719fa6f773ca684bd1c7ffd634f" + integrity sha512-iTX3dTp0Y0RFWhIux5jasI8r9swdiWVB1Z3OrZ10iDHxzkETjVPxAQ5BEQU4ag0Awc8TTg1C7sJriHQY2LO14g== + dependencies: + vscode-languageserver-textdocument "^1.0.1" + vscode-languageserver-types "^3.15.1" + vscode-nls "^4.1.1" + vscode-uri "^2.1.1" + +vscode-emmet-helper@1.2.17: + version "1.2.17" + resolved "https://registry.npmjs.org/vscode-emmet-helper/-/vscode-emmet-helper-1.2.17.tgz#f0c6bfcebc4285d081fb2618e6e5b9a08c567afa" + integrity sha512-X4pzcrJ8dE7M3ArFuySF5fgipKDd/EauXkiJwtjBIVRWpVNq0tF9+lNCyuC7iDUwP3Oq7ow/TGssD3GdG96Jow== + dependencies: + "@emmetio/extract-abbreviation" "0.1.6" + jsonc-parser "^1.0.0" + vscode-languageserver-types "^3.6.0-next.1" + +vscode-html-languageservice@3.0.4-next.15: + version "3.0.4-next.15" + resolved "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-3.0.4-next.15.tgz#7214ccd9b4a06cf138b5945d9fd88285a0add490" + integrity sha512-UmUm3A1ZTj+BloVIyel+5pK/nfsqRfPLXzl8BA9O7v5Cj64vivddABvNf/rW1US8fzdikFNZNloC/4ooqxB2kw== + dependencies: + vscode-languageserver-textdocument "^1.0.1-next.1" + vscode-languageserver-types "^3.15.1" + vscode-nls "^4.1.1" + vscode-uri "^2.1.1" + +vscode-jsonrpc@^5.0.1: + version "5.0.1" + resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz#9bab9c330d89f43fc8c1e8702b5c36e058a01794" + integrity sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A== + +vscode-languageserver-protocol@3.15.3, vscode-languageserver-protocol@^3.15.3: + version "3.15.3" + resolved "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz#3fa9a0702d742cf7883cb6182a6212fcd0a1d8bb" + integrity sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw== + dependencies: + vscode-jsonrpc "^5.0.1" + vscode-languageserver-types "3.15.1" + +vscode-languageserver-textdocument@^1.0.1, vscode-languageserver-textdocument@^1.0.1-next.1: + version "1.0.1" + resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f" + integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA== + +vscode-languageserver-types@3.15.1, vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.6.0-next.1: + version "3.15.1" + resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz#17be71d78d2f6236d414f0001ce1ef4d23e6b6de" + integrity sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ== + +vscode-languageserver@6.1.1: + version "6.1.1" + resolved "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-6.1.1.tgz#d76afc68172c27d4327ee74332b468fbc740d762" + integrity sha512-DueEpkUAkD5XTR4MLYNr6bQIp/UFR0/IPApgXU3YfCBCB08u2sm9hRCs6DxYZELkk++STPjpcjksR2H8qI3cDQ== + dependencies: + vscode-languageserver-protocol "^3.15.3" + +vscode-nls@^4.1.1: + version "4.1.2" + resolved "https://registry.npmjs.org/vscode-nls/-/vscode-nls-4.1.2.tgz#ca8bf8bb82a0987b32801f9fddfdd2fb9fd3c167" + integrity sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw== + +vscode-uri@2.1.1: + version "2.1.1" + resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.1.tgz#5aa1803391b6ebdd17d047f51365cf62c38f6e90" + integrity sha512-eY9jmGoEnVf8VE8xr5znSah7Qt1P/xsCdErz+g8HYZtJ7bZqKH5E3d+6oVNm1AC/c6IHUDokbmVXKOi4qPAC9A== + +vscode-uri@^2.1.1: + version "2.1.2" + resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz#c8d40de93eb57af31f3c715dd650e2ca2c096f1c" + integrity sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A== + +wrappy@1: + version "1.0.2" + resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" + integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= + +ws@^6.2.1: + version "6.2.1" + resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb" + integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA== + dependencies: + async-limiter "~1.0.0" + +yaml@^1.7.2: + version "1.10.0" + resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e" + integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==