From 380a780b6589bebb6d580bf58abee9ebb20e3dc3 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 16 Nov 2020 11:13:18 -0800 Subject: [PATCH] chore: use sveld to generate types, component docs --- COMPONENT_API.json | 10185 +++++++++++++++++++++++ COMPONENT_INDEX.md | 7466 +++++++---------- package.json | 2 +- rollup.config.js | 19 +- scripts/rollup/generate-index.js | 117 - scripts/rollup/generate-public-api.js | 29 - scripts/rollup/generate-types.js | 82 - scripts/rollup/parse-component.js | 137 - scripts/rollup/plugin-generate-docs.js | 84 - src/Accordion/AccordionItem.svelte | 2 +- src/Button/Button.svelte | 4 + src/Grid/Row.svelte | 2 +- types/Button/Button.d.ts | 12 +- types/Grid/Row.d.ts | 2 +- yarn.lock | 43 + 15 files changed, 13298 insertions(+), 4888 deletions(-) create mode 100644 COMPONENT_API.json delete mode 100644 scripts/rollup/generate-index.js delete mode 100644 scripts/rollup/generate-public-api.js delete mode 100644 scripts/rollup/generate-types.js delete mode 100644 scripts/rollup/parse-component.js delete mode 100644 scripts/rollup/plugin-generate-docs.js diff --git a/COMPONENT_API.json b/COMPONENT_API.json new file mode 100644 index 00000000..693a8d3a --- /dev/null +++ b/COMPONENT_API.json @@ -0,0 +1,10185 @@ +{ + "total": 154, + "components": [ + { + "moduleName": "SkeletonText", + "filePath": "/src/SkeletonText/SkeletonText.svelte", + "props": [ + { + "name": "lines", + "kind": "let", + "description": "Specify the number of lines to render", + "type": "number", + "value": "3", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "heading", + "kind": "let", + "description": "Set to `true` to use the heading size variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "paragraph", + "kind": "let", + "description": "Set to `true` to use the paragraph size variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "width", + "kind": "let", + "description": "Specify the width of the text (% or px)", + "type": "string", + "value": "\"100%\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "AccordionSkeleton", + "filePath": "/src/Accordion/AccordionSkeleton.svelte", + "props": [ + { + "name": "count", + "kind": "let", + "description": "Specify the number of accordion items to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Specify alignment of accordion item chevron icon", + "type": "\"start\" | \"end\"", + "value": "\"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the accordion", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `false` to close the first accordion item", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "Accordion", + "filePath": "/src/Accordion/Accordion.svelte", + "props": [ + { + "name": "align", + "kind": "let", + "description": "Specify alignment of accordion item chevron icon", + "type": "\"start\" | \"end\"", + "value": "\"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the accordion", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the accordion", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "AccordionSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "AccordionSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" } + }, + { + "moduleName": "AccordionItem", + "filePath": "/src/Accordion/AccordionItem.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g.
...
)", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the first accordion item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the accordion item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the accordion item chevron icon", + "type": "string", + "value": "\"Expand/Collapse\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "title", + "default": false, + "fallback": "{title}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "animationend", "element": "li" }, + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "AspectRatio", + "filePath": "/src/AspectRatio/AspectRatio.svelte", + "props": [ + { + "name": "ratio", + "kind": "let", + "description": "Specify the aspect ratio", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "value": "\"2x1\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "BreadcrumbSkeleton", + "filePath": "/src/Breadcrumb/BreadcrumbSkeleton.svelte", + "props": [ + { + "name": "noTrailingSlash", + "kind": "let", + "description": "Set to `true` to hide the breadcrumb trailing slash", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "count", + "kind": "let", + "description": "Specify the number of breadcrumb items to render", + "type": "number", + "value": "3", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Breadcrumb", + "filePath": "/src/Breadcrumb/Breadcrumb.svelte", + "props": [ + { + "name": "noTrailingSlash", + "kind": "let", + "description": "Set to `true` to hide the breadcrumb trailing slash", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "BreadcrumbSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "BreadcrumbSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" } + }, + { + "moduleName": "Link", + "filePath": "/src/Link/Link.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the link", + "type": "\"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the href value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "visited", + "kind": "let", + "description": "Set to `true` to allow visited styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLAnchorElement | HTMLParagraphElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "p" }, + { "type": "forwarded", "name": "mouseover", "element": "p" }, + { "type": "forwarded", "name": "mouseenter", "element": "p" }, + { "type": "forwarded", "name": "mouseleave", "element": "p" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "p" } + }, + { + "moduleName": "BreadcrumbItem", + "filePath": "/src/Breadcrumb/BreadcrumbItem.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isCurrentPage", + "kind": "let", + "description": "Set to `true` if the breadcrumb item represents the current page", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "li" }, + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "ButtonSkeleton", + "filePath": "/src/Button/ButtonSkeleton.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of button skeleton", + "type": "\"default\" | \"field\" | \"small\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "small", + "kind": "let", + "description": "Set to `true` to use the small variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "Button", + "filePath": "/src/Button/Button.svelte", + "props": [ + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of button", + "type": "\"default\" | \"field\" | \"small\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasIconOnly", + "kind": "let", + "description": "Set to `true` for the icon-only variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the button icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipAlignment", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`", + "type": "\"start\" | \"center\" | \"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipPosition", + "kind": "let", + "description": "Set the position of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. )", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Set the `href` to use an anchor link", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the `type` attribute for the button element", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLAnchorElement | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { role: \"button\"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "ButtonSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "ButtonSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "ButtonSkeleton" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "ButtonSkeleton" } + }, + { + "moduleName": "ButtonSet", + "filePath": "/src/Button/ButtonSet.svelte", + "props": [ + { + "name": "stacked", + "kind": "let", + "description": "Set to `true` to stack the buttons vertically", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CheckboxSkeleton", + "filePath": "/src/Checkbox/CheckboxSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Checkbox", + "filePath": "/src/Checkbox/Checkbox.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Specify whether the checkbox is checked", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "indeterminate", + "kind": "let", + "description": "Specify whether the checkbox is indeterminate", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` for the checkbox to be read-only", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the input element", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title attribute for the label element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input label", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "check", "detail": "boolean" }, + { "type": "forwarded", "name": "click", "element": "CheckboxSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "CheckboxSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "CheckboxSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "CheckboxSkeleton" + }, + { "type": "forwarded", "name": "change", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "CheckboxSkeleton" } + }, + { + "moduleName": "ContentSwitcher", + "filePath": "/src/ContentSwitcher/ContentSwitcher.svelte", + "props": [ + { + "name": "selectedIndex", + "kind": "let", + "description": "Set the selected index of the switch item", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the content switcher", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "dispatched", "name": "change", "detail": "number" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Switch", + "filePath": "/src/ContentSwitcher/Switch.svelte", + "props": [ + { + "name": "text", + "kind": "let", + "description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g. ...)", + "type": "string", + "value": "\"Provide text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selected", + "kind": "let", + "description": "Set to `true` for the switch to be selected", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the switch", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the button element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{text}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "Copy", + "filePath": "/src/Copy/Copy.svelte", + "props": [ + { + "name": "feedback", + "kind": "let", + "description": "Set the feedback text shown after clicking the button", + "type": "string", + "value": "\"Copied!\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedbackTimeout", + "kind": "let", + "description": "Set the timeout duration (ms) to display feedback text", + "type": "number", + "value": "2000", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{#if animation}{feedback || $$restProps['aria-label']}{/if}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "animationend", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "CopyButton", + "filePath": "/src/CopyButton/CopyButton.svelte", + "props": [ + { + "name": "iconDescription", + "kind": "let", + "description": "Set the title and ARIA label for the copy button", + "type": "string", + "value": "\"Copy to clipboard\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "Copy" }, + { "type": "forwarded", "name": "animationend", "element": "Copy" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Copy" } + }, + { + "moduleName": "ListBox", + "filePath": "/src/ListBox/ListBox.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the list box", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Set the type of the list box", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the list box", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxField", + "filePath": "/src/ListBox/ListBoxField.svelte", + "props": [ + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box field", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Specify the role attribute", + "type": "string", + "value": "\"combobox\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"-1\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ close: \"close\", open: \"open\" }", + "value": "{ close: \"close\", open: \"open\" }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxFieldTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "div" } + ], + "typedefs": [ + { + "type": "\"close\" | \"open\"", + "name": "ListBoxFieldTranslationId", + "ts": "type ListBoxFieldTranslationId = \"close\" | \"open\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenu", + "filePath": "/src/ListBox/ListBoxMenu.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "scroll", "element": "div" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenuIcon", + "filePath": "/src/ListBox/ListBoxMenuIcon.svelte", + "props": [ + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the list box menu icon", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ close: \"close\", open: \"open\" }", + "value": "{ close: \"close\", open: \"open\" }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxMenuIconTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "div" }], + "typedefs": [ + { + "type": "\"close\" | \"open\"", + "name": "ListBoxMenuIconTranslationId", + "ts": "type ListBoxMenuIconTranslationId = \"close\" | \"open\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxMenuItem", + "filePath": "/src/ListBox/ListBoxMenuItem.svelte", + "props": [ + { + "name": "active", + "kind": "let", + "description": "Set to `true` to enable the active state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "highlighted", + "kind": "let", + "description": "Set to `true` to enable the highlighted state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListBoxSelection", + "filePath": "/src/ListBox/ListBoxSelection.svelte", + "props": [ + { + "name": "selectionCount", + "kind": "let", + "description": "Specify the number of selected items", + "type": "any", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the list box selection", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: ListBoxSelectionTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "dispatched", "name": "clear" }], + "typedefs": [ + { + "type": "\"clearAll\" | \"clearSelection\"", + "name": "ListBoxSelectionTranslationId", + "ts": "type ListBoxSelectionTranslationId = \"clearAll\" | \"clearSelection\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ComboBox", + "filePath": "/src/ComboBox/ComboBox.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the combobox items", + "type": "ComboBoxItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a combobox item", + "type": "(item: ComboBoxItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIndex", + "kind": "let", + "description": "Set the selected item by value index", + "type": "number", + "value": "-1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "value", + "kind": "let", + "description": "Specify the selected combobox value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the combobox", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the combobox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text of the combobox", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the combobox menu dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "shouldFilterItem", + "kind": "let", + "description": "Determine if an item should be filtered given the current combobox value", + "type": "(item: ComboBoxItem, value: string) => boolean", + "value": "() => true", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "listRef", + "kind": "let", + "description": "Obtain a reference to the list HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "select", + "detail": "{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }" + }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, + { "type": "forwarded", "name": "scroll", "element": "ListBoxMenu" } + ], + "typedefs": [ + { + "type": "{ id: string; text: string; }", + "name": "ComboBoxItem", + "ts": "interface ComboBoxItem { id: string; text: string; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ComposedModal", + "filePath": "/src/ComposedModal/ComposedModal.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the composed modal", + "type": "\"xs\" | \"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the modal", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventCloseOnClickOutside", + "kind": "let", + "description": "Set to `true` to prevent the modal from closing when clicking outside", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "containerClass", + "kind": "let", + "description": "Specify a class for the inner modal", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectorPrimaryFocus", + "kind": "let", + "description": "Specify a selector to be focused when opening the modal", + "type": "string", + "value": "\"[data-modal-primary-focus]\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "transitionend", "element": "div" }, + { "type": "dispatched", "name": "submit" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched", "name": "open" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalHeader", + "filePath": "/src/ComposedModal/ModalHeader.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the modal title", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the modal label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelClass", + "kind": "let", + "description": "Specify the label class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleClass", + "kind": "let", + "description": "Specify the title class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeClass", + "kind": "let", + "description": "Specify the close class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeIconClass", + "kind": "let", + "description": "Specify the close icon class", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the close icon", + "type": "string", + "value": "\"Close\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalBody", + "filePath": "/src/ComposedModal/ModalBody.svelte", + "props": [ + { + "name": "hasForm", + "kind": "let", + "description": "Set to `true` if the modal contains form elements", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasScrollingContent", + "kind": "let", + "description": "Set to `true` if the modal contains scrolling content", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ModalFooter", + "filePath": "/src/ComposedModal/ModalFooter.svelte", + "props": [ + { + "name": "primaryButtonText", + "kind": "let", + "description": "Specify the primary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonDisabled", + "kind": "let", + "description": "Set to `true` to disable the primary button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryClass", + "kind": "let", + "description": "Specify a class for the primary button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryButtonText", + "kind": "let", + "description": "Specify the secondary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryClass", + "kind": "let", + "description": "Specify a class for the secondary button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CodeSnippetSkeleton", + "filePath": "/src/CodeSnippet/CodeSnippetSkeleton.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Set the type of code snippet", + "type": "\"single\" | \"inline\" | \"multi\"", + "value": "\"single\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "CodeSnippet", + "filePath": "/src/CodeSnippet/CodeSnippet.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Set the type of code snippet", + "type": "\"single\" | \"inline\" | \"multi\"", + "value": "\"single\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "code", + "kind": "let", + "description": "Set the code snippet text\nAlternatively, use the default slot (e.g. {`code`})", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand a multi-line code snippet (type=\"multi\")", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "hideCopyButton", + "kind": "let", + "description": "Set to `true` to hide the copy button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "wrapText", + "kind": "let", + "description": "Set to `true` to wrap the text\nNote that `type` must be \"multi\"", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "copyButtonDescription", + "kind": "let", + "description": "Specify the ARIA label for the copy button icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "copyLabel", + "kind": "let", + "description": "Specify the ARIA label of the copy button", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedback", + "kind": "let", + "description": "Specify the feedback text displayed when clicking the snippet", + "type": "string", + "value": "\"Copied!\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "feedbackTimeout", + "kind": "let", + "description": "Set the timeout duration (ms) to display feedback text", + "type": "number", + "value": "2000", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showLessText", + "kind": "let", + "description": "Specify the show less text\n`type` must be \"multi\"", + "type": "string", + "value": "\"Show less\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showMoreText", + "kind": "let", + "description": "Specify the show more text\n`type` must be \"multi\"", + "type": "string", + "value": "\"Show more\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showMoreLess", + "kind": "let", + "description": "Set to `true` to enable the show more/less button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the code element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the pre HTML element", + "type": "null | HTMLPreElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{code}", + "slot_props": "{}" + } + ], + "events": [ + { + "type": "forwarded", + "name": "click", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "CodeSnippetSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "CodeSnippetSkeleton" + }, + { "type": "forwarded", "name": "animationend", "element": "CopyButton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" } + }, + { + "moduleName": "RadioButton", + "filePath": "/src/RadioButton/RadioButton.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio button", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "et to `true` to disable the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "change", "element": "input" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "RadioButtonSkeleton", + "filePath": "/src/RadioButton/RadioButtonSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Table", + "filePath": "/src/DataTable/Table.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to use zebra styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "useStaticWidth", + "kind": "let", + "description": "Set to `true` to use static width", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shouldShowBorder", + "kind": "let", + "description": "Set to `true` for the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortable", + "kind": "let", + "description": "Set to `true` for the sortable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "section" } + }, + { + "moduleName": "TableBody", + "filePath": "/src/DataTable/TableBody.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "tbody" } + }, + { + "moduleName": "TableCell", + "filePath": "/src/DataTable/TableCell.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "td" }, + { "type": "forwarded", "name": "mouseover", "element": "td" }, + { "type": "forwarded", "name": "mouseenter", "element": "td" }, + { "type": "forwarded", "name": "mouseleave", "element": "td" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "td" } + }, + { + "moduleName": "TableContainer", + "filePath": "/src/DataTable/TableContainer.svelte", + "props": [ + { + "name": "title", + "kind": "let", + "description": "Specify the title of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the description of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TableHead", + "filePath": "/src/DataTable/TableHead.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "thead" }, + { "type": "forwarded", "name": "mouseover", "element": "thead" }, + { "type": "forwarded", "name": "mouseenter", "element": "thead" }, + { "type": "forwarded", "name": "mouseleave", "element": "thead" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "thead" } + }, + { + "moduleName": "TableHeader", + "filePath": "/src/DataTable/TableHeader.svelte", + "props": [ + { + "name": "scope", + "kind": "let", + "description": "Specify the `scope` attribute", + "type": "string", + "value": "\"col\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default id translations", + "type": "() => string", + "value": "() => \"\"", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "mouseover", "element": "th" }, + { "type": "forwarded", "name": "mouseenter", "element": "th" }, + { "type": "forwarded", "name": "mouseleave", "element": "th" }, + { "type": "forwarded", "name": "click", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "th" } + }, + { + "moduleName": "TableRow", + "filePath": "/src/DataTable/TableRow.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "tr" }, + { "type": "forwarded", "name": "mouseover", "element": "tr" }, + { "type": "forwarded", "name": "mouseenter", "element": "tr" }, + { "type": "forwarded", "name": "mouseleave", "element": "tr" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "tr" } + }, + { + "moduleName": "DataTable", + "filePath": "/src/DataTable/DataTable.svelte", + "props": [ + { + "name": "headers", + "kind": "let", + "description": "Specify the data table headers", + "type": "Headers", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", + "type": "Object[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the data table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the description of the data table", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to use zebra styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortable", + "kind": "let", + "description": "Set to `true` for the sortable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expandable", + "kind": "let", + "description": "Set to `true` for the expandable variant\nAutomatically set to `true` if `batchExpansion` is `true`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "batchExpansion", + "kind": "let", + "description": "Set to `true` to enable batch expansion", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "expandedRowIds", + "kind": "let", + "description": "Specify the row ids to be expanded", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "radio", + "kind": "let", + "description": "Set to `true` for the radio selection variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectable", + "kind": "let", + "description": "Set to `true` for the selectable variant\nAutomatically set to `true` if `radio` or `batchSelection` are `true`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "batchSelection", + "kind": "let", + "description": "Set to `true` to enable batch selection", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectedRowIds", + "kind": "let", + "description": "Specify the row ids to be selected", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "stickyHeader", + "kind": "let", + "description": "Set to `true` to enable a sticky header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "cell", + "default": false, + "fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}", + "slot_props": "{ row: Object; cell: Object; }" + }, + { + "name": "cell-header", + "default": false, + "fallback": "{header.value}", + "slot_props": "{ header: Header}" + }, + { + "name": "expanded-row", + "default": false, + "slot_props": "{ row: Object; }" + } + ], + "events": [ + { + "type": "dispatched", + "name": "click", + "detail": "{ header?: Header; row?: Object; cell?: Object; }" + }, + { + "type": "dispatched", + "name": "click:header--expand", + "detail": "{ expanded: boolean; }" + }, + { + "type": "dispatched", + "name": "click:header", + "detail": "{ header: Header; sortDirection: \"ascending\" | \"descending\" | \"none\" }" + }, + { "type": "dispatched", "name": "click:row", "detail": "Object" }, + { "type": "dispatched", "name": "mouseenter:row", "detail": "Object" }, + { "type": "dispatched", "name": "mouseleave:row", "detail": "Object" }, + { + "type": "dispatched", + "name": "click:row--expand", + "detail": "{ expanded: boolean; row: Object; }" + }, + { "type": "dispatched", "name": "click:cell", "detail": "Object" } + ], + "typedefs": [ + { + "type": "{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }", + "name": "Header", + "ts": "interface Header { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }" + }, + { + "type": "Header[]", + "name": "Headers", + "ts": "type Headers = Header[]" + } + ], + "rest_props": { "type": "InlineComponent", "name": "TableContainer" } + }, + { + "moduleName": "Toolbar", + "filePath": "/src/DataTable/Toolbar.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the toolbar size", + "type": "\"sm\" | \"default\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "section" } + }, + { + "moduleName": "ToolbarContent", + "filePath": "/src/DataTable/ToolbarContent.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SearchSkeleton", + "filePath": "/src/Search/SearchSkeleton.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the search input", + "type": "\"sm\" | \"lg\" | \"xl\"", + "value": "\"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Search", + "filePath": "/src/Search/Search.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the search input", + "type": "\"sm\" | \"lg\" | \"xl\"", + "value": "\"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the search input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the search input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the `type` attribute of the search input", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the `placeholder` attribute of the search input", + "type": "string", + "value": "\"Search...\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "autocomplete", + "kind": "let", + "description": "Specify the `autocomplete` attribute", + "type": "\"on\" | \"off\"", + "value": "\"off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "autofocus", + "kind": "let", + "description": "Set to `true` to auto focus the search element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "closeButtonLabelText", + "kind": "let", + "description": "Specify the close button label text", + "type": "string", + "value": "\"Clear search input\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "SearchSkeleton" }, + { + "type": "forwarded", + "name": "mouseover", + "element": "SearchSkeleton" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "SearchSkeleton" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "SearchSkeleton" + }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "dispatched", "name": "clear" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "SearchSkeleton" } + }, + { + "moduleName": "ToolbarSearch", + "filePath": "/src/DataTable/ToolbarSearch.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the search input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand the search bar", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "persistent", + "kind": "let", + "description": "Set to `true` to keep the search bar expanded", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "change", "element": "Search" }, + { "type": "forwarded", "name": "input", "element": "Search" }, + { "type": "forwarded", "name": "focus", "element": "Search" }, + { "type": "forwarded", "name": "blur", "element": "Search" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Search" } + }, + { + "moduleName": "ToolbarBatchActions", + "filePath": "/src/DataTable/ToolbarBatchActions.svelte", + "props": [ + { + "name": "formatTotalSelected", + "kind": "let", + "description": "Override the total items selected text", + "type": "(totalSelected: number) => string", + "value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", + "isFunction": true, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "OverflowMenu", + "filePath": "/src/OverflowMenu/OverflowMenu.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the overflow menu", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Specify the direction of the overflow menu relative to the button", + "type": "\"top\" | \"bottom\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the menu", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "flipped", + "kind": "let", + "description": "Set to `true` to flip the menu relative to the button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "menuOptionsClass", + "kind": "let", + "description": "Specify the menu options class", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconClass", + "kind": "let", + "description": "Specify the icon class", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Open and close list of options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the button element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "buttonRef", + "kind": "let", + "description": "Obtain a reference to the trigger button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "menuRef", + "kind": "let", + "description": "Obtain a reference to the overflow menu element", + "type": "null | HTMLUListElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "menu", + "default": false, + "fallback": "", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "OverflowMenuItem", + "filePath": "/src/OverflowMenu/OverflowMenuItem.svelte", + "props": [ + { + "name": "text", + "kind": "let", + "description": "Specify the item text\nAlternatively, use the default slot for a custom element", + "type": "string", + "value": "\"Provide text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute if the item is a link", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryFocus", + "kind": "let", + "description": "Set to `true` if the item should be focused when opening the menu", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the item", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasDivider", + "kind": "let", + "description": "Set to `true` to include a divider", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "requireTitle", + "kind": "let", + "description": "Set to `false` to omit the button `title` attribute", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLAnchorElement | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "
\n {text}\n
", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "ToolbarMenu", + "filePath": "/src/DataTable/ToolbarMenu.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "OverflowMenu" } + }, + { + "moduleName": "ToolbarMenuItem", + "filePath": "/src/DataTable/ToolbarMenuItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "OverflowMenuItem" }, + { + "type": "forwarded", + "name": "keydown", + "element": "OverflowMenuItem" + } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "OverflowMenuItem" } + }, + { + "moduleName": "DataTableSkeleton", + "filePath": "/src/DataTableSkeleton/DataTableSkeleton.svelte", + "props": [ + { + "name": "columns", + "kind": "let", + "description": "Specify the number of columns", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the data table", + "type": "\"compact\" | \"short\" | \"tall\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "zebra", + "kind": "let", + "description": "Set to `true` to apply zebra styles to the datatable rows", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showHeader", + "kind": "let", + "description": "Set to `false` to hide the header", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "headers", + "kind": "let", + "description": "Set the column headers\nIf `headers` has one more items, `count` is ignored", + "type": "string[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showToolbar", + "kind": "let", + "description": "Set to `false` to hide the toolbar", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "table" }, + { "type": "forwarded", "name": "mouseover", "element": "table" }, + { "type": "forwarded", "name": "mouseenter", "element": "table" }, + { "type": "forwarded", "name": "mouseleave", "element": "table" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "table" } + }, + { + "moduleName": "DatePicker", + "filePath": "/src/DatePicker/DatePicker.svelte", + "props": [ + { + "name": "datePickerType", + "kind": "let", + "description": "Specify the date picker type", + "type": "\"simple\" | \"single\" | \"range\"", + "value": "\"simple\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the date picker input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "appendTo", + "kind": "let", + "description": "Specify the element to append the calendar to", + "type": "HTMLElement", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "dateFormat", + "kind": "let", + "description": "Specify the date format", + "type": "string", + "value": "\"m/d/Y\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxDate", + "kind": "let", + "description": "Specify the maximum date", + "type": "null | string | Date", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "minDate", + "kind": "let", + "description": "Specify the minimum date", + "type": "null | string | Date", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "locale", + "kind": "let", + "description": "Specify the locale", + "type": "string", + "value": "\"en\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "short", + "kind": "let", + "description": "Set to `true` to use the short variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the date picker element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DatePickerInput", + "filePath": "/src/DatePicker/DatePickerInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the input placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pattern", + "kind": "let", + "description": "Specify the Regular Expression for the input value", + "type": "string", + "value": "\"\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the calendar icon", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the input element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DatePickerSkeleton", + "filePath": "/src/DatePicker/DatePickerSkeleton.svelte", + "props": [ + { + "name": "range", + "kind": "let", + "description": "Set to `true` to use the range variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id to be used by the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Dropdown", + "filePath": "/src/Dropdown/Dropdown.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the dropdown items", + "type": "DropdownItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a dropdown item", + "type": "(item: DropdownItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIndex", + "kind": "let", + "description": "Specify the selected item index", + "type": "number", + "value": "-1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of dropdown", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "size", + "kind": "let", + "description": "Specify the size of the dropdown field", + "type": "\"sm\" | \"lg\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the list box label", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the list box", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "select", + "detail": "{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }" + } + ], + "typedefs": [ + { + "type": "string", + "name": "DropdownItemId", + "ts": "type DropdownItemId = string" + }, + { + "type": "string", + "name": "DropdownItemText", + "ts": "type DropdownItemText = string" + }, + { + "type": "{ id: DropdownItemId; text: DropdownItemText; }", + "name": "DropdownItem", + "ts": "interface DropdownItem { id: DropdownItemId; text: DropdownItemText; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "DropdownSkeleton", + "filePath": "/src/Dropdown/DropdownSkeleton.svelte", + "props": [ + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Loading", + "filePath": "/src/Loading/Loading.svelte", + "props": [ + { + "name": "small", + "kind": "let", + "description": "Set to `true` to use the small variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "active", + "kind": "let", + "description": "Set to `false` to disable the active state", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "withOverlay", + "kind": "let", + "description": "Set to `false` to disable the overlay", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the label description", + "type": "string", + "value": "\"Active loading indicator\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Filename", + "filePath": "/src/FileUploader/Filename.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file name status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "Close16" }, + { "type": "forwarded", "name": "keydown", "element": "Close16" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Loading" } + }, + { + "moduleName": "FileUploaderButton", + "filePath": "/src/FileUploader/FileUploaderButton.svelte", + "props": [ + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disableLabelChanges", + "kind": "let", + "description": "Set to `true` to disable label changes", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of file uploader button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"Add file\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "role", + "kind": "let", + "description": "Specify the label role", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify `tabindex` attribute", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "input" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "input" } + }, + { + "moduleName": "FileUploader", + "filePath": "/src/FileUploader/FileUploader.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file uploader status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "files", + "kind": "let", + "description": "Obtain the uploaded file names", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "clearFiles", + "kind": "const", + "description": "Override the default behavior of clearing the array of uploaded files", + "type": "() => void", + "value": "() => { files = []; }", + "isFunction": true, + "constant": true, + "reactive": false + }, + { + "name": "labelDescription", + "kind": "let", + "description": "Specify the label description", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelTitle", + "kind": "let", + "description": "Specify the label title", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of file uploader button", + "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"", + "value": "\"primary\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "buttonLabel", + "kind": "let", + "description": "Specify the button label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"Provide icon description\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the file button uploader input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "dispatched", "name": "remove", "detail": "Files" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { + "type": "forwarded", + "name": "change", + "element": "FileUploaderButton" + }, + { "type": "forwarded", "name": "keydown", "element": "Filename" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FileUploaderItem", + "filePath": "/src/FileUploader/FileUploaderItem.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Specify the file uploader status", + "type": "\"uploading\" | \"edit\" | \"complete\"", + "value": "\"uploading\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label used for the status icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "errorSubject", + "kind": "let", + "description": "Specify the error subject text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "errorBody", + "kind": "let", + "description": "Specify the error body text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify the file uploader name", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "delete", "detail": "string" }, + { "type": "forwarded", "name": "mouseover", "element": "span" }, + { "type": "forwarded", "name": "mouseenter", "element": "span" }, + { "type": "forwarded", "name": "mouseleave", "element": "span" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "span" } + }, + { + "moduleName": "FileUploaderDropContainer", + "filePath": "/src/FileUploader/FileUploaderDropContainer.svelte", + "props": [ + { + "name": "accept", + "kind": "let", + "description": "Specify the accepted file types", + "type": "Files", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "multiple", + "kind": "let", + "description": "Set to `true` to allow multiple files", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "validateFiles", + "kind": "let", + "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", + "type": "(files: Files) => Files", + "value": "(files) => files", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"Add file\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Specify the `role` attribute of the drop container", + "type": "string", + "value": "\"button\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify `tabindex` attribute", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "forwarded", "name": "dragover", "element": "div" }, + { "type": "forwarded", "name": "dragleave", "element": "div" }, + { "type": "forwarded", "name": "drop", "element": "div" }, + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "input" } + ], + "typedefs": [ + { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FileUploaderSkeleton", + "filePath": "/src/FileUploader/FileUploaderSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Form", + "filePath": "/src/Form/Form.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "form" }, + { "type": "forwarded", "name": "mouseover", "element": "form" }, + { "type": "forwarded", "name": "mouseenter", "element": "form" }, + { "type": "forwarded", "name": "mouseleave", "element": "form" }, + { "type": "forwarded", "name": "submit", "element": "form" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "form" } + }, + { + "moduleName": "FluidForm", + "filePath": "/src/FluidForm/FluidForm.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Form" } + }, + { + "moduleName": "FormGroup", + "filePath": "/src/FormGroup/FormGroup.svelte", + "props": [ + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "message", + "kind": "let", + "description": "Set to `true` to render a form requirement", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "messageText", + "kind": "let", + "description": "Specify the message text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "legendText", + "kind": "let", + "description": "Specify the legend text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseover", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseenter", "element": "fieldset" }, + { "type": "forwarded", "name": "mouseleave", "element": "fieldset" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "fieldset" } + }, + { + "moduleName": "FormItem", + "filePath": "/src/FormItem/FormItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "FormLabel", + "filePath": "/src/FormLabel/FormLabel.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id to be used by the label element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "Grid", + "filePath": "/src/Grid/Grid.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "narrow", + "kind": "let", + "description": "Set to `true` to use the narrow variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "fullWidth", + "kind": "let", + "description": "Set to `true` to use the fullWidth variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; } }" + } + ], + "events": [], + "typedefs": [] + }, + { + "moduleName": "Row", + "filePath": "/src/Grid/Row.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "condensed", + "kind": "let", + "description": "Set to `true` to use the condensed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "narrow", + "kind": "let", + "description": "Set to `true` to use the narrow variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; [key: string]: any; } }" + } + ], + "events": [], + "typedefs": [] + }, + { + "moduleName": "Column", + "filePath": "/src/Grid/Column.svelte", + "props": [ + { + "name": "as", + "kind": "let", + "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
...
)", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutter", + "kind": "let", + "description": "Set to `true` to remove the gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterLeft", + "kind": "let", + "description": "Set to `true` to remove the left gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noGutterRight", + "kind": "let", + "description": "Set to `true` to remove the right gutter", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "aspectRatio", + "kind": "let", + "description": "Specify the aspect ratio of the column", + "type": "\"2x1\" | \"16x9\" | \"9x16\" | \"1x2\" | \"4x3\" | \"3x4\" | \"1x1\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sm", + "kind": "let", + "description": "Set the small breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "md", + "kind": "let", + "description": "Set the medium breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lg", + "kind": "let", + "description": "Set the large breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "xlg", + "kind": "let", + "description": "Set the extra large breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "max", + "kind": "let", + "description": "Set the maximum breakpoint", + "type": "ColumnBreakpoint", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props?: { class: string; } }" + } + ], + "events": [], + "typedefs": [ + { + "type": "boolean | number", + "name": "ColumnSize", + "ts": "type ColumnSize = boolean | number" + }, + { + "type": "{span?: ColumnSize; offset: number;}", + "name": "ColumnSizeDescriptor", + "ts": "interface ColumnSizeDescriptor {span?: ColumnSize; offset: number;}" + }, + { + "type": "ColumnSize | ColumnSizeDescriptor", + "name": "ColumnBreakpoint", + "ts": "type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor" + } + ] + }, + { + "moduleName": "IconSkeleton", + "filePath": "/src/Icon/IconSkeleton.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the icon", + "type": "number", + "value": "16", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Icon", + "filePath": "/src/Icon/Icon.svelte", + "props": [ + { + "name": "render", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "IconSkeleton" }, + { "type": "forwarded", "name": "mouseover", "element": "IconSkeleton" }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "IconSkeleton" + }, + { "type": "forwarded", "name": "mouseleave", "element": "IconSkeleton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "IconSkeleton" } + }, + { + "moduleName": "InlineLoading", + "filePath": "/src/InlineLoading/InlineLoading.svelte", + "props": [ + { + "name": "status", + "kind": "let", + "description": "Set the loading status", + "type": "\"active\" | \"inactive\" | \"finished\" | \"error\"", + "value": "\"active\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Set the loading description", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the loading icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "successDelay", + "kind": "let", + "description": "Specify the timeout delay (ms) after `status` is set to \"success\"", + "type": "number", + "value": "1500", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "success" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ListItem", + "filePath": "/src/ListItem/ListItem.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "li" }, + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "MultiSelect", + "filePath": "/src/MultiSelect/MultiSelect.svelte", + "props": [ + { + "name": "items", + "kind": "let", + "description": "Set the multiselect items", + "type": "MultiSelectItem[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "itemToString", + "kind": "let", + "description": "Override the display of a multiselect item", + "type": "(item: MultiSelectItem) => string", + "value": "(item) => item.text || item.id", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "selectedIds", + "kind": "let", + "description": "Set the selected ids", + "type": "MultiSelectItemId[]", + "value": "[]", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "value", + "kind": "let", + "description": "Specify the multiselect value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the combobox", + "type": "\"sm\" | \"lg\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of multiselect", + "type": "\"default\" | \"inline\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectionFeedback", + "kind": "let", + "description": "Specify the selection feedback after selecting items", + "type": "\"top\" | \"fixed\" | \"top-after-reopen\"", + "value": "\"top-after-reopen\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filterable", + "kind": "let", + "description": "Set to `true` to filter items", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filterItem", + "kind": "let", + "description": "Override the filtering logic\nThe default filtering is an exact string comparison", + "type": "(item: MultiSelectItem, value: string) => string", + "value": "(item, value) => item.text.toLowerCase().includes(value.toLowerCase())", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the dropdown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "locale", + "kind": "let", + "description": "Specify the locale", + "type": "string", + "value": "\"en\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "sortItem", + "kind": "let", + "description": "Override the sorting logic\nThe default sorting compare the item text value", + "type": "(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem", + "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: any) => string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "titleText", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "useTitleInItem", + "kind": "let", + "description": "Set to `true` to pass the item to `itemToString` in the checkbox", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the list box label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the list box component", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" }, + { "type": "dispatched", "name": "select" } + ], + "typedefs": [ + { + "type": "string", + "name": "MultiSelectItemId", + "ts": "type MultiSelectItemId = string" + }, + { + "type": "string", + "name": "MultiSelectItemText", + "ts": "type MultiSelectItemText = string" + }, + { + "type": "{ id: MultiSelectItemId; text: MultiSelectItemText; }", + "name": "MultiSelectItem", + "ts": "interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; }" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Modal", + "filePath": "/src/Modal/Modal.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the modal", + "type": "\"xs\" | \"sm\" | \"lg\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the modal", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "danger", + "kind": "let", + "description": "Set to `true` to use the danger variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "alert", + "kind": "let", + "description": "Set to `true` to enable alert mode", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "passiveModal", + "kind": "let", + "description": "Set to `true` to use the passive variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalHeading", + "kind": "let", + "description": "Specify the modal heading", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalLabel", + "kind": "let", + "description": "Specify the modal label", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "modalAriaLabel", + "kind": "let", + "description": "Specify the ARIA label for the modal", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the close icon", + "type": "string", + "value": "\"Close the modal\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasForm", + "kind": "let", + "description": "Set to `true` if the modal contains form elements", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hasScrollingContent", + "kind": "let", + "description": "Set to `true` if the modal contains scrolling content", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonText", + "kind": "let", + "description": "Specify the primary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "primaryButtonDisabled", + "kind": "let", + "description": "Set to `true` to disable the primary button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shouldSubmitOnEnter", + "kind": "let", + "description": "Set to `true` for the primary button to be triggered when pressing \"Enter\"", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryButtonText", + "kind": "let", + "description": "Specify the secondary button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selectorPrimaryFocus", + "kind": "let", + "description": "Specify a selector to be focused when opening the modal", + "type": "string", + "value": "\"[data-modal-primary-focus]\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventCloseOnClickOutside", + "kind": "let", + "description": "Set to `true` to prevent the modal from closing when clicking outside", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "heading", + "default": false, + "fallback": "{modalHeading}", + "slot_props": "{}" + }, + { + "name": "label", + "default": false, + "fallback": "{modalLabel}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "submit" }, + { "type": "dispatched", "name": "click:button--secondary" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched", "name": "open" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NotificationButton", + "filePath": "/src/Notification/NotificationButton.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "renderIcon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the icon", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Close icon\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "NotificationIcon", + "filePath": "/src/Notification/NotificationIcon.svelte", + "props": [ + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification icon", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [] + }, + { + "moduleName": "NotificationTextDetails", + "filePath": "/src/Notification/NotificationTextDetails.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "caption", + "kind": "let", + "description": "Specify the caption text", + "type": "string", + "value": "\"Caption\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "ToastNotification", + "filePath": "/src/Notification/ToastNotification.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"toast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lowContrast", + "kind": "let", + "description": "Set to `true` to use the low contrast variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "timeout", + "kind": "let", + "description": "Set the timeout duration (ms) to hide the notification after opening it", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Set the `role` attribute", + "type": "string", + "value": "\"alert\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "caption", + "kind": "let", + "description": "Specify the caption text", + "type": "string", + "value": "\"Caption\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideCloseButton", + "kind": "let", + "description": "Set to `true` to hide the close button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "InlineNotification", + "filePath": "/src/Notification/InlineNotification.svelte", + "props": [ + { + "name": "notificationType", + "kind": "let", + "description": "Set the type of notification", + "type": "\"toast\" | \"inline\"", + "value": "\"inline\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "kind", + "kind": "let", + "description": "Specify the kind of notification", + "type": "\"error\" | \"info\" | \"info-square\" | \"success\" | \"warning\" | \"warning-alt\"", + "value": "\"error\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "lowContrast", + "kind": "let", + "description": "Set to `true` to use the low contrast variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "timeout", + "kind": "let", + "description": "Set the timeout duration (ms) to hide the notification after opening it", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "role", + "kind": "let", + "description": "Set the `role` attribute", + "type": "string", + "value": "\"alert\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title text", + "type": "string", + "value": "\"Title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "subtitle", + "kind": "let", + "description": "Specify the subtitle text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideCloseButton", + "kind": "let", + "description": "Set to `true` to hide the close button", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the icon", + "type": "string", + "value": "\"Closes notification\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { "name": "actions", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "close" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NotificationActionButton", + "filePath": "/src/Notification/NotificationActionButton.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "Button" }, + { "type": "forwarded", "name": "mouseover", "element": "Button" }, + { "type": "forwarded", "name": "mouseenter", "element": "Button" }, + { "type": "forwarded", "name": "mouseleave", "element": "Button" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "Button" } + }, + { + "moduleName": "NumberInput", + "filePath": "/src/NumberInput/NumberInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "step", + "kind": "let", + "description": "Specify the step increment", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "max", + "kind": "let", + "description": "Specify the maximum value", + "type": "number", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "min", + "kind": "let", + "description": "Specify the minimum value", + "type": "number", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` for the input to be read-only", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "mobile", + "kind": "let", + "description": "Set to `true` to enable the mobile variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "allowEmpty", + "kind": "let", + "description": "Set to `true` to allow for an empty value", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the increment icons", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithId", + "kind": "let", + "description": "Override the default translation ids", + "type": "(id: NumberInputTranslationId) => string", + "value": "(id) => defaultTranslations[id]", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "translationIds", + "kind": "const", + "description": "Default translation ids", + "type": "{ increment: \"increment\"; decrement: \"decrement\" }", + "value": "{ increment: \"increment\", decrement: \"decrement\", }", + "isFunction": false, + "constant": true, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "label", + "default": false, + "fallback": "{label}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [ + { + "type": "\"increment\" | \"decrement\"", + "name": "NumberInputTranslationId", + "ts": "type NumberInputTranslationId = \"increment\" | \"decrement\"" + } + ], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "NumberInputSkeleton", + "filePath": "/src/NumberInput/NumberInputSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "OrderedList", + "filePath": "/src/OrderedList/OrderedList.svelte", + "props": [ + { + "name": "nested", + "kind": "let", + "description": "Set to `true` to use the nested variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "native", + "kind": "let", + "description": "Set to `true` to use native list styles", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ol" }, + { "type": "forwarded", "name": "mouseover", "element": "ol" }, + { "type": "forwarded", "name": "mouseenter", "element": "ol" }, + { "type": "forwarded", "name": "mouseleave", "element": "ol" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ol" } + }, + { + "moduleName": "Select", + "filePath": "/src/Select/Select.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected item value", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "size", + "kind": "let", + "description": "Set the size of the select input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use the inline variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the select element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the select element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noLabel", + "kind": "let", + "description": "Set to `true` to not render a label", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the select HTML element", + "type": "null | HTMLSelectElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "blur", "element": "select" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectSkeleton", + "filePath": "/src/Select/SelectSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectItem", + "filePath": "/src/Select/SelectItem.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the option value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the option text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hidden", + "kind": "let", + "description": "Set to `true` to hide the option", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the option", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SelectItemGroup", + "filePath": "/src/Select/SelectItemGroup.svelte", + "props": [ + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the optgroup element", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the label attribute of the optgroup element", + "type": "string", + "value": "\"Provide label\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "optgroup" } + }, + { + "moduleName": "Pagination", + "filePath": "/src/Pagination/Pagination.svelte", + "props": [ + { + "name": "page", + "kind": "let", + "description": "Specify the current page index", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "totalItems", + "kind": "let", + "description": "Specify the total number of items", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the pagination", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "forwardText", + "kind": "let", + "description": "Specify the forward button text", + "type": "string", + "value": "\"Next page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "backwardText", + "kind": "let", + "description": "Specify the backward button text", + "type": "string", + "value": "\"Previous page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemsPerPageText", + "kind": "let", + "description": "Specify the items per page text", + "type": "string", + "value": "\"Items per page:\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "itemText", + "kind": "let", + "description": "Override the item text", + "type": "(min: number, max: number) => string", + "value": "(min, max) => `${min}–${max} items`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "itemRangeText", + "kind": "let", + "description": "Override the item range text", + "type": "(min: number, max: number, total: number) => string", + "value": "(min, max, total) => `${min}–${max} of ${total} items`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "pageInputDisabled", + "kind": "let", + "description": "Set to `true` to disable the page input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageSizeInputDisabled", + "kind": "let", + "description": "Set to `true` to disable the page size input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageSize", + "kind": "let", + "description": "Specify the number of items to display in a page", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "pageSizes", + "kind": "let", + "description": "Specify the available page sizes", + "type": "number[]", + "value": "[10]", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pagesUnknown", + "kind": "let", + "description": "Set to `true` if the number of pages is unknown", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pageText", + "kind": "let", + "description": "Override the page text", + "type": "(page: number) => string", + "value": "(page) => `page ${page}`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "pageRangeText", + "kind": "let", + "description": "Override the page range text", + "type": "(current: number, total: number) => string", + "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [{ "type": "dispatched", "name": "update" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PaginationSkeleton", + "filePath": "/src/Pagination/PaginationSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PaginationNav", + "filePath": "/src/PaginationNav/PaginationNav.svelte", + "props": [ + { + "name": "page", + "kind": "let", + "description": "Specify the current page index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "total", + "kind": "let", + "description": "Specify the total number of pages", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "shown", + "kind": "let", + "description": "Specify the total number of pages to show", + "type": "number", + "value": "10", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "loop", + "kind": "let", + "description": "Set to `true` to loop the navigation", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "forwardText", + "kind": "let", + "description": "Specify the forward button text", + "type": "string", + "value": "\"Next page\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "backwardText", + "kind": "let", + "description": "Specify the backward button text", + "type": "string", + "value": "\"Previous page\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "dispatched", "name": "click:button--previous" }, + { "type": "dispatched", "name": "click:button--next" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "ProgressIndicator", + "filePath": "/src/ProgressIndicator/ProgressIndicator.svelte", + "props": [ + { + "name": "currentIndex", + "kind": "let", + "description": "Specify the current step index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "vertical", + "kind": "let", + "description": "Set to `true` to use the vertical variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "spaceEqually", + "kind": "let", + "description": "Set to `true` to specify whether the progress steps should be split equally in size in the div", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "preventChangeOnClick", + "kind": "let", + "description": "Set to `true` to prevent updating `currentIndex`", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "ProgressIndicatorSkeleton", + "filePath": "/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte", + "props": [ + { + "name": "vertical", + "kind": "let", + "description": "Set to `true` to use the vertical variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "count", + "kind": "let", + "description": "Specify the number of steps to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + }, + { + "moduleName": "ProgressStep", + "filePath": "/src/ProgressIndicator/ProgressStep.svelte", + "props": [ + { + "name": "complete", + "kind": "let", + "description": "Set to `true` for the complete variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "current", + "kind": "let", + "description": "Set to `true` to use the current variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the progress step", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "description", + "kind": "let", + "description": "Specify the step description", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Specify the step label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "secondaryLabel", + "kind": "let", + "description": "Specify the step secondary label", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "

{label}

", + "slot_props": "{ props: { class: 'bx--progress-label' } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "RadioButtonGroup", + "filePath": "/src/RadioButtonGroup/RadioButtonGroup.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Set the selected radio button value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the radio buttons", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "orientation", + "kind": "let", + "description": "Specify the orientation of the radio buttons", + "type": "\"horizontal\" | \"vertical\"", + "value": "\"horizontal\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the container div element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SkeletonPlaceholder", + "filePath": "/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Slider", + "filePath": "/src/Slider/Slider.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the slider", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "max", + "kind": "let", + "description": "Set the maximum slider value", + "type": "number", + "value": "100", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxLabel", + "kind": "let", + "description": "Specify the label for the max value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "min", + "kind": "let", + "description": "Set the minimum slider value", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "minLabel", + "kind": "let", + "description": "Specify the label for the min value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "step", + "kind": "let", + "description": "Set the step value", + "type": "number", + "value": "1", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "stepMultiplier", + "kind": "let", + "description": "Set the step multiplier value", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to require a value", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inputType", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"number\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the slider", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideTextInput", + "kind": "let", + "description": "Set to `true` to hide the text input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the slider div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Set a name for the slider element", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SliderSkeleton", + "filePath": "/src/Slider/SliderSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredList", + "filePath": "/src/StructuredList/StructuredList.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected structured list row value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "border", + "kind": "let", + "description": "Set to `true` to use the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "selection", + "kind": "let", + "description": "Set to `true` to use the selection variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListSkeleton", + "filePath": "/src/StructuredList/StructuredListSkeleton.svelte", + "props": [ + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "border", + "kind": "let", + "description": "Set to `true` to use the bordered variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListBody", + "filePath": "/src/StructuredList/StructuredListBody.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListHead", + "filePath": "/src/StructuredList/StructuredListHead.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListCell", + "filePath": "/src/StructuredList/StructuredListCell.svelte", + "props": [ + { + "name": "head", + "kind": "let", + "description": "Set to `true` to use as a header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "noWrap", + "kind": "let", + "description": "Set to `true` to prevent wrapping", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "StructuredListRow", + "filePath": "/src/StructuredList/StructuredListRow.svelte", + "props": [ + { + "name": "head", + "kind": "let", + "description": "Set to `true` to use as a header", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "label", + "kind": "let", + "description": "Set to `true` to render a label slot", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" }, + { "type": "forwarded", "name": "keydown", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "StructuredListInput", + "filePath": "/src/StructuredList/StructuredListInput.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the input", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the input", + "type": "string", + "value": "\"value\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "input" } + }, + { + "moduleName": "Tabs", + "filePath": "/src/Tabs/Tabs.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected tab index", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the type of tabs", + "type": "\"default\" | \"container\"", + "value": "\"default\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Show menu options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerHref", + "kind": "let", + "description": "Specify the tab trigger href attribute", + "type": "string", + "value": "\"#\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { "name": "content", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "keypress", "element": "div" }, + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "dispatched", "name": "change" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tab", + "filePath": "/src/Tabs/Tab.svelte", + "props": [ + { + "name": "label", + "kind": "let", + "description": "Specify the tab label\nAlternatively, use the default slot (e.g. Label)", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the href attribute", + "type": "string", + "value": "\"#\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tab", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the anchor HTML element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "{label}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "mouseover", "element": "li" }, + { "type": "forwarded", "name": "mouseenter", "element": "li" }, + { "type": "forwarded", "name": "mouseleave", "element": "li" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "li" } + }, + { + "moduleName": "TabContent", + "filePath": "/src/Tabs/TabContent.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TabsSkeleton", + "filePath": "/src/Tabs/TabsSkeleton.svelte", + "props": [ + { + "name": "count", + "kind": "let", + "description": "Specify the number of tabs to render", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TagSkeleton", + "filePath": "/src/Tag/TagSkeleton.svelte", + "props": [], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "span" }, + { "type": "forwarded", "name": "mouseover", "element": "span" }, + { "type": "forwarded", "name": "mouseenter", "element": "span" }, + { "type": "forwarded", "name": "mouseleave", "element": "span" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "span" } + }, + { + "moduleName": "Tag", + "filePath": "/src/Tag/Tag.svelte", + "props": [ + { + "name": "type", + "kind": "let", + "description": "Specify the type of tag", + "type": "\"red\" | \"magenta\" | \"purple\" | \"blue\" | \"cyan\" | \"teal\" | \"green\" | \"gray\" | \"cool-gray\" | \"warm-gray\" | \"high-contrast\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "filter", + "kind": "let", + "description": "Set to `true` to use filterable variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable a filterable tag", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "skeleton", + "kind": "let", + "description": "Set to `true` to display the skeleton state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Set the title for the close button in a filterable tag", + "type": "string", + "value": "\"Clear filter\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the filterable tag", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{ props: { class: 'bx--tag__label' } }" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" }, + { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" } + ], + "typedefs": [], + "rest_props": { "type": "InlineComponent", "name": "TagSkeleton" } + }, + { + "moduleName": "TextArea", + "filePath": "/src/TextArea/TextArea.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the textarea value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "cols", + "kind": "let", + "description": "Specify the number of cols", + "type": "number", + "value": "50", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "rows", + "kind": "let", + "description": "Specify the number of rows", + "type": "number", + "value": "4", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the text for the invalid state", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the textarea element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the textarea HTML element", + "type": "null | HTMLTextAreaElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "textarea" }, + { "type": "forwarded", "name": "input", "element": "textarea" }, + { "type": "forwarded", "name": "focus", "element": "textarea" }, + { "type": "forwarded", "name": "blur", "element": "textarea" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "textarea" } + }, + { + "moduleName": "TextAreaSkeleton", + "filePath": "/src/TextArea/TextAreaSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TextInput", + "filePath": "/src/TextInput/TextInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "warn", + "kind": "let", + "description": "Set to `true` to indicate an warning state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "warnText", + "kind": "let", + "description": "Specify the warning state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "inline", + "kind": "let", + "description": "Set to `true` to use inline version", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TextInputSkeleton", + "filePath": "/src/TextInput/TextInputSkeleton.svelte", + "props": [ + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "PasswordInput", + "filePath": "/src/TextInput/PasswordInput.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Set the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"password\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hidePasswordLabel", + "kind": "let", + "description": "Specify the hide password label text", + "type": "string", + "value": "\"Hide password\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "showPasswordLabel", + "kind": "let", + "description": "Specify the show password label text", + "type": "string", + "value": "\"Show password\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipAlignment", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipPosition", + "kind": "let", + "description": "Set the position of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "helperText", + "kind": "let", + "description": "Specify the helper text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the text for the invalid state", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tile", + "filePath": "/src/Tile/Tile.svelte", + "props": [ + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ClickableTile", + "filePath": "/src/Tile/ClickableTile.svelte", + "props": [ + { + "name": "clicked", + "kind": "let", + "description": "Set to `true` to click the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Set the `href`", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "ExpandableTile", + "filePath": "/src/Tile/ExpandableTile.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to expand the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tileMaxHeight", + "kind": "let", + "description": "Specify the max height of the tile (number of pixels)", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "tilePadding", + "kind": "let", + "description": "Specify the padding of the tile (number of pixels)", + "type": "number", + "value": "0", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "tileCollapsedIconText", + "kind": "let", + "description": "Specify the icon text of the collapsed tile", + "type": "string", + "value": "\"Interact to expand Tile\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tileExpandedIconText", + "kind": "let", + "description": "Specify the icon text of the expanded tile", + "type": "string", + "value": "\"Interact to collapse Tile\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the top-level div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the top-level element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "above", "default": false, "slot_props": "{}" }, + { "name": "below", "default": false, "slot_props": "{}" } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "keypress", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "SelectableTile", + "filePath": "/src/Tile/SelectableTile.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Set to `true` to select the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "title", + "kind": "let", + "description": "Specify the title of the selectable tile", + "type": "string", + "value": "\"title\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the selectable tile", + "type": "string", + "value": "\"value\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the selectable tile checkmark icon", + "type": "string", + "value": "\"Tile checkmark\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" }, + { "type": "forwarded", "name": "keydown", "element": "label" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "RadioTile", + "filePath": "/src/Tile/RadioTile.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the radio tile checkmark icon", + "type": "string", + "value": "\"Tile checkmark\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, + { "type": "forwarded", "name": "click", "element": "label" }, + { "type": "forwarded", "name": "mouseover", "element": "label" }, + { "type": "forwarded", "name": "mouseenter", "element": "label" }, + { "type": "forwarded", "name": "mouseleave", "element": "label" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "label" } + }, + { + "moduleName": "TileGroup", + "filePath": "/src/Tile/TileGroup.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Specify the selected tile value", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile group", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "legend", + "kind": "let", + "description": "Specify the legend text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "dispatched", "name": "select" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "fieldset" } + }, + { + "moduleName": "TimePicker", + "filePath": "/src/TimePicker/TimePicker.svelte", + "props": [ + { + "name": "size", + "kind": "let", + "description": "Specify the size of the input", + "type": "\"sm\" | \"xl\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "type", + "kind": "let", + "description": "Specify the input type", + "type": "string", + "value": "\"text\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the input placeholder text", + "type": "string", + "value": "\"hh=mm\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "pattern", + "kind": "let", + "description": "Specify the `pattern` attribute for the input element", + "type": "string", + "value": "\"(1[012]|[1-9]):[0-5][0-9](\\\\s)?\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "maxlength", + "kind": "let", + "description": "Specify the `maxlength` input attribute", + "type": "number", + "value": "5", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalid", + "kind": "let", + "description": "Set to `true` to indicate an invalid state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "invalidText", + "kind": "let", + "description": "Specify the invalid state text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "input", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TimePickerSelect", + "filePath": "/src/TimePicker/TimePickerSelect.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the select value", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the select", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Open list of options\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the select element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the select element", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the select HTML element", + "type": "null | HTMLSelectElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Toggle", + "filePath": "/src/Toggle/Toggle.svelte", + "props": [ + { + "name": "toggled", + "kind": "let", + "description": "Set to `true` to toggle the checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelA", + "kind": "let", + "description": "Specify the label for the untoggled state", + "type": "string", + "value": "\"Off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelB", + "kind": "let", + "description": "Specify the label for the toggled state", + "type": "string", + "value": "\"On\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSkeleton", + "filePath": "/src/Toggle/ToggleSkeleton.svelte", + "props": [ + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSmall", + "filePath": "/src/ToggleSmall/ToggleSmall.svelte", + "props": [ + { + "name": "toggled", + "kind": "let", + "description": "Set to `true` to toggle the checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable checkbox input", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelA", + "kind": "let", + "description": "Specify the label for the untoggled state", + "type": "string", + "value": "\"Off\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelB", + "kind": "let", + "description": "Specify the label for the toggled state", + "type": "string", + "value": "\"On\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the checkbox input", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, + { "type": "forwarded", "name": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "ToggleSmallSkeleton", + "filePath": "/src/ToggleSmall/ToggleSmallSkeleton.svelte", + "props": [ + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "div" }, + { "type": "forwarded", "name": "mouseover", "element": "div" }, + { "type": "forwarded", "name": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "Tooltip", + "filePath": "/src/Tooltip/Tooltip.svelte", + "props": [ + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the button", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "open", + "kind": "let", + "description": "Set to `true` to open the tooltip", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "hideIcon", + "kind": "let", + "description": "Set to `true` to hide the tooltip icon", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g. `Add16`, `Task16`)", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the tooltip button", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "iconName", + "kind": "let", + "description": "Specify the icon name attribute", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Set the button tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tooltipId", + "kind": "let", + "description": "Set an id for the tooltip", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerId", + "kind": "let", + "description": "Set an id for the tooltip button", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "triggerText", + "kind": "let", + "description": "Set the tooltip button text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the trigger text HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "refTooltip", + "kind": "let", + "description": "Obtain a reference to the tooltip HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "refIcon", + "kind": "let", + "description": "Obtain a reference to the icon HTML element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "icon", + "default": false, + "fallback": "", + "slot_props": "{}" + }, + { + "name": "triggerText", + "default": false, + "fallback": "{triggerText}", + "slot_props": "{}" + } + ], + "events": [{ "type": "dispatched" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TooltipDefinition", + "filePath": "/src/TooltipDefinition/TooltipDefinition.svelte", + "props": [ + { + "name": "tooltipText", + "kind": "let", + "description": "Specify the tooltip text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the icon", + "type": "\"top\" | \"bottom\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the tooltip div element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "tooltip", + "default": false, + "fallback": "{tooltipText}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "focus", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, + { + "moduleName": "TooltipIcon", + "filePath": "/src/TooltipIcon/TooltipIcon.svelte", + "props": [ + { + "name": "tooltipText", + "kind": "let", + "description": "Specify the tooltip text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Set the alignment of the tooltip relative to the icon", + "type": "\"start\" | \"center\" | \"end\"", + "value": "\"center\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "direction", + "kind": "let", + "description": "Set the direction of the tooltip relative to the icon", + "type": "\"top\" | \"right\" | \"bottom\" | \"left\"", + "value": "\"bottom\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the span element", + "type": "string", + "value": "\"ccs-\" + Math.random().toString(36)", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "mouseover", "element": "button" }, + { "type": "forwarded", "name": "mouseenter", "element": "button" }, + { "type": "forwarded", "name": "mouseleave", "element": "button" }, + { "type": "forwarded", "name": "focus", "element": "button" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "Header", + "filePath": "/src/UIShell/GlobalHeader/Header.svelte", + "props": [ + { + "name": "expandedByDefault", + "kind": "let", + "description": "Set to `false` to hide the side nav by default", + "type": "boolean", + "value": "true", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isSideNavOpen", + "kind": "let", + "description": "Set to `true` to open the side nav", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "uiShellAriaLabel", + "kind": "let", + "description": "Specify the ARIA label for the header", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "company", + "kind": "let", + "description": "Specify the company name", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "platformName", + "kind": "let", + "description": "Specify the platform name\nAlternatively, use the named slot \"platform\" (e.g. ...)", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "platform", + "default": false, + "fallback": "{platformName}", + "slot_props": "{}" + }, + { "name": "skip-to-content", "default": false, "slot_props": "{}" } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderAction", + "filePath": "/src/UIShell/GlobalHeader/HeaderAction.svelte", + "props": [ + { + "name": "isOpen", + "kind": "let", + "description": "Set to `true` to open the panel", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g.
...
)", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the button HTML element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "text", + "default": false, + "fallback": "{#if text}{text}{/if}", + "slot_props": "{}" + } + ], + "events": [ + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "dispatched", "name": "close" }, + { "type": "dispatched" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "HeaderActionLink", + "filePath": "/src/UIShell/GlobalHeader/HeaderActionLink.svelte", + "props": [ + { + "name": "linkIsActive", + "kind": "let", + "description": "Set to `true` to use the active state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderActionSearch", + "filePath": "/src/UIShell/GlobalHeader/HeaderActionSearch.svelte", + "props": [ + { + "name": "searchIsActive", + "kind": "let", + "description": "Set to `true` to focus the search", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { + "type": "dispatched", + "name": "inputSearch", + "detail": "{ action: \"search\"; textInput: string; }" + }, + { "type": "dispatched", "name": "focusInputSearch" }, + { "type": "dispatched", "name": "focusOutInputSearch" } + ], + "typedefs": [] + }, + { + "moduleName": "HeaderNav", + "filePath": "/src/UIShell/GlobalHeader/HeaderNav.svelte", + "props": [ + { + "name": "ariaLabel", + "kind": "let", + "description": "Specify the ARIA label for the nav", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "HeaderNavItem", + "filePath": "/src/UIShell/GlobalHeader/HeaderNavItem.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [ + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" }, + { "type": "forwarded", "name": "keyup", "element": "a" }, + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderNavMenu", + "filePath": "/src/UIShell/GlobalHeader/HeaderNavMenu.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "value": "\"/\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the chevron icon", + "type": "string", + "value": "\"Expand/Collapse\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "keydown", "element": "a" }, + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" }, + { "type": "forwarded", "name": "keyup", "element": "a" }, + { "type": "forwarded", "name": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderPanelDivider", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "HeaderPanelLink", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelLink.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderPanelLinks", + "filePath": "/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "HeaderUtilities", + "filePath": "/src/UIShell/GlobalHeader/HeaderUtilities.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SideNav", + "filePath": "/src/UIShell/SideNav/SideNav.svelte", + "props": [ + { + "name": "fixed", + "kind": "let", + "description": "Set to `true` to use the fixed variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ariaLabel", + "kind": "let", + "description": "Specify the ARIA label for the nav", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "isOpen", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "nav" } + }, + { + "moduleName": "SideNavItems", + "filePath": "/src/UIShell/SideNav/SideNavItems.svelte", + "props": [], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [] + }, + { + "moduleName": "SideNavLink", + "filePath": "/src/UIShell/SideNav/SideNavLink.svelte", + "props": [ + { + "name": "isSelected", + "kind": "let", + "description": "Set to `true` to select the current link", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "SideNavMenu", + "filePath": "/src/UIShell/SideNav/SideNavMenu.svelte", + "props": [ + { + "name": "expanded", + "kind": "let", + "description": "Set to `true` to toggle the expanded state", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "text", + "kind": "let", + "description": "Specify the text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon props", + "type": "{ render: import(\"carbon-icons-svelte\").CarbonIcon; skeleton: boolean; }", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "SideNavMenuItem", + "filePath": "/src/UIShell/SideNav/SideNavMenuItem.svelte", + "props": [ + { + "name": "isSelected", + "kind": "let", + "description": "Set to `true` to select the item", + "type": "boolean", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "text", + "kind": "let", + "description": "Specify the item text", + "type": "string", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML anchor element", + "type": "null | HTMLAnchorElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "Content", + "filePath": "/src/UIShell/Content.svelte", + "props": [ + { + "name": "id", + "kind": "let", + "description": "Specify the id for the main element", + "type": "string", + "value": "\"main-content\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "main" } + }, + { + "moduleName": "SkipToContent", + "filePath": "/src/UIShell/SkipToContent.svelte", + "props": [ + { + "name": "href", + "kind": "let", + "description": "Specify the `href` attribute", + "type": "string", + "value": "\"#main-content\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "Skip to main content", + "slot_props": "{}" + } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "a" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "a" } + }, + { + "moduleName": "HeaderGlobalAction", + "filePath": "/src/UIShell/HeaderGlobalAction.svelte", + "props": [ + { + "name": "isActive", + "kind": "let", + "description": "Set to `true` to use the active variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "icon", + "kind": "let", + "description": "Specify the icon to render", + "type": "import(\"carbon-icons-svelte\").CarbonIcon", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the HTML button element", + "type": "null | HTMLButtonElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + } + ], + "slots": [ + { + "name": "__default__", + "default": true, + "fallback": "", + "slot_props": "{}" + } + ], + "events": [{ "type": "forwarded", "name": "click", "element": "button" }], + "typedefs": [], + "rest_props": { "type": "Element", "name": "button" } + }, + { + "moduleName": "UnorderedList", + "filePath": "/src/UnorderedList/UnorderedList.svelte", + "props": [ + { + "name": "nested", + "kind": "let", + "description": "Set to `true` to use the nested variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [ + { "type": "forwarded", "name": "click", "element": "ul" }, + { "type": "forwarded", "name": "mouseover", "element": "ul" }, + { "type": "forwarded", "name": "mouseenter", "element": "ul" }, + { "type": "forwarded", "name": "mouseleave", "element": "ul" } + ], + "typedefs": [], + "rest_props": { "type": "Element", "name": "ul" } + } + ] +} diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 1d741a4b..4ddf4455 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,727 +1,553 @@ # Component Index -> 154 components exported from carbon-components-svelte 0.22.0 +> 154 components exported from carbon-components-svelte@0.22.0. -- Accordion - - [Accordion](#accordion) - - [AccordionItem](#accordionitem) - - [AccordionSkeleton](#accordionskeleton) -- [AspectRatio](#aspectratio) -- Breadcrumb - - [Breadcrumb](#breadcrumb) - - [BreadcrumbItem](#breadcrumbitem) - - [BreadcrumbSkeleton](#breadcrumbskeleton) -- Button - - [Button](#button) - - [ButtonSet](#buttonset) - - [ButtonSkeleton](#buttonskeleton) -- Checkbox - - [Checkbox](#checkbox) - - [CheckboxSkeleton](#checkboxskeleton) -- CodeSnippet - - [CodeSnippet](#codesnippet) - - [CodeSnippetSkeleton](#codesnippetskeleton) -- [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) - - [Toolbar](#toolbar) - - [ToolbarBatchActions](#toolbarbatchactions) - - [ToolbarContent](#toolbarcontent) - - [ToolbarMenu](#toolbarmenu) - - [ToolbarMenuItem](#toolbarmenuitem) - - [ToolbarSearch](#toolbarsearch) -- [DataTableSkeleton](#datatableskeleton) -- DatePicker - - [DatePicker](#datepicker) - - [DatePickerInput](#datepickerinput) - - [DatePickerSkeleton](#datepickerskeleton) -- Dropdown - - [Dropdown](#dropdown) - - [DropdownSkeleton](#dropdownskeleton) -- FileUploader - - [FileUploader](#fileuploader) - - [FileUploaderButton](#fileuploaderbutton) - - [FileUploaderDropContainer](#fileuploaderdropcontainer) - - [FileUploaderItem](#fileuploaderitem) - - [FileUploaderSkeleton](#fileuploaderskeleton) - - [Filename](#filename) -- [FluidForm](#fluidform) -- [Form](#form) -- [FormGroup](#formgroup) -- [FormItem](#formitem) -- [FormLabel](#formlabel) -- Grid - - [Column](#column) - - [Grid](#grid) - - [Row](#row) -- Icon - - [Icon](#icon) - - [IconSkeleton](#iconskeleton) -- [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 - - [NumberInput](#numberinput) - - [NumberInputSkeleton](#numberinputskeleton) -- [OrderedList](#orderedlist) -- OverflowMenu - - [OverflowMenu](#overflowmenu) - - [OverflowMenuItem](#overflowmenuitem) -- Pagination - - [Pagination](#pagination) - - [PaginationSkeleton](#paginationskeleton) -- [PaginationNav](#paginationnav) -- ProgressIndicator - - [ProgressIndicator](#progressindicator) - - [ProgressIndicatorSkeleton](#progressindicatorskeleton) - - [ProgressStep](#progressstep) -- RadioButton - - [RadioButton](#radiobutton) - - [RadioButtonSkeleton](#radiobuttonskeleton) -- [RadioButtonGroup](#radiobuttongroup) -- Search - - [Search](#search) - - [SearchSkeleton](#searchskeleton) -- Select - - [Select](#select) - - [SelectItem](#selectitem) - - [SelectItemGroup](#selectitemgroup) - - [SelectSkeleton](#selectskeleton) -- [SkeletonPlaceholder](#skeletonplaceholder) -- [SkeletonText](#skeletontext) -- Slider - - [Slider](#slider) - - [SliderSkeleton](#sliderskeleton) -- StructuredList - - [StructuredList](#structuredlist) - - [StructuredListBody](#structuredlistbody) - - [StructuredListCell](#structuredlistcell) - - [StructuredListHead](#structuredlisthead) - - [StructuredListInput](#structuredlistinput) - - [StructuredListRow](#structuredlistrow) - - [StructuredListSkeleton](#structuredlistskeleton) -- Tabs - - [Tab](#tab) - - [TabContent](#tabcontent) - - [Tabs](#tabs) - - [TabsSkeleton](#tabsskeleton) -- Tag - - [Tag](#tag) - - [TagSkeleton](#tagskeleton) -- TextArea - - [TextArea](#textarea) - - [TextAreaSkeleton](#textareaskeleton) -- TextInput - - [PasswordInput](#passwordinput) - - [TextInput](#textinput) - - [TextInputSkeleton](#textinputskeleton) -- Tile - - [ClickableTile](#clickabletile) - - [ExpandableTile](#expandabletile) - - [RadioTile](#radiotile) - - [SelectableTile](#selectabletile) - - [Tile](#tile) - - [TileGroup](#tilegroup) -- TimePicker - - [TimePicker](#timepicker) - - [TimePickerSelect](#timepickerselect) -- Toggle - - [Toggle](#toggle) - - [ToggleSkeleton](#toggleskeleton) -- ToggleSmall - - [ToggleSmall](#togglesmall) - - [ToggleSmallSkeleton](#togglesmallskeleton) -- [Tooltip](#tooltip) -- [TooltipDefinition](#tooltipdefinition) -- [TooltipIcon](#tooltipicon) -- UIShell - - [Content](#content) - - [Header](#header) - - [HeaderAction](#headeraction) - - [HeaderActionLink](#headeractionlink) - - [HeaderActionSearch](#headeractionsearch) - - [HeaderGlobalAction](#headerglobalaction) - - [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) +## Components + +- [`Accordion`](#accordion) +- [`AccordionItem`](#accordionitem) +- [`AccordionSkeleton`](#accordionskeleton) +- [`AspectRatio`](#aspectratio) +- [`Breadcrumb`](#breadcrumb) +- [`BreadcrumbItem`](#breadcrumbitem) +- [`BreadcrumbSkeleton`](#breadcrumbskeleton) +- [`Button`](#button) +- [`ButtonSet`](#buttonset) +- [`ButtonSkeleton`](#buttonskeleton) +- [`Checkbox`](#checkbox) +- [`CheckboxSkeleton`](#checkboxskeleton) +- [`ClickableTile`](#clickabletile) +- [`CodeSnippet`](#codesnippet) +- [`CodeSnippetSkeleton`](#codesnippetskeleton) +- [`Column`](#column) +- [`ComboBox`](#combobox) +- [`ComposedModal`](#composedmodal) +- [`Content`](#content) +- [`ContentSwitcher`](#contentswitcher) +- [`Copy`](#copy) +- [`CopyButton`](#copybutton) +- [`DataTable`](#datatable) +- [`DataTableSkeleton`](#datatableskeleton) +- [`DatePicker`](#datepicker) +- [`DatePickerInput`](#datepickerinput) +- [`DatePickerSkeleton`](#datepickerskeleton) +- [`Dropdown`](#dropdown) +- [`DropdownSkeleton`](#dropdownskeleton) +- [`ExpandableTile`](#expandabletile) +- [`FileUploader`](#fileuploader) +- [`FileUploaderButton`](#fileuploaderbutton) +- [`FileUploaderDropContainer`](#fileuploaderdropcontainer) +- [`FileUploaderItem`](#fileuploaderitem) +- [`FileUploaderSkeleton`](#fileuploaderskeleton) +- [`Filename`](#filename) +- [`FluidForm`](#fluidform) +- [`Form`](#form) +- [`FormGroup`](#formgroup) +- [`FormItem`](#formitem) +- [`FormLabel`](#formlabel) +- [`Grid`](#grid) +- [`Header`](#header) +- [`HeaderAction`](#headeraction) +- [`HeaderActionLink`](#headeractionlink) +- [`HeaderActionSearch`](#headeractionsearch) +- [`HeaderGlobalAction`](#headerglobalaction) +- [`HeaderNav`](#headernav) +- [`HeaderNavItem`](#headernavitem) +- [`HeaderNavMenu`](#headernavmenu) +- [`HeaderPanelDivider`](#headerpaneldivider) +- [`HeaderPanelLink`](#headerpanellink) +- [`HeaderPanelLinks`](#headerpanellinks) +- [`HeaderUtilities`](#headerutilities) +- [`Icon`](#icon) +- [`IconSkeleton`](#iconskeleton) +- [`InlineLoading`](#inlineloading) +- [`InlineNotification`](#inlinenotification) +- [`Link`](#link) +- [`ListBox`](#listbox) +- [`ListBoxField`](#listboxfield) +- [`ListBoxMenu`](#listboxmenu) +- [`ListBoxMenuIcon`](#listboxmenuicon) +- [`ListBoxMenuItem`](#listboxmenuitem) +- [`ListBoxSelection`](#listboxselection) +- [`ListItem`](#listitem) +- [`Loading`](#loading) +- [`Modal`](#modal) +- [`ModalBody`](#modalbody) +- [`ModalFooter`](#modalfooter) +- [`ModalHeader`](#modalheader) +- [`MultiSelect`](#multiselect) +- [`NotificationActionButton`](#notificationactionbutton) +- [`NotificationButton`](#notificationbutton) +- [`NotificationIcon`](#notificationicon) +- [`NotificationTextDetails`](#notificationtextdetails) +- [`NumberInput`](#numberinput) +- [`NumberInputSkeleton`](#numberinputskeleton) +- [`OrderedList`](#orderedlist) +- [`OverflowMenu`](#overflowmenu) +- [`OverflowMenuItem`](#overflowmenuitem) +- [`Pagination`](#pagination) +- [`PaginationNav`](#paginationnav) +- [`PaginationSkeleton`](#paginationskeleton) +- [`PasswordInput`](#passwordinput) +- [`ProgressIndicator`](#progressindicator) +- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) +- [`ProgressStep`](#progressstep) +- [`RadioButton`](#radiobutton) +- [`RadioButtonGroup`](#radiobuttongroup) +- [`RadioButtonSkeleton`](#radiobuttonskeleton) +- [`RadioTile`](#radiotile) +- [`Row`](#row) +- [`Search`](#search) +- [`SearchSkeleton`](#searchskeleton) +- [`Select`](#select) +- [`SelectItem`](#selectitem) +- [`SelectItemGroup`](#selectitemgroup) +- [`SelectSkeleton`](#selectskeleton) +- [`SelectableTile`](#selectabletile) +- [`SideNav`](#sidenav) +- [`SideNavItems`](#sidenavitems) +- [`SideNavLink`](#sidenavlink) +- [`SideNavMenu`](#sidenavmenu) +- [`SideNavMenuItem`](#sidenavmenuitem) +- [`SkeletonPlaceholder`](#skeletonplaceholder) +- [`SkeletonText`](#skeletontext) +- [`SkipToContent`](#skiptocontent) +- [`Slider`](#slider) +- [`SliderSkeleton`](#sliderskeleton) +- [`StructuredList`](#structuredlist) +- [`StructuredListBody`](#structuredlistbody) +- [`StructuredListCell`](#structuredlistcell) +- [`StructuredListHead`](#structuredlisthead) +- [`StructuredListInput`](#structuredlistinput) +- [`StructuredListRow`](#structuredlistrow) +- [`StructuredListSkeleton`](#structuredlistskeleton) +- [`Switch`](#switch) +- [`Tab`](#tab) +- [`TabContent`](#tabcontent) +- [`Table`](#table) +- [`TableBody`](#tablebody) +- [`TableCell`](#tablecell) +- [`TableContainer`](#tablecontainer) +- [`TableHead`](#tablehead) +- [`TableHeader`](#tableheader) +- [`TableRow`](#tablerow) +- [`Tabs`](#tabs) +- [`TabsSkeleton`](#tabsskeleton) +- [`Tag`](#tag) +- [`TagSkeleton`](#tagskeleton) +- [`TextArea`](#textarea) +- [`TextAreaSkeleton`](#textareaskeleton) +- [`TextInput`](#textinput) +- [`TextInputSkeleton`](#textinputskeleton) +- [`Tile`](#tile) +- [`TileGroup`](#tilegroup) +- [`TimePicker`](#timepicker) +- [`TimePickerSelect`](#timepickerselect) +- [`ToastNotification`](#toastnotification) +- [`Toggle`](#toggle) +- [`ToggleSkeleton`](#toggleskeleton) +- [`ToggleSmall`](#togglesmall) +- [`ToggleSmallSkeleton`](#togglesmallskeleton) +- [`Toolbar`](#toolbar) +- [`ToolbarBatchActions`](#toolbarbatchactions) +- [`ToolbarContent`](#toolbarcontent) +- [`ToolbarMenu`](#toolbarmenu) +- [`ToolbarMenuItem`](#toolbarmenuitem) +- [`ToolbarSearch`](#toolbarsearch) +- [`Tooltip`](#tooltip) +- [`TooltipDefinition`](#tooltipdefinition) +- [`TooltipIcon`](#tooltipicon) +- [`UnorderedList`](#unorderedlist) --- -## Accordion - -### Import path - -```js -import { Accordion } from "carbon-components-svelte"; -``` +## `Accordion` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | -| align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | -| size | "sm" | "xl" | -- | Specify the size of the accordion. | -| disabled | boolean | `false` | Set to `true` to disable the accordion. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | +| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion | +| disabled | let | No | boolean | false | Set to `true` to disable the accordion | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AccordionItem - -### Import path - -```js -import { AccordionItem } from "carbon-components-svelte"; -``` +## `AccordionItem` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- | -| title | string | `"title"` | Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>). | -| open | boolean | `false` | Set to `true` to open the first accordion item. | -| disabled | boolean | `false` | Set to `true` to disable the accordion item. | -| iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the accordion item chevron icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | +| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | +| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>) | +| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots -- **default**: `
...
` -- **"title"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| -- | Yes | -- | -- | +| title | No | -- | {title} | -### Forwarded events +### Events -- `on:animationend` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| animationend | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AccordionSkeleton - -### Import path - -```js -import { AccordionSkeleton } from "carbon-components-svelte"; -``` +## `AccordionSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------- | :------------ | :------------------------------------------------ | -| count | number | `4` | Specify the number of accordion items to render. | -| align | "start" | "end" | `"end"` | Specify alignment of accordion item chevron icon. | -| size | "sm" | "xl" | -- | Specify the size of the accordion. | -| open | boolean | `true` | Set to `false` to close the first accordion item. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | +| count | let | No | number | 4 | Specify the number of accordion items to render | +| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion | +| open | let | No | boolean | true | Set to `false` to close the first accordion item | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## AspectRatio - -### Import path - -```js -import { AspectRatio } from "carbon-components-svelte"; -``` +## `AspectRatio` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------ | -| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | `"2x1"` | Specify the aspect ratio. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## Breadcrumb - -### Import path - -```js -import { Breadcrumb } from "carbon-components-svelte"; -``` +## `Breadcrumb` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------ | :--------------------------------------------------- | -| noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | -| skeleton | boolean | `false` | Set to `true` to display skeleton state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| skeleton | let | No | boolean | false | Set to `true` to display skeleton state | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## BreadcrumbItem - -### Import path - -```js -import { BreadcrumbItem } from "carbon-components-svelte"; -``` +## `BreadcrumbItem` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------- | :------------ | :---------------------------------------------------------------- | -| href | string | -- | Set the `href` to use an anchor link. | -| isCurrentPage | boolean | `false` | Set to `true` if the breadcrumb item represents the current page. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- | +| href | let | No | string | -- | Set the `href` to use an anchor link | +| isCurrentPage | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## BreadcrumbSkeleton - -### Import path - -```js -import { BreadcrumbSkeleton } from "carbon-components-svelte"; -``` +## `BreadcrumbSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :------------ | :--------------------------------------------------- | -| noTrailingSlash | boolean | `false` | Set to `true` to hide the breadcrumb trailing slash. | -| count | number | `3` | Specify the number of breadcrumb items to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| count | let | No | number | 3 | Specify the number of breadcrumb items to render | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Button - -### Import path - -```js -import { Button } from "carbon-components-svelte"; -``` +## `Button` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | `"primary"` | Specify the kind of button. | -| size | "default" | "field" | "small" | `"default"` | Specify the size of button. | -| hasIconOnly | boolean | `false` | Set to `true` for the icon-only variant. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| iconDescription | string | -- | Specify the ARIA label for the button icon. | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| disabled | boolean | `false` | Set to `true` to disable the button. | -| href | string | -- | Set the `href` to use an anchor link. | -| tabindex | string | `"0"` | Specify the tabindex. | -| type | string | `"button"` | Specify the `type` attribute for the button element. | -| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | +| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | +| tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | +| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>) | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| disabled | let | No | boolean | false | Set to `true` to disable the button | +| href | let | No | string | -- | Set the `href` to use an anchor link | +| tabindex | let | No | string | "0" | Specify the tabindex | +| type | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | +| -- | Yes | { props?: { role: "button"; type?: string; tabindex: string; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ButtonSet - -### Import path - -```js -import { ButtonSet } from "carbon-components-svelte"; -``` +## `ButtonSet` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------------- | -| stacked | boolean | `false` | Set to `true` to stack the buttons vertically. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ButtonSkeleton - -### Import path - -```js -import { ButtonSkeleton } from "carbon-components-svelte"; -``` +## `ButtonSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------------------------- | :------------ | :-------------------------------------- | -| href | string | -- | Set the `href` to use an anchor link. | -| size | "default" | "field" | "small" | `"default"` | Specify the size of button skeleton. | -| small | boolean | `false` | Set to `true` to use the small variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | -------------------------------------- | +| href | let | No | string | -- | Set the `href` to use an anchor link | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | +| small | let | No | boolean | false | Set to `true` to use the small variant | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Checkbox - -### Import path - -```js -import { Checkbox } from "carbon-components-svelte"; -``` +## `Checkbox` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :------------------------------------------------- | -| checked | boolean | `false` | Specify whether the checkbox is checked. | -| indeterminate | boolean | `false` | Specify whether the checkbox is indeterminate. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| readonly | boolean | `false` | Set to `true` for the checkbox to be read-only. | -| disabled | boolean | `false` | Set to `true` to disable the checkbox. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| name | string | `""` | Set a name for the input element. | -| title | string | -- | Specify the title attribute for the label element. | -| id | string | -- | Set an id for the input label. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | let | Yes | boolean | false | Specify whether the checkbox is checked | +| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only | +| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| name | let | No | string | "" | Set a name for the input element | +| title | let | No | string | -- | Specify the title attribute for the label element | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------- | +| check | dispatched | boolean | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | -### Dispatched events - -- `on:check` - ---- - -## CheckboxSkeleton - -### Import path - -```js -import { CheckboxSkeleton } from "carbon-components-svelte"; -``` +## `CheckboxSkeleton` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ClickableTile - -### Import path - -```js -import { ClickableTile } from "carbon-components-svelte"; -``` +## `ClickableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| clicked | boolean | `false` | Set to `true` to click the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| href | string | -- | Set the `href`. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| clicked | let | Yes | boolean | false | Set to `true` to click the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| href | let | No | string | -- | Set the `href` | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:keydown` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CodeSnippet - -### Import path - -```js -import { CodeSnippet } from "carbon-components-svelte"; -``` +## `CodeSnippet` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------- | -| type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | -| code | string | -- | Set the code snippet text. Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>). | -| expanded | boolean | `false` | Set to `true` to expand a multi-line code snippet (type="multi"). | -| hideCopyButton | boolean | `false` | Set to `true` to hide the copy button. | -| wrapText | boolean | `false` | Set to `true` to wrap the text. Note that `type` must be "multi". | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon. | -| copyLabel | string | -- | Specify the ARIA label of the copy button. | -| feedback | string | `"Copied!"` | Specify the feedback text displayed when clicking the snippet. | -| feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | -| showLessText | string | `"Show less"` | Specify the show less text. `type` must be "multi". | -| showMoreText | string | `"Show more"` | Specify the show more text. `type` must be "multi". | -| showMoreLess | boolean | `false` | Set to `true` to enable the show more/less button. | -| id | string | -- | Set an id for the code element. | -| ref | null | HTMLPreElement | `null` | Obtain a reference to the pre HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>) | +| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | +| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | +| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | +| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | +| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------ | +| -- | Yes | -- | {code} | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CodeSnippetSkeleton - -### Import path - -```js -import { CodeSnippetSkeleton } from "carbon-components-svelte"; -``` +## `CodeSnippetSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------------------------- | :------------ | :---------------------------- | -| type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------- | --------------------- | ---------------------------- | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `Column` -No dispatched events. - ---- - -## Column - -### Import path - -```js -import { Column } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `Column` type definitions - type ColumnSize = boolean | number; interface ColumnSizeDescriptor { @@ -732,469 +558,379 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` -| Prop name | Type | Default value | Description | -| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>). | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | -| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column. | -| sm | ColumnBreakpoint | -- | Set the small breakpoint. | -| md | ColumnBreakpoint | -- | Set the medium breakpoint. | -| lg | ColumnBreakpoint | -- | Set the large breakpoint. | -| xlg | ColumnBreakpoint | -- | Set the extra large breakpoint. | -| max | ColumnBreakpoint | -- | Set the maximum breakpoint. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>) | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | +| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | +| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint | +| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint | +| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint | +| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint | +| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; } } | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events +## `ComboBox` -No dispatched events. - ---- - -## ComboBox - -### Import path - -```js -import { ComboBox } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ComboBox` type definitions - interface ComboBoxItem { id: string; text: string; } ``` -| Prop name | Type | Default value | Description | -| :--------------- | :---------------------------------------------------------- | :------------ | :------------------------------------------------------------------------ | -| items | ComboBoxItem[] | `[]` | Set the combobox items. | -| itemToString | (item: ComboBoxItem) => string | -- | Override the display of a combobox item. | -| selectedIndex | number | -- | Set the selected item by value index. | -| value | string | `""` | Specify the selected combobox value. | -| size | "sm" | "xl" | -- | Set the size of the combobox. | -| disabled | boolean | `false` | Set to `true` to disable the combobox. | -| titleText | string | `""` | Specify the title text of the combobox. | -| placeholder | string | `""` | Specify the placeholder text. | -| helperText | string | `""` | Specify the helper text. | -| invalidText | string | `""` | Specify the invalid state text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| open | boolean | `false` | Set to `true` to open the combobox menu dropdown. | -| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | Determine if an item should be filtered given the current combobox value. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | -| listRef | null | HTMLDivElement | `null` | Obtain a reference to the list HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | +| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| value | let | Yes | string | "" | Specify the selected combobox value | +| selectedIndex | let | Yes | number | -1 | Set the selected item by value index | +| items | let | No | ComboBoxItem[] | [] | Set the combobox items | +| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| size | let | No | "sm" | "xl" | -- | Set the size of the combobox | +| disabled | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | let | No | string | "" | Specify the title text of the combobox | +| placeholder | let | No | string | "" | Specify the placeholder text | +| helperText | let | No | string | "" | Specify the helper text | +| invalidText | let | No | string | "" | Specify the invalid state text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | -- | Specify a name attribute for the input | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:keydown` -- `on:focus` -- `on:blur` -- `on:clear` -- `on:scroll` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------------------------------------------------------------- | +| select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| clear | forwarded | -- | +| scroll | forwarded | -- | -### Dispatched events - -- `on:select` - ---- - -## ComposedModal - -### Import path - -```js -import { ComposedModal } from "carbon-components-svelte"; -``` +## `ComposedModal` ### Props -| Prop name | Type | Default value | Description | -| :------------------------- | :---------------------------------------- | :----------------------------- | :--------------------------------------------------------------------- | -| size | "xs" | "sm" | "lg" | -- | Set the size of the composed modal. | -| open | boolean | `false` | Set to `true` to open the modal. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | -| containerClass | string | `""` | Specify a class for the inner modal. | -| selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the composed modal | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| containerClass | let | No | string | "" | Specify a class for the inner modal | +| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:transitionend` +| Event name | Type | Detail | +| :------------ | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| transitionend | forwarded | -- | +| submit | dispatched | -- | +| close | dispatched | -- | +| open | dispatched | -- | -### Dispatched events - -- `on:submit` -- `on:close` -- `on:open` - ---- - -## Content - -### Import path - -```js -import { Content } from "carbon-components-svelte"; -``` +## `Content` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :--------------- | :----------------------------------- | -| id | string | `"main-content"` | Specify the id for the main element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- | +| id | let | No | string | "main-content" | Specify the id for the main element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ContentSwitcher - -### Import path - -```js -import { ContentSwitcher } from "carbon-components-svelte"; -``` +## `ContentSwitcher` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------- | :------------ | :----------------------------------------- | -| selectedIndex | number | `0` | Set the selected index of the switch item. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| size | "sm" | "xl" | -- | Specify the size of the content switcher. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- | +| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| size | let | No | "sm" | "xl" | -- | Specify the size of the content switcher | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :--------- | :------------------ | +| change | dispatched | number | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -- `on:change` - ---- - -## Copy - -### Import path - -```js -import { Copy } from "carbon-components-svelte"; -``` +## `Copy` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------- | :------------ | :------------------------------------------------------ | -| feedback | string | `"Copied!"` | Set the feedback text shown after clicking the button. | -| feedbackTimeout | number | `2000` | Set the timeout duration (ms) to display feedback text. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------------------------------------------------------------------- | +| -- | Yes | -- | {#if animation}{feedback || \$\$restProps['aria-label']}{/if} | -### Forwarded events +### Events -- `on:click` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## CopyButton - -### Import path - -```js -import { CopyButton } from "carbon-components-svelte"; -``` +## `CopyButton` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------ | :-------------------- | :------------------------------------------------ | -| iconDescription | string | `"Copy to clipboard"` | Set the title and ARIA label for the copy button. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ | +| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:animationend` +| Event name | Type | Detail | +| :----------- | :-------- | :----- | +| click | forwarded | -- | +| animationend | forwarded | -- | -### Dispatched events +## `DataTable` -No dispatched events. - ---- - -## DataTable - -### Import path - -```js -import { DataTable } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------- | -| headers | { key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[] | `[]` | Specify the data table headers. | -| rows | Object[] | `[]` | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | -| title | string | `""` | Specify the title of the data table. | -| description | string | `""` | Specify the description of the data table. | -| zebra | boolean | `false` | Set to `true` to use zebra styles. | -| sortable | boolean | `false` | Set to `true` for the sortable variant. | -| expandable | boolean | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. | -| batchExpansion | boolean | `false` | Set to `true` to enable batch expansion. | -| expandedRowIds | string[] | `[]` | Specify the row ids to be expanded. | -| radio | boolean | `false` | Set to `true` for the radio selection variant. | -| selectable | boolean | `false` | Set to `true` for the selectable variant. Automatically set to `true` if `radio` or `batchSelection` are `true`. | -| batchSelection | boolean | `false` | Set to `true` to enable batch selection. | -| selectedRowIds | string[] | `[]` | Specify the row ids to be selected. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | - -### Slots - -- **default**: `
...
` -- **"cell-header"**: `
...
` -- **"cell"**: `
...
` -- **"expanded-row"**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:click:header--expand` -- `on:click` -- `on:click:header` -- `on:click:row` -- `on:mouseenter:row` -- `on:mouseleave:row` -- `on:click:row--expand` -- `on:click:cell` - ---- - -## DataTableSkeleton - -### Import path - -```js -import { DataTableSkeleton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------- | -| columns | number | `5` | Specify the number of columns. | -| rows | number | `5` | Specify the number of rows. | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table. | -| zebra | boolean | `false` | Set to `true` to apply zebra styles to the datatable rows. | -| showHeader | boolean | `true` | Set to `false` to hide the header. | -| headers | string[] | `[]` | Set the column headers. If `headers` has one more items, `count` is ignored. | -| showToolbar | boolean | `true` | Set to `false` to hide the toolbar. | - -### 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 | Description | -| :------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------- | -| datePickerType | "simple" | "single" | "range" | `"simple"` | Specify the date picker type. | -| value | string | `""` | Specify the date picker input value. | -| appendTo | HTMLElement | -- | Specify the element to append the calendar to. | -| dateFormat | string | `"m/d/Y"` | Specify the date format. | -| maxDate | null | string | Date | `null` | Specify the maximum date. | -| minDate | null | string | Date | `null` | Specify the minimum date. | -| locale | string | `"en"` | Specify the locale. | -| short | boolean | `false` | Set to `true` to use the short variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| id | string | -- | Set an id for the date picker element. | - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :-------------- | :---------------------------------------- | :------------------------------- | :-------------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| type | string | `"text"` | Specify the input type. | -| placeholder | string | `""` | Specify the input placeholder text. | -| pattern | string | `"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"` | Specify the Regular Expression for the input value. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| iconDescription | string | `""` | Specify the ARIA label for the calendar icon. | -| id | string | -- | Set an id for the input element. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| name | string | -- | Set a name for the input element. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:input` -- `on:keydown` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- - -## DatePickerSkeleton - -### Import path - -```js -import { DatePickerSkeleton } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| range | boolean | `false` | Set to `true` to use the range variant. | -| id | string | -- | Set an id to be used by the label element. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- - -## Dropdown - -### Import path - -```js -import { Dropdown } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `Dropdown` type definitions +interface Header { + key: string; + value: string; + display?: (item) => string; + sort?: (a, b) => number; + empty?: boolean; + columnMenu?: boolean; +} +type Headers = Header[]; +``` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | let | Yes | string[] | [] | Specify the row ids to be selected | +| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | let | Yes | string[] | [] | Specify the row ids to be expanded | +| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| rows | let | Yes | Object[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| headers | let | No | Headers | [] | Specify the data table headers | +| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | +| title | let | No | string | "" | Specify the title of the data table | +| description | let | No | string | "" | Specify the description of the data table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | +| radio | let | No | boolean | false | Set to `true` for the radio selection variant | +| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | + +### Slots + +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :------------------------------------------- | :------------------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: Object; cell: Object; } | {headers[j].display ? headers[j].display(cell.value) : cell.value} | +| cell-header | No | { header: Header} | {header.value} | +| expanded-row | No | { row: Object; } | -- | + +### Events + +| Event name | Type | Detail | +| :------------------- | :--------- | :-------------------------------------------------------------------------------------------- | +| click | dispatched | { header?: Header; row?: Object; cell?: Object; } | +| click:header--expand | dispatched | { expanded: boolean; } | +| click:header | dispatched | { header: Header; sortDirection: "ascending" | "descending" | "none" } | +| click:row | dispatched | Object | +| mouseenter:row | dispatched | Object | +| mouseleave:row | dispatched | Object | +| click:row--expand | dispatched | { expanded: boolean; row: Object; } | +| click:cell | dispatched | Object | + +## `DataTableSkeleton` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------- | +| columns | let | No | number | 5 | Specify the number of columns | +| rows | let | No | number | 5 | Specify the number of rows | +| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | +| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows | +| showHeader | let | No | boolean | true | Set to `false` to hide the header | +| headers | let | No | string[] | [] | Set the column headers
If `headers` has one more items, `count` is ignored | +| showToolbar | let | No | boolean | true | Set to `false` to hide the toolbar | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `DatePicker` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | +| value | let | Yes | string | "" | Specify the date picker input value | +| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | +| appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to | +| dateFormat | let | No | string | "m/d/Y" | Specify the date format | +| maxDate | let | No | null | string | Date | null | Specify the maximum date | +| minDate | let | No | null | string | Date | null | Specify the minimum date | +| locale | let | No | string | "en" | Specify the locale | +| short | let | No | boolean | false | Set to `true` to use the short variant | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | +| undefined | dispatched | -- | + +## `DatePickerInput` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| type | let | No | string | "text" | Specify the input type | +| placeholder | let | No | string | "" | Specify the input placeholder text | +| pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| name | let | No | string | -- | Set a name for the input element | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| blur | forwarded | -- | + +## `DatePickerSkeleton` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- | +| range | let | No | boolean | false | Set to `true` to use the range variant | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `Dropdown` + +### Types + +```ts type DropdownItemId = string; type DropdownItemText = string; @@ -1205,1507 +941,1121 @@ interface DropdownItem { } ``` -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------ | :------------ | :--------------------------------------------- | -| items | DropdownItem[] | `[]` | Set the dropdown items. | -| itemToString | (item: DropdownItem) => string | -- | Override the display of a dropdown item. | -| selectedIndex | number | -- | Specify the selected item index. | -| type | "default" | "inline" | `"default"` | Specify the type of dropdown. | -| size | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field. | -| open | boolean | `false` | Set to `true` to open the dropdown. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the dropdown. | -| titleText | string | `""` | Specify the title text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | -- | Specify the list box label. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the list box. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| selectedIndex | let | Yes | number | -1 | Specify the selected item index | +| items | let | No | DropdownItem[] | [] | Set the dropdown items | +| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | +| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | +| size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| titleText | let | No | string | "" | Specify the title text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | -- | Specify the list box label | +| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | -- | Specify a name attribute for the list box | ### Slots -No slots. +None. -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :--------------------------------------------------------------------------------------------- | +| select | dispatched | { selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem } | -### Dispatched events - -- `on:select` - ---- - -## DropdownSkeleton - -### Import path - -```js -import { DropdownSkeleton } from "carbon-components-svelte"; -``` +## `DropdownSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| inline | boolean | `false` | Set to `true` to use the inline variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ExpandableTile - -### Import path - -```js -import { ExpandableTile } from "carbon-components-svelte"; -``` +## `ExpandableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :----------------------------------- | :---------------------------- | :----------------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to expand the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| tileMaxHeight | number | `0` | Specify the max height of the tile (number of pixels). | -| tilePadding | number | `0` | Specify the padding of the tile (number of pixels). | -| tileCollapsedIconText | string | `"Interact to expand Tile"` | Specify the icon text of the collapsed tile. | -| tileExpandedIconText | string | `"Interact to collapse Tile"` | Specify the icon text of the expanded tile. | -| tabindex | string | `"0"` | Specify the tabindex. | -| id | string | -- | Set an id for the top-level div element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level element | +| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | +| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | +| expanded | let | Yes | boolean | false | Set to `true` to expand the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | +| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | +| tabindex | let | No | string | "0" | Specify the tabindex | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | ### Slots -- **"above"**: `
...
` -- **"below"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| above | No | -- | -- | +| below | No | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:keypress` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keypress | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `FileUploader` -No dispatched events. - ---- - -## FileUploader - -### Import path - -```js -import { FileUploader } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :---------------------- | :----------------------------------------------------------------------------------------- | :--------------------------- | :--------------------------------------------------------------------- | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | -| accept | string[] | `[]` | Specify the accepted file types. | -| files | string[] | `[]` | Obtain the uploaded file names. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| clearFiles (`constant`) | () => any | -- | Override the default behavior of clearing the array of uploaded files. | -| labelDescription | string | `""` | Specify the label description. | -| labelTitle | string | `""` | Specify the label title. | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | -| buttonLabel | string | `""` | Specify the button label. | -| iconDescription | string | `"Provide icon description"` | Specify the ARIA label used for the status icons. | -| name | string | `""` | Specify a name attribute for the file button uploader input. | - -### 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 | Description | -| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | -| accept | string[] | `[]` | Specify the accepted file types. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| disableLabelChanges | boolean | `false` | Set to `true` to disable label changes. | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. | -| labelText | string | `"Add file"` | Specify the label text. | -| role | string | `"button"` | Specify the label role. | -| tabindex | string | `"0"` | Specify `tabindex` attribute. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### 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 +### Types ```ts -// `FileUploaderDropContainer` type definitions - type Files = string[]; ``` -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | -| accept | string[] | `[]` | Specify the accepted file types. | -| multiple | boolean | `false` | Set to `true` to allow multiple files. | -| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files. | -| labelText | string | `"Add file"` | Specify the label text. | -| role | string | `"button"` | Specify the `role` attribute of the drop container. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| tabindex | string | `"0"` | Specify `tabindex` attribute. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | +| files | let | Yes | Files | [] | Obtain the uploaded file names | +| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| accept | let | No | Files | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | +| labelDescription | let | No | string | "" | Specify the label description | +| labelTitle | let | No | string | "" | Specify the label title | +| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| buttonLabel | let | No | string | "" | Specify the button label | +| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | let | No | string | "" | Specify a name attribute for the file button uploader input | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:dragover` -- `on:dragleave` -- `on:drop` -- `on:keydown` -- `on:change` -- `on:click` +| Event name | Type | Detail | +| :--------- | :--------- | :----------------- | +| add | dispatched | Files | +| remove | dispatched | Files | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keydown | forwarded | -- | -### Dispatched events +## `FileUploaderButton` -- `on:add` - ---- - -## FileUploaderItem - -### Import path - -```js -import { FileUploaderItem } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. | -| iconDescription | string | `""` | Specify the ARIA label used for the status icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| errorSubject | string | `""` | Specify the error subject text. | -| errorBody | string | `""` | Specify the error body text. | -| id | string | -- | Set an id for the top-level element. | -| name | string | `""` | Specify the file uploader name. | - -### Slots - -No slots. - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:delete` - ---- - -## FileUploaderSkeleton - -### Import path - -```js -import { FileUploaderSkeleton } 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. - ---- - -## Filename - -### Import path - -```js -import { Filename } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ | -| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file name status. | -| iconDescription | string | `""` | Specify the ARIA label used for the status icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | - -### Slots - -No slots. - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- - -## FluidForm - -### Import path - -```js -import { FluidForm } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- - -## Form - -### Import path - -```js -import { Form } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :---------- | :------------------- | :------------ | :------------------------------------------ | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| message | boolean | `false` | Set to `true` to render a form requirement. | -| messageText | string | `""` | Specify the message text. | -| legendText | string | `""` | Specify the legend text. | - -### Slots - -- **default**: `
...
` - -### 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 - -- **default**: `
...
` - -### 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 | Description | -| :-------- | :------------------ | :------------ | :----------------------------------------- | -| id | string | -- | Set an id to be used by the label element. | - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>). | -| condensed | boolean | `false` | Set to `true` to use the condensed variant. | -| narrow | boolean | `false` | Set to `true` to use the narrow variant. | -| fullWidth | boolean | `false` | Set to `true` to use the fullWidth variant. | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :---------------- | :----------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- | -| expandedByDefault | boolean | `true` | Set to `false` to hide the side nav by default. | -| isSideNavOpen | boolean | `false` | Set to `true` to open the side nav. | -| uiShellAriaLabel | string | -- | Specify the ARIA label for the header. | -| href | string | -- | Specify the `href` attribute. | -| company | string | -- | Specify the company name. | -| platformName | string | `""` | Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>). | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -- **default**: `
...
` -- **"skip-to-content"**: `
...
` -- **"platform"**: `
...
` - -### 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 | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | -| isOpen | boolean | `false` | Set to `true` to open the panel. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| text | string | -- | Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>). | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | - -### Slots - -- **default**: `
...
` -- **"text"**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -- `on:close` - ---- - -## HeaderActionLink - -### Import path - -```js -import { HeaderActionLink } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| linkIsActive | boolean | `false` | Set to `true` to use the active state. | -| href | string | -- | Specify the `href` attribute. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### 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 | Description | -| :------------- | :------------------- | :------------ | :--------------------------------- | -| searchIsActive | boolean | `false` | Set to `true` to focus the search. | - -### Slots - -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:focusInputSearch` -- `on:focusOutInputSearch` -- `on:inputSearch` - ---- - -## HeaderGlobalAction - -### Import path - -```js -import { HeaderGlobalAction } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------- | -| isActive | boolean | `false` | Set to `true` to use the active variant. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon to render. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderNav - -### Import path - -```js -import { HeaderNav } from "carbon-components-svelte"; -``` - -### Props - -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :---------------------------------- | -| ariaLabel | string | -- | Specify the ARIA label for the nav. | - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### 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 | Description | -| :-------------- | :----------------------------------------- | :------------------ | :--------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to toggle the expanded state. | -| href | string | `"/"` | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | -| iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the chevron icon. | - -### Slots - -- **default**: `
...
` - -### 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 - -- **default**: `
...
` - -### 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 | Description | -| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| href | string | -- | Specify the `href` attribute. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## HeaderPanelLinks - -### Import path - -```js -import { HeaderPanelLinks } from "carbon-components-svelte"; -``` - -### Props - -No exported props. - -### Slots - -- **default**: `
...
` - -### 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 - -- **default**: `
...
` - -### 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 | Description | -| :-------- | :------------------------------------------------------------------ | :------------ | :------------------------------------------------------------------------------------------------------ | -| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`). | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | - -### 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 | Description | -| :-------- | :------------------ | :------------ | :------------------------ | -| size | number | `16` | Set the size of the icon. | - -### 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 | Description | -| :-------------- | :----------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------- | -| status | "active" | "inactive" | "finished" | "error" | `"active"` | Set the loading status. | -| description | string | -- | Set the loading description. | -| iconDescription | string | -- | Specify the ARIA label for the loading icon. | -| successDelay | number | `1500` | Specify the timeout delay (ms) after `status` is set to "success". | - -### 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 | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | -| notificationType | "toast" | "inline" | `"inline"` | Set the type of notification. | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | -| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | -| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | -| role | string | `"alert"` | Set the `role` attribute. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | - -### Slots - -- **default**: `
...
` -- **"actions"**: `
...
` - -### 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 | Description | -| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ | -| size | "sm" | "lg" | -- | Specify the size of the link. | -| href | string | -- | Specify the href value. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| disabled | boolean | `false` | Set to `true` to disable the checkbox. | -| visited | boolean | `false` | Set to `true` to allow visited styles. | -| ref | null | HTMLAnchorElement | HTMLParagraphElement | `null` | Obtain a reference to the top-level HTML element. | - -### Slots - -- **default**: `
...
` - -### 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 | Description | -| :---------- | :------------------------------------- | :------------ | :------------------------------------------ | -| size | "sm" | "xl" | -- | Set the size of the list box. | -| type | "default" | "inline" | `"default"` | Set the type of the list box. | -| open | boolean | `false` | Set to `true` to open the list box. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the list box. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | - -### Slots - -- **default**: `
...
` - -### Forwarded events - -- `on:keydown` -- `on:click` - -### Dispatched events - -No dispatched events. - ---- - -## ListBoxField - -### Import path - -```js -import { ListBoxField } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxField` type definitions +type Files = string[]; +``` +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| labelText | let | Yes | string | "Add file" | Specify the label text | +| accept | let | No | Files | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes | +| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| role | let | No | string | "button" | Specify the label role | +| tabindex | let | No | string | "0" | Specify `tabindex` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| keydown | forwarded | -- | +| change | forwarded | -- | +| click | forwarded | -- | + +## `FileUploaderDropContainer` + +### Types + +```ts +type Files = string[]; +``` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| accept | let | No | Files | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | let | No | (files: Files) => Files | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | +| labelText | let | No | string | "Add file" | Specify the label text | +| role | let | No | string | "button" | Specify the `role` attribute of the drop container | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| tabindex | let | No | string | "0" | Specify `tabindex` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----------------- | +| add | dispatched | Files | +| dragover | forwarded | -- | +| dragleave | forwarded | -- | +| drop | forwarded | -- | +| keydown | forwarded | -- | +| change | forwarded | -- | +| click | forwarded | -- | + +## `FileUploaderItem` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | +| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| errorSubject | let | No | string | "" | Specify the error subject text | +| errorBody | let | No | string | "" | Specify the error body text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| name | let | No | string | "" | Specify the file uploader name | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :------------------ | +| delete | dispatched | string | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `FileUploaderSkeleton` + +### Props + +None. + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `Filename` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ | +| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status | +| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | + +## `FluidForm` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + +## `Form` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| submit | forwarded | -- | + +## `FormGroup` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| message | let | No | boolean | false | Set to `true` to render a form requirement | +| messageText | let | No | string | "" | Specify the message text | +| legendText | let | No | string | "" | Specify the legend text | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `FormItem` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `FormLabel` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `Grid` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>) | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; } } | -- | + +### Events + +None. + +## `Header` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | +| href | let | No | string | -- | Specify the `href` attribute | +| company | let | No | string | -- | Specify the company name | +| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>) | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------------- | :------ | :---- | :-------------------------- | +| -- | Yes | -- | -- | +| platform | No | -- | {platformName} | +| skip-to-content | No | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | + +## `HeaderAction` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------ | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| isOpen | let | Yes | boolean | false | Set to `true` to open the panel | +| icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>) | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------------- | +| -- | Yes | -- | -- | +| text | No | -- | {#if text}<span>{text}</span>{/if} | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| close | dispatched | -- | +| undefined | dispatched | -- | + +## `HeaderActionLink` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| linkIsActive | let | No | boolean | false | Set to `true` to use the active state | +| href | let | No | string | -- | Specify the `href` attribute | +| icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | + +### Slots + +None. + +### Events + +None. + +## `HeaderActionSearch` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | +| searchIsActive | let | Yes | boolean | false | Set to `true` to focus the search | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :------------------ | :--------- | :---------------------------------------------------- | +| inputSearch | dispatched | { action: "search"; textInput: string; } | +| focusInputSearch | dispatched | -- | +| focusOutInputSearch | dispatched | -- | + +## `HeaderGlobalAction` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| isActive | let | No | boolean | false | Set to `true` to use the active variant | +| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | <svelte:component this="{icon}" /> | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | + +## `HeaderNav` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- | +| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + +## `HeaderNavItem` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the text | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keyup | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | + +## `HeaderNavMenu` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| href | let | No | string | "/" | Specify the `href` attribute | +| text | let | No | string | -- | Specify the text | +| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the chevron icon | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| keydown | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | + +## `HeaderPanelDivider` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + +## `HeaderPanelLink` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | let | No | string | -- | Specify the `href` attribute | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | + +## `HeaderPanelLinks` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + +## `HeaderUtilities` + +### Props + +None. + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + +## `Icon` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | +| render | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render
Icon size must be 16px (e.g. `Add16`, `Task16`) | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `IconSkeleton` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ | +| size | let | No | number | 16 | Set the size of the icon | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `InlineLoading` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- | +| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | +| description | let | No | string | -- | Set the loading description | +| iconDescription | let | No | string | -- | Specify the ARIA label for the loading icon | +| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | + +### Slots + +None. + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| success | dispatched | -- | + +## `InlineNotification` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "inline" | Set the type of notification | +| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | let | No | string | "alert" | Set the `role` attribute | +| title | let | No | string | "Title" | Specify the title text | +| subtitle | let | No | string | "" | Specify the subtitle text | +| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | +| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | +| actions | No | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | -- | + +## `Link` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ | +| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | +| size | let | No | "sm" | "lg" | -- | Specify the size of the link | +| href | let | No | string | -- | Specify the href value | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | +| visited | let | No | boolean | false | Set to `true` to allow visited styles | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | + +## `ListBox` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ | +| size | let | No | "sm" | "xl" | -- | Set the size of the list box | +| type | let | No | "default" | "inline" | "default" | Set the type of the list box | +| open | let | No | boolean | false | Set to `true` to open the list box | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the list box | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| keydown | forwarded | -- | +| click | forwarded | -- | + +## `ListBoxField` + +### Types + +```ts type ListBoxFieldTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :----------------------------------------------------- | :--------------------------------- | :------------------------------------------------ | -| disabled | boolean | `false` | Set to `true` to disable the list box field. | -| role | string | `"combobox"` | Specify the role attribute. | -| tabindex | string | `"-1"` | Specify the tabindex. | -| translationIds (`constant`) | { close: "close"; open: "open"; } | `{ close: "close", open: "open" }` | Default translation ids. | -| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | Override the default translation ids. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| disabled | let | No | boolean | false | Set to `true` to disable the list box field | +| role | let | No | string | "combobox" | Specify the role attribute | +| tabindex | let | No | string | "-1" | Specify the tabindex | +| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| blur | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ListBoxMenu - -### Import path - -```js -import { ListBoxMenu } from "carbon-components-svelte"; -``` +## `ListBoxMenu` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------- | :------------ | :-------------------------------------------- | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLDivElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:scroll` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| scroll | forwarded | -- | -### Dispatched events +## `ListBoxMenuIcon` -No dispatched events. - ---- - -## ListBoxMenuIcon - -### Import path - -```js -import { ListBoxMenuIcon } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxMenuIcon` type definitions - type ListBoxMenuIconTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :-------------------------------------------------------- | :--------------------------------- | :-------------------------------------------- | -| open | boolean | `false` | Set to `true` to open the list box menu icon. | -| translationIds (`constant`) | { close: "close"; open: "open" } | `{ close: "close", open: "open" }` | Default translation ids. | -| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | Override the default translation ids. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- | +| open | let | No | boolean | false | Set to `true` to open the list box menu icon | +| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ListBoxMenuItem - -### Import path - -```js -import { ListBoxMenuItem } from "carbon-components-svelte"; -``` +## `ListBoxMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------- | :------------ | :--------------------------------------------- | -| active | boolean | `false` | Set to `true` to enable the active state. | -| highlighted | boolean | `false` | Set to `true` to enable the highlighted state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| active | let | No | boolean | false | Set to `true` to enable the active state | +| highlighted | let | No | boolean | false | Set to `true` to enable the highlighted state | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events +## `ListBoxSelection` -No dispatched events. - ---- - -## ListBoxSelection - -### Import path - -```js -import { ListBoxSelection } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `ListBoxSelection` type definitions - type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------ | :------------------------------------------------ | -| selectionCount | any | -- | Specify the number of selected items. | -| disabled | boolean | `false` | Set to `true` to disable the list box selection. | -| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | `{ clearAll: "clearAll", clearSelection: "clearSelection", }` | Default translation ids. | -| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | Override the default translation ids. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| selectionCount | let | No | any | -- | Specify the number of selected items | +| disabled | let | No | boolean | false | Set to `true` to disable the list box selection | +| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | +| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots -No slots. +None. -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| clear | dispatched | -- | -### Dispatched events - -- `on:clear` - ---- - -## ListItem - -### Import path - -```js -import { ListItem } from "carbon-components-svelte"; -``` +## `ListItem` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Loading - -### Import path - -```js -import { Loading } from "carbon-components-svelte"; -``` +## `Loading` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------- | :--------------------------- | :------------------------------------------ | -| small | boolean | `false` | Set to `true` to use the small variant. | -| active | boolean | `true` | Set to `false` to disable the active state. | -| withOverlay | boolean | `true` | Set to `false` to disable the overlay. | -| description | string | `"Active loading indicator"` | Specify the label description. | -| id | string | -- | Set an id for the label element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | +| small | let | No | boolean | false | Set to `true` to use the small variant | +| active | let | No | boolean | true | Set to `false` to disable the active state | +| withOverlay | let | No | boolean | true | Set to `false` to disable the overlay | +| description | let | No | string | "Active loading indicator" | Specify the label description | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element | ### Slots -No slots. +None. -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## Modal - -### Import path - -```js -import { Modal } from "carbon-components-svelte"; -``` +## `Modal` ### Props -| Prop name | Type | Default value | Description | -| :------------------------- | :---------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------- | -| size | "xs" | "sm" | "lg" | -- | Set the size of the modal. | -| open | boolean | `false` | Set to `true` to open the modal. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| alert | boolean | `false` | Set to `true` to enable alert mode. | -| passiveModal | boolean | `false` | Set to `true` to use the passive variant. | -| modalHeading | string | -- | Specify the modal heading. | -| modalLabel | string | -- | Specify the modal label. | -| modalAriaLabel | string | -- | Specify the ARIA label for the modal. | -| iconDescription | string | `"Close the modal"` | Specify the ARIA label for the close icon. | -| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | -| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | -| primaryButtonText | string | `""` | Specify the primary button text. | -| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | -| shouldSubmitOnEnter | boolean | `true` | Set to `true` for the primary button to be triggered when pressing "Enter". | -| secondaryButtonText | string | `""` | Specify the secondary button text. | -| selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. | -| preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| alert | let | No | boolean | false | Set to `true` to enable alert mode | +| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant | +| modalHeading | let | No | string | -- | Specify the modal heading | +| modalLabel | let | No | string | -- | Specify the modal label | +| modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal | +| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | +| primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the primary button to be triggered when pressing "Enter" | +| secondaryButtonText | let | No | string | "" | Specify the secondary button text | +| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` -- **"label"**: `
...
` -- **"heading"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------- | +| -- | Yes | -- | -- | +| heading | No | -- | {modalHeading} | +| label | No | -- | {modalLabel} | -### Forwarded events +### Events -- `on:keydown` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :---------------------- | :--------- | :----- | +| keydown | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| submit | dispatched | -- | +| click:button--secondary | dispatched | -- | +| close | dispatched | -- | +| open | dispatched | -- | -### Dispatched events - -- `on:submit` -- `on:click:button--secondary` -- `on:close` -- `on:open` - ---- - -## ModalBody - -### Import path - -```js -import { ModalBody } from "carbon-components-svelte"; -``` +## `ModalBody` ### Props -| Prop name | Type | Default value | Description | -| :------------------ | :------------------- | :------------ | :----------------------------------------------------- | -| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. | -| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ModalFooter - -### Import path - -```js -import { ModalFooter } from "carbon-components-svelte"; -``` +## `ModalFooter` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :------------------- | :------------ | :------------------------------------------- | -| primaryButtonText | string | `""` | Specify the primary button text. | -| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. | -| primaryClass | string | -- | Specify a class for the primary button. | -| secondaryButtonText | string | `""` | Specify the secondary button text. | -| secondaryClass | string | -- | Specify a class for the secondary button. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------- | +| primaryButtonText | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | let | No | string | -- | Specify a class for the primary button | +| secondaryButtonText | let | No | string | "" | Specify the secondary button text | +| secondaryClass | let | No | string | -- | Specify a class for the secondary button | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ModalHeader - -### Import path - -```js -import { ModalHeader } from "carbon-components-svelte"; -``` +## `ModalHeader` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------ | :------------ | :----------------------------------------- | -| title | string | `""` | Specify the modal title. | -| label | string | `""` | Specify the modal label. | -| labelClass | string | `""` | Specify the label class. | -| titleClass | string | `""` | Specify the title class. | -| closeClass | string | `""` | Specify the close class. | -| closeIconClass | string | `""` | Specify the close icon class. | -| iconDescription | string | `"Close"` | Specify the ARIA label for the close icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- | +| title | let | No | string | "" | Specify the modal title | +| label | let | No | string | "" | Specify the modal label | +| labelClass | let | No | string | "" | Specify the label class | +| titleClass | let | No | string | "" | Specify the title class | +| closeClass | let | No | string | "" | Specify the close class | +| closeIconClass | let | No | string | "" | Specify the close icon class | +| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Dispatched events +## `MultiSelect` -No dispatched events. - ---- - -## MultiSelect - -### Import path - -```js -import { MultiSelect } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `MultiSelect` type definitions - type MultiSelectItemId = string; type MultiSelectItemText = string; @@ -2716,2853 +2066,2109 @@ interface MultiSelectItem { } ``` -| Prop name | Type | Default value | Description | -| :---------------- | :----------------------------------------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- | -| items | MultiSelectItem[] | `[]` | Set the multiselect items. | -| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item. | -| selectedIds | MultiSelectItemId[] | `[]` | Set the selected ids. | -| value | string | `""` | Specify the multiselect value. | -| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox. | -| type | "default" | "inline" | `"default"` | Specify the type of multiselect. | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | `"top-after-reopen"` | Specify the selection feedback after selecting items. | -| disabled | boolean | `false` | Set to `true` to disable the dropdown. | -| filterable | boolean | `false` | Set to `true` to filter items. | -| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic. The default filtering is an exact string comparison. | -| open | boolean | `false` | Set to `true` to open the dropdown. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| locale | string | `"en"` | Specify the locale. | -| placeholder | string | `""` | Specify the placeholder text. | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic. The default sorting compare the item text value. | -| translateWithId | (id: any) => string | -- | Override the default translation ids. | -| titleText | string | `""` | Specify the title text. | -| useTitleInItem | boolean | `false` | Set to `true` to pass the item to `itemToString` in the checkbox. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | `""` | Specify the list box label. | -| id | string | -- | Set an id for the list box component. | -| name | string | -- | Specify a name attribute for the select. | +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | +| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | +| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | +| size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox | +| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | let | No | boolean | false | Set to `true` to filter items | +| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | let | No | string | "en" | Specify the locale | +| placeholder | let | No | string | "" | Specify the placeholder text | +| sortItem | let | No | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | +| titleText | let | No | string | "" | Specify the title text | +| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the list box label | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | -- | Specify a name attribute for the select | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:clear` -- `on:keydown` -- `on:focus` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| clear | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| select | dispatched | -- | -### Dispatched events - -- `on:select` - ---- - -## NotificationActionButton - -### Import path - -```js -import { NotificationActionButton } from "carbon-components-svelte"; -``` +## `NotificationActionButton` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## NotificationButton - -### Import path - -```js -import { NotificationButton } from "carbon-components-svelte"; -``` +## `NotificationButton` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------ | :------------- | :----------------------------------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| title | string | -- | Specify the title of the icon. | -| iconDescription | string | `"Close icon"` | Specify the ARIA label for the icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------- | ----------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| renderIcon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| title | let | No | string | -- | Specify the title of the icon | +| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## NotificationIcon - -### Import path - -```js -import { NotificationIcon } from "carbon-components-svelte"; -``` +## `NotificationIcon` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :------------------------------------- | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification icon. | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | +| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | ### Slots -No slots. +None. -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## NotificationTextDetails - -### Import path - -```js -import { NotificationTextDetails } from "carbon-components-svelte"; -``` +## `NotificationTextDetails` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :----------------------------------- | :------------ | :---------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| caption | string | `"Caption"` | Specify the caption text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| title | let | No | string | "Title" | Specify the title text | +| subtitle | let | No | string | "" | Specify the subtitle text | +| caption | let | No | string | "Caption" | Specify the caption text | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events +## `NumberInput` -No dispatched events. - ---- - -## NumberInput - -### Import path - -```js -import { NumberInput } from "carbon-components-svelte"; -``` - -### Props +### Types ```ts -// `NumberInput` type definitions - type NumberInputTranslationId = "increment" | "decrement"; ``` -| Prop name | Type | Default value | Description | -| :-------------------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :---------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| step | number | `1` | Specify the step increment. | -| max | number | -- | Specify the maximum value. | -| min | number | -- | Specify the minimum value. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| readonly | boolean | `false` | Set to `true` for the input to be read-only. | -| mobile | boolean | `false` | Set to `true` to enable the mobile variant. | -| allowEmpty | boolean | `false` | Set to `true` to allow for an empty value. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| iconDescription | string | `""` | Specify the ARIA label for the increment icons. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| label | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| translateWithId | (id: NumberInputTranslationId) => string | -- | Override the default translation ids. | -| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | `{ increment: "increment", decrement: "decrement", }` | Default translation ids. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | - -### Slots - -- **"label"**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:input` +### Props -### Dispatched events +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| step | let | No | number | 1 | Specify the step increment | +| max | let | No | number | -- | Specify the maximum value | +| min | let | No | number | -- | Specify the minimum value | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | +| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | +| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | -- `on:change` +### Slots ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| label | No | -- | {label} | -## NumberInputSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| input | forwarded | -- | +| change | dispatched | -- | -```js -import { NumberInputSkeleton } from "carbon-components-svelte"; -``` +## `NumberInputSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## OrderedList - -### Import path - -```js -import { OrderedList } from "carbon-components-svelte"; -``` +## `OrderedList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| nested | boolean | `false` | Set to `true` to use the nested variant. | -| native | boolean | `false` | Set to `true` to use native list styles. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| nested | let | No | boolean | false | Set to `true` to use the nested variant | +| native | let | No | boolean | false | Set to `true` to use native list styles | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## OverflowMenu - -### Import path - -```js -import { OverflowMenu } from "carbon-components-svelte"; -``` +## `OverflowMenu` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- | -| size | "sm" | "xl" | -- | Specify the size of the overflow menu. | -| direction | "top" | "bottom" | `"bottom"` | Specify the direction of the overflow menu relative to the button. | -| open | boolean | `false` | Set to `true` to open the menu. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| flipped | boolean | `false` | Set to `true` to flip the menu relative to the button. | -| menuOptionsClass | string | -- | Specify the menu options class. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. | -| iconClass | string | -- | Specify the icon class. | -| iconDescription | string | `"Open and close list of options"` | Specify the ARIA label for the icon. | -| id | string | -- | Set an id for the button element. | -| buttonRef | null | HTMLButtonElement | `null` | Obtain a reference to the trigger button element. | -| menuRef | null | HTMLUListElement | `null` | Obtain a reference to the overflow menu element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | +| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| open | let | Yes | boolean | false | Set to `true` to open the menu | +| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu | +| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | let | No | string | -- | Specify the menu options class | +| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconClass | let | No | string | -- | Specify the icon class | +| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots -- **default**: `
...
` -- **"menu"**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | -### Dispatched events +### Events -- `on:close` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| close | dispatched | -- | ---- - -## OverflowMenuItem - -### Import path - -```js -import { OverflowMenuItem } from "carbon-components-svelte"; -``` +## `OverflowMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------------------------------------------------------ | :--------------- | :------------------------------------------------------------------------------- | -| text | string | `"Provide text"` | Specify the item text. Alternatively, use the default slot for a custom element. | -| href | string | `""` | Specify the `href` attribute if the item is a link. | -| primaryFocus | boolean | `false` | Set to `true` if the item should be focused when opening the menu. | -| disabled | boolean | `false` | Set to `true` to disable the item. | -| hasDivider | boolean | `false` | Set to `true` to include a divider. | -| danger | boolean | `false` | Set to `true` to use the danger variant. | -| requireTitle | boolean | `true` | Set to `false` to omit the button `title` attribute. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | +| text | let | No | string | "Provide text" | Specify the item text
Alternatively, use the default slot for a custom element | +| href | let | No | string | "" | Specify the `href` attribute if the item is a link | +| disabled | let | No | boolean | false | Set to `true` to disable the item | +| hasDivider | let | No | boolean | false | Set to `true` to include a divider | +| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | +| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | -## Pagination - -### Import path - -```js -import { Pagination } from "carbon-components-svelte"; -``` +## `Pagination` ### Props -| Prop name | Type | Default value | Description | -| :-------------------- | :--------------------------------------------------------------- | :------------------ | :------------------------------------------------ | -| page | number | `1` | Specify the current page index. | -| totalItems | number | `0` | Specify the total number of items. | -| disabled | boolean | `false` | Set to `true` to disable the pagination. | -| forwardText | string | `"Next page"` | Specify the forward button text. | -| backwardText | string | `"Previous page"` | Specify the backward button text. | -| itemsPerPageText | string | `"Items per page:"` | Specify the items per page text. | -| itemText | (min: number, max: number) => string | -- | Override the item text. | -| itemRangeText | (min: number, max: number, total: number) => string | -- | Override the item range text. | -| pageInputDisabled | boolean | `false` | Set to `true` to disable the page input. | -| pageSizeInputDisabled | boolean | `false` | Set to `true` to disable the page size input. | -| pageSize | number | `10` | Specify the number of items to display in a page. | -| pageSizes | number[] | `[10]` | Specify the available page sizes. | -| pagesUnknown | boolean | `false` | Set to `true` if the number of pages is unknown. | -| pageText | (page: number) => string | -- | Override the page text. | -| pageRangeText | (current: number, total: number) => string | -- | Override the page range text. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | +| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | let | Yes | number | 1 | Specify the current page index | +| totalItems | let | No | number | 0 | Specify the total number of items | +| disabled | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | let | No | string | "Next page" | Specify the forward button text | +| backwardText | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text | +| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of \${total} items\` | Override the item range text | +| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | let | No | number[] | [10] | Specify the available page sizes | +| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | let | No | (page: number) => string | (page) => \`page \${page}\` | Override the page text | +| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:update` +None. ---- +### Events -## PaginationNav +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| update | dispatched | -- | -### Import path - -```js -import { PaginationNav } from "carbon-components-svelte"; -``` +## `PaginationNav` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------- | :---------------- | :----------------------------------------- | -| page | number | `0` | Specify the current page index. | -| total | number | `10` | Specify the total number of pages. | -| shown | number | `10` | Specify the total number of pages to show. | -| loop | boolean | `false` | Set to `true` to loop the navigation. | -| forwardText | string | `"Next page"` | Specify the forward button text. | -| backwardText | string | `"Previous page"` | Specify the backward button text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------- | :--------------- | :------- | :------------------- | ---------------------------- | ----------------------------------------- | +| page | let | Yes | number | 0 | Specify the current page index | +| total | let | No | number | 10 | Specify the total number of pages | +| shown | let | No | number | 10 | Specify the total number of pages to show | +| loop | let | No | boolean | false | Set to `true` to loop the navigation | +| forwardText | let | No | string | "Next page" | Specify the forward button text | +| backwardText | let | No | string | "Previous page" | Specify the backward button text | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:click:button--previous` -- `on:click:button--next` -- `on:change` - ---- +None. -## PaginationSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------------------- | :--------- | :----- | +| click:button--previous | dispatched | -- | +| click:button--next | dispatched | -- | +| change | dispatched | -- | -```js -import { PaginationSkeleton } from "carbon-components-svelte"; -``` +## `PaginationSkeleton` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## PasswordInput - -### Import path - -```js -import { PasswordInput } from "carbon-components-svelte"; -``` +## `PasswordInput` ### Props -| Prop name | Type | Default value | Description | -| :---------------- | :-------------------------------------------------------------- | :---------------- | :----------------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `"password"` | Specify the input type. | -| placeholder | string | `""` | Specify the placeholder text. | -| hidePasswordLabel | string | `"Hide password"` | Specify the hide password label text. | -| showPasswordLabel | string | `"Show password"` | Specify the show password label text. | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the text for the invalid state. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| type | let | Yes | string | "password" | Specify the input type | +| value | let | Yes | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| placeholder | let | No | string | "" | Specify the placeholder text | +| hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text | +| showPasswordLabel | let | No | string | "Show password" | Specify the show password label text | +| tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon | +| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| helperText | let | No | string | "" | Specify the helper text | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the text for the invalid state | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:keydown` -- `on:focus` -- `on:blur` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -No dispatched events. - ---- - -## ProgressIndicator - -### Import path - -```js -import { ProgressIndicator } from "carbon-components-svelte"; -``` +## `ProgressIndicator` ### Props -| Prop name | Type | Default value | Description | -| :------------------- | :------------------- | :------------ | :---------------------------------------------------------------------------------------------- | -| currentIndex | number | `0` | Specify the current step index. | -| vertical | boolean | `false` | Set to `true` to use the vertical variant. | -| spaceEqually | boolean | `false` | Set to `true` to specify whether the progress steps should be split equally in size in the div. | -| preventChangeOnClick | boolean | `false` | Set to `true` to prevent updating `currentIndex`. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- | +| currentIndex | let | Yes | number | 0 | Specify the current step index | +| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | +| spaceEqually | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div | +| preventChangeOnClick | let | No | boolean | false | Set to `true` to prevent updating `currentIndex` | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -- `on:change` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | ---- - -## ProgressIndicatorSkeleton - -### Import path - -```js -import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; -``` +## `ProgressIndicatorSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| vertical | boolean | `false` | Set to `true` to use the vertical variant. | -| count | number | `4` | Specify the number of steps to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | +| count | let | No | number | 4 | Specify the number of steps to render | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## ProgressStep +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Import path - -```js -import { ProgressStep } from "carbon-components-svelte"; -``` +## `ProgressStep` ### Props -| Prop name | Type | Default value | Description | -| :------------- | :------------------- | :------------ | :------------------------------------------ | -| complete | boolean | `false` | Set to `true` for the complete variant. | -| current | boolean | `false` | Set to `true` to use the current variant. | -| disabled | boolean | `false` | Set to `true` to disable the progress step. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| description | string | `""` | Specify the step description. | -| label | string | `""` | Specify the step label. | -| secondaryLabel | string | `""` | Specify the step secondary label. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | +| current | let | Yes | boolean | false | Set to `true` to use the current variant | +| complete | let | Yes | boolean | false | Set to `true` for the complete variant | +| disabled | let | No | boolean | false | Set to `true` to disable the progress step | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| description | let | No | string | "" | Specify the step description | +| label | let | No | string | "" | Specify the step label | +| secondaryLabel | let | No | string | "" | Specify the step secondary label | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ | +| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> | -## RadioButton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -```js -import { RadioButton } from "carbon-components-svelte"; -``` +## `RadioButton` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :---------------------------------------- | :------------ | :----------------------------------------------- | -| value | string | `""` | Specify the value of the radio button. | -| checked | boolean | `false` | Set to `true` to check the radio button. | -| disabled | boolean | `false` | Set to `true` to disable the radio button. | -| labelPosition | "right" | "left" | `"right"` | Specify the label position. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the checkbox input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | let | Yes | boolean | false | Set to `true` to check the radio button | +| value | let | No | string | "" | Specify the value of the radio button | +| disabled | let | No | boolean | false | et to `true` to disable the radio button | +| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the checkbox input | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:change` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## RadioButtonGroup - -### Import path - -```js -import { RadioButtonGroup } from "carbon-components-svelte"; -``` +## `RadioButtonGroup` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------------------------------ | :------------- | :-------------------------------------------- | -| selected | string | -- | Set the selected radio button value. | -| disabled | boolean | `false` | Set to `true` to disable the radio buttons. | -| labelPosition | "right" | "left" | `"right"` | Specify the label position. | -| orientation | "horizontal" | "vertical" | `"horizontal"` | Specify the orientation of the radio buttons. | -| id | string | -- | Set an id for the container div element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- | +| selected | let | Yes | string | -- | Set the selected radio button value | +| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons | +| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | +| orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | +| id | let | No | string | -- | Set an id for the container div element | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -- `on:change` - ---- - -## RadioButtonSkeleton - -### Import path - -```js -import { RadioButtonSkeleton } from "carbon-components-svelte"; -``` +## `RadioButtonSkeleton` ### Props -No exported props. +None. ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +None. -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## RadioTile - -### Import path - -```js -import { RadioTile } from "carbon-components-svelte"; -``` +## `RadioTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------- | :----------------- | :-------------------------------------------------------- | -| checked | boolean | `false` | Set to `true` to check the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| value | string | `""` | Specify the value of the radio input. | -| tabindex | string | `"0"` | Specify the tabindex. | -| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the radio tile checkmark icon. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- | +| checked | let | Yes | boolean | false | Set to `true` to check the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| value | let | No | string | "" | Specify the value of the radio input | +| tabindex | let | No | string | "0" | Specify the tabindex | +| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:change` -- `on:keydown` -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | +| keydown | forwarded | -- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## Row - -### Import path - -```js -import { Row } from "carbon-components-svelte"; -``` +## `Row` ### Props -| Prop name | Type | Default value | Description | -| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>). | -| condensed | boolean | `false` | Set to `true` to use the condensed variant. | -| narrow | boolean | `false` | Set to `true` to use the narrow variant. | -| noGutter | boolean | `false` | Set to `true` to remove the gutter. | -| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. | -| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>) | +| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | +| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :--------------------------------------------------------------- | :------- | +| -- | Yes | { props?: { class: string; [key: string]: any; } } | -- | ---- +### Events -## Search +None. -### Import path - -```js -import { Search } from "carbon-components-svelte"; -``` +## `Search` ### Props -| Prop name | Type | Default value | Description | -| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- | -| small | boolean | `false` | . | -| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the search input. | -| value | string | `""` | Specify the value of the search input. | -| type | string | `"text"` | Specify the `type` attribute of the search input. | -| placeholder | string | `"Search..."` | Specify the `placeholder` attribute of the search input. | -| autocomplete | "on" | "off" | `"off"` | Specify the `autocomplete` attribute. | -| autofocus | boolean | `false` | Set to `true` to auto focus the search element. | -| closeButtonLabelText | string | `"Clear search input"` | Specify the close button label text. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the value of the search input | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the search input | +| type | let | No | string | "text" | Specify the `type` attribute of the search input | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -- `on:clear` - ---- +None. -## SearchSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| clear | dispatched | -- | -```js -import { SearchSkeleton } from "carbon-components-svelte"; -``` +## `SearchSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :---------------------------------------- | :------------ | :------------------------------------ | -| small | boolean | `false` | . | -| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ | +| small | let | No | boolean | false | -- | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Select - -### Import path - -```js -import { Select } from "carbon-components-svelte"; -``` +## `Select` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :----------------------------------------- | :------------ | :----------------------------------------------- | -| selected | string | -- | Specify the selected item value. | -| size | "sm" | "xl" | -- | Set the size of the select input. | -| inline | boolean | `false` | Set to `true` to use the inline variant. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the select element. | -| id | string | -- | Set an id for the select element. | -| name | string | -- | Specify a name attribute for the select element. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| helperText | string | `""` | Specify the helper text. | -| noLabel | boolean | `false` | Set to `true` to not render a label. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | +| selected | let | Yes | -- | -- | Specify the selected item value | +| size | let | No | "sm" | "xl" | -- | Set the size of the select input | +| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the select element | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | +| name | let | No | string | -- | Specify a name attribute for the select element | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| helperText | let | No | string | "" | Specify the helper text | +| noLabel | let | No | boolean | false | Set to `true` to not render a label | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:blur` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| blur | forwarded | -- | +| change | dispatched | -- | -- `on:change` - ---- - -## SelectItem - -### Import path - -```js -import { SelectItem } from "carbon-components-svelte"; -``` +## `SelectItem` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------- | -| value | string | `""` | Specify the option value. | -| text | string | `""` | Specify the option text. | -| hidden | boolean | `false` | Set to `true` to hide the option. | -| disabled | boolean | `false` | Set to `true` to disable the option. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- | +| value | let | No | string | "" | Specify the option value | +| text | let | No | string | "" | Specify the option text | +| hidden | let | No | boolean | false | Set to `true` to hide the option | +| disabled | let | No | boolean | false | Set to `true` to disable the option | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events +None. -No dispatched events. +### Events ---- +None. -## SelectItemGroup - -### Import path - -```js -import { SelectItemGroup } from "carbon-components-svelte"; -``` +## `SelectItemGroup` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :---------------- | :--------------------------------------------------- | -| disabled | boolean | `false` | Set to `true` to disable the optgroup element. | -| label | string | `"Provide label"` | Specify the label attribute of the optgroup element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- | +| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element | +| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## SelectSkeleton +None. -### Import path - -```js -import { SelectSkeleton } from "carbon-components-svelte"; -``` +## `SelectSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## SelectableTile +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { SelectableTile } from "carbon-components-svelte"; -``` +## `SelectableTile` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :---------------------------------------- | :----------------- | :------------------------------------------------------------- | -| selected | boolean | `false` | Set to `true` to select the tile. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| title | string | `"title"` | Specify the title of the selectable tile. | -| value | string | `"value"` | Specify the value of the selectable tile. | -| tabindex | string | `"0"` | Specify the tabindex. | -| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the selectable tile checkmark icon. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| selected | let | Yes | boolean | false | Set to `true` to select the tile | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| title | let | No | string | "title" | Specify the title of the selectable tile | +| value | let | No | string | "value" | Specify the value of the selectable tile | +| tabindex | let | No | string | "0" | Specify the tabindex | +| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| undefined | dispatched | -- | -### Dispatched events - -No dispatched events. - ---- - -## SideNav - -### Import path - -```js -import { SideNav } from "carbon-components-svelte"; -``` +## `SideNav` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------------ | -| fixed | boolean | `false` | Set to `true` to use the fixed variant. | -| ariaLabel | string | -- | Specify the ARIA label for the nav. | -| isOpen | boolean | `false` | Set to `true` to toggle the expanded state. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | +| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| fixed | let | No | boolean | false | Set to `true` to use the fixed variant | +| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## SideNavItems - -### Import path - -```js -import { SideNavItems } from "carbon-components-svelte"; -``` +## `SideNavItems` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +None. ---- - -## SideNavLink - -### Import path - -```js -import { SideNavLink } from "carbon-components-svelte"; -``` +## `SideNavLink` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| isSelected | boolean | `false` | Set to `true` to select the current link. | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the text. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | let | No | boolean | false | Set to `true` to select the current link | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the text | +| icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | ### Slots -No slots. - -### Forwarded events - -- `on:click` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -## SideNavMenu - -### Import path - -```js -import { SideNavMenu } from "carbon-components-svelte"; -``` +## `SideNavMenu` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- | -| expanded | boolean | `false` | Set to `true` to toggle the expanded state. | -| text | string | -- | Specify the text. | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| text | let | No | string | -- | Specify the text | +| icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## SideNavMenuItem +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -### Import path - -```js -import { SideNavMenuItem } from "carbon-components-svelte"; -``` +## `SideNavMenuItem` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| isSelected | boolean | -- | Set to `true` to select the item. | -| href | string | -- | Specify the `href` attribute. | -| text | string | -- | Specify the item text. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | let | No | boolean | -- | Set to `true` to select the item | +| href | let | No | string | -- | Specify the `href` attribute | +| text | let | No | string | -- | Specify the item text | ### Slots -No slots. - -### Forwarded events - -- `on:click` - -### Dispatched events - -No dispatched events. - ---- +None. -## SkeletonPlaceholder +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | -```js -import { SkeletonPlaceholder } from "carbon-components-svelte"; -``` +## `SkeletonPlaceholder` ### Props -No exported props. +None. ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## SkeletonText - -### Import path - -```js -import { SkeletonText } from "carbon-components-svelte"; -``` +## `SkeletonText` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| lines | number | `3` | Specify the number of lines to render. | -| heading | boolean | `false` | Set to `true` to use the heading size variant. | -| paragraph | boolean | `false` | Set to `true` to use the paragraph size variant. | -| width | string | `"100%"` | Specify the width of the text (% or px). | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- | +| lines | let | No | number | 3 | Specify the number of lines to render | +| heading | let | No | boolean | false | Set to `true` to use the heading size variant | +| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant | +| width | let | No | string | "100%" | Specify the width of the text (% or px) | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## SkipToContent - -### Import path - -```js -import { SkipToContent } from "carbon-components-svelte"; -``` +## `SkipToContent` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :---------------- | :---------------------------- | -| href | string | `"#main-content"` | Specify the `href` attribute. | -| tabindex | string | `"0"` | Specify the tabindex. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- | +| href | let | No | string | "#main-content" | Specify the `href` attribute | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------------- | +| -- | Yes | -- | Skip to main content | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | ---- - -## Slider - -### Import path - -```js -import { Slider } from "carbon-components-svelte"; -``` +## `Slider` ### Props -| Prop name | Type | Default value | Description | -| :------------- | :----------------------------------- | :------------ | :------------------------------------------ | -| value | number | `0` | Specify the value of the slider. | -| max | number | `100` | Set the maximum slider value. | -| maxLabel | string | `""` | Specify the label for the max value. | -| min | number | `0` | Set the minimum slider value. | -| minLabel | string | `""` | Specify the label for the min value. | -| step | number | `1` | Set the step value. | -| stepMultiplier | number | `4` | Set the step multiplier value. | -| required | boolean | `false` | Set to `true` to require a value. | -| inputType | string | `"number"` | Specify the input type. | -| disabled | boolean | `false` | Set to `true` to disable the slider. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| hideTextInput | boolean | `false` | Set to `true` to hide the text input. | -| id | string | -- | Set an id for the slider div element. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| labelText | string | `""` | Specify the label text. | -| name | string | `""` | Set a name for the slider element. | -| ref | null | HTMLElement | `null` | Obtain a reference to the HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| value | let | Yes | number | 0 | Specify the value of the slider | +| max | let | No | number | 100 | Set the maximum slider value | +| maxLabel | let | No | string | "" | Specify the label for the max value | +| min | let | No | number | 0 | Set the minimum slider value | +| minLabel | let | No | string | "" | Specify the label for the min value | +| step | let | No | number | 1 | Set the step value | +| stepMultiplier | let | No | number | 4 | Set the step multiplier value | +| required | let | No | boolean | false | Set to `true` to require a value | +| inputType | let | No | string | "number" | Specify the input type | +| disabled | let | No | boolean | false | Set to `true` to disable the slider | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| labelText | let | No | string | "" | Specify the label text | +| name | let | No | string | "" | Set a name for the slider element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -- `on:change` +### Events ---- +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -## SliderSkeleton - -### Import path - -```js -import { SliderSkeleton } from "carbon-components-svelte"; -``` +## `SliderSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. +None. ---- +### Events -## StructuredList +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Import path - -```js -import { StructuredList } from "carbon-components-svelte"; -``` +## `StructuredList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :---------------------------------------------- | -| selected | string | -- | Specify the selected structured list row value. | -| border | boolean | `false` | Set to `true` to use the bordered variant. | -| selection | boolean | `false` | Set to `true` to use the selection variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- | +| selected | let | Yes | string | -- | Specify the selected structured list row value | +| border | let | No | boolean | false | Set to `true` to use the bordered variant | +| selection | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -- `on:change` - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## StructuredListBody +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | dispatched | -- | -```js -import { StructuredListBody } from "carbon-components-svelte"; -``` +## `StructuredListBody` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## StructuredListCell - -### Import path - -```js -import { StructuredListCell } from "carbon-components-svelte"; -``` +## `StructuredListCell` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------- | -| head | boolean | `false` | Set to `true` to use as a header. | -| noWrap | boolean | `false` | Set to `true` to prevent wrapping. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | +| head | let | No | boolean | false | Set to `true` to use as a header | +| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## StructuredListHead - -### Import path - -```js -import { StructuredListHead } from "carbon-components-svelte"; -``` +## `StructuredListHead` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## StructuredListInput - -### Import path - -```js -import { StructuredListInput } from "carbon-components-svelte"; -``` +## `StructuredListInput` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :---------------------------------------- | :------------ | :-------------------------------------------- | -| checked | boolean | `false` | Set to `true` to check the input. | -| title | string | `"title"` | Specify the title of the input. | -| value | string | `"value"` | Specify the value of the input. | -| id | string | -- | Set an id for the input element. | -| name | string | `""` | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | let | Yes | boolean | false | Set to `true` to check the input | +| title | let | No | string | "title" | Specify the title of the input | +| value | let | No | string | "value" | Specify the value of the input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | ### Slots -No slots. - -### Forwarded events - -No forwarded events. - -### Dispatched events +None. -No dispatched events. +### Events ---- +None. -## StructuredListRow - -### Import path - -```js -import { StructuredListRow } from "carbon-components-svelte"; -``` +## `StructuredListRow` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| head | boolean | `false` | Set to `true` to use as a header. | -| label | boolean | `false` | Set to `true` to render a label slot. | -| tabindex | string | `"0"` | Specify the tabindex. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| head | let | No | boolean | false | Set to `true` to use as a header | +| label | let | No | boolean | false | Set to `true` to render a label slot | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## StructuredListSkeleton +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -```js -import { StructuredListSkeleton } from "carbon-components-svelte"; -``` +## `StructuredListSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| rows | number | `5` | Specify the number of rows. | -| border | boolean | `false` | Set to `true` to use the bordered variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| rows | let | No | number | 5 | Specify the number of rows | +| border | let | No | boolean | false | Set to `true` to use the bordered variant | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## Switch - -### Import path - -```js -import { Switch } from "carbon-components-svelte"; -``` +## `Switch` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- | -| text | string | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). | -| selected | boolean | `false` | Set to `true` for the switch to be selected. | -| disabled | boolean | `false` | Set to `true` to disable the switch. | -| id | string | -- | Set an id for the button element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | +| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>) | +| disabled | let | No | boolean | false | Set to `true` to disable the switch | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------ | +| -- | Yes | -- | {text} | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:keydown` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | -No dispatched events. - ---- - -## Tab - -### Import path - -```js -import { Tab } from "carbon-components-svelte"; -``` +## `Tab` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- | -| label | string | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). | -| href | string | `"#"` | Specify the href attribute. | -| disabled | boolean | `false` | Set to `true` to disable the tab. | -| tabindex | string | `"0"` | Specify the tabindex. | -| id | string | -- | Set an id for the top-level element. | -| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the anchor HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>) | +| href | let | No | string | "#" | Specify the href attribute | +| disabled | let | No | boolean | false | Set to `true` to disable the tab | +| tabindex | let | No | string | "0" | Specify the tabindex | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------- | +| -- | Yes | -- | {label} | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TabContent - -### Import path - -```js -import { TabContent } from "carbon-components-svelte"; -``` +## `TabContent` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :----------------------------------- | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +None. -## Table - -### Import path - -```js -import { Table } from "carbon-components-svelte"; -``` +## `Table` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :-------------------------------------------------- | :------------ | :--------------------------------------- | -| size | "compact" | "short" | "tall" | -- | Set the size of the table. | -| zebra | boolean | `false` | Set to `true` to use zebra styles. | -| useStaticWidth | boolean | `false` | Set to `true` to use static width. | -| shouldShowBorder | boolean | `false` | Set to `true` for the bordered variant. | -| sortable | boolean | `false` | Set to `true` for the sortable variant. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | --------------------------------------- | +| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | +| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TableBody +None. -### Import path - -```js -import { TableBody } from "carbon-components-svelte"; -``` +## `TableBody` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## TableCell +### Events -### Import path +None. -```js -import { TableCell } from "carbon-components-svelte"; -``` +## `TableCell` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## TableContainer - -### Import path - -```js -import { TableContainer } from "carbon-components-svelte"; -``` +## `TableContainer` ### Props -| Prop name | Type | Default value | Description | -| :----------- | :------------------- | :------------ | :----------------------------------------- | -| title | string | `""` | Specify the title of the data table. | -| description | string | `""` | Specify the description of the data table. | -| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| title | let | No | string | "" | Specify the title of the data table | +| description | let | No | string | "" | Specify the description of the data table | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## TableHead - -### Import path - -```js -import { TableHead } from "carbon-components-svelte"; -``` +## `TableHead` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TableHeader - -### Import path - -```js -import { TableHeader } from "carbon-components-svelte"; -``` +## `TableHeader` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------ | :------------ | :------------------------------------ | -| scope | string | `"col"` | Specify the `scope` attribute. | -| translateWithId | () => string | -- | Override the default id translations. | -| id | string | -- | Set an id for the top-level element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ | +| scope | let | No | string | "col" | Specify the `scope` attribute | +| translateWithId | let | No | () => string | () => "" | Override the default id translations | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:click` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TableRow +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| click | forwarded | -- | -### Import path - -```js -import { TableRow } from "carbon-components-svelte"; -``` +## `TableRow` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## Tabs +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { Tabs } from "carbon-components-svelte"; -``` +## `Tabs` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :---------------------------------------- | :-------------------- | :------------------------------------------- | -| selected | number | `0` | Specify the selected tab index. | -| type | "default" | "container" | `"default"` | Specify the type of tabs. | -| iconDescription | string | `"Show menu options"` | Specify the ARIA label for the chevron icon. | -| triggerHref | string | `"#"` | Specify the tab trigger href attribute. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- | +| selected | let | Yes | number | 0 | Specify the selected tab index | +| type | let | No | "default" | "container" | "default" | Specify the type of tabs | +| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | +| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute | ### Slots -- **default**: `
...
` -- **"content"**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | +| content | No | -- | -- | -### Forwarded events +### Events -- `on:keypress` -- `on:click` +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| keypress | forwarded | -- | +| click | forwarded | -- | +| change | dispatched | -- | -### Dispatched events - -- `on:change` - ---- - -## TabsSkeleton - -### Import path - -```js -import { TabsSkeleton } from "carbon-components-svelte"; -``` +## `TabsSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------------ | -| count | number | `4` | Specify the number of tabs to render. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | -------------- | ------------------------------------ | +| count | let | No | number | 4 | Specify the number of tabs to render | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## Tag - -### Import path - -```js -import { Tag } from "carbon-components-svelte"; -``` +## `Tag` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------- | :------------------------------------------------------ | -| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag. | -| filter | boolean | `false` | Set to `true` to use filterable variant. | -| disabled | boolean | `false` | Set to `true` to disable a filterable tag. | -| skeleton | boolean | `false` | Set to `true` to display the skeleton state. | -| title | string | `"Clear filter"` | Set the title for the close button in a filterable tag. | -| id | string | -- | Set an id for the filterable tag. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------ | +| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag | +| filter | let | No | boolean | false | Set to `true` to use filterable variant | +| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag | +| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :------- | +| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ---- - -## TagSkeleton - -### Import path - -```js -import { TagSkeleton } from "carbon-components-svelte"; -``` +## `TagSkeleton` ### Props -No exported props. +None. ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## TextArea - -### Import path - -```js -import { TextArea } from "carbon-components-svelte"; -``` +## `TextArea` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------------------------------- | :------------ | :----------------------------------------------- | -| value | string | `""` | Specify the textarea value. | -| placeholder | string | `""` | Specify the placeholder text. | -| cols | number | `50` | Specify the number of cols. | -| rows | number | `4` | Specify the number of rows. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the text for the invalid state. | -| id | string | -- | Set an id for the textarea element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLTextAreaElement | `null` | Obtain a reference to the textarea HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | +| value | let | Yes | string | "" | Specify the textarea value | +| placeholder | let | No | string | "" | Specify the placeholder text | +| cols | let | No | number | 50 | Specify the number of cols | +| rows | let | No | number | 4 | Specify the number of rows | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| helperText | let | No | string | "" | Specify the helper text | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the text for the invalid state | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element | +| name | let | No | string | -- | Specify a name attribute for the input | ### 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. +None. ---- +### Events -## TextAreaSkeleton +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Import path - -```js -import { TextAreaSkeleton } from "carbon-components-svelte"; -``` +## `TextAreaSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------------- | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## TextInput +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { TextInput } from "carbon-components-svelte"; -``` +## `TextInput` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| size | "sm" | "xl" | -- | Set the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `""` | Specify the input type. | -| placeholder | string | `""` | Specify the placeholder text. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| helperText | string | `""` | Specify the helper text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| warn | boolean | `false` | Set to `true` to indicate an warning state. | -| warnText | string | `""` | Specify the warning state text. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | -| required | boolean | `false` | Set to `true` to mark the field as required. | -| inline | boolean | `false` | Set to `true` to use inline version. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| type | let | No | string | "" | Specify the input type | +| placeholder | let | No | string | "" | Specify the placeholder text | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| helperText | let | No | string | "" | Specify the helper text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| required | let | No | boolean | false | Set to `true` to mark the field as required | +| inline | let | No | boolean | false | Set to `true` to use inline version | ### Slots -No slots. +None. -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:keydown` -- `on:focus` -- `on:blur` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## TextInputSkeleton - -### Import path - -```js -import { TextInputSkeleton } from "carbon-components-svelte"; -``` +## `TextInputSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :------------------------------------ | -| hideLabel | boolean | `false` | Set to `true` to hide the label text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | +| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | ### Slots -No slots. - -### Forwarded events +None. -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -No dispatched events. - ---- - -## Tile - -### Import path - -```js -import { Tile } from "carbon-components-svelte"; -``` +## `Tile` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------- | -| light | boolean | `false` | Set to `true` to enable the light variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | +| light | let | No | boolean | false | Set to `true` to enable the light variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## TileGroup - -### Import path - -```js -import { TileGroup } from "carbon-components-svelte"; -``` +## `TileGroup` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| selected | string | -- | Specify the selected tile value. | -| disabled | boolean | `false` | Set to `true` to disable the tile group. | -| legend | string | `""` | Specify the legend text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| selected | let | Yes | string | -- | Specify the selected tile value | +| disabled | let | No | boolean | false | Set to `true` to disable the tile group | +| legend | let | No | string | "" | Specify the legend text | ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events - -- `on:select` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## TimePicker +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| select | dispatched | -- | -### Import path - -```js -import { TimePicker } from "carbon-components-svelte"; -``` +## `TimePicker` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| size | "sm" | "xl" | -- | Specify the size of the input. | -| value | string | `""` | Specify the input value. | -| type | string | `"text"` | Specify the input type. | -| placeholder | string | `"hh=mm"` | Specify the input placeholder text. | -| pattern | string | `"(1[012] | [1-9]):[0-5][0-9](\\s)?"` | Specify the `pattern` attribute for the input element. | -| maxlength | number | `5` | Specify the `maxlength` input attribute. | -| light | boolean | `false` | Set to `true` to enable the light variant. | -| disabled | boolean | `false` | Set to `true` to disable the input. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. | -| invalid | boolean | `false` | Set to `true` to indicate an invalid state. | -| invalidText | string | `""` | Specify the invalid state text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the input. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Specify the size of the input | +| type | let | No | string | "text" | Specify the input type | +| placeholder | let | No | string | "hh=mm" | Specify the input placeholder text | +| pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element | +| maxlength | let | No | number | 5 | Specify the `maxlength` input attribute | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -## TimePickerSelect +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -```js -import { TimePickerSelect } from "carbon-components-svelte"; -``` +## `TimePickerSelect` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :----------------------------------------- | :----------------------- | :----------------------------------------------- | -| value | string | `""` | Specify the select value. | -| disabled | boolean | `false` | Set to `true` to disable the select. | -| iconDescription | string | `"Open list of options"` | Specify the ARIA label for the chevron icon. | -| labelText | string | `""` | Specify the label text. | -| hideLabel | boolean | `true` | . | -| id | string | -- | Set an id for the select element. | -| name | string | -- | Specify a name attribute for the select element. | -| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | +| value | let | Yes | string | "" | Specify the select value | +| disabled | let | No | boolean | false | Set to `true` to disable the select | +| iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | true | -- | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | +| name | let | No | string | -- | Specify a name attribute for the select element | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -### Dispatched events - -No dispatched events. - ---- - -## ToastNotification - -### Import path - -```js -import { ToastNotification } from "carbon-components-svelte"; -``` +## `ToastNotification` ### Props -| Prop name | Type | Default value | Description | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- | -| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. | -| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. | -| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. | -| role | string | `"alert"` | Set the `role` attribute. | -| title | string | `"Title"` | Specify the title text. | -| subtitle | string | `""` | Specify the subtitle text. | -| caption | string | `"Caption"` | Specify the caption text. | -| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. | -| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | +| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | let | No | string | "alert" | Set the `role` attribute | +| title | let | No | string | "Title" | Specify the title text | +| subtitle | let | No | string | "" | Specify the subtitle text | +| caption | let | No | string | "Caption" | Specify the caption text | +| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | -- | -- `on:close` - ---- - -## Toggle - -### Import path - -```js -import { Toggle } from "carbon-components-svelte"; -``` +## `Toggle` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | -| disabled | boolean | `false` | Set to `true` to disable checkbox input. | -| labelA | string | `"Off"` | Specify the label for the untoggled state. | -| labelB | string | `"On"` | Specify the label for the toggled state. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the checkbox input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | +| labelA | let | No | string | "Off" | Specify the label for the untoggled state | +| labelB | let | No | string | "On" | Specify the label for the toggled state | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the checkbox input | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:change` -- `on:keyup` -- `on:focus` -- `on:blur` +None. -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | ---- - -## ToggleSkeleton - -### Import path - -```js -import { ToggleSkeleton } from "carbon-components-svelte"; -``` +## `ToggleSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------- | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +None. -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -## ToggleSmall - -### Import path - -```js -import { ToggleSmall } from "carbon-components-svelte"; -``` +## `ToggleSmall` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :----------------------------------------------- | -| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. | -| disabled | boolean | `false` | Set to `true` to disable checkbox input. | -| labelA | string | `"Off"` | Specify the label for the untoggled state. | -| labelB | string | `"On"` | Specify the label for the toggled state. | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | -| name | string | -- | Specify a name attribute for the checkbox input. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | +| labelA | let | No | string | "Off" | Specify the label for the untoggled state | +| labelB | let | No | string | "On" | Specify the label for the toggled state | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the checkbox input | ### 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. +None. ---- +### Events -## ToggleSmallSkeleton +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -### Import path - -```js -import { ToggleSmallSkeleton } from "carbon-components-svelte"; -``` +## `ToggleSmallSkeleton` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------ | :------------ | :------------------------------- | -| labelText | string | `""` | Specify the label text. | -| id | string | -- | Set an id for the input element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | +| labelText | let | No | string | "" | Specify the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots -No slots. - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events - -No dispatched events. - ---- +None. -## Toolbar +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | -```js -import { Toolbar } from "carbon-components-svelte"; -``` +## `Toolbar` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :--------------------------------- | :------------ | :------------------------ | -| size | "sm" | "default" | `"default"` | Specify the toolbar size. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ | +| size | let | No | "sm" | "default" | "default" | Specify the toolbar size | ### Slots -- **default**: `
...
` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Forwarded events +### Events -No forwarded events. +None. -### Dispatched events - -No dispatched events. - ---- - -## ToolbarBatchActions - -### Import path - -```js -import { ToolbarBatchActions } from "carbon-components-svelte"; -``` +## `ToolbarBatchActions` ### Props -| Prop name | Type | Default value | Description | -| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- | -| formatTotalSelected | (totalSelected: number) => string | -- | Override the total items selected text. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- | +| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | ### Slots -- **default**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No forwarded events. +### Events -### Dispatched events +None. -No dispatched events. - ---- - -## ToolbarContent - -### Import path - -```js -import { ToolbarContent } from "carbon-components-svelte"; -``` +## `ToolbarContent` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +None. ---- - -## ToolbarMenu - -### Import path - -```js -import { ToolbarMenu } from "carbon-components-svelte"; -``` +## `ToolbarMenu` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -No forwarded events. - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +None. -## ToolbarMenuItem - -### Import path - -```js -import { ToolbarMenuItem } from "carbon-components-svelte"; -``` +## `ToolbarMenuItem` ### Props -No exported props. +None. ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:keydown` - -### Dispatched events - -No dispatched events. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | ---- +### Events -## ToolbarSearch +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| keydown | forwarded | -- | -### Import path - -```js -import { ToolbarSearch } from "carbon-components-svelte"; -``` +## `ToolbarSearch` ### Props -| Prop name | Type | Default value | Description | -| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- | -| value | string | `""` | Specify the value of the search input. | -| expanded | boolean | `false` | Set to `true` to expand the search bar. | -| persistent | boolean | `false` | Set to `true` to keep the search bar expanded. | -| tabindex | string | `"0"` | Specify the tabindex. | -| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | +| value | let | Yes | string | "" | Specify the value of the search input | +| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots -No slots. - -### Forwarded events - -- `on:change` -- `on:input` -- `on:focus` -- `on:blur` - -### Dispatched events - -No dispatched events. - ---- +None. -## Tooltip +### Events -### Import path +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | -```js -import { Tooltip } from "carbon-components-svelte"; -``` +## `Tooltip` ### Props -| Prop name | Type | Default value | Description | -| :-------------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------------------------------- | -| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the button. | -| open | boolean | `false` | Set to `true` to open the tooltip. | -| hideIcon | boolean | `false` | Set to `true` to hide the tooltip icon. | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`). | -| iconDescription | string | `""` | Specify the ARIA label for the tooltip button. | -| iconName | string | `""` | Specify the icon name attribute. | -| tabindex | string | `"0"` | Set the button tabindex. | -| tooltipId | string | -- | Set an id for the tooltip. | -| triggerId | string | -- | Set an id for the tooltip button. | -| triggerText | string | `""` | Set the tooltip button text. | -| ref | null | HTMLElement | `null` | Obtain a reference to the trigger text HTML element. | -| refTooltip | null | HTMLElement | `null` | Obtain a reference to the tooltip HTML element. | -| refIcon | null | HTMLElement | `null` | Obtain a reference to the icon HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | +| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the tooltip | +| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | +| icon | let | No | import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g. `Add16`, `Task16`) | +| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | +| iconName | let | No | string | "" | Specify the icon name attribute | +| tabindex | let | No | string | "0" | Set the button tabindex | +| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | let | No | string | "" | Set the tooltip button text | ### Slots -- **default**: `
...
` -- **"triggerText"**: `
...
` -- **"icon"**: `
...
` +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :---------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> | +| triggerText | No | -- | {triggerText} | -### Forwarded events +### Events -No forwarded events. +| Event name | Type | Detail | +| :--------- | :--------- | :----- | +| undefined | dispatched | -- | -### Dispatched events - -No dispatched events. - ---- - -## TooltipDefinition - -### Import path - -```js -import { TooltipDefinition } from "carbon-components-svelte"; -``` +## `TooltipDefinition` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :------------------------------------------------ | :------------ | :----------------------------------------------------- | -| tooltipText | string | `""` | Specify the tooltip text. | -| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | -| direction | "top" | "bottom" | `"bottom"` | Set the direction of the tooltip relative to the icon. | -| id | string | -- | Set an id for the tooltip div element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| tooltipText | let | No | string | "" | Specify the tooltip text | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element | ### Slots -- **default**: `
...
` -- **"tooltip"**: `
...
` - -### Forwarded events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------- | +| -- | Yes | -- | -- | +| tooltip | No | -- | {tooltipText} | -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:focus` +### Events -### Dispatched events +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| focus | forwarded | -- | -No dispatched events. - ---- - -## TooltipIcon - -### Import path - -```js -import { TooltipIcon } from "carbon-components-svelte"; -``` +## `TooltipIcon` ### Props -| Prop name | Type | Default value | Description | -| :---------- | :-------------------------------------------------------------- | :------------ | :----------------------------------------------------- | -| tooltipText | string | `""` | Specify the tooltip text. | -| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. | -| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the icon. | -| id | string | -- | Set an id for the span element. | -| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| tooltipText | let | No | string | "" | Specify the tooltip text | +| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` -- `on:focus` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| focus | forwarded | -- | ---- - -## UnorderedList - -### Import path - -```js -import { UnorderedList } from "carbon-components-svelte"; -``` +## `UnorderedList` ### Props -| Prop name | Type | Default value | Description | -| :-------- | :------------------- | :------------ | :--------------------------------------- | -| nested | boolean | `false` | Set to `true` to use the nested variant. | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | +| nested | let | No | boolean | false | Set to `true` to use the nested variant | ### Slots -- **default**: `
...
` - -### Forwarded events - -- `on:click` -- `on:mouseover` -- `on:mouseenter` -- `on:mouseleave` - -### Dispatched events +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -No dispatched events. +### Events ---- +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | diff --git a/package.json b/package.json index 5cb52e32..fb961ed2 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^9.8.6", "carbon-components-10.23": "npm:carbon-components@10.23.1", - "comment-parser": "^0.7.6", "gh-pages": "^3.1.0", "husky": "^4.3.0", "lint-staged": "^10.5.0", @@ -39,6 +38,7 @@ "rollup": "^2.32.1", "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", + "sveld": "^0.1.0-rc.0", "svelte": "^3.29.4", "svelte-check": "^1.1.6", "svelte-loader": "^2.13.6", diff --git a/rollup.config.js b/rollup.config.js index 5cbf4381..7481381c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -3,7 +3,7 @@ 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"; +import sveld from "sveld"; export default ["es", "umd"].map((format) => { const UMD = format === "umd"; @@ -22,9 +22,20 @@ export default ["es", "umd"].map((format) => { resolve(), commonjs(), UMD && terser(), - - // TODO: replace - // !UMD && generateDocs(), + UMD && + sveld({ + markdown: true, + markdownOptions: { + onAppend: (type, document, components) => { + if (type === "h1") + document.append( + "quote", + `${components.size} components exported from ${pkg.name}@${pkg.version}.` + ); + }, + }, + json: true, + }), ], }; }); diff --git a/scripts/rollup/generate-index.js b/scripts/rollup/generate-index.js deleted file mode 100644 index 6ffbb264..00000000 --- a/scripts/rollup/generate-index.js +++ /dev/null @@ -1,117 +0,0 @@ -const toLink = (text) => text.toLowerCase().replace(/\s+/g, "-"); - -const toMdLink = (text) => `[${text}](#${toLink(text)})`; - -const formatType = (type) => `${type.replace(/\|/g, "|")}`; - -const escapeHtml = (text) => text.replace(/\/g, ">"); - -const HEADER_PROPS = - "| Prop name | Type | Default value | Description |\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.sort().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 ? "`" + prop.value + "`" : "--" - } | ${escapeHtml(prop.description).replace(/\n/g, ". ")}. |\n`; - }); - } else { - code += "No exported props.\n\n"; - } - - code += "### Slots\n\n"; - - if (slots.size > 0) { - if (slots.get("default")) { - code += "- **default**: `
...
`\n"; - } - - slots.forEach((slot, name) => { - if (slot.default) return; - code += `- **"${name}"**: \`
`let:${attr.name}`) - .join(" ")}>...
\`\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-public-api.js b/scripts/rollup/generate-public-api.js deleted file mode 100644 index 9a7155d4..00000000 --- a/scripts/rollup/generate-public-api.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Use library component metadata to generate component documentation in JSON format. - * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components - * @param {Map} groups - * @param {{name: string; version: string; homepage: string;}} pkg - */ -export function generatePublicAPI(components, groups, pkg) { - const code = { - version: pkg.version, - components: {}, - }; - - components.forEach((component, moduleName) => { - const props = Array.from(component.component.exported_props); - const slots = Array.from(component.component.slots); - const forwarded_events = Array.from(component.component.forwarded_events); - const dispatched_events = Array.from(component.component.dispatched_events); - - code.components[moduleName] = { - moduleName, - props, - slots, - forwarded_events, - dispatched_events, - }; - }); - - return { code }; -} diff --git a/scripts/rollup/generate-types.js b/scripts/rollup/generate-types.js deleted file mode 100644 index 9c0c796d..00000000 --- a/scripts/rollup/generate-types.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * 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} - - export class CarbonSvelteComponent { - $$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.kind === "const") { - $$prop_def += "* @constant\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 CarbonSvelteComponent { - ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""} - - ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""} - }\n\n`; - }); - - return { code }; -} diff --git a/scripts/rollup/parse-component.js b/scripts/rollup/parse-component.js deleted file mode 100644 index 837c9c71..00000000 --- a/scripts/rollup/parse-component.js +++ /dev/null @@ -1,137 +0,0 @@ -import { parse, walk } from "svelte/compiler"; -import commentParser from "comment-parser"; - -/** - * 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(); - 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 kind = node.declaration.kind; - let description = null; - - if (init != null) { - if ( - init.type === "ObjectExpression" || - init.type === "ArrayExpression" - ) { - value = source.slice(init.start, init.end).replace(/\n/g, " "); - type = value; - } else { - 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[comment[0].tags.length - 1].type; - } else { - throw Error( - `[${hooks.component}] property \`${id.name}\` should be annotated.` - ); - } - - exported_props.set(id.name, { kind, 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); - } - }); - - 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": - 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; - - if (name.value !== undefined) { - dispatched_events.set(name.value, { - detail: detail ? source.slice(detail.start, detail.end) : undefined, - }); - } - } - }); - } - - return { - exported_props, - slots, - forwarded_events, - dispatched_events, - }; -} diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js deleted file mode 100644 index be019c8a..00000000 --- a/scripts/rollup/plugin-generate-docs.js +++ /dev/null @@ -1,84 +0,0 @@ -import fs from "fs"; -import path from "path"; -import { promisify } from "util"; -import pkg from "../../package.json"; -import { format } from "prettier"; -import { parseComponent } from "./parse-component"; -import { generateTypes } from "./generate-types"; -import { generateIndex } from "./generate-index"; -import { generatePublicAPI } from "./generate-public-api"; - -const writeFile = promisify(fs.writeFile); - -/** - * Rollup plugin to generate library TypeScript definitions and documentation. - */ -function pluginGenerateDocs() { - 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, {}); - }); - - const shared_types = new Set(); - - 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 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); - typedefs.push(tag); - }, - }); - - components.set(moduleName, { typedefs, component }); - } - }); - } - } - }, - async writeBundle() { - const { code: types } = generateTypes(components, pkg); - await writeFile(pkg.types, format(types, { parser: "typescript" })); - - const { code: index } = generateIndex(components, groups, pkg); - await writeFile( - "./COMPONENT_INDEX.md", - format(index, { parser: "markdown" }) - ); - - const { code: json } = generatePublicAPI(components, groups, pkg); - await writeFile( - "./docs/src/PUBLIC_API.json", - JSON.stringify(json, null, 2) - ); - }, - }; -} - -export default pluginGenerateDocs; diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte index 6f48fd15..c18b6840 100644 --- a/src/Accordion/AccordionItem.svelte +++ b/src/Accordion/AccordionItem.svelte @@ -39,7 +39,7 @@ class:bx--accordion__item--active="{open}" class:bx--accordion__item--disabled="{disabled}" {...$$restProps} - class="bx--accordion__item--${animation} {$$restProps.class}" + class="bx--accordion__item--{animation} {$$restProps.class}" on:animationend on:animationend="{() => { animation = undefined; diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 9ce6c692..e5074788 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -1,4 +1,8 @@