{prop[1].value}
-
- {@html line.replace(/`(.*?)`/g, '
+ {#if prop.description}
+ {#each prop.description.split('\n') as line}
+
{/each}
@@ -128,8 +157,8 @@
- {#each component.slots as slot}
- {slot[0]}
+ {#each component.slots as slot (slot.name)}
+ {slot.default ? 'default' : slot.name}
{/each}
{:else}
@@ -137,10 +166,10 @@
{/if}
- {#each component.forwarded_events as event}
- on:{event[0]}
+ {#each forwarded_events as event (event.name)}
+ on:{event.name}
{/each}
{:else}
@@ -149,12 +178,27 @@
- {#each component.dispatched_events as event}
- on:{event[0]}
+ {#each dispatched_events as event (event.name)}
+ on:{event.name}
{/each}
{:else}
{#if multiple}
- {#each api as component, i (component.moduleName)}
+ {#each api_components as component (component.moduleName)}
{:else}
-
diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte
index 70f239e2..5b0ac79a 100644
--- a/docs/src/layouts/Recipe.svelte
+++ b/docs/src/layouts/Recipe.svelte
@@ -6,7 +6,6 @@
Content,
Select,
SelectItem,
- InlineNotification,
} from "carbon-components-svelte";
import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte";
diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx
index e5d0df31..01b41d16 100644
--- a/docs/src/pages/components/SelectableTile.svx
+++ b/docs/src/pages/components/SelectableTile.svx
@@ -1,9 +1,9 @@
---
-components: ["TileGroup", "SelectableTile"]
+components: ["SelectableTile"]
---
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index b42d446e..c1ae0be0 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -242,6 +242,9 @@ module.exports = {
Dispatched events
+
+ restProps
+
diff --git a/package.json b/package.json
index 753fb622..b1491cbc 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"types": "./types/index.d.ts",
"sideEffects": false,
"scripts": {
+ "check-types": "svelte-check --workspace tests",
"prettier": "prettier --write './**/*.{svelte,js,md}'",
"publish-examples": "node scripts/publish-examples",
"build:css": "node scripts/build-css",
@@ -16,7 +17,7 @@
"prepack": "run-p build:*"
},
"dependencies": {
- "carbon-icons-svelte": "^10.17.0",
+ "carbon-icons-svelte": "^10.21.0",
"flatpickr": "4.6.3"
},
"devDependencies": {
@@ -26,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",
@@ -35,10 +35,12 @@
"postcss": "^7.0.32",
"prettier": "^2.1.2",
"prettier-plugin-svelte": "^1.4.1",
- "rollup": "^2.32.1",
- "rollup-plugin-svelte": "^6.1.0",
+ "rollup": "^2.33.3",
+ "rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2",
- "svelte": "^3.29.4",
+ "sveld": "^0.2.1",
+ "svelte": "^3.29.7",
+ "svelte-check": "^1.1.14",
"svelte-loader": "^2.13.6",
"typescript": "^4.0.5"
},
diff --git a/rollup.config.js b/rollup.config.js
index 6a405cab..2423662c 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,7 +22,23 @@ export default ["es", "umd"].map((format) => {
resolve(),
commonjs(),
UMD && terser(),
- !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,
+ jsonOptions: {
+ outFile: "docs/src/COMPONENT_API.json",
+ },
+ }),
],
};
});
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) => `; 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**: `; 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/Accordion.svelte b/src/Accordion/Accordion.svelte
index d85f873e..ac6059a2 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -1,31 +1,27 @@
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index 144b0256..26d7e521 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -1,17 +1,13 @@
{#if skeleton}
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 9b35f11d..b5df750b 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -1,14 +1,11 @@
diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index cdda91e0..fb120fca 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -1,3 +1,3 @@
export { default as Breadcrumb } from "./Breadcrumb.svelte";
export { default as BreadcrumbItem } from "./BreadcrumbItem.svelte";
-export { default as BreadcrumbSkeleton } from "./Breadcrumb.Skeleton.svelte";
+export { default as BreadcrumbSkeleton } from "./BreadcrumbSkeleton.svelte";
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 39734839..1e6e3a90 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,92 +1,79 @@
diff --git a/src/Button/Button.Skeleton.svelte b/src/Button/ButtonSkeleton.svelte
similarity index 83%
rename from src/Button/Button.Skeleton.svelte
rename to src/Button/ButtonSkeleton.svelte
index 5793abe9..8ff4e495 100644
--- a/src/Button/Button.Skeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -1,20 +1,17 @@
diff --git a/src/Button/index.js b/src/Button/index.js
index 731d8c0a..c5dc77c0 100644
--- a/src/Button/index.js
+++ b/src/Button/index.js
@@ -1,3 +1,3 @@
export { default as Button } from "./Button.svelte";
-export { default as ButtonSkeleton } from "./Button.Skeleton.svelte";
+export { default as ButtonSkeleton } from "./ButtonSkeleton.svelte";
export { default as ButtonSet } from "./ButtonSet.svelte";
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index cb20107d..f3c67062 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -1,72 +1,46 @@
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index aaaf1455..dcd7d575 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -1,3 +1,3 @@
export { default as Checkbox } from "./Checkbox.svelte";
-export { default as CheckboxSkeleton } from "./Checkbox.Skeleton.svelte";
+export { default as CheckboxSkeleton } from "./CheckboxSkeleton.svelte";
export { default as InlineCheckbox } from "./InlineCheckbox.svelte";
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index 0d3c52f8..4e2178e1 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -1,102 +1,72 @@
diff --git a/src/CodeSnippet/index.js b/src/CodeSnippet/index.js
index 4775c90e..6dc60a2f 100644
--- a/src/CodeSnippet/index.js
+++ b/src/CodeSnippet/index.js
@@ -1,2 +1,2 @@
export { default as CodeSnippet } from "./CodeSnippet.svelte";
-export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte";
+export { default as CodeSnippetSkeleton } from "./CodeSnippetSkeleton.svelte";
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 7038b677..c6ab6d32 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -1,122 +1,87 @@
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index 38604e9e..9f57fbf4 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -1,38 +1,26 @@
diff --git a/src/DataTable/TableContainer.svelte b/src/DataTable/TableContainer.svelte
index 36d2933e..ea5d6d1e 100644
--- a/src/DataTable/TableContainer.svelte
+++ b/src/DataTable/TableContainer.svelte
@@ -1,20 +1,11 @@
diff --git a/src/DataTable/TableHeader.svelte b/src/DataTable/TableHeader.svelte
index 363e373e..88926c54 100644
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@@ -1,20 +1,14 @@
diff --git a/src/DataTable/ToolbarSearch.svelte b/src/DataTable/ToolbarSearch.svelte
index 1f5f094c..a34b89b0 100644
--- a/src/DataTable/ToolbarSearch.svelte
+++ b/src/DataTable/ToolbarSearch.svelte
@@ -1,31 +1,22 @@
diff --git a/src/DatePicker/index.js b/src/DatePicker/index.js
index fcf3d9c1..46f8fc8e 100644
--- a/src/DatePicker/index.js
+++ b/src/DatePicker/index.js
@@ -1,3 +1,3 @@
export { default as DatePicker } from "./DatePicker.svelte";
export { default as DatePickerInput } from "./DatePickerInput.svelte";
-export { default as DatePickerSkeleton } from "./DatePicker.Skeleton.svelte";
+export { default as DatePickerSkeleton } from "./DatePickerSkeleton.svelte";
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 0f729017..d0c93750 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -1,118 +1,86 @@
diff --git a/src/Dropdown/index.js b/src/Dropdown/index.js
index e5c140b2..8bb6b0e4 100644
--- a/src/Dropdown/index.js
+++ b/src/Dropdown/index.js
@@ -1,2 +1,2 @@
export { default as Dropdown } from "./Dropdown.svelte";
-export { default as DropdownSkeleton } from "./Dropdown.Skeleton.svelte";
+export { default as DropdownSkeleton } from "./DropdownSkeleton.svelte";
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 34ba779d..52fcc340 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -1,70 +1,58 @@
diff --git a/src/FileUploader/FileUploaderDropContainer.svelte b/src/FileUploader/FileUploaderDropContainer.svelte
index 25a996fd..4fb71b91 100644
--- a/src/FileUploader/FileUploaderDropContainer.svelte
+++ b/src/FileUploader/FileUploaderDropContainer.svelte
@@ -1,74 +1,51 @@
$1')}.
+
+ {#if prop.reactive}
+
+ Reactive
- {/each}
+ {/if}
+
+ {prop.value}
+ {@html line.replace(/`(.*?)`/g, '
+ {/each}
+ {:else}
+ $1')}.
+ No description available.
+ {/if}
Slots
{#if component.slots.length > 0}Forwarded events
-{#if component.forwarded_events.length > 0} +{#if forwarded_events.length > 0}Dispatched events
-{#if component.dispatched_events.length > 0} +{#if dispatched_events.length > 0}No dispatched events.
{/if} + +$$restProps
+ +
+ {#if component.rest_props}
+
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 9d323448..1d462868 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -12,18 +12,13 @@
Tabs,
Tab,
TabContent,
- StructuredList,
- StructuredListHead,
- StructuredListRow,
- StructuredListCell,
- StructuredListBody,
} from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16";
import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte";
import { theme } from "../store";
import ComponentApi from "../components/ComponentApi.svelte";
- import API from "../PUBLIC_API.json";
+ import COMPONENT_API from "../COMPONENT_API.json";
export let component = $page.title;
export let components = [component];
@@ -33,8 +28,11 @@
metatags.title = $page.title;
- $: api = components.map((_) => API.components[_]).filter(Boolean);
- $: multiple = api.length > 1;
+ // TODO: `find` is not supported in IE
+ $: api_components = components.map((i) =>
+ COMPONENT_API.components.find((_) => _.moduleName === i)
+ );
+ $: multiple = api_components.length > 1;
onMount(() => {
const currentTheme = window.location.search.split("?theme=")[1];
@@ -173,15 +171,10 @@
{component.moduleName}
+ spreads
+ $$restProps
+ to the
+ {#if component.rest_props.type === 'Element'}
+ {component.rest_props.name}
+ element.
+ {:else}{component.rest_props.name} component.{/if}
+ {:else}This component does not spread restProps{/if}
+Component API
- Component API documentation is - - auto-generated + Component documentation is + + auto-generated by sveld. - from a build script.
@@ -190,11 +183,11 @@
- {#each api as component, i (component.moduleName)}
+ {#each api_components as component (component.moduleName)}
@@ -202,7 +195,7 @@
${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...
`\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
+ /**
+ * @event {string} delete
+ */
+
/**
* Specify the file uploader status
- * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+ * @type {"uploading" | "edit" | "complete"}
*/
export let status = "uploading";
- /**
- * Specify the ARIA label used for the status icons
- * @type {string} [iconDescription=""]
- */
+ /** Specify the ARIA label used for the status icons */
export let iconDescription = "";
- /**
- * Set to `true` to indicate an invalid state
- * @type {boolean} [invalid=false]
- */
+ /** Set to `true` to indicate an invalid state */
export let invalid = false;
- /**
- * Specify the error subject text
- * @type {string} [errorSubject=""]
- */
+ /** Specify the error subject text */
export let errorSubject = "";
- /**
- * Specify the error body text
- * @type {string} [errorBody=""]
- */
+ /** Specify the error body text */
export let errorBody = "";
- /**
- * Set an id for the top-level element
- * @type {string} [id]
- */
+ /** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
- /**
- * Specify the file uploader name
- * @type {string} [name=""]
- */
+ /** Specify the file uploader name */
export let name = "";
import { createEventDispatcher } from "svelte";
diff --git a/src/FileUploader/FileUploader.Skeleton.svelte b/src/FileUploader/FileUploaderSkeleton.svelte
similarity index 100%
rename from src/FileUploader/FileUploader.Skeleton.svelte
rename to src/FileUploader/FileUploaderSkeleton.svelte
diff --git a/src/FileUploader/Filename.svelte b/src/FileUploader/Filename.svelte
index 36d0f040..d8d913a7 100644
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@@ -1,20 +1,14 @@
diff --git a/src/FormLabel/FormLabel.svelte b/src/FormLabel/FormLabel.svelte
index 937d136b..535e6dee 100644
--- a/src/FormLabel/FormLabel.svelte
+++ b/src/FormLabel/FormLabel.svelte
@@ -1,8 +1,5 @@
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index 7734f509..7964d317 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -1,76 +1,67 @@
{#if skeleton}
diff --git a/src/Icon/Icon.Skeleton.svelte b/src/Icon/IconSkeleton.svelte
similarity index 76%
rename from src/Icon/Icon.Skeleton.svelte
rename to src/Icon/IconSkeleton.svelte
index 4d958fbd..e67da320 100644
--- a/src/Icon/Icon.Skeleton.svelte
+++ b/src/Icon/IconSkeleton.svelte
@@ -1,8 +1,5 @@
diff --git a/src/Icon/index.js b/src/Icon/index.js
index 41f46931..551efcd3 100644
--- a/src/Icon/index.js
+++ b/src/Icon/index.js
@@ -1,2 +1,2 @@
export { default as Icon } from "./Icon.svelte";
-export { default as IconSkeleton } from "./Icon.Skeleton.svelte";
+export { default as IconSkeleton } from "./IconSkeleton.svelte";
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 8498100f..081d05e8 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -1,26 +1,23 @@
diff --git a/src/ListBox/ListBox.svelte b/src/ListBox/ListBox.svelte
index 5e519d95..9e3298e9 100644
--- a/src/ListBox/ListBox.svelte
+++ b/src/ListBox/ListBox.svelte
@@ -1,44 +1,29 @@
diff --git a/src/ListBox/ListBoxField.svelte b/src/ListBox/ListBoxField.svelte
index 9c06b8e1..5341a42e 100644
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@@ -1,51 +1,32 @@
diff --git a/src/ListBox/ListBoxMenuIcon.svelte b/src/ListBox/ListBoxMenuIcon.svelte
index dd4c8836..d1cd1485 100644
--- a/src/ListBox/ListBoxMenuIcon.svelte
+++ b/src/ListBox/ListBoxMenuIcon.svelte
@@ -1,27 +1,20 @@
diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index 8df1bfb7..6fc1d25e 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -1,21 +1,18 @@
diff --git a/src/Notification/ToastNotification.svelte b/src/Notification/ToastNotification.svelte
index 2eebb2a2..597295fc 100644
--- a/src/Notification/ToastNotification.svelte
+++ b/src/Notification/ToastNotification.svelte
@@ -1,62 +1,38 @@
diff --git a/src/NumberInput/index.js b/src/NumberInput/index.js
index af304831..d58c80e1 100644
--- a/src/NumberInput/index.js
+++ b/src/NumberInput/index.js
@@ -1,2 +1,2 @@
export { default as NumberInput } from "./NumberInput.svelte";
-export { default as NumberInputSkeleton } from "./NumberInput.Skeleton.svelte";
+export { default as NumberInputSkeleton } from "./NumberInputSkeleton.svelte";
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index 449e39f9..d4facb31 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/src/OrderedList/OrderedList.svelte
@@ -1,14 +1,8 @@
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 26121925..4d2b4080 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -1,74 +1,53 @@
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index 0292d977..1e97b5e9 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -1,38 +1,20 @@
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 3ed26843..96f7b6fd 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -1,50 +1,26 @@
diff --git a/src/Search/Search.Skeleton.svelte b/src/Search/SearchSkeleton.svelte
similarity index 88%
rename from src/Search/Search.Skeleton.svelte
rename to src/Search/SearchSkeleton.svelte
index 8ca6a06c..a8059b17 100644
--- a/src/Search/Search.Skeleton.svelte
+++ b/src/Search/SearchSkeleton.svelte
@@ -2,13 +2,12 @@
/**
* @deprecated this prop will be removed in the next major release
* Set to `true` to use the small variant
- * @type {boolean} [small=false]
*/
export let small = false;
/**
* Specify the size of the search input
- * @type {"sm" | "lg" | "xl"} [size="xl"]
+ * @type {"sm" | "lg" | "xl"}
*/
export let size = "xl";
diff --git a/src/Search/index.js b/src/Search/index.js
index 535981c0..5ce0608a 100644
--- a/src/Search/index.js
+++ b/src/Search/index.js
@@ -1,2 +1,2 @@
export { default as Search } from "./Search.svelte";
-export { default as SearchSkeleton } from "./Search.Skeleton.svelte";
+export { default as SearchSkeleton } from "./SearchSkeleton.svelte";
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index b6884aac..1a1620ac 100644
--- a/src/Select/Select.svelte
+++ b/src/Select/Select.svelte
@@ -1,86 +1,53 @@
diff --git a/src/Select/Select.Skeleton.svelte b/src/Select/SelectSkeleton.svelte
similarity index 80%
rename from src/Select/Select.Skeleton.svelte
rename to src/Select/SelectSkeleton.svelte
index df67e270..4b0382ef 100644
--- a/src/Select/Select.Skeleton.svelte
+++ b/src/Select/SelectSkeleton.svelte
@@ -1,8 +1,5 @@
diff --git a/src/Select/index.js b/src/Select/index.js
index 22f8cd67..06350614 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -1,4 +1,4 @@
export { default as Select } from "./Select.svelte";
-export { default as SelectSkeleton } from "./Select.Skeleton.svelte";
+export { default as SelectSkeleton } from "./SelectSkeleton.svelte";
export { default as SelectItem } from "./SelectItem.svelte";
export { default as SelectItemGroup } from "./SelectItemGroup.svelte";
diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index 0b8e0571..745d6299 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -1,33 +1,16 @@
diff --git a/src/Slider/index.js b/src/Slider/index.js
index 558290e1..5f440043 100644
--- a/src/Slider/index.js
+++ b/src/Slider/index.js
@@ -1,2 +1,2 @@
export { default as Slider } from "./Slider.svelte";
-export { default as SliderSkeleton } from "./Slider.Skeleton.svelte";
+export { default as SliderSkeleton } from "./SliderSkeleton.svelte";
diff --git a/src/StructuredList/StructuredList.svelte b/src/StructuredList/StructuredList.svelte
index 7e4ab923..919b9fbd 100644
--- a/src/StructuredList/StructuredList.svelte
+++ b/src/StructuredList/StructuredList.svelte
@@ -1,20 +1,14 @@
diff --git a/src/StructuredList/StructuredListInput.svelte b/src/StructuredList/StructuredListInput.svelte
index d1314b5f..2b0f365e 100644
--- a/src/StructuredList/StructuredListInput.svelte
+++ b/src/StructuredList/StructuredListInput.svelte
@@ -1,38 +1,20 @@
diff --git a/src/StructuredList/StructuredList.Skeleton.svelte b/src/StructuredList/StructuredListSkeleton.svelte
similarity index 86%
rename from src/StructuredList/StructuredList.Skeleton.svelte
rename to src/StructuredList/StructuredListSkeleton.svelte
index 0b04ccdd..a52ede00 100644
--- a/src/StructuredList/StructuredList.Skeleton.svelte
+++ b/src/StructuredList/StructuredListSkeleton.svelte
@@ -1,14 +1,8 @@
diff --git a/src/StructuredList/index.js b/src/StructuredList/index.js
index 6b3bf38e..41c131b0 100644
--- a/src/StructuredList/index.js
+++ b/src/StructuredList/index.js
@@ -1,5 +1,5 @@
export { default as StructuredList } from "./StructuredList.svelte";
-export { default as StructuredListSkeleton } from "./StructuredList.Skeleton.svelte";
+export { default as StructuredListSkeleton } from "./StructuredListSkeleton.svelte";
export { default as StructuredListBody } from "./StructuredListBody.svelte";
export { default as StructuredListHead } from "./StructuredListHead.svelte";
export { default as StructuredListCell } from "./StructuredListCell.svelte";
diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index b8d53cca..43c49adc 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -2,38 +2,22 @@
/**
* Specify the tab label
* Alternatively, use the default slot (e.g. Label )
- * @type {string} [label=""]
*/
export let label = "";
- /**
- * Specify the href attribute
- * @type {string} [href="#"]
- */
+ /** Specify the href attribute */
export let href = "#";
- /**
- * Set to `true` to disable the tab
- * @type {boolean} [disabled=false]
- */
+ /** Set to `true` to disable the tab */
export let disabled = false;
- /**
- * Specify the tabindex
- * @type {string} [tabindex="0"]
- */
+ /** Specify the tabindex */
export let tabindex = "0";
- /**
- * Set an id for the top-level element
- * @type {string} [id]
- */
+ /** Set an id for the top-level element */
export let id = "ccs-" + Math.random().toString(36);
- /**
- * Obtain a reference to the anchor HTML element
- * @type {null | HTMLAnchorElement} [ref=null]
- */
+ /** Obtain a reference to the anchor HTML element */
export let ref = null;
import { getContext } from "svelte";
diff --git a/src/Tabs/TabContent.svelte b/src/Tabs/TabContent.svelte
index fcaa2dff..b04cacf5 100644
--- a/src/Tabs/TabContent.svelte
+++ b/src/Tabs/TabContent.svelte
@@ -1,8 +1,5 @@
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index eca4b4f5..f80abfc7 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -1,42 +1,31 @@
{#if skeleton}
diff --git a/src/Tag/Tag.Skeleton.svelte b/src/Tag/TagSkeleton.svelte
similarity index 100%
rename from src/Tag/Tag.Skeleton.svelte
rename to src/Tag/TagSkeleton.svelte
diff --git a/src/Tag/index.js b/src/Tag/index.js
index 21b86b2c..b33646f6 100644
--- a/src/Tag/index.js
+++ b/src/Tag/index.js
@@ -1,2 +1,2 @@
export { default as Tag } from "./Tag.svelte";
-export { default as TagSkeleton } from "./Tag.Skeleton.svelte";
+export { default as TagSkeleton } from "./TagSkeleton.svelte";
diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte
index edecf626..fa338b41 100644
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@@ -1,86 +1,47 @@
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index 74782672..91cd083d 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -1,2 +1,2 @@
export { default as TextArea } from "./TextArea.svelte";
-export { default as TextAreaSkeleton } from "./TextArea.Skeleton.svelte";
+export { default as TextAreaSkeleton } from "./TextAreaSkeleton.svelte";
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index c92f933f..f0ef0613 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -1,110 +1,74 @@
diff --git a/src/TextInput/index.js b/src/TextInput/index.js
index 6a3d8273..a3399154 100644
--- a/src/TextInput/index.js
+++ b/src/TextInput/index.js
@@ -1,3 +1,3 @@
export { default as TextInput } from "./TextInput.svelte";
-export { default as TextInputSkeleton } from "./TextInput.Skeleton.svelte";
+export { default as TextInputSkeleton } from "./TextInputSkeleton.svelte";
export { default as PasswordInput } from "./PasswordInput.svelte";
diff --git a/src/Tile/ClickableTile.svelte b/src/Tile/ClickableTile.svelte
index 61dce622..980216c4 100644
--- a/src/Tile/ClickableTile.svelte
+++ b/src/Tile/ClickableTile.svelte
@@ -1,19 +1,13 @@
diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index f47c933c..ee5a2349 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -1,56 +1,29 @@
diff --git a/src/Tile/TileGroup.svelte b/src/Tile/TileGroup.svelte
index eda7a7c9..4a5cc508 100644
--- a/src/Tile/TileGroup.svelte
+++ b/src/Tile/TileGroup.svelte
@@ -1,20 +1,14 @@
diff --git a/src/TimePicker/TimePickerSelect.svelte b/src/TimePicker/TimePickerSelect.svelte
index 7cae55ad..2eb46a25 100644
--- a/src/TimePicker/TimePickerSelect.svelte
+++ b/src/TimePicker/TimePickerSelect.svelte
@@ -1,51 +1,35 @@
diff --git a/src/Toggle/Toggle.Skeleton.svelte b/src/Toggle/ToggleSkeleton.svelte
similarity index 84%
rename from src/Toggle/Toggle.Skeleton.svelte
rename to src/Toggle/ToggleSkeleton.svelte
index a063e6ae..0098a51e 100644
--- a/src/Toggle/Toggle.Skeleton.svelte
+++ b/src/Toggle/ToggleSkeleton.svelte
@@ -1,14 +1,8 @@
diff --git a/src/Toggle/index.js b/src/Toggle/index.js
index 47df71f0..44cffe37 100644
--- a/src/Toggle/index.js
+++ b/src/Toggle/index.js
@@ -1,2 +1,2 @@
export { default as Toggle } from "./Toggle.svelte";
-export { default as ToggleSkeleton } from "./Toggle.Skeleton.svelte";
+export { default as ToggleSkeleton } from "./ToggleSkeleton.svelte";
diff --git a/src/ToggleSmall/ToggleSmall.svelte b/src/ToggleSmall/ToggleSmall.svelte
index dbba1bd5..6afb4371 100644
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@@ -1,43 +1,25 @@
diff --git a/src/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/ToggleSmall/ToggleSmallSkeleton.svelte
similarity index 86%
rename from src/ToggleSmall/ToggleSmall.Skeleton.svelte
rename to src/ToggleSmall/ToggleSmallSkeleton.svelte
index d55c6a1e..98b61228 100644
--- a/src/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte
@@ -1,14 +1,8 @@
diff --git a/src/ToggleSmall/index.js b/src/ToggleSmall/index.js
index 48daac0b..ad88325b 100644
--- a/src/ToggleSmall/index.js
+++ b/src/ToggleSmall/index.js
@@ -1,2 +1,2 @@
export { default as ToggleSmall } from "./ToggleSmall.svelte";
-export { default as ToggleSmallSkeleton } from "./ToggleSmall.Skeleton.svelte";
+export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte";
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 2eb7ee7a..fb1a8479 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -1,81 +1,60 @@
- /**
- * Specify the id for the main element
- * @type {string} [id="main-content"]
- */
+ /** Specify the id for the main element */
export let id = "main-content";
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 311f9725..d542bb21 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -1,51 +1,38 @@
diff --git a/src/UIShell/GlobalHeader/HeaderNavItem.svelte b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
index b7dd47c4..3d8c752e 100644
--- a/src/UIShell/GlobalHeader/HeaderNavItem.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavItem.svelte
@@ -1,20 +1,17 @@
diff --git a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
index 0d9506d0..66e25483 100644
--- a/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
+++ b/src/UIShell/GlobalHeader/HeaderNavMenu.svelte
@@ -1,32 +1,20 @@
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 18d442b9..6f574918 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -1,20 +1,14 @@
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index 4e550d61..c75aa8a3 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -1,20 +1,14 @@
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index 2443af4b..d79c59bf 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -1,32 +1,26 @@
diff --git a/src/UIShell/SkipToContent.svelte b/src/UIShell/SkipToContent.svelte
index 6fc15809..cbba79ce 100644
--- a/src/UIShell/SkipToContent.svelte
+++ b/src/UIShell/SkipToContent.svelte
@@ -1,14 +1,8 @@
diff --git a/src/UnorderedList/UnorderedList.svelte b/src/UnorderedList/UnorderedList.svelte
index 7ab560ae..83632d00 100644
--- a/src/UnorderedList/UnorderedList.svelte
+++ b/src/UnorderedList/UnorderedList.svelte
@@ -1,8 +1,5 @@
diff --git a/tests/Accordion.test.svelte b/tests/Accordion.test.svelte
new file mode 100644
index 00000000..53b649a1
--- /dev/null
+++ b/tests/Accordion.test.svelte
@@ -0,0 +1,219 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2x1
+
+
+
+ 16x9
+
+
+
+ 4x3
+
+
+
+ 1x1
+
+
+
+ 3x4
+
+
+
+ 9x16
+
+
+
+ 1x2
+
+
+
+ Content
+
diff --git a/tests/AspectRatioColumns.test.svelte b/tests/AspectRatioColumns.test.svelte
new file mode 100644
index 00000000..b96aa28f
--- /dev/null
+++ b/tests/AspectRatioColumns.test.svelte
@@ -0,0 +1,20 @@
+
+
+
+
+
+ 2x1
+
+
+ 2x1
+
+
+
diff --git a/tests/Breadcrumb.test.svelte b/tests/Breadcrumb.test.svelte
new file mode 100644
index 00000000..3baab96e
--- /dev/null
+++ b/tests/Breadcrumb.test.svelte
@@ -0,0 +1,16 @@
+
+
+
+ Dashboard
+ Annual reports
+ 2019
+
+
+
+ Home
+ Profile
+
+
+
+
+
+ {#each items as item, i}
+
+ {item.text}
+
+ {/each}
+
+
+
diff --git a/tests/Button.test.svelte b/tests/Button.test.svelte
new file mode 100644
index 00000000..5778fcb2
--- /dev/null
+++ b/tests/Button.test.svelte
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/ButtonSet.test.svelte b/tests/ButtonSet.test.svelte
new file mode 100644
index 00000000..9db8426b
--- /dev/null
+++ b/tests/ButtonSet.test.svelte
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/Checkbox.test.svelte b/tests/Checkbox.test.svelte
new file mode 100644
index 00000000..d34306a3
--- /dev/null
+++ b/tests/Checkbox.test.svelte
@@ -0,0 +1,15 @@
+
+
+
+ Carbon Design System
+
+
+
+ Carbon Design System
+
diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte
new file mode 100644
index 00000000..ecc342ea
--- /dev/null
+++ b/tests/CodeSnippet.test.svelte
@@ -0,0 +1,50 @@
+
+
+yarn add -D carbon-components-svelte
+
+rm -rf node_modules/
+
+
+
+
+
diff --git a/tests/CondensedGrid.test.svelte b/tests/CondensedGrid.test.svelte
new file mode 100644
index 00000000..b32e56fa
--- /dev/null
+++ b/tests/CondensedGrid.test.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+ Column
+ Column
+ Column
+ Column
+
+
diff --git a/tests/ContentSwitcher.test.svelte b/tests/ContentSwitcher.test.svelte
new file mode 100644
index 00000000..9ccdf33e
--- /dev/null
+++ b/tests/ContentSwitcher.test.svelte
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/CopyButton.test.svelte b/tests/CopyButton.test.svelte
new file mode 100644
index 00000000..1aa0a2ab
--- /dev/null
+++ b/tests/CopyButton.test.svelte
@@ -0,0 +1,16 @@
+
+
+{code}
diff --git a/tests/DangerModal.test.svelte b/tests/DangerModal.test.svelte
new file mode 100644
index 00000000..6fc936dc
--- /dev/null
+++ b/tests/DangerModal.test.svelte
@@ -0,0 +1,21 @@
+
+
+
+
+
+
diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
new file mode 100644
index 00000000..d0733fe3
--- /dev/null
+++ b/tests/DataTable.test.svelte
@@ -0,0 +1,192 @@
+
+
+
+
+ {#if header.key === 'port'}
+ {header.value}
+ (network)
+ {:else}{header.value}{/if}
+
+
+ {#if cell.key === 'rule' && cell.value === 'Round robin'}
+
+ {cell.value}
+
+
+
+
+
+
+ Restart all
+
+ API documentation
+
+ Stop all
+
+
+
+
+
+
+
+
+
+
+ Restart all
+
+ API documentation
+
+ Stop all
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if cell.key === 'overflow'}
+
+
+ {:else}{cell.value}{/if}
+
+
diff --git a/tests/DataTableBatchSelection.test.svelte b/tests/DataTableBatchSelection.test.svelte
new file mode 100644
index 00000000..f10f8a6b
--- /dev/null
+++ b/tests/DataTableBatchSelection.test.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+ Restart all
+
+ API documentation
+
+ Stop all
+
+
+
+
+
diff --git a/tests/DatePicker.test.svelte b/tests/DatePicker.test.svelte
new file mode 100644
index 00000000..bb6aebe5
--- /dev/null
+++ b/tests/DatePicker.test.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte
new file mode 100644
index 00000000..65ef2649
--- /dev/null
+++ b/tests/FileUploader.test.svelte
@@ -0,0 +1,33 @@
+
+
+
+
diff --git a/tests/Form.test.svelte b/tests/Form.test.svelte
new file mode 100644
index 00000000..ca988339
--- /dev/null
+++ b/tests/Form.test.svelte
@@ -0,0 +1,54 @@
+
+
+
diff --git a/tests/FullWidthGrid.test.svelte b/tests/FullWidthGrid.test.svelte
new file mode 100644
index 00000000..cfa70ce2
--- /dev/null
+++ b/tests/FullWidthGrid.test.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+ Column
+ Column
+ Column
+ Column
+
+
diff --git a/tests/Grid.test.svelte b/tests/Grid.test.svelte
new file mode 100644
index 00000000..7ffec15f
--- /dev/null
+++ b/tests/Grid.test.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+ Column
+ Column
+ Column
+ Column
+
+
diff --git a/tests/HeaderNav.test.svelte b/tests/HeaderNav.test.svelte
new file mode 100644
index 00000000..c59d122e
--- /dev/null
+++ b/tests/HeaderNav.test.svelte
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/HeaderSwitcher.test.svelte b/tests/HeaderSwitcher.test.svelte
new file mode 100644
index 00000000..e996cfbf
--- /dev/null
+++ b/tests/HeaderSwitcher.test.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Switcher subject 1
+ Switcher item 1
+ Switcher subject 2
+ Switcher item 1
+ Switcher item 2
+ Switcher item 3
+ Switcher item 4
+ Switcher item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/HeaderUtilities.test.svelte b/tests/HeaderUtilities.test.svelte
new file mode 100644
index 00000000..ed2eeef3
--- /dev/null
+++ b/tests/HeaderUtilities.test.svelte
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Switcher subject 1
+ Switcher item 1
+ Switcher subject 2
+ Switcher item 1
+ Switcher item 2
+ Switcher item 3
+ Switcher item 4
+ Switcher item 5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/HiddenCodeSnippet.test.svelte b/tests/HiddenCodeSnippet.test.svelte
new file mode 100644
index 00000000..3298f472
--- /dev/null
+++ b/tests/HiddenCodeSnippet.test.svelte
@@ -0,0 +1,34 @@
+
+
+
+
+
+{/if} +
+
+
+
+ {#if state !== 'dormant'}
+
diff --git a/tests/InlineNotification.test.svelte b/tests/InlineNotification.test.svelte
new file mode 100644
index 00000000..74d884a1
--- /dev/null
+++ b/tests/InlineNotification.test.svelte
@@ -0,0 +1,43 @@
+
+
+
+
+
+Learn more
+
+
+
diff --git a/tests/ModalExtraSmall.test.svelte b/tests/ModalExtraSmall.test.svelte
new file mode 100644
index 00000000..761c4dbf
--- /dev/null
+++ b/tests/ModalExtraSmall.test.svelte
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/tests/ModalLarge.test.svelte b/tests/ModalLarge.test.svelte
new file mode 100644
index 00000000..1b9474d9
--- /dev/null
+++ b/tests/ModalLarge.test.svelte
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/tests/ModalPreventOutsideClick.test.svelte b/tests/ModalPreventOutsideClick.test.svelte
new file mode 100644
index 00000000..6bb89681
--- /dev/null
+++ b/tests/ModalPreventOutsideClick.test.svelte
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/tests/ModalSmall.test.svelte b/tests/ModalSmall.test.svelte
new file mode 100644
index 00000000..7d4c935f
--- /dev/null
+++ b/tests/ModalSmall.test.svelte
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte
new file mode 100644
index 00000000..1e67f675
--- /dev/null
+++ b/tests/MultiSelect.test.svelte
@@ -0,0 +1,68 @@
+
+
+
+
+ Column
+ Column
+ Column
+ Column
+
+
diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte
new file mode 100644
index 00000000..8d91a7af
--- /dev/null
+++ b/tests/NumberInput.test.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Offset 3
+
+
+ Offset 2
+
+
+ Offset 1
+
+
+ Offset 0
+
+
+
diff --git a/tests/OrderedList.test.svelte b/tests/OrderedList.test.svelte
new file mode 100644
index 00000000..46856519
--- /dev/null
+++ b/tests/OrderedList.test.svelte
@@ -0,0 +1,57 @@
+
+
+
+ Ordered list item
+ Ordered list item
+ Ordered list item
+
+
+
+
+ Ordered list item
+
+
+ Ordered list item
+
+
+ Ordered list item
+
+
+
+
+
+ Ordered list level 1
+
+ Ordered list level 2
+
+ Ordered list level 3
+
+ Ordered list level 3
+ Ordered list level 3
+
+
+
+
+ Ordered list level 1
+ Ordered list level 1
+
+
+
+
+ Ordered list level 1
+
+ Ordered list level 2
+
+ Ordered list level 3
+
+ Ordered list level 3
+ Ordered list level 3
+
+
+
+
+ Ordered list level 1
+ Ordered list level 1
+
diff --git a/tests/OverflowMenu.test.svelte b/tests/OverflowMenu.test.svelte
new file mode 100644
index 00000000..b728fb23
--- /dev/null
+++ b/tests/OverflowMenu.test.svelte
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte
new file mode 100644
index 00000000..e56f2de9
--- /dev/null
+++ b/tests/Pagination.test.svelte
@@ -0,0 +1,15 @@
+
+
+
+
diff --git a/tests/PasswordInput.test.svelte b/tests/PasswordInput.test.svelte
new file mode 100644
index 00000000..6d9f5ce9
--- /dev/null
+++ b/tests/PasswordInput.test.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/ProgressIndicator.test.svelte b/tests/ProgressIndicator.test.svelte
new file mode 100644
index 00000000..ccda25af
--- /dev/null
+++ b/tests/ProgressIndicator.test.svelte
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/RadioSelectableDataTable.test.svelte b/tests/RadioSelectableDataTable.test.svelte
new file mode 100644
index 00000000..07f60d72
--- /dev/null
+++ b/tests/RadioSelectableDataTable.test.svelte
@@ -0,0 +1,24 @@
+
+
+
+ Lite plan
+ Standard plan
+ Plus plan
+
+
+
+ Lite plan
+ Standard plan
+ Plus plan
+
diff --git a/tests/ResponsiveGrid.test.svelte b/tests/ResponsiveGrid.test.svelte
new file mode 100644
index 00000000..b0b3c5b9
--- /dev/null
+++ b/tests/ResponsiveGrid.test.svelte
@@ -0,0 +1,40 @@
+
+
+
+
+
+ sm: 1, md: 4, lg: 8
+
+
+ sm: 1, md: 2, lg: 2
+
+
+ sm: 1, md: 1, lg: 1
+
+
+ sm: 1, md: 1, lg: 1
+
+
+
diff --git a/tests/Search.test.svelte b/tests/Search.test.svelte
new file mode 100644
index 00000000..ac067dbb
--- /dev/null
+++ b/tests/Search.test.svelte
@@ -0,0 +1,21 @@
+
+
+Multi-select Tile
+
+Multi-select Tile
+
+Multi-select Tile
+
+Multi-select Tile
+
+Multi-select Tile
+
+Multi-select Tile
diff --git a/tests/SkeletonPlaceholder.test.svelte b/tests/SkeletonPlaceholder.test.svelte
new file mode 100644
index 00000000..aabd46a8
--- /dev/null
+++ b/tests/SkeletonPlaceholder.test.svelte
@@ -0,0 +1,7 @@
+
+
+
+
+
+ Column A
+ Column B
+ Column C
+
+
+
+
+ Row 1
+ Row 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+ finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+ euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+ porttitor interdum.
+
+
+
+ Row 2
+ Row 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+ finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+ euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+ porttitor interdum.
+
+
+
+ Row 3
+ Row 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
+ finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
+ euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
+ porttitor interdum.
+
+
+
+
+
+
+
+
+ ColumnA
+ ColumnB
+ ColumnC
+ {''}
+
+
+
+ {#each [1, 2, 3] as item}
+
+ Row {item}
+ Row {item}
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+ magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+ sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+ vulputate nisl a porttitor interdum.
+
+
+
+
+ {/each}
+
+
+
+
+
+
+Content 1
+
+Content 2
+
+Content 3
+
+
+
+
+Content 1
+
+Content 2
+
+Content 3
+
+IBM Cloud
+
+red
+
+magenta
+
+purple
+
+blue
+
+cyan
+
+teal
+
+green
+
+gray
+
+cool-gray
+
+warm-gray
+
+high-contrast
+
+Filterable
+
+Content
+
+Content
diff --git a/tests/TimePicker.test.svelte b/tests/TimePicker.test.svelte
new file mode 100644
index 00000000..2bbe3ec9
--- /dev/null
+++ b/tests/TimePicker.test.svelte
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/ToastNotification.test.svelte b/tests/ToastNotification.test.svelte
new file mode 100644
index 00000000..de2c3176
--- /dev/null
+++ b/tests/ToastNotification.test.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Learn more
+
+
+
+
+
+
+
+
+
diff --git a/tests/TooltipDefinition.test.svelte b/tests/TooltipDefinition.test.svelte
new file mode 100644
index 00000000..dc942869
--- /dev/null
+++ b/tests/TooltipDefinition.test.svelte
@@ -0,0 +1,24 @@
+
+
+
+ Armonk
+
+
+
+ Armonk
+
+
+
+ Armonk
+
+ IBM Corporate Headquarters is based in Armonk, New York.
+
+
diff --git a/tests/TooltipIcon.test.svelte b/tests/TooltipIcon.test.svelte
new file mode 100644
index 00000000..d5f08a12
--- /dev/null
+++ b/tests/TooltipIcon.test.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/UnorderedList.test.svelte b/tests/UnorderedList.test.svelte
new file mode 100644
index 00000000..ad9df83a
--- /dev/null
+++ b/tests/UnorderedList.test.svelte
@@ -0,0 +1,39 @@
+
+
+
+ Unordered list item
+ Unordered list item
+ Unordered list item
+
+
+
+
+ Unordered list item
+
+
+ Unordered list item
+
+
+ Unordered list item
+
+
+
+
+
+ Unordered list level 1
+
+ Unordered list level 2
+
+ Unordered list level 3
+
+ Unordered list level 3
+ Unordered list level 3
+
+
+
+
+ Unordered list level 1
+ Unordered list level 1
+
diff --git a/types/Accordion/Accordion.d.ts b/types/Accordion/Accordion.d.ts
new file mode 100644
index 00000000..b08768a0
--- /dev/null
+++ b/types/Accordion/Accordion.d.ts
@@ -0,0 +1,40 @@
+/// {
+ /**
+ * Specify the title of the accordion item heading
+ * Alternatively, use the named slot "title" (e.g. {
+ /**
+ * Specify the number of accordion items to render
+ * @default 4
+ */
+ count?: number;
+
+ /**
+ * Specify alignment of accordion item chevron icon
+ * @default "end"
+ */
+ align?: "start" | "end";
+
+ /**
+ * Specify the size of the accordion
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Set to `false` to close the first accordion item
+ * @default true
+ */
+ open?: boolean;
+}
+
+export default class AccordionSkeleton {
+ $$prop_def: AccordionSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts
new file mode 100644
index 00000000..89678b5d
--- /dev/null
+++ b/types/AspectRatio/AspectRatio.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Specify the aspect ratio
+ * @default "2x1"
+ */
+ ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
+}
+
+export default class AspectRatio {
+ $$prop_def: AspectRatioProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Breadcrumb/Breadcrumb.d.ts b/types/Breadcrumb/Breadcrumb.d.ts
new file mode 100644
index 00000000..787bf712
--- /dev/null
+++ b/types/Breadcrumb/Breadcrumb.d.ts
@@ -0,0 +1,29 @@
+/// {
+ /**
+ * Set the `href` to use an anchor link
+ */
+ href?: string;
+
+ /**
+ * Set to `true` if the breadcrumb item represents the current page
+ * @default false
+ */
+ isCurrentPage?: boolean;
+}
+
+export default class BreadcrumbItem {
+ $$prop_def: BreadcrumbItemProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Breadcrumb/BreadcrumbSkeleton.d.ts b/types/Breadcrumb/BreadcrumbSkeleton.d.ts
new file mode 100644
index 00000000..3f0caaaf
--- /dev/null
+++ b/types/Breadcrumb/BreadcrumbSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Set to `true` to hide the breadcrumb trailing slash
+ * @default false
+ */
+ noTrailingSlash?: boolean;
+
+ /**
+ * Specify the number of breadcrumb items to render
+ * @default 3
+ */
+ count?: number;
+}
+
+export default class BreadcrumbSkeleton {
+ $$prop_def: BreadcrumbSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts
new file mode 100644
index 00000000..c23e1e75
--- /dev/null
+++ b/types/Button/Button.d.ts
@@ -0,0 +1,112 @@
+/// ,
+ svelte.JSX.HTMLAttributes,
+ svelte.JSX.HTMLAttributes {
+ /**
+ * Specify the kind of button
+ * @default "primary"
+ */
+ kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost";
+
+ /**
+ * Specify the size of button
+ * @default "default"
+ */
+ size?: "default" | "field" | "small";
+
+ /**
+ * Set to `true` for the icon-only variant
+ * @default false
+ */
+ hasIconOnly?: boolean;
+
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render
+ */
+ icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Specify the ARIA label for the button icon
+ */
+ iconDescription?: string;
+
+ /**
+ * Set the alignment of the tooltip relative to the icon
+ * `hasIconOnly` must be set to `true`
+ */
+ tooltipAlignment?: "start" | "center" | "end";
+
+ /**
+ * Set the position of the tooltip relative to the icon
+ */
+ tooltipPosition?: "top" | "right" | "bottom" | "left";
+
+ /**
+ * Set to `true` to render a custom HTML element
+ * Props are destructured as `props` in the default slot (e.g. )
+ * @default false
+ */
+ as?: boolean;
+
+ /**
+ * Set to `true` to display the skeleton state
+ * @default false
+ */
+ skeleton?: boolean;
+
+ /**
+ * Set to `true` to disable the button
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set the `href` to use an anchor link
+ */
+ href?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Specify the `type` attribute for the button element
+ * @default "button"
+ */
+ type?: string;
+
+ /**
+ * Obtain a reference to the HTML element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement | HTMLButtonElement;
+}
+
+export default class Button {
+ $$prop_def: ButtonProps;
+ $$slot_def: {
+ default: {
+ props: {
+ role: "button";
+ type?: string;
+ tabindex: any;
+ disabled: boolean;
+ href?: string;
+ class: string;
+ [key: string]: any;
+ };
+ };
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Button/ButtonSet.d.ts b/types/Button/ButtonSet.d.ts
new file mode 100644
index 00000000..3bddf6b6
--- /dev/null
+++ b/types/Button/ButtonSet.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Set to `true` to stack the buttons vertically
+ * @default false
+ */
+ stacked?: boolean;
+}
+
+export default class ButtonSet {
+ $$prop_def: ButtonSetProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Button/ButtonSkeleton.d.ts b/types/Button/ButtonSkeleton.d.ts
new file mode 100644
index 00000000..57ca1bd3
--- /dev/null
+++ b/types/Button/ButtonSkeleton.d.ts
@@ -0,0 +1,31 @@
+/// {
+ /**
+ * Set the `href` to use an anchor link
+ */
+ href?: string;
+
+ /**
+ * Specify the size of button skeleton
+ * @default "default"
+ */
+ size?: "default" | "field" | "small";
+
+ /**
+ * Set to `true` to use the small variant
+ * @default false
+ */
+ small?: boolean;
+}
+
+export default class ButtonSkeleton {
+ $$prop_def: ButtonSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Checkbox/Checkbox.d.ts b/types/Checkbox/Checkbox.d.ts
new file mode 100644
index 00000000..19d4e3f4
--- /dev/null
+++ b/types/Checkbox/Checkbox.d.ts
@@ -0,0 +1,81 @@
+/// ) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Checkbox/CheckboxSkeleton.d.ts b/types/Checkbox/CheckboxSkeleton.d.ts
new file mode 100644
index 00000000..080e5736
--- /dev/null
+++ b/types/Checkbox/CheckboxSkeleton.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class CheckboxSkeleton {
+ $$prop_def: CheckboxSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts
new file mode 100644
index 00000000..b9c0eaea
--- /dev/null
+++ b/types/CodeSnippet/CodeSnippet.d.ts
@@ -0,0 +1,114 @@
+/// {`code`} )
+ */
+ code?: string;
+
+ /**
+ * Set to `true` to expand a multi-line code snippet (type="multi")
+ * @default false
+ */
+ expanded?: boolean;
+
+ /**
+ * Set to `true` to hide the copy button
+ * @default false
+ */
+ hideCopyButton?: boolean;
+
+ /**
+ * Set to `true` to wrap the text
+ * Note that `type` must be "multi"
+ * @default false
+ */
+ wrapText?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to display the skeleton state
+ * @default false
+ */
+ skeleton?: boolean;
+
+ /**
+ * Specify the ARIA label for the copy button icon
+ */
+ copyButtonDescription?: string;
+
+ /**
+ * Specify the ARIA label of the copy button
+ */
+ copyLabel?: string;
+
+ /**
+ * Specify the feedback text displayed when clicking the snippet
+ * @default "Copied!"
+ */
+ feedback?: string;
+
+ /**
+ * Set the timeout duration (ms) to display feedback text
+ * @default 2000
+ */
+ feedbackTimeout?: number;
+
+ /**
+ * Specify the show less text
+ * `type` must be "multi"
+ * @default "Show less"
+ */
+ showLessText?: string;
+
+ /**
+ * Specify the show more text
+ * `type` must be "multi"
+ * @default "Show more"
+ */
+ showMoreText?: string;
+
+ /**
+ * Set to `true` to enable the show more/less button
+ * @default false
+ */
+ showMoreLess?: boolean;
+
+ /**
+ * Set an id for the code element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the pre HTML element
+ * @default null
+ */
+ ref?: null | HTMLPreElement;
+}
+
+export default class CodeSnippet {
+ $$prop_def: CodeSnippetProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/CodeSnippet/CodeSnippetSkeleton.d.ts b/types/CodeSnippet/CodeSnippetSkeleton.d.ts
new file mode 100644
index 00000000..aeee2546
--- /dev/null
+++ b/types/CodeSnippet/CodeSnippetSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set the type of code snippet
+ * @default "single"
+ */
+ type?: "single" | "inline" | "multi";
+}
+
+export default class CodeSnippetSkeleton {
+ $$prop_def: CodeSnippetSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ComboBox/ComboBox.d.ts b/types/ComboBox/ComboBox.d.ts
new file mode 100644
index 00000000..78d7a886
--- /dev/null
+++ b/types/ComboBox/ComboBox.d.ts
@@ -0,0 +1,135 @@
+/// {
+ /**
+ * Set the combobox items
+ * @default []
+ */
+ items?: ComboBoxItem[];
+
+ /**
+ * Override the display of a combobox item
+ * @default (item) => item.text || item.id
+ */
+ itemToString?: (item: ComboBoxItem) => string;
+
+ /**
+ * Set the selected item by value index
+ * @default -1
+ */
+ selectedIndex?: number;
+
+ /**
+ * Specify the selected combobox value
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Set the size of the combobox
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Set to `true` to disable the combobox
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the title text of the combobox
+ * @default ""
+ */
+ titleText?: string;
+
+ /**
+ * Specify the placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to open the combobox menu dropdown
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Determine if an item should be filtered given the current combobox value
+ * @default () => true
+ */
+ shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean;
+
+ /**
+ * Override the default translation ids
+ */
+ translateWithId?: (id: any) => string;
+
+ /**
+ * Set an id for the list box component
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+
+ /**
+ * Obtain a reference to the list HTML element
+ * @default null
+ */
+ listRef?: null | HTMLDivElement;
+}
+
+export default class ComboBox {
+ $$prop_def: ComboBoxProps;
+ $$slot_def: {};
+
+ $on(
+ eventname: "select",
+ cb: (event: CustomEvent<{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }>) => void
+ ): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void;
+ $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ComposedModal/ComposedModal.d.ts b/types/ComposedModal/ComposedModal.d.ts
new file mode 100644
index 00000000..4e78ba91
--- /dev/null
+++ b/types/ComposedModal/ComposedModal.d.ts
@@ -0,0 +1,61 @@
+/// {
+ /**
+ * Set the size of the composed modal
+ */
+ size?: "xs" | "sm" | "lg";
+
+ /**
+ * Set to `true` to open the modal
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to use the danger variant
+ * @default false
+ */
+ danger?: boolean;
+
+ /**
+ * Set to `true` to prevent the modal from closing when clicking outside
+ * @default false
+ */
+ preventCloseOnClickOutside?: boolean;
+
+ /**
+ * Specify a class for the inner modal
+ * @default ""
+ */
+ containerClass?: string;
+
+ /**
+ * Specify a selector to be focused when opening the modal
+ * @default "[data-modal-primary-focus]"
+ */
+ selectorPrimaryFocus?: null | string;
+
+ /**
+ * Obtain a reference to the top-level HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class ComposedModal {
+ $$prop_def: ComposedModalProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
+ $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "open", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ComposedModal/ModalBody.d.ts b/types/ComposedModal/ModalBody.d.ts
new file mode 100644
index 00000000..d1bdc682
--- /dev/null
+++ b/types/ComposedModal/ModalBody.d.ts
@@ -0,0 +1,24 @@
+/// {
+ /**
+ * Set to `true` if the modal contains form elements
+ * @default false
+ */
+ hasForm?: boolean;
+
+ /**
+ * Set to `true` if the modal contains scrolling content
+ * @default false
+ */
+ hasScrollingContent?: boolean;
+}
+
+export default class ModalBody {
+ $$prop_def: ModalBodyProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ComposedModal/ModalFooter.d.ts b/types/ComposedModal/ModalFooter.d.ts
new file mode 100644
index 00000000..75f0e181
--- /dev/null
+++ b/types/ComposedModal/ModalFooter.d.ts
@@ -0,0 +1,46 @@
+/// {
+ /**
+ * Specify the primary button text
+ * @default ""
+ */
+ primaryButtonText?: string;
+
+ /**
+ * Set to `true` to disable the primary button
+ * @default false
+ */
+ primaryButtonDisabled?: boolean;
+
+ /**
+ * Specify a class for the primary button
+ */
+ primaryClass?: string;
+
+ /**
+ * Specify the secondary button text
+ * @default ""
+ */
+ secondaryButtonText?: string;
+
+ /**
+ * Specify a class for the secondary button
+ */
+ secondaryClass?: string;
+
+ /**
+ * Set to `true` to use the danger variant
+ * @default false
+ */
+ danger?: boolean;
+}
+
+export default class ModalFooter {
+ $$prop_def: ModalFooterProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ComposedModal/ModalHeader.d.ts b/types/ComposedModal/ModalHeader.d.ts
new file mode 100644
index 00000000..ff6e4cfe
--- /dev/null
+++ b/types/ComposedModal/ModalHeader.d.ts
@@ -0,0 +1,55 @@
+/// {
+ /**
+ * Specify the modal title
+ * @default ""
+ */
+ title?: string;
+
+ /**
+ * Specify the modal label
+ * @default ""
+ */
+ label?: string;
+
+ /**
+ * Specify the label class
+ * @default ""
+ */
+ labelClass?: string;
+
+ /**
+ * Specify the title class
+ * @default ""
+ */
+ titleClass?: string;
+
+ /**
+ * Specify the close class
+ * @default ""
+ */
+ closeClass?: string;
+
+ /**
+ * Specify the close icon class
+ * @default ""
+ */
+ closeIconClass?: string;
+
+ /**
+ * Specify the ARIA label for the close icon
+ * @default "Close"
+ */
+ iconDescription?: string;
+}
+
+export default class ModalHeader {
+ $$prop_def: ModalHeaderProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ContentSwitcher/ContentSwitcher.d.ts b/types/ContentSwitcher/ContentSwitcher.d.ts
new file mode 100644
index 00000000..078ca447
--- /dev/null
+++ b/types/ContentSwitcher/ContentSwitcher.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Set the selected index of the switch item
+ * @default 0
+ */
+ selectedIndex?: number;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Specify the size of the content switcher
+ */
+ size?: "sm" | "xl";
+}
+
+export default class ContentSwitcher {
+ $$prop_def: ContentSwitcherProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ContentSwitcher/Switch.d.ts b/types/ContentSwitcher/Switch.d.ts
new file mode 100644
index 00000000..52d2e83a
--- /dev/null
+++ b/types/ContentSwitcher/Switch.d.ts
@@ -0,0 +1,48 @@
+/// {
+ /**
+ * Specify the switch text
+ * Alternatively, use the named slot "text" (e.g. ...)
+ * @default "Provide text"
+ */
+ text?: string;
+
+ /**
+ * Set to `true` for the switch to be selected
+ * @default false
+ */
+ selected?: boolean;
+
+ /**
+ * Set to `true` to disable the switch
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set an id for the button element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class Switch {
+ $$prop_def: SwitchProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Copy/Copy.d.ts b/types/Copy/Copy.d.ts
new file mode 100644
index 00000000..d66254ac
--- /dev/null
+++ b/types/Copy/Copy.d.ts
@@ -0,0 +1,32 @@
+/// {
+ /**
+ * Set the feedback text shown after clicking the button
+ * @default "Copied!"
+ */
+ feedback?: string;
+
+ /**
+ * Set the timeout duration (ms) to display feedback text
+ * @default 2000
+ */
+ feedbackTimeout?: number;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class Copy {
+ $$prop_def: CopyProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts
new file mode 100644
index 00000000..c1f3061e
--- /dev/null
+++ b/types/CopyButton/CopyButton.d.ts
@@ -0,0 +1,19 @@
+/// ;
+
+type RowId = string;
+
+interface Cell {
+ key: Key;
+ value: Value;
+}
+
+export interface DataTableProps {
+ /**
+ * Specify the data table headers
+ * @default []
+ */
+ headers?: DataTableHeader[];
+
+ /**
+ * Specify the rows the data table should render
+ * keys defined in `headers` are used for the row ids
+ * @default []
+ */
+ rows?: Row[];
+
+ /**
+ * Set the size of the data table
+ */
+ size?: "compact" | "short" | "tall";
+
+ /**
+ * Specify the title of the data table
+ * @default ""
+ */
+ title?: string;
+
+ /**
+ * Specify the description of the data table
+ * @default ""
+ */
+ description?: string;
+
+ /**
+ * Set to `true` to use zebra styles
+ * @default false
+ */
+ zebra?: boolean;
+
+ /**
+ * Set to `true` for the sortable variant
+ * @default false
+ */
+ sortable?: boolean;
+
+ /**
+ * Set to `true` for the expandable variant
+ * Automatically set to `true` if `batchExpansion` is `true`
+ * @default false
+ */
+ expandable?: boolean;
+
+ /**
+ * Set to `true` to enable batch expansion
+ * @default false
+ */
+ batchExpansion?: boolean;
+
+ /**
+ * Specify the row ids to be expanded
+ * @default []
+ */
+ expandedRowIds?: RowId[];
+
+ /**
+ * Set to `true` for the radio selection variant
+ * @default false
+ */
+ radio?: boolean;
+
+ /**
+ * Set to `true` for the selectable variant
+ * Automatically set to `true` if `radio` or `batchSelection` are `true`
+ * @default false
+ */
+ selectable?: boolean;
+
+ /**
+ * Set to `true` to enable batch selection
+ * @default false
+ */
+ batchSelection?: boolean;
+
+ /**
+ * Specify the row ids to be selected
+ * @default []
+ */
+ selectedRowIds?: RowId[];
+
+ /**
+ * Set to `true` to enable a sticky header
+ * @default false
+ */
+ stickyHeader?: boolean;
+}
+
+export default class DataTable {
+ $$prop_def: DataTableProps;
+ $$slot_def: {
+ default: {};
+ cell: { row: Row; cell: Cell };
+ ["cell-header"]: { header: NonEmptyHeader };
+ ["expanded-row"]: { row: Row };
+ };
+
+ $on(
+ eventname: "click",
+ cb: (event: CustomEvent<{ header?: DataTableHeader; row?: Row; cell?: Cell }>) => void
+ ): () => void;
+ $on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void;
+ $on(
+ eventname: "click:header",
+ cb: (event: CustomEvent<{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }>) => void
+ ): () => void;
+ $on(eventname: "click:row", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "mouseenter:row", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "mouseleave:row", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "click:row--expand", cb: (event: CustomEvent<{ expanded: boolean; row: Row }>) => void): () => void;
+ $on(eventname: "click:cell", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/Table.d.ts b/types/DataTable/Table.d.ts
new file mode 100644
index 00000000..26de4a4e
--- /dev/null
+++ b/types/DataTable/Table.d.ts
@@ -0,0 +1,47 @@
+/// {
+ /**
+ * Set the size of the table
+ */
+ size?: "compact" | "short" | "tall";
+
+ /**
+ * Set to `true` to use zebra styles
+ * @default false
+ */
+ zebra?: boolean;
+
+ /**
+ * Set to `true` to use static width
+ * @default false
+ */
+ useStaticWidth?: boolean;
+
+ /**
+ * Set to `true` for the bordered variant
+ * @default false
+ */
+ shouldShowBorder?: boolean;
+
+ /**
+ * Set to `true` for the sortable variant
+ * @default false
+ */
+ sortable?: boolean;
+
+ /**
+ * Set to `true` to enable a sticky header
+ * @default false
+ */
+ stickyHeader?: boolean;
+}
+
+export default class Table {
+ $$prop_def: TableProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableBody.d.ts b/types/DataTable/TableBody.d.ts
new file mode 100644
index 00000000..870bdce4
--- /dev/null
+++ b/types/DataTable/TableBody.d.ts
@@ -0,0 +1,12 @@
+/// {}
+
+export default class TableBody {
+ $$prop_def: TableBodyProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableCell.d.ts b/types/DataTable/TableCell.d.ts
new file mode 100644
index 00000000..9e927282
--- /dev/null
+++ b/types/DataTable/TableCell.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class TableCell {
+ $$prop_def: TableCellProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableContainer.d.ts b/types/DataTable/TableContainer.d.ts
new file mode 100644
index 00000000..fece36a0
--- /dev/null
+++ b/types/DataTable/TableContainer.d.ts
@@ -0,0 +1,30 @@
+/// {
+ /**
+ * Specify the title of the data table
+ * @default ""
+ */
+ title?: string;
+
+ /**
+ * Specify the description of the data table
+ * @default ""
+ */
+ description?: string;
+
+ /**
+ * Set to `true` to enable a sticky header
+ * @default false
+ */
+ stickyHeader?: boolean;
+}
+
+export default class TableContainer {
+ $$prop_def: TableContainerProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableHead.d.ts b/types/DataTable/TableHead.d.ts
new file mode 100644
index 00000000..afa55613
--- /dev/null
+++ b/types/DataTable/TableHead.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class TableHead {
+ $$prop_def: TableHeadProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableHeader.d.ts b/types/DataTable/TableHeader.d.ts
new file mode 100644
index 00000000..1995d6fc
--- /dev/null
+++ b/types/DataTable/TableHeader.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Specify the `scope` attribute
+ * @default "col"
+ */
+ scope?: string;
+
+ /**
+ * Override the default id translations
+ * @default () => ""
+ */
+ translateWithId?: () => string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class TableHeader {
+ $$prop_def: TableHeaderProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/TableRow.d.ts b/types/DataTable/TableRow.d.ts
new file mode 100644
index 00000000..d18a7c1c
--- /dev/null
+++ b/types/DataTable/TableRow.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class TableRow {
+ $$prop_def: TableRowProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/Toolbar.d.ts b/types/DataTable/Toolbar.d.ts
new file mode 100644
index 00000000..9f44ef2d
--- /dev/null
+++ b/types/DataTable/Toolbar.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Specify the toolbar size
+ * @default "default"
+ */
+ size?: "sm" | "default";
+}
+
+export default class Toolbar {
+ $$prop_def: ToolbarProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/ToolbarBatchActions.d.ts b/types/DataTable/ToolbarBatchActions.d.ts
new file mode 100644
index 00000000..a85a5aec
--- /dev/null
+++ b/types/DataTable/ToolbarBatchActions.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Override the total items selected text
+ * @default (totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`
+ */
+ formatTotalSelected?: (totalSelected: number) => string;
+}
+
+export default class ToolbarBatchActions {
+ $$prop_def: ToolbarBatchActionsProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DataTable/ToolbarContent.d.ts b/types/DataTable/ToolbarContent.d.ts
new file mode 100644
index 00000000..df5bd531
--- /dev/null
+++ b/types/DataTable/ToolbarContent.d.ts
@@ -0,0 +1,12 @@
+/// {
+ /**
+ * Specify the number of columns
+ * @default 5
+ */
+ columns?: number;
+
+ /**
+ * Specify the number of rows
+ * @default 5
+ */
+ rows?: number;
+
+ /**
+ * Set the size of the data table
+ */
+ size?: "compact" | "short" | "tall";
+
+ /**
+ * Set to `true` to apply zebra styles to the datatable rows
+ * @default false
+ */
+ zebra?: boolean;
+
+ /**
+ * Set to `false` to hide the header
+ * @default true
+ */
+ showHeader?: boolean;
+
+ /**
+ * Set the column headers
+ * If `headers` has one more items, `count` is ignored
+ * @default []
+ */
+ headers?: string[];
+
+ /**
+ * Set to `false` to hide the toolbar
+ * @default true
+ */
+ showToolbar?: boolean;
+}
+
+export default class DataTableSkeleton {
+ $$prop_def: DataTableSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DatePicker/DatePicker.d.ts b/types/DatePicker/DatePicker.d.ts
new file mode 100644
index 00000000..b501df1d
--- /dev/null
+++ b/types/DatePicker/DatePicker.d.ts
@@ -0,0 +1,76 @@
+/// {
+ /**
+ * Specify the date picker type
+ * @default "simple"
+ */
+ datePickerType?: "simple" | "single" | "range";
+
+ /**
+ * Specify the date picker input value
+ * @default ""
+ */
+ value?: number | string;
+
+ /**
+ * Specify the element to append the calendar to
+ */
+ appendTo?: HTMLElement;
+
+ /**
+ * Specify the date format
+ * @default "m/d/Y"
+ */
+ dateFormat?: string;
+
+ /**
+ * Specify the maximum date
+ * @default null
+ */
+ maxDate?: null | string | Date;
+
+ /**
+ * Specify the minimum date
+ * @default null
+ */
+ minDate?: null | string | Date;
+
+ /**
+ * Specify the locale
+ * @default "en"
+ */
+ locale?: string;
+
+ /**
+ * Set to `true` to use the short variant
+ * @default false
+ */
+ short?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set an id for the date picker element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class DatePicker {
+ $$prop_def: DatePickerProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DatePicker/DatePickerInput.d.ts b/types/DatePicker/DatePickerInput.d.ts
new file mode 100644
index 00000000..312cfbf1
--- /dev/null
+++ b/types/DatePicker/DatePickerInput.d.ts
@@ -0,0 +1,89 @@
+/// {
+ /**
+ * Set the size of the input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the input type
+ * @default "text"
+ */
+ type?: string;
+
+ /**
+ * Specify the input placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Specify the Regular Expression for the input value
+ * @default "\\d{1,2}\\/\\d{1,2}\\/\\d{4}"
+ */
+ pattern?: string;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the ARIA label for the calendar icon
+ * @default ""
+ */
+ iconDescription?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set a name for the input element
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class DatePickerInput {
+ $$prop_def: DatePickerInputProps;
+ $$slot_def: {};
+
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/DatePicker/DatePickerSkeleton.d.ts b/types/DatePicker/DatePickerSkeleton.d.ts
new file mode 100644
index 00000000..71d8588f
--- /dev/null
+++ b/types/DatePicker/DatePickerSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Set to `true` to use the range variant
+ * @default false
+ */
+ range?: boolean;
+
+ /**
+ * Set an id to be used by the label element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class DatePickerSkeleton {
+ $$prop_def: DatePickerSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Dropdown/Dropdown.d.ts b/types/Dropdown/Dropdown.d.ts
new file mode 100644
index 00000000..44adc8ba
--- /dev/null
+++ b/types/Dropdown/Dropdown.d.ts
@@ -0,0 +1,127 @@
+/// {
+ /**
+ * Set the dropdown items
+ * @default []
+ */
+ items?: DropdownItem[];
+
+ /**
+ * Override the display of a dropdown item
+ * @default (item) => item.text || item.id
+ */
+ itemToString?: (item: DropdownItem) => string;
+
+ /**
+ * Specify the selected item index
+ * @default -1
+ */
+ selectedIndex?: number;
+
+ /**
+ * Specify the type of dropdown
+ * @default "default"
+ */
+ type?: "default" | "inline";
+
+ /**
+ * Specify the size of the dropdown field
+ */
+ size?: "sm" | "lg" | "xl";
+
+ /**
+ * Set to `true` to open the dropdown
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to use the inline variant
+ * @default false
+ */
+ inline?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the dropdown
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the title text
+ * @default ""
+ */
+ titleText?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the list box label
+ */
+ label?: string;
+
+ /**
+ * Override the default translation ids
+ */
+ translateWithId?: (id: any) => string;
+
+ /**
+ * Set an id for the list box component
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the list box
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class Dropdown {
+ $$prop_def: DropdownProps;
+ $$slot_def: {};
+
+ $on(
+ eventname: "select",
+ cb: (event: CustomEvent<{ selectedId: DropdownItemId; selectedIndex: number; selectedItem: DropdownItem }>) => void
+ ): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Dropdown/DropdownSkeleton.d.ts b/types/Dropdown/DropdownSkeleton.d.ts
new file mode 100644
index 00000000..66319de3
--- /dev/null
+++ b/types/Dropdown/DropdownSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to use the inline variant
+ * @default false
+ */
+ inline?: boolean;
+}
+
+export default class DropdownSkeleton {
+ $$prop_def: DropdownSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/FileUploader.d.ts b/types/FileUploader/FileUploader.d.ts
new file mode 100644
index 00000000..aadde0a5
--- /dev/null
+++ b/types/FileUploader/FileUploader.d.ts
@@ -0,0 +1,87 @@
+/// {
+ /**
+ * Specify the file uploader status
+ * @default "uploading"
+ */
+ status?: "uploading" | "edit" | "complete";
+
+ /**
+ * Specify the accepted file types
+ * @default []
+ */
+ accept?: Files;
+
+ /**
+ * Obtain the uploaded file names
+ * @default []
+ */
+ files?: Files;
+
+ /**
+ * Set to `true` to allow multiple files
+ * @default false
+ */
+ multiple?: boolean;
+
+ /**
+ * Override the default behavior of clearing the array of uploaded files
+ * @constant
+ * @default () => { files = []; }
+ */
+ clearFiles?: () => void;
+
+ /**
+ * Specify the label description
+ * @default ""
+ */
+ labelDescription?: string;
+
+ /**
+ * Specify the label title
+ * @default ""
+ */
+ labelTitle?: string;
+
+ /**
+ * Specify the kind of file uploader button
+ * @default "primary"
+ */
+ kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
+
+ /**
+ * Specify the button label
+ * @default ""
+ */
+ buttonLabel?: string;
+
+ /**
+ * Specify the ARIA label used for the status icons
+ * @default "Provide icon description"
+ */
+ iconDescription?: string;
+
+ /**
+ * Specify a name attribute for the file button uploader input
+ * @default ""
+ */
+ name?: string;
+}
+
+export default class FileUploader {
+ $$prop_def: FileUploaderProps;
+ $$slot_def: {};
+
+ $on(eventname: "add", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "remove", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/FileUploaderButton.d.ts b/types/FileUploader/FileUploaderButton.d.ts
new file mode 100644
index 00000000..03e1f992
--- /dev/null
+++ b/types/FileUploader/FileUploaderButton.d.ts
@@ -0,0 +1,81 @@
+/// {
+ /**
+ * Specify the accepted file types
+ * @default []
+ */
+ accept?: Files;
+
+ /**
+ * Set to `true` to allow multiple files
+ * @default false
+ */
+ multiple?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to disable label changes
+ * @default false
+ */
+ disableLabelChanges?: boolean;
+
+ /**
+ * Specify the kind of file uploader button
+ * @default "primary"
+ */
+ kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
+
+ /**
+ * Specify the label text
+ * @default "Add file"
+ */
+ labelText?: string;
+
+ /**
+ * Specify the label role
+ * @default "button"
+ */
+ role?: string;
+
+ /**
+ * Specify `tabindex` attribute
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class FileUploaderButton {
+ $$prop_def: FileUploaderButtonProps;
+ $$slot_def: {};
+
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/FileUploaderDropContainer.d.ts b/types/FileUploader/FileUploaderDropContainer.d.ts
new file mode 100644
index 00000000..86917250
--- /dev/null
+++ b/types/FileUploader/FileUploaderDropContainer.d.ts
@@ -0,0 +1,80 @@
+/// {
+ /**
+ * Specify the accepted file types
+ * @default []
+ */
+ accept?: Files;
+
+ /**
+ * Set to `true` to allow multiple files
+ * @default false
+ */
+ multiple?: boolean;
+
+ /**
+ * Override the default behavior of validating uploaded files
+ * The default behavior does not validate files
+ * @default (files) => files
+ */
+ validateFiles?: (files: Files) => Files;
+
+ /**
+ * Specify the label text
+ * @default "Add file"
+ */
+ labelText?: string;
+
+ /**
+ * Specify the `role` attribute of the drop container
+ * @default "button"
+ */
+ role?: string;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify `tabindex` attribute
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class FileUploaderDropContainer {
+ $$prop_def: FileUploaderDropContainerProps;
+ $$slot_def: {};
+
+ $on(eventname: "add", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "dragover", cb: (event: WindowEventMap["dragover"]) => void): () => void;
+ $on(eventname: "dragleave", cb: (event: WindowEventMap["dragleave"]) => void): () => void;
+ $on(eventname: "drop", cb: (event: WindowEventMap["drop"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/FileUploaderItem.d.ts b/types/FileUploader/FileUploaderItem.d.ts
new file mode 100644
index 00000000..63e66aba
--- /dev/null
+++ b/types/FileUploader/FileUploaderItem.d.ts
@@ -0,0 +1,56 @@
+/// {
+ /**
+ * Specify the file uploader status
+ * @default "uploading"
+ */
+ status?: "uploading" | "edit" | "complete";
+
+ /**
+ * Specify the ARIA label used for the status icons
+ * @default ""
+ */
+ iconDescription?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the error subject text
+ * @default ""
+ */
+ errorSubject?: string;
+
+ /**
+ * Specify the error body text
+ * @default ""
+ */
+ errorBody?: string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify the file uploader name
+ * @default ""
+ */
+ name?: string;
+}
+
+export default class FileUploaderItem {
+ $$prop_def: FileUploaderItemProps;
+ $$slot_def: {};
+
+ $on(eventname: "delete", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/FileUploaderSkeleton.d.ts b/types/FileUploader/FileUploaderSkeleton.d.ts
new file mode 100644
index 00000000..c5d3f72c
--- /dev/null
+++ b/types/FileUploader/FileUploaderSkeleton.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class FileUploaderSkeleton {
+ $$prop_def: FileUploaderSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FileUploader/Filename.d.ts b/types/FileUploader/Filename.d.ts
new file mode 100644
index 00000000..52336e7a
--- /dev/null
+++ b/types/FileUploader/Filename.d.ts
@@ -0,0 +1,30 @@
+/// {}
+
+export default class Form {
+ $$prop_def: FormProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "submit", cb: (event: WindowEventMap["submit"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FormGroup/FormGroup.d.ts b/types/FormGroup/FormGroup.d.ts
new file mode 100644
index 00000000..d55aa8f9
--- /dev/null
+++ b/types/FormGroup/FormGroup.d.ts
@@ -0,0 +1,40 @@
+/// {
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Set to `true` to render a form requirement
+ * @default false
+ */
+ message?: boolean;
+
+ /**
+ * Specify the message text
+ * @default ""
+ */
+ messageText?: string;
+
+ /**
+ * Specify the legend text
+ * @default ""
+ */
+ legendText?: string;
+}
+
+export default class FormGroup {
+ $$prop_def: FormGroupProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FormItem/FormItem.d.ts b/types/FormItem/FormItem.d.ts
new file mode 100644
index 00000000..9ff7d823
--- /dev/null
+++ b/types/FormItem/FormItem.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class FormItem {
+ $$prop_def: FormItemProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/FormLabel/FormLabel.d.ts b/types/FormLabel/FormLabel.d.ts
new file mode 100644
index 00000000..0a38b73e
--- /dev/null
+++ b/types/FormLabel/FormLabel.d.ts
@@ -0,0 +1,22 @@
+/// {
+ /**
+ * Set an id to be used by the label element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class FormLabel {
+ $$prop_def: FormLabelProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Grid/Column.d.ts b/types/Grid/Column.d.ts
new file mode 100644
index 00000000..032786a6
--- /dev/null
+++ b/types/Grid/Column.d.ts
@@ -0,0 +1,76 @@
+/// {
+ /**
+ * Set to `true` to render a custom HTML element
+ * Props are destructured as `props` in the default slot (e.g. ... {
+ /**
+ * Set to `true` to render a custom HTML element
+ * Props are destructured as `props` in the default slot (e.g. ... {
+ /**
+ * Set to `true` to render a custom HTML element
+ * Props are destructured as `props` in the default slot (e.g. ... |
)
+ * @default false
+ */
+ as?: boolean;
+
+ /**
+ * Set to `true` to use the condensed variant
+ * @default false
+ */
+ condensed?: boolean;
+
+ /**
+ * Set to `true` to use the narrow variant
+ * @default false
+ */
+ narrow?: boolean;
+
+ /**
+ * Set to `true` to remove the gutter
+ * @default false
+ */
+ noGutter?: boolean;
+
+ /**
+ * Set to `true` to remove the left gutter
+ * @default false
+ */
+ noGutterLeft?: boolean;
+
+ /**
+ * Set to `true` to remove the right gutter
+ * @default false
+ */
+ noGutterRight?: boolean;
+}
+
+export default class Row {
+ $$prop_def: RowProps;
+ $$slot_def: {
+ default: { props: { class: string; [key: string]: any } };
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts
new file mode 100644
index 00000000..9dd4bbf5
--- /dev/null
+++ b/types/Icon/Icon.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render
+ */
+ render?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Set to `true` to display the skeleton state
+ * @default false
+ */
+ skeleton?: boolean;
+}
+
+export default class Icon {
+ $$prop_def: IconProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Icon/IconSkeleton.d.ts b/types/Icon/IconSkeleton.d.ts
new file mode 100644
index 00000000..f4f860bb
--- /dev/null
+++ b/types/Icon/IconSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set the size of the icon
+ * @default 16
+ */
+ size?: number;
+}
+
+export default class IconSkeleton {
+ $$prop_def: IconSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/InlineLoading/InlineLoading.d.ts b/types/InlineLoading/InlineLoading.d.ts
new file mode 100644
index 00000000..4e8c8416
--- /dev/null
+++ b/types/InlineLoading/InlineLoading.d.ts
@@ -0,0 +1,37 @@
+/// {
+ /**
+ * Set the loading status
+ * @default "active"
+ */
+ status?: "active" | "inactive" | "finished" | "error";
+
+ /**
+ * Set the loading description
+ */
+ description?: string;
+
+ /**
+ * Specify the ARIA label for the loading icon
+ */
+ iconDescription?: string;
+
+ /**
+ * Specify the timeout delay (ms) after `status` is set to "success"
+ * @default 1500
+ */
+ successDelay?: number;
+}
+
+export default class InlineLoading {
+ $$prop_def: InlineLoadingProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "success", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts
new file mode 100644
index 00000000..209e0d9c
--- /dev/null
+++ b/types/Link/Link.d.ts
@@ -0,0 +1,50 @@
+/// {
+ /**
+ * Specify the size of the link
+ */
+ size?: "sm" | "lg";
+
+ /**
+ * Specify the href value
+ */
+ href?: string;
+
+ /**
+ * Set to `true` to use the inline variant
+ * @default false
+ */
+ inline?: boolean;
+
+ /**
+ * Set to `true` to disable the checkbox
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to allow visited styles
+ * @default false
+ */
+ visited?: boolean;
+
+ /**
+ * Obtain a reference to the top-level HTML element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement | HTMLParagraphElement;
+}
+
+export default class Link {
+ $$prop_def: LinkProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBox.d.ts b/types/ListBox/ListBox.d.ts
new file mode 100644
index 00000000..d82cfc8f
--- /dev/null
+++ b/types/ListBox/ListBox.d.ts
@@ -0,0 +1,55 @@
+/// {
+ /**
+ * Set the size of the list box
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Set the type of the list box
+ * @default "default"
+ */
+ type?: "default" | "inline";
+
+ /**
+ * Set to `true` to open the list box
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the list box
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+}
+
+export default class ListBox {
+ $$prop_def: ListBoxProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts
new file mode 100644
index 00000000..2a147651
--- /dev/null
+++ b/types/ListBox/ListBoxField.d.ts
@@ -0,0 +1,63 @@
+/// {
+ /**
+ * Set to `true` to disable the list box field
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the role attribute
+ * @default "combobox"
+ */
+ role?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "-1"
+ */
+ tabindex?: string;
+
+ /**
+ * Default translation ids
+ * @constant
+ * @default { close: "close", open: "open" }
+ */
+ translationIds?: { close: "close"; open: "open" };
+
+ /**
+ * Override the default translation ids
+ * @default (id) => defaultTranslations[id]
+ */
+ translateWithId?: (id: ListBoxFieldTranslationId) => string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the top-level HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class ListBoxField {
+ $$prop_def: ListBoxFieldProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBoxMenu.d.ts b/types/ListBox/ListBoxMenu.d.ts
new file mode 100644
index 00000000..d0c9c70e
--- /dev/null
+++ b/types/ListBox/ListBoxMenu.d.ts
@@ -0,0 +1,25 @@
+/// {
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class ListBoxMenu {
+ $$prop_def: ListBoxMenuProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "scroll", cb: (event: WindowEventMap["scroll"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBoxMenuIcon.d.ts b/types/ListBox/ListBoxMenuIcon.d.ts
new file mode 100644
index 00000000..29203c07
--- /dev/null
+++ b/types/ListBox/ListBoxMenuIcon.d.ts
@@ -0,0 +1,32 @@
+/// {
+ /**
+ * Set to `true` to open the list box menu icon
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Default translation ids
+ * @constant
+ * @default { close: "close", open: "open" }
+ */
+ translationIds?: { close: "close"; open: "open" };
+
+ /**
+ * Override the default translation ids
+ * @default (id) => defaultTranslations[id]
+ */
+ translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
+}
+
+export default class ListBoxMenuIcon {
+ $$prop_def: ListBoxMenuIconProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBoxMenuItem.d.ts b/types/ListBox/ListBoxMenuItem.d.ts
new file mode 100644
index 00000000..a4724c5e
--- /dev/null
+++ b/types/ListBox/ListBoxMenuItem.d.ts
@@ -0,0 +1,27 @@
+/// {
+ /**
+ * Set to `true` to enable the active state
+ * @default false
+ */
+ active?: boolean;
+
+ /**
+ * Set to `true` to enable the highlighted state
+ * @default false
+ */
+ highlighted?: boolean;
+}
+
+export default class ListBoxMenuItem {
+ $$prop_def: ListBoxMenuItemProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListBox/ListBoxSelection.d.ts b/types/ListBox/ListBoxSelection.d.ts
new file mode 100644
index 00000000..a9b0d3e8
--- /dev/null
+++ b/types/ListBox/ListBoxSelection.d.ts
@@ -0,0 +1,43 @@
+/// {
+ /**
+ * Specify the number of selected items
+ */
+ selectionCount?: any;
+
+ /**
+ * Set to `true` to disable the list box selection
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Default translation ids
+ * @constant
+ * @default { clearAll: "clearAll", clearSelection: "clearSelection", }
+ */
+ translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" };
+
+ /**
+ * Override the default translation ids
+ * @default (id) => defaultTranslations[id]
+ */
+ translateWithId?: (id: ListBoxSelectionTranslationId) => string;
+
+ /**
+ * Obtain a reference to the top-level HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class ListBoxSelection {
+ $$prop_def: ListBoxSelectionProps;
+ $$slot_def: {};
+
+ $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ListItem/ListItem.d.ts b/types/ListItem/ListItem.d.ts
new file mode 100644
index 00000000..4ef4aaad
--- /dev/null
+++ b/types/ListItem/ListItem.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class ListItem {
+ $$prop_def: ListItemProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Loading/Loading.d.ts b/types/Loading/Loading.d.ts
new file mode 100644
index 00000000..77af289c
--- /dev/null
+++ b/types/Loading/Loading.d.ts
@@ -0,0 +1,40 @@
+/// {
+ /**
+ * Set to `true` to use the small variant
+ * @default false
+ */
+ small?: boolean;
+
+ /**
+ * Set to `false` to disable the active state
+ * @default true
+ */
+ active?: boolean;
+
+ /**
+ * Set to `false` to disable the overlay
+ * @default true
+ */
+ withOverlay?: boolean;
+
+ /**
+ * Specify the label description
+ * @default "Active loading indicator"
+ */
+ description?: string;
+
+ /**
+ * Set an id for the label element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class Loading {
+ $$prop_def: LoadingProps;
+ $$slot_def: {};
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts
new file mode 100644
index 00000000..8f6e8dbb
--- /dev/null
+++ b/types/Modal/Modal.d.ts
@@ -0,0 +1,133 @@
+/// {
+ /**
+ * Set the size of the modal
+ */
+ size?: "xs" | "sm" | "lg";
+
+ /**
+ * Set to `true` to open the modal
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to use the danger variant
+ * @default false
+ */
+ danger?: boolean;
+
+ /**
+ * Set to `true` to enable alert mode
+ * @default false
+ */
+ alert?: boolean;
+
+ /**
+ * Set to `true` to use the passive variant
+ * @default false
+ */
+ passiveModal?: boolean;
+
+ /**
+ * Specify the modal heading
+ */
+ modalHeading?: string;
+
+ /**
+ * Specify the modal label
+ */
+ modalLabel?: string;
+
+ /**
+ * Specify the ARIA label for the modal
+ */
+ modalAriaLabel?: string;
+
+ /**
+ * Specify the ARIA label for the close icon
+ * @default "Close the modal"
+ */
+ iconDescription?: string;
+
+ /**
+ * Set to `true` if the modal contains form elements
+ * @default false
+ */
+ hasForm?: boolean;
+
+ /**
+ * Set to `true` if the modal contains scrolling content
+ * @default false
+ */
+ hasScrollingContent?: boolean;
+
+ /**
+ * Specify the primary button text
+ * @default ""
+ */
+ primaryButtonText?: string;
+
+ /**
+ * Set to `true` to disable the primary button
+ * @default false
+ */
+ primaryButtonDisabled?: boolean;
+
+ /**
+ * Set to `true` for the primary button to be triggered when pressing "Enter"
+ * @default true
+ */
+ shouldSubmitOnEnter?: boolean;
+
+ /**
+ * Specify the secondary button text
+ * @default ""
+ */
+ secondaryButtonText?: string;
+
+ /**
+ * Specify a selector to be focused when opening the modal
+ * @default "[data-modal-primary-focus]"
+ */
+ selectorPrimaryFocus?: string;
+
+ /**
+ * Set to `true` to prevent the modal from closing when clicking outside
+ * @default false
+ */
+ preventCloseOnClickOutside?: boolean;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the top-level HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class Modal {
+ $$prop_def: ModalProps;
+ $$slot_def: {
+ default: {};
+ heading: {};
+ label: {};
+ };
+
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "click:button--secondary", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "open", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/MultiSelect/MultiSelect.d.ts b/types/MultiSelect/MultiSelect.d.ts
new file mode 100644
index 00000000..2e9458a1
--- /dev/null
+++ b/types/MultiSelect/MultiSelect.d.ts
@@ -0,0 +1,167 @@
+/// {
+ /**
+ * Set the multiselect items
+ * @default []
+ */
+ items?: MultiSelectItem[];
+
+ /**
+ * Override the display of a multiselect item
+ * @default (item) => item.text || item.id
+ */
+ itemToString?: (item: MultiSelectItem) => string;
+
+ /**
+ * Set the selected ids
+ * @default []
+ */
+ selectedIds?: MultiSelectItemId[];
+
+ /**
+ * Specify the multiselect value
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Set the size of the combobox
+ */
+ size?: "sm" | "lg" | "xl";
+
+ /**
+ * Specify the type of multiselect
+ * @default "default"
+ */
+ type?: "default" | "inline";
+
+ /**
+ * Specify the selection feedback after selecting items
+ * @default "top-after-reopen"
+ */
+ selectionFeedback?: "top" | "fixed" | "top-after-reopen";
+
+ /**
+ * Set to `true` to disable the dropdown
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to filter items
+ * @default false
+ */
+ filterable?: boolean;
+
+ /**
+ * Override the filtering logic
+ * The default filtering is an exact string comparison
+ * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase())
+ */
+ filterItem?: (item: MultiSelectItem, value: string) => string;
+
+ /**
+ * Set to `true` to open the dropdown
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Specify the locale
+ * @default "en"
+ */
+ locale?: string;
+
+ /**
+ * Specify the placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Override the sorting logic
+ * The default sorting compare the item text value
+ * @default (a, b) => a.text.localeCompare(b.text, locale, { numeric: true })
+ */
+ sortItem?: ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void);
+
+ /**
+ * Override the default translation ids
+ */
+ translateWithId?: (id: any) => string;
+
+ /**
+ * Specify the title text
+ * @default ""
+ */
+ titleText?: string;
+
+ /**
+ * Set to `true` to pass the item to `itemToString` in the checkbox
+ * @default false
+ */
+ useTitleInItem?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the list box label
+ * @default ""
+ */
+ label?: string;
+
+ /**
+ * Set an id for the list box component
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the select
+ */
+ name?: string;
+}
+
+export default class MultiSelect {
+ $$prop_def: MultiSelectProps;
+ $$slot_def: {};
+
+ $on(eventname: "clear", cb: (event: WindowEventMap["clear"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: "select", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Notification/InlineNotification.d.ts b/types/Notification/InlineNotification.d.ts
new file mode 100644
index 00000000..3c625396
--- /dev/null
+++ b/types/Notification/InlineNotification.d.ts
@@ -0,0 +1,72 @@
+/// {
+ /**
+ * Set the type of notification
+ * @default "inline"
+ */
+ notificationType?: "toast" | "inline";
+
+ /**
+ * Specify the kind of notification
+ * @default "error"
+ */
+ kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
+
+ /**
+ * Set to `true` to use the low contrast variant
+ * @default false
+ */
+ lowContrast?: boolean;
+
+ /**
+ * Set the timeout duration (ms) to hide the notification after opening it
+ * @default 0
+ */
+ timeout?: number;
+
+ /**
+ * Set the `role` attribute
+ * @default "alert"
+ */
+ role?: string;
+
+ /**
+ * Specify the title text
+ * @default "Title"
+ */
+ title?: string;
+
+ /**
+ * Specify the subtitle text
+ * @default ""
+ */
+ subtitle?: string;
+
+ /**
+ * Set to `true` to hide the close button
+ * @default false
+ */
+ hideCloseButton?: boolean;
+
+ /**
+ * Specify the ARIA label for the icon
+ * @default "Closes notification"
+ */
+ iconDescription?: string;
+}
+
+export default class InlineNotification {
+ $$prop_def: InlineNotificationProps;
+ $$slot_def: {
+ default: {};
+ actions: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Notification/NotificationActionButton.d.ts b/types/Notification/NotificationActionButton.d.ts
new file mode 100644
index 00000000..10ea1deb
--- /dev/null
+++ b/types/Notification/NotificationActionButton.d.ts
@@ -0,0 +1,16 @@
+/// {
+ /**
+ * Set the type of notification
+ * @default "toast"
+ */
+ notificationType?: "toast" | "inline";
+
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render
+ */
+ renderIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Specify the title of the icon
+ */
+ title?: string;
+
+ /**
+ * Specify the ARIA label for the icon
+ * @default "Close icon"
+ */
+ iconDescription?: string;
+}
+
+export default class NotificationButton {
+ $$prop_def: NotificationButtonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Notification/NotificationIcon.d.ts b/types/Notification/NotificationIcon.d.ts
new file mode 100644
index 00000000..1441aab4
--- /dev/null
+++ b/types/Notification/NotificationIcon.d.ts
@@ -0,0 +1,28 @@
+/// {
+ /**
+ * Set the type of notification
+ * @default "toast"
+ */
+ notificationType?: "toast" | "inline";
+
+ /**
+ * Specify the kind of notification
+ * @default "error"
+ */
+ kind?: "error" | "info" | "info-square" | "success" | "warning" | "warning-alt";
+
+ /**
+ * Set to `true` to use the low contrast variant
+ * @default false
+ */
+ lowContrast?: boolean;
+
+ /**
+ * Set the timeout duration (ms) to hide the notification after opening it
+ * @default 0
+ */
+ timeout?: number;
+
+ /**
+ * Set the `role` attribute
+ * @default "alert"
+ */
+ role?: string;
+
+ /**
+ * Specify the title text
+ * @default "Title"
+ */
+ title?: string;
+
+ /**
+ * Specify the subtitle text
+ * @default ""
+ */
+ subtitle?: string;
+
+ /**
+ * Specify the caption text
+ * @default "Caption"
+ */
+ caption?: string;
+
+ /**
+ * Specify the ARIA label for the icon
+ * @default "Closes notification"
+ */
+ iconDescription?: string;
+
+ /**
+ * Set to `true` to hide the close button
+ * @default false
+ */
+ hideCloseButton?: boolean;
+}
+
+export default class ToastNotification {
+ $$prop_def: ToastNotificationProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts
new file mode 100644
index 00000000..fdfa765f
--- /dev/null
+++ b/types/NumberInput/NumberInput.d.ts
@@ -0,0 +1,143 @@
+/// {
+ /**
+ * Set the size of the input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the input value
+ * @default ""
+ */
+ value?: number | string;
+
+ /**
+ * Specify the step increment
+ * @default 1
+ */
+ step?: number;
+
+ /**
+ * Specify the maximum value
+ */
+ max?: number;
+
+ /**
+ * Specify the minimum value
+ */
+ min?: number;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` for the input to be read-only
+ * @default false
+ */
+ readonly?: boolean;
+
+ /**
+ * Set to `true` to enable the mobile variant
+ * @default false
+ */
+ mobile?: boolean;
+
+ /**
+ * Set to `true` to allow for an empty value
+ * @default false
+ */
+ allowEmpty?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the ARIA label for the increment icons
+ * @default ""
+ */
+ iconDescription?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ label?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Override the default translation ids
+ * @default (id) => defaultTranslations[id]
+ */
+ translateWithId?: (id: NumberInputTranslationId) => string;
+
+ /**
+ * Default translation ids
+ * @constant
+ * @default { increment: "increment", decrement: "decrement", }
+ */
+ translationIds?: { increment: "increment"; decrement: "decrement" };
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class NumberInput {
+ $$prop_def: NumberInputProps;
+ $$slot_def: {
+ label: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/NumberInput/NumberInputSkeleton.d.ts b/types/NumberInput/NumberInputSkeleton.d.ts
new file mode 100644
index 00000000..63906cb4
--- /dev/null
+++ b/types/NumberInput/NumberInputSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+}
+
+export default class NumberInputSkeleton {
+ $$prop_def: NumberInputSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/OrderedList/OrderedList.d.ts b/types/OrderedList/OrderedList.d.ts
new file mode 100644
index 00000000..2da61249
--- /dev/null
+++ b/types/OrderedList/OrderedList.d.ts
@@ -0,0 +1,28 @@
+/// {
+ /**
+ * Set to `true` to use the nested variant
+ * @default false
+ */
+ nested?: boolean;
+
+ /**
+ * Set to `true` to use native list styles
+ * @default false
+ */
+ native?: boolean;
+}
+
+export default class OrderedList {
+ $$prop_def: OrderedListProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts
new file mode 100644
index 00000000..6c6fa72f
--- /dev/null
+++ b/types/OverflowMenu/OverflowMenu.d.ts
@@ -0,0 +1,87 @@
+/// {
+ /**
+ * Specify the size of the overflow menu
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the direction of the overflow menu relative to the button
+ * @default "bottom"
+ */
+ direction?: "top" | "bottom";
+
+ /**
+ * Set to `true` to open the menu
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to flip the menu relative to the button
+ * @default false
+ */
+ flipped?: boolean;
+
+ /**
+ * Specify the menu options class
+ */
+ menuOptionsClass?: string;
+
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render
+ */
+ icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Specify the icon class
+ */
+ iconClass?: string;
+
+ /**
+ * Specify the ARIA label for the icon
+ * @default "Open and close list of options"
+ */
+ iconDescription?: string;
+
+ /**
+ * Set an id for the button element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the trigger button element
+ * @default null
+ */
+ buttonRef?: null | HTMLButtonElement;
+
+ /**
+ * Obtain a reference to the overflow menu element
+ * @default null
+ */
+ menuRef?: null | HTMLUListElement;
+}
+
+export default class OverflowMenu {
+ $$prop_def: OverflowMenuProps;
+ $$slot_def: {
+ default: {};
+ menu: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/OverflowMenu/OverflowMenuItem.d.ts b/types/OverflowMenu/OverflowMenuItem.d.ts
new file mode 100644
index 00000000..01062634
--- /dev/null
+++ b/types/OverflowMenu/OverflowMenuItem.d.ts
@@ -0,0 +1,69 @@
+/// {
+ /**
+ * Specify the item text
+ * Alternatively, use the default slot for a custom element
+ * @default "Provide text"
+ */
+ text?: string;
+
+ /**
+ * Specify the `href` attribute if the item is a link
+ * @default ""
+ */
+ href?: string;
+
+ /**
+ * Set to `true` if the item should be focused when opening the menu
+ * @default false
+ */
+ primaryFocus?: boolean;
+
+ /**
+ * Set to `true` to disable the item
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to include a divider
+ * @default false
+ */
+ hasDivider?: boolean;
+
+ /**
+ * Set to `true` to use the danger variant
+ * @default false
+ */
+ danger?: boolean;
+
+ /**
+ * Set to `false` to omit the button `title` attribute
+ * @default true
+ */
+ requireTitle?: boolean;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the HTML element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement | HTMLButtonElement;
+}
+
+export default class OverflowMenuItem {
+ $$prop_def: OverflowMenuItemProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.d.ts
new file mode 100644
index 00000000..e0356a35
--- /dev/null
+++ b/types/Pagination/Pagination.d.ts
@@ -0,0 +1,107 @@
+/// {
+ /**
+ * Specify the current page index
+ * @default 1
+ */
+ page?: number;
+
+ /**
+ * Specify the total number of items
+ * @default 0
+ */
+ totalItems?: number;
+
+ /**
+ * Set to `true` to disable the pagination
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the forward button text
+ * @default "Next page"
+ */
+ forwardText?: string;
+
+ /**
+ * Specify the backward button text
+ * @default "Previous page"
+ */
+ backwardText?: string;
+
+ /**
+ * Specify the items per page text
+ * @default "Items per page:"
+ */
+ itemsPerPageText?: string;
+
+ /**
+ * Override the item text
+ * @default (min, max) => `${min}–${max} items`
+ */
+ itemText?: (min: number, max: number) => string;
+
+ /**
+ * Override the item range text
+ * @default (min, max, total) => `${min}–${max} of ${total} items`
+ */
+ itemRangeText?: (min: number, max: number, total: number) => string;
+
+ /**
+ * Set to `true` to disable the page input
+ * @default false
+ */
+ pageInputDisabled?: boolean;
+
+ /**
+ * Set to `true` to disable the page size input
+ * @default false
+ */
+ pageSizeInputDisabled?: boolean;
+
+ /**
+ * Specify the number of items to display in a page
+ * @default 10
+ */
+ pageSize?: number;
+
+ /**
+ * Specify the available page sizes
+ * @default [10]
+ */
+ pageSizes?: number[];
+
+ /**
+ * Set to `true` if the number of pages is unknown
+ * @default false
+ */
+ pagesUnknown?: boolean;
+
+ /**
+ * Override the page text
+ * @default (page) => `page ${page}`
+ */
+ pageText?: (page: number) => string;
+
+ /**
+ * Override the page range text
+ * @default (current, total) => `of ${total} page${total === 1 ? "" : "s"}`
+ */
+ pageRangeText?: (current: number, total: number) => string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class Pagination {
+ $$prop_def: PaginationProps;
+ $$slot_def: {};
+
+ $on(eventname: "update", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Pagination/PaginationSkeleton.d.ts b/types/Pagination/PaginationSkeleton.d.ts
new file mode 100644
index 00000000..c6512a99
--- /dev/null
+++ b/types/Pagination/PaginationSkeleton.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class PaginationSkeleton {
+ $$prop_def: PaginationSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts
new file mode 100644
index 00000000..faaa7180
--- /dev/null
+++ b/types/PaginationNav/PaginationNav.d.ts
@@ -0,0 +1,49 @@
+/// {
+ /**
+ * Specify the current page index
+ * @default 0
+ */
+ page?: number;
+
+ /**
+ * Specify the total number of pages
+ * @default 10
+ */
+ total?: number;
+
+ /**
+ * Specify the total number of pages to show
+ * @default 10
+ */
+ shown?: number;
+
+ /**
+ * Set to `true` to loop the navigation
+ * @default false
+ */
+ loop?: boolean;
+
+ /**
+ * Specify the forward button text
+ * @default "Next page"
+ */
+ forwardText?: string;
+
+ /**
+ * Specify the backward button text
+ * @default "Previous page"
+ */
+ backwardText?: string;
+}
+
+export default class PaginationNav {
+ $$prop_def: PaginationNavProps;
+ $$slot_def: {};
+
+ $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "click:button--next", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ProgressIndicator/ProgressIndicator.d.ts b/types/ProgressIndicator/ProgressIndicator.d.ts
new file mode 100644
index 00000000..0241fab3
--- /dev/null
+++ b/types/ProgressIndicator/ProgressIndicator.d.ts
@@ -0,0 +1,41 @@
+/// {
+ /**
+ * Specify the current step index
+ * @default 0
+ */
+ currentIndex?: number;
+
+ /**
+ * Set to `true` to use the vertical variant
+ * @default false
+ */
+ vertical?: boolean;
+
+ /**
+ * Set to `true` to specify whether the progress steps should be split equally in size in the div
+ * @default false
+ */
+ spaceEqually?: boolean;
+
+ /**
+ * Set to `true` to prevent updating `currentIndex`
+ * @default false
+ */
+ preventChangeOnClick?: boolean;
+}
+
+export default class ProgressIndicator {
+ $$prop_def: ProgressIndicatorProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts
new file mode 100644
index 00000000..d77c1aa5
--- /dev/null
+++ b/types/ProgressIndicator/ProgressIndicatorSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Set to `true` to use the vertical variant
+ * @default false
+ */
+ vertical?: boolean;
+
+ /**
+ * Specify the number of steps to render
+ * @default 4
+ */
+ count?: number;
+}
+
+export default class ProgressIndicatorSkeleton {
+ $$prop_def: ProgressIndicatorSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ProgressIndicator/ProgressStep.d.ts b/types/ProgressIndicator/ProgressStep.d.ts
new file mode 100644
index 00000000..425ae4b2
--- /dev/null
+++ b/types/ProgressIndicator/ProgressStep.d.ts
@@ -0,0 +1,65 @@
+/// {
+ /**
+ * Set to `true` for the complete variant
+ * @default false
+ */
+ complete?: boolean;
+
+ /**
+ * Set to `true` to use the current variant
+ * @default false
+ */
+ current?: boolean;
+
+ /**
+ * Set to `true` to disable the progress step
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the step description
+ * @default ""
+ */
+ description?: string;
+
+ /**
+ * Specify the step label
+ * @default ""
+ */
+ label?: string;
+
+ /**
+ * Specify the step secondary label
+ * @default ""
+ */
+ secondaryLabel?: string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class ProgressStep {
+ $$prop_def: ProgressStepProps;
+ $$slot_def: {
+ default: { props: { class: "bx--progress-label" } };
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/RadioButton/RadioButton.d.ts b/types/RadioButton/RadioButton.d.ts
new file mode 100644
index 00000000..ede21976
--- /dev/null
+++ b/types/RadioButton/RadioButton.d.ts
@@ -0,0 +1,65 @@
+/// {
+ /**
+ * Specify the value of the radio button
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Set to `true` to check the radio button
+ * @default false
+ */
+ checked?: boolean;
+
+ /**
+ * et to `true` to disable the radio button
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label position
+ * @default "right"
+ */
+ labelPosition?: "right" | "left";
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the checkbox input
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class RadioButton {
+ $$prop_def: RadioButtonProps;
+ $$slot_def: {};
+
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/RadioButton/RadioButtonSkeleton.d.ts b/types/RadioButton/RadioButtonSkeleton.d.ts
new file mode 100644
index 00000000..bb06a92f
--- /dev/null
+++ b/types/RadioButton/RadioButtonSkeleton.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class RadioButtonSkeleton {
+ $$prop_def: RadioButtonSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/RadioButtonGroup/RadioButtonGroup.d.ts b/types/RadioButtonGroup/RadioButtonGroup.d.ts
new file mode 100644
index 00000000..9166f83b
--- /dev/null
+++ b/types/RadioButtonGroup/RadioButtonGroup.d.ts
@@ -0,0 +1,45 @@
+/// {
+ /**
+ * Set the selected radio button value
+ */
+ selected?: string;
+
+ /**
+ * Set to `true` to disable the radio buttons
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label position
+ * @default "right"
+ */
+ labelPosition?: "right" | "left";
+
+ /**
+ * Specify the orientation of the radio buttons
+ * @default "horizontal"
+ */
+ orientation?: "horizontal" | "vertical";
+
+ /**
+ * Set an id for the container div element
+ */
+ id?: string;
+}
+
+export default class RadioButtonGroup {
+ $$prop_def: RadioButtonGroupProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts
new file mode 100644
index 00000000..494e369d
--- /dev/null
+++ b/types/Search/Search.d.ts
@@ -0,0 +1,102 @@
+/// ) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Search/SearchSkeleton.d.ts b/types/Search/SearchSkeleton.d.ts
new file mode 100644
index 00000000..7b9ffe3b
--- /dev/null
+++ b/types/Search/SearchSkeleton.d.ts
@@ -0,0 +1,25 @@
+/// {
+ /**
+ * @default false
+ */
+ small?: boolean;
+
+ /**
+ * Specify the size of the search input
+ * @default "xl"
+ */
+ size?: "sm" | "lg" | "xl";
+}
+
+export default class SearchSkeleton {
+ $$prop_def: SearchSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts
new file mode 100644
index 00000000..c484d7bc
--- /dev/null
+++ b/types/Select/Select.d.ts
@@ -0,0 +1,95 @@
+/// {
+ /**
+ * Specify the selected item value
+ */
+ selected?: string;
+
+ /**
+ * Set the size of the select input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Set to `true` to use the inline variant
+ * @default false
+ */
+ inline?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the select element
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set an id for the select element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the select element
+ */
+ name?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Set to `true` to not render a label
+ * @default false
+ */
+ noLabel?: boolean;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Obtain a reference to the select HTML element
+ * @default null
+ */
+ ref?: null | HTMLSelectElement;
+}
+
+export default class Select {
+ $$prop_def: SelectProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts
new file mode 100644
index 00000000..b08ba976
--- /dev/null
+++ b/types/Select/SelectItem.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Set to `true` to disable the optgroup element
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label attribute of the optgroup element
+ * @default "Provide label"
+ */
+ label?: string;
+}
+
+export default class SelectItemGroup {
+ $$prop_def: SelectItemGroupProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Select/SelectSkeleton.d.ts b/types/Select/SelectSkeleton.d.ts
new file mode 100644
index 00000000..39ba59ec
--- /dev/null
+++ b/types/Select/SelectSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+}
+
+export default class SelectSkeleton {
+ $$prop_def: SelectSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts
new file mode 100644
index 00000000..378ab06c
--- /dev/null
+++ b/types/SkeletonPlaceholder/SkeletonPlaceholder.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class SkeletonPlaceholder {
+ $$prop_def: SkeletonPlaceholderProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/SkeletonText/SkeletonText.d.ts b/types/SkeletonText/SkeletonText.d.ts
new file mode 100644
index 00000000..d9a83b47
--- /dev/null
+++ b/types/SkeletonText/SkeletonText.d.ts
@@ -0,0 +1,38 @@
+/// {
+ /**
+ * Specify the number of lines to render
+ * @default 3
+ */
+ lines?: number;
+
+ /**
+ * Set to `true` to use the heading size variant
+ * @default false
+ */
+ heading?: boolean;
+
+ /**
+ * Set to `true` to use the paragraph size variant
+ * @default false
+ */
+ paragraph?: boolean;
+
+ /**
+ * Specify the width of the text (% or px)
+ * @default "100%"
+ */
+ width?: string;
+}
+
+export default class SkeletonText {
+ $$prop_def: SkeletonTextProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Slider/Slider.d.ts b/types/Slider/Slider.d.ts
new file mode 100644
index 00000000..e360a07a
--- /dev/null
+++ b/types/Slider/Slider.d.ts
@@ -0,0 +1,117 @@
+/// {
+ /**
+ * Specify the value of the slider
+ * @default 0
+ */
+ value?: number;
+
+ /**
+ * Set the maximum slider value
+ * @default 100
+ */
+ max?: number;
+
+ /**
+ * Specify the label for the max value
+ * @default ""
+ */
+ maxLabel?: string;
+
+ /**
+ * Set the minimum slider value
+ * @default 0
+ */
+ min?: number;
+
+ /**
+ * Specify the label for the min value
+ * @default ""
+ */
+ minLabel?: string;
+
+ /**
+ * Set the step value
+ * @default 1
+ */
+ step?: number;
+
+ /**
+ * Set the step multiplier value
+ * @default 4
+ */
+ stepMultiplier?: number;
+
+ /**
+ * Set to `true` to require a value
+ * @default false
+ */
+ required?: boolean;
+
+ /**
+ * Specify the input type
+ * @default "number"
+ */
+ inputType?: string;
+
+ /**
+ * Set to `true` to disable the slider
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to hide the text input
+ * @default false
+ */
+ hideTextInput?: boolean;
+
+ /**
+ * Set an id for the slider div element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set a name for the slider element
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class Slider {
+ $$prop_def: SliderProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Slider/SliderSkeleton.d.ts b/types/Slider/SliderSkeleton.d.ts
new file mode 100644
index 00000000..f46c18b9
--- /dev/null
+++ b/types/Slider/SliderSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+}
+
+export default class SliderSkeleton {
+ $$prop_def: SliderSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredList.d.ts b/types/StructuredList/StructuredList.d.ts
new file mode 100644
index 00000000..e67a46f7
--- /dev/null
+++ b/types/StructuredList/StructuredList.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Specify the selected structured list row value
+ */
+ selected?: string;
+
+ /**
+ * Set to `true` to use the bordered variant
+ * @default false
+ */
+ border?: boolean;
+
+ /**
+ * Set to `true` to use the selection variant
+ * @default false
+ */
+ selection?: boolean;
+}
+
+export default class StructuredList {
+ $$prop_def: StructuredListProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListBody.d.ts b/types/StructuredList/StructuredListBody.d.ts
new file mode 100644
index 00000000..4efa751d
--- /dev/null
+++ b/types/StructuredList/StructuredListBody.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class StructuredListBody {
+ $$prop_def: StructuredListBodyProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListCell.d.ts b/types/StructuredList/StructuredListCell.d.ts
new file mode 100644
index 00000000..f0745595
--- /dev/null
+++ b/types/StructuredList/StructuredListCell.d.ts
@@ -0,0 +1,28 @@
+/// {
+ /**
+ * Set to `true` to use as a header
+ * @default false
+ */
+ head?: boolean;
+
+ /**
+ * Set to `true` to prevent wrapping
+ * @default false
+ */
+ noWrap?: boolean;
+}
+
+export default class StructuredListCell {
+ $$prop_def: StructuredListCellProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListHead.d.ts b/types/StructuredList/StructuredListHead.d.ts
new file mode 100644
index 00000000..145b8baa
--- /dev/null
+++ b/types/StructuredList/StructuredListHead.d.ts
@@ -0,0 +1,16 @@
+/// {}
+
+export default class StructuredListHead {
+ $$prop_def: StructuredListHeadProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListInput.d.ts b/types/StructuredList/StructuredListInput.d.ts
new file mode 100644
index 00000000..2844ea76
--- /dev/null
+++ b/types/StructuredList/StructuredListInput.d.ts
@@ -0,0 +1,46 @@
+/// {
+ /**
+ * Set to `true` to check the input
+ * @default false
+ */
+ checked?: boolean;
+
+ /**
+ * Specify the title of the input
+ * @default "title"
+ */
+ title?: string;
+
+ /**
+ * Specify the value of the input
+ * @default "value"
+ */
+ value?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class StructuredListInput {
+ $$prop_def: StructuredListInputProps;
+ $$slot_def: {};
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListRow.d.ts b/types/StructuredList/StructuredListRow.d.ts
new file mode 100644
index 00000000..33071469
--- /dev/null
+++ b/types/StructuredList/StructuredListRow.d.ts
@@ -0,0 +1,35 @@
+/// {
+ /**
+ * Set to `true` to use as a header
+ * @default false
+ */
+ head?: boolean;
+
+ /**
+ * Set to `true` to render a label slot
+ * @default false
+ */
+ label?: boolean;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+}
+
+export default class StructuredListRow {
+ $$prop_def: StructuredListRowProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/StructuredList/StructuredListSkeleton.d.ts b/types/StructuredList/StructuredListSkeleton.d.ts
new file mode 100644
index 00000000..63fa81ae
--- /dev/null
+++ b/types/StructuredList/StructuredListSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Specify the number of rows
+ * @default 5
+ */
+ rows?: number;
+
+ /**
+ * Set to `true` to use the bordered variant
+ * @default false
+ */
+ border?: boolean;
+}
+
+export default class StructuredListSkeleton {
+ $$prop_def: StructuredListSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tabs/Tab.d.ts b/types/Tabs/Tab.d.ts
new file mode 100644
index 00000000..04585573
--- /dev/null
+++ b/types/Tabs/Tab.d.ts
@@ -0,0 +1,52 @@
+/// {
+ /**
+ * Specify the tab label
+ * Alternatively, use the default slot (e.g. Label )
+ * @default ""
+ */
+ label?: string;
+
+ /**
+ * Specify the href attribute
+ * @default "#"
+ */
+ href?: string;
+
+ /**
+ * Set to `true` to disable the tab
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the anchor HTML element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class Tab {
+ $$prop_def: TabProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tabs/TabContent.d.ts b/types/Tabs/TabContent.d.ts
new file mode 100644
index 00000000..73ace54e
--- /dev/null
+++ b/types/Tabs/TabContent.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Set an id for the top-level element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class TabContent {
+ $$prop_def: TabContentProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tabs/Tabs.d.ts b/types/Tabs/Tabs.d.ts
new file mode 100644
index 00000000..48eafc01
--- /dev/null
+++ b/types/Tabs/Tabs.d.ts
@@ -0,0 +1,40 @@
+/// {
+ /**
+ * Specify the selected tab index
+ * @default 0
+ */
+ selected?: number;
+
+ /**
+ * Specify the type of tabs
+ * @default "default"
+ */
+ type?: "default" | "container";
+
+ /**
+ * Specify the ARIA label for the chevron icon
+ * @default "Show menu options"
+ */
+ iconDescription?: string;
+
+ /**
+ * Specify the tab trigger href attribute
+ * @default "#"
+ */
+ triggerHref?: string;
+}
+
+export default class Tabs {
+ $$prop_def: TabsProps;
+ $$slot_def: {
+ default: {};
+ content: {};
+ };
+
+ $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tabs/TabsSkeleton.d.ts b/types/Tabs/TabsSkeleton.d.ts
new file mode 100644
index 00000000..78d6bd9d
--- /dev/null
+++ b/types/Tabs/TabsSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Specify the number of tabs to render
+ * @default 4
+ */
+ count?: number;
+}
+
+export default class TabsSkeleton {
+ $$prop_def: TabsSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
new file mode 100644
index 00000000..ee4e105a
--- /dev/null
+++ b/types/Tag/Tag.d.ts
@@ -0,0 +1,64 @@
+/// ,
+ svelte.JSX.HTMLAttributes {
+ /**
+ * Specify the type of tag
+ */
+ type?:
+ | "red"
+ | "magenta"
+ | "purple"
+ | "blue"
+ | "cyan"
+ | "teal"
+ | "green"
+ | "gray"
+ | "cool-gray"
+ | "warm-gray"
+ | "high-contrast";
+
+ /**
+ * Set to `true` to use filterable variant
+ * @default false
+ */
+ filter?: boolean;
+
+ /**
+ * Set to `true` to disable a filterable tag
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Set to `true` to display the skeleton state
+ * @default false
+ */
+ skeleton?: boolean;
+
+ /**
+ * Set the title for the close button in a filterable tag
+ * @default "Clear filter"
+ */
+ title?: string;
+
+ /**
+ * Set an id for the filterable tag
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class Tag {
+ $$prop_def: TagProps;
+ $$slot_def: {
+ default: { props: { class: "bx--tag__label" } };
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tag/TagSkeleton.d.ts b/types/Tag/TagSkeleton.d.ts
new file mode 100644
index 00000000..09ef38f2
--- /dev/null
+++ b/types/Tag/TagSkeleton.d.ts
@@ -0,0 +1,14 @@
+/// {}
+
+export default class TagSkeleton {
+ $$prop_def: TagSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts
new file mode 100644
index 00000000..467eac3b
--- /dev/null
+++ b/types/TextArea/TextArea.d.ts
@@ -0,0 +1,101 @@
+/// {
+ /**
+ * Specify the textarea value
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Specify the placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Specify the number of cols
+ * @default 50
+ */
+ cols?: number;
+
+ /**
+ * Specify the number of rows
+ * @default 4
+ */
+ rows?: number;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the text for the invalid state
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set an id for the textarea element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the textarea HTML element
+ * @default null
+ */
+ ref?: null | HTMLTextAreaElement;
+}
+
+export default class TextArea {
+ $$prop_def: TextAreaProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TextArea/TextAreaSkeleton.d.ts b/types/TextArea/TextAreaSkeleton.d.ts
new file mode 100644
index 00000000..996f4c5d
--- /dev/null
+++ b/types/TextArea/TextAreaSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+}
+
+export default class TextAreaSkeleton {
+ $$prop_def: TextAreaSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts
new file mode 100644
index 00000000..601d9d9c
--- /dev/null
+++ b/types/TextInput/PasswordInput.d.ts
@@ -0,0 +1,123 @@
+/// {
+ /**
+ * Set the size of the input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the input value
+ * @default ""
+ */
+ value?: number | string;
+
+ /**
+ * Set to `"text"` to toggle the password visibility
+ * @default "password"
+ */
+ type?: "text" | "password";
+
+ /**
+ * Specify the placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Specify the hide password label text
+ * @default "Hide password"
+ */
+ hidePasswordLabel?: string;
+
+ /**
+ * Specify the show password label text
+ * @default "Show password"
+ */
+ showPasswordLabel?: string;
+
+ /**
+ * Set the alignment of the tooltip relative to the icon
+ */
+ tooltipAlignment?: "start" | "center" | "end";
+
+ /**
+ * Set the position of the tooltip relative to the icon
+ */
+ tooltipPosition?: "top" | "right" | "bottom" | "left";
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the text for the invalid state
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class PasswordInput {
+ $$prop_def: PasswordInputProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts
new file mode 100644
index 00000000..1b56f537
--- /dev/null
+++ b/types/TextInput/TextInput.d.ts
@@ -0,0 +1,125 @@
+/// {
+ /**
+ * Set the size of the input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the input value
+ * @default ""
+ */
+ value?: number | string;
+
+ /**
+ * Specify the input type
+ * @default ""
+ */
+ type?: string;
+
+ /**
+ * Specify the placeholder text
+ * @default ""
+ */
+ placeholder?: string;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the helper text
+ * @default ""
+ */
+ helperText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set to `true` to indicate an warning state
+ * @default false
+ */
+ warn?: boolean;
+
+ /**
+ * Specify the warning state text
+ * @default ""
+ */
+ warnText?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+
+ /**
+ * Set to `true` to mark the field as required
+ * @default false
+ */
+ required?: boolean;
+
+ /**
+ * Set to `true` to use inline version
+ * @default false
+ */
+ inline?: boolean;
+}
+
+export default class TextInput {
+ $$prop_def: TextInputProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TextInput/TextInputSkeleton.d.ts b/types/TextInput/TextInputSkeleton.d.ts
new file mode 100644
index 00000000..813af0ff
--- /dev/null
+++ b/types/TextInput/TextInputSkeleton.d.ts
@@ -0,0 +1,20 @@
+/// {
+ /**
+ * Set to `true` to hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+}
+
+export default class TextInputSkeleton {
+ $$prop_def: TextInputSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/ClickableTile.d.ts b/types/Tile/ClickableTile.d.ts
new file mode 100644
index 00000000..f4018bca
--- /dev/null
+++ b/types/Tile/ClickableTile.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Set to `true` to click the tile
+ * @default false
+ */
+ clicked?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set the `href`
+ */
+ href?: string;
+}
+
+export default class ClickableTile {
+ $$prop_def: ClickableTileProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts
new file mode 100644
index 00000000..c5ffb7c0
--- /dev/null
+++ b/types/Tile/ExpandableTile.d.ts
@@ -0,0 +1,72 @@
+/// {
+ /**
+ * Set to `true` to expand the tile
+ * @default false
+ */
+ expanded?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Specify the max height of the tile (number of pixels)
+ * @default 0
+ */
+ tileMaxHeight?: number;
+
+ /**
+ * Specify the padding of the tile (number of pixels)
+ * @default 0
+ */
+ tilePadding?: number;
+
+ /**
+ * Specify the icon text of the collapsed tile
+ * @default "Interact to expand Tile"
+ */
+ tileCollapsedIconText?: string;
+
+ /**
+ * Specify the icon text of the expanded tile
+ * @default "Interact to collapse Tile"
+ */
+ tileExpandedIconText?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Set an id for the top-level div element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the top-level element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+}
+
+export default class ExpandableTile {
+ $$prop_def: ExpandableTileProps;
+ $$slot_def: {
+ above: {};
+ below: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/RadioTile.d.ts b/types/Tile/RadioTile.d.ts
new file mode 100644
index 00000000..54c3db2a
--- /dev/null
+++ b/types/Tile/RadioTile.d.ts
@@ -0,0 +1,60 @@
+/// {
+ /**
+ * Set to `true` to check the tile
+ * @default false
+ */
+ checked?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Specify the value of the radio input
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Specify the ARIA label for the radio tile checkmark icon
+ * @default "Tile checkmark"
+ */
+ iconDescription?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ * @default ""
+ */
+ name?: string;
+}
+
+export default class RadioTile {
+ $$prop_def: RadioTileProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/SelectableTile.d.ts b/types/Tile/SelectableTile.d.ts
new file mode 100644
index 00000000..5ba51e8a
--- /dev/null
+++ b/types/Tile/SelectableTile.d.ts
@@ -0,0 +1,71 @@
+/// {
+ /**
+ * Set to `true` to select the tile
+ * @default false
+ */
+ selected?: boolean;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Specify the title of the selectable tile
+ * @default "title"
+ */
+ title?: string;
+
+ /**
+ * Specify the value of the selectable tile
+ * @default "value"
+ */
+ value?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Specify the ARIA label for the selectable tile checkmark icon
+ * @default "Tile checkmark"
+ */
+ iconDescription?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ * @default ""
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class SelectableTile {
+ $$prop_def: SelectableTileProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/Tile.d.ts b/types/Tile/Tile.d.ts
new file mode 100644
index 00000000..5930a798
--- /dev/null
+++ b/types/Tile/Tile.d.ts
@@ -0,0 +1,22 @@
+/// {
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+}
+
+export default class Tile {
+ $$prop_def: TileProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tile/TileGroup.d.ts b/types/Tile/TileGroup.d.ts
new file mode 100644
index 00000000..ca41bde8
--- /dev/null
+++ b/types/Tile/TileGroup.d.ts
@@ -0,0 +1,30 @@
+/// {
+ /**
+ * Specify the selected tile value
+ */
+ selected?: string;
+
+ /**
+ * Set to `true` to disable the tile group
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the legend text
+ * @default ""
+ */
+ legend?: string;
+}
+
+export default class TileGroup {
+ $$prop_def: TileGroupProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "select", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts
new file mode 100644
index 00000000..7429f046
--- /dev/null
+++ b/types/TimePicker/TimePicker.d.ts
@@ -0,0 +1,108 @@
+/// {
+ /**
+ * Specify the size of the input
+ */
+ size?: "sm" | "xl";
+
+ /**
+ * Specify the input value
+ * @default ""
+ */
+ value?: string;
+
+ /**
+ * Specify the input type
+ * @default "text"
+ */
+ type?: string;
+
+ /**
+ * Specify the input placeholder text
+ * @default "hh=mm"
+ */
+ placeholder?: string;
+
+ /**
+ * Specify the `pattern` attribute for the input element
+ * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?"
+ */
+ pattern?: string;
+
+ /**
+ * Specify the `maxlength` input attribute
+ * @default 5
+ */
+ maxlength?: number;
+
+ /**
+ * Set to `true` to enable the light variant
+ * @default false
+ */
+ light?: boolean;
+
+ /**
+ * Set to `true` to disable the input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @default false
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set to `true` to indicate an invalid state
+ * @default false
+ */
+ invalid?: boolean;
+
+ /**
+ * Specify the invalid state text
+ * @default ""
+ */
+ invalidText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the input
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the input HTML element
+ * @default null
+ */
+ ref?: null | HTMLInputElement;
+}
+
+export default class TimePicker {
+ $$prop_def: TimePickerProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TimePicker/TimePickerSelect.d.ts b/types/TimePicker/TimePickerSelect.d.ts
new file mode 100644
index 00000000..a27c57cf
--- /dev/null
+++ b/types/TimePicker/TimePickerSelect.d.ts
@@ -0,0 +1,62 @@
+/// {
+ /**
+ * Specify the select value
+ * @default ""
+ */
+ value?: number | string;
+
+ /**
+ * Set to `true` to disable the select
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the ARIA label for the chevron icon
+ * @default "Open list of options"
+ */
+ iconDescription?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * @default true
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Set an id for the select element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the select element
+ */
+ name?: string;
+
+ /**
+ * Obtain a reference to the select HTML element
+ * @default null
+ */
+ ref?: null | HTMLSelectElement;
+}
+
+export default class TimePickerSelect {
+ $$prop_def: TimePickerSelectProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts
new file mode 100644
index 00000000..74fb30e4
--- /dev/null
+++ b/types/Toggle/Toggle.d.ts
@@ -0,0 +1,59 @@
+/// {
+ /**
+ * Set to `true` to toggle the checkbox input
+ * @default false
+ */
+ toggled?: boolean;
+
+ /**
+ * Set to `true` to disable checkbox input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label for the untoggled state
+ * @default "Off"
+ */
+ labelA?: string;
+
+ /**
+ * Specify the label for the toggled state
+ * @default "On"
+ */
+ labelB?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the checkbox input
+ */
+ name?: string;
+}
+
+export default class Toggle {
+ $$prop_def: ToggleProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Toggle/ToggleSkeleton.d.ts b/types/Toggle/ToggleSkeleton.d.ts
new file mode 100644
index 00000000..c7901e77
--- /dev/null
+++ b/types/Toggle/ToggleSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class ToggleSkeleton {
+ $$prop_def: ToggleSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ToggleSmall/ToggleSmall.d.ts b/types/ToggleSmall/ToggleSmall.d.ts
new file mode 100644
index 00000000..dc7be03e
--- /dev/null
+++ b/types/ToggleSmall/ToggleSmall.d.ts
@@ -0,0 +1,59 @@
+/// {
+ /**
+ * Set to `true` to toggle the checkbox input
+ * @default false
+ */
+ toggled?: boolean;
+
+ /**
+ * Set to `true` to disable checkbox input
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the label for the untoggled state
+ * @default "Off"
+ */
+ labelA?: string;
+
+ /**
+ * Specify the label for the toggled state
+ * @default "On"
+ */
+ labelB?: string;
+
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Specify a name attribute for the checkbox input
+ */
+ name?: string;
+}
+
+export default class ToggleSmall {
+ $$prop_def: ToggleSmallProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
+ $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/ToggleSmall/ToggleSmallSkeleton.d.ts b/types/ToggleSmall/ToggleSmallSkeleton.d.ts
new file mode 100644
index 00000000..21bcbe9f
--- /dev/null
+++ b/types/ToggleSmall/ToggleSmallSkeleton.d.ts
@@ -0,0 +1,26 @@
+/// {
+ /**
+ * Specify the label text
+ * @default ""
+ */
+ labelText?: string;
+
+ /**
+ * Set an id for the input element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+}
+
+export default class ToggleSmallSkeleton {
+ $$prop_def: ToggleSmallSkeletonProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts
new file mode 100644
index 00000000..1684fe0a
--- /dev/null
+++ b/types/Tooltip/Tooltip.d.ts
@@ -0,0 +1,92 @@
+/// {
+ /**
+ * Set the direction of the tooltip relative to the button
+ * @default "bottom"
+ */
+ direction?: "top" | "right" | "bottom" | "left";
+
+ /**
+ * Set to `true` to open the tooltip
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to hide the tooltip icon
+ * @default false
+ */
+ hideIcon?: boolean;
+
+ /**
+ * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
+ * Icon size must be 16px (e.g. `Add16`, `Task16`)
+ */
+ icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Specify the ARIA label for the tooltip button
+ * @default ""
+ */
+ iconDescription?: string;
+
+ /**
+ * Specify the icon name attribute
+ * @default ""
+ */
+ iconName?: string;
+
+ /**
+ * Set the button tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+
+ /**
+ * Set an id for the tooltip
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ tooltipId?: string;
+
+ /**
+ * Set an id for the tooltip button
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ triggerId?: string;
+
+ /**
+ * Set the tooltip button text
+ * @default ""
+ */
+ triggerText?: string;
+
+ /**
+ * Obtain a reference to the trigger text HTML element
+ * @default null
+ */
+ ref?: null | HTMLDivElement;
+
+ /**
+ * Obtain a reference to the tooltip HTML element
+ * @default null
+ */
+ refTooltip?: null | HTMLDivElement;
+
+ /**
+ * Obtain a reference to the icon HTML element
+ * @default null
+ */
+ refIcon?: null | HTMLDivElement;
+}
+
+export default class Tooltip {
+ $$prop_def: TooltipProps;
+ $$slot_def: {
+ default: {};
+ icon: {};
+ triggerText: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TooltipDefinition/TooltipDefinition.d.ts b/types/TooltipDefinition/TooltipDefinition.d.ts
new file mode 100644
index 00000000..e1788509
--- /dev/null
+++ b/types/TooltipDefinition/TooltipDefinition.d.ts
@@ -0,0 +1,48 @@
+/// {
+ /**
+ * Specify the tooltip text
+ * @default ""
+ */
+ tooltipText?: string;
+
+ /**
+ * Set the alignment of the tooltip relative to the icon
+ * @default "center"
+ */
+ align?: "start" | "center" | "end";
+
+ /**
+ * Set the direction of the tooltip relative to the icon
+ * @default "bottom"
+ */
+ direction?: "top" | "bottom";
+
+ /**
+ * Set an id for the tooltip div element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class TooltipDefinition {
+ $$prop_def: TooltipDefinitionProps;
+ $$slot_def: {
+ default: {};
+ tooltip: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts
new file mode 100644
index 00000000..265b1157
--- /dev/null
+++ b/types/TooltipIcon/TooltipIcon.d.ts
@@ -0,0 +1,47 @@
+/// {
+ /**
+ * Specify the tooltip text
+ * @default ""
+ */
+ tooltipText?: string;
+
+ /**
+ * Set the alignment of the tooltip relative to the icon
+ * @default "center"
+ */
+ align?: "start" | "center" | "end";
+
+ /**
+ * Set the direction of the tooltip relative to the icon
+ * @default "bottom"
+ */
+ direction?: "top" | "right" | "bottom" | "left";
+
+ /**
+ * Set an id for the span element
+ * @default "ccs-" + Math.random().toString(36)
+ */
+ id?: string;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class TooltipIcon {
+ $$prop_def: TooltipIconProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/Content.d.ts b/types/UIShell/Content.d.ts
new file mode 100644
index 00000000..f4412ee7
--- /dev/null
+++ b/types/UIShell/Content.d.ts
@@ -0,0 +1,18 @@
+/// {
+ /**
+ * Specify the id for the main element
+ * @default "main-content"
+ */
+ id?: string;
+}
+
+export default class Content {
+ $$prop_def: ContentProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts
new file mode 100644
index 00000000..5e21d045
--- /dev/null
+++ b/types/UIShell/GlobalHeader/Header.d.ts
@@ -0,0 +1,61 @@
+/// {
+ /**
+ * Set to `false` to hide the side nav by default
+ * @default true
+ */
+ expandedByDefault?: boolean;
+
+ /**
+ * Set to `true` to open the side nav
+ * @default false
+ */
+ isSideNavOpen?: boolean;
+
+ /**
+ * Specify the ARIA label for the header
+ */
+ uiShellAriaLabel?: string;
+
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Specify the company name
+ */
+ company?: string;
+
+ /**
+ * Specify the platform name
+ * Alternatively, use the named slot "platform" (e.g. ...)
+ * @default ""
+ */
+ platformName?: string;
+
+ /**
+ * Set to `true` to persist the hamburger menu
+ * @default false
+ */
+ persistentHamburgerMenu?: boolean;
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class Header {
+ $$prop_def: HeaderProps;
+ $$slot_def: {
+ default: {};
+ platform: {};
+ ["skip-to-content"]: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts
new file mode 100644
index 00000000..cdf1bad3
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts
@@ -0,0 +1,38 @@
+/// {
+ /**
+ * Set to `true` to open the panel
+ * @default false
+ */
+ isOpen?: boolean;
+
+ /**
+ * Specify the icon props
+ */
+ icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+
+ /**
+ * Specify the text
+ * Alternatively, use the named slot "text" (e.g. ) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
new file mode 100644
index 00000000..7d474c44
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
@@ -0,0 +1,32 @@
+/// {
+ /**
+ * Set to `true` to use the active state
+ * @default false
+ */
+ linkIsActive?: boolean;
+
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Specify the icon props
+ */
+ icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class HeaderActionLink {
+ $$prop_def: HeaderActionLinkProps;
+ $$slot_def: {};
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts
new file mode 100644
index 00000000..ece86ec0
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderActionSearch.d.ts
@@ -0,0 +1,19 @@
+/// ) => void): () => void;
+ $on(eventname: "focusOutInputSearch", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderNav.d.ts b/types/UIShell/GlobalHeader/HeaderNav.d.ts
new file mode 100644
index 00000000..4afb7eca
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderNav.d.ts
@@ -0,0 +1,17 @@
+/// {
+ /**
+ * Specify the ARIA label for the nav
+ */
+ ariaLabel?: string;
+}
+
+export default class HeaderNav {
+ $$prop_def: HeaderNavProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts
new file mode 100644
index 00000000..a44bbe67
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts
@@ -0,0 +1,34 @@
+/// {
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Specify the text
+ */
+ text?: string;
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class HeaderNavItem {
+ $$prop_def: HeaderNavItemProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts
new file mode 100644
index 00000000..80903c90
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts
@@ -0,0 +1,49 @@
+/// {
+ /**
+ * Set to `true` to toggle the expanded state
+ * @default false
+ */
+ expanded?: boolean;
+
+ /**
+ * Specify the `href` attribute
+ * @default "/"
+ */
+ href?: string;
+
+ /**
+ * Specify the text
+ */
+ text?: string;
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+
+ /**
+ * Specify the ARIA label for the chevron icon
+ * @default "Expand/Collapse"
+ */
+ iconDescription?: string;
+}
+
+export default class HeaderNavMenu {
+ $$prop_def: HeaderNavMenuProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void;
+ $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
+ $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts
new file mode 100644
index 00000000..0c6d781e
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderPanelDivider.d.ts
@@ -0,0 +1,12 @@
+/// {
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class HeaderPanelLink {
+ $$prop_def: HeaderPanelLinkProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts
new file mode 100644
index 00000000..5dbe3138
--- /dev/null
+++ b/types/UIShell/GlobalHeader/HeaderPanelLinks.d.ts
@@ -0,0 +1,12 @@
+/// {
+ /**
+ * Set to `true` to use the active variant
+ * @default false
+ */
+ isActive?: boolean;
+
+ /**
+ * Specify the icon to render
+ */
+ icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+
+ /**
+ * Obtain a reference to the HTML button element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class HeaderGlobalAction {
+ $$prop_def: HeaderGlobalActionProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/SideNav/SideNav.d.ts b/types/UIShell/SideNav/SideNav.d.ts
new file mode 100644
index 00000000..e493381e
--- /dev/null
+++ b/types/UIShell/SideNav/SideNav.d.ts
@@ -0,0 +1,29 @@
+/// {
+ /**
+ * Set to `true` to use the fixed variant
+ * @default false
+ */
+ fixed?: boolean;
+
+ /**
+ * Specify the ARIA label for the nav
+ */
+ ariaLabel?: string;
+
+ /**
+ * Set to `true` to toggle the expanded state
+ * @default false
+ */
+ isOpen?: boolean;
+}
+
+export default class SideNav {
+ $$prop_def: SideNavProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/SideNav/SideNavItems.d.ts b/types/UIShell/SideNav/SideNavItems.d.ts
new file mode 100644
index 00000000..3c55cbca
--- /dev/null
+++ b/types/UIShell/SideNav/SideNavItems.d.ts
@@ -0,0 +1,12 @@
+/// {
+ /**
+ * Set to `true` to select the current link
+ * @default false
+ */
+ isSelected?: boolean;
+
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Specify the text
+ */
+ text?: string;
+
+ /**
+ * Specify the icon props
+ */
+ icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class SideNavLink {
+ $$prop_def: SideNavLinkProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts
new file mode 100644
index 00000000..91f7d4f5
--- /dev/null
+++ b/types/UIShell/SideNav/SideNavMenu.d.ts
@@ -0,0 +1,35 @@
+/// {
+ /**
+ * Set to `true` to toggle the expanded state
+ * @default false
+ */
+ expanded?: boolean;
+
+ /**
+ * Specify the text
+ */
+ text?: string;
+
+ /**
+ * Specify the icon props
+ */
+ icon?: { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean };
+
+ /**
+ * Obtain a reference to the HTML button element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class SideNavMenu {
+ $$prop_def: SideNavMenuProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/SideNav/SideNavMenuItem.d.ts b/types/UIShell/SideNav/SideNavMenuItem.d.ts
new file mode 100644
index 00000000..2fc2e92e
--- /dev/null
+++ b/types/UIShell/SideNav/SideNavMenuItem.d.ts
@@ -0,0 +1,32 @@
+/// {
+ /**
+ * Set to `true` to select the item
+ */
+ isSelected?: boolean;
+
+ /**
+ * Specify the `href` attribute
+ */
+ href?: string;
+
+ /**
+ * Specify the item text
+ */
+ text?: string;
+
+ /**
+ * Obtain a reference to the HTML anchor element
+ * @default null
+ */
+ ref?: null | HTMLAnchorElement;
+}
+
+export default class SideNavMenuItem {
+ $$prop_def: SideNavMenuItemProps;
+ $$slot_def: {};
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UIShell/SkipToContent.d.ts b/types/UIShell/SkipToContent.d.ts
new file mode 100644
index 00000000..23c99591
--- /dev/null
+++ b/types/UIShell/SkipToContent.d.ts
@@ -0,0 +1,25 @@
+/// {
+ /**
+ * Specify the `href` attribute
+ * @default "#main-content"
+ */
+ href?: string;
+
+ /**
+ * Specify the tabindex
+ * @default "0"
+ */
+ tabindex?: string;
+}
+
+export default class SkipToContent {
+ $$prop_def: SkipToContentProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/UnorderedList/UnorderedList.d.ts b/types/UnorderedList/UnorderedList.d.ts
new file mode 100644
index 00000000..4c18f46d
--- /dev/null
+++ b/types/UnorderedList/UnorderedList.d.ts
@@ -0,0 +1,22 @@
+/// {
+ /**
+ * Set to `true` to use the nested variant
+ * @default false
+ */
+ nested?: boolean;
+}
+
+export default class UnorderedList {
+ $$prop_def: UnorderedListProps;
+ $$slot_def: {
+ default: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/index.d.ts b/types/index.d.ts
index 8f0b41d2..3ce43582 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,5379 +1,154 @@
-// Type definitions for carbon-components-svelte 0.22.0
-// Project: https://github.com/IBM/carbon-components-svelte
-
-export class CarbonSvelteComponent {
- $$prop_def: {};
-
- $$slot_def: {};
-
- // stub all `on:{eventname}` directives
- $on(eventname: string, handler: (e: Event) => any): () => void;
-}
-
-export class Accordion extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify alignment of accordion item chevron icon
- * @default "end"
- */
- align?: "start" | "end";
-
- /**
- * Specify the size of the accordion
- */
- size?: "sm" | "xl";
-
- /**
- * Set to `true` to disable the accordion
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class AccordionItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the title of the accordion item heading
- * Alternatively, use the named slot "title" (e.g. {`code`} )
- */
- code?: string;
-
- /**
- * Set to `true` to expand a multi-line code snippet (type="multi")
- * @default false
- */
- expanded?: boolean;
-
- /**
- * Set to `true` to hide the copy button
- * @default false
- */
- hideCopyButton?: boolean;
-
- /**
- * Set to `true` to wrap the text
- * Note that `type` must be "multi"
- * @default false
- */
- wrapText?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
-
- /**
- * Specify the ARIA label for the copy button icon
- */
- copyButtonDescription?: string;
-
- /**
- * Specify the ARIA label of the copy button
- */
- copyLabel?: string;
-
- /**
- * Specify the feedback text displayed when clicking the snippet
- * @default "Copied!"
- */
- feedback?: string;
-
- /**
- * Set the timeout duration (ms) to display feedback text
- * @default 2000
- */
- feedbackTimeout?: number;
-
- /**
- * Specify the show less text
- * `type` must be "multi"
- * @default "Show less"
- */
- showLessText?: string;
-
- /**
- * Specify the show more text
- * `type` must be "multi"
- * @default "Show more"
- */
- showMoreText?: string;
-
- /**
- * Set to `true` to enable the show more/less button
- * @default false
- */
- showMoreLess?: boolean;
-
- /**
- * Set an id for the code element
- */
- id?: string;
-
- /**
- * Obtain a reference to the pre HTML element
- * @default null
- */
- ref?: null | HTMLPreElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class CodeSnippetSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of code snippet
- * @default "single"
- */
- type?: "single" | "inline" | "multi";
- };
-}
-
-type ColumnSize = boolean | number;
-
-interface ColumnSizeDescriptor {
- span?: ColumnSize;
- offset: number;
-}
-
-type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
-
-export class Column extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to render a custom HTML element
- * Props are destructured as `props` in the default slot (e.g. ... ... ... |
)
- * @default false
- */
- as?: boolean;
-
- /**
- * Set to `true` to use the condensed variant
- * @default false
- */
- condensed?: boolean;
-
- /**
- * Set to `true` to use the narrow variant
- * @default false
- */
- narrow?: boolean;
-
- /**
- * Set to `true` to remove the gutter
- * @default false
- */
- noGutter?: boolean;
-
- /**
- * Set to `true` to remove the left gutter
- * @default false
- */
- noGutterLeft?: boolean;
-
- /**
- * Set to `true` to remove the right gutter
- * @default false
- */
- noGutterRight?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Search extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- *
- * @default false
- */
- small?: boolean;
-
- /**
- * Specify the size of the search input
- * @default "xl"
- */
- size?: "sm" | "lg" | "xl";
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the search input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the value of the search input
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the `type` attribute of the search input
- * @default "text"
- */
- type?: string;
-
- /**
- * Specify the `placeholder` attribute of the search input
- * @default "Search..."
- */
- placeholder?: string;
-
- /**
- * Specify the `autocomplete` attribute
- * @default "off"
- */
- autocomplete?: "on" | "off";
-
- /**
- * Set to `true` to auto focus the search element
- * @default false
- */
- autofocus?: boolean;
-
- /**
- * Specify the close button label text
- * @default "Clear search input"
- */
- closeButtonLabelText?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class SearchSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- *
- * @default false
- */
- small?: boolean;
-
- /**
- * Specify the size of the search input
- * @default "xl"
- */
- size?: "sm" | "lg" | "xl";
- };
-}
-
-export class Select extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the selected item value
- */
- selected?: string;
-
- /**
- * Set the size of the select input
- */
- size?: "sm" | "xl";
-
- /**
- * Set to `true` to use the inline variant
- * @default false
- */
- inline?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the select element
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set an id for the select element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the select element
- */
- name?: string;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Set to `true` to not render a label
- * @default false
- */
- noLabel?: boolean;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Obtain a reference to the select HTML element
- * @default null
- */
- ref?: null | HTMLSelectElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class SelectItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the option value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the option text
- * @default ""
- */
- text?: string;
-
- /**
- * Set to `true` to hide the option
- * @default false
- */
- hidden?: boolean;
-
- /**
- * Set to `true` to disable the option
- * @default false
- */
- disabled?: boolean;
- };
-}
-
-export class SelectItemGroup extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to disable the optgroup element
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label attribute of the optgroup element
- * @default "Provide label"
- */
- label?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class SelectSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the label text
- * @default false
- */
- hideLabel?: boolean;
- };
-}
-
-export class SelectableTile extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to select the tile
- * @default false
- */
- selected?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Specify the title of the selectable tile
- * @default "title"
- */
- title?: string;
-
- /**
- * Specify the value of the selectable tile
- * @default "value"
- */
- value?: string;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Specify the ARIA label for the selectable tile checkmark icon
- * @default "Tile checkmark"
- */
- iconDescription?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- * @default ""
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class SideNav extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the fixed variant
- * @default false
- */
- fixed?: boolean;
-
- /**
- * Specify the ARIA label for the nav
- */
- ariaLabel?: string;
-
- /**
- * Set to `true` to toggle the expanded state
- * @default false
- */
- isOpen?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class SideNavItems extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class SideNavLink extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to select the current link
- * @default false
- */
- isSelected?: boolean;
-
- /**
- * Specify the `href` attribute
- */
- href?: string;
-
- /**
- * Specify the text
- */
- text?: string;
-
- /**
- * Specify the icon props
- */
- icon?: {
- render: typeof import("carbon-icons-svelte/lib/Add16").default;
- skeleton: boolean;
- };
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-}
-
-export class SideNavMenu extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to toggle the expanded state
- * @default false
- */
- expanded?: boolean;
-
- /**
- * Specify the text
- */
- text?: string;
-
- /**
- * Specify the icon props
- */
- icon?: {
- render: typeof import("carbon-icons-svelte/lib/Add16").default;
- skeleton: boolean;
- };
-
- /**
- * Obtain a reference to the HTML button element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class SideNavMenuItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to select the item
- */
- isSelected?: boolean;
-
- /**
- * Specify the `href` attribute
- */
- href?: string;
-
- /**
- * Specify the item text
- */
- text?: string;
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-}
-
-export class SkeletonPlaceholder extends CarbonSvelteComponent {}
-
-export class SkeletonText extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the number of lines to render
- * @default 3
- */
- lines?: number;
-
- /**
- * Set to `true` to use the heading size variant
- * @default false
- */
- heading?: boolean;
-
- /**
- * Set to `true` to use the paragraph size variant
- * @default false
- */
- paragraph?: boolean;
-
- /**
- * Specify the width of the text (% or px)
- * @default "100%"
- */
- width?: string;
- };
-}
-
-export class SkipToContent extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the `href` attribute
- * @default "#main-content"
- */
- href?: string;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Slider extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the value of the slider
- * @default 0
- */
- value?: number;
-
- /**
- * Set the maximum slider value
- * @default 100
- */
- max?: number;
-
- /**
- * Specify the label for the max value
- * @default ""
- */
- maxLabel?: string;
-
- /**
- * Set the minimum slider value
- * @default 0
- */
- min?: number;
-
- /**
- * Specify the label for the min value
- * @default ""
- */
- minLabel?: string;
-
- /**
- * Set the step value
- * @default 1
- */
- step?: number;
-
- /**
- * Set the step multiplier value
- * @default 4
- */
- stepMultiplier?: number;
-
- /**
- * Set to `true` to require a value
- * @default false
- */
- required?: boolean;
-
- /**
- * Specify the input type
- * @default "number"
- */
- inputType?: string;
-
- /**
- * Set to `true` to disable the slider
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to hide the text input
- * @default false
- */
- hideTextInput?: boolean;
-
- /**
- * Set an id for the slider div element
- */
- id?: string;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set a name for the slider element
- * @default ""
- */
- name?: string;
-
- /**
- * Obtain a reference to the HTML element
- * @default null
- */
- ref?: null | HTMLElement;
- };
-}
-
-export class SliderSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the label text
- * @default false
- */
- hideLabel?: boolean;
- };
-}
-
-export class StructuredList extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the selected structured list row value
- */
- selected?: string;
-
- /**
- * Set to `true` to use the bordered variant
- * @default false
- */
- border?: boolean;
-
- /**
- * Set to `true` to use the selection variant
- * @default false
- */
- selection?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class StructuredListBody extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class StructuredListCell extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use as a header
- * @default false
- */
- head?: boolean;
-
- /**
- * Set to `true` to prevent wrapping
- * @default false
- */
- noWrap?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class StructuredListHead extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class StructuredListInput extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to check the input
- * @default false
- */
- checked?: boolean;
-
- /**
- * Specify the title of the input
- * @default "title"
- */
- title?: string;
-
- /**
- * Specify the value of the input
- * @default "value"
- */
- value?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- * @default ""
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class StructuredListRow extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use as a header
- * @default false
- */
- head?: boolean;
-
- /**
- * Set to `true` to render a label slot
- * @default false
- */
- label?: boolean;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class StructuredListSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the number of rows
- * @default 5
- */
- rows?: number;
-
- /**
- * Set to `true` to use the bordered variant
- * @default false
- */
- border?: boolean;
- };
-}
-
-export class Switch extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the switch text
- * Alternatively, use the named slot "text" (e.g. ...)
- * @default "Provide text"
- */
- text?: string;
-
- /**
- * Set to `true` for the switch to be selected
- * @default false
- */
- selected?: boolean;
-
- /**
- * Set to `true` to disable the switch
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set an id for the button element
- */
- id?: string;
-
- /**
- * Obtain a reference to the button HTML element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Tab extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the tab label
- * Alternatively, use the default slot (e.g. Label )
- * @default ""
- */
- label?: string;
-
- /**
- * Specify the href attribute
- * @default "#"
- */
- href?: string;
-
- /**
- * Set to `true` to disable the tab
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
-
- /**
- * Obtain a reference to the anchor HTML element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TabContent extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set an id for the top-level element
- */
- id?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Table extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the table
- */
- size?: "compact" | "short" | "tall";
-
- /**
- * Set to `true` to use zebra styles
- * @default false
- */
- zebra?: boolean;
-
- /**
- * Set to `true` to use static width
- * @default false
- */
- useStaticWidth?: boolean;
-
- /**
- * Set to `true` for the bordered variant
- * @default false
- */
- shouldShowBorder?: boolean;
-
- /**
- * Set to `true` for the sortable variant
- * @default false
- */
- sortable?: boolean;
-
- /**
- * Set to `true` to enable a sticky header
- * @default false
- */
- stickyHeader?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TableBody extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class TableCell extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class TableContainer extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the title of the data table
- * @default ""
- */
- title?: string;
-
- /**
- * Specify the description of the data table
- * @default ""
- */
- description?: string;
-
- /**
- * Set to `true` to enable a sticky header
- * @default false
- */
- stickyHeader?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TableHead extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class TableHeader extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the `scope` attribute
- * @default "col"
- */
- scope?: string;
-
- /**
- * Override the default id translations
- */
- translateWithId?: () => string;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TableRow extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class Tabs extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the selected tab index
- * @default 0
- */
- selected?: number;
-
- /**
- * Specify the type of tabs
- * @default "default"
- */
- type?: "default" | "container";
-
- /**
- * Specify the ARIA label for the chevron icon
- * @default "Show menu options"
- */
- iconDescription?: string;
-
- /**
- * Specify the tab trigger href attribute
- * @default "#"
- */
- triggerHref?: string;
- };
-
- $$slot_def: { default: {}; content: {} };
-}
-
-export class TabsSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the number of tabs to render
- * @default 4
- */
- count?: number;
- };
-}
-
-export class Tag extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the type of tag
- */
- type?:
- | "red"
- | "magenta"
- | "purple"
- | "blue"
- | "cyan"
- | "teal"
- | "green"
- | "gray"
- | "cool-gray"
- | "warm-gray"
- | "high-contrast";
-
- /**
- * Set to `true` to use filterable variant
- * @default false
- */
- filter?: boolean;
-
- /**
- * Set to `true` to disable a filterable tag
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
-
- /**
- * Set the title for the close button in a filterable tag
- * @default "Clear filter"
- */
- title?: string;
-
- /**
- * Set an id for the filterable tag
- */
- id?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TagSkeleton extends CarbonSvelteComponent {}
-
-export class TextArea extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the textarea value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the placeholder text
- * @default ""
- */
- placeholder?: string;
-
- /**
- * Specify the number of cols
- * @default 50
- */
- cols?: number;
-
- /**
- * Specify the number of rows
- * @default 4
- */
- rows?: number;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the text for the invalid state
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Set an id for the textarea element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- */
- name?: string;
-
- /**
- * Obtain a reference to the textarea HTML element
- * @default null
- */
- ref?: null | HTMLTextAreaElement;
- };
-}
-
-export class TextAreaSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
- };
-}
-
-export class TextInput extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the input
- */
- size?: "sm" | "xl";
-
- /**
- * Specify the input value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the input type
- * @default ""
- */
- type?: string;
-
- /**
- * Specify the placeholder text
- * @default ""
- */
- placeholder?: string;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- */
- name?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Set to `true` to indicate an warning state
- * @default false
- */
- warn?: boolean;
-
- /**
- * Specify the warning state text
- * @default ""
- */
- warnText?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
-
- /**
- * Set to `true` to mark the field as required
- * @default false
- */
- required?: boolean;
-
- /**
- * Set to `true` to use inline version
- * @default false
- */
- inline?: boolean;
- };
-}
-
-export class TextInputSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the label text
- * @default false
- */
- hideLabel?: boolean;
- };
-}
-
-export class Tile extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TileGroup extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the selected tile value
- */
- selected?: string;
-
- /**
- * Set to `true` to disable the tile group
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the legend text
- * @default ""
- */
- legend?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TimePicker extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the size of the input
- */
- size?: "sm" | "xl";
-
- /**
- * Specify the input value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the input type
- * @default "text"
- */
- type?: string;
-
- /**
- * Specify the input placeholder text
- * @default "hh=mm"
- */
- placeholder?: string;
-
- /**
- * Specify the `pattern` attribute for the input element
- * @default "(1[012]|[1-9]):[0-5][0-9](\\s)?"
- */
- pattern?: string;
-
- /**
- * Specify the `maxlength` input attribute
- * @default 5
- */
- maxlength?: number;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class TimePickerSelect extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the select value
- * @default ""
- */
- value?: string;
-
- /**
- * Set to `true` to disable the select
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the ARIA label for the chevron icon
- * @default "Open list of options"
- */
- iconDescription?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- *
- * @default true
- */
- hideLabel?: boolean;
-
- /**
- * Set an id for the select element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the select element
- */
- name?: string;
-
- /**
- * Obtain a reference to the select HTML element
- * @default null
- */
- ref?: null | HTMLSelectElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ToastNotification extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of notification
- * @default "toast"
- */
- notificationType?: "toast" | "inline";
-
- /**
- * Specify the kind of notification
- * @default "error"
- */
- kind?:
- | "error"
- | "info"
- | "info-square"
- | "success"
- | "warning"
- | "warning-alt";
-
- /**
- * Set to `true` to use the low contrast variant
- * @default false
- */
- lowContrast?: boolean;
-
- /**
- * Set the timeout duration (ms) to hide the notification after opening it
- * @default 0
- */
- timeout?: number;
-
- /**
- * Set the `role` attribute
- * @default "alert"
- */
- role?: string;
-
- /**
- * Specify the title text
- * @default "Title"
- */
- title?: string;
-
- /**
- * Specify the subtitle text
- * @default ""
- */
- subtitle?: string;
-
- /**
- * Specify the caption text
- * @default "Caption"
- */
- caption?: string;
-
- /**
- * Specify the ARIA label for the icon
- * @default "Closes notification"
- */
- iconDescription?: string;
-
- /**
- * Set to `true` to hide the close button
- * @default false
- */
- hideCloseButton?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Toggle extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to toggle the checkbox input
- * @default false
- */
- toggled?: boolean;
-
- /**
- * Set to `true` to disable checkbox input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label for the untoggled state
- * @default "Off"
- */
- labelA?: string;
-
- /**
- * Specify the label for the toggled state
- * @default "On"
- */
- labelB?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the checkbox input
- */
- name?: string;
- };
-}
-
-export class ToggleSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
- };
-}
-
-export class ToggleSmall extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to toggle the checkbox input
- * @default false
- */
- toggled?: boolean;
-
- /**
- * Set to `true` to disable checkbox input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label for the untoggled state
- * @default "Off"
- */
- labelA?: string;
-
- /**
- * Specify the label for the toggled state
- * @default "On"
- */
- labelB?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the checkbox input
- */
- name?: string;
- };
-}
-
-export class ToggleSmallSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
- };
-}
-
-export class Toolbar extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the toolbar size
- * @default "default"
- */
- size?: "sm" | "default";
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ToolbarBatchActions extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Override the total items selected text
- */
- formatTotalSelected?: (totalSelected: number) => string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ToolbarContent extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class ToolbarMenu extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class ToolbarMenuItem extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class ToolbarSearch extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the value of the search input
- * @default ""
- */
- value?: string;
-
- /**
- * Set to `true` to expand the search bar
- * @default false
- */
- expanded?: boolean;
-
- /**
- * Set to `true` to keep the search bar expanded
- * @default false
- */
- persistent?: boolean;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class Tooltip extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the direction of the tooltip relative to the button
- * @default "bottom"
- */
- direction?: "top" | "right" | "bottom" | "left";
-
- /**
- * Set to `true` to open the tooltip
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to hide the tooltip icon
- * @default false
- */
- hideIcon?: boolean;
-
- /**
- * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
- * Icon size must be 16px (e.g. `Add16`, `Task16`)
- */
- icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Specify the ARIA label for the tooltip button
- * @default ""
- */
- iconDescription?: string;
-
- /**
- * Specify the icon name attribute
- * @default ""
- */
- iconName?: string;
-
- /**
- * Set the button tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Set an id for the tooltip
- */
- tooltipId?: string;
-
- /**
- * Set an id for the tooltip button
- */
- triggerId?: string;
-
- /**
- * Set the tooltip button text
- * @default ""
- */
- triggerText?: string;
-
- /**
- * Obtain a reference to the trigger text HTML element
- * @default null
- */
- ref?: null | HTMLElement;
-
- /**
- * Obtain a reference to the tooltip HTML element
- * @default null
- */
- refTooltip?: null | HTMLElement;
-
- /**
- * Obtain a reference to the icon HTML element
- * @default null
- */
- refIcon?: null | HTMLElement;
- };
-
- $$slot_def: { triggerText: {}; icon: {}; default: {} };
-}
-
-export class TooltipDefinition extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the tooltip text
- * @default ""
- */
- tooltipText?: string;
-
- /**
- * Set the alignment of the tooltip relative to the icon
- * @default "center"
- */
- align?: "start" | "center" | "end";
-
- /**
- * Set the direction of the tooltip relative to the icon
- * @default "bottom"
- */
- direction?: "top" | "bottom";
-
- /**
- * Set an id for the tooltip div element
- */
- id?: string;
-
- /**
- * Obtain a reference to the button HTML element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { default: {}; tooltip: {} };
-}
-
-export class TooltipIcon extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the tooltip text
- * @default ""
- */
- tooltipText?: string;
-
- /**
- * Set the alignment of the tooltip relative to the icon
- * @default "center"
- */
- align?: "start" | "center" | "end";
-
- /**
- * Set the direction of the tooltip relative to the icon
- * @default "bottom"
- */
- direction?: "top" | "right" | "bottom" | "left";
-
- /**
- * Set an id for the span element
- */
- id?: string;
-
- /**
- * Obtain a reference to the button HTML element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class UnorderedList extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the nested variant
- * @default false
- */
- nested?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
+export { default as SkeletonText } from "./SkeletonText/SkeletonText";
+export { default as AccordionSkeleton } from "./Accordion/AccordionSkeleton";
+export { default as Accordion } from "./Accordion/Accordion";
+export { default as AccordionItem } from "./Accordion/AccordionItem";
+export { default as AspectRatio } from "./AspectRatio/AspectRatio";
+export { default as BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton";
+export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
+export { default as Link } from "./Link/Link";
+export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem";
+export { default as ButtonSkeleton } from "./Button/ButtonSkeleton";
+export { default as Button } from "./Button/Button";
+export { default as ButtonSet } from "./Button/ButtonSet";
+export { default as CheckboxSkeleton } from "./Checkbox/CheckboxSkeleton";
+export { default as Checkbox } from "./Checkbox/Checkbox";
+export { default as ContentSwitcher } from "./ContentSwitcher/ContentSwitcher";
+export { default as Switch } from "./ContentSwitcher/Switch";
+export { default as Copy } from "./Copy/Copy";
+export { default as CopyButton } from "./CopyButton/CopyButton";
+export { default as ListBox } from "./ListBox/ListBox";
+export { default as ListBoxField } from "./ListBox/ListBoxField";
+export { default as ListBoxMenu } from "./ListBox/ListBoxMenu";
+export { default as ListBoxMenuIcon } from "./ListBox/ListBoxMenuIcon";
+export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem";
+export { default as ListBoxSelection } from "./ListBox/ListBoxSelection";
+export { default as ComboBox } from "./ComboBox/ComboBox";
+export { default as ComposedModal } from "./ComposedModal/ComposedModal";
+export { default as ModalHeader } from "./ComposedModal/ModalHeader";
+export { default as ModalBody } from "./ComposedModal/ModalBody";
+export { default as ModalFooter } from "./ComposedModal/ModalFooter";
+export { default as CodeSnippetSkeleton } from "./CodeSnippet/CodeSnippetSkeleton";
+export { default as CodeSnippet } from "./CodeSnippet/CodeSnippet";
+export { default as RadioButton } from "./RadioButton/RadioButton";
+export { default as RadioButtonSkeleton } from "./RadioButton/RadioButtonSkeleton";
+export { default as Table } from "./DataTable/Table";
+export { default as TableBody } from "./DataTable/TableBody";
+export { default as TableCell } from "./DataTable/TableCell";
+export { default as TableContainer } from "./DataTable/TableContainer";
+export { default as TableHead } from "./DataTable/TableHead";
+export { default as TableHeader } from "./DataTable/TableHeader";
+export { default as TableRow } from "./DataTable/TableRow";
+export { default as DataTable } from "./DataTable/DataTable";
+export { default as Toolbar } from "./DataTable/Toolbar";
+export { default as ToolbarContent } from "./DataTable/ToolbarContent";
+export { default as SearchSkeleton } from "./Search/SearchSkeleton";
+export { default as Search } from "./Search/Search";
+export { default as ToolbarSearch } from "./DataTable/ToolbarSearch";
+export { default as ToolbarBatchActions } from "./DataTable/ToolbarBatchActions";
+export { default as OverflowMenu } from "./OverflowMenu/OverflowMenu";
+export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem";
+export { default as ToolbarMenu } from "./DataTable/ToolbarMenu";
+export { default as ToolbarMenuItem } from "./DataTable/ToolbarMenuItem";
+export { default as DataTableSkeleton } from "./DataTableSkeleton/DataTableSkeleton";
+export { default as DatePicker } from "./DatePicker/DatePicker";
+export { default as DatePickerInput } from "./DatePicker/DatePickerInput";
+export { default as DatePickerSkeleton } from "./DatePicker/DatePickerSkeleton";
+export { default as Dropdown } from "./Dropdown/Dropdown";
+export { default as DropdownSkeleton } from "./Dropdown/DropdownSkeleton";
+export { default as Loading } from "./Loading/Loading";
+export { default as Filename } from "./FileUploader/Filename";
+export { default as FileUploaderButton } from "./FileUploader/FileUploaderButton";
+export { default as FileUploader } from "./FileUploader/FileUploader";
+export { default as FileUploaderItem } from "./FileUploader/FileUploaderItem";
+export { default as FileUploaderDropContainer } from "./FileUploader/FileUploaderDropContainer";
+export { default as FileUploaderSkeleton } from "./FileUploader/FileUploaderSkeleton";
+export { default as Form } from "./Form/Form";
+export { default as FluidForm } from "./FluidForm/FluidForm";
+export { default as FormGroup } from "./FormGroup/FormGroup";
+export { default as FormItem } from "./FormItem/FormItem";
+export { default as FormLabel } from "./FormLabel/FormLabel";
+export { default as Grid } from "./Grid/Grid";
+export { default as Row } from "./Grid/Row";
+export { default as Column } from "./Grid/Column";
+export { default as IconSkeleton } from "./Icon/IconSkeleton";
+export { default as Icon } from "./Icon/Icon";
+export { default as InlineLoading } from "./InlineLoading/InlineLoading";
+export { default as ListItem } from "./ListItem/ListItem";
+export { default as MultiSelect } from "./MultiSelect/MultiSelect";
+export { default as Modal } from "./Modal/Modal";
+export { default as NotificationButton } from "./Notification/NotificationButton";
+export { default as NotificationIcon } from "./Notification/NotificationIcon";
+export { default as NotificationTextDetails } from "./Notification/NotificationTextDetails";
+export { default as ToastNotification } from "./Notification/ToastNotification";
+export { default as InlineNotification } from "./Notification/InlineNotification";
+export { default as NotificationActionButton } from "./Notification/NotificationActionButton";
+export { default as NumberInput } from "./NumberInput/NumberInput";
+export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton";
+export { default as OrderedList } from "./OrderedList/OrderedList";
+export { default as Select } from "./Select/Select";
+export { default as SelectSkeleton } from "./Select/SelectSkeleton";
+export { default as SelectItem } from "./Select/SelectItem";
+export { default as SelectItemGroup } from "./Select/SelectItemGroup";
+export { default as Pagination } from "./Pagination/Pagination";
+export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
+export { default as PaginationNav } from "./PaginationNav/PaginationNav";
+export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator";
+export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
+export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
+export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup";
+export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder";
+export { default as Slider } from "./Slider/Slider";
+export { default as SliderSkeleton } from "./Slider/SliderSkeleton";
+export { default as StructuredList } from "./StructuredList/StructuredList";
+export { default as StructuredListSkeleton } from "./StructuredList/StructuredListSkeleton";
+export { default as StructuredListBody } from "./StructuredList/StructuredListBody";
+export { default as StructuredListHead } from "./StructuredList/StructuredListHead";
+export { default as StructuredListCell } from "./StructuredList/StructuredListCell";
+export { default as StructuredListRow } from "./StructuredList/StructuredListRow";
+export { default as StructuredListInput } from "./StructuredList/StructuredListInput";
+export { default as Tabs } from "./Tabs/Tabs";
+export { default as Tab } from "./Tabs/Tab";
+export { default as TabContent } from "./Tabs/TabContent";
+export { default as TabsSkeleton } from "./Tabs/TabsSkeleton";
+export { default as TagSkeleton } from "./Tag/TagSkeleton";
+export { default as Tag } from "./Tag/Tag";
+export { default as TextArea } from "./TextArea/TextArea";
+export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton";
+export { default as TextInput } from "./TextInput/TextInput";
+export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton";
+export { default as PasswordInput } from "./TextInput/PasswordInput";
+export { default as Tile } from "./Tile/Tile";
+export { default as ClickableTile } from "./Tile/ClickableTile";
+export { default as ExpandableTile } from "./Tile/ExpandableTile";
+export { default as SelectableTile } from "./Tile/SelectableTile";
+export { default as RadioTile } from "./Tile/RadioTile";
+export { default as TileGroup } from "./Tile/TileGroup";
+export { default as TimePicker } from "./TimePicker/TimePicker";
+export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect";
+export { default as Toggle } from "./Toggle/Toggle";
+export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton";
+export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall";
+export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton";
+export { default as Tooltip } from "./Tooltip/Tooltip";
+export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
+export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
+export { default as Header } from "./UIShell/GlobalHeader/Header";
+export { default as HeaderAction } from "./UIShell/GlobalHeader/HeaderAction";
+export { default as HeaderActionLink } from "./UIShell/GlobalHeader/HeaderActionLink";
+export { default as HeaderActionSearch } from "./UIShell/GlobalHeader/HeaderActionSearch";
+export { default as HeaderNav } from "./UIShell/GlobalHeader/HeaderNav";
+export { default as HeaderNavItem } from "./UIShell/GlobalHeader/HeaderNavItem";
+export { default as HeaderNavMenu } from "./UIShell/GlobalHeader/HeaderNavMenu";
+export { default as HeaderPanelDivider } from "./UIShell/GlobalHeader/HeaderPanelDivider";
+export { default as HeaderPanelLink } from "./UIShell/GlobalHeader/HeaderPanelLink";
+export { default as HeaderPanelLinks } from "./UIShell/GlobalHeader/HeaderPanelLinks";
+export { default as HeaderUtilities } from "./UIShell/GlobalHeader/HeaderUtilities";
+export { default as SideNav } from "./UIShell/SideNav/SideNav";
+export { default as SideNavItems } from "./UIShell/SideNav/SideNavItems";
+export { default as SideNavLink } from "./UIShell/SideNav/SideNavLink";
+export { default as SideNavMenu } from "./UIShell/SideNav/SideNavMenu";
+export { default as SideNavMenuItem } from "./UIShell/SideNav/SideNavMenuItem";
+export { default as Content } from "./UIShell/Content";
+export { default as SkipToContent } from "./UIShell/SkipToContent";
+export { default as HeaderGlobalAction } from "./UIShell/HeaderGlobalAction";
+export { default as UnorderedList } from "./UnorderedList/UnorderedList";
diff --git a/yarn.lock b/yarn.lock
index c7ddfb32..daaa802f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -120,6 +120,11 @@
resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+"@types/pug@^2.0.4":
+ version "2.0.4"
+ resolved "https://registry.npmjs.org/@types/pug/-/pug-2.0.4.tgz#8772fcd0418e3cd2cc171555d73007415051f4b2"
+ integrity sha1-h3L80EGOPNLMFxVV1zAHQVBR9LI=
+
"@types/resolve@1.17.1":
version "1.17.1"
resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -127,6 +132,13 @@
dependencies:
"@types/node" "*"
+"@types/sass@^1.16.0":
+ version "1.16.0"
+ resolved "https://registry.npmjs.org/@types/sass/-/sass-1.16.0.tgz#b41ac1c17fa68ffb57d43e2360486ef526b3d57d"
+ integrity sha512-2XZovu4NwcqmtZtsBR5XYLw18T8cBCnU2USFHTnYLLHz9fkhnoEMoDsqShJIOFsFhn5aJHjweiUUdTrDGujegA==
+ dependencies:
+ "@types/node" "*"
+
abbrev@1:
version "1.1.1"
resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -207,6 +219,14 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
"@types/color-name" "^1.1.1"
color-convert "^2.0.1"
+anymatch@~3.1.1:
+ version "3.1.1"
+ resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+ integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
aproba@^1.0.3:
version "1.2.0"
resolved "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -271,6 +291,11 @@ asynckit@^0.4.0:
resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+at-least-node@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+ integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
autoprefixer@^9.8.6:
version "9.8.6"
resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -311,6 +336,11 @@ big.js@^5.2.2:
resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+binary-extensions@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+ integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
block-stream@*:
version "0.0.9"
resolved "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -326,7 +356,7 @@ brace-expansion@^1.1.7:
balanced-match "^1.0.0"
concat-map "0.0.1"
-braces@^3.0.1:
+braces@^3.0.1, braces@~3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -395,10 +425,10 @@ caniuse-lite@^1.0.30001109:
lodash.debounce "^4.0.8"
warning "^3.0.0"
-carbon-icons-svelte@^10.17.0:
- version "10.17.0"
- resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45"
- integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q==
+carbon-icons-svelte@^10.21.0:
+ version "10.21.0"
+ resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
+ integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
caseless@~0.12.0:
version "0.12.0"
@@ -433,6 +463,21 @@ chalk@^4.0.0, chalk@^4.1.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
+chokidar@^3.4.1:
+ version "3.4.3"
+ resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+ integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+ dependencies:
+ anymatch "~3.1.1"
+ braces "~3.0.2"
+ glob-parent "~5.1.0"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.5.0"
+ optionalDependencies:
+ fsevents "~2.1.2"
+
ci-info@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -656,6 +701,11 @@ delegates@^1.0.0:
resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+detect-indent@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
+ integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
+
ecc-jsbn@~0.1.1:
version "0.1.2"
resolved "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -927,6 +977,16 @@ fs-extra@^8.1.0:
jsonfile "^4.0.0"
universalify "^0.1.0"
+fs-extra@^9.0.1:
+ version "9.0.1"
+ resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+ integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
+ dependencies:
+ at-least-node "^1.0.0"
+ graceful-fs "^4.2.0"
+ jsonfile "^6.0.1"
+ universalify "^1.0.0"
+
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1015,6 +1075,13 @@ gh-pages@^3.1.0:
fs-extra "^8.1.0"
globby "^6.1.0"
+glob-parent@~5.1.0:
+ version "5.1.1"
+ resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+ integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+ dependencies:
+ is-glob "^4.0.1"
+
glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.6, glob@~7.1.1:
version "7.1.6"
resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -1190,6 +1257,13 @@ is-arrayish@^0.3.1:
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+is-binary-path@~2.1.0:
+ version "2.1.0"
+ resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+ integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+ dependencies:
+ binary-extensions "^2.0.0"
+
is-callable@^1.1.4, is-callable@^1.2.2:
version "1.2.2"
resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
@@ -1200,6 +1274,11 @@ is-date-object@^1.0.1:
resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
+is-extglob@^2.1.1:
+ version "2.1.1"
+ resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+ integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
is-finite@^1.0.0:
version "1.1.0"
resolved "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
@@ -1222,6 +1301,13 @@ is-fullwidth-code-point@^3.0.0:
resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+is-glob@^4.0.1, is-glob@~4.0.1:
+ version "4.0.1"
+ resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+ integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+ dependencies:
+ is-extglob "^2.1.1"
+
is-module@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -1361,6 +1447,15 @@ jsonfile@^4.0.0:
optionalDependencies:
graceful-fs "^4.1.6"
+jsonfile@^6.0.1:
+ version "6.1.0"
+ resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+ integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+ dependencies:
+ universalify "^2.0.0"
+ optionalDependencies:
+ graceful-fs "^4.1.6"
+
jsprim@^1.2.2:
version "1.4.1"
resolved "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -1581,6 +1676,11 @@ mimic-fn@^2.1.0:
resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+min-indent@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+ integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
minimatch@^3.0.4, minimatch@~3.0.2:
version "3.0.4"
resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -1678,7 +1778,7 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
semver "2 || 3 || 4 || 5"
validate-npm-package-license "^3.0.1"
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -1935,7 +2035,7 @@ performance-now@^2.1.0:
resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-picomatch@^2.0.5, picomatch@^2.2.2:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
version "2.2.2"
resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -2097,6 +2197,13 @@ readable-stream@^2.0.1, readable-stream@^2.0.6:
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
+readdirp@~3.5.0:
+ version "3.5.0"
+ resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+ integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+ dependencies:
+ picomatch "^2.2.1"
+
redent@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -2180,10 +2287,10 @@ rimraf@2:
dependencies:
glob "^7.1.3"
-rollup-plugin-svelte@^6.1.0:
- version "6.1.0"
- resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.0.tgz#bba94a37796fac1f73528161e84cc4976df431e1"
- integrity sha512-TX1nIZSD6ePiSdYIEfpkvR7lLnP1nsSycCVz+vXbm5d5kIe5WMldo6fwcL/T8KPjc42XDgLaRcS74BorpQvpiA==
+rollup-plugin-svelte@^6.1.1:
+ version "6.1.1"
+ resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz#66362cf0500fb7a848283ebcf19d289a60ef0871"
+ integrity sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==
dependencies:
require-relative "^0.8.7"
rollup-pluginutils "^2.8.2"
@@ -2206,10 +2313,10 @@ rollup-pluginutils@^2.8.2:
dependencies:
estree-walker "^0.6.1"
-rollup@^2.32.1:
- version "2.32.1"
- resolved "https://registry.npmjs.org/rollup/-/rollup-2.32.1.tgz#625a92c54f5b4d28ada12d618641491d4dbb548c"
- integrity sha512-Op2vWTpvK7t6/Qnm1TTh7VjEZZkN8RWgf0DHbkKzQBwNf748YhXbozHVefqpPp/Fuyk/PQPAnYsBxAEtlMvpUw==
+rollup@^2.33.3:
+ version "2.33.3"
+ resolved "https://registry.npmjs.org/rollup/-/rollup-2.33.3.tgz#ae72ce31f992b09a580072951bfea76e9df17342"
+ integrity sha512-RpayhPTe4Gu/uFGCmk7Gp5Z9Qic2VsqZ040G+KZZvsZYdcuWaJg678JeDJJvJeEQXminu24a2au+y92CUWVd+w==
optionalDependencies:
fsevents "~2.1.2"
@@ -2381,6 +2488,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+source-map@^0.7.3:
+ version "0.7.3"
+ resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+ integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
version "1.4.8"
resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -2571,6 +2683,13 @@ strip-indent@^1.0.1:
dependencies:
get-stdin "^4.0.1"
+strip-indent@^3.0.0:
+ version "3.0.0"
+ resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+ integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+ dependencies:
+ min-indent "^1.0.0"
+
strip-outer@^1.0.0:
version "1.0.1"
resolved "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631"
@@ -2609,6 +2728,33 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
+sveld@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.npmjs.org/sveld/-/sveld-0.2.1.tgz#3294ba51d18905e260546d6ca088ceda015dcbb2"
+ integrity sha512-NEEXxKaOWt0JBXrxnpG/TNVzCUadW65YEyD3l/49IV9xo7/5Jkrm7At8wGPNFSYGlC6564tmP8NBhFQH/0mzBg==
+ dependencies:
+ "@rollup/plugin-node-resolve" "^10.0.0"
+ comment-parser "^0.7.6"
+ fs-extra "^9.0.1"
+ prettier "^2.1.2"
+ rollup "^2.33.3"
+ rollup-plugin-svelte "^6.1.1"
+ svelte "^3.29.7"
+
+svelte-check@^1.1.14:
+ version "1.1.14"
+ resolved "https://registry.npmjs.org/svelte-check/-/svelte-check-1.1.14.tgz#e6d94607b8d2e2e8738fbef39fe2f540f09a12b7"
+ integrity sha512-Vx/Nfesn29sRTsc7DJ9bAoTWT+gA+6ZWSiC+G+FMjWac2NP0CpNXdD0tjVvlztZY7HZNxya6D/QyNtCGFC9K6Q==
+ dependencies:
+ chalk "^4.0.0"
+ chokidar "^3.4.1"
+ glob "^7.1.6"
+ import-fresh "^3.2.1"
+ minimist "^1.2.5"
+ source-map "^0.7.3"
+ svelte-preprocess "^4.0.0"
+ typescript "*"
+
svelte-dev-helper@^1.1.9:
version "1.1.9"
resolved "https://registry.npmjs.org/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
@@ -2622,10 +2768,20 @@ svelte-loader@^2.13.6:
loader-utils "^1.1.0"
svelte-dev-helper "^1.1.9"
-svelte@^3.29.4:
- version "3.29.4"
- resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.4.tgz#d0f80cb58109ef52963855c23496f7153bb2eb7e"
- integrity sha512-oW0fGHlyFFMvzRtIvOs84b0fOc0gmZNQcL5Is3hxuTpvaYX3pfd8oHy4KnOvbq4Ca6SG6AHdRMk7OhApTo0NqA==
+svelte-preprocess@^4.0.0:
+ version "4.5.2"
+ resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9"
+ integrity sha512-ClUX5NecnGBwI+nJnnBvKKy0XutCq5uHTIKe6cPhpvuOj9AAnyvef9wOZAE93yr85OKPutGCNIJa/X1TrJ7O0Q==
+ dependencies:
+ "@types/pug" "^2.0.4"
+ "@types/sass" "^1.16.0"
+ detect-indent "^6.0.0"
+ strip-indent "^3.0.0"
+
+svelte@^3.29.7:
+ version "3.29.7"
+ resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d"
+ integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A==
tar@^2.0.0:
version "2.2.2"
@@ -2706,7 +2862,7 @@ type-fest@^0.11.0:
resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
-typescript@^4.0.5:
+typescript@*, typescript@^4.0.5:
version "4.0.5"
resolved "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
@@ -2716,6 +2872,16 @@ universalify@^0.1.0:
resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+universalify@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+ integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
+universalify@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+ integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
uri-js@^4.2.2:
version "4.2.2"
resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
|
+ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
+
+
+ Natural Language Classifier
+AI / Machine Learning
+ + Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
+
+
+ Natural Language Understanding
+AI / Machine Learning
+ + Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
+
+
+ Language Translator
+AI / Machine Learning
+ + Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
++ Natural Language Classifier uses advanced natural language processing and + machine learning techniques to create custom classification models. Users + train their data and the service predicts the appropriate category for the + inputted text. +
++ Analyze text to extract meta-data from content such as concepts, entities, + emotion, relations, sentiment and more. +
++ Translate text, documents, and websites from one language to another. + Create industry or region-specific translations via the service's + customization capability. +
+
+
+
+
+ This is a permanent action and cannot be undone.
+
+
+
+ {JSON.stringify(row, null, 2)}
+
+
+
+
+ {JSON.stringify(row, null, 2)}
+
+ Above the fold content here
+ Below the fold content here
+Above the fold content here
+ Below the fold content here
+Above the fold content here
+ Below the fold content here
+
+
+
+ Welcome
+
+
+ Welcome
+
+
+ Welcome
+"Show more" will not render
+{/if} +
+
+
+{#if toggled}
+ +
"Show more" will render
+
+
+{/if}
diff --git a/tests/Icon.test.svelte b/tests/Icon.test.svelte
new file mode 100644
index 00000000..a666056e
--- /dev/null
+++ b/tests/Icon.test.svelte
@@ -0,0 +1,23 @@
+
+
+
+ Learn more
+
+Create a new Cloudant database in the US South region.
+Create a new Cloudant database in the US South region.
+Create a new Cloudant database in the US South region.
+Create a new Cloudant database in the US South region.
+Create a new Cloudant database in the US South region.
+Custom trigger
+ + IBM Cloudant is a distributed, secure database with global availability and + zero vendor lock-in used to build web and mobile apps at scale. +
+
+
+
+ Welcome
+
+ Content 1
+ Content 2
+ Content 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+Resources are provisioned based on your account's organization.
+Resources are provisioned based on your account's organization.
+Top
+Right
+Bottom
+Left
+Resources are provisioned based on your account's organization.
+ +Resources are provisioned based on your account's organization.
+Resources are provisioned based on your account's organization.
+...
)
+ * @default "title"
+ */
+ title?: string;
+
+ /**
+ * Set to `true` to open the first accordion item
+ * @default false
+ */
+ open?: boolean;
+
+ /**
+ * Set to `true` to disable the accordion item
+ * @default false
+ */
+ disabled?: boolean;
+
+ /**
+ * Specify the ARIA label for the accordion item chevron icon
+ * @default "Expand/Collapse"
+ */
+ iconDescription?: string;
+}
+
+export default class AccordionItem {
+ $$prop_def: AccordionItemProps;
+ $$slot_def: {
+ default: {};
+ title: {};
+ };
+
+ $on(eventname: "animationend", cb: (event: WindowEventMap["animationend"]) => void): () => void;
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
+ $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
+ $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
+ $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
+ $on(eventname: string, cb: (event: Event) => void): () => void;
+}
diff --git a/types/Accordion/AccordionSkeleton.d.ts b/types/Accordion/AccordionSkeleton.d.ts
new file mode 100644
index 00000000..0d05c96a
--- /dev/null
+++ b/types/Accordion/AccordionSkeleton.d.ts
@@ -0,0 +1,37 @@
+/// ...
)
+ */
+ text?: string;
+
+ /**
+ * Obtain a reference to the button HTML element
+ * @default null
+ */
+ ref?: null | HTMLButtonElement;
+}
+
+export default class HeaderAction {
+ $$prop_def: HeaderActionProps;
+ $$slot_def: {
+ default: {};
+ text: {};
+ };
+
+ $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
+ $on(eventname: "close", cb: (event: CustomEvent...
)
- * @default "title"
- */
- title?: string;
-
- /**
- * Set to `true` to open the first accordion item
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to disable the accordion item
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the ARIA label for the accordion item chevron icon
- * @default "Expand/Collapse"
- */
- iconDescription?: string;
- };
-
- $$slot_def: { title: {}; default: {} };
-}
-
-export class AccordionSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the number of accordion items to render
- * @default 4
- */
- count?: number;
-
- /**
- * Specify alignment of accordion item chevron icon
- * @default "end"
- */
- align?: "start" | "end";
-
- /**
- * Specify the size of the accordion
- */
- size?: "sm" | "xl";
-
- /**
- * Set to `false` to close the first accordion item
- * @default true
- */
- open?: boolean;
- };
-}
-
-export class AspectRatio extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the aspect ratio
- * @default "2x1"
- */
- ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Breadcrumb extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the breadcrumb trailing slash
- * @default false
- */
- noTrailingSlash?: boolean;
-
- /**
- * Set to `true` to display skeleton state
- * @default false
- */
- skeleton?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class BreadcrumbItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the `href` to use an anchor link
- */
- href?: string;
-
- /**
- * Set to `true` if the breadcrumb item represents the current page
- * @default false
- */
- isCurrentPage?: boolean;
- };
-
- $$slot_def: { default: { props: any } };
-}
-
-export class BreadcrumbSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the breadcrumb trailing slash
- * @default false
- */
- noTrailingSlash?: boolean;
-
- /**
- * Specify the number of breadcrumb items to render
- * @default 3
- */
- count?: number;
- };
-}
-
-export class Button extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the kind of button
- * @default "primary"
- */
- kind?:
- | "primary"
- | "secondary"
- | "tertiary"
- | "ghost"
- | "danger"
- | "danger-tertiary"
- | "danger-ghost";
-
- /**
- * Specify the size of button
- * @default "default"
- */
- size?: "default" | "field" | "small";
-
- /**
- * Set to `true` for the icon-only variant
- * @default false
- */
- hasIconOnly?: boolean;
-
- /**
- * Specify the icon from `carbon-icons-svelte` to render
- */
- icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Specify the ARIA label for the button icon
- */
- iconDescription?: string;
-
- /**
- * Set the alignment of the tooltip relative to the icon
- * `hasIconOnly` must be set to `true`
- */
- tooltipAlignment?: "start" | "center" | "end";
-
- /**
- * Set the position of the tooltip relative to the icon
- */
- tooltipPosition?: "top" | "right" | "bottom" | "left";
-
- /**
- * Set to `true` to render a custom HTML element
- * Props are destructured as `props` in the default slot (e.g. )
- * @default false
- */
- as?: boolean;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
-
- /**
- * Set to `true` to disable the button
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set the `href` to use an anchor link
- */
- href?: string;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Specify the `type` attribute for the button element
- * @default "button"
- */
- type?: string;
-
- /**
- * Obtain a reference to the HTML element
- * @default null
- */
- ref?: null | HTMLAnchorElement | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ButtonSet extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to stack the buttons vertically
- * @default false
- */
- stacked?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ButtonSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the `href` to use an anchor link
- */
- href?: string;
-
- /**
- * Specify the size of button skeleton
- * @default "default"
- */
- size?: "default" | "field" | "small";
-
- /**
- * Set to `true` to use the small variant
- * @default false
- */
- small?: boolean;
- };
-}
-
-export class Checkbox extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify whether the checkbox is checked
- * @default false
- */
- checked?: boolean;
-
- /**
- * Specify whether the checkbox is indeterminate
- * @default false
- */
- indeterminate?: boolean;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
-
- /**
- * Set to `true` for the checkbox to be read-only
- * @default false
- */
- readonly?: boolean;
-
- /**
- * Set to `true` to disable the checkbox
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set a name for the input element
- * @default ""
- */
- name?: string;
-
- /**
- * Specify the title attribute for the label element
- */
- title?: string;
-
- /**
- * Set an id for the input label
- */
- id?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class CheckboxSkeleton extends CarbonSvelteComponent {}
-
-export class ClickableTile extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to click the tile
- * @default false
- */
- clicked?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set the `href`
- */
- href?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class CodeSnippet extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of code snippet
- * @default "single"
- */
- type?: "single" | "inline" | "multi";
-
- /**
- * Set the code snippet text
- * Alternatively, use the default slot (e.g. ...
)
- */
- text?: string;
-
- /**
- * Obtain a reference to the button HTML element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { text: {}; default: {} };
-}
-
-export class HeaderActionLink extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the active state
- * @default false
- */
- linkIsActive?: boolean;
-
- /**
- * Specify the `href` attribute
- */
- href?: string;
-
- /**
- * Specify the icon props
- */
- icon?: {
- render: typeof import("carbon-icons-svelte/lib/Add16").default;
- skeleton: boolean;
- };
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-}
-
-export class HeaderActionSearch extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to focus the search
- * @default false
- */
- searchIsActive?: boolean;
- };
-}
-
-export class HeaderGlobalAction extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the active variant
- * @default false
- */
- isActive?: boolean;
-
- /**
- * Specify the icon to render
- */
- icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Obtain a reference to the HTML button element
- * @default null
- */
- ref?: null | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class HeaderNav extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the ARIA label for the nav
- */
- ariaLabel?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class HeaderNavItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the `href` attribute
- */
- href?: string;
-
- /**
- * Specify the text
- */
- text?: string;
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-}
-
-export class HeaderNavMenu extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to toggle the expanded state
- * @default false
- */
- expanded?: boolean;
-
- /**
- * Specify the `href` attribute
- * @default "/"
- */
- href?: string;
-
- /**
- * Specify the text
- */
- text?: string;
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
-
- /**
- * Specify the ARIA label for the chevron icon
- * @default "Expand/Collapse"
- */
- iconDescription?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class HeaderPanelDivider extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class HeaderPanelLink extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the `href` attribute
- */
- href?: string;
-
- /**
- * Obtain a reference to the HTML anchor element
- * @default null
- */
- ref?: null | HTMLAnchorElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class HeaderPanelLinks extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class HeaderUtilities extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class Icon extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the icon from `carbon-icons-svelte` to render
- * Icon size must be 16px (e.g. `Add16`, `Task16`)
- */
- render?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Set to `true` to display the skeleton state
- * @default false
- */
- skeleton?: boolean;
- };
-}
-
-export class IconSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the icon
- * @default 16
- */
- size?: number;
- };
-}
-
-export class InlineLoading extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the loading status
- * @default "active"
- */
- status?: "active" | "inactive" | "finished" | "error";
-
- /**
- * Set the loading description
- */
- description?: string;
-
- /**
- * Specify the ARIA label for the loading icon
- */
- iconDescription?: string;
-
- /**
- * Specify the timeout delay (ms) after `status` is set to "success"
- * @default 1500
- */
- successDelay?: number;
- };
-}
-
-export class InlineNotification extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of notification
- * @default "inline"
- */
- notificationType?: "toast" | "inline";
-
- /**
- * Specify the kind of notification
- * @default "error"
- */
- kind?:
- | "error"
- | "info"
- | "info-square"
- | "success"
- | "warning"
- | "warning-alt";
-
- /**
- * Set to `true` to use the low contrast variant
- * @default false
- */
- lowContrast?: boolean;
-
- /**
- * Set the timeout duration (ms) to hide the notification after opening it
- * @default 0
- */
- timeout?: number;
-
- /**
- * Set the `role` attribute
- * @default "alert"
- */
- role?: string;
-
- /**
- * Specify the title text
- * @default "Title"
- */
- title?: string;
-
- /**
- * Specify the subtitle text
- * @default ""
- */
- subtitle?: string;
-
- /**
- * Set to `true` to hide the close button
- * @default false
- */
- hideCloseButton?: boolean;
-
- /**
- * Specify the ARIA label for the icon
- * @default "Closes notification"
- */
- iconDescription?: string;
- };
-
- $$slot_def: { default: {}; actions: {} };
-}
-
-export class Link extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the size of the link
- */
- size?: "sm" | "lg";
-
- /**
- * Specify the href value
- */
- href?: string;
-
- /**
- * Set to `true` to use the inline variant
- * @default false
- */
- inline?: boolean;
-
- /**
- * Set to `true` to disable the checkbox
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to allow visited styles
- * @default false
- */
- visited?: boolean;
-
- /**
- * Obtain a reference to the top-level HTML element
- * @default null
- */
- ref?: null | HTMLAnchorElement | HTMLParagraphElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ListBox extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the list box
- */
- size?: "sm" | "xl";
-
- /**
- * Set the type of the list box
- * @default "default"
- */
- type?: "default" | "inline";
-
- /**
- * Set to `true` to open the list box
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the list box
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-type ListBoxFieldTranslationId = "close" | "open";
-
-export class ListBoxField extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to disable the list box field
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the role attribute
- * @default "combobox"
- */
- role?: string;
-
- /**
- * Specify the tabindex
- * @default "-1"
- */
- tabindex?: string;
-
- /**
- * Default translation ids
- * @constant
- * @default { close: "close", open: "open" }
- */
- translationIds?: { close: "close"; open: "open" };
-
- /**
- * Override the default translation ids
- */
- translateWithId?: (id: ListBoxFieldTranslationId) => string;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
-
- /**
- * Obtain a reference to the top-level HTML element
- * @default null
- */
- ref?: null | HTMLElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ListBoxMenu extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set an id for the top-level element
- */
- id?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLDivElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-type ListBoxMenuIconTranslationId = "close" | "open";
-
-export class ListBoxMenuIcon extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to open the list box menu icon
- * @default false
- */
- open?: boolean;
-
- /**
- * Default translation ids
- * @constant
- * @default { close: "close", open: "open" }
- */
- translationIds?: { close: "close"; open: "open" };
-
- /**
- * Override the default translation ids
- */
- translateWithId?: (id: ListBoxMenuIconTranslationId) => string;
- };
-}
-
-export class ListBoxMenuItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to enable the active state
- * @default false
- */
- active?: boolean;
-
- /**
- * Set to `true` to enable the highlighted state
- * @default false
- */
- highlighted?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
-
-export class ListBoxSelection extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the number of selected items
- */
- selectionCount?: any;
-
- /**
- * Set to `true` to disable the list box selection
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Default translation ids
- * @constant
- * @default { clearAll: "clearAll", clearSelection: "clearSelection", }
- */
- translationIds?: { clearAll: "clearAll"; clearSelection: "clearSelection" };
-
- /**
- * Override the default translation ids
- */
- translateWithId?: (id: ListBoxSelectionTranslationId) => string;
-
- /**
- * Obtain a reference to the top-level HTML element
- * @default null
- */
- ref?: null | HTMLElement;
- };
-}
-
-export class ListItem extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class Loading extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the small variant
- * @default false
- */
- small?: boolean;
-
- /**
- * Set to `false` to disable the active state
- * @default true
- */
- active?: boolean;
-
- /**
- * Set to `false` to disable the overlay
- * @default true
- */
- withOverlay?: boolean;
-
- /**
- * Specify the label description
- * @default "Active loading indicator"
- */
- description?: string;
-
- /**
- * Set an id for the label element
- */
- id?: string;
- };
-}
-
-export class Modal extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the modal
- */
- size?: "xs" | "sm" | "lg";
-
- /**
- * Set to `true` to open the modal
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to use the danger variant
- * @default false
- */
- danger?: boolean;
-
- /**
- * Set to `true` to enable alert mode
- * @default false
- */
- alert?: boolean;
-
- /**
- * Set to `true` to use the passive variant
- * @default false
- */
- passiveModal?: boolean;
-
- /**
- * Specify the modal heading
- */
- modalHeading?: string;
-
- /**
- * Specify the modal label
- */
- modalLabel?: string;
-
- /**
- * Specify the ARIA label for the modal
- */
- modalAriaLabel?: string;
-
- /**
- * Specify the ARIA label for the close icon
- * @default "Close the modal"
- */
- iconDescription?: string;
-
- /**
- * Set to `true` if the modal contains form elements
- * @default false
- */
- hasForm?: boolean;
-
- /**
- * Set to `true` if the modal contains scrolling content
- * @default false
- */
- hasScrollingContent?: boolean;
-
- /**
- * Specify the primary button text
- * @default ""
- */
- primaryButtonText?: string;
-
- /**
- * Set to `true` to disable the primary button
- * @default false
- */
- primaryButtonDisabled?: boolean;
-
- /**
- * Set to `true` for the primary button to be triggered when pressing "Enter"
- * @default true
- */
- shouldSubmitOnEnter?: boolean;
-
- /**
- * Specify the secondary button text
- * @default ""
- */
- secondaryButtonText?: string;
-
- /**
- * Specify a selector to be focused when opening the modal
- * @default "[data-modal-primary-focus]"
- */
- selectorPrimaryFocus?: string;
-
- /**
- * Set to `true` to prevent the modal from closing when clicking outside
- * @default false
- */
- preventCloseOnClickOutside?: boolean;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
-
- /**
- * Obtain a reference to the top-level HTML element
- * @default null
- */
- ref?: null | HTMLElement;
- };
-
- $$slot_def: { label: {}; heading: {}; default: {} };
-}
-
-export class ModalBody extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` if the modal contains form elements
- * @default false
- */
- hasForm?: boolean;
-
- /**
- * Set to `true` if the modal contains scrolling content
- * @default false
- */
- hasScrollingContent?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ModalFooter extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the primary button text
- * @default ""
- */
- primaryButtonText?: string;
-
- /**
- * Set to `true` to disable the primary button
- * @default false
- */
- primaryButtonDisabled?: boolean;
-
- /**
- * Specify a class for the primary button
- */
- primaryClass?: string;
-
- /**
- * Specify the secondary button text
- * @default ""
- */
- secondaryButtonText?: string;
-
- /**
- * Specify a class for the secondary button
- */
- secondaryClass?: string;
-
- /**
- * Set to `true` to use the danger variant
- * @default false
- */
- danger?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ModalHeader extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the modal title
- * @default ""
- */
- title?: string;
-
- /**
- * Specify the modal label
- * @default ""
- */
- label?: string;
-
- /**
- * Specify the label class
- * @default ""
- */
- labelClass?: string;
-
- /**
- * Specify the title class
- * @default ""
- */
- titleClass?: string;
-
- /**
- * Specify the close class
- * @default ""
- */
- closeClass?: string;
-
- /**
- * Specify the close icon class
- * @default ""
- */
- closeIconClass?: string;
-
- /**
- * Specify the ARIA label for the close icon
- * @default "Close"
- */
- iconDescription?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-type MultiSelectItemId = string;
-
-type MultiSelectItemText = string;
-
-interface MultiSelectItem {
- id: MultiSelectItemId;
- text: MultiSelectItemText;
-}
-
-export class MultiSelect extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the multiselect items
- * @default []
- */
- items?: MultiSelectItem[];
-
- /**
- * Override the display of a multiselect item
- */
- itemToString?: (item: MultiSelectItem) => string;
-
- /**
- * Set the selected ids
- * @default []
- */
- selectedIds?: MultiSelectItemId[];
-
- /**
- * Specify the multiselect value
- * @default ""
- */
- value?: string;
-
- /**
- * Set the size of the combobox
- */
- size?: "sm" | "lg" | "xl";
-
- /**
- * Specify the type of multiselect
- * @default "default"
- */
- type?: "default" | "inline";
-
- /**
- * Specify the selection feedback after selecting items
- * @default "top-after-reopen"
- */
- selectionFeedback?: "top" | "fixed" | "top-after-reopen";
-
- /**
- * Set to `true` to disable the dropdown
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to filter items
- * @default false
- */
- filterable?: boolean;
-
- /**
- * Override the filtering logic
- * The default filtering is an exact string comparison
- */
- filterItem?: (item: MultiSelectItem, value: string) => string;
-
- /**
- * Set to `true` to open the dropdown
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Specify the locale
- * @default "en"
- */
- locale?: string;
-
- /**
- * Specify the placeholder text
- * @default ""
- */
- placeholder?: string;
-
- /**
- * Override the sorting logic
- * The default sorting compare the item text value
- */
- sortItem?: (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;
-
- /**
- * Override the default translation ids
- */
- translateWithId?: (id: any) => string;
-
- /**
- * Specify the title text
- * @default ""
- */
- titleText?: string;
-
- /**
- * Set to `true` to pass the item to `itemToString` in the checkbox
- * @default false
- */
- useTitleInItem?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Specify the list box label
- * @default ""
- */
- label?: string;
-
- /**
- * Set an id for the list box component
- */
- id?: string;
-
- /**
- * Specify a name attribute for the select
- */
- name?: string;
- };
-}
-
-export class NotificationActionButton extends CarbonSvelteComponent {
- $$slot_def: { default: {} };
-}
-
-export class NotificationButton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of notification
- * @default "toast"
- */
- notificationType?: "toast" | "inline";
-
- /**
- * Specify the icon from `carbon-icons-svelte` to render
- */
- renderIcon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Specify the title of the icon
- */
- title?: string;
-
- /**
- * Specify the ARIA label for the icon
- * @default "Close icon"
- */
- iconDescription?: string;
- };
-}
-
-export class NotificationIcon extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the kind of notification icon
- * @default "error"
- */
- kind?:
- | "error"
- | "info"
- | "info-square"
- | "success"
- | "warning"
- | "warning-alt";
-
- /**
- * Set the type of notification
- * @default "toast"
- */
- notificationType?: "toast" | "inline";
-
- /**
- * Specify the ARIA label for the icon
- * @default "Closes notification"
- */
- iconDescription?: string;
- };
-}
-
-export class NotificationTextDetails extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the type of notification
- * @default "toast"
- */
- notificationType?: "toast" | "inline";
-
- /**
- * Specify the title text
- * @default "Title"
- */
- title?: string;
-
- /**
- * Specify the subtitle text
- * @default ""
- */
- subtitle?: string;
-
- /**
- * Specify the caption text
- * @default "Caption"
- */
- caption?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-type NumberInputTranslationId = "increment" | "decrement";
-
-export class NumberInput extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the input
- */
- size?: "sm" | "xl";
-
- /**
- * Specify the input value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the step increment
- * @default 1
- */
- step?: number;
-
- /**
- * Specify the maximum value
- */
- max?: number;
-
- /**
- * Specify the minimum value
- */
- min?: number;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` for the input to be read-only
- * @default false
- */
- readonly?: boolean;
-
- /**
- * Set to `true` to enable the mobile variant
- * @default false
- */
- mobile?: boolean;
-
- /**
- * Set to `true` to allow for an empty value
- * @default false
- */
- allowEmpty?: boolean;
-
- /**
- * Set to `true` to disable the input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the ARIA label for the increment icons
- * @default ""
- */
- iconDescription?: string;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the invalid state text
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- label?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Override the default translation ids
- */
- translateWithId?: (id: NumberInputTranslationId) => string;
-
- /**
- * Default translation ids
- * @constant
- * @default { increment: "increment", decrement: "decrement", }
- */
- translationIds?: { increment: "increment"; decrement: "decrement" };
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-
- $$slot_def: { label: {} };
-}
-
-export class NumberInputSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to hide the label text
- * @default false
- */
- hideLabel?: boolean;
- };
-}
-
-export class OrderedList extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the nested variant
- * @default false
- */
- nested?: boolean;
-
- /**
- * Set to `true` to use native list styles
- * @default false
- */
- native?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class OverflowMenu extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the size of the overflow menu
- */
- size?: "sm" | "xl";
-
- /**
- * Specify the direction of the overflow menu relative to the button
- * @default "bottom"
- */
- direction?: "top" | "bottom";
-
- /**
- * Set to `true` to open the menu
- * @default false
- */
- open?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to flip the menu relative to the button
- * @default false
- */
- flipped?: boolean;
-
- /**
- * Specify the menu options class
- */
- menuOptionsClass?: string;
-
- /**
- * Specify the icon from `carbon-icons-svelte` to render
- */
- icon?: typeof import("carbon-icons-svelte/lib/Add16").default;
-
- /**
- * Specify the icon class
- */
- iconClass?: string;
-
- /**
- * Specify the ARIA label for the icon
- * @default "Open and close list of options"
- */
- iconDescription?: string;
-
- /**
- * Set an id for the button element
- */
- id?: string;
-
- /**
- * Obtain a reference to the trigger button element
- * @default null
- */
- buttonRef?: null | HTMLButtonElement;
-
- /**
- * Obtain a reference to the overflow menu element
- * @default null
- */
- menuRef?: null | HTMLUListElement;
- };
-
- $$slot_def: { menu: {}; default: {} };
-}
-
-export class OverflowMenuItem extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the item text
- * Alternatively, use the default slot for a custom element
- * @default "Provide text"
- */
- text?: string;
-
- /**
- * Specify the `href` attribute if the item is a link
- * @default ""
- */
- href?: string;
-
- /**
- * Set to `true` if the item should be focused when opening the menu
- * @default false
- */
- primaryFocus?: boolean;
-
- /**
- * Set to `true` to disable the item
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to include a divider
- * @default false
- */
- hasDivider?: boolean;
-
- /**
- * Set to `true` to use the danger variant
- * @default false
- */
- danger?: boolean;
-
- /**
- * Set to `false` to omit the button `title` attribute
- * @default true
- */
- requireTitle?: boolean;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
-
- /**
- * Obtain a reference to the HTML element
- * @default null
- */
- ref?: null | HTMLAnchorElement | HTMLButtonElement;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Pagination extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the current page index
- * @default 1
- */
- page?: number;
-
- /**
- * Specify the total number of items
- * @default 0
- */
- totalItems?: number;
-
- /**
- * Set to `true` to disable the pagination
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the forward button text
- * @default "Next page"
- */
- forwardText?: string;
-
- /**
- * Specify the backward button text
- * @default "Previous page"
- */
- backwardText?: string;
-
- /**
- * Specify the items per page text
- * @default "Items per page:"
- */
- itemsPerPageText?: string;
-
- /**
- * Override the item text
- */
- itemText?: (min: number, max: number) => string;
-
- /**
- * Override the item range text
- */
- itemRangeText?: (min: number, max: number, total: number) => string;
-
- /**
- * Set to `true` to disable the page input
- * @default false
- */
- pageInputDisabled?: boolean;
-
- /**
- * Set to `true` to disable the page size input
- * @default false
- */
- pageSizeInputDisabled?: boolean;
-
- /**
- * Specify the number of items to display in a page
- * @default 10
- */
- pageSize?: number;
-
- /**
- * Specify the available page sizes
- * @default [10]
- */
- pageSizes?: number[];
-
- /**
- * Set to `true` if the number of pages is unknown
- * @default false
- */
- pagesUnknown?: boolean;
-
- /**
- * Override the page text
- */
- pageText?: (page: number) => string;
-
- /**
- * Override the page range text
- */
- pageRangeText?: (current: number, total: number) => string;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
- };
-}
-
-export class PaginationNav extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the current page index
- * @default 0
- */
- page?: number;
-
- /**
- * Specify the total number of pages
- * @default 10
- */
- total?: number;
-
- /**
- * Specify the total number of pages to show
- * @default 10
- */
- shown?: number;
-
- /**
- * Set to `true` to loop the navigation
- * @default false
- */
- loop?: boolean;
-
- /**
- * Specify the forward button text
- * @default "Next page"
- */
- forwardText?: string;
-
- /**
- * Specify the backward button text
- * @default "Previous page"
- */
- backwardText?: string;
- };
-}
-
-export class PaginationSkeleton extends CarbonSvelteComponent {}
-
-export class PasswordInput extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the size of the input
- */
- size?: "sm" | "xl";
-
- /**
- * Specify the input value
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the input type
- * @default "password"
- */
- type?: string;
-
- /**
- * Specify the placeholder text
- * @default ""
- */
- placeholder?: string;
-
- /**
- * Specify the hide password label text
- * @default "Hide password"
- */
- hidePasswordLabel?: string;
-
- /**
- * Specify the show password label text
- * @default "Show password"
- */
- showPasswordLabel?: string;
-
- /**
- * Set the alignment of the tooltip relative to the icon
- */
- tooltipAlignment?: "start" | "center" | "end";
-
- /**
- * Set the position of the tooltip relative to the icon
- */
- tooltipPosition?: "top" | "right" | "bottom" | "left";
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Set to `true` to disable the input
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the helper text
- * @default ""
- */
- helperText?: string;
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the text for the invalid state
- * @default ""
- */
- invalidText?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class ProgressIndicator extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the current step index
- * @default 0
- */
- currentIndex?: number;
-
- /**
- * Set to `true` to use the vertical variant
- * @default false
- */
- vertical?: boolean;
-
- /**
- * Set to `true` to specify whether the progress steps should be split equally in size in the div
- * @default false
- */
- spaceEqually?: boolean;
-
- /**
- * Set to `true` to prevent updating `currentIndex`
- * @default false
- */
- preventChangeOnClick?: boolean;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class ProgressIndicatorSkeleton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to use the vertical variant
- * @default false
- */
- vertical?: boolean;
-
- /**
- * Specify the number of steps to render
- * @default 4
- */
- count?: number;
- };
-}
-
-export class ProgressStep extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` for the complete variant
- * @default false
- */
- complete?: boolean;
-
- /**
- * Set to `true` to use the current variant
- * @default false
- */
- current?: boolean;
-
- /**
- * Set to `true` to disable the progress step
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Set to `true` to indicate an invalid state
- * @default false
- */
- invalid?: boolean;
-
- /**
- * Specify the step description
- * @default ""
- */
- description?: string;
-
- /**
- * Specify the step label
- * @default ""
- */
- label?: string;
-
- /**
- * Specify the step secondary label
- * @default ""
- */
- secondaryLabel?: string;
-
- /**
- * Set an id for the top-level element
- */
- id?: string;
- };
-
- $$slot_def: { default: { props: any } };
-}
-
-export class RadioButton extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Specify the value of the radio button
- * @default ""
- */
- value?: string;
-
- /**
- * Set to `true` to check the radio button
- * @default false
- */
- checked?: boolean;
-
- /**
- * Set to `true` to disable the radio button
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label position
- * @default "right"
- */
- labelPosition?: "right" | "left";
-
- /**
- * Specify the label text
- * @default ""
- */
- labelText?: string;
-
- /**
- * Set to `true` to visually hide the label text
- * @default false
- */
- hideLabel?: boolean;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the checkbox input
- * @default ""
- */
- name?: string;
-
- /**
- * Obtain a reference to the input HTML element
- * @default null
- */
- ref?: null | HTMLInputElement;
- };
-}
-
-export class RadioButtonGroup extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set the selected radio button value
- */
- selected?: string;
-
- /**
- * Set to `true` to disable the radio buttons
- * @default false
- */
- disabled?: boolean;
-
- /**
- * Specify the label position
- * @default "right"
- */
- labelPosition?: "right" | "left";
-
- /**
- * Specify the orientation of the radio buttons
- * @default "horizontal"
- */
- orientation?: "horizontal" | "vertical";
-
- /**
- * Set an id for the container div element
- */
- id?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class RadioButtonSkeleton extends CarbonSvelteComponent {}
-
-export class RadioTile extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to check the tile
- * @default false
- */
- checked?: boolean;
-
- /**
- * Set to `true` to enable the light variant
- * @default false
- */
- light?: boolean;
-
- /**
- * Specify the value of the radio input
- * @default ""
- */
- value?: string;
-
- /**
- * Specify the tabindex
- * @default "0"
- */
- tabindex?: string;
-
- /**
- * Specify the ARIA label for the radio tile checkmark icon
- * @default "Tile checkmark"
- */
- iconDescription?: string;
-
- /**
- * Set an id for the input element
- */
- id?: string;
-
- /**
- * Specify a name attribute for the input
- * @default ""
- */
- name?: string;
- };
-
- $$slot_def: { default: {} };
-}
-
-export class Row extends CarbonSvelteComponent {
- $$prop_def: {
- /**
- * Set to `true` to render a custom HTML element
- * Props are destructured as `props` in the default slot (e.g.