Run npm run lint

docs/package.json

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

docs/src/components/ComponentApi.svelte

@@ -24,8 +24,7 @@
 let AsyncPreviewTypeScript;
 
 onMount(async () => {
-    AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte"))
-      .default;
+  AsyncPreviewTypeScript = (await import("./PreviewTypeScript.svelte")).default;
 });
 
 const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";

docs/src/components/PreviewTypeScript.svelte

@@ -7,11 +7,7 @@
 import "prismjs/components/prism-typescript";
 import copy from "clipboard-copy";
 
-  $: highlightedCode = highlight(
-    code,
-    Prism.languages.typescript,
-    "typescript",
-  );
+$: highlightedCode = highlight(code, Prism.languages.typescript, "typescript");
 </script>
 
 {#if type === "multi"}

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

@@ -1,9 +1,5 @@
 <script>
-  import {
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
+import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
 
 let password = "";
 let invalid = false;

docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte

@@ -1,8 +1,7 @@
 <script>
 import { ImageLoader, Button } from "carbon-components-svelte";
 
-  const src =
-    "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
+const src = "https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
 const srcError = src + "1";
 
 let imageLoader;

docs/src/pages/framed/Theme/Theme.svelte

@@ -1,9 +1,5 @@
 <script>
-  import {
-    Theme,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
+import { Theme, RadioButtonGroup, RadioButton } from "carbon-components-svelte";
 
 let theme = "g90";
 </script>

docs/src/pages/framed/Theme/ThemePersist.svelte

@@ -1,9 +1,5 @@
 <script>
-  import {
-    Theme,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
+import { Theme, RadioButtonGroup, RadioButton } from "carbon-components-svelte";
 
 let theme = "g90";
 </script>

docs/src/pages/framed/UIShell/HeaderSwitcher.svelte

@@ -25,15 +25,15 @@
 let isOpen = false;
 let selected = "0";
 let transitions = {
-    "0": {
+  0: {
     text: "Default (duration: 200ms)",
     value: { duration: 200 },
   },
-    "1": {
+  1: {
     text: "Custom (duration: 600ms, delay: 50ms, easing: expoIn)",
     value: { duration: 600, delay: 50, easing: expoIn },
   },
-    "2": {
+  2: {
     text: "Disabled",
     value: false,
   },

package.json

@@ -26,9 +26,7 @@
       "import": "./src/*.js"
     }
   },
-  "sideEffects": [
-    "css/*.css"
-  ],
+  "sideEffects": ["css/*.css"],
   "scripts": {
     "test": "vitest",
     "test:ui": "vite",
@@ -85,12 +83,7 @@
     "component library",
     "carbon design system"
   ],
-  "files": [
-    "src",
-    "types",
-    "css",
-    "telemetry.yml"
-  ],
+  "files": ["src", "types", "css", "telemetry.yml"],
   "maintainers": [
     "Eric Liu (https://github.com/metonym)",
     "Enrico Sacchetti (https://github.com/theetrain)"

scripts/format-component-api.js

@@ -1,6 +1,8 @@
 // @ts-check
 import fs from "node:fs";
-import componentApi from "../docs/src/COMPONENT_API.json" assert { type: "json" };
+import componentApi from "../docs/src/COMPONENT_API.json" assert {
+  type: "json",
+};
 import { format } from "prettier";
 import plugin from "prettier/plugins/typescript";
 

src/Button/Button.svelte

@@ -119,12 +119,8 @@
     hasIconOnly && "bx--btn--icon-only",
     hasIconOnly && "bx--tooltip__trigger",
     hasIconOnly && "bx--tooltip--a11y",
-      hasIconOnly &&
-        tooltipPosition &&
-        `bx--btn--icon-only--${tooltipPosition}`,
-      hasIconOnly &&
-        tooltipAlignment &&
-        `bx--tooltip--align-${tooltipAlignment}`,
+    hasIconOnly && tooltipPosition && `bx--btn--icon-only--${tooltipPosition}`,
+    hasIconOnly && tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`,
     hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
     $$restProps.class,
   ]

src/DataTable/DataTable.svelte

@@ -237,27 +237,19 @@
 let expanded = false;
 let parentRowId = null;
 
-  $: expandedRows = expandedRowIds.reduce(
-    (a, id) => ({ ...a, [id]: true }),
-    {},
-  );
+$: expandedRows = expandedRowIds.reduce((a, id) => ({ ...a, [id]: true }), {});
 
 let refSelectAll = null;
 
 $: batchSelectedIds.set(selectedRowIds);
 $: rowIds = $tableRows.map((row) => row.id);
-  $: expandableRowIds = rowIds.filter(
-    (id) => !nonExpandableRowIds.includes(id),
-  );
-  $: selectableRowIds = rowIds.filter(
-    (id) => !nonSelectableRowIds.includes(id),
-  );
+$: expandableRowIds = rowIds.filter((id) => !nonExpandableRowIds.includes(id));
+$: selectableRowIds = rowIds.filter((id) => !nonSelectableRowIds.includes(id));
 $: selectAll =
   selectableRowIds.length > 0 &&
   selectedRowIds.length === selectableRowIds.length;
 $: indeterminate =
-    selectedRowIds.length > 0 &&
-    selectedRowIds.length < selectableRowIds.length;
+  selectedRowIds.length > 0 && selectedRowIds.length < selectableRowIds.length;
 $: if (batchExpansion) {
   expandable = true;
   expanded = expandedRowIds.length === expandableRowIds.length;
@@ -305,9 +297,7 @@
   }
 }
 const getDisplayedRows = (rows, page, pageSize) =>
-    page && pageSize
-      ? rows.slice((page - 1) * pageSize, page * pageSize)
-      : rows;
+  page && pageSize ? rows.slice((page - 1) * pageSize, page * pageSize) : rows;
 $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
 $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 

src/DatePicker/DatePicker.svelte

@@ -181,10 +181,7 @@
     },
   });
   calendar?.calendarContainer?.setAttribute("role", "application");
-    calendar?.calendarContainer?.setAttribute(
-      "aria-label",
-      "calendar-container",
-    );
+  calendar?.calendarContainer?.setAttribute("aria-label", "calendar-container");
 }
 
 onMount(() => {

src/FileUploader/FileUploader.svelte

@@ -97,9 +97,7 @@
   if (removedIds.length > 0) {
     dispatch(
       "remove",
-        removedIds.map((id) =>
-          prevFiles.find((file) => id === getFileId(file)),
-        ),
+      removedIds.map((id) => prevFiles.find((file) => id === getFileId(file))),
     );
   }
 

src/MultiSelect/MultiSelect.svelte

@@ -245,10 +245,7 @@
 });
 
 function sort() {
-    if (
-      selectionFeedback === "top" ||
-      selectionFeedback === "top-after-reopen"
-    ) {
+  if (selectionFeedback === "top" || selectionFeedback === "top-after-reopen") {
     const checkedItems = items
       .filter((item) => selectedIds.includes(item.id))
       .map((item) => ({ ...item, checked: true }));
@@ -257,9 +254,7 @@
       .map((item) => ({ ...item, checked: false }));
 
     return [
-        ...(checkedItems.length > 1
-          ? checkedItems.sort(sortItem)
-          : checkedItems),
+      ...(checkedItems.length > 1 ? checkedItems.sort(sortItem) : checkedItems),
       ...uncheckedItems.sort(sortItem),
     ];
   }
@@ -289,8 +284,7 @@
 $: filteredItems = sortedItems.filter((item) => filterItem(item, value));
 $: highlightedId =
   highlightedIndex > -1
-      ? ((filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ??
-        null)
+    ? ((filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null)
     : null;
 </script>
 

src/Pagination/Pagination.svelte

@@ -28,8 +28,7 @@
  * Override the item text
  * @type {(min: number, max: number) => string}
  */
-  export let itemText = (min, max) =>
-    `${min}–${max} item${max === 1 ? "" : "s"}`;
+export let itemText = (min, max) => `${min}–${max} item${max === 1 ? "" : "s"}`;
 
 /**
  * Override the item range text

src/Slider/Slider.svelte

@@ -100,8 +100,7 @@
   const offsetX = e.touches ? e.touches[0].clientX : e.clientX;
   const { left, width } = trackRef.getBoundingClientRect();
   let nextValue =
-      min +
-      Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
+    min + Math.round(((max - min) * ((offsetX - left) / width)) / step) * step;
 
   if (nextValue <= min) {
     nextValue = min;

src/Tooltip/Tooltip.svelte

@@ -150,8 +150,7 @@
         if (hideIcon) {
           offsetX = -1 * (tooltip.width / 2 - button.width / 2);
         } else {
-            offsetX =
-              -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
+          offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
         }
         offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
         break;

src/UIShell/HeaderNavMenu.svelte

@@ -35,8 +35,7 @@
   },
 });
 
-  $: isCurrentSubmenu =
-    Object.values($selectedItems).filter(Boolean).length > 0;
+$: isCurrentSubmenu = Object.values($selectedItems).filter(Boolean).length > 0;
 </script>
 
 <svelte:window

tests/FluidForm.test.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    FluidForm,
-    TextInput,
-    PasswordInput,
-  } from "carbon-components-svelte";
+import { FluidForm, TextInput, PasswordInput } from "carbon-components-svelte";
 </script>
 
 <FluidForm action="" method="get">

tests/Select/Select.group.test.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    Select,
-    SelectItem,
-    SelectItemGroup,
-  } from "carbon-components-svelte";
+import { Select, SelectItem, SelectItemGroup } from "carbon-components-svelte";
 
 export let selected: string | number | undefined = undefined;
 </script>