Run npm run lint

2025-09-14 18:01:06 +00:00 · 2025-03-23 11:26:25 -07:00 · 2025-03-23 11:26:25 -07:00 · 2031cb7585
commit 2031cb7585
parent b982387a8c
480 changed files with 8985 additions and 9048 deletions
--- a/docs/package.json
+++ b/docs/package.json
@ -30,10 +30,7 @@
  "routify": {
    "routifyDir": ".routify",
    "dynamicImports": true,
-    "extensions": [
-      "svelte",
-      "svx"
-    ]
+    "extensions": ["svelte", "svx"]
  },
  "type": "module"
 }
--- a/docs/src/App.svelte
+++ b/docs/src/App.svelte
@ -1,6 +1,6 @@
 <script>
-  import { Router } from "@sveltech/routify";
-  import { routes } from "../.routify/routes";
+import { Router } from "@sveltech/routify";
+import { routes } from "../.routify/routes";
 </script>

 <Router {routes} />
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@ -1,49 +1,48 @@
 <script>
-  export let component = {
-    props: [],
-    slots: [],
-    events: [],
-    rest_props: undefined,
-    typedefs: [],
-  };
+export let component = {
+  props: [],
+  slots: [],
+  events: [],
+  rest_props: undefined,
+  typedefs: [],
+};

-  import { onMount } from "svelte";
-  import {
-    OutboundLink,
-    StructuredList,
-    StructuredListHead,
-    StructuredListRow,
-    StructuredListCell,
-    StructuredListBody,
-    UnorderedList,
-    ListItem,
-    Tag,
-  } from "carbon-components-svelte";
-  import InlineSnippet from "./InlineSnippet.svelte";
+import { onMount } from "svelte";
+import {
+  OutboundLink,
+  StructuredList,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+  UnorderedList,
+  ListItem,
+  Tag,
+} from "carbon-components-svelte";
+import InlineSnippet from "./InlineSnippet.svelte";

-  let AsyncPreviewTypeScript;
+let AsyncPreviewTypeScript;

-  onMount(async () => {
-    AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte"))
-      .default;
-  });
+onMount(async () => {
+  AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte")).default;
+});

-  const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
-  const typeMap = {
-    string: "string",
-    boolean: "boolean",
-    number: "number",
-    null: "null",
-    Date: "JavaScript Date",
-  };
+const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
+const typeMap = {
+  string: "string",
+  boolean: "boolean",
+  number: "number",
+  null: "null",
+  Date: "JavaScript Date",
+};

-  $: source = `https://github.com/carbon-design-system/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",
-  );
+$: source = `https://github.com/carbon-design-system/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>

 <p style="margin-bottom: var(--cds-layout-02)">
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@ -1,8 +1,8 @@
 <script>
-  export let code = "";
+export let code = "";

-  import copy from "clipboard-copy";
-  import { CodeSnippet } from "carbon-components-svelte";
+import copy from "clipboard-copy";
+import { CodeSnippet } from "carbon-components-svelte";
 </script>

 <div>
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@ -1,16 +1,16 @@
 <script>
-  export let code = "";
-  export let codeRaw = "";
-  export let src = "";
-  export let framed = false;
+export let code = "";
+export let codeRaw = "";
+export let src = "";
+export let framed = false;

-  import copy from "clipboard-copy";
-  import { CodeSnippet, Button } from "carbon-components-svelte";
-  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
-  import { url } from "@sveltech/routify";
-  import { theme } from "../store";
+import copy from "clipboard-copy";
+import { CodeSnippet, Button } from "carbon-components-svelte";
+import Launch from "carbon-icons-svelte/lib/Launch.svelte";
+import { url } from "@sveltech/routify";
+import { theme } from "../store";

-  $: themedSrcUrl = $url(`${src}?theme=${$theme}`);
+$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
 </script>

 <div class="preview">
--- a/docs/src/components/PreviewTypeScript.svelte
+++ b/docs/src/components/PreviewTypeScript.svelte
@ -1,17 +1,13 @@
 <script>
-  export let code = "";
-  export let type = "multi";
+export let code = "";
+export let type = "multi";

-  import { CodeSnippet } from "carbon-components-svelte";
-  import { highlight } from "prismjs";
-  import "prismjs/components/prism-typescript";
-  import copy from "clipboard-copy";
+import { CodeSnippet } from "carbon-components-svelte";
+import { highlight } from "prismjs";
+import "prismjs/components/prism-typescript";
+import copy from "clipboard-copy";

-  $: highlightedCode = highlight(
-    code,
-    Prism.languages.typescript,
-    "typescript",
-  );
+$: highlightedCode = highlight(code, Prism.languages.typescript, "typescript");
 </script>

 {#if type === "multi"}
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@ -1,15 +1,15 @@
 <script>
-  export let href = undefined;
-  export let title = "";
-  export let subtitle = "";
-  export let borderRight = false;
-  export let borderBottom = false;
+export let href = undefined;
+export let title = "";
+export let subtitle = "";
+export let borderRight = false;
+export let borderBottom = false;

-  import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
-  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
+import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
+import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
+import Launch from "carbon-icons-svelte/lib/Launch.svelte";

-  $: tileComponent = href ? ClickableTile : Tile;
+$: tileComponent = href ? ClickableTile : Tile;
 </script>

 <div class="card-wrapper" class:borderRight class:borderBottom>
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@ -1,69 +1,69 @@
 <script>
-  import {
-    Grid,
-    Link,
-    Row,
-    Column,
-    Content,
-    Button,
-    Select,
-    SelectItem,
-    InlineNotification,
-    Tabs,
-    Tab,
-    TabContent,
-  } from "carbon-components-svelte";
-  import Code from "carbon-icons-svelte/lib/Code.svelte";
-  import { page, metatags } from "@sveltech/routify";
-  import { onMount } from "svelte";
-  import { theme } from "../store";
-  import ComponentApi from "../components/ComponentApi.svelte";
-  import COMPONENT_API from "../COMPONENT_API.json";
+import {
+  Grid,
+  Link,
+  Row,
+  Column,
+  Content,
+  Button,
+  Select,
+  SelectItem,
+  InlineNotification,
+  Tabs,
+  Tab,
+  TabContent,
+} from "carbon-components-svelte";
+import Code from "carbon-icons-svelte/lib/Code.svelte";
+import { page, metatags } from "@sveltech/routify";
+import { onMount } from "svelte";
+import { theme } from "../store";
+import ComponentApi from "../components/ComponentApi.svelte";
+import COMPONENT_API from "../COMPONENT_API.json";

-  export let component = $page.title;
-  export let components = [component];
-  export let unreleased = false;
-  export let unstable = false;
+export let component = $page.title;
+export let components = [component];
+export let unreleased = false;
+export let unstable = false;

-  metatags.title = $page.title;
+metatags.title = $page.title;

-  // TODO: `find` is not supported in IE
-  $: api_components = components.map((i) =>
-    COMPONENT_API.components.find((_) => _.moduleName === i),
-  );
-  $: multiple = api_components.length > 1;
+// TODO: `find` is not supported in IE
+$: api_components = components.map((i) =>
+  COMPONENT_API.components.find((_) => _.moduleName === i),
+);
+$: multiple = api_components.length > 1;

-  onMount(() => {
-    const searchParams = new URLSearchParams(window.location.search);
-    const current_theme = searchParams.get("theme");
+onMount(() => {
+  const searchParams = new URLSearchParams(window.location.search);
+  const current_theme = searchParams.get("theme");

-    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
-      theme.set(current_theme);
-    }
-  });
+  if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+    theme.set(current_theme);
+  }
+});

-  function formatSourceURL(multiple) {
-    const filePath = api_components[0]?.filePath ?? "";
-
-    if (multiple) {
-      /**
-       * Link to folder for doc with multiple components.
-       * @example "src/Breadcrumb"
-       */
-      return filePath.split("/").slice(0, -1).join("/");
-    }
+function formatSourceURL(multiple) {
+  const filePath = api_components[0]?.filePath ?? "";

+  if (multiple) {
    /**
-     * Else, link to the component source.
-     * @example "src/Tile/ClickableTile.svelte"
+     * Link to folder for doc with multiple components.
+     * @example "src/Breadcrumb"
     */
-    return filePath;
+    return filePath.split("/").slice(0, -1).join("/");
  }

-  // TODO: [refactor] read from package.json value
-  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
-    multiple,
-  )}`;
+  /**
+   * Else, link to the component source.
+   * @example "src/Tile/ClickableTile.svelte"
+   */
+  return filePath;
+}
+
+// TODO: [refactor] read from package.json value
+$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
+  multiple,
+)}`;
 </script>

 <svelte:head>
--- a/docs/src/pages/_fallback.svelte
+++ b/docs/src/pages/_fallback.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
-  import { url, metatags } from "@sveltech/routify";
+import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
+import { url, metatags } from "@sveltech/routify";

-  metatags.title = "404";
+metatags.title = "404";
 </script>

 <Content>
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@ -1,64 +1,64 @@
 <script>
-  import {
-    isActive,
-    url,
-    layout,
-    beforeUrlChange,
-    goto,
-  } from "@sveltech/routify";
-  import {
-    Header,
-    HeaderUtilities,
-    HeaderAction,
-    HeaderActionLink,
-    HeaderPanelLinks,
-    HeaderPanelLink,
-    HeaderPanelDivider,
-    HeaderSearch,
-    SkipToContent,
-    SideNav,
-    SideNavItems,
-    SideNavMenuItem,
-    Theme,
-    Tag,
-  } from "carbon-components-svelte";
-  import MiniSearch from "minisearch";
-  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import { theme } from "../store";
-  import SEARCH_INDEX from "../SEARCH_INDEX.json";
+import {
+  isActive,
+  url,
+  layout,
+  beforeUrlChange,
+  goto,
+} from "@sveltech/routify";
+import {
+  Header,
+  HeaderUtilities,
+  HeaderAction,
+  HeaderActionLink,
+  HeaderPanelLinks,
+  HeaderPanelLink,
+  HeaderPanelDivider,
+  HeaderSearch,
+  SkipToContent,
+  SideNav,
+  SideNavItems,
+  SideNavMenuItem,
+  Theme,
+  Tag,
+} from "carbon-components-svelte";
+import MiniSearch from "minisearch";
+import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
+import { theme } from "../store";
+import SEARCH_INDEX from "../SEARCH_INDEX.json";

-  const miniSearch = new MiniSearch({
-    fields: ["text", "description"],
-    storeFields: ["text", "description", "href"],
-    searchOptions: {
-      prefix: true,
-      boost: { description: 2 },
-      fuzzy: 0.1,
-    },
-  });
+const miniSearch = new MiniSearch({
+  fields: ["text", "description"],
+  storeFields: ["text", "description", "href"],
+  searchOptions: {
+    prefix: true,
+    boost: { description: 2 },
+    fuzzy: 0.1,
+  },
+});

-  miniSearch.addAll(SEARCH_INDEX);
+miniSearch.addAll(SEARCH_INDEX);

-  const deprecated = [];
-  const new_components = [];
+const deprecated = [];
+const new_components = [];

-  let value = "";
-  let active = false;
-  $: results = miniSearch.search(value).slice(0, 10);
+let value = "";
+let active = false;
+$: results = miniSearch.search(value).slice(0, 10);

-  let isOpen = false;
-  let isSideNavOpen = true;
-  let innerWidth = 2048;
+let isOpen = false;
+let isSideNavOpen = true;
+let innerWidth = 2048;

-  $: isMobile = innerWidth < 1056;
-  $: components = $layout.children.filter(
-    (child) => child.title === "components",
-  )[0];
+$: isMobile = innerWidth < 1056;
+$: components = $layout.children.filter(
+  (child) => child.title === "components",
+)[0];

-  $beforeUrlChange(() => {
-    if (isMobile) isSideNavOpen = false;
-    return true;
-  });
+$beforeUrlChange(() => {
+  if (isMobile) isSideNavOpen = false;
+  return true;
+});
 </script>

 <!-- routify:options bundle=true -->
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@ -1,25 +1,25 @@
 <script>
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+import { Accordion, AccordionItem, Button } from "carbon-components-svelte";

-  const items = [
-    {
-      title: "Natural Language Classifier",
-      description:
-        "Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
-    },
-    {
-      title: "Natural Language Understanding",
-      description:
-        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
-    },
-    {
-      title: "Language Translator",
-      description:
-        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
-    },
-  ];
+const items = [
+  {
+    title: "Natural Language Classifier",
+    description:
+      "Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
+  },
+  {
+    title: "Natural Language Understanding",
+    description:
+      "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+  },
+  {
+    title: "Language Translator",
+    description:
+      "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+  },
+];

-  let open = false;
+let open = false;
 </script>

 <Button kind="ghost" size="field" on:click={() => (open = !open)}>
--- a/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
+++ b/docs/src/pages/framed/Breadcrumbs/Breadcrumbs.svelte
@ -1,11 +1,11 @@
 <script>
-  import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";
+import { Breadcrumb, BreadcrumbItem } from "carbon-components-svelte";

-  const items = [
-    { href: "/", text: "Dashboard" },
-    { href: "/reports", text: "Annual reports" },
-    { href: "/reports/2019", text: "2019" },
-  ];
+const items = [
+  { href: "/", text: "Dashboard" },
+  { href: "/reports", text: "Annual reports" },
+  { href: "/reports/2019", text: "2019" },
+];
 </script>

 <Breadcrumb>
--- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
+++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Breakpoint } from "carbon-components-svelte";
+import { Breakpoint } from "carbon-components-svelte";

-  let size;
-  let events = [];
+let size;
+let events = [];
 </script>

 <Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />
--- a/docs/src/pages/framed/Breakpoint/BreakpointObserver.svelte
+++ b/docs/src/pages/framed/Breakpoint/BreakpointObserver.svelte
@ -1,9 +1,9 @@
 <script>
-  import { breakpointObserver, breakpoints } from "carbon-components-svelte";
+import { breakpointObserver, breakpoints } from "carbon-components-svelte";

-  const size = breakpointObserver();
-  const smaller = size.smallerThan("md");
-  const larger = size.largerThan("md");
+const size = breakpointObserver();
+const smaller = size.smallerThan("md");
+const larger = size.largerThan("md");
 </script>

 <p>Current breakpoint size: {$size}</p>
--- a/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
+++ b/docs/src/pages/framed/Button/ProgrammaticFocus.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button } from "carbon-components-svelte";
+import { Button } from "carbon-components-svelte";

-  let ref;
+let ref;
 </script>

 <Button bind:ref>Primary button</Button>
--- a/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
+++ b/docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
@ -1,10 +1,10 @@
 <script>
-  import { Button } from "carbon-components-svelte";
-  import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
-  import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
-  import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
+import { Button } from "carbon-components-svelte";
+import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
+import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
+import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";

-  let index = 1;
+let index = 1;
 </script>

 <Button
--- a/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
+++ b/docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Checkbox, Button } from "carbon-components-svelte";
+import { Checkbox, Button } from "carbon-components-svelte";

-  let checked = false;
+let checked = false;
 </script>

 <Checkbox labelText="Label text" bind:checked />
--- a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
+++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Checkbox, Button } from "carbon-components-svelte";
+import { Checkbox, Button } from "carbon-components-svelte";

-  let values = ["Apple", "Banana", "Coconut"];
-  let group = values.slice(0, 2);
+let values = ["Apple", "Banana", "Coconut"];
+let group = values.slice(0, 2);
 </script>

 {#each values as value}
--- a/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
@ -1,6 +1,6 @@
 <script>
-  import copy from "clipboard-copy";
-  import { CodeSnippet } from "carbon-components-svelte";
+import copy from "clipboard-copy";
+import { CodeSnippet } from "carbon-components-svelte";
 </script>

 <CodeSnippet
--- a/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
+++ b/docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
@ -1,7 +1,7 @@
 <script>
-  import { CodeSnippet, Button } from "carbon-components-svelte";
+import { CodeSnippet, Button } from "carbon-components-svelte";

-  let expanded = false;
+let expanded = false;
 </script>

 <Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
--- a/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
@ -1,10 +1,10 @@
 <script>
-  import { Toggle, CodeSnippet } from "carbon-components-svelte";
+import { Toggle, CodeSnippet } from "carbon-components-svelte";

-  let toggled = false;
+let toggled = false;

-  $: length = toggled ? 20 : 10;
-  $: code = Array.from({ length }, (_, i) => i + 1).join("\n");
+$: length = toggled ? 20 : 10;
+$: code = Array.from({ length }, (_, i) => i + 1).join("\n");
 </script>

 <Toggle
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@ -1,9 +1,9 @@
 <script>
-  import { Toggle, CodeSnippet } from "carbon-components-svelte";
+import { Toggle, CodeSnippet } from "carbon-components-svelte";

-  let toggled = false;
+let toggled = false;

-  const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
+const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>

 <Toggle
--- a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
+++ b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
@ -1,7 +1,7 @@
 <script>
-  import { ComboBox, Button } from "carbon-components-svelte";
+import { ComboBox, Button } from "carbon-components-svelte";

-  let ref;
+let ref;
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
+++ b/docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
@ -1,5 +1,5 @@
 <script>
-  import { ComboBox } from "carbon-components-svelte";
+import { ComboBox } from "carbon-components-svelte";
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
@ -1,10 +1,10 @@
 <script>
-  import { ComboBox } from "carbon-components-svelte";
+import { ComboBox } from "carbon-components-svelte";

-  function shouldFilterItem(item, value) {
-    if (!value) return true;
-    return item.text.toLowerCase().includes(value.toLowerCase());
-  }
+function shouldFilterItem(item, value) {
+  if (!value) return true;
+  return item.text.toLowerCase().includes(value.toLowerCase());
+}
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
+++ b/docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
@ -1,24 +1,24 @@
 <script>
-  import { ComboBox } from "carbon-components-svelte";
+import { ComboBox } from "carbon-components-svelte";

-  const translation = {
-    Slack: 'Custom label for "Slack"',
-    Email: 'Custom label for "Email"',
-    Fax: 'Custom label for "Fax"',
-  };
+const translation = {
+  Slack: 'Custom label for "Slack"',
+  Email: 'Custom label for "Email"',
+  Fax: 'Custom label for "Fax"',
+};

-  function itemToString(item) {
-    return translation[item.key];
-  }
+function itemToString(item) {
+  return translation[item.key];
+}

-  function shouldFilterItem(item, value) {
-    if (!value) return true;
-    const comparison = value.toLowerCase();
-    return (
-      item.key.toLowerCase().includes(comparison) ||
-      itemToString(item).toLowerCase().includes(comparison)
-    );
-  }
+function shouldFilterItem(item, value) {
+  if (!value) return true;
+  const comparison = value.toLowerCase();
+  return (
+    item.key.toLowerCase().includes(comparison) ||
+    itemToString(item).toLowerCase().includes(comparison)
+  );
+}
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
@ -1,20 +1,20 @@
 <script>
-  import { ComboBox } from "carbon-components-svelte";
+import { ComboBox } from "carbon-components-svelte";

-  const items = [
-    { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
-  ];
+const items = [
+  { id: "0", text: "Slack" },
+  { id: "1", text: "Email" },
+  { id: "2", text: "Fax" },
+];

-  let comboBox1_selectedId = undefined;
-  let comboBox2_selectedId = undefined;
+let comboBox1_selectedId = undefined;
+let comboBox2_selectedId = undefined;

-  const formatSelected = (id) =>
-    items.find((item) => item.id === id)?.text ?? "N/A";
+const formatSelected = (id) =>
+  items.find((item) => item.id === id)?.text ?? "N/A";

-  $: primary = formatSelected(comboBox1_selectedId);
-  $: secondary = formatSelected(comboBox2_selectedId);
+$: primary = formatSelected(comboBox1_selectedId);
+$: secondary = formatSelected(comboBox2_selectedId);
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
+++ b/docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
@ -1,6 +1,6 @@
 <script>
-  import { ComboBox, Button } from "carbon-components-svelte";
-  let selectedId = "1";
+import { ComboBox, Button } from "carbon-components-svelte";
+let selectedId = "1";
 </script>

 <ComboBox
--- a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
+++ b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
@ -1,7 +1,7 @@
 <script>
-  import { ContentSwitcher, Switch, Button } from "carbon-components-svelte";
+import { ContentSwitcher, Switch, Button } from "carbon-components-svelte";

-  let selectedIndex = 1;
+let selectedIndex = 1;
 </script>

 <ContentSwitcher bind:selectedIndex>
--- a/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenu.svelte
@ -1,16 +1,16 @@
 <script>
-  import {
-    ContextMenu,
-    ContextMenuDivider,
-    ContextMenuGroup,
-    ContextMenuOption,
-  } from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuOption,
+} from "carbon-components-svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";

-  let selectedIds = [];
+let selectedIds = [];

-  $: console.log("selectedIds", selectedIds);
+$: console.log("selectedIds", selectedIds);
 </script>

 <ContextMenu>
--- a/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte
@ -1,14 +1,14 @@
 <script>
-  import {
-    ContextMenu,
-    ContextMenuDivider,
-    ContextMenuOption,
-    ContextMenuRadioGroup,
-  } from "carbon-components-svelte";
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuOption,
+  ContextMenuRadioGroup,
+} from "carbon-components-svelte";

-  let selectedId = "0";
+let selectedId = "0";

-  $: console.log("selectedId", selectedId);
+$: console.log("selectedId", selectedId);
 </script>

 <ContextMenu>
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
@ -1,14 +1,14 @@
 <script>
-  import {
-    ContextMenu,
-    ContextMenuDivider,
-    ContextMenuGroup,
-    ContextMenuOption,
-  } from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuOption,
+} from "carbon-components-svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";

-  let target;
+let target;
 </script>

 <ContextMenu {target} on:open={(e) => console.log(e.detail)}>
--- a/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
+++ b/docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
@ -1,15 +1,15 @@
 <script>
-  import {
-    ContextMenu,
-    ContextMenuDivider,
-    ContextMenuGroup,
-    ContextMenuOption,
-  } from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import {
+  ContextMenu,
+  ContextMenuDivider,
+  ContextMenuGroup,
+  ContextMenuOption,
+} from "carbon-components-svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";

-  let target;
-  let target2;
+let target;
+let target2;
 </script>

 <ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
--- a/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
+++ b/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
@ -1,6 +1,6 @@
 <script>
-  import copy from "clipboard-copy";
-  import { CopyButton } from "carbon-components-svelte";
+import copy from "clipboard-copy";
+import { CopyButton } from "carbon-components-svelte";
 </script>

 <CopyButton text="Carbon svelte" copy={(text) => copy(text)} />
--- a/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
@ -1,25 +1,25 @@
 <script>
-  import {
-    DataTable,
-    OverflowMenu,
-    OverflowMenuItem,
-  } from "carbon-components-svelte";
+import {
+  DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
+} from "carbon-components-svelte";

-  const headers = [
-    { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
-    { key: "overflow", empty: true },
-  ];
+const headers = [
+  { key: "name", value: "Name" },
+  { key: "port", value: "Port" },
+  { key: "rule", value: "Rule" },
+  { key: "overflow", empty: true },
+];

-  const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
-    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
-    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+const rows = [
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+  { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+];
 </script>

 <DataTable sortable {headers} {rows}>
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
@ -1,9 +1,9 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  let selectedRowIds = [];
+let selectedRowIds = [];

-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
@ -1,9 +1,9 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  let selectedRowIds = [2, 4];
+let selectedRowIds = [2, 4];

-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
@ -1,34 +1,34 @@
 <script>
-  import {
-    DataTable,
-    Toolbar,
-    ToolbarContent,
-    ToolbarSearch,
-    ToolbarMenu,
-    ToolbarMenuItem,
-    ToolbarBatchActions,
-    Button,
-  } from "carbon-components-svelte";
-  import Save from "carbon-icons-svelte/lib/Save.svelte";
+import {
+  DataTable,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  ToolbarMenu,
+  ToolbarMenuItem,
+  ToolbarBatchActions,
+  Button,
+} from "carbon-components-svelte";
+import Save from "carbon-icons-svelte/lib/Save.svelte";

-  const headers = [
-    { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
-  ];
+const headers = [
+  { key: "name", value: "Name" },
+  { key: "port", value: "Port" },
+  { key: "rule", value: "Rule" },
+];

-  const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
-    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
-    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+const rows = [
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+  { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+];

-  let selectedRowIds = [rows[0].id, rows[1].id];
+let selectedRowIds = [rows[0].id, rows[1].id];

-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable batchSelection bind:selectedRowIds {headers} {rows}>
--- a/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
@ -1,33 +1,33 @@
 <script>
-  import {
-    DataTable,
-    Toolbar,
-    ToolbarContent,
-    ToolbarBatchActions,
-    Button,
-  } from "carbon-components-svelte";
-  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
+import {
+  DataTable,
+  Toolbar,
+  ToolbarContent,
+  ToolbarBatchActions,
+  Button,
+} from "carbon-components-svelte";
+import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";

-  const headers = [
-    { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
-  ];
+const headers = [
+  { key: "name", value: "Name" },
+  { key: "port", value: "Port" },
+  { key: "rule", value: "Rule" },
+];

-  let rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
-    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
-    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+let rows = [
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+  { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+];

-  let active = false;
-  let selectedRowIds = [];
+let active = false;
+let selectedRowIds = [];

-  $: console.log("active", active);
-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("active", active);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
@ -1,13 +1,13 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  let expandedRowIds = [];
-  let selectedRowIds = [];
+let expandedRowIds = [];
+let selectedRowIds = [];

-  $: {
-    console.log("expandedRowIds", expandedRowIds);
-    console.log("selectedRowIds", selectedRowIds);
-  }
+$: {
+  console.log("expandedRowIds", expandedRowIds);
+  console.log("selectedRowIds", selectedRowIds);
+}
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
@ -1,5 +1,5 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
@ -1,24 +1,24 @@
 <script>
-  import {
-    DataTable,
-    Toolbar,
-    ToolbarContent,
-    ToolbarSearch,
-    Pagination,
-  } from "carbon-components-svelte";
+import {
+  DataTable,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  Pagination,
+} from "carbon-components-svelte";

-  let rows = Array.from({ length: 10 }).map((_, i) => ({
-    id: i,
-    name: "Load Balancer " + (i + 1),
-    protocol: "HTTP",
-    port: 3000 + i * 10,
-    rule: i % 2 ? "Round robin" : "DNS delegation",
-  }));
-  let pageSize = 5;
-  let page = 1;
-  let filteredRowIds = [];
+let rows = Array.from({ length: 10 }).map((_, i) => ({
+  id: i,
+  name: "Load Balancer " + (i + 1),
+  protocol: "HTTP",
+  port: 3000 + i * 10,
+  rule: i % 2 ? "Round robin" : "DNS delegation",
+}));
+let pageSize = 5;
+let page = 1;
+let filteredRowIds = [];

-  $: console.log("filteredRowIds", filteredRowIds);
+$: console.log("filteredRowIds", filteredRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableFilterable.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableFilterable.svelte
@ -1,24 +1,24 @@
 <script>
-  import {
-    DataTable,
-    Toolbar,
-    ToolbarContent,
-    ToolbarSearch,
-    Pagination,
-  } from "carbon-components-svelte";
+import {
+  DataTable,
+  Toolbar,
+  ToolbarContent,
+  ToolbarSearch,
+  Pagination,
+} from "carbon-components-svelte";

-  let rows = Array.from({ length: 10 }).map((_, i) => ({
-    id: i,
-    name: "Load Balancer " + (i + 1),
-    protocol: "HTTP",
-    port: 3000 + i * 10,
-    rule: i % 2 ? "Round robin" : "DNS delegation",
-  }));
-  let pageSize = 5;
-  let page = 1;
-  let filteredRowIds = [];
+let rows = Array.from({ length: 10 }).map((_, i) => ({
+  id: i,
+  name: "Load Balancer " + (i + 1),
+  protocol: "HTTP",
+  port: 3000 + i * 10,
+  rule: i % 2 ? "Round robin" : "DNS delegation",
+}));
+let pageSize = 5;
+let page = 1;
+let filteredRowIds = [];

-  $: console.log("filteredRowIds", filteredRowIds);
+$: console.log("filteredRowIds", filteredRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
@ -1,5 +1,5 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
@ -1,50 +1,50 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  const rows = [
-    {
-      id: "a",
-      name: "Load Balancer 3",
-      protocol: "HTTP",
-      port: 3000,
-      rule: "Round robin",
-    },
-    {
-      id: "b",
-      name: "Load Balancer 1",
-      protocol: "HTTP",
-      port: 443,
-      rule: "Round robin",
-    },
-    {
-      id: "c",
-      name: "Load Balancer 2",
-      protocol: "HTTP",
-      port: 80,
-      rule: "DNS delegation",
-    },
-    {
-      id: "d",
-      name: "Load Balancer 6",
-      protocol: "HTTP",
-      port: 3000,
-      rule: "Round robin",
-    },
-    {
-      id: "e",
-      name: "Load Balancer 4",
-      protocol: "HTTP",
-      port: 443,
-      rule: "Round robin",
-    },
-    {
-      id: "f",
-      name: "Load Balancer 5",
-      protocol: "HTTP",
-      port: 80,
-      rule: "DNS delegation",
-    },
-  ];
+const rows = [
+  {
+    id: "a",
+    name: "Load Balancer 3",
+    protocol: "HTTP",
+    port: 3000,
+    rule: "Round robin",
+  },
+  {
+    id: "b",
+    name: "Load Balancer 1",
+    protocol: "HTTP",
+    port: 443,
+    rule: "Round robin",
+  },
+  {
+    id: "c",
+    name: "Load Balancer 2",
+    protocol: "HTTP",
+    port: 80,
+    rule: "DNS delegation",
+  },
+  {
+    id: "d",
+    name: "Load Balancer 6",
+    protocol: "HTTP",
+    port: 3000,
+    rule: "Round robin",
+  },
+  {
+    id: "e",
+    name: "Load Balancer 4",
+    protocol: "HTTP",
+    port: 443,
+    rule: "Round robin",
+  },
+  {
+    id: "f",
+    name: "Load Balancer 5",
+    protocol: "HTTP",
+    port: 80,
+    rule: "DNS delegation",
+  },
+];
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
@ -1,50 +1,50 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  const rows = [
-    {
-      id: "a",
-      name: "Load Balancer 3",
-      protocol: "HTTP",
-      port: 3000,
-      rule: "Round robin",
-    },
-    {
-      id: "b",
-      name: "Load Balancer 1",
-      protocol: "HTTP",
-      port: 443,
-      rule: "Round robin",
-    },
-    {
-      id: "c",
-      name: "Load Balancer 2",
-      protocol: "HTTP",
-      port: 80,
-      rule: "DNS delegation",
-    },
-    {
-      id: "d",
-      name: "Load Balancer 6",
-      protocol: "HTTP",
-      port: 3000,
-      rule: "Round robin",
-    },
-    {
-      id: "e",
-      name: "Load Balancer 4",
-      protocol: "HTTP",
-      port: 443,
-      rule: "Round robin",
-    },
-    {
-      id: "f",
-      name: "Load Balancer 5",
-      protocol: "HTTP",
-      port: 80,
-      rule: "DNS delegation",
-    },
-  ];
+const rows = [
+  {
+    id: "a",
+    name: "Load Balancer 3",
+    protocol: "HTTP",
+    port: 3000,
+    rule: "Round robin",
+  },
+  {
+    id: "b",
+    name: "Load Balancer 1",
+    protocol: "HTTP",
+    port: 443,
+    rule: "Round robin",
+  },
+  {
+    id: "c",
+    name: "Load Balancer 2",
+    protocol: "HTTP",
+    port: 80,
+    rule: "DNS delegation",
+  },
+  {
+    id: "d",
+    name: "Load Balancer 6",
+    protocol: "HTTP",
+    port: 3000,
+    rule: "Round robin",
+  },
+  {
+    id: "e",
+    name: "Load Balancer 4",
+    protocol: "HTTP",
+    port: 443,
+    rule: "Round robin",
+  },
+  {
+    id: "f",
+    name: "Load Balancer 5",
+    protocol: "HTTP",
+    port: 80,
+    rule: "DNS delegation",
+  },
+];
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTablePagination.svelte
+++ b/docs/src/pages/framed/DataTable/DataTablePagination.svelte
@ -1,15 +1,15 @@
 <script>
-  import { DataTable, Pagination } from "carbon-components-svelte";
+import { DataTable, Pagination } from "carbon-components-svelte";

-  let rows = Array.from({ length: 10 }).map((_, i) => ({
-    id: i,
-    name: "Load Balancer " + (i + 1),
-    protocol: "HTTP",
-    port: 3000 + i * 10,
-    rule: i % 2 ? "Round robin" : "DNS delegation",
-  }));
-  let pageSize = 5;
-  let page = 1;
+let rows = Array.from({ length: 10 }).map((_, i) => ({
+  id: i,
+  name: "Load Balancer " + (i + 1),
+  protocol: "HTTP",
+  port: 3000 + i * 10,
+  rule: i % 2 ? "Round robin" : "DNS delegation",
+}));
+let pageSize = 5;
+let page = 1;
 </script>

 <DataTable
--- a/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
+++ b/docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
@ -1,11 +1,11 @@
 <script>
-  import { DataTable, Button } from "carbon-components-svelte";
+import { DataTable, Button } from "carbon-components-svelte";

-  let sortKey = "port";
-  let sortDirection = "ascending";
+let sortKey = "port";
+let sortDirection = "ascending";

-  $: console.log("sortKey", sortKey);
-  $: console.log("sortDirection", sortDirection);
+$: console.log("sortKey", sortKey);
+$: console.log("sortDirection", sortDirection);
 </script>

 <Button
--- a/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
@ -1,24 +1,24 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  const headers = [
-    { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
-  ];
+const headers = [
+  { key: "name", value: "Name" },
+  { key: "port", value: "Port" },
+  { key: "rule", value: "Rule" },
+];

-  const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
-    { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
-    { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+const rows = [
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "b", name: "Load Balancer 1", port: 443, rule: "Round robin" },
+  { id: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "e", name: "Load Balancer 4", port: 443, rule: "Round robin" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
+];

-  let selectedRowIds = [rows[1].id];
+let selectedRowIds = [rows[1].id];

-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable radio bind:selectedRowIds {headers} {rows} />
--- a/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
+++ b/docs/src/pages/framed/DataTable/SelectableDataTable.svelte
@ -1,9 +1,9 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";

-  let selectedRowIds = [];
+let selectedRowIds = [];

-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>

 <DataTable
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@ -1,12 +1,12 @@
 <script>
-  import {
-    Button,
-    Modal,
-    DatePicker,
-    DatePickerInput,
-  } from "carbon-components-svelte";
+import {
+  Button,
+  Modal,
+  DatePicker,
+  DatePickerInput,
+} from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Select date</Button>
--- a/docs/src/pages/framed/DatePicker/DatePickerRange.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerRange.svelte
@ -1,5 +1,5 @@
 <script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+import { DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>

 <DatePicker datePickerType="range" on:change>
--- a/docs/src/pages/framed/DatePicker/DatePickerSingle.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerSingle.svelte
@ -1,5 +1,5 @@
 <script>
-  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+import { DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>

 <DatePicker datePickerType="single" on:change>
--- a/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
+++ b/docs/src/pages/framed/Dropdown/DropdownSlot.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Dropdown } from "carbon-components-svelte";
+import { Dropdown } from "carbon-components-svelte";
 </script>

 <Dropdown
--- a/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
+++ b/docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
@ -1,20 +1,20 @@
 <script>
-  import { Dropdown } from "carbon-components-svelte";
+import { Dropdown } from "carbon-components-svelte";

-  const items = [
-    { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
-  ];
+const items = [
+  { id: "0", text: "Slack" },
+  { id: "1", text: "Email" },
+  { id: "2", text: "Fax" },
+];

-  let dropdown1_selectedId = "0";
-  let dropdown2_selectedId = "1";
+let dropdown1_selectedId = "0";
+let dropdown2_selectedId = "1";

-  const formatSelected = (id) =>
-    items.find((item) => item.id === id)?.text ?? "N/A";
+const formatSelected = (id) =>
+  items.find((item) => item.id === id)?.text ?? "N/A";

-  $: primary = formatSelected(dropdown1_selectedId);
-  $: secondary = formatSelected(dropdown2_selectedId);
+$: primary = formatSelected(dropdown1_selectedId);
+$: secondary = formatSelected(dropdown2_selectedId);
 </script>

 <Dropdown
--- a/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
+++ b/docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
@ -1,8 +1,8 @@
 <script>
-  import { FileUploader, Button } from "carbon-components-svelte";
+import { FileUploader, Button } from "carbon-components-svelte";

-  let fileUploader;
-  let files = [];
+let fileUploader;
+let files = [];
 </script>

 <FileUploader
--- a/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
+++ b/docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
@ -1,14 +1,10 @@
 <script>
-  import {
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
+import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";

-  let password = "";
-  let invalid = false;
+let password = "";
+let invalid = false;

-  $: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
+$: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
 </script>

 <FluidForm>
--- a/docs/src/pages/framed/Grid/AspectRatioColumns.svelte
+++ b/docs/src/pages/framed/Grid/AspectRatioColumns.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid>
--- a/docs/src/pages/framed/Grid/CondensedGrid.svelte
+++ b/docs/src/pages/framed/Grid/CondensedGrid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid condensed>
--- a/docs/src/pages/framed/Grid/FullWidthGrid.svelte
+++ b/docs/src/pages/framed/Grid/FullWidthGrid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid fullWidth>
--- a/docs/src/pages/framed/Grid/Grid.svelte
+++ b/docs/src/pages/framed/Grid/Grid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid>
--- a/docs/src/pages/framed/Grid/NarrowGrid.svelte
+++ b/docs/src/pages/framed/Grid/NarrowGrid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid narrow>
--- a/docs/src/pages/framed/Grid/OffsetColumns.svelte
+++ b/docs/src/pages/framed/Grid/OffsetColumns.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid>
--- a/docs/src/pages/framed/Grid/PaddedGrid.svelte
+++ b/docs/src/pages/framed/Grid/PaddedGrid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <div>Adding padding to Grid applies it to columns in all rows:</div>
--- a/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
+++ b/docs/src/pages/framed/Grid/ResponsiveGrid.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
+import { Grid, Row, Column } from "carbon-components-svelte";
 </script>

 <Grid>
--- a/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
+++ b/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
@ -1,14 +1,14 @@
 <script>
-  import { ImageLoader, Button } from "carbon-components-svelte";
+import { ImageLoader, Button } from "carbon-components-svelte";

-  const images = [
-    "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
-    "https://upload.wikimedia.org/wikipedia/commons/b/b9/Carbon-design-system-logo.png",
-  ];
+const images = [
+  "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
+  "https://upload.wikimedia.org/wikipedia/commons/b/b9/Carbon-design-system-logo.png",
+];

-  let index = 0;
+let index = 0;

-  $: src = images[index];
+$: src = images[index];
 </script>

 <Button
--- a/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
+++ b/docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
@ -1,12 +1,11 @@
 <script>
-  import { ImageLoader, Button } from "carbon-components-svelte";
+import { ImageLoader, Button } from "carbon-components-svelte";

-  const src =
-    "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
-  const srcError = src + "1";
+const src = "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
+const srcError = src + "1";

-  let imageLoader;
-  let error;
+let imageLoader;
+let error;
 </script>

 <Button
--- a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
+++ b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
@ -1,37 +1,37 @@
 <script>
-  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
-  import { onDestroy } from "svelte";
+import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
+import { onDestroy } from "svelte";

-  const descriptionMap = {
-    active: "Submitting...",
-    finished: "Success",
-    inactive: "Cancelling...",
-  };
+const descriptionMap = {
+  active: "Submitting...",
+  finished: "Success",
+  inactive: "Cancelling...",
+};

-  const stateMap = {
-    active: "finished",
-    inactive: "dormant",
-    finished: "dormant",
-  };
+const stateMap = {
+  active: "finished",
+  inactive: "dormant",
+  finished: "dormant",
+};

-  let timeout = undefined;
-  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
+let timeout = undefined;
+let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"

-  function reset(incomingState) {
-    if (typeof timeout === "number") {
-      clearTimeout(timeout);
-    }
-
-    if (incomingState) {
-      timeout = setTimeout(() => {
-        state = incomingState;
-      }, 2000);
-    }
+function reset(incomingState) {
+  if (typeof timeout === "number") {
+    clearTimeout(timeout);
  }

-  onDestroy(reset);
+  if (incomingState) {
+    timeout = setTimeout(() => {
+      state = incomingState;
+    }, 2000);
+  }
+}

-  $: reset(stateMap[state]);
+onDestroy(reset);
+
+$: reset(stateMap[state]);
 </script>

 <ButtonSet>
--- a/docs/src/pages/framed/Loading/Loading.svelte
+++ b/docs/src/pages/framed/Loading/Loading.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Loading } from "carbon-components-svelte";
+import { Loading } from "carbon-components-svelte";
 </script>

 <Loading />
--- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte
@ -1,10 +1,10 @@
 <script>
-  import { LocalStorage, Toggle } from "carbon-components-svelte";
+import { LocalStorage, Toggle } from "carbon-components-svelte";

-  let toggled = false;
-  let events = [];
+let toggled = false;
+let events = [];

-  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
 </script>

 <LocalStorage
--- a/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
+++ b/docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
@ -1,10 +1,10 @@
 <script>
-  import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
+import { LocalStorage, Toggle, Button } from "carbon-components-svelte";

-  let storage;
-  let toggled = false;
+let storage;
+let toggled = false;

-  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
 </script>

 <LocalStorage bind:this={storage} bind:value={toggled} />
--- a/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
+++ b/docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
@ -1,15 +1,15 @@
 <script>
-  import {
-    Button,
-    ComposedModal,
-    ModalHeader,
-    ModalBody,
-    ModalFooter,
-    Checkbox,
-  } from "carbon-components-svelte";
+import {
+  Button,
+  ComposedModal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Checkbox,
+} from "carbon-components-svelte";

-  let open = true;
-  let checked = false;
+let open = true;
+let checked = false;
 </script>

 <Button on:click={() => (open = true)}>Review changes</Button>
--- a/docs/src/pages/framed/Modal/3ButtonModal.svelte
+++ b/docs/src/pages/framed/Modal/3ButtonModal.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ComposedModal.svelte
+++ b/docs/src/pages/framed/Modal/ComposedModal.svelte
@ -1,13 +1,13 @@
 <script>
-  import {
-    ComposedModal,
-    ModalHeader,
-    ModalBody,
-    ModalFooter,
-    Checkbox,
-  } from "carbon-components-svelte";
+import {
+  ComposedModal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Checkbox,
+} from "carbon-components-svelte";

-  let checked = false;
+let checked = false;
 </script>

 <ComposedModal open>
--- a/docs/src/pages/framed/Modal/DangerModal.svelte
+++ b/docs/src/pages/framed/Modal/DangerModal.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
--- a/docs/src/pages/framed/Modal/Modal.svelte
+++ b/docs/src/pages/framed/Modal/Modal.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
+++ b/docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
-  import Send from "carbon-icons-svelte/lib/Send.svelte";
+import { Button, Modal } from "carbon-components-svelte";
+import Send from "carbon-icons-svelte/lib/Send.svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
+++ b/docs/src/pages/framed/Modal/ModalCustomFocus.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal, TextInput } from "carbon-components-svelte";
+import { Button, Modal, TextInput } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalExtraSmall.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalLarge.svelte
+++ b/docs/src/pages/framed/Modal/ModalLarge.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalMultiple.svelte
+++ b/docs/src/pages/framed/Modal/ModalMultiple.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let openCreate = false;
-  let openDelete = false;
+let openCreate = false;
+let openDelete = false;
 </script>

 <Button on:click={() => (openCreate = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
+++ b/docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
+++ b/docs/src/pages/framed/Modal/ModalScrollingContent.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/ModalSmall.svelte
+++ b/docs/src/pages/framed/Modal/ModalSmall.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button on:click={() => (open = true)}>Create database</Button>
--- a/docs/src/pages/framed/Modal/PassiveModal.svelte
+++ b/docs/src/pages/framed/Modal/PassiveModal.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";

-  let open = false;
+let open = false;
 </script>

 <Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
--- a/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
@ -1,5 +1,5 @@
 <script>
-  import { MultiSelect } from "carbon-components-svelte";
+import { MultiSelect } from "carbon-components-svelte";
 </script>

 <MultiSelect
--- a/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
+++ b/docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
@ -1,22 +1,22 @@
 <script>
-  import { MultiSelect } from "carbon-components-svelte";
+import { MultiSelect } from "carbon-components-svelte";

-  const items = [
-    { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
-  ];
+const items = [
+  { id: "0", text: "Slack" },
+  { id: "1", text: "Email" },
+  { id: "2", text: "Fax" },
+];

-  let multiselect1_selectedIds = ["0"];
-  let multiselect2_selectedIds = ["1", "2"];
+let multiselect1_selectedIds = ["0"];
+let multiselect2_selectedIds = ["1", "2"];

-  const formatSelected = (i) =>
-    i.length === 0
-      ? "N/A"
-      : i.map((id) => items.find((item) => item.id === id).text).join(", ");
+const formatSelected = (i) =>
+  i.length === 0
+    ? "N/A"
+    : i.map((id) => items.find((item) => item.id === id).text).join(", ");

-  $: primary = formatSelected(multiselect1_selectedIds);
-  $: secondary = formatSelected(multiselect2_selectedIds);
+$: primary = formatSelected(multiselect1_selectedIds);
+$: secondary = formatSelected(multiselect2_selectedIds);
 </script>

 <MultiSelect
--- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@ -1,7 +1,7 @@
 <script>
-  import { NumberInput, Button } from "carbon-components-svelte";
+import { NumberInput, Button } from "carbon-components-svelte";

-  let value = null;
+let value = null;
 </script>

 <NumberInput allowEmpty bind:value />
--- a/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
+++ b/docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
@ -1,7 +1,7 @@
 <script>
-  import { PaginationNav, Button } from "carbon-components-svelte";
+import { PaginationNav, Button } from "carbon-components-svelte";

-  let page = 2;
+let page = 2;
 </script>

 <PaginationNav bind:page />
--- a/docs/src/pages/framed/Popover/WithButton.svelte
+++ b/docs/src/pages/framed/Popover/WithButton.svelte
@ -1,8 +1,8 @@
 <script>
-  import { Popover, Button } from "carbon-components-svelte";
+import { Popover, Button } from "carbon-components-svelte";

-  let open = true;
-  let ref = null;
+let open = true;
+let ref = null;
 </script>

 <div bind:this={ref} style:position="relative">
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@ -1,16 +1,16 @@
 <script>
-  import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";
+import { ProgressBar, ButtonSet, Button } from "carbon-components-svelte";

-  let max = 328;
-  let value = 0;
-  let status = "active";
+let max = 328;
+let value = 0;
+let status = "active";

-  $: helperText =
-    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
-  $: if (value === max) {
-    helperText = "Done";
-    status = "finished";
-  }
+$: helperText =
+  value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
+$: if (value === max) {
+  helperText = "Done";
+  status = "finished";
+}
 </script>

 <ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />
--- a/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
+++ b/docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
@ -1,12 +1,12 @@
 <script>
-  import {
-    ProgressIndicator,
-    ProgressStep,
-    Button,
-  } from "carbon-components-svelte";
+import {
+  ProgressIndicator,
+  ProgressStep,
+  Button,
+} from "carbon-components-svelte";

-  let currentIndex = 1;
-  let thirdStepCurrent = false;
+let currentIndex = 1;
+let thirdStepCurrent = false;
 </script>

 <ProgressIndicator bind:currentIndex>
--- a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
+++ b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
@ -1,13 +1,13 @@
 <script>
-  import {
-    Button,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
+import {
+  Button,
+  RadioButtonGroup,
+  RadioButton,
+} from "carbon-components-svelte";

-  const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];
+const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];

-  let plan = plans[1];
+let plan = plans[1];
 </script>

 <RadioButtonGroup
--- a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
@ -1,9 +1,9 @@
 <script>
-  import { TileGroup, RadioTile, Button } from "carbon-components-svelte";
+import { TileGroup, RadioTile, Button } from "carbon-components-svelte";

-  const values = ["Lite plan", "Standard plan", "Plus plan"];
+const values = ["Lite plan", "Standard plan", "Plus plan"];

-  let selected = values[1];
+let selected = values[1];
 </script>

 <TileGroup legend="Service pricing tiers" name="plan" bind:selected>
--- a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
+++ b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
@ -1,9 +1,9 @@
 <script>
-  import { TileGroup, RadioTile } from "carbon-components-svelte";
+import { TileGroup, RadioTile } from "carbon-components-svelte";

-  const values = ["Lite plan", "Standard plan", "Plus plan"];
+const values = ["Lite plan", "Standard plan", "Plus plan"];

-  let selected = values[1];
+let selected = values[1];
 </script>

 <TileGroup
--- a/docs/src/pages/framed/RecursiveList/RecursiveList.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveList.svelte
@ -1,32 +1,32 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";

-  const nodes = [
-    {
-      text: "Item 1",
-      nodes: [
-        {
-          text: "Item 1a",
-          nodes: [{ html: "<h5>HTML content</h5>" }],
-        },
-      ],
-    },
-    {
-      text: "Item 2",
-      nodes: [
-        {
-          href: "https://svelte.dev/",
-        },
-        {
-          href: "https://svelte.dev/",
-          text: "Link with custom text",
-        },
-      ],
-    },
-    {
-      text: "Item 3",
-    },
-  ];
+const nodes = [
+  {
+    text: "Item 1",
+    nodes: [
+      {
+        text: "Item 1a",
+        nodes: [{ html: "<h5>HTML content</h5>" }],
+      },
+    ],
+  },
+  {
+    text: "Item 2",
+    nodes: [
+      {
+        href: "https://svelte.dev/",
+      },
+      {
+        href: "https://svelte.dev/",
+        text: "Link with custom text",
+      },
+    ],
+  },
+  {
+    text: "Item 3",
+  },
+];
 </script>

 <RecursiveList {nodes} />
--- a/docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte
@ -1,20 +1,20 @@
 <script>
-  import { RecursiveList, toHierarchy } from "carbon-components-svelte";
+import { RecursiveList, toHierarchy } from "carbon-components-svelte";

-  const nodesFlat = [
-    { id: 1, text: "Item 1" },
-    { id: 2, text: "Item 1a", pid: 1 },
-    { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
-    { id: 4, text: "Item 2" },
-    { id: 5, href: "https://svelte.dev/", pid: 4 },
-    {
-      id: 6,
-      href: "https://svelte.dev/",
-      text: "Link with custom text",
-      pid: 4,
-    },
-    { id: 7, text: "Item 3" },
-  ];
+const nodesFlat = [
+  { id: 1, text: "Item 1" },
+  { id: 2, text: "Item 1a", pid: 1 },
+  { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
+  { id: 4, text: "Item 2" },
+  { id: 5, href: "https://svelte.dev/", pid: 4 },
+  {
+    id: 6,
+    href: "https://svelte.dev/",
+    text: "Link with custom text",
+    pid: 4,
+  },
+  { id: 7, text: "Item 3" },
+];
 </script>

 <RecursiveList nodes={toHierarchy(nodesFlat, (node) => node.pid)} />
--- a/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
@ -1,32 +1,32 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";

-  const nodes = [
-    {
-      text: "Item 1",
-      nodes: [
-        {
-          text: "Item 1a",
-          nodes: [{ html: "<h5>HTML content</h5>" }],
-        },
-      ],
-    },
-    {
-      text: "Item 2",
-      nodes: [
-        {
-          href: "https://svelte.dev/",
-        },
-        {
-          href: "https://svelte.dev/",
-          text: "Link with custom text",
-        },
-      ],
-    },
-    {
-      text: "Item 3",
-    },
-  ];
+const nodes = [
+  {
+    text: "Item 1",
+    nodes: [
+      {
+        text: "Item 1a",
+        nodes: [{ html: "<h5>HTML content</h5>" }],
+      },
+    ],
+  },
+  {
+    text: "Item 2",
+    nodes: [
+      {
+        href: "https://svelte.dev/",
+      },
+      {
+        href: "https://svelte.dev/",
+        text: "Link with custom text",
+      },
+    ],
+  },
+  {
+    text: "Item 3",
+  },
+];
 </script>

 <RecursiveList type="ordered" {nodes} />
--- a/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
+++ b/docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
@ -1,32 +1,32 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";

-  const nodes = [
-    {
-      text: "Item 1",
-      nodes: [
-        {
-          text: "Item 1a",
-          nodes: [{ html: "<h5>HTML content</h5>" }],
-        },
-      ],
-    },
-    {
-      text: "Item 2",
-      nodes: [
-        {
-          href: "https://svelte.dev/",
-        },
-        {
-          href: "https://svelte.dev/",
-          text: "Link with custom text",
-        },
-      ],
-    },
-    {
-      text: "Item 3",
-    },
-  ];
+const nodes = [
+  {
+    text: "Item 1",
+    nodes: [
+      {
+        text: "Item 1a",
+        nodes: [{ html: "<h5>HTML content</h5>" }],
+      },
+    ],
+  },
+  {
+    text: "Item 2",
+    nodes: [
+      {
+        href: "https://svelte.dev/",
+      },
+      {
+        href: "https://svelte.dev/",
+        text: "Link with custom text",
+      },
+    ],
+  },
+  {
+    text: "Item 3",
+  },
+];
 </script>

 <RecursiveList type="ordered-native" {nodes} />
--- a/docs/src/pages/framed/Search/SearchExpandableReactive.svelte
+++ b/docs/src/pages/framed/Search/SearchExpandableReactive.svelte
@ -1,7 +1,7 @@
 <script>
-  import { Search } from "carbon-components-svelte";
+import { Search } from "carbon-components-svelte";

-  let expanded = false;
+let expanded = false;
 </script>

 <Search expandable bind:expanded on:expand on:collapse />
--- a/Show more
+++ b/Show more