Run npm run lint

docs/package.json

@@ -30,10 +30,7 @@
   "routify": {
     "routifyDir": ".routify",
     "dynamicImports": true,
-    "extensions": [
+    "extensions": ["svelte", "svx"]
-      "svelte",
-      "svx"
-    ]
   },
   "type": "module"
 }

docs/src/App.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { Router } from "@sveltech/routify";
+import { Router } from "@sveltech/routify";
-  import { routes } from "../.routify/routes";
+import { routes } from "../.routify/routes";
 </script>
 
 <Router {routes} />

docs/src/components/ComponentApi.svelte

@@ -1,49 +1,48 @@
 <script>
-  export let component = {
+export let component = {
-    props: [],
+  props: [],
-    slots: [],
+  slots: [],
-    events: [],
+  events: [],
-    rest_props: undefined,
+  rest_props: undefined,
-    typedefs: [],
+  typedefs: [],
-  };
+};
 
-  import { onMount } from "svelte";
+import { onMount } from "svelte";
-  import {
+import {
-    OutboundLink,
+  OutboundLink,
-    StructuredList,
+  StructuredList,
-    StructuredListHead,
+  StructuredListHead,
-    StructuredListRow,
+  StructuredListRow,
-    StructuredListCell,
+  StructuredListCell,
-    StructuredListBody,
+  StructuredListBody,
-    UnorderedList,
+  UnorderedList,
-    ListItem,
+  ListItem,
-    Tag,
+  Tag,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import InlineSnippet from "./InlineSnippet.svelte";
+import InlineSnippet from "./InlineSnippet.svelte";
 
-  let AsyncPreviewTypeScript;
+let AsyncPreviewTypeScript;
 
-  onMount(async () => {
+onMount(async () => {
-    AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte"))
+  AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte")).default;
-      .default;
+});
-  });
 
-  const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
+const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
-  const typeMap = {
+const typeMap = {
-    string: "string",
+  string: "string",
-    boolean: "boolean",
+  boolean: "boolean",
-    number: "number",
+  number: "number",
-    null: "null",
+  null: "null",
-    Date: "JavaScript Date",
+  Date: "JavaScript Date",
-  };
+};
 
-  $: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
+$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
-  $: forwarded_events = component.events.filter(
+$: forwarded_events = component.events.filter(
-    (event) => event.type === "forwarded",
+  (event) => event.type === "forwarded",
-  );
+);
-  $: dispatched_events = component.events.filter(
+$: dispatched_events = component.events.filter(
-    (event) => event.type === "dispatched",
+  (event) => event.type === "dispatched",
-  );
+);
 </script>
 
 <p style="margin-bottom: var(--cds-layout-02)">

docs/src/components/InlineSnippet.svelte

@@ -1,8 +1,8 @@
 <script>
-  export let code = "";
+export let code = "";
 
-  import copy from "clipboard-copy";
+import copy from "clipboard-copy";
-  import { CodeSnippet } from "carbon-components-svelte";
+import { CodeSnippet } from "carbon-components-svelte";
 </script>
 
 <div>

docs/src/components/Preview.svelte

@@ -1,16 +1,16 @@
 <script>
-  export let code = "";
+export let code = "";
-  export let codeRaw = "";
+export let codeRaw = "";
-  export let src = "";
+export let src = "";
-  export let framed = false;
+export let framed = false;
 
-  import copy from "clipboard-copy";
+import copy from "clipboard-copy";
-  import { CodeSnippet, Button } from "carbon-components-svelte";
+import { CodeSnippet, Button } from "carbon-components-svelte";
-  import Launch from "carbon-icons-svelte/lib/Launch.svelte";
+import Launch from "carbon-icons-svelte/lib/Launch.svelte";
-  import { url } from "@sveltech/routify";
+import { url } from "@sveltech/routify";
-  import { theme } from "../store";
+import { theme } from "../store";
 
-  $: themedSrcUrl = $url(`${src}?theme=${$theme}`);
+$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
 </script>
 
 <div class="preview">

docs/src/components/PreviewTypeScript.svelte

@@ -1,17 +1,13 @@
 <script>
-  export let code = "";
+export let code = "";
-  export let type = "multi";
+export let type = "multi";
 
-  import { CodeSnippet } from "carbon-components-svelte";
+import { CodeSnippet } from "carbon-components-svelte";
-  import { highlight } from "prismjs";
+import { highlight } from "prismjs";
-  import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-typescript";
-  import copy from "clipboard-copy";
+import copy from "clipboard-copy";
 
-  $: highlightedCode = highlight(
+$: highlightedCode = highlight(code, Prism.languages.typescript, "typescript");
-    code,
-    Prism.languages.typescript,
-    "typescript",
-  );
 </script>
 
 {#if type === "multi"}

docs/src/components/TileCard.svelte

@@ -1,15 +1,15 @@
 <script>
-  export let href = undefined;
+export let href = undefined;
-  export let title = "";
+export let title = "";
-  export let subtitle = "";
+export let subtitle = "";
-  export let borderRight = false;
+export let borderRight = false;
-  export let borderBottom = false;
+export let borderBottom = false;
 
-  import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
+import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
-  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
+import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import Launch from "carbon-icons-svelte/lib/Launch.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>

docs/src/layouts/ComponentLayout.svelte

@@ -1,69 +1,69 @@
 <script>
-  import {
+import {
-    Grid,
+  Grid,
-    Link,
+  Link,
-    Row,
+  Row,
-    Column,
+  Column,
-    Content,
+  Content,
-    Button,
+  Button,
-    Select,
+  Select,
-    SelectItem,
+  SelectItem,
-    InlineNotification,
+  InlineNotification,
-    Tabs,
+  Tabs,
-    Tab,
+  Tab,
-    TabContent,
+  TabContent,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import Code from "carbon-icons-svelte/lib/Code.svelte";
+import Code from "carbon-icons-svelte/lib/Code.svelte";
-  import { page, metatags } from "@sveltech/routify";
+import { page, metatags } from "@sveltech/routify";
-  import { onMount } from "svelte";
+import { onMount } from "svelte";
-  import { theme } from "../store";
+import { theme } from "../store";
-  import ComponentApi from "../components/ComponentApi.svelte";
+import ComponentApi from "../components/ComponentApi.svelte";
-  import COMPONENT_API from "../COMPONENT_API.json";
+import COMPONENT_API from "../COMPONENT_API.json";
 
-  export let component = $page.title;
+export let component = $page.title;
-  export let components = [component];
+export let components = [component];
-  export let unreleased = false;
+export let unreleased = false;
-  export let unstable = false;
+export let unstable = false;
 
-  metatags.title = $page.title;
+metatags.title = $page.title;
 
-  // TODO: `find` is not supported in IE
+// TODO: `find` is not supported in IE
-  $: api_components = components.map((i) =>
+$: api_components = components.map((i) =>
-    COMPONENT_API.components.find((_) => _.moduleName === i),
+  COMPONENT_API.components.find((_) => _.moduleName === i),
-  );
+);
-  $: multiple = api_components.length > 1;
+$: multiple = api_components.length > 1;
 
-  onMount(() => {
+onMount(() => {
-    const searchParams = new URLSearchParams(window.location.search);
+  const searchParams = new URLSearchParams(window.location.search);
-    const current_theme = searchParams.get("theme");
+  const current_theme = searchParams.get("theme");
 
-    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+  if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
-      theme.set(current_theme);
+    theme.set(current_theme);
-    }
+  }
-  });
+});
 
-  function formatSourceURL(multiple) {
+function formatSourceURL(multiple) {
-    const filePath = api_components[0]?.filePath ?? "";
+  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("/");
-    }
 
+  if (multiple) {
     /**
-     * Else, link to the component source.
+     * Link to folder for doc with multiple components.
-     * @example "src/Tile/ClickableTile.svelte"
+     * @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(
+   * Else, link to the component source.
-    multiple,
+   * @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>

docs/src/pages/_fallback.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
+import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
-  import { url, metatags } from "@sveltech/routify";
+import { url, metatags } from "@sveltech/routify";
 
-  metatags.title = "404";
+metatags.title = "404";
 </script>
 
 <Content>

docs/src/pages/_layout.svelte

@@ -1,64 +1,64 @@
 <script>
-  import {
+import {
-    isActive,
+  isActive,
-    url,
+  url,
-    layout,
+  layout,
-    beforeUrlChange,
+  beforeUrlChange,
-    goto,
+  goto,
-  } from "@sveltech/routify";
+} from "@sveltech/routify";
-  import {
+import {
-    Header,
+  Header,
-    HeaderUtilities,
+  HeaderUtilities,
-    HeaderAction,
+  HeaderAction,
-    HeaderActionLink,
+  HeaderActionLink,
-    HeaderPanelLinks,
+  HeaderPanelLinks,
-    HeaderPanelLink,
+  HeaderPanelLink,
-    HeaderPanelDivider,
+  HeaderPanelDivider,
-    HeaderSearch,
+  HeaderSearch,
-    SkipToContent,
+  SkipToContent,
-    SideNav,
+  SideNav,
-    SideNavItems,
+  SideNavItems,
-    SideNavMenuItem,
+  SideNavMenuItem,
-    Theme,
+  Theme,
-    Tag,
+  Tag,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import MiniSearch from "minisearch";
+import MiniSearch from "minisearch";
-  import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
+import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import { theme } from "../store";
+import { theme } from "../store";
-  import SEARCH_INDEX from "../SEARCH_INDEX.json";
+import SEARCH_INDEX from "../SEARCH_INDEX.json";
 
-  const miniSearch = new MiniSearch({
+const miniSearch = new MiniSearch({
-    fields: ["text", "description"],
+  fields: ["text", "description"],
-    storeFields: ["text", "description", "href"],
+  storeFields: ["text", "description", "href"],
-    searchOptions: {
+  searchOptions: {
-      prefix: true,
+    prefix: true,
-      boost: { description: 2 },
+    boost: { description: 2 },
-      fuzzy: 0.1,
+    fuzzy: 0.1,
-    },
+  },
-  });
+});
 
-  miniSearch.addAll(SEARCH_INDEX);
+miniSearch.addAll(SEARCH_INDEX);
 
-  const deprecated = [];
+const deprecated = [];
-  const new_components = [];
+const new_components = [];
 
-  let value = "";
+let value = "";
-  let active = false;
+let active = false;
-  $: results = miniSearch.search(value).slice(0, 10);
+$: results = miniSearch.search(value).slice(0, 10);
 
-  let isOpen = false;
+let isOpen = false;
-  let isSideNavOpen = true;
+let isSideNavOpen = true;
-  let innerWidth = 2048;
+let innerWidth = 2048;
 
-  $: isMobile = innerWidth < 1056;
+$: isMobile = innerWidth < 1056;
-  $: components = $layout.children.filter(
+$: components = $layout.children.filter(
-    (child) => child.title === "components",
+  (child) => child.title === "components",
-  )[0];
+)[0];
 
-  $beforeUrlChange(() => {
+$beforeUrlChange(() => {
-    if (isMobile) isSideNavOpen = false;
+  if (isMobile) isSideNavOpen = false;
-    return true;
+  return true;
-  });
+});
 </script>
 
 <!-- routify:options bundle=true -->

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 = [
+const items = [
-    {
+  {
-      title: "Natural Language Classifier",
+    title: "Natural Language Classifier",
-      description:
+    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.",
+      "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",
+    title: "Natural Language Understanding",
-      description:
+    description:
-        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+      "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
-    },
+  },
-    {
+  {
-      title: "Language Translator",
+    title: "Language Translator",
-      description:
+    description:
-        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+      "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)}>

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 = [
+const items = [
-    { href: "/", text: "Dashboard" },
+  { href: "/", text: "Dashboard" },
-    { href: "/reports", text: "Annual reports" },
+  { href: "/reports", text: "Annual reports" },
-    { href: "/reports/2019", text: "2019" },
+  { href: "/reports/2019", text: "2019" },
-  ];
+];
 </script>
 
 <Breadcrumb>

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 size;
-  let events = [];
+let events = [];
 </script>
 
 <Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />

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 size = breakpointObserver();
-  const smaller = size.smallerThan("md");
+const smaller = size.smallerThan("md");
-  const larger = size.largerThan("md");
+const larger = size.largerThan("md");
 </script>
 
 <p>Current breakpoint size: {$size}</p>

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>

docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { Button } from "carbon-components-svelte";
+import { Button } from "carbon-components-svelte";
-  import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
+import TextBold from "carbon-icons-svelte/lib/TextBold.svelte";
-  import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
+import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte";
-  import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
+import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte";
 
-  let index = 1;
+let index = 1;
 </script>
 
 <Button

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 />

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 values = ["Apple", "Banana", "Coconut"];
-  let group = values.slice(0, 2);
+let group = values.slice(0, 2);
 </script>
 
 {#each values as value}

docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte

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

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>

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

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

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

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

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

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 = {
+const translation = {
-    Slack: 'Custom label for "Slack"',
+  Slack: 'Custom label for "Slack"',
-    Email: 'Custom label for "Email"',
+  Email: 'Custom label for "Email"',
-    Fax: 'Custom label for "Fax"',
+  Fax: 'Custom label for "Fax"',
-  };
+};
 
-  function itemToString(item) {
+function itemToString(item) {
-    return translation[item.key];
+  return translation[item.key];
-  }
+}
 
-  function shouldFilterItem(item, value) {
+function shouldFilterItem(item, value) {
-    if (!value) return true;
+  if (!value) return true;
-    const comparison = value.toLowerCase();
+  const comparison = value.toLowerCase();
-    return (
+  return (
-      item.key.toLowerCase().includes(comparison) ||
+    item.key.toLowerCase().includes(comparison) ||
-      itemToString(item).toLowerCase().includes(comparison)
+    itemToString(item).toLowerCase().includes(comparison)
-    );
+  );
-  }
+}
 </script>
 
 <ComboBox

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 = [
+const items = [
-    { id: "0", text: "Slack" },
+  { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
+  { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
+  { id: "2", text: "Fax" },
-  ];
+];
 
-  let comboBox1_selectedId = undefined;
+let comboBox1_selectedId = undefined;
-  let comboBox2_selectedId = undefined;
+let comboBox2_selectedId = undefined;
 
-  const formatSelected = (id) =>
+const formatSelected = (id) =>
-    items.find((item) => item.id === id)?.text ?? "N/A";
+  items.find((item) => item.id === id)?.text ?? "N/A";
 
-  $: primary = formatSelected(comboBox1_selectedId);
+$: primary = formatSelected(comboBox1_selectedId);
-  $: secondary = formatSelected(comboBox2_selectedId);
+$: secondary = formatSelected(comboBox2_selectedId);
 </script>
 
 <ComboBox

docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { ComboBox, Button } from "carbon-components-svelte";
+import { ComboBox, Button } from "carbon-components-svelte";
-  let selectedId = "1";
+let selectedId = "1";
 </script>
 
 <ComboBox

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>

docs/src/pages/framed/ContextMenu/ContextMenu.svelte

@@ -1,16 +1,16 @@
 <script>
-  import {
+import {
-    ContextMenu,
+  ContextMenu,
-    ContextMenuDivider,
+  ContextMenuDivider,
-    ContextMenuGroup,
+  ContextMenuGroup,
-    ContextMenuOption,
+  ContextMenuOption,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
-  let selectedIds = [];
+let selectedIds = [];
 
-  $: console.log("selectedIds", selectedIds);
+$: console.log("selectedIds", selectedIds);
 </script>
 
 <ContextMenu>

docs/src/pages/framed/ContextMenu/ContextMenuGroups.svelte

@@ -1,14 +1,14 @@
 <script>
-  import {
+import {
-    ContextMenu,
+  ContextMenu,
-    ContextMenuDivider,
+  ContextMenuDivider,
-    ContextMenuOption,
+  ContextMenuOption,
-    ContextMenuRadioGroup,
+  ContextMenuRadioGroup,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let selectedId = "0";
+let selectedId = "0";
 
-  $: console.log("selectedId", selectedId);
+$: console.log("selectedId", selectedId);
 </script>
 
 <ContextMenu>

docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte

@@ -1,14 +1,14 @@
 <script>
-  import {
+import {
-    ContextMenu,
+  ContextMenu,
-    ContextMenuDivider,
+  ContextMenuDivider,
-    ContextMenuGroup,
+  ContextMenuGroup,
-    ContextMenuOption,
+  ContextMenuOption,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
-  let target;
+let target;
 </script>
 
 <ContextMenu {target} on:open={(e) => console.log(e.detail)}>

docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte

@@ -1,15 +1,15 @@
 <script>
-  import {
+import {
-    ContextMenu,
+  ContextMenu,
-    ContextMenuDivider,
+  ContextMenuDivider,
-    ContextMenuGroup,
+  ContextMenuGroup,
-    ContextMenuOption,
+  ContextMenuOption,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
+import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
-  import Cut from "carbon-icons-svelte/lib/Cut.svelte";
+import Cut from "carbon-icons-svelte/lib/Cut.svelte";
 
-  let target;
+let target;
-  let target2;
+let target2;
 </script>
 
 <ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>

docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte

@@ -1,6 +1,6 @@
 <script>
-  import copy from "clipboard-copy";
+import copy from "clipboard-copy";
-  import { CopyButton } from "carbon-components-svelte";
+import { CopyButton } from "carbon-components-svelte";
 </script>
 
 <CopyButton text="Carbon svelte" copy={(text) => copy(text)} />

docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte

@@ -1,25 +1,25 @@
 <script>
-  import {
+import {
-    DataTable,
+  DataTable,
-    OverflowMenu,
+  OverflowMenu,
-    OverflowMenuItem,
+  OverflowMenuItem,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  const headers = [
+const headers = [
-    { key: "name", value: "Name" },
+  { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
+  { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
+  { key: "rule", value: "Rule" },
-    { key: "overflow", empty: true },
+  { key: "overflow", empty: true },
-  ];
+];
 
-  const rows = [
+const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, 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: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, 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" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+];
 </script>
 
 <DataTable sortable {headers} {rows}>

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

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

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte

@@ -1,34 +1,34 @@
 <script>
-  import {
+import {
-    DataTable,
+  DataTable,
-    Toolbar,
+  Toolbar,
-    ToolbarContent,
+  ToolbarContent,
-    ToolbarSearch,
+  ToolbarSearch,
-    ToolbarMenu,
+  ToolbarMenu,
-    ToolbarMenuItem,
+  ToolbarMenuItem,
-    ToolbarBatchActions,
+  ToolbarBatchActions,
-    Button,
+  Button,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import Save from "carbon-icons-svelte/lib/Save.svelte";
+import Save from "carbon-icons-svelte/lib/Save.svelte";
 
-  const headers = [
+const headers = [
-    { key: "name", value: "Name" },
+  { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
+  { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
+  { key: "rule", value: "Rule" },
-  ];
+];
 
-  const rows = [
+const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, 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: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, 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" },
+  { 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}>

docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte

@@ -1,33 +1,33 @@
 <script>
-  import {
+import {
-    DataTable,
+  DataTable,
-    Toolbar,
+  Toolbar,
-    ToolbarContent,
+  ToolbarContent,
-    ToolbarBatchActions,
+  ToolbarBatchActions,
-    Button,
+  Button,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
-  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
+import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
 
-  const headers = [
+const headers = [
-    { key: "name", value: "Name" },
+  { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
+  { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
+  { key: "rule", value: "Rule" },
-  ];
+];
 
-  let rows = [
+let rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, 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: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, 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" },
+  { id: "f", name: "Load Balancer 5", port: 80, rule: "DNS delegation" },
-  ];
+];
 
-  let active = false;
+let active = false;
-  let selectedRowIds = [];
+let selectedRowIds = [];
 
-  $: console.log("active", active);
+$: console.log("active", active);
-  $: console.log("selectedRowIds", selectedRowIds);
+$: console.log("selectedRowIds", selectedRowIds);
 </script>
 
 <DataTable

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 expandedRowIds = [];
-  let selectedRowIds = [];
+let selectedRowIds = [];
 
-  $: {
+$: {
-    console.log("expandedRowIds", expandedRowIds);
+  console.log("expandedRowIds", expandedRowIds);
-    console.log("selectedRowIds", selectedRowIds);
+  console.log("selectedRowIds", selectedRowIds);
-  }
+}
 </script>
 
 <DataTable

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

docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte

@@ -1,24 +1,24 @@
 <script>
-  import {
+import {
-    DataTable,
+  DataTable,
-    Toolbar,
+  Toolbar,
-    ToolbarContent,
+  ToolbarContent,
-    ToolbarSearch,
+  ToolbarSearch,
-    Pagination,
+  Pagination,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let rows = Array.from({ length: 10 }).map((_, i) => ({
+let rows = Array.from({ length: 10 }).map((_, i) => ({
-    id: i,
+  id: i,
-    name: "Load Balancer " + (i + 1),
+  name: "Load Balancer " + (i + 1),
-    protocol: "HTTP",
+  protocol: "HTTP",
-    port: 3000 + i * 10,
+  port: 3000 + i * 10,
-    rule: i % 2 ? "Round robin" : "DNS delegation",
+  rule: i % 2 ? "Round robin" : "DNS delegation",
-  }));
+}));
-  let pageSize = 5;
+let pageSize = 5;
-  let page = 1;
+let page = 1;
-  let filteredRowIds = [];
+let filteredRowIds = [];
 
-  $: console.log("filteredRowIds", filteredRowIds);
+$: console.log("filteredRowIds", filteredRowIds);
 </script>
 
 <DataTable

docs/src/pages/framed/DataTable/DataTableFilterable.svelte

@@ -1,24 +1,24 @@
 <script>
-  import {
+import {
-    DataTable,
+  DataTable,
-    Toolbar,
+  Toolbar,
-    ToolbarContent,
+  ToolbarContent,
-    ToolbarSearch,
+  ToolbarSearch,
-    Pagination,
+  Pagination,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let rows = Array.from({ length: 10 }).map((_, i) => ({
+let rows = Array.from({ length: 10 }).map((_, i) => ({
-    id: i,
+  id: i,
-    name: "Load Balancer " + (i + 1),
+  name: "Load Balancer " + (i + 1),
-    protocol: "HTTP",
+  protocol: "HTTP",
-    port: 3000 + i * 10,
+  port: 3000 + i * 10,
-    rule: i % 2 ? "Round robin" : "DNS delegation",
+  rule: i % 2 ? "Round robin" : "DNS delegation",
-  }));
+}));
-  let pageSize = 5;
+let pageSize = 5;
-  let page = 1;
+let page = 1;
-  let filteredRowIds = [];
+let filteredRowIds = [];
 
-  $: console.log("filteredRowIds", filteredRowIds);
+$: console.log("filteredRowIds", filteredRowIds);
 </script>
 
 <DataTable

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

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

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

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

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 sortKey = "port";
-  let sortDirection = "ascending";
+let sortDirection = "ascending";
 
-  $: console.log("sortKey", sortKey);
+$: console.log("sortKey", sortKey);
-  $: console.log("sortDirection", sortDirection);
+$: console.log("sortDirection", sortDirection);
 </script>
 
 <Button

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 = [
+const headers = [
-    { key: "name", value: "Name" },
+  { key: "name", value: "Name" },
-    { key: "port", value: "Port" },
+  { key: "port", value: "Port" },
-    { key: "rule", value: "Rule" },
+  { key: "rule", value: "Rule" },
-  ];
+];
 
-  const rows = [
+const rows = [
-    { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
+  { id: "a", name: "Load Balancer 3", port: 3000, rule: "Round robin" },
-    { id: "b", name: "Load Balancer 1", port: 443, 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: "c", name: "Load Balancer 2", port: 80, rule: "DNS delegation" },
-    { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
+  { id: "d", name: "Load Balancer 6", port: 3000, rule: "Round robin" },
-    { id: "e", name: "Load Balancer 4", port: 443, 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" },
+  { 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} />

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

docs/src/pages/framed/DatePicker/DatePickerModal.svelte

@@ -1,12 +1,12 @@
 <script>
-  import {
+import {
-    Button,
+  Button,
-    Modal,
+  Modal,
-    DatePicker,
+  DatePicker,
-    DatePickerInput,
+  DatePickerInput,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let open = false;
+let open = false;
 </script>
 
 <Button on:click={() => (open = true)}>Select date</Button>

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>

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>

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

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 = [
+const items = [
-    { id: "0", text: "Slack" },
+  { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
+  { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
+  { id: "2", text: "Fax" },
-  ];
+];
 
-  let dropdown1_selectedId = "0";
+let dropdown1_selectedId = "0";
-  let dropdown2_selectedId = "1";
+let dropdown2_selectedId = "1";
 
-  const formatSelected = (id) =>
+const formatSelected = (id) =>
-    items.find((item) => item.id === id)?.text ?? "N/A";
+  items.find((item) => item.id === id)?.text ?? "N/A";
 
-  $: primary = formatSelected(dropdown1_selectedId);
+$: primary = formatSelected(dropdown1_selectedId);
-  $: secondary = formatSelected(dropdown2_selectedId);
+$: secondary = formatSelected(dropdown2_selectedId);
 </script>
 
 <Dropdown

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 fileUploader;
-  let files = [];
+let files = [];
 </script>
 
 <FileUploader

docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte

@@ -1,14 +1,10 @@
 <script>
-  import {
+import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
 
-  let password = "";
+let password = "";
-  let invalid = false;
+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>

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>

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>

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>

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>

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>

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>

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>

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>

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 = [
+const images = [
-    "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
+  "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
-    "https://upload.wikimedia.org/wikipedia/commons/b/b9/Carbon-design-system-logo.png",
+  "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

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 =
+const src = "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
-    "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
+const srcError = src + "1";
-  const srcError = src + "1";
 
-  let imageLoader;
+let imageLoader;
-  let error;
+let error;
 </script>
 
 <Button

docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte

@@ -1,37 +1,37 @@
 <script>
-  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
+import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
-  import { onDestroy } from "svelte";
+import { onDestroy } from "svelte";
 
-  const descriptionMap = {
+const descriptionMap = {
-    active: "Submitting...",
+  active: "Submitting...",
-    finished: "Success",
+  finished: "Success",
-    inactive: "Cancelling...",
+  inactive: "Cancelling...",
-  };
+};
 
-  const stateMap = {
+const stateMap = {
-    active: "finished",
+  active: "finished",
-    inactive: "dormant",
+  inactive: "dormant",
-    finished: "dormant",
+  finished: "dormant",
-  };
+};
 
-  let timeout = undefined;
+let timeout = undefined;
-  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
+let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
 
-  function reset(incomingState) {
+function reset(incomingState) {
-    if (typeof timeout === "number") {
+  if (typeof timeout === "number") {
-      clearTimeout(timeout);
+    clearTimeout(timeout);
-    }
-
-    if (incomingState) {
-      timeout = setTimeout(() => {
-        state = incomingState;
-      }, 2000);
-    }
   }
 
-  onDestroy(reset);
+  if (incomingState) {
+    timeout = setTimeout(() => {
+      state = incomingState;
+    }, 2000);
+  }
+}
 
-  $: reset(stateMap[state]);
+onDestroy(reset);
+
+$: reset(stateMap[state]);
 </script>
 
 <ButtonSet>

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 />

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 toggled = false;
-  let events = [];
+let events = [];
 
-  $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
+$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
 </script>
 
 <LocalStorage

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 storage;
-  let toggled = false;
+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} />

docs/src/pages/framed/Modal/3ButtonComposedModal.svelte

@@ -1,15 +1,15 @@
 <script>
-  import {
+import {
-    Button,
+  Button,
-    ComposedModal,
+  ComposedModal,
-    ModalHeader,
+  ModalHeader,
-    ModalBody,
+  ModalBody,
-    ModalFooter,
+  ModalFooter,
-    Checkbox,
+  Checkbox,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let open = true;
+let open = true;
-  let checked = false;
+let checked = false;
 </script>
 
 <Button on:click={() => (open = true)}>Review changes</Button>

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>

docs/src/pages/framed/Modal/ComposedModal.svelte

@@ -1,13 +1,13 @@
 <script>
-  import {
+import {
-    ComposedModal,
+  ComposedModal,
-    ModalHeader,
+  ModalHeader,
-    ModalBody,
+  ModalBody,
-    ModalFooter,
+  ModalFooter,
-    Checkbox,
+  Checkbox,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let checked = false;
+let checked = false;
 </script>
 
 <ComposedModal open>

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>

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>

docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte

@@ -1,8 +1,8 @@
 <script>
-  import { Button, Modal } from "carbon-components-svelte";
+import { Button, Modal } from "carbon-components-svelte";
-  import Send from "carbon-icons-svelte/lib/Send.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>

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>

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>

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>

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 openCreate = false;
-  let openDelete = false;
+let openDelete = false;
 </script>
 
 <Button on:click={() => (openCreate = true)}>Create database</Button>

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>

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>

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>

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>

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

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 = [
+const items = [
-    { id: "0", text: "Slack" },
+  { id: "0", text: "Slack" },
-    { id: "1", text: "Email" },
+  { id: "1", text: "Email" },
-    { id: "2", text: "Fax" },
+  { id: "2", text: "Fax" },
-  ];
+];
 
-  let multiselect1_selectedIds = ["0"];
+let multiselect1_selectedIds = ["0"];
-  let multiselect2_selectedIds = ["1", "2"];
+let multiselect2_selectedIds = ["1", "2"];
 
-  const formatSelected = (i) =>
+const formatSelected = (i) =>
-    i.length === 0
+  i.length === 0
-      ? "N/A"
+    ? "N/A"
-      : i.map((id) => items.find((item) => item.id === id).text).join(", ");
+    : i.map((id) => items.find((item) => item.id === id).text).join(", ");
 
-  $: primary = formatSelected(multiselect1_selectedIds);
+$: primary = formatSelected(multiselect1_selectedIds);
-  $: secondary = formatSelected(multiselect2_selectedIds);
+$: secondary = formatSelected(multiselect2_selectedIds);
 </script>
 
 <MultiSelect

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 />

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 />

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 open = true;
-  let ref = null;
+let ref = null;
 </script>
 
 <div bind:this={ref} style:position="relative">

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 max = 328;
-  let value = 0;
+let value = 0;
-  let status = "active";
+let status = "active";
 
-  $: helperText =
+$: helperText =
-    value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
+  value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
-  $: if (value === max) {
+$: if (value === max) {
-    helperText = "Done";
+  helperText = "Done";
-    status = "finished";
+  status = "finished";
-  }
+}
 </script>
 
 <ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />

docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte

@@ -1,12 +1,12 @@
 <script>
-  import {
+import {
-    ProgressIndicator,
+  ProgressIndicator,
-    ProgressStep,
+  ProgressStep,
-    Button,
+  Button,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  let currentIndex = 1;
+let currentIndex = 1;
-  let thirdStepCurrent = false;
+let thirdStepCurrent = false;
 </script>
 
 <ProgressIndicator bind:currentIndex>

docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte

@@ -1,13 +1,13 @@
 <script>
-  import {
+import {
-    Button,
+  Button,
-    RadioButtonGroup,
+  RadioButtonGroup,
-    RadioButton,
+  RadioButton,
-  } from "carbon-components-svelte";
+} 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

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>

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

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

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

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

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 = [
+const nodes = [
-    {
+  {
-      text: "Item 1",
+    text: "Item 1",
-      nodes: [
+    nodes: [
-        {
+      {
-          text: "Item 1a",
+        text: "Item 1a",
-          nodes: [{ html: "<h5>HTML content</h5>" }],
+        nodes: [{ html: "<h5>HTML content</h5>" }],
-        },
+      },
-      ],
+    ],
-    },
+  },
-    {
+  {
-      text: "Item 2",
+    text: "Item 2",
-      nodes: [
+    nodes: [
-        {
+      {
-          href: "https://svelte.dev/",
+        href: "https://svelte.dev/",
-        },
+      },
-        {
+      {
-          href: "https://svelte.dev/",
+        href: "https://svelte.dev/",
-          text: "Link with custom text",
+        text: "Link with custom text",
-        },
+      },
-      ],
+    ],
-    },
+  },
-    {
+  {
-      text: "Item 3",
+    text: "Item 3",
-    },
+  },
-  ];
+];
 </script>
 
 <RecursiveList type="ordered-native" {nodes} />

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 />