carbon-components-svelte 0.89.5 → 0.89.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.89.5",
+  "version": "0.89.7",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/ComboBox/ComboBox.svelte

@@ -116,7 +116,6 @@
   import WarningFilled from "../icons/WarningFilled.svelte";
   import WarningAltFilled from "../icons/WarningAltFilled.svelte";
   import ListBox from "../ListBox/ListBox.svelte";
-  import ListBoxField from "../ListBox/ListBoxField.svelte";
   import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
   import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
   import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
@@ -254,22 +253,12 @@
     {warn}
     {warnText}
   >
-    <ListBoxField
-      role="button"
-      aria-expanded={open}
-      on:click={async () => {
-        if (disabled) return;
-        open = true;
-        await tick();
-        ref.focus();
-      }}
-      {id}
-      {disabled}
-      {translateWithId}
-    >
+    <div class:bx--list-box__field={true}>
       <input
         bind:this={ref}
         bind:value
+        type="text"
+        role="combobox"
         tabindex="0"
         autocomplete="off"
         aria-autocomplete="list"
@@ -287,6 +276,10 @@
         class:bx--text-input={true}
         class:bx--text-input--light={light}
         class:bx--text-input--empty={value === ""}
+        on:click={() => {
+          if (disabled) return;
+          open = true;
+        }}
         on:input={({ target }) => {
           if (!open && target.value.length > 0) {
             open = true;
@@ -384,7 +377,7 @@
         {translateWithId}
         {open}
       />
-    </ListBoxField>
+    </div>
     {#if open}
       <ListBoxMenu aria-label={ariaLabel} {id} on:scroll bind:ref={listRef}>
         {#each filteredItems as item, i (item.id)}

package/src/DataTable/DataTable.svelte

@@ -263,12 +263,13 @@
     expanded = expandedRowIds.length === expandableRowIds.length;
   }
   $: if (radio || batchSelection) selectable = true;
-  $: headerKeys = headers.map(({ key }) => key);
   $: tableCellsByRowId = rows.reduce((rows, row) => {
-    rows[row.id] = headerKeys.map((key, index) => ({
-      key,
-      value: resolvePath(row, key),
-      display: headers[index].display,
+    rows[row.id] = headers.map((header, index) => ({
+      key: header.key || `key-${index}`,
+      value: header.key ? resolvePath(row, header.key) : undefined,
+      display: header.display,
+      empty: header.empty,
+      columnMenu: header.columnMenu,
     }));
     return rows;
   }, {});
@@ -557,8 +558,8 @@
             </td>
           {/if}
           {#each tableCellsByRowId[row.id] as cell, j (cell.key)}
-            {#if headers[j].empty}
-              <td class:bx--table-column-menu={headers[j].columnMenu}>
+            {#if cell.empty}
+              <td class:bx--table-column-menu={cell.columnMenu}>
                 <slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>

package/src/OverflowMenu/OverflowMenu.svelte

@@ -167,17 +167,12 @@
   $: if ($items[$currentIndex]) {
     focusedId.set($items[$currentIndex].id);
   }
-  $: styles = `<style>
-    #${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
-      width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
-    }
-  <\/style>`;
+  // Use CSS custom properties instead of dynamic style injection for better
+  // performance. The previous approach created individual `style` tags per
+  // instance, causing overhead when many OverflowMenu components are rendered.
+  $: overflowMenuOptionsAfterWidth = buttonWidth ? buttonWidth + "px" : "2rem";
 </script>
 
-<svelte:head>
-  {@html styles}
-</svelte:head>
-
 <svelte:window
   on:click={({ target }) => {
     if (buttonRef && buttonRef.contains(target)) return;
@@ -252,8 +247,15 @@
       class:bx--overflow-menu-options--xl={size === "xl"}
       class:bx--breadcrumb-menu-options={!!ctxBreadcrumbItem}
       class={menuOptionsClass}
+      style="--overflow-menu-options-after-width: {overflowMenuOptionsAfterWidth}"
     >
       <slot />
     </ul>
   {/if}
 </button>
+
+<style>
+  .bx--overflow-menu-options:after {
+    width: var(--overflow-menu-options-after-width, 2rem);
+  }
+</style>

package/src/Pagination/Pagination.svelte

@@ -135,8 +135,8 @@
         hideLabel
         noLabel
         inline
-        on:change={() => {
-          dispatch("change", { pageSize });
+        on:update={(event) => {
+          dispatch("change", { pageSize: event.detail });
         }}
         bind:selected={pageSize}
       >
@@ -165,8 +165,8 @@
         labelText="Page number, of {totalPages} pages"
         inline
         hideLabel
-        on:change={() => {
-          dispatch("change", { page });
+        on:update={(event) => {
+          dispatch("change", { page: event.detail });
         }}
         bind:selected={page}
       >

package/src/Toggle/Toggle.svelte

@@ -39,8 +39,6 @@
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
-
-  $: dispatch("toggle", { toggled });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -63,12 +61,14 @@
     checked={toggled}
     on:change={() => {
       toggled = !toggled;
+      dispatch("toggle", { toggled });
     }}
     on:change
     on:keyup={(e) => {
       if (e.key === " " || e.key === "Enter") {
         e.preventDefault();
         toggled = !toggled;
+        dispatch("toggle", { toggled });
       }
     }}
     on:keyup