Merge pull request #385 from IBM/rewrite-tyepscript-definitions

refactor(types): rewrite component TypeScript definitions

.travis.yml

@@ -1,4 +1,6 @@
 language: node_js
 node_js: 12
 cache: yarn
-script: yarn prepack
+script:
+  - yarn check-types
+  - yarn prepack

docs/src/components/ComponentApi.svelte

@@ -2,8 +2,8 @@
   export let component = {
     props: [],
     slots: [],
-    forwarded_events: [],
+    events: [],
-    dispatched_events: [],
+    rest_props: undefined,
   };
 
   import {
@@ -16,6 +16,7 @@
     TooltipDefinition,
     UnorderedList,
     ListItem,
+    Tag,
   } from "carbon-components-svelte";
   import InlineSnippet from "./InlineSnippet.svelte";
   import Launch16 from "carbon-icons-svelte/lib/Launch16";
@@ -28,6 +29,14 @@
     null: "null",
     Date: "JavaScript Date",
   };
+
+  $: source = `https://github.com/IBM/carbon-components-svelte/tree/master${component.filePath}`;
+  $: forwarded_events = component.events.filter(
+    (event) => event.type === "forwarded"
+  );
+  $: dispatched_events = component.events.filter(
+    (event) => event.type === "dispatched"
+  );
 </script>
 
 <style>
@@ -53,6 +62,14 @@
   }
 </style>
 
+<p style="margin-bottom: var(--cds-layout-02)">
+  Component source code:
+  <Link size="lg" href="{source}" target="_blank">
+    {component.filePath}
+    <Launch16 />
+  </Link>
+</p>
+
 <h3 id="props">Props</h3>
 
 {#if component.props.length > 0}
@@ -69,16 +86,18 @@
         </StructuredListRow>
       </StructuredListHead>
       <StructuredListBody>
-        {#each component.props as prop}
+        {#each component.props.sort((a, b) => {
+          if (a.reactive > b.reactive) return -1;
+        }) as prop (prop.name)}
           <StructuredListRow>
             <StructuredListCell noWrap>
-              <InlineSnippet code="{prop[0]}" />
+              <InlineSnippet code="{prop.name}" />
             </StructuredListCell>
             <StructuredListCell>
-              {#each prop[1].type.split(' | ') as type, i (type)}
+              {#each prop.type.split(' | ') as type, i (type)}
                 <div
                   class="cell"
-                  style="z-index: {prop[1].type.split(' | ').length - i}"
+                  style="z-index: {prop.type.split(' | ').length - i}"
                 >
                   {#if type.startsWith('typeof')}
                     <TooltipDefinition
@@ -106,16 +125,26 @@
                   {/if}
                 </div>
               {/each}
-            </StructuredListCell>
+
-            <StructuredListCell>
+              {#if prop.reactive}
-              <code>{prop[1].value}</code>
+                <div
-            </StructuredListCell>
+                  style="white-space: nowrap; margin-left: calc(-1 * var(--cds-spacing-03)); margin-top: var(--cds-spacing-05)"
-            <StructuredListCell>
+                >
-              {#each prop[1].description.split('\n') as line}
+                  <Tag type="green">Reactive</Tag>
-                <div class="description">
-                  {@html line.replace(/`(.*?)`/g, '<code>$1</code>')}.
                 </div>
-              {/each}
+              {/if}
+            </StructuredListCell>
+            <StructuredListCell><code>{prop.value}</code></StructuredListCell>
+            <StructuredListCell>
+              {#if prop.description}
+                {#each prop.description.split('\n') as line}
+                  <div class="description">
+                    {@html line.replace(/`(.*?)`/g, '<code>$1</code>')}.
+                  </div>
+                {/each}
+              {:else}
+                <div class="description">No description available.</div>
+              {/if}
             </StructuredListCell>
           </StructuredListRow>
         {/each}
@@ -128,8 +157,8 @@
 <h3 id="slots">Slots</h3>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
-    {#each component.slots as slot}
+    {#each component.slots as slot (slot.name)}
-      <ListItem>{slot[0]}</ListItem>
+      <ListItem>{slot.default ? 'default' : slot.name}</ListItem>
     {/each}
   </UnorderedList>
 {:else}
@@ -137,10 +166,10 @@
 {/if}
 
 <h3 id="forwarded-events">Forwarded events</h3>
-{#if component.forwarded_events.length > 0}
+{#if forwarded_events.length > 0}
   <UnorderedList class="my-layout-01-03">
-    {#each component.forwarded_events as event}
+    {#each forwarded_events as event (event.name)}
-      <ListItem>on:{event[0]}</ListItem>
+      <ListItem>on:{event.name}</ListItem>
     {/each}
   </UnorderedList>
 {:else}
@@ -149,12 +178,27 @@
 
 <h3 id="dispatched-events">Dispatched events</h3>
 
-{#if component.dispatched_events.length > 0}
+{#if dispatched_events.length > 0}
   <UnorderedList class="my-layout-01-03">
-    {#each component.dispatched_events as event}
+    {#each dispatched_events as event (event.name)}
-      <ListItem>on:{event[0]}</ListItem>
+      <ListItem>on:{event.name}</ListItem>
     {/each}
   </UnorderedList>
 {:else}
   <p class="my-layout-01-03">No dispatched events.</p>
 {/if}
+
+<h3 id="rest-props">$$restProps</h3>
+
+<div class="my-layout-01-03">
+  {#if component.rest_props}
+    <code>{component.moduleName}</code>
+    spreads
+    <code>$$restProps</code>
+    to the
+    {#if component.rest_props.type === 'Element'}
+      <code>{component.rest_props.name}</code>
+      element.
+    {:else}<code>{component.rest_props.name}</code> component.{/if}
+  {:else}This component does not spread <code>restProps</code>{/if}
+</div>

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);
+  // TODO: `find` is not supported in IE
-  $: multiple = api.length > 1;
+  $: 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 @@
         <slot />
         <h2 id="component-api">Component API</h2>
         <p>
-          Component API documentation is
+          Component documentation is
-          <Link
+          <Link inline href="https://github.com/IBM/sveld" target="_blank">
-            inline
+            auto-generated by sveld.
-            href="https://github.com/IBM/carbon-components-svelte/blob/master/scripts/rollup/plugin-generate-docs.js"
-            target="_blank"
-          >
-            auto-generated
           </Link>
-          from a build script.
         </p>
       </Column>
     </Row>
@@ -190,11 +183,11 @@
       <Column class="prose" noGutter="{multiple}">
         {#if multiple}
           <Tabs class="override-tabs">
-            {#each api as component, i (component.moduleName)}
+            {#each api_components as component (component.moduleName)}
               <Tab label="{component.moduleName}" />
             {/each}
             <div slot="content" style="padding-top: var(--cds-spacing-06)">
-              {#each api as component, i (component.moduleName)}
+              {#each api_components as component (component.moduleName)}
                 <TabContent>
                   <ComponentApi component="{component}" />
                 </TabContent>
@@ -202,7 +195,7 @@
             </div>
           </Tabs>
         {:else}
-          <ComponentApi component="{api[0]}" />
+          <ComponentApi component="{api_components[0]}" />
         {/if}
       </Column>
     </Row>

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";

docs/src/pages/components/SelectableTile.svx

@@ -1,9 +1,9 @@
 ---
-components: ["TileGroup", "SelectableTile"]
+components: ["SelectableTile"]
 ---
 
 <script>
-  import { TileGroup, SelectableTile } from "carbon-components-svelte";
+  import { SelectableTile } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 

docs/svelte.config.js

@@ -242,6 +242,9 @@ module.exports = {
                       <li class="bx--list__item">
                         <a class="bx--link" href="#dispatched-events">Dispatched events</a>
                       </li>
+                      <li class="bx--list__item">
+                        <a class="bx--link" href="#rest-props">restProps</a>
+                      </li>
                     </ul>
                   </li>
                 </ul>

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": "^2.33.3",
-    "rollup-plugin-svelte": "^6.1.0",
+    "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"
   },

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",
+          },
+        }),
     ],
   };
 });

scripts/rollup/generate-index.js

@@ -1,117 +0,0 @@
-const toLink = (text) => text.toLowerCase().replace(/\s+/g, "-");
-
-const toMdLink = (text) => `[${text}](#${toLink(text)})`;
-
-const formatType = (type) => `<code>${type.replace(/\|/g, "&#124;")}</code>`;
-
-const escapeHtml = (text) => text.replace(/\</g, "&lt;").replace(/\>/g, "&gt;");
-
-const HEADER_PROPS =
-  "| Prop name | Type | Default value | Description |\n| :- | :- | :- | :- |\n";
-
-/**
- * Use library component metadata to generate component documentation in markdown format.
- * @param {Map<string, { component: { exported_props: Map<string, any>; slots: Map<string, any>; } typedefs: {name: string; type: string;}[] }>} components
- * @param {Map<string, string[]>} 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**: `<div>...</div>`\n";
-      }
-
-      slots.forEach((slot, name) => {
-        if (slot.default) return;
-        code += `- **"${name}"**: \`<div name="${name}" ${slot.attributes
-          .map((attr) => `let:${attr.name}`)
-          .join(" ")}>...</div>\`\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 };
-}

scripts/rollup/generate-public-api.js

@@ -1,29 +0,0 @@
-/**
- * Use library component metadata to generate component documentation in JSON format.
- * @param {Map<string, { component: { exported_props: Map<string, any>; slots: Map<string, any>; } typedefs: {name: string; type: string;}[] }>} components
- * @param {Map<string, string[]>} 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 };
-}

scripts/rollup/generate-types.js

@@ -1,82 +0,0 @@
-/**
- * Use library component metadata to generate TypeScript definitions.
- * @param {Map<string, { component: { exported_props: Map<string, any>; slots: Map<string, any>; } 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 };
-}

scripts/rollup/parse-component.js

@@ -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,
-  };
-}

scripts/rollup/plugin-generate-docs.js

@@ -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;

src/Accordion/Accordion.svelte

@@ -1,31 +1,27 @@
 <script>
+  /** @extends {"./AccordionSkeleton"} AccordionSkeletonProps */
+
   /**
    * Specify alignment of accordion item chevron icon
-   * @type {"start" | "end"} [align="end"]
+   * @type {"start" | "end"}
    */
   export let align = "end";
 
   /**
    * Specify the size of the accordion
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to disable the accordion */
-   * Set to `true` to disable the accordion
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to display the skeleton state */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
-  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+  import AccordionSkeleton from "./AccordionSkeleton.svelte";
 
   const disableItems = writable(disabled);
 

src/Accordion/AccordionItem.svelte

@@ -2,26 +2,16 @@
   /**
    * Specify the title of the accordion item heading
    * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
-   * @type {string} [title="title"]
    */
   export let title = "title";
 
-  /**
+  /** Set to `true` to open the first accordion item */
-   * Set to `true` to open the first accordion item
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to disable the accordion item */
-   * Set to `true` to disable the accordion item
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the ARIA label for the accordion item chevron icon */
-   * Specify the ARIA label for the accordion item chevron icon
-   * @type {string} [iconDescription="Expand/Collapse"]
-   */
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";
@@ -49,7 +39,7 @@
   class:bx--accordion__item--active="{open}"
   class:bx--accordion__item--disabled="{disabled}"
   {...$$restProps}
-  class="bx--accordion__item--${animation} {$$restProps.class}"
+  class="bx--accordion__item--{animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;

src/Accordion/AccordionSkeleton.svelte

@@ -1,26 +1,20 @@
 <script>
-  /**
+  /** Specify the number of accordion items to render */
-   * Specify the number of accordion items to render
-   * @type {number} [count=4]
-   */
   export let count = 4;
 
   /**
    * Specify alignment of accordion item chevron icon
-   * @type {"start" | "end"} [align="end"]
+   * @type {"start" | "end"}
    */
   export let align = "end";
 
   /**
    * Specify the size of the accordion
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `false` to close the first accordion item */
-   * Set to `false` to close the first accordion item
-   * @type {boolean} [open=true]
-   */
   export let open = true;
 
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";

src/Accordion/index.js

@@ -1,3 +1,3 @@
 export { default as Accordion } from "./Accordion.svelte";
 export { default as AccordionItem } from "./AccordionItem.svelte";
-export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte";
+export { default as AccordionSkeleton } from "./AccordionSkeleton.svelte";

src/AspectRatio/AspectRatio.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the aspect ratio
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} [ratio="2x1"]
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
    */
   export let ratio = "2x1";
 </script>

src/Breadcrumb/Breadcrumb.svelte

@@ -1,17 +1,13 @@
 <script>
-  /**
+  /** @extends {"./BreadcrumbSkeleton"} BreadcrumbSkeletonProps */
-   * Set to `true` to hide the breadcrumb trailing slash
+
-   * @type {boolean} [noTrailingSlash=false]
+  /** Set to `true` to hide the breadcrumb trailing slash */
-   */
   export let noTrailingSlash = false;
 
-  /**
+  /** Set to `true` to display skeleton state */
-   * Set to `true` to display skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
+  import BreadcrumbSkeleton from "./BreadcrumbSkeleton.svelte";
 </script>
 
 {#if skeleton}

src/Breadcrumb/BreadcrumbItem.svelte

@@ -1,14 +1,11 @@
 <script>
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
-  /**
+  /** Set to `true` if the breadcrumb item represents the current page */
-   * Set to `true` if the breadcrumb item represents the current page
-   * @type {boolean} [isCurrentPage=false]
-   */
   export let isCurrentPage = false;
 
   import { Link } from "../Link";

src/Breadcrumb/BreadcrumbSkeleton.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set to `true` to hide the breadcrumb trailing slash */
-   * Set to `true` to hide the breadcrumb trailing slash
-   * @type {boolean} [noTrailingSlash=false]
-   */
   export let noTrailingSlash = false;
 
-  /**
+  /** Specify the number of breadcrumb items to render */
-   * Specify the number of breadcrumb items to render
-   * @type {number} [count=3]
-   */
   export let count = 3;
 </script>
 

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";

src/Button/Button.svelte

@@ -1,92 +1,79 @@
 <script>
+  /**
+   * @extends {"./ButtonSkeleton"} ButtonSkeletonProps
+   * @restProps {button | a | div}
+   * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
+   */
+
   /**
    * Specify the kind of button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"} [kind="primary"]
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"}
    */
   export let kind = "primary";
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small"} [size="default"]
+   * @type {"default" | "field" | "small"}
    */
   export let size = "default";
 
-  /**
+  /** Set to `true` for the icon-only variant */
-   * Set to `true` for the icon-only variant
-   * @type {boolean} [hasIconOnly=false]
-   */
   export let hasIconOnly = false;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = undefined;
 
   /**
    * Specify the ARIA label for the button icon
-   * @type {string} [iconDescription]
+   * @type {string}
    */
   export let iconDescription = undefined;
 
   /**
    * Set the alignment of the tooltip relative to the icon
    * `hasIconOnly` must be set to `true`
-   * @type {"start" | "center" | "end"} [tooltipAlignment]
+   * @type {"start" | "center" | "end"}
    */
   export let tooltipAlignment = undefined;
 
   /**
    * Set the position of the tooltip relative to the icon
-   * @type {"top" | "right" | "bottom" | "left"} [tooltipPosition]
+   * @type {"top" | "right" | "bottom" | "left"}
    */
   export let tooltipPosition = undefined;
 
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
-   * @type {boolean} [as=false]
    */
   export let as = false;
 
-  /**
+  /** Set to `true` to display the skeleton state */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  /**
+  /** Set to `true` to disable the button */
-   * Set to `true` to disable the button
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
-  /**
+  /** Specify the tabindex */
-   * Specify the tabindex
-   * @type {string} [tabindex="0"]
-   */
   export let tabindex = "0";
 
-  /**
+  /** Specify the `type` attribute for the button element */
-   * Specify the `type` attribute for the button element
-   * @type {string} [type="button"]
-   */
   export let type = "button";
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
   import { getContext } from "svelte";
-  import ButtonSkeleton from "./Button.Skeleton.svelte";
+  import ButtonSkeleton from "./ButtonSkeleton.svelte";
 
   const ctx = getContext("ComposedModal");
 

src/Button/ButtonSet.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set to `true` to stack the buttons vertically */
-   * Set to `true` to stack the buttons vertically
-   * @type {boolean} [stacked=false]
-   */
   export let stacked = false;
 </script>
 

src/Button/ButtonSkeleton.svelte

@@ -1,20 +1,17 @@
 <script>
   /**
    * Set the `href` to use an anchor link
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small"} [size="default"]
+   * @type {"default" | "field" | "small"}
    */
   export let size = "default";
 
-  /**
+  /** Set to `true` to use the small variant */
-   * Set to `true` to use the small variant
-   * @type {boolean} [small=false]
-   */
   export let small = false;
 </script>
 

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";

src/Checkbox/Checkbox.svelte

@@ -1,72 +1,46 @@
 <script>
   /**
-   * Specify whether the checkbox is checked
+   * @event {boolean} check
-   * @type {boolean} [checked=false]
    */
+
+  /** Specify whether the checkbox is checked */
   export let checked = false;
 
-  /**
+  /** Specify whether the checkbox is indeterminate */
-   * Specify whether the checkbox is indeterminate
-   * @type {boolean} [indeterminate=false]
-   */
   export let indeterminate = false;
 
-  /**
+  /** Set to `true` to display the skeleton state */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  /**
+  /** Set to `true` for the checkbox to be read-only */
-   * Set to `true` for the checkbox to be read-only
-   * @type {boolean} [readonly=false]
-   */
   export let readonly = false;
 
-  /**
+  /** Set to `true` to disable the checkbox */
-   * Set to `true` to disable the checkbox
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the label text */
-   * Specify the label text
-   * @type {string} [labelText=""]
-   */
   export let labelText = "";
 
-  /**
+  /** Set to `true` to visually hide the label text */
-   * Set to `true` to visually hide the label text
-   * @type {boolean} [hideLabel=false]
-   */
   export let hideLabel = false;
 
-  /**
+  /** Set a name for the input element */
-   * Set a name for the input element
-   * @type {string} [name=""]
-   */
   export let name = "";
 
   /**
    * Specify the title attribute for the label element
-   * @type {string} [title]
+   * @type {string}
    */
   export let title = undefined;
 
-  /**
+  /** Set an id for the input label */
-   * Set an id for the input label
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
-  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
+  import CheckboxSkeleton from "./CheckboxSkeleton.svelte";
 
   const dispatch = createEventDispatcher();
 

src/Checkbox/InlineCheckbox.svelte

@@ -1,32 +1,20 @@
 <script>
-  /**
+  /** Specify whether the checkbox is checked */
-   * Specify whether the checkbox is checked
-   * @type {boolean} [checked=false]
-   */
   export let checked = false;
 
-  /**
+  /** Specify whether the checkbox is indeterminate */
-   * Specify whether the checkbox is indeterminate
-   * @type {boolean} [indeterminate=false]
-   */
   export let indeterminate = false;
 
   /**
    * Specify the title attribute for the label element
-   * @type {string} [title]
+   * @type {string}
    */
   export let title = undefined;
 
-  /**
+  /** Set an id for the input label */
-   * Set an id for the input label
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 </script>
 

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";

src/CodeSnippet/CodeSnippet.svelte

@@ -1,102 +1,72 @@
 <script>
   /**
    * Set the type of code snippet
-   * @type {"single" | "inline" | "multi"} [type="single"]
+   * @type {"single" | "inline" | "multi"}
    */
   export let type = "single";
 
   /**
    * Set the code snippet text
    * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
-   * @type {string} [code]
+   * @type {string}
    */
   export let code = undefined;
 
-  /**
+  /** Set to `true` to expand a multi-line code snippet (type="multi") */
-   * Set to `true` to expand a multi-line code snippet (type="multi")
-   * @type {boolean} [expanded=false]
-   */
   export let expanded = false;
 
-  /**
+  /** Set to `true` to hide the copy button */
-   * Set to `true` to hide the copy button
-   * @type {boolean} [hideCopyButton=false]
-   */
   export let hideCopyButton = false;
 
   /**
    * Set to `true` to wrap the text
    * Note that `type` must be "multi"
-   * @type {boolean} [wrapText=false]
    */
   export let wrapText = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to display the skeleton state */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
   /**
    * Specify the ARIA label for the copy button icon
-   * @type {string} [copyButtonDescription]
+   * @type {string}
    */
   export let copyButtonDescription = undefined;
 
   /**
    * Specify the ARIA label of the copy button
-   * @type {string} [copyLabel]
+   * @type {string}
    */
   export let copyLabel = undefined;
 
-  /**
+  /** Specify the feedback text displayed when clicking the snippet */
-   * Specify the feedback text displayed when clicking the snippet
-   * @type {string} [feedback="Copied!"]
-   */
   export let feedback = "Copied!";
 
-  /**
+  /** Set the timeout duration (ms) to display feedback text */
-   * Set the timeout duration (ms) to display feedback text
-   * @type {number} [feedbackTimeout=2000]
-   */
   export let feedbackTimeout = 2000;
 
   /**
    * Specify the show less text
    * `type` must be "multi"
-   * @type {string} [showLessText="Show less"]
    */
   export let showLessText = "Show less";
 
   /**
    * Specify the show more text
    * `type` must be "multi"
-   * @type {string} [showLessText="Show more"]
    */
   export let showMoreText = "Show more";
 
-  /**
+  /** Set to `true` to enable the show more/less button */
-   * Set to `true` to enable the show more/less button
-   * @type {boolean} [showMoreLess=false]
-   */
   export let showMoreLess = false;
 
-  /**
+  /** Set an id for the code element */
-   * Set an id for the code element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the pre HTML element */
-   * Obtain a reference to the pre HTML element
-   * @type {null | HTMLPreElement} [ref=null]
-   */
   export let ref = null;
 
   import { tick } from "svelte";
@@ -104,7 +74,7 @@
   import { Button } from "../Button";
   import { Copy } from "../Copy";
   import { CopyButton } from "../CopyButton";
-  import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
+  import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
 
   function setShowMoreLess() {
     const { height } = ref.getBoundingClientRect();

src/CodeSnippet/CodeSnippetSkeleton.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Set the type of code snippet
-   * @type {"single" | "inline" | "multi"} [type="single"]
+   * @type {"single" | "inline" | "multi"}
    */
   export let type = "single";
 </script>

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";

src/ComboBox/ComboBox.svelte

@@ -1,122 +1,87 @@
 <script>
+  /**
+   * @typedef {{ id: string; text: string; }} ComboBoxItem
+   * @event {{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }} select
+   */
+
   /**
    * Set the combobox items
-   * @type {ComboBoxItem[]} [items=[]]
+   * @type {ComboBoxItem[]}
    */
   export let items = [];
 
   /**
    * Override the display of a combobox item
-   * @type {(item: ComboBoxItem) => string} [itemToString = (item: ComboBoxItem) => string]
+   * @type {(item: ComboBoxItem) => string}
    */
   export let itemToString = (item) => item.text || item.id;
 
-  /**
+  /** Set the selected item by value index */
-   * Set the selected item by value index
-   * @type {number} [selectedIndex=-1]
-   */
   export let selectedIndex = -1;
 
-  /**
+  /** Specify the selected combobox value */
-   * Specify the selected combobox value
-   * @type {string} [value=""]
-   */
   export let value = "";
 
   /**
    * Set the size of the combobox
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to disable the combobox */
-   * Set to `true` to disable the combobox
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the title text of the combobox */
-   * Specify the title text of the combobox
-   * @type {string} [titleText=""]
-   */
   export let titleText = "";
 
-  /**
+  /** Specify the placeholder text */
-   * Specify the placeholder text
-   * @type {string} [placeholder=""]
-   */
   export let placeholder = "";
 
-  /**
+  /** Specify the helper text */
-   * Specify the helper text
-   * @type {string} [helperText=""]
-   */
   export let helperText = "";
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText=""]
-   */
   export let invalidText = "";
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to open the combobox menu dropdown */
-   * Set to `true` to open the combobox menu dropdown
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
   /**
    * Determine if an item should be filtered given the current combobox value
-   * @type {(item: ComboBoxItem, value: string) => boolean} [shouldFilterItem=() => true]
+   * @type {(item: ComboBoxItem, value: string) => boolean}
    */
   export let shouldFilterItem = () => true;
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string} [translateWithId]
+   * @type {(id: any) => string}
    */
   export let translateWithId = undefined;
 
-  /**
+  /** Set an id for the list box component */
-   * Set an id for the list box component
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
    * Specify a name attribute for the input
-   * @type {string} [name]
+   * @type {string}
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
   /**
    * Obtain a reference to the list HTML element
-   * @type {null | HTMLDivElement} [ref=null]
+   * @type {null | HTMLDivElement}
    */
   export let listRef = null;
 
-  /**
-   * @typedef {{ id: string; text: string; }} ComboBoxItem
-   */
-
   import { createEventDispatcher, afterUpdate } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import {

src/ComposedModal/ComposedModal.svelte

@@ -1,44 +1,29 @@
 <script>
   /**
    * Set the size of the composed modal
-   * @type {"xs" | "sm" | "lg"} [size]
+   * @type {"xs" | "sm" | "lg"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to open the modal */
-   * Set to `true` to open the modal
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to use the danger variant */
-   * Set to `true` to use the danger variant
-   * @type {boolean} [danger=false]
-   */
   export let danger = false;
 
-  /**
+  /** Set to `true` to prevent the modal from closing when clicking outside */
-   * Set to `true` to prevent the modal from closing when clicking outside
-   * @type {boolean} [preventCloseOnClickOutside=false]
-   */
   export let preventCloseOnClickOutside = false;
 
-  /**
+  /** Specify a class for the inner modal */
-   * Specify a class for the inner modal
-   * @type {string} [containerClass=""]
-   */
   export let containerClass = "";
 
   /**
    * Specify a selector to be focused when opening the modal
-   * @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
+   * @type {null | string}
    */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLElement} [ref=null]
-   */
   export let ref = null;
 
   import {
@@ -69,8 +54,8 @@
   });
 
   function focus(element) {
-    if(selectorPrimaryFocus == null) {
+    if (selectorPrimaryFocus == null) {
-      return
+      return;
     }
     const node =
       (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;

src/ComposedModal/ModalBody.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set to `true` if the modal contains form elements */
-   * Set to `true` if the modal contains form elements
-   * @type {boolean} [hasForm=false]
-   */
   export let hasForm = false;
 
-  /**
+  /** Set to `true` if the modal contains scrolling content */
-   * Set to `true` if the modal contains scrolling content
-   * @type {boolean} [hasScrollingContent=false]
-   */
   export let hasScrollingContent = false;
 </script>
 

src/ComposedModal/ModalFooter.svelte

@@ -1,38 +1,26 @@
 <script>
-  /**
+  /** Specify the primary button text */
-   * Specify the primary button text
-   * @type {string} [primaryButtonText=""]
-   */
   export let primaryButtonText = "";
 
-  /**
+  /**  Set to `true` to disable the primary button */
-   * Set to `true` to disable the primary button
-   * @type {boolean} [primaryButtonDisabled=false]
-   */
   export let primaryButtonDisabled = false;
 
   /**
    * Specify a class for the primary button
-   * @type {string} [primaryClass]
+   * @type {string}
    */
   export let primaryClass = undefined;
 
-  /**
+  /** Specify the secondary button text */
-   * Specify the secondary button text
-   * @type {string} [secondaryButtonText=""]
-   */
   export let secondaryButtonText = "";
 
   /**
    * Specify a class for the secondary button
-   * @type {string} [secondaryClass]
+   * @type {string}
    */
   export let secondaryClass = undefined;
 
-  /**
+  /** Set to `true` to use the danger variant */
-   * Set to `true` to use the danger variant
-   * @type {boolean} [danger=false]
-   */
   export let danger = false;
 
   import { getContext } from "svelte";

src/ComposedModal/ModalHeader.svelte

@@ -1,44 +1,23 @@
 <script>
-  /**
+  /** Specify the modal title */
-   * Specify the modal title
-   * @type {string} [title=""]
-   */
   export let title = "";
 
-  /**
+  /** Specify the modal label */
-   * Specify the modal label
-   * @type {string} [label=""]
-   */
   export let label = "";
 
-  /**
+  /** Specify the label class */
-   * Specify the label class
-   * @type {string} [labelClass=""]
-   */
   export let labelClass = "";
 
-  /**
+  /** Specify the title class */
-   * Specify the title class
-   * @type {string} [titleClass=""]
-   */
   export let titleClass = "";
 
-  /**
+  /** Specify the close class */
-   * Specify the close class
-   * @type {string} [closeClass=""]
-   */
   export let closeClass = "";
 
-  /**
+  /** Specify the close icon class */
-   * Specify the close icon class
-   * @type {string} [closeIconClass=""]
-   */
   export let closeIconClass = "";
 
-  /**
+  /** Specify the ARIA label for the close icon */
-   * Specify the ARIA label for the close icon
-   * @type {string} [iconDescription="Close"]
-   */
   export let iconDescription = "Close";
 
   import { getContext } from "svelte";

src/ContentSwitcher/ContentSwitcher.svelte

@@ -1,19 +1,17 @@
 <script>
   /**
-   * Set the selected index of the switch item
+   * @event {number} change
-   * @type {number} [selectedIndex=0]
    */
+
+  /** Set the selected index of the switch item */
   export let selectedIndex = 0;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
   /**
    * Specify the size of the content switcher
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 

src/ContentSwitcher/Switch.svelte

@@ -2,32 +2,19 @@
   /**
    * Specify the switch text
    * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
-   * @type {string} [text="Provide text"]
    */
   export let text = "Provide text";
 
-  /**
+  /** Set to `true` for the switch to be selected */
-   * Set to `true` for the switch to be selected
-   * @type {boolean} [selected=false]
-   */
   export let selected = false;
 
-  /**
+  /** Set to `true` to disable the switch */
-   * Set to `true` to disable the switch
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set an id for the button element */
-   * Set an id for the button element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
   import { afterUpdate, getContext, onDestroy } from "svelte";

src/Copy/Copy.svelte

@@ -1,20 +1,11 @@
 <script>
-  /**
+  /** Set the feedback text shown after clicking the button */
-   * Set the feedback text shown after clicking the button
-   * @type {string} [feedback="Copied!"]
-   */
   export let feedback = "Copied!";
 
-  /**
+  /** Set the timeout duration (ms) to display feedback text */
-   * Set the timeout duration (ms) to display feedback text
-   * @type {number} [feedbackTimeout=2000]
-   */
   export let feedbackTimeout = 2000;
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
   import { onMount } from "svelte";

src/CopyButton/CopyButton.svelte

@@ -1,8 +1,7 @@
 <script>
-  /**
+  /** @extends {"../Copy/Copy"} CopyProps */
-   * Set the title and ARIA label for the copy button
+
-   * @type {string} [iconDescription="Copy to clipboard"]
+  /** Set the title and ARIA label for the copy button */
-   */
   export let iconDescription = "Copy to clipboard";
 
   import { Copy } from "../Copy";

src/DataTable/DataTable.svelte

@@ -1,95 +1,93 @@
 <script>
+  /**
+   * @typedef {string} Key
+   * @typedef {any} Value
+   * @typedef {{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} EmptyHeader
+   * @typedef {{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} NonEmptyHeader
+   * @typedef {NonEmptyHeader | EmptyHeader} DataTableHeader
+   * @typedef {Record<Key, Value>} Row
+   * @typedef {string} RowId
+   * @typedef {{ key: Key; value: Value; }} Cell
+   * @slot {{ row: Row; }} expanded-row
+   * @slot {{ header: NonEmptyHeader; }} cell-header
+   * @slot {{ row: Row; cell: Cell; }} cell
+   * @event {{ header?: DataTableHeader; row?: Row; cell?: Cell; }} click
+   * @event {{ expanded: boolean; }} click:header--expand
+   * @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
+   * @event {Row} click:row
+   * @event {Row} mouseenter:row
+   * @event {Row} mouseleave:row
+   * @event {{ expanded: boolean; row: Row; }} click:row--expand
+   * @event {Cell} click:cell
+   */
+
   /**
    * Specify the data table headers
-   * @type {{ key: string; value: string; display?: (item) => string; sort?: (a, b) => number; empty?: boolean; columnMenu?: boolean; }[]} [headers=[]]
+   * @type {DataTableHeader[]}
    */
   export let headers = [];
 
   /**
    * Specify the rows the data table should render
    * keys defined in `headers` are used for the row ids
-   * @type {Object[]} [rows=[]]
+   * @type {Row[]}
    */
   export let rows = [];
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"} [size]
+   * @type {"compact" | "short" | "tall"}
    */
   export let size = undefined;
 
-  /**
+  /** Specify the title of the data table */
-   * Specify the title of the data table
-   * @type {string} [title=""]
-   */
   export let title = "";
 
-  /**
+  /** Specify the description of the data table */
-   * Specify the description of the data table
-   * @type {string} [description=""]
-   */
   export let description = "";
 
-  /**
+  /** Set to `true` to use zebra styles */
-   * Set to `true` to use zebra styles
-   * @type {boolean} [zebra=false]
-   */
   export let zebra = false;
 
-  /**
+  /** Set to `true` for the sortable variant */
-   * Set to `true` for the sortable variant
-   * @type {boolean} [sortable=false]
-   */
   export let sortable = false;
 
   /**
    * Set to `true` for the expandable variant
    * Automatically set to `true` if `batchExpansion` is `true`
-   * @type {boolean} [expandable=false]
    */
   export let expandable = false;
 
   /**
    * Set to `true` to enable batch expansion
-   * @type {boolean} [batchExpansion=false]
    */
   export let batchExpansion = false;
 
   /**
    * Specify the row ids to be expanded
-   * @type {string[]} [expandedRowIds=[]]
+   * @type {RowId[]}
    */
   export let expandedRowIds = [];
 
-  /**
+  /** Set to `true` for the radio selection variant */
-   * Set to `true` for the radio selection variant
-   * @type {boolean} [radio=false]
-   */
   export let radio = false;
 
   /**
    * Set to `true` for the selectable variant
    * Automatically set to `true` if `radio` or `batchSelection` are `true`
-   * @type {boolean} [selectable=false]
    */
   export let selectable = false;
 
-  /**
+  /** Set to `true` to enable batch selection */
-   * Set to `true` to enable batch selection
-   * @type {boolean} [batchSelection=false]
-   */
   export let batchSelection = false;
 
   /**
    * Specify the row ids to be selected
-   * @type {string[]} [selectedRowIds=[]]
+   * @type {RowId[]}
    */
   export let selectedRowIds = [];
 
-  /**
+  /** Set to `true` to enable a sticky header */
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
   export let stickyHeader = false;
 
   import { createEventDispatcher, setContext } from "svelte";

src/DataTable/Table.svelte

@@ -1,38 +1,23 @@
 <script>
   /**
    * Set the size of the table
-   * @type {"compact" | "short" | "tall"} [size]
+   * @type {"compact" | "short" | "tall"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to use zebra styles */
-   * Set to `true` to use zebra styles
-   * @type {boolean} [zebra=false]
-   */
   export let zebra = false;
 
-  /**
+  /** Set to `true` to use static width */
-   * Set to `true` to use static width
-   * @type {boolean} [useStaticWidth=false]
-   */
   export let useStaticWidth = false;
 
-  /**
+  /**  Set to `true` for the bordered variant */
-   * Set to `true` for the bordered variant
-   * @type {boolean} [shouldShowBorder=false]
-   */
   export let shouldShowBorder = false;
 
-  /**
+  /** Set to `true` for the sortable variant */
-   * Set to `true` for the sortable variant
-   * @type {boolean} [sortable=false]
-   */
   export let sortable = false;
 
-  /**
+  /** Set to `true` to enable a sticky header */
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
   export let stickyHeader = false;
 </script>
 

src/DataTable/TableContainer.svelte

@@ -1,20 +1,11 @@
 <script>
-  /**
+  /** Specify the title of the data table */
-   * Specify the title of the data table
-   * @type {string} [title=""]
-   */
   export let title = "";
 
-  /**
+  /** Specify the description of the data table */
-   * Specify the description of the data table
-   * @type {string} [description=""]
-   */
   export let description = "";
 
-  /**
+  /** Set to `true` to enable a sticky header */
-   * Set to `true` to enable a sticky header
-   * @type {boolean} [stickyHeader=false]
-   */
   export let stickyHeader = false;
 </script>
 

src/DataTable/TableHeader.svelte

@@ -1,20 +1,14 @@
 <script>
-  /**
+  /** Specify the `scope` attribute */
-   * Specify the `scope` attribute
-   * @type {string} [scope="col"]
-   */
   export let scope = "col";
 
   /**
    * Override the default id translations
-   * @type {() => string} [translateWithId = () => ""]
+   * @type {() => string}
    */
   export let translateWithId = () => "";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { getContext } from "svelte";

src/DataTable/Toolbar.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the toolbar size
-   * @type {"sm" | "default"} [size="default"]
+   * @type {"sm" | "default"}
    */
   export let size = "default";
 

src/DataTable/ToolbarBatchActions.svelte

@@ -1,7 +1,7 @@
 <script>
   /**
    * Override the total items selected text
-   * @type {(totalSelected: number) => string} [formatTotalSelected = (totalSelected: number) => string]
+   * @type {(totalSelected: number) => string}
    */
   export let formatTotalSelected = (totalSelected) =>
     `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`;

src/DataTable/ToolbarMenu.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"../OverflowMenu/OverflowMenu"} OverflowMenuProps */
+
   import { getContext } from "svelte";
   import Settings16 from "carbon-icons-svelte/lib/Settings16";
   import { OverflowMenu } from "../OverflowMenu";

src/DataTable/ToolbarMenuItem.svelte

@@ -1,4 +1,6 @@
 <script>
+  /** @extends {"../OverflowMenu/OverflowMenuItem"} OverflowMenuItemProps */
+
   import { OverflowMenuItem } from "../OverflowMenu";
 </script>
 

src/DataTable/ToolbarSearch.svelte

@@ -1,31 +1,22 @@
 <script>
   /**
    * Specify the value of the search input
-   * @type {string} [value=""]
+   * @type {number | string}
    */
   export let value = "";
 
-  /**
+  /** Set to `true` to expand the search bar */
-   * Set to `true` to expand the search bar
-   * @type {boolean} [expanded=false]
-   */
   export let expanded = false;
 
-  /**
+  /** Set to `true` to keep the search bar expanded */
-   * Set to `true` to keep the search bar expanded
-   * @type {boolean} [persistent=false]
-   */
   export let persistent = false;
 
-  /**
+  /** Specify the tabindex */
-   * Specify the tabindex
-   * @type {string} [tabindex="0"]
-   */
   export let tabindex = "0";
 
   /**
    * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
+   * @type {null | HTMLInputElement}
    */
   export let ref = null;
 

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -1,45 +1,30 @@
 <script>
-  /**
+  /** Specify the number of columns */
-   * Specify the number of columns
-   * @type {number} [columns=5]
-   */
   export let columns = 5;
 
-  /**
+  /** Specify the number of rows */
-   * Specify the number of rows
-   * @type {number} [rows=5]
-   */
   export let rows = 5;
 
   /**
    * Set the size of the data table
-   * @type {"compact" | "short" | "tall"} [size]
+   * @type {"compact" | "short" | "tall"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to apply zebra styles to the datatable rows */
-   * Set to `true` to apply zebra styles to the datatable rows
-   * @type {boolean} [zebra=false]
-   */
   export let zebra = false;
 
-  /**
+  /** Set to `false` to hide the header */
-   * Set to `false` to hide the header
-   * @type {boolean} [showHeader=true]
-   */
   export let showHeader = true;
 
   /**
    * Set the column headers
    * If `headers` has one more items, `count` is ignored
-   * @type {string[]} [headers=[]]
+   * @type {string[]}
    */
   export let headers = [];
 
-  /**
+  /** Set to `false` to hide the toolbar */
-   * Set to `false` to hide the toolbar
-   * @type {boolean} [showToolbar=true]
-   */
   export let showToolbar = true;
 
   $: cols = Array.from(

src/DatePicker/DatePicker.svelte

@@ -1,62 +1,51 @@
 <script>
+  /**
+   * @dispatch {string} change
+   */
+
   /**
    * Specify the date picker type
-   * @type {"simple" | "single" | "range"} [datePickerType="simple"]
+   * @type {"simple" | "single" | "range"}
    */
   export let datePickerType = "simple";
 
   /**
    * Specify the date picker input value
-   * @type {string} [value=""]
+   * @type {number | string}
    */
   export let value = "";
 
   /**
    * Specify the element to append the calendar to
-   * @type {HTMLElement} [appendTo=document.body]
+   * @type {HTMLElement}
    */
   export let appendTo = document.body;
 
-  /**
+  /** Specify the date format */
-   * Specify the date format
-   * @type {string} [dateFormat="m/d/Y"]
-   */
   export let dateFormat = "m/d/Y";
 
   /**
    * Specify the maximum date
-   * @type {null | string | Date} [maxDate=null]
+   * @type {null | string | Date}
    */
   export let maxDate = null;
 
   /**
    * Specify the minimum date
-   * @type {null | string | Date} [minDate=null]
+   * @type {null | string | Date}
    */
   export let minDate = null;
 
-  /**
+  /** Specify the locale */
-   * Specify the locale
-   * @type {string} [locale="en"]
-   */
   export let locale = "en";
 
-  /**
+  /** Set to `true` to use the short variant */
-   * Set to `true` to use the short variant
-   * @type {boolean} [short=false]
-   */
   export let short = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set an id for the date picker element */
-   * Set an id for the date picker element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import {

src/DatePicker/DatePickerInput.svelte

@@ -1,80 +1,47 @@
 <script>
   /**
    * Set the size of the input
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
-  /**
+  /** Specify the input type */
-   * Specify the input type
-   * @type {string} [type="text"]
-   */
   export let type = "text";
 
-  /**
+  /** Specify the input placeholder text */
-   * Specify the input placeholder text
-   * @type {string} [placeholder=""]
-   */
   export let placeholder = "";
 
-  /**
+  /** Specify the Regular Expression for the input value */
-   * Specify the Regular Expression for the input value
-   * @type {string} [placeholder="\\d{1,2}\\/\\d{1,2}\\/\\d{4}"]
-   */
   export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
 
-  /**
+  /** Set to `true` to disable the input */
-   * Set to `true` to disable the input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the ARIA label for the calendar icon */
-   * Specify the ARIA label for the calendar icon
-   * @type {string} [iconDescription=""]
-   */
   export let iconDescription = "";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Specify the label text */
-   * Specify the label text
-   * @type {string} [labelText=""]
-   */
   export let labelText = "";
 
-  /**
+  /** Set to `true` to visually hide the label text */
-   * Set to `true` to visually hide the label text
-   * @type {boolean} [hideLabel=false]
-   */
   export let hideLabel = false;
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText=""]
-   */
   export let invalidText = "";
 
   /**
    * Set a name for the input element
-   * @type {string} [name=""]
+   * @type {string}
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
   import { getContext, onMount } from "svelte";

src/DatePicker/DatePickerSkeleton.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set to `true` to use the range variant */
-   * Set to `true` to use the range variant
-   * @type {boolean} [range=false]
-   */
   export let range = false;
 
-  /**
+  /** Set an id to be used by the label element */
-   * Set an id to be used by the label element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

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";

src/Dropdown/Dropdown.svelte

@@ -1,118 +1,86 @@
 <script>
+  /**
+   * @typedef {string} DropdownItemId
+   * @typedef {string} DropdownItemText
+   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
+   * @event {{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }} select
+   */
+
   /**
    * Set the dropdown items
-   * @type {DropdownItem[]} [items=[]]
+   * @type {DropdownItem[]}
    */
   export let items = [];
 
   /**
    * Override the display of a dropdown item
-   * @type {(item: DropdownItem) => string} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId]
+   * @type {(item: DropdownItem) => string}
    */
   export let itemToString = (item) => item.text || item.id;
 
-  /**
+  /** Specify the selected item index */
-   * Specify the selected item index
-   * @type {number} [selectedIndex=-1]
-   */
   export let selectedIndex = -1;
 
   /**
    * Specify the type of dropdown
-   * @type {"default" | "inline"} [type="default"]
+   * @type {"default" | "inline"}
    */
   export let type = "default";
 
   /**
    * Specify the size of the dropdown field
-   * @type {"sm" | "lg" | "xl"} [size]
+   * @type {"sm" | "lg" | "xl"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to open the dropdown */
-   * Set to `true` to open the dropdown
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to use the inline variant */
-   * Set to `true` to use the inline variant
-   * @type {boolean} [inline=false]
-   */
   export let inline = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to disable the dropdown */
-   * Set to `true` to disable the dropdown
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the title text */
-   * Specify the title text
-   * @type {string} [titleText=""]
-   */
   export let titleText = "";
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText=""]
-   */
   export let invalidText = "";
 
-  /**
+  /** Specify the helper text */
-   * Specify the helper text
-   * @type {string} [helperText=""]
-   */
   export let helperText = "";
 
   /**
    * Specify the list box label
-   * @type {string} [label]
+   * @type {string}
    */
   export let label = undefined;
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string} [translateWithId]
+   * @type {(id: any) => string}
    */
   export let translateWithId = undefined;
 
-  /**
+  /** Set an id for the list box component */
-   * Set an id for the list box component
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
    * Specify a name attribute for the list box
-   * @type {string} [name]
+   * @type {string}
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the button HTML element */
-   * Obtain a reference to the button HTML element
-   * @type {null | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {string} DropdownItemId
-   * @typedef {string} DropdownItemText
-   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
-   */
-
   import { createEventDispatcher } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import {

src/Dropdown/DropdownSkeleton.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set to `true` to use the inline variant */
-   * Set to `true` to use the inline variant
-   * @type {boolean} [inline=false]
-   */
   export let inline = false;
 </script>
 

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";

src/FileUploader/FileUploader.svelte

@@ -1,70 +1,58 @@
 <script>
+  /**
+   * @typedef {string[]} Files
+   * @event {Files} add
+   * @event {Files} remove
+   */
+
   /**
    * Specify the file uploader status
-   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   * @type {"uploading" | "edit" | "complete"}
    */
   export let status = "uploading";
 
   /**
    * Specify the accepted file types
-   * @type {string[]} [accept=[]]
+   * @type {Files}
    */
   export let accept = [];
 
   /**
    * Obtain the uploaded file names
-   * @type {string[]} [files=[]]
+   * @type {Files}
    */
   export let files = [];
 
-  /**
+  /** Set to `true` to allow multiple files */
-   * Set to `true` to allow multiple files
-   * @type {boolean} [multiple=false]
-   */
   export let multiple = false;
 
   /**
    * Override the default behavior of clearing the array of uploaded files
-   * @type {() => any} [clearFiles = () => void]
+   * @type {() => void}
    */
   export const clearFiles = () => {
     files = [];
   };
 
-  /**
+  /** Specify the label description */
-   * Specify the label description
-   * @type {string} [labelDescription=""]
-   */
   export let labelDescription = "";
 
-  /**
+  /** Specify the label title */
-   * Specify the label title
-   * @type {string} [labelTitle=""]
-   */
   export let labelTitle = "";
 
   /**
    * Specify the kind of file uploader button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
    */
   export let kind = "primary";
 
-  /**
+  /** Specify the button label */
-   * Specify the button label
-   * @type {string} [buttonLabel=""]
-   */
   export let buttonLabel = "";
 
-  /**
+  /** Specify the ARIA label used for the status icons */
-   * Specify the ARIA label used for the status icons
-   * @type {string} [iconDescription=""]
-   */
   export let iconDescription = "Provide icon description";
 
-  /**
+  /** Specify a name attribute for the file button uploader input */
-   * Specify a name attribute for the file button uploader input
-   * @type {string} [name]
-   */
   export let name = "";
 
   import { createEventDispatcher, afterUpdate } from "svelte";

src/FileUploader/FileUploaderButton.svelte

@@ -1,68 +1,45 @@
 <script>
+  /**
+   * @typedef {string[]} Files
+   */
+
   /**
    * Specify the accepted file types
-   * @type {string[]} [accept=[]]
+   * @type {Files}
    */
   export let accept = [];
 
-  /**
+  /** Set to `true` to allow multiple files */
-   * Set to `true` to allow multiple files
-   * @type {boolean} [multiple=false]
-   */
   export let multiple = false;
 
-  /**
+  /** Set to `true` to disable the input */
-   * Set to `true` to disable the input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to disable label changes */
-   * Set to `true` to disable label changes
-   * @type {boolean} [disableLabelChanges=false]
-   */
   export let disableLabelChanges = false;
 
   /**
    * Specify the kind of file uploader button
-   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"} [kind="primary"]
+   * @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}]
    */
   export let kind = "primary";
 
-  /**
+  /** Specify the label text */
-   * Specify the label text
-   * @type {string} [labelText="Add file"]
-   */
   export let labelText = "Add file";
 
-  /**
+  /** Specify the label role */
-   * Specify the label role
-   * @type {string} [role="button"]
-   */
   export let role = "button";
 
-  /**
+  /** Specify `tabindex` attribute */
-   * Specify `tabindex` attribute
-   * @type {string} [tabindex="0"]
-   */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Specify a name attribute for the input */
-   * Specify a name attribute for the input
-   * @type {string} [name]
-   */
   export let name = "";
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 </script>
 

src/FileUploader/FileUploaderDropContainer.svelte

@@ -1,74 +1,51 @@
 <script>
+  /**
+   * @typedef {string[]} Files
+   * @event {Files} add
+   */
+
   /**
    * Specify the accepted file types
-   * @type {string[]} [accept=[]]
+   * @type {Files}
    */
   export let accept = [];
 
-  /**
+  /** Set to `true` to allow multiple files */
-   * Set to `true` to allow multiple files
-   * @type {boolean} [multiple=false]
-   */
   export let multiple = false;
 
   /**
    * Override the default behavior of validating uploaded files
    * The default behavior does not validate files
-   * @type {(files: Files) => Files} [validateFiles = (files: Files) => Files]
+   * @type {(files: Files) => Files}
    */
   export let validateFiles = (files) => files;
 
-  /**
+  /** Specify the label text */
-   * Specify the label text
-   * @type {string} [labelText="Add file"]
-   */
   export let labelText = "Add file";
 
-  /**
+  /** Specify the `role` attribute of the drop container */
-   * Specify the `role` attribute of the drop container
-   * @type {string} [role="button"]
-   */
   export let role = "button";
 
-  /**
+  /** Set to `true` to disable the input */
-   * Set to `true` to disable the input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify `tabindex` attribute */
-   * Specify `tabindex` attribute
-   * @type {string} [tabindex="0"]
-   */
   export let tabindex = "0";
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Specify a name attribute for the input */
-   * Specify a name attribute for the input
-   * @type {string} [name=""]
-   */
   export let name = "";
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {string[]} Files
-   */
-
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
 
-  $: over = false;
+  let over = false;
 </script>
 
 <div

src/FileUploader/FileUploaderItem.svelte

@@ -1,44 +1,30 @@
 <script>
+  /**
+   * @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 */
-   * Specify the ARIA label used for the status icons
-   * @type {string} [iconDescription=""]
-   */
   export let iconDescription = "";
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the error subject text */
-   * Specify the error subject text
-   * @type {string} [errorSubject=""]
-   */
   export let errorSubject = "";
 
-  /**
+  /** Specify the error body text */
-   * Specify the error body text
-   * @type {string} [errorBody=""]
-   */
   export let errorBody = "";
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Specify the file uploader name */
-   * Specify the file uploader name
-   * @type {string} [name=""]
-   */
   export let name = "";
 
   import { createEventDispatcher } from "svelte";

src/FileUploader/Filename.svelte

@@ -1,20 +1,14 @@
 <script>
   /**
    * Specify the file name status
-   * @type {"uploading" | "edit" | "complete"} [status="uploading"]
+   * @type {"uploading" | "edit" | "complete"}
    */
   export let status = "uploading";
 
-  /**
+  /** Specify the ARIA label used for the status icons */
-   * Specify the ARIA label used for the status icons
-   * @type {string} [iconDescription=""]
-   */
   export let iconDescription = "";
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
   import Close16 from "carbon-icons-svelte/lib/Close16";

src/FileUploader/index.js

@@ -3,4 +3,4 @@ export { default as FileUploaderButton } from "./FileUploaderButton.svelte";
 export { default as FileUploaderItem } from "./FileUploaderItem.svelte";
 export { default as FileUploaderDropContainer } from "./FileUploaderDropContainer.svelte";
 export { default as Filename } from "./Filename.svelte";
-export { default as FileUploaderSkeleton } from "./FileUploader.Skeleton.svelte";
+export { default as FileUploaderSkeleton } from "./FileUploaderSkeleton.svelte";

src/FormGroup/FormGroup.svelte

@@ -1,26 +1,14 @@
 <script>
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Set to `true` to render a form requirement */
-   * Set to `true` to render a form requirement
-   * @type {boolean} [message=false]
-   */
   export let message = false;
 
-  /**
+  /** Specify the message text */
-   * Specify the message text
-   * @type {string} [messageText=""]
-   */
   export let messageText = "";
 
-  /**
+  /** Specify the legend text */
-   * Specify the legend text
-   * @type {string} [legendText=""]
-   */
   export let legendText = "";
 </script>
 

src/FormLabel/FormLabel.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set an id to be used by the label element */
-   * Set an id to be used by the label element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 </script>
 

src/Grid/Column.svelte

@@ -1,76 +1,67 @@
 <script>
+  /**
+   * @typedef {boolean | number} ColumnSize
+   * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
+   * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
+   * @restProps {div}
+   * @slot {{props: { class: string; [key: string]: any; }}}
+   */
+
+  /**
+   * @slot {{ props?: { class: string; } }}
+   */
+
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
-   * @type {boolean} [as=false]
    */
   export let as = false;
 
-  /**
+  /** Set to `true` to remove the gutter */
-   * Set to `true` to remove the gutter
-   * @type {boolean} [noGutter=false]
-   */
   export let noGutter = false;
 
-  /**
+  /** Set to `true` to remove the left gutter */
-   * Set to `true` to remove the left gutter
-   * @type {boolean} [noGutterLeft=false]
-   */
   export let noGutterLeft = false;
 
-  /**
+  /** Set to `true` to remove the right gutter */
-   * Set to `true` to remove the right gutter
-   * @type {boolean} [noGutterRight=false]
-   */
   export let noGutterRight = false;
 
   /**
    * Specify the aspect ratio of the column
-   * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} [aspectRatio]
+   * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"}
    */
   export let aspectRatio = undefined;
 
   /**
    * Set the small breakpoint
-   * @type {ColumnBreakpoint} [sm]
+   * @type {ColumnBreakpoint}
    */
   export let sm = undefined;
 
   /**
    * Set the medium breakpoint
-   * @type {ColumnBreakpoint} [md]
+   * @type {ColumnBreakpoint}
    */
   export let md = undefined;
 
   /**
    * Set the large breakpoint
-   * @type {ColumnBreakpoint} [lg]
+   * @type {ColumnBreakpoint}
    */
   export let lg = undefined;
 
   /**
    * Set the extra large breakpoint
-   * @type {ColumnBreakpoint} [xlg]
+   * @type {ColumnBreakpoint}
    */
   export let xlg = undefined;
 
   /**
    * Set the maximum breakpoint
-   * @type {ColumnBreakpoint} [max]
+   * @type {ColumnBreakpoint}
    */
   export let max = undefined;
 
-  /**
-   * @typedef {boolean | number} ColumnSize
-   * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
-   * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
-   */
-
-  /**
-   * Column breakpoints
-   * @constant
-   * @type {string[]}
-   */
   const breakpoints = ["sm", "md", "lg", "xlg", "max"];
 
   $: columnClass = [sm, md, lg, xlg, max]

src/Grid/Grid.svelte

@@ -1,45 +1,31 @@
 <script>
+  /**
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
+   */
+
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
-   * @type {boolean} [as=false]
    */
   export let as = false;
 
-  /**
+  /** Set to `true` to use the condensed variant */
-   * Set to `true` to use the condensed variant
-   * @type {boolean} [condensed=false]
-   */
   export let condensed = false;
 
-  /**
+  /** Set to `true` to use the narrow variant */
-   * Set to `true` to use the narrow variant
-   * @type {boolean} [narrow=false]
-   */
   export let narrow = false;
 
-  /**
+  /** Set to `true` to use the fullWidth variant */
-   * Set to `true` to use the fullWidth variant
-   * @type {boolean} [fullWidth=false]
-   */
   export let fullWidth = false;
 
-  /**
+  /** Set to `true` to remove the gutter */
-   * Set to `true` to remove the gutter
-   * @type {boolean} [noGutter=false]
-   */
   export let noGutter = false;
 
-  /**
+  /** Set to `true` to remove the left gutter */
-   * Set to `true` to remove the left gutter
-   * @type {boolean} [noGutterLeft=false]
-   */
   export let noGutterLeft = false;
 
-  /**
+  /** Set to `true` to remove the right gutter */
-   * Set to `true` to remove the right gutter
-   * @type {boolean} [noGutterRight=false]
-   */
   export let noGutterRight = false;
 
   $: props = {

src/Grid/Row.svelte

@@ -1,39 +1,28 @@
 <script>
+  /**
+   * @restProps {div}
+   * @slot {{ props: { class: string; [key: string]: any; } }}
+   */
+
   /**
    * Set to `true` to render a custom HTML element
    * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
-   * @type {boolean} [as=false]
    */
   export let as = false;
 
-  /**
+  /** Set to `true` to use the condensed variant */
-   * Set to `true` to use the condensed variant
-   * @type {boolean} [condensed=false]
-   */
   export let condensed = false;
 
-  /**
+  /** Set to `true` to use the narrow variant */
-   * Set to `true` to use the narrow variant
-   * @type {boolean} [narrow=false]
-   */
   export let narrow = false;
 
-  /**
+  /** Set to `true` to remove the gutter */
-   * Set to `true` to remove the gutter
-   * @type {boolean} [noGutter=false]
-   */
   export let noGutter = false;
 
-  /**
+  /** Set to `true` to remove the left gutter */
-   * Set to `true` to remove the left gutter
-   * @type {boolean} [noGutterLeft=false]
-   */
   export let noGutterLeft = false;
 
-  /**
+  /** Set to `true` to remove the right gutter */
-   * Set to `true` to remove the right gutter
-   * @type {boolean} [noGutterRight=false]
-   */
   export let noGutterRight = false;
 
   $: props = {

src/Icon/Icon.svelte

@@ -1,18 +1,19 @@
 <script>
+  /**
+   * @extends {"./IconSkeleton"} IconSkeletonProps
+   * @restProps {svg}
+   */
+
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * Icon size must be 16px (e.g. `Add16`, `Task16`)
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
-   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [render]
    */
   export let render = undefined;
 
-  /**
+  /** Set to `true` to display the skeleton state */
-   * Set to `true` to display the skeleton state
-   * @type {boolean} [skeleton=false]
-   */
   export let skeleton = false;
 
-  import IconSkeleton from "./Icon.Skeleton.svelte";
+  import IconSkeleton from "./IconSkeleton.svelte";
 </script>
 
 {#if skeleton}

src/Icon/IconSkeleton.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set the size of the icon */
-   * Set the size of the icon
-   * @type {number} [size=16]
-   */
   export let size = 16;
 </script>
 

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";

src/InlineLoading/InlineLoading.svelte

@@ -1,26 +1,23 @@
 <script>
   /**
    * Set the loading status
-   * @type {"active" | "inactive" | "finished" | "error"} [status="active"]
+   * @type {"active" | "inactive" | "finished" | "error"}
    */
   export let status = "active";
 
   /**
    * Set the loading description
-   * @type {string} [description]
+   * @type {string}
    */
   export let description = undefined;
 
   /**
    * Specify the ARIA label for the loading icon
-   * @type {string} [iconDescription="Expand/Collapse"]
+   * @type {string}
    */
   export let iconDescription = undefined;
 
-  /**
+  /** Specify the timeout delay (ms) after `status` is set to "success" */
-   * Specify the timeout delay (ms) after `status` is set to "success"
-   * @type {number} [successDelay=1500]
-   */
   export let successDelay = 1500;
 
   import { createEventDispatcher, afterUpdate, onMount } from "svelte";

src/Link/Link.svelte

@@ -1,38 +1,26 @@
 <script>
   /**
    * Specify the size of the link
-   * @type {"sm" | "lg"} [size]
+   * @type {"sm" | "lg"}
    */
   export let size = undefined;
 
   /**
    * Specify the href value
-   * @type {string} [href]
+   * @type {string}
    */
   export let href = undefined;
 
-  /**
+  /** Set to `true` to use the inline variant */
-   * Set to `true` to use the inline variant
-   * @type {boolean} [inline=false]
-   */
   export let inline = false;
 
-  /**
+  /** Set to `true` to disable the checkbox */
-   * Set to `true` to disable the checkbox
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to allow visited styles */
-   * Set to `true` to allow visited styles
-   * @type {boolean} [visited=false]
-   */
   export let visited = false;
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLAnchorElement | HTMLParagraphElement} [ref=null]
-   */
   export let ref = null;
 </script>
 

src/ListBox/ListBox.svelte

@@ -1,44 +1,29 @@
 <script>
   /**
    * Set the size of the list box
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
   /**
    * Set the type of the list box
-   * @type {"default" | "inline"} [type="default"]
+   * @type {"default" | "inline"}
    */
   export let type = "default";
 
-  /**
+  /** Set to `true` to open the list box */
-   * Set to `true` to open the list box
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to disable the list box */
-   * Set to `true` to disable the list box
-   * @type {boolean} [disable=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText=""]
-   */
   export let invalidText = "";
 </script>
 

src/ListBox/ListBoxField.svelte

@@ -1,51 +1,32 @@
 <script>
   /**
-   * Set to `true` to disable the list box field
+   * @typedef {"close" | "open"} ListBoxFieldTranslationId
-   * @type {boolean} [disabled=false]
    */
+
+  /** Set to `true` to disable the list box field */
   export let disabled = false;
 
-  /**
+  /** Specify the role attribute */
-   * Specify the role attribute
-   * @type {string} [role="combobox"]
-   */
   export let role = "combobox";
 
-  /**
+  /** Specify the tabindex */
-   * Specify the tabindex
-   * @type {string} [tabindex="-1"]
-   */
   export let tabindex = "-1";
 
-  /**
+  /** Default translation ids */
-   * Default translation ids
-   * @constant
-   * @type {{ close: "close"; open: "open"; }}
-   */
   export const translationIds = { close: "close", open: "open" };
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxFieldTranslationId) => string} [translateWithId = (id) => string]
+   * @type {(id: ListBoxFieldTranslationId) => string}
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {"close" | "open"} ListBoxFieldTranslationId
-   */
-
   import { getContext } from "svelte";
 
   const defaultTranslations = {

src/ListBox/ListBoxMenu.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLDivElement} [ref=null]
-   */
   export let ref = null;
 </script>
 

src/ListBox/ListBoxMenuIcon.svelte

@@ -1,27 +1,20 @@
 <script>
   /**
-   * Set to `true` to open the list box menu icon
+   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
-   * @type {boolean} [open=false]
    */
+
+  /** Set to `true` to open the list box menu icon */
   export let open = false;
 
-  /**
+  /** Default translation ids */
-   * Default translation ids
-   * @constant
-   * @type {{ close: "close"; open: "open" }}
-   */
   export const translationIds = { close: "close", open: "open" };
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxMenuIconTranslationId) => string} [translateWithId = (id) => string]
+   * @type {(id: ListBoxMenuIconTranslationId) => string}
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  /**
-   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
-   */
-
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
   const defaultTranslations = {

src/ListBox/ListBoxMenuItem.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set to `true` to enable the active state */
-   * Set to `true` to enable the active state
-   * @type {boolean} [active=false]
-   */
   export let active = false;
 
-  /**
+  /** Set to `true` to enable the highlighted state */
-   * Set to `true` to enable the highlighted state
-   * @type {boolean} [highlighted=false]
-   */
   export let highlighted = false;
 </script>
 

src/ListBox/ListBoxSelection.svelte

@@ -1,21 +1,18 @@
 <script>
+  /**
+   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
+   */
+
   /**
    * Specify the number of selected items
-   * @type {any} [selectionCount]
+   * @type {any}
    */
   export let selectionCount = undefined;
 
-  /**
+  /** Set to `true` to disable the list box selection */
-   * Set to `true` to disable the list box selection
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Default translation ids */
-   * Default translation ids
-   * @constant
-   * @type {{ clearAll: "clearAll"; clearSelection: "clearSelection" }}
-   */
   export const translationIds = {
     clearAll: "clearAll",
     clearSelection: "clearSelection",
@@ -23,20 +20,13 @@
 
   /**
    * Override the default translation ids
-   * @type {(id: ListBoxSelectionTranslationId) => string} [translateWithId = (id) => string]
+   * @type {(id: ListBoxSelectionTranslationId) => string}
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
-   */
-
   import { createEventDispatcher, getContext } from "svelte";
   import Close16 from "carbon-icons-svelte/lib/Close16";
 

src/Loading/Loading.svelte

@@ -1,32 +1,17 @@
 <script>
-  /**
+  /** Set to `true` to use the small variant */
-   * Set to `true` to use the small variant
-   * @type {boolean} [small=false]
-   */
   export let small = false;
 
-  /**
+  /** Set to `false` to disable the active state */
-   * Set to `false` to disable the active state
-   * @type {boolean} [active=true]
-   */
   export let active = true;
 
-  /**
+  /** Set to `false` to disable the overlay */
-   * Set to `false` to disable the overlay
-   * @type {boolean} [withOverlay=false]
-   */
   export let withOverlay = true;
 
-  /**
+  /** Specify the label description */
-   * Specify the label description
-   * @type {string} [description="Active loading indicator"]
-   */
   export let description = "Active loading indicator";
 
-  /**
+  /** Set an id for the label element */
-   * Set an id for the label element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   $: spinnerRadius = small ? "26.8125" : "37.5";

src/Modal/Modal.svelte

@@ -1,116 +1,71 @@
 <script>
   /**
    * Set the size of the modal
-   * @type {"xs" | "sm" | "lg"} [size]
+   * @type {"xs" | "sm" | "lg"}
    */
   export let size = undefined;
 
-  /**
+  /** Set to `true` to open the modal */
-   * Set to `true` to open the modal
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to use the danger variant */
-   * Set to `true` to use the danger variant
-   * @type {boolean} [danger=false]
-   */
   export let danger = false;
 
-  /**
+  /** Set to `true` to enable alert mode */
-   * Set to `true` to enable alert mode
-   * @type {boolean} [alert=false]
-   */
   export let alert = false;
 
-  /**
+  /** Set to `true` to use the passive variant */
-   * Set to `true` to use the passive variant
-   * @type {boolean} [passiveModal=false]
-   */
   export let passiveModal = false;
 
   /**
    * Specify the modal heading
-   * @type {string} [modalHeading]
+   * @type {string}
    */
   export let modalHeading = undefined;
 
   /**
    * Specify the modal label
-   * @type {string} [modalLabel]
+   * @type {string}
    */
   export let modalLabel = undefined;
 
   /**
    * Specify the ARIA label for the modal
-   * @type {string} [modalAriaLabel]
+   * @type {string}
    */
   export let modalAriaLabel = undefined;
 
-  /**
+  /** Specify the ARIA label for the close icon */
-   * Specify the ARIA label for the close icon
-   * @type {string} [iconDescription="Close the modal"]
-   */
   export let iconDescription = "Close the modal";
 
-  /**
+  /** Set to `true` if the modal contains form elements */
-   * Set to `true` if the modal contains form elements
-   * @type {boolean} [hasForm=false]
-   */
   export let hasForm = false;
 
-  /**
+  /** Set to `true` if the modal contains scrolling content */
-   * Set to `true` if the modal contains scrolling content
-   * @type {boolean} [hasScrollingContent=false]
-   */
   export let hasScrollingContent = false;
 
-  /**
+  /** Specify the primary button text */
-   * Specify the primary button text
-   * @type {string} [primaryButtonText=""]
-   */
   export let primaryButtonText = "";
 
-  /**
+  /** Set to `true` to disable the primary button */
-   * Set to `true` to disable the primary button
-   * @type {boolean} [primaryButtonDisabled=false]
-   */
   export let primaryButtonDisabled = false;
 
-  /**
+  /** Set to `true` for the primary button to be triggered when pressing "Enter" */
-   * Set to `true` for the primary button to be triggered when pressing "Enter"
-   * @type {boolean} [shouldSubmitOnEnter=true]
-   */
   export let shouldSubmitOnEnter = true;
 
-  /**
+  /** Specify the secondary button text */
-   * Specify the secondary button text
-   * @type {string} [secondaryButtonText=""]
-   */
   export let secondaryButtonText = "";
 
-  /**
+  /** Specify a selector to be focused when opening the modal */
-   * Specify a selector to be focused when opening the modal
-   * @type {string} [selectorPrimaryFocus="[data-modal-primary-focus]"]
-   */
   export let selectorPrimaryFocus = "[data-modal-primary-focus]";
 
-  /**
+  /** Set to `true` to prevent the modal from closing when clicking outside */
-   * Set to `true` to prevent the modal from closing when clicking outside
-   * @type {boolean} [preventCloseOnClickOutside=false]
-   */
   export let preventCloseOnClickOutside = false;
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the top-level HTML element */
-   * Obtain a reference to the top-level HTML element
-   * @type {null | HTMLElement} [ref=null]
-   */
   export let ref = null;
 
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";

src/MultiSelect/MultiSelect.svelte

@@ -1,149 +1,107 @@
 <script>
   /**
    * Set the multiselect items
-   * @type {MultiSelectItem[]} [items=[]]
+   * @type {MultiSelectItem[]}
    */
   export let items = [];
 
   /**
    * Override the display of a multiselect item
-   * @type {(item: MultiSelectItem) => string} [itemToString = (item: MultiSelectItem) =>  MultiSelectItemText | MultiSelectItemId]
+   * @type {(item: MultiSelectItem) => string}
    */
   export let itemToString = (item) => item.text || item.id;
 
   /**
    * Set the selected ids
-   * @type {MultiSelectItemId[]} [selectedIds=[]]
+   * @type {MultiSelectItemId[]}
    */
   export let selectedIds = [];
 
-  /**
+  /** Specify the multiselect value */
-   * Specify the multiselect value
-   * @type {string} [value=""]
-   */
   export let value = "";
 
   /**
    * Set the size of the combobox
-   * @type {"sm" | "lg" | "xl"} [size]
+   * @type {"sm" | "lg" | "xl"}
    */
   export let size = undefined;
 
   /**
    * Specify the type of multiselect
-   * @type {"default" | "inline"} [type="default"]
+   * @type {"default" | "inline"}
    */
   export let type = "default";
 
   /**
    * Specify the selection feedback after selecting items
-   * @type {"top" | "fixed" | "top-after-reopen"} [selectionFeedback="top-after-reopen"]
+   * @type {"top" | "fixed" | "top-after-reopen"}
    */
   export let selectionFeedback = "top-after-reopen";
 
-  /**
+  /** Set to `true` to disable the dropdown */
-   * Set to `true` to disable the dropdown
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to filter items */
-   * Set to `true` to filter items
-   * @type {boolean} [filterable=false]
-   */
   export let filterable = false;
 
   /**
    * Override the filtering logic
    * The default filtering is an exact string comparison
-   * @type {(item: MultiSelectItem, value: string) => string} [filterItem = (item: MultiSelectItem, value: string) => string]
+   * @type {(item: MultiSelectItem, value: string) => string}
    */
   export let filterItem = (item, value) =>
     item.text.toLowerCase().includes(value.toLowerCase());
 
-  /**
+  /** Set to `true` to open the dropdown */
-   * Set to `true` to open the dropdown
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Specify the locale */
-   * Specify the locale
-   * @type {string} [locale="en"]
-   */
   export let locale = "en";
 
-  /**
+  /** Specify the placeholder text */
-   * Specify the placeholder text
-   * @type {string} [placeholder=""]
-   */
   export let placeholder = "";
 
   /**
    * Override the sorting logic
    * The default sorting compare the item text value
-   * @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
+   * @type {((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)}
    */
   export let sortItem = (a, b) =>
     a.text.localeCompare(b.text, locale, { numeric: true });
 
   /**
    * Override the default translation ids
-   * @type {(id: any) => string} [translateWithId]
+   * @type {(id: any) => string}
    */
   export let translateWithId = undefined;
 
-  /**
+  /** Specify the title text */
-   * Specify the title text
-   * @type {string} [titleText=""]
-   */
   export let titleText = "";
 
-  /**
+  /** Set to `true` to pass the item to `itemToString` in the checkbox */
-   * Set to `true` to pass the item to `itemToString` in the checkbox
-   * @type {boolean} [useTitleInItem=false]
-   */
   export let useTitleInItem = false;
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText=""]
-   */
   export let invalidText = "";
 
-  /**
+  /** Specify the helper text */
-   * Specify the helper text
-   * @type {string} [helperText=""]
-   */
   export let helperText = "";
 
-  /**
+  /** Specify the list box label */
-   * Specify the list box label
-   * @type {string} [label]
-   */
   export let label = "";
 
-  /**
+  /** Set an id for the list box component */
-   * Set an id for the list box component
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
    * Specify a name attribute for the select
-   * @type {string} [name]
+   * @type {string}
    */
   export let name = undefined;
 

src/Notification/InlineNotification.svelte

@@ -1,56 +1,35 @@
 <script>
   /**
    * Set the type of notification
-   * @type {"toast" | "inline"} [notificationType="toast"]
+   * @type {"toast" | "inline"}
    */
   export let notificationType = "inline";
 
   /**
    * Specify the kind of notification
-   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
    */
   export let kind = "error";
 
-  /**
+  /** Set to `true` to use the low contrast variant */
-   * Set to `true` to use the low contrast variant
-   * @type {boolean} [lowContrast=false]
-   */
   export let lowContrast = false;
 
-  /**
+  /** Set the timeout duration (ms) to hide the notification after opening it */
-   * Set the timeout duration (ms) to hide the notification after opening it
-   * @type {number} [timeout=0]
-   */
   export let timeout = 0;
 
-  /**
+  /** Set the `role` attribute */
-   * Set the `role` attribute
-   * @type {string} [role="alert"]
-   */
   export let role = "alert";
 
-  /**
+  /** Specify the title text */
-   * Specify the title text
-   * @type {string} [title="Title"]
-   */
   export let title = "Title";
 
-  /**
+  /** Specify the subtitle text */
-   * Specify the subtitle text
-   * @type {string} [subtitle=""]
-   */
   export let subtitle = "";
 
-  /**
+  /** Set to `true` to hide the close button */
-   * Set to `true` to hide the close button
-   * @type {boolean} [hideCloseButton=false]
-   */
   export let hideCloseButton = false;
 
-  /**
+  /** Specify the ARIA label for the icon */
-   * Specify the ARIA label for the icon
-   * @type {string} [iconDescription="Closes notification"]
-   */
   export let iconDescription = "Closes notification";
 
   import { createEventDispatcher, onMount } from "svelte";

src/Notification/NotificationButton.svelte

@@ -1,26 +1,23 @@
 <script>
   /**
    * Set the type of notification
-   * @type {"toast" | "inline"} [notificationType="toast"]
+   * @type {"toast" | "inline"}
    */
   export let notificationType = "toast";
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [renderIcon]
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let renderIcon = Close20;
 
   /**
    * Specify the title of the icon
-   * @type {string} [title]
+   * @type {string}
    */
   export let title = undefined;
 
-  /**
+  /** Specify the ARIA label for the icon */
-   * Specify the ARIA label for the icon
-   * @type {string} [iconDescription="Close icon"]
-   */
   export let iconDescription = "Close icon";
 
   import Close20 from "carbon-icons-svelte/lib/Close20";

src/Notification/NotificationIcon.svelte

@@ -1,20 +1,17 @@
 <script>
   /**
    * Specify the kind of notification icon
-   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
    */
   export let kind = "error";
 
   /**
    * Set the type of notification
-   * @type {"toast" | "inline"} [notificationType="toast"]
+   * @type {"toast" | "inline"}
    */
   export let notificationType = "toast";
 
-  /**
+  /** Specify the ARIA label for the icon */
-   * Specify the ARIA label for the icon
-   * @type {string} [iconDescription="Closes notification"]
-   */
   export let iconDescription = "Closes notification";
 
   import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";

src/Notification/NotificationTextDetails.svelte

@@ -1,26 +1,17 @@
 <script>
   /**
    * Set the type of notification
-   * @type {"toast" | "inline"} [notificationType="toast"]
+   * @type {"toast" | "inline"}
    */
   export let notificationType = "toast";
 
-  /**
+  /** Specify the title text */
-   * Specify the title text
-   * @type {string} [title="Title"]
-   */
   export let title = "Title";
 
-  /**
+  /** Specify the subtitle text */
-   * Specify the subtitle text
-   * @type {string} [subtitle=""]
-   */
   export let subtitle = "";
 
-  /**
+  /** Specify the caption text */
-   * Specify the caption text
-   * @type {string} [caption="Caption"]
-   */
   export let caption = "Caption";
 </script>
 

src/Notification/ToastNotification.svelte

@@ -1,62 +1,38 @@
 <script>
   /**
    * Set the type of notification
-   * @type {"toast" | "inline"} [notificationType="toast"]
+   * @type {"toast" | "inline"}
    */
   export let notificationType = "toast";
 
   /**
    * Specify the kind of notification
-   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"} [kind="error"]
+   * @type {"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"}
    */
   export let kind = "error";
 
-  /**
+  /** Set to `true` to use the low contrast variant */
-   * Set to `true` to use the low contrast variant
-   * @type {boolean} [lowContrast=false]
-   */
   export let lowContrast = false;
 
-  /**
+  /** Set the timeout duration (ms) to hide the notification after opening it */
-   * Set the timeout duration (ms) to hide the notification after opening it
-   * @type {number} [timeout=0]
-   */
   export let timeout = 0;
 
-  /**
+  /** Set the `role` attribute */
-   * Set the `role` attribute
-   * @type {string} [role="alert"]
-   */
   export let role = "alert";
 
-  /**
+  /** Specify the title text */
-   * Specify the title text
-   * @type {string} [title="Title"]
-   */
   export let title = "Title";
 
-  /**
+  /** Specify the subtitle text */
-   * Specify the subtitle text
-   * @type {string} [subtitle=""]
-   */
   export let subtitle = "";
 
-  /**
+  /** Specify the caption text */
-   * Specify the caption text
-   * @type {string} [caption="Caption"]
-   */
   export let caption = "Caption";
 
-  /**
+  /** Specify the ARIA label for the icon */
-   * Specify the ARIA label for the icon
-   * @type {string} [iconDescription="Closes notification"]
-   */
   export let iconDescription = "Closes notification";
 
-  /**
+  /** Set to `true` to hide the close button */
-   * Set to `true` to hide the close button
-   * @type {boolean} [hideCloseButton=false]
-   */
   export let hideCloseButton = false;
 
   import { createEventDispatcher, onMount } from "svelte";

src/NumberInput/NumberInput.svelte

@@ -1,109 +1,76 @@
 <script>
+  /**
+   * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   */
+
   /**
    * Set the size of the input
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
   /**
    * Specify the input value
-   * @type {string} [value=""]
+   * @type {number | string}
    */
   export let value = "";
 
-  /**
+  /** Specify the step increment */
-   * Specify the step increment
-   * @type {number} [step=1]
-   */
   export let step = 1;
 
   /**
    * Specify the maximum value
-   * @type {number} [max]
+   * @type {number}
    */
   export let max = undefined;
 
   /**
    * Specify the minimum value
-   * @type {number} [min]
+   * @type {number}
    */
   export let min = undefined;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` for the input to be read-only */
-   * Set to `true` for the input to be read-only
-   * @type {boolean} [readonly=false]
-   */
   export let readonly = false;
 
-  /**
+  /** Set to `true` to enable the mobile variant */
-   * Set to `true` to enable the mobile variant
-   * @type {boolean} [mobile=false]
-   */
   export let mobile = false;
 
-  /**
+  /** Set to `true` to allow for an empty value */
-   * Set to `true` to allow for an empty value
-   * @type {boolean} [allowEmpty=false]
-   */
   export let allowEmpty = false;
 
-  /**
+  /** Set to `true` to disable the input */
-   * Set to `true` to disable the input
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the ARIA label for the increment icons */
-   * Specify the ARIA label for the increment icons
-   * @type {string} [iconDescription=""]
-   */
   export let iconDescription = "";
 
-  /**
+  /** Set to `true` to indicate an invalid state */
-   * Set to `true` to indicate an invalid state
-   * @type {boolean} [invalid=false]
-   */
   export let invalid = false;
 
-  /**
+  /** Specify the invalid state text */
-   * Specify the invalid state text
-   * @type {string} [invalidText="Provide invalidText"]
-   */
   export let invalidText = "";
 
-  /**
+  /** Specify the helper text */
-   * Specify the helper text
-   * @type {string} [helperText=""]
-   */
   export let helperText = "";
 
-  /**
+  /** Specify the label text */
-   * Specify the label text
-   * @type {string} [label=""]
-   */
   export let label = "";
 
-  /**
+  /** Set to `true` to visually hide the label text */
-   * Set to `true` to visually hide the label text
-   * @type {boolean} [hideLabel=false]
-   */
   export let hideLabel = false;
 
   /**
    * Override the default translation ids
-   * @type {(id: NumberInputTranslationId) => string} [translateWithId = (id: NumberInputTranslationId) => string]
+   * @type {(id: NumberInputTranslationId) => string}
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
   /**
    * Default translation ids
-   * @constant
    * @type {{ increment: "increment"; decrement: "decrement" }}
    */
   export const translationIds = {
@@ -111,28 +78,18 @@
     decrement: "decrement",
   };
 
-  /**
+  /** Set an id for the input element */
-   * Set an id for the input element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   /**
    * Specify a name attribute for the input
-   * @type {string} [name]
+   * @type {string}
    */
   export let name = undefined;
 
-  /**
+  /** Obtain a reference to the input HTML element */
-   * Obtain a reference to the input HTML element
-   * @type {null | HTMLInputElement} [ref=null]
-   */
   export let ref = null;
 
-  /**
-   * @typedef {"increment" | "decrement"} NumberInputTranslationId
-   */
-
   import { createEventDispatcher, afterUpdate } from "svelte";
   import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
   import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";

src/NumberInput/NumberInputSkeleton.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
+  /** Set to `true` to hide the label text */
-   * Set to `true` to hide the label text
-   * @type {boolean} [hideLabel=false]
-   */
   export let hideLabel = false;
 </script>
 

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";

src/OrderedList/OrderedList.svelte

@@ -1,14 +1,8 @@
 <script>
-  /**
+  /** Set to `true` to use the nested variant */
-   * Set to `true` to use the nested variant
-   * @type {boolean} [nested=false]
-   */
   export let nested = false;
 
-  /**
+  /** Set to `true` to use native list styles */
-   * Set to `true` to use native list styles
-   * @type {boolean} [native=false]
-   */
   export let native = false;
 </script>
 

src/OverflowMenu/OverflowMenu.svelte

@@ -1,74 +1,53 @@
 <script>
   /**
    * Specify the size of the overflow menu
-   * @type {"sm" | "xl"} [size]
+   * @type {"sm" | "xl"}
    */
   export let size = undefined;
 
   /**
    * Specify the direction of the overflow menu relative to the button
-   * @type {"top" | "bottom"} [direction="bottom"]
+   * @type {"top" | "bottom"}
    */
   export let direction = "bottom";
 
-  /**
+  /** Set to `true` to open the menu */
-   * Set to `true` to open the menu
-   * @type {boolean} [open=false]
-   */
   export let open = false;
 
-  /**
+  /** Set to `true` to enable the light variant */
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
   export let light = false;
 
-  /**
+  /** Set to `true` to flip the menu relative to the button */
-   * Set to `true` to flip the menu relative to the button
-   * @type {boolean} [flipped=false]
-   */
   export let flipped = false;
 
   /**
    * Specify the menu options class
-   * @type {string} [menuOptionsClass]
+   * @type {string}
    */
   export let menuOptionsClass = undefined;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte/lib/Add16").default} [icon]
+   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
    */
   export let icon = OverflowMenuVertical16;
 
   /**
    * Specify the icon class
-   * @type {string} [iconClass]
+   * @type {string}
    */
   export let iconClass = undefined;
 
-  /**
+  /** Specify the ARIA label for the icon */
-   * Specify the ARIA label for the icon
-   * @type {string} [iconDescription="Open and close list of options"]
-   */
   export let iconDescription = "Open and close list of options";
 
-  /**
+  /** Set an id for the button element */
-   * Set an id for the button element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the trigger button element */
-   * Obtain a reference to the trigger button element
-   * @type {null | HTMLButtonElement} [ref=null]
-   */
   export let buttonRef = null;
 
-  /**
+  /** Obtain a reference to the overflow menu element */
-   * Obtain a reference to the overflow menu element
-   * @type {null | HTMLUListElement} [ref=null]
-   */
   export let menuRef = null;
 
   import { createEventDispatcher, setContext, afterUpdate } from "svelte";

src/OverflowMenu/OverflowMenuItem.svelte

@@ -2,56 +2,31 @@
   /**
    * Specify the item text
    * Alternatively, use the default slot for a custom element
-   * @type {string} [text="Provide text"]
    */
   export let text = "Provide text";
 
-  /**
+  /** Specify the `href` attribute if the item is a link */
-   * Specify the `href` attribute if the item is a link
-   * @type {string} [href=""]
-   */
   export let href = "";
 
-  /**
+  /** Set to `true` if the item should be focused when opening the menu */
-   * Set to `true` if the item should be focused when opening the menu
-   * @type {boolean} [primaryFocus=false]
-   */
   export let primaryFocus = false;
 
-  /**
+  /** Set to `true` to disable the item */
-   * Set to `true` to disable the item
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Set to `true` to include a divider */
-   * Set to `true` to include a divider
-   * @type {boolean} [hasDivider=false]
-   */
   export let hasDivider = false;
 
-  /**
+  /** Set to `true` to use the danger variant */
-   * Set to `true` to use the danger variant
-   * @type {boolean} [danger=false]
-   */
   export let danger = false;
 
-  /**
+  /** Set to `false` to omit the button `title` attribute */
-   * Set to `false` to omit the button `title` attribute
-   * @type {boolean} [requireTitle=false]
-   */
   export let requireTitle = true;
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /**
+  /** Obtain a reference to the HTML element */
-   * Obtain a reference to the HTML element
-   * @type {null | HTMLAnchorElement | HTMLButtonElement} [ref=null]
-   */
   export let ref = null;
 
   import { getContext, afterUpdate } from "svelte";

src/Pagination/Pagination.svelte

@@ -1,100 +1,67 @@
 <script>
-  /**
+  /** Specify the current page index */
-   * Specify the current page index
-   * @type {number} [page=1]
-   */
   export let page = 1;
 
-  /**
+  /** Specify the total number of items */
-   * Specify the total number of items
-   * @type {number} [total=0]
-   */
   export let totalItems = 0;
 
-  /**
+  /** Set to `true` to disable the pagination */
-   * Set to `true` to disable the pagination
-   * @type {boolean} [disabled=false]
-   */
   export let disabled = false;
 
-  /**
+  /** Specify the forward button text */
-   * Specify the forward button text
-   * @type {string} [forwardText="Next page"]
-   */
   export let forwardText = "Next page";
 
-  /**
+  /** Specify the backward button text */
-   * Specify the backward button text
-   * @type {string} [backwardText="Previous page"]
-   */
   export let backwardText = "Previous page";
 
-  /**
+  /** Specify the items per page text */
-   * Specify the items per page text
-   * @type {string} [itemsPerPageText="Items per page:"]
-   */
   export let itemsPerPageText = "Items per page:";
 
   /**
    * Override the item text
-   * @type {(min: number, max: number) => string} [itemText = (min: number, max: number) => string]
+   * @type {(min: number, max: number) => string}
    */
   export let itemText = (min, max) => `${min}–${max} items`;
 
   /**
    * Override the item range text
-   * @type {(min: number, max: number, total: number) => string} [itemRangeText = (min: number, max: number, total: number) => string]
+   * @type {(min: number, max: number, total: number) => string}
    */
   export let itemRangeText = (min, max, total) =>
     `${min}–${max} of ${total} items`;
 
-  /**
+  /** Set to `true` to disable the page input */
-   * Set to `true` to disable the page input
-   * @type {boolean} [pageInputDisabled=false]
-   */
   export let pageInputDisabled = false;
 
-  /**
+  /** Set to `true` to disable the page size input */
-   * Set to `true` to disable the page size input
-   * @type {boolean} [pageSizeInputDisabled=false]
-   */
   export let pageSizeInputDisabled = false;
 
-  /**
+  /** Specify the number of items to display in a page */
-   * Specify the number of items to display in a page
-   * @type {number} [pageSize=10]
-   */
   export let pageSize = 10;
 
   /**
    * Specify the available page sizes
-   * @type {number[]} [pageSizes=[10]]
+   * @type {number[]}
    */
   export let pageSizes = [10];
 
-  /**
+  /** Set to `true` if the number of pages is unknown */
-   * Set to `true` if the number of pages is unknown
-   * @type {boolean} [pagesUnknown=false]
-   */
   export let pagesUnknown = false;
 
   /**
    * Override the page text
-   * @type {(page: number) => string} [pageText = (current: number) => string]
+   * @type {(page: number) => string}
    */
   export let pageText = (page) => `page ${page}`;
 
   /**
    * Override the page range text
-   * @type {(current: number, total: number) => string} [pageRangeText = (current: number, total: number) => string]
+   * @type {(current: number, total: number) => string}
    */
   export let pageRangeText = (current, total) =>
     `of ${total} page${total === 1 ? "" : "s"}`;
 
-  /**
+  /** Set an id for the top-level element */
-   * Set an id for the top-level element
-   * @type {string} [id]
-   */
   export let id = "ccs-" + Math.random().toString(36);
 
   import { createEventDispatcher } from "svelte";