chore: format files with Prettier 3

src/DataTable/DataTable.svelte

@@ -227,7 +227,7 @@
 
   $: expandedRows = expandedRowIds.reduce(
     (a, id) => ({ ...a, [id]: true }),
-    {}
+    {},
   );
 
   let refSelectAll = null;
@@ -235,10 +235,10 @@
   $: batchSelectedIds.set(selectedRowIds);
   $: rowIds = $tableRows.map((row) => row.id);
   $: expandableRowIds = rowIds.filter(
-    (id) => !nonExpandableRowIds.includes(id)
+    (id) => !nonExpandableRowIds.includes(id),
   );
   $: selectableRowIds = rowIds.filter(
-    (id) => !nonSelectableRowIds.includes(id)
+    (id) => !nonSelectableRowIds.includes(id),
   );
   $: selectAll =
     selectableRowIds.length > 0 &&
@@ -300,7 +300,7 @@
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 
   $: hasCustomHeaderWidth = headers.some(
-    (header) => header.width || header.minWidth
+    (header) => header.width || header.minWidth,
   );
 
   /** @type {(header: DataTableHeader) => undefined | string} */
@@ -314,16 +314,16 @@
   };
 </script>
 
-<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
+<TableContainer {useStaticWidth} {...$$restProps}>
   {#if title || $$slots.title || description || $$slots.description}
-    <div class:bx--data-table-header="{true}">
+    <div class:bx--data-table-header={true}>
       {#if title || $$slots.title}
-        <h4 class:bx--data-table-header__title="{true}">
+        <h4 class:bx--data-table-header__title={true}>
           <slot name="title">{title}</slot>
         </h4>
       {/if}
       {#if description || $$slots.description}
-        <p class:bx--data-table-header__description="{true}">
+        <p class:bx--data-table-header__description={true}>
           <slot name="description">{description}</slot>
         </p>
       {/if}
@@ -331,31 +331,31 @@
   {/if}
   <slot />
   <Table
-    zebra="{zebra}"
-    size="{size}"
-    stickyHeader="{stickyHeader}"
-    sortable="{sortable}"
-    useStaticWidth="{useStaticWidth}"
-    tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
+    {zebra}
+    {size}
+    {stickyHeader}
+    {sortable}
+    {useStaticWidth}
+    tableStyle={hasCustomHeaderWidth && "table-layout: fixed"}
   >
     <TableHead>
       <TableRow>
         {#if expandable}
           <th
             scope="col"
-            class:bx--table-expand="{true}"
-            data-previous-value="{expanded ? 'collapsed' : undefined}"
+            class:bx--table-expand={true}
+            data-previous-value={expanded ? "collapsed" : undefined}
           >
             {#if batchExpansion}
               <button
                 type="button"
-                class:bx--table-expand__button="{true}"
-                on:click="{() => {
+                class:bx--table-expand__button={true}
+                on:click={() => {
                   expanded = !expanded;
                   expandedRowIds = expanded ? expandableRowIds : [];
 
-                  dispatch('click:header--expand', { expanded });
-                }}"
+                  dispatch("click:header--expand", { expanded });
+                }}
               >
                 <ChevronRight class="bx--table-expand__svg" />
               </button>
@@ -366,14 +366,14 @@
           <th scope="col"></th>
         {/if}
         {#if batchSelection && !radio}
-          <th scope="col" class:bx--table-column-checkbox="{true}">
+          <th scope="col" class:bx--table-column-checkbox={true}>
             <InlineCheckbox
-              bind:ref="{refSelectAll}"
+              bind:ref={refSelectAll}
               aria-label="Select all rows"
-              checked="{selectAll}"
-              indeterminate="{indeterminate}"
-              on:change="{(e) => {
-                dispatch('click:header--select', {
+              checked={selectAll}
+              {indeterminate}
+              on:change={(e) => {
+                dispatch("click:header--select", {
                   indeterminate,
                   selected: !indeterminate && e.target.checked,
                 });
@@ -390,36 +390,36 @@
                 } else {
                   selectedRowIds = [];
                 }
-              }}"
+              }}
             />
           </th>
         {/if}
         {#each headers as header (header.key)}
           {#if header.empty}
-            <th scope="col" style="{formatHeaderWidth(header)}"></th>
+            <th scope="col" style={formatHeaderWidth(header)}></th>
           {:else}
             <TableHeader
-              id="{header.key}"
-              style="{formatHeaderWidth(header)}"
-              sortable="{sortable && header.sort !== false}"
-              sortDirection="{sortKey === header.key ? sortDirection : 'none'}"
-              active="{sortKey === header.key}"
-              on:click="{() => {
-                dispatch('click', { header });
+              id={header.key}
+              style={formatHeaderWidth(header)}
+              sortable={sortable && header.sort !== false}
+              sortDirection={sortKey === header.key ? sortDirection : "none"}
+              active={sortKey === header.key}
+              on:click={() => {
+                dispatch("click", { header });
 
                 if (header.sort === false) {
-                  dispatch('click:header', { header });
+                  dispatch("click:header", { header });
                 } else {
                   let currentSortDirection =
-                    sortKey === header.key ? sortDirection : 'none';
+                    sortKey === header.key ? sortDirection : "none";
                   sortDirection = sortDirectionMap[currentSortDirection];
                   sortKey =
-                    sortDirection === 'none' ? null : thKeys[header.key];
-                  dispatch('click:header', { header, sortDirection });
+                    sortDirection === "none" ? null : thKeys[header.key];
+                  dispatch("click:header", { header, sortDirection });
                 }
-              }}"
+              }}
             >
-              <slot name="cell-header" header="{header}">{header.value}</slot>
+              <slot name="cell-header" {header}>{header.value}</slot>
             </TableHeader>
           {/if}
         {/each}
@@ -428,8 +428,8 @@
     <TableBody>
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
         <TableRow
-          data-row="{row.id}"
-          data-parent-row="{expandable ? true : undefined}"
+          data-row={row.id}
+          data-parent-row={expandable ? true : undefined}
           class="{selectedRowIds.includes(row.id)
             ? 'bx--data-table--selected'
             : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
@@ -437,54 +437,54 @@
             : ''} {expandable && parentRowId === row.id
             ? 'bx--expandable-row--hover'
             : ''}"
-          on:click="{({ target }) => {
+          on:click={({ target }) => {
             // forgo "click", "click:row" events if target
             // resembles an overflow menu, a checkbox, or radio button
             if (
               [...target.classList].some((name) =>
-                /^bx--(overflow-menu|checkbox|radio-button)/.test(name)
+                /^bx--(overflow-menu|checkbox|radio-button)/.test(name),
               )
             ) {
               return;
             }
-            dispatch('click', { row });
-            dispatch('click:row', row);
-          }}"
-          on:mouseenter="{() => {
-            dispatch('mouseenter:row', row);
-          }}"
-          on:mouseleave="{() => {
-            dispatch('mouseleave:row', row);
-          }}"
+            dispatch("click", { row });
+            dispatch("click:row", row);
+          }}
+          on:mouseenter={() => {
+            dispatch("mouseenter:row", row);
+          }}
+          on:mouseleave={() => {
+            dispatch("mouseleave:row", row);
+          }}
         >
           {#if expandable}
             <TableCell
               class="bx--table-expand"
               headers="expand"
-              data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
+              data-previous-value={!nonExpandableRowIds.includes(row.id) &&
               expandedRows[row.id]
-                ? 'collapsed'
-                : undefined}"
+                ? "collapsed"
+                : undefined}
             >
               {#if !nonExpandableRowIds.includes(row.id)}
                 <button
                   type="button"
-                  class:bx--table-expand__button="{true}"
-                  aria-label="{expandedRows[row.id]
-                    ? 'Collapse current row'
-                    : 'Expand current row'}"
-                  on:click|stopPropagation="{() => {
+                  class:bx--table-expand__button={true}
+                  aria-label={expandedRows[row.id]
+                    ? "Collapse current row"
+                    : "Expand current row"}
+                  on:click|stopPropagation={() => {
                     const rowExpanded = !!expandedRows[row.id];
 
                     expandedRowIds = rowExpanded
                       ? expandedRowIds.filter((id) => id !== row.id)
                       : [...expandedRowIds, row.id];
 
-                    dispatch('click:row--expand', {
+                    dispatch("click:row--expand", {
                       row,
                       expanded: !rowExpanded,
                     });
-                  }}"
+                  }}
                 >
                   <ChevronRight class="bx--table-expand__svg" />
                 </button>
@@ -493,34 +493,34 @@
           {/if}
           {#if selectable}
             <td
-              class:bx--table-column-checkbox="{true}"
-              class:bx--table-column-radio="{radio}"
+              class:bx--table-column-checkbox={true}
+              class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
                 {#if radio}
                   <RadioButton
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       selectedRowIds = [row.id];
-                      dispatch('click:row--select', { row, selected: true });
-                    }}"
+                      dispatch("click:row--select", { row, selected: true });
+                    }}
                   />
                 {:else}
                   <InlineCheckbox
                     name="select-row-{row.id}"
-                    checked="{selectedRowIds.includes(row.id)}"
-                    on:change="{() => {
+                    checked={selectedRowIds.includes(row.id)}
+                    on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
                         selectedRowIds = selectedRowIds.filter(
-                          (id) => id !== row.id
+                          (id) => id !== row.id,
                         );
-                        dispatch('click:row--select', { row, selected: false });
+                        dispatch("click:row--select", { row, selected: false });
                       } else {
                         selectedRowIds = [...selectedRowIds, row.id];
-                        dispatch('click:row--select', { row, selected: true });
+                        dispatch("click:row--select", { row, selected: true });
                       }
-                    }}"
+                    }}
                   />
                 {/if}
               {/if}
@@ -528,31 +528,19 @@
           {/if}
           {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
             {#if headers[j].empty}
-              <td class:bx--table-column-menu="{headers[j].columnMenu}">
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+              <td class:bx--table-column-menu={headers[j].columnMenu}>
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </td>
             {:else}
               <TableCell
-                on:click="{() => {
-                  dispatch('click', { row, cell });
-                  dispatch('click:cell', cell);
-                }}"
+                on:click={() => {
+                  dispatch("click", { row, cell });
+                  dispatch("click:cell", cell);
+                }}
               >
-                <slot
-                  name="cell"
-                  row="{row}"
-                  cell="{cell}"
-                  rowIndex="{i}"
-                  cellIndex="{j}"
-                >
+                <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
               </TableCell>
@@ -563,22 +551,22 @@
         {#if expandable}
           <tr
             data-child-row
-            class:bx--expandable-row="{true}"
-            on:mouseenter="{() => {
+            class:bx--expandable-row={true}
+            on:mouseenter={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = row.id;
-            }}"
-            on:mouseleave="{() => {
+            }}
+            on:mouseleave={() => {
               if (nonExpandableRowIds.includes(row.id)) return;
               parentRowId = null;
-            }}"
+            }}
           >
             {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
               <TableCell
-                colspan="{selectable ? headers.length + 2 : headers.length + 1}"
+                colspan={selectable ? headers.length + 2 : headers.length + 1}
               >
-                <div class:bx--child-row-inner-container="{true}">
-                  <slot name="expanded-row" row="{row}" />
+                <div class:bx--child-row-inner-container={true}>
+                  <slot name="expanded-row" {row} />
                 </div>
               </TableCell>
             {/if}

src/DataTable/DataTableSkeleton.svelte

@@ -33,45 +33,46 @@
   export let showToolbar = true;
 
   $: values = headers.map((header) =>
-    header.value !== undefined ? header.value : header
+    header.value !== undefined ? header.value : header,
   );
   $: cols = Array.from(
     { length: headers.length > 0 ? headers.length : columns },
-    (_, i) => i
+    (_, i) => i,
   );
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <div
-  class:bx--skeleton="{true}"
-  class:bx--data-table-container="{true}"
+  class:bx--skeleton={true}
+  class:bx--data-table-container={true}
   {...$$restProps}
 >
   {#if showHeader}
-    <div class:bx--data-table-header="{true}">
-      <div class:bx--data-table-header__title="{true}"></div>
-      <div class:bx--data-table-header__description="{true}"></div>
+    <div class:bx--data-table-header={true}>
+      <div class:bx--data-table-header__title={true}></div>
+      <div class:bx--data-table-header__description={true}></div>
     </div>
   {/if}
   {#if showToolbar}
-    <section aria-label="data table toolbar" class:bx--table-toolbar="{true}">
-      <div class:bx--toolbar-content="{true}">
+    <section aria-label="data table toolbar" class:bx--table-toolbar={true}>
+      <div class:bx--toolbar-content={true}>
         <span
-          class:bx--skeleton="{true}"
-          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"></span>
+          class:bx--skeleton={true}
+          class:bx--btn={true}
+          class:bx--btn--sm={true}
+        ></span>
       </div>
     </section>
   {/if}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <table
-    class:bx--skeleton="{true}"
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--zebra="{zebra}"
+    class:bx--skeleton={true}
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--zebra={zebra}
     on:click
     on:mouseover
     on:mouseenter

src/DataTable/DataTableTypes.d.ts

@@ -2,17 +2,17 @@ type PathDepth = [never, 0, 1, 2, ...0[]];
 
 type Join<K, P> = K extends string | number
   ? P extends string | number
-  ? `${K}${"" extends P ? "" : "."}${P}`
-  : never
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
   : never;
 
 // For performance, the maximum traversal depth is 10.
 export type PropertyPath<T, D extends number = 10> = [D] extends [never]
   ? never
   : T extends object
-  ? {
-    [K in keyof T]-?: K extends string | number
-    ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
-    : never;
-  }[keyof T]
-  : "";
+    ? {
+        [K in keyof T]-?: K extends string | number
+          ? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
+          : never;
+      }[keyof T]
+    : "";

src/DataTable/Table.svelte

@@ -25,35 +25,35 @@
 </script>
 
 {#if stickyHeader}
-  <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
+  <section class:bx--data-table_inner-container={true} {...$$restProps}>
     <table
-      class:bx--data-table="{true}"
-      class:bx--data-table--compact="{size === 'compact'}"
-      class:bx--data-table--short="{size === 'short'}"
-      class:bx--data-table--tall="{size === 'tall'}"
-      class:bx--data-table--md="{size === 'medium'}"
-      class:bx--data-table--sort="{sortable}"
-      class:bx--data-table--zebra="{zebra}"
-      class:bx--data-table--static="{useStaticWidth}"
-      class:bx--data-table--sticky-header="{stickyHeader}"
-      style="{tableStyle}"
+      class:bx--data-table={true}
+      class:bx--data-table--compact={size === "compact"}
+      class:bx--data-table--short={size === "short"}
+      class:bx--data-table--tall={size === "tall"}
+      class:bx--data-table--md={size === "medium"}
+      class:bx--data-table--sort={sortable}
+      class:bx--data-table--zebra={zebra}
+      class:bx--data-table--static={useStaticWidth}
+      class:bx--data-table--sticky-header={stickyHeader}
+      style={tableStyle}
     >
       <slot />
     </table>
   </section>
 {:else}
   <table
-    class:bx--data-table="{true}"
-    class:bx--data-table--compact="{size === 'compact'}"
-    class:bx--data-table--short="{size === 'short'}"
-    class:bx--data-table--tall="{size === 'tall'}"
-    class:bx--data-table--md="{size === 'medium'}"
-    class:bx--data-table--sort="{sortable}"
-    class:bx--data-table--zebra="{zebra}"
-    class:bx--data-table--static="{useStaticWidth}"
-    class:bx--data-table--sticky-header="{stickyHeader}"
+    class:bx--data-table={true}
+    class:bx--data-table--compact={size === "compact"}
+    class:bx--data-table--short={size === "short"}
+    class:bx--data-table--tall={size === "tall"}
+    class:bx--data-table--md={size === "medium"}
+    class:bx--data-table--sort={sortable}
+    class:bx--data-table--zebra={zebra}
+    class:bx--data-table--static={useStaticWidth}
+    class:bx--data-table--sticky-header={stickyHeader}
     {...$$restProps}
-    style="{tableStyle}"
+    style={tableStyle}
   >
     <slot />
   </table>

src/DataTable/TableContainer.svelte

@@ -13,15 +13,15 @@
 </script>
 
 <div
-  class:bx--data-table-container="{true}"
-  class:bx--data-table-container--static="{useStaticWidth}"
-  class:bx--data-table--max-width="{stickyHeader}"
+  class:bx--data-table-container={true}
+  class:bx--data-table-container--static={useStaticWidth}
+  class:bx--data-table--max-width={stickyHeader}
   {...$$restProps}
 >
   {#if title}
-    <div class:bx--data-table-header="{true}">
-      <h4 class:bx--data-table-header__title="{true}">{title}</h4>
-      <p class:bx--data-table-header__description="{true}">{description}</p>
+    <div class:bx--data-table-header={true}>
+      <h4 class:bx--data-table-header__title={true}>{title}</h4>
+      <p class:bx--data-table-header__description={true}>{description}</p>
     </div>
   {/if}
   <slot />

src/DataTable/TableHeader.svelte

@@ -33,9 +33,9 @@
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if sortable}
   <th
-    aria-sort="{active ? sortDirection : 'none'}"
-    scope="{scope}"
-    data-header="{id}"
+    aria-sort={active ? sortDirection : "none"}
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:mouseover
     on:mouseenter
@@ -43,38 +43,33 @@
   >
     <button
       type="button"
-      class:bx--table-sort="{true}"
-      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active &&
-        sortDirection === 'descending'}"
+      class:bx--table-sort={true}
+      class:bx--table-sort--active={active}
+      class:bx--table-sort--ascending={active && sortDirection === "descending"}
       on:click
     >
-      <div class:bx--table-header-label="{true}">
+      <div class:bx--table-header-label={true}>
         <slot />
       </div>
-      <ArrowUp
-        size="{20}"
-        aria-label="{ariaLabel}"
-        class="bx--table-sort__icon"
-      />
+      <ArrowUp size={20} aria-label={ariaLabel} class="bx--table-sort__icon" />
       <ArrowsVertical
-        size="{20}"
-        aria-label="{ariaLabel}"
+        size={20}
+        aria-label={ariaLabel}
         class="bx--table-sort__icon-unsorted"
       />
     </button>
   </th>
 {:else}
   <th
-    scope="{scope}"
-    data-header="{id}"
+    {scope}
+    data-header={id}
     {...$$restProps}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
   >
-    <div class:bx--table-header-label="{true}">
+    <div class:bx--table-header-label={true}>
       <slot />
     </div>
   </th>

src/DataTable/Toolbar.svelte

@@ -22,12 +22,12 @@
 </script>
 
 <section
-  bind:this="{ref}"
+  bind:this={ref}
   aria-label="data table toolbar"
-  class:bx--table-toolbar="{true}"
-  class:bx--table-toolbar--small="{size === 'sm'}"
-  class:bx--table-toolbar--normal="{size === 'default'}"
-  style:z-index="{1}"
+  class:bx--table-toolbar={true}
+  class:bx--table-toolbar--small={size === "sm"}
+  class:bx--table-toolbar--normal={size === "default"}
+  style:z-index={1}
   {...$$restProps}
 >
   <slot />

src/DataTable/ToolbarBatchActions.svelte

@@ -76,21 +76,21 @@
 
 {#if !overflowVisible}
   <div
-    class:bx--batch-actions="{true}"
-    class:bx--batch-actions--active="{showActions}"
+    class:bx--batch-actions={true}
+    class:bx--batch-actions--active={showActions}
     {...$$restProps}
   >
-    <div class:bx--batch-summary="{true}">
-      <p class:bx--batch-summary__para="{true}">
+    <div class:bx--batch-summary={true}>
+      <p class:bx--batch-summary__para={true}>
         <span> {formatTotalSelected(batchSelectedIds.length)} </span>
       </p>
     </div>
-    <div class:bx--action-list="{true}">
+    <div class:bx--action-list={true}>
       <slot />
       <Button
         class="bx--batch-summary__cancel"
-        tabindex="{showActions ? '0' : '-1'}"
-        on:click="{cancel}"
+        tabindex={showActions ? "0" : "-1"}
+        on:click={cancel}
       >
         <slot name="cancel">Cancel</slot>
       </Button>

src/DataTable/ToolbarContent.svelte

@@ -1,3 +1,3 @@
-<div class:bx--toolbar-content="{true}">
+<div class:bx--toolbar-content={true}>
   <slot />
 </div>

src/DataTable/ToolbarMenu.svelte

@@ -14,7 +14,7 @@
 
 <OverflowMenu
   bind:menuRef
-  icon="{Settings}"
+  icon={Settings}
   {...$$restProps}
   class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
   flipped

src/DataTable/ToolbarSearch.svelte

@@ -76,22 +76,22 @@
 </script>
 
 <Search
-  tabindex="{tabindex}"
-  disabled="{disabled}"
+  {tabindex}
+  {disabled}
   {...$$restProps}
   searchClass="{classes} {$$restProps.class}"
   bind:ref
   bind:value
   on:clear
-  on:clear="{expandSearch}"
+  on:clear={expandSearch}
   on:change
   on:input
   on:focus
-  on:focus="{expandSearch}"
+  on:focus={expandSearch}
   on:blur
-  on:blur="{() => {
+  on:blur={() => {
     expanded = !persistent && !!value.length;
-  }}"
+  }}
   on:keyup
   on:keydown
   on:paste