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,14 +1,14 @@
 <script>
-  export let component = {
+export let component = {
   props: [],
   slots: [],
   events: [],
   rest_props: undefined,
   typedefs: [],
-  };
+};
 
-  import { onMount } from "svelte";
+import { onMount } from "svelte";
-  import {
+import {
   OutboundLink,
   StructuredList,
   StructuredListHead,
@@ -18,32 +18,31 @@
   UnorderedList,
   ListItem,
   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",
   boolean: "boolean",
   number: "number",
   null: "null",
   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",
-  );
+);
-  $: dispatched_events = component.events.filter(
+$: dispatched_events = component.events.filter(
   (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,5 +1,5 @@
 <script>
-  import {
+import {
   Grid,
   Link,
   Row,
@@ -12,37 +12,37 @@
   Tabs,
   Tab,
   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),
-  );
+);
-  $: multiple = api_components.length > 1;
+$: multiple = api_components.length > 1;
 
-  onMount(() => {
+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);
   }
-  });
+});
 
-  function formatSourceURL(multiple) {
+function formatSourceURL(multiple) {
   const filePath = api_components[0]?.filePath ?? "";
 
   if (multiple) {
@@ -58,12 +58,12 @@
    * @example "src/Tile/ClickableTile.svelte"
    */
   return filePath;
-  }
+}
 
-  // TODO: [refactor] read from package.json value
+// TODO: [refactor] read from package.json value
-  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
+$: 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,12 +1,12 @@
 <script>
-  import {
+import {
   isActive,
   url,
   layout,
   beforeUrlChange,
   goto,
-  } from "@sveltech/routify";
+} from "@sveltech/routify";
-  import {
+import {
   Header,
   HeaderUtilities,
   HeaderAction,
@@ -21,13 +21,13 @@
   SideNavMenuItem,
   Theme,
   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"],
   storeFields: ["text", "description", "href"],
   searchOptions: {
@@ -35,30 +35,30 @@
     boost: { description: 2 },
     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",
-  )[0];
+)[0];
 
-  $beforeUrlChange(() => {
+$beforeUrlChange(() => {
   if (isMobile) isSideNavOpen = false;
   return true;
-  });
+});
 </script>
 
 <!-- routify:options bundle=true -->

docs/src/pages/framed/Accordion/ExpandableAccordion.svelte

@@ -1,7 +1,7 @@
 <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",
     description:
@@ -17,9 +17,9 @@
     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)}>

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: "/reports", text: "Annual reports" },
   { 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;
   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"',
   Email: 'Custom label for "Email"',
   Fax: 'Custom label for "Fax"',
-  };
+};
 
-  function itemToString(item) {
+function itemToString(item) {
   return translation[item.key];
-  }
+}
 
-  function shouldFilterItem(item, value) {
+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

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: "1", text: "Email" },
   { 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";
 
-  $: 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,
   ContextMenuDivider,
   ContextMenuGroup,
   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,
   ContextMenuDivider,
   ContextMenuOption,
   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,
   ContextMenuDivider,
   ContextMenuGroup,
   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,
   ContextMenuDivider,
   ContextMenuGroup,
   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,
   OverflowMenu,
   OverflowMenuItem,
-  } from "carbon-components-svelte";
+} from "carbon-components-svelte";
 
-  const headers = [
+const headers = [
   { key: "name", value: "Name" },
   { key: "port", value: "Port" },
   { key: "rule", value: "Rule" },
   { key: "overflow", empty: true },
-  ];
+];
 
-  const rows = [
+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}>

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,5 +1,5 @@
 <script>
-  import {
+import {
   DataTable,
   Toolbar,
   ToolbarContent,
@@ -8,27 +8,27 @@
   ToolbarMenuItem,
   ToolbarBatchActions,
   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: "port", value: "Port" },
   { key: "rule", value: "Rule" },
-  ];
+];
 
-  const rows = [
+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}>

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

@@ -1,33 +1,33 @@
 <script>
-  import {
+import {
   DataTable,
   Toolbar,
   ToolbarContent,
   ToolbarBatchActions,
   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: "port", value: "Port" },
   { key: "rule", value: "Rule" },
-  ];
+];
 
-  let rows = [
+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 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("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,
   Toolbar,
   ToolbarContent,
   ToolbarSearch,
   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,
   name: "Load Balancer " + (i + 1),
   protocol: "HTTP",
   port: 3000 + i * 10,
   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,
   Toolbar,
   ToolbarContent,
   ToolbarSearch,
   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,
   name: "Load Balancer " + (i + 1),
   protocol: "HTTP",
   port: 3000 + i * 10,
   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,7 +1,7 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";
 
-  const rows = [
+const rows = [
   {
     id: "a",
     name: "Load Balancer 3",
@@ -44,7 +44,7 @@
     port: 80,
     rule: "DNS delegation",
   },
-  ];
+];
 </script>
 
 <DataTable

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

@@ -1,7 +1,7 @@
 <script>
-  import { DataTable } from "carbon-components-svelte";
+import { DataTable } from "carbon-components-svelte";
 
-  const rows = [
+const rows = [
   {
     id: "a",
     name: "Load Balancer 3",
@@ -44,7 +44,7 @@
     port: 80,
     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,
   name: "Load Balancer " + (i + 1),
   protocol: "HTTP",
   port: 3000 + i * 10,
   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: "port", value: "Port" },
   { key: "rule", value: "Rule" },
-  ];
+];
 
-  const rows = [
+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} />

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,
   Modal,
   DatePicker,
   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: "1", text: "Email" },
   { 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";
 
-  $: 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/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,23 +1,23 @@
 <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...",
   finished: "Success",
   inactive: "Cancelling...",
-  };
+};
 
-  const stateMap = {
+const stateMap = {
   active: "finished",
   inactive: "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") {
     clearTimeout(timeout);
   }
@@ -27,11 +27,11 @@
       state = incomingState;
     }, 2000);
   }
-  }
+}
 
-  onDestroy(reset);
+onDestroy(reset);
 
-  $: reset(stateMap[state]);
+$: 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,
   ComposedModal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   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,
   ModalHeader,
   ModalBody,
   ModalFooter,
   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: "1", text: "Email" },
   { 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
     ? "N/A"
     : 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";
-  $: if (value === max) {
+$: if (value === max) {
   helperText = "Done";
   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,
   ProgressStep,
   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,
   RadioButtonGroup,
   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,7 +1,7 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";
 
-  const nodes = [
+const nodes = [
   {
     text: "Item 1",
     nodes: [
@@ -26,7 +26,7 @@
   {
     text: "Item 3",
   },
-  ];
+];
 </script>
 
 <RecursiveList {nodes} />

docs/src/pages/framed/RecursiveList/RecursiveListFlatArray.svelte

@@ -1,7 +1,7 @@
 <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: 2, text: "Item 1a", pid: 1 },
   { id: 3, html: "<h5>HTML content</h5>", pid: 2 },
@@ -14,7 +14,7 @@
     pid: 4,
   },
   { id: 7, text: "Item 3" },
-  ];
+];
 </script>
 
 <RecursiveList nodes={toHierarchy(nodesFlat, (node) => node.pid)} />

docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";
 
-  const nodes = [
+const nodes = [
   {
     text: "Item 1",
     nodes: [
@@ -26,7 +26,7 @@
   {
     text: "Item 3",
   },
-  ];
+];
 </script>
 
 <RecursiveList type="ordered" {nodes} />

docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { RecursiveList } from "carbon-components-svelte";
+import { RecursiveList } from "carbon-components-svelte";
 
-  const nodes = [
+const nodes = [
   {
     text: "Item 1",
     nodes: [
@@ -26,7 +26,7 @@
   {
     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 />