carbon-components-svelte 0.99.0 → 0.99.2

package/README.md

@@ -20,12 +20,6 @@ The Carbon Svelte portfolio also includes:
 
 ## [Documentation](https://svelte.carbondesignsystem.com)
 
-Other forms of documentation are auto-generated:
-
-- **[TypeScript definitions](types)**: Component TypeScript definitions
-- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
-- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
-
 ## Installation
 
 ```sh
@@ -140,7 +134,7 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 </Accordion>
 ```
 
-**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
+**Refer to the [documentation site](https://svelte.carbondesignsystem.com) for component API documentation.**
 
 ## Preprocessors & Plugins
 

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.99.0",
+  "version": "0.99.2",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",
   "svelte": "./src/index.js",
   "main": "./src/index.js",
-  "types": "./types/index.d.ts",
+  "types": "./src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
+      "types": "./src/index.d.ts",
       "svelte": "./src/index.js"
     },
     "./css/*": "./css/*",
     "./src/*.svelte": {
-      "types": "./types/*.svelte.d.ts",
+      "types": "./src/*.svelte.d.ts",
       "import": "./src/*.svelte"
     },
     "./src/*.js": {
-      "types": "./types/*.d.ts",
+      "types": "./src/*.d.ts",
       "import": "./src/*.js"
     },
     "./src/*": {
-      "types": "./types/*.d.ts",
+      "types": "./src/*.d.ts",
       "import": "./src/*.js"
     }
   },
@@ -51,7 +51,6 @@
   ],
   "files": [
     "src",
-    "types",
     "css",
     "telemetry.yml"
   ],

package/src/CodeSnippet/CodeSnippet.svelte

@@ -3,6 +3,7 @@
    * @event {null} expand
    * @event {null} collapse
    * @event {null} copy
+   * @restProps {button | span} Rest props are spread to the span (inline variant) or the copy button (single/multi).
    */
 
   /**
@@ -246,7 +247,7 @@
     <div
       role={type === "single" ? "textbox" : undefined}
       tabindex={type === "single" && !disabled ? "0" : undefined}
-      aria-label={$$restProps["aria-label"] || copyLabel || "code-snippet"}
+      aria-label={$$restProps["aria-label"] ?? copyLabel ?? "code-snippet"}
       class:bx--snippet-container={true}
       style:width="100%"
       style:min-height="{minHeight}px"

package/{types → src}/CodeSnippet/CodeSnippet.svelte.d.ts

@@ -1,6 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export type CodeSnippetProps = {
+type $RestProps = SvelteHTMLElements["button"] & SvelteHTMLElements["span"];
+
+type $Props = {
   /**
    * Set the type of code snippet.
    * @default "single"
@@ -127,8 +130,12 @@ export type CodeSnippetProps = {
   ref?: null | HTMLPreElement;
 
   children?: (this: void) => void;
+
+  [key: `data-${string}`]: any;
 };
 
+export type CodeSnippetProps = Omit<$RestProps, keyof $Props> & $Props;
+
 export default class CodeSnippet extends SvelteComponentTyped<
   CodeSnippetProps,
   {

package/src/ComboBox/ComboBox.svelte

@@ -24,7 +24,7 @@
    * Override the display of a combobox item.
    * @type {(item: Item) => string}
    */
-  export let itemToString = (item) => item.text || item.id;
+  export let itemToString = (item) => item.text ?? item.id;
 
   /**
    * Set the selected item by value id.
@@ -264,10 +264,10 @@
         if (listRef && virtualConfig && highlightedIndex >= 0) {
           const itemHeight = virtualConfig.itemHeight;
           const containerHeight = virtualConfig.containerHeight;
-          const overscan = virtualConfig.overscan || 3;
+          const overscan = virtualConfig.overscan ?? 3;
 
           // Calculate current visible range based on current scroll position
-          const currentScrollTop = listRef.scrollTop || listScrollTop;
+          const currentScrollTop = listRef.scrollTop ?? listScrollTop;
           const visibleStartIndex = Math.max(
             0,
             Math.floor(currentScrollTop / itemHeight) - overscan,
@@ -414,7 +414,7 @@
     selectedItem = undefined;
   }
 
-  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: ariaLabel = $$props["aria-label"] ?? "Choose an item";
   $: menuId = `menu-${id}`;
   $: comboId = `combo-${id}`;
   $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;

package/{types → src}/ComboBox/ComboBox.svelte.d.ts

@@ -4,7 +4,8 @@ import type { SvelteHTMLElements } from "svelte/elements";
 export type ComboBoxItem<Id = any> = {
   id: Id;
   text: string;
-  /** Whether the item is disabled */ disabled?: boolean;
+  /** Whether the item is disabled */
+  disabled?: boolean;
 };
 
 type $RestProps = SvelteHTMLElements["input"];
@@ -222,7 +223,10 @@ export default class ComboBox<
 > extends SvelteComponentTyped<
   ComboBoxProps<Item>,
   {
-    select: CustomEvent<{ selectedId: Item["id"]; selectedItem: Item }>;
+    select: CustomEvent<{
+      selectedId: Item["id"];
+      selectedItem: Item;
+    }>;
     clear: CustomEvent<KeyboardEvent | MouseEvent>;
     input: WindowEventMap["input"];
     keydown: WindowEventMap["keydown"];

package/src/ComposedModal/ComposedModal.svelte

@@ -227,7 +227,7 @@
     bind:this={innerModal}
     role="dialog"
     aria-modal="true"
-    aria-label={$$props["aria-label"] || $label || undefined}
+    aria-label={$$props["aria-label"] ?? $label ?? undefined}
     class:bx--modal-container={true}
     class:bx--modal-container--xs={size === "xs"}
     class:bx--modal-container--sm={size === "sm"}

package/{types → src}/ComposedModal/ComposedModal.svelte.d.ts

@@ -66,7 +66,9 @@ export default class ComposedModal extends SvelteComponentTyped<
     close: CustomEvent<{
       trigger: "escape-key" | "outside-click" | "close-button";
     }>;
-    transitionend: CustomEvent<{ open: boolean }>;
+    transitionend: CustomEvent<{
+      open: boolean;
+    }>;
     keydown: WindowEventMap["keydown"];
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];

package/{types → src}/ComposedModal/ModalFooter.svelte.d.ts

@@ -62,6 +62,10 @@ export type ModalFooterProps = Omit<$RestProps, keyof $Props> & $Props;
 
 export default class ModalFooter extends SvelteComponentTyped<
   ModalFooterProps,
-  { "click:button--secondary": CustomEvent<{ text: string }> },
+  {
+    "click:button--secondary": CustomEvent<{
+      text: string;
+    }>;
+  },
   { default: Record<string, never> }
 > {}

package/src/DataTable/DataTable.svelte

@@ -2,7 +2,7 @@
   /**
    * @generics {Row extends DataTableRow = DataTableRow} Row
    * @template {DataTableRow} Row
-   * @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
+   * @typedef {import('./data-table-utils.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
    * @typedef {any} DataTableValue
    * @typedef {object} DataTableEmptyHeader<Row=DataTableRow>
    * @property {DataTableKey<Row> | (string & {})} key
@@ -299,14 +299,23 @@
 
   let refSelectAll = null;
 
-  $: batchSelectedIds.set(selectedRowIds);
+  let prevBatchSelected = [];
+  $: if (
+    prevBatchSelected.length !== selectedRowIds.length ||
+    selectedRowIds.some((id, i) => id !== prevBatchSelected[i])
+  ) {
+    prevBatchSelected = selectedRowIds;
+    batchSelectedIds.set(selectedRowIds);
+  }
   $: rowIds = $tableRows.map((row) => row.id);
-  $: expandableRowIds = rowIds.filter(
-    (id) => !nonExpandableRowIds.includes(id),
-  );
-  $: selectableRowIds = rowIds.filter(
-    (id) => !nonSelectableRowIds.includes(id),
-  );
+
+  // Use Sets for faster row lookups.
+  $: selectedRowIdsSet = new Set(selectedRowIds);
+  $: nonSelectableRowIdsSet = new Set(nonSelectableRowIds);
+  $: nonExpandableRowIdsSet = new Set(nonExpandableRowIds);
+
+  $: expandableRowIds = rowIds.filter((id) => !nonExpandableRowIdsSet.has(id));
+  $: selectableRowIds = rowIds.filter((id) => !nonSelectableRowIdsSet.has(id));
   $: selectAll =
     selectableRowIds.length > 0 &&
     selectedRowIds.length === selectableRowIds.length;
@@ -318,37 +327,42 @@
     expanded = expandedRowIds.length === expandableRowIds.length;
   }
   $: if (radio || batchSelection) selectable = true;
-  $: tableCellsByRowId = rows.reduce((rows, row) => {
-    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;
-  }, {});
+
+  let tableCellsByRowId = {};
+  let prevRows;
+  let prevHeaders;
+  $: if (rows !== prevRows || headers !== prevHeaders) {
+    tableCellsByRowId = rows.reduce((rowsAcc, row) => {
+      rowsAcc[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 rowsAcc;
+    }, {});
+    prevRows = rows;
+    prevHeaders = headers;
+  }
+
   $: $tableRows = rows;
-  $: sortedRows = [...$tableRows];
   $: ascending = sortDirection === "ascending";
   $: sorting = sortable && sortKey != null;
   $: sortingHeader = headers.find((header) => header.key === sortKey);
-  $: if (sorting) {
-    if (sortDirection === "none") {
-      sortedRows = $tableRows;
-    } else {
-      sortedRows = [...$tableRows].sort((a, b) => {
-        const itemA = resolvePath(a, sortKey);
-        const itemB = resolvePath(b, sortKey);
-        return compareValues(itemA, itemB, ascending, sortingHeader?.sort);
-      });
-    }
-  }
+  $: sortedRows =
+    sorting && sortDirection !== "none"
+      ? [...$tableRows].sort((a, b) => {
+          const itemA = resolvePath(a, sortKey);
+          const itemB = resolvePath(b, sortKey);
+          return compareValues(itemA, itemB, ascending, sortingHeader?.sort);
+        })
+      : $tableRows;
   $: displayedRows = getDisplayedRows($tableRows, page, pageSize);
   $: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
 
   $: hasCustomHeaderWidth = headers.some(
-    (header) => header.width || header.minWidth,
+    (header) => header.width ?? header.minWidth,
   );
 </script>
 
@@ -489,12 +503,16 @@
     </TableHead>
     <TableBody>
       {#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
+        {@const isSelected = selectedRowIdsSet.has(row.id)}
+        {@const isExpanded = !!expandedRows[row.id]}
+        {@const isExpandable = !nonExpandableRowIdsSet.has(row.id)}
+        {@const isSelectable = !nonSelectableRowIdsSet.has(row.id)}
         <TableRow
           data-row={row.id}
           data-parent-row={expandable ? true : undefined}
-          class="{selectedRowIds.includes(row.id)
+          class="{isSelected
             ? 'bx--data-table--selected'
-            : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
+            : ''} {isExpanded ? 'bx--expandable-row' : ''} {expandable
             ? 'bx--parent-row'
             : ''} {expandable && parentRowId === row.id
             ? 'bx--expandable-row--hover'
@@ -527,29 +545,27 @@
             <TableCell
               class="bx--table-expand"
               headers="expand"
-              data-previous-value={!nonExpandableRowIds.includes(row.id) &&
-              expandedRows[row.id]
+              data-previous-value={isExpandable && isExpanded
                 ? "collapsed"
                 : undefined}
             >
-              {#if !nonExpandableRowIds.includes(row.id)}
+              {#if isExpandable}
                 <button
                   type="button"
                   class:bx--table-expand__button={true}
                   aria-controls={`expandable-row-${row.id}`}
-                  aria-label={expandedRows[row.id]
+                  aria-label={isExpanded
                     ? "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];
+                    const next = new Set(expandedRowIds);
+                    if (isExpanded) next.delete(row.id);
+                    else next.add(row.id);
+                    expandedRowIds = [...next];
 
                     dispatch("click:row--expand", {
                       row,
-                      expanded: !rowExpanded,
+                      expanded: !isExpanded,
                     });
                   }}
                 >
@@ -566,13 +582,13 @@
               class:bx--table-column-checkbox={true}
               class:bx--table-column-radio={radio}
             >
-              {#if !nonSelectableRowIds.includes(row.id)}
+              {#if isSelectable}
                 {@const inputId = `${id}-${row.id}`}
                 {#if radio}
                   <RadioButton
                     id={inputId}
                     name={inputName}
-                    checked={selectedRowIds.includes(row.id)}
+                    checked={isSelected}
                     value={row.id}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -583,16 +599,17 @@
                   <InlineCheckbox
                     id={inputId}
                     name={inputName}
-                    checked={selectedRowIds.includes(row.id)}
+                    checked={isSelected}
                     value={row.id}
                     on:change={() => {
-                      if (selectedRowIds.includes(row.id)) {
-                        selectedRowIds = selectedRowIds.filter(
-                          (id) => id !== row.id,
-                        );
+                      const next = new Set(selectedRowIds);
+                      if (isSelected) {
+                        next.delete(row.id);
+                        selectedRowIds = [...next];
                         dispatch("click:row--select", { row, selected: false });
                       } else {
-                        selectedRowIds = [...selectedRowIds, row.id];
+                        next.add(row.id);
+                        selectedRowIds = [...next];
                         dispatch("click:row--select", { row, selected: true });
                       }
                     }}
@@ -610,8 +627,8 @@
                   {cell}
                   rowIndex={i}
                   cellIndex={j}
-                  rowSelected={selectedRowIds.includes(row.id)}
-                  rowExpanded={!!expandedRows[row.id]}
+                  rowSelected={isSelected}
+                  rowExpanded={isExpanded}
                 >
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
@@ -633,8 +650,8 @@
                   {cell}
                   rowIndex={i}
                   cellIndex={j}
-                  rowSelected={selectedRowIds.includes(row.id)}
-                  rowExpanded={!!expandedRows[row.id]}
+                  rowSelected={isSelected}
+                  rowExpanded={isExpanded}
                 >
                   {cell.display ? cell.display(cell.value, row) : cell.value}
                 </slot>
@@ -649,15 +666,15 @@
             data-child-row
             class:bx--expandable-row={true}
             on:mouseenter={() => {
-              if (nonExpandableRowIds.includes(row.id)) return;
+              if (!isExpandable) return;
               parentRowId = row.id;
             }}
             on:mouseleave={() => {
-              if (nonExpandableRowIds.includes(row.id)) return;
+              if (!isExpandable) return;
               parentRowId = null;
             }}
           >
-            {#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
+            {#if isExpanded && isExpandable}
               <TableCell
                 colspan={selectable ? headers.length + 2 : headers.length + 1}
               >
@@ -665,7 +682,7 @@
                   <slot
                     name="expanded-row"
                     {row}
-                    rowSelected={selectedRowIds.includes(row.id)}
+                    rowSelected={isSelected}
                   />
                 </div>
               </TableCell>

package/{types → src}/DataTable/DataTable.svelte.d.ts

@@ -2,16 +2,18 @@ import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
 export type DataTableKey<Row = DataTableRow> =
-  import("./DataTableTypes.d.ts").PropertyPath<Row>;
+  import("./data-table-utils.d.ts").PropertyPath<Row>;
 
 export type DataTableValue = any;
 
 export type DataTableEmptyHeader<Row = DataTableRow> = {
   key: DataTableKey<Row> | (string & {});
-  /** Whether the header is empty */ empty: boolean;
+  /** Whether the header is empty */
+  empty: boolean;
   display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
-  /** Whether the column menu is enabled */ columnMenu?: boolean;
+  /** Whether the column menu is enabled */
+  columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 };
@@ -21,7 +23,8 @@ export type DataTableNonEmptyHeader<Row = DataTableRow> = {
   value: DataTableValue;
   display?: (item: DataTableValue, row: Row) => DataTableValue;
   sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
-  /** Whether the column menu is enabled */ columnMenu?: boolean;
+  /** Whether the column menu is enabled */
+  columnMenu?: boolean;
   width?: string;
   minWidth?: string;
 };
@@ -261,7 +264,9 @@ export default class DataTable<
       row?: Row;
       cell?: DataTableCell<Row>;
     }>;
-    "click:header--expand": CustomEvent<{ expanded: boolean }>;
+    "click:header--expand": CustomEvent<{
+      expanded: boolean;
+    }>;
     "click:header": CustomEvent<{
       header: DataTableHeader<Row>;
       sortDirection?: "ascending" | "descending" | "none";
@@ -279,8 +284,14 @@ export default class DataTable<
     }>;
     "mouseenter:row": CustomEvent<Row>;
     "mouseleave:row": CustomEvent<Row>;
-    "click:row--expand": CustomEvent<{ expanded: boolean; row: Row }>;
-    "click:row--select": CustomEvent<{ selected: boolean; row: Row }>;
+    "click:row--expand": CustomEvent<{
+      expanded: boolean;
+      row: Row;
+    }>;
+    "click:row--select": CustomEvent<{
+      selected: boolean;
+      row: Row;
+    }>;
     "click:cell": CustomEvent<{
       cell: DataTableCell<Row>;
       target: EventTarget;

package/src/DataTable/data-table-utils.d.ts

@@ -45,6 +45,7 @@ export function formatHeaderWidth<
 /**
  * Compares two values for sorting in a data table.
  * Handles numbers, strings, null/undefined values, and custom sort functions.
+ * @returns {number} Negative if a < b (ascending) or a > b (descending), positive if a > b (ascending) or a < b (descending), 0 if equal
  */
 export function compareValues<T = unknown>(
   itemA: T,
@@ -52,3 +53,22 @@ export function compareValues<T = unknown>(
   ascending: boolean,
   customSort?: ((a: T, b: T) => number) | false | undefined,
 ): number;
+
+type PathDepth = [never, 0, 1, 2, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+// For performance, the maximum traversal depth is 3.
+export type PropertyPath<T, D extends number = 3> = [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]
+    : "";

package/src/DataTable/data-table-utils.js

@@ -229,10 +229,19 @@ export function compareValues(itemA, itemB, ascending, customSort) {
     } else if (!itemB && itemB !== 0) {
       result = -1;
     } else {
-      // String comparison with locale-aware numeric sorting
-      result = String(itemA).localeCompare(String(itemB), "en", {
-        numeric: true,
-      });
+      result = String(itemA).localeCompare(
+        String(itemB),
+        // Use undefined to default to user's locale
+        undefined,
+        {
+          // Enable numeric sorting for strings that look like numbers
+          // E.g., "10" should come after "2"
+          numeric: true,
+          // Comparison is case- and accent-insensitive
+          // E.g., "apple" == "Apple", "café" == "cafe"
+          sensitivity: "base",
+        },
+      );
     }
   }
 

package/src/Dropdown/Dropdown.svelte

@@ -23,7 +23,7 @@
    * Override the display of a dropdown item.
    * @type {(item: Item) => string}
    */
-  export let itemToString = (item) => item.text || item.id;
+  export let itemToString = (item) => item.text ?? item.id;
 
   /**
    * Specify the selected item id.
@@ -217,10 +217,10 @@
         if (listRef && virtualConfig && highlightedIndex >= 0) {
           const itemHeight = virtualConfig.itemHeight;
           const containerHeight = virtualConfig.containerHeight;
-          const overscan = virtualConfig.overscan || 3;
+          const overscan = virtualConfig.overscan ?? 3;
 
           // Calculate current visible range based on current scroll position
-          const currentScrollTop = listRef.scrollTop || listScrollTop;
+          const currentScrollTop = listRef.scrollTop ?? listScrollTop;
           const visibleStartIndex = Math.max(
             0,
             Math.floor(currentScrollTop / itemHeight) - overscan,

package/{types → src}/Dropdown/Dropdown.svelte.d.ts

@@ -4,7 +4,8 @@ import type { SvelteHTMLElements } from "svelte/elements";
 export type DropdownItem<Id = any> = {
   id: Id;
   text: string;
-  /** Whether the item is disabled */ disabled?: boolean;
+  /** Whether the item is disabled */
+  disabled?: boolean;
 };
 
 type $RestProps = SvelteHTMLElements["div"];
@@ -185,7 +186,10 @@ export default class Dropdown<
 > extends SvelteComponentTyped<
   DropdownProps<Item>,
   {
-    select: CustomEvent<{ selectedId: Item["id"]; selectedItem: Item }>;
+    select: CustomEvent<{
+      selectedId: Item["id"];
+      selectedItem: Item;
+    }>;
     scroll: WindowEventMap["scroll"];
   },
   { default: { item: Item; index: number } }

package/src/FormGroup/FormGroup.svelte

@@ -24,7 +24,7 @@
   data-invalid={invalid || undefined}
   class:bx--fieldset={true}
   class:bx--fieldset--no-margin={noMargin}
-  aria-labelledby={$$restProps["aria-labelledby"] || legendId}
+  aria-labelledby={$$restProps["aria-labelledby"] ?? legendId}
   {...$$restProps}
   on:click
   on:mouseover

package/{types → src}/Grid/Column.svelte.d.ts

@@ -3,7 +3,10 @@ import type { SvelteHTMLElements } from "svelte/elements";
 
 export type ColumnSize = boolean | number;
 
-export type ColumnSizeDescriptor = { span?: ColumnSize; offset: number };
+export type ColumnSizeDescriptor = {
+  span?: ColumnSize;
+  offset: number;
+};
 
 export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 

package/{types → src}/LocalStorage/LocalStorage.svelte.d.ts

@@ -19,7 +19,10 @@ export default class LocalStorage extends SvelteComponentTyped<
   {
     save: CustomEvent<null>;
     /** Fires when the stored value changes, either from a bound value update or when localStorage is modified from another tab/window. */
-    update: CustomEvent<{ prevValue: any; value: any }>;
+    update: CustomEvent<{
+      prevValue: any;
+      value: any;
+    }>;
   },
   Record<string, never>
 > {

package/src/Modal/Modal.svelte

@@ -158,7 +158,7 @@
   $: modalHeadingId = `bx--modal-header__heading--modal-${id}`;
   $: modalBodyId = `bx--modal-body--${id}`;
   $: ariaLabel =
-    modalLabel || $$props["aria-label"] || modalAriaLabel || modalHeading;
+    modalLabel ?? $$props["aria-label"] ?? modalAriaLabel ?? modalHeading;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->