carbon-components-svelte 0.99.0 → 0.99.2

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

@@ -156,8 +156,12 @@ export default class Modal extends SvelteComponentTyped<
     close: CustomEvent<{
       trigger: "escape-key" | "outside-click" | "close-button";
     }>;
-    transitionend: CustomEvent<{ open: boolean }>;
-    "click:button--secondary": CustomEvent<{ text: string }>;
+    transitionend: CustomEvent<{
+      open: boolean;
+    }>;
+    "click:button--secondary": CustomEvent<{
+      text: string;
+    }>;
     keydown: WindowEventMap["keydown"];
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];

package/src/MultiSelect/MultiSelect.svelte

@@ -27,7 +27,7 @@
    * Override the display of a multiselect item.
    * @type {(item: Item) => any}
    */
-  export let itemToString = (item) => item.text || item.id;
+  export let itemToString = (item) => item.text ?? item.id;
 
   /**
    * Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.
@@ -384,7 +384,7 @@
   $: menuId = `menu-${id}`;
   $: comboId = `combo-${id}`;
   $: inline = type === "inline";
-  $: ariaLabel = $$props["aria-label"] || "Choose an item";
+  $: ariaLabel = $$props["aria-label"] ?? "Choose an item";
   $: if (
     selectedIds &&
     (selectionFeedback === "top" ||

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

@@ -6,7 +6,8 @@ export type MultiSelectItemText = string;
 export type MultiSelectItem<Id = any> = {
   id: Id;
   text: MultiSelectItemText;
-  /** Whether the item is disabled */ disabled?: boolean;
+  /** Whether the item is disabled */
+  disabled?: boolean;
 };
 
 export type MultiSelectContext = {

package/{types → src}/Notification/InlineNotification.svelte.d.ts

@@ -86,7 +86,9 @@ export type InlineNotificationProps = Omit<$RestProps, keyof $Props> & $Props;
 export default class InlineNotification extends SvelteComponentTyped<
   InlineNotificationProps,
   {
-    close: CustomEvent<{ timeout: boolean }>;
+    close: CustomEvent<{
+      timeout: boolean;
+    }>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];

package/{types → src}/Notification/NotificationQueue.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 
 export type NotificationData = {
-  /** Optional id for deduplication */ id?: string;
+  /** Optional id for deduplication */
+  id?: string;
   kind?:
     | "error"
     | "info"

package/{types → src}/Notification/ToastNotification.svelte.d.ts

@@ -99,7 +99,9 @@ export type ToastNotificationProps = Omit<$RestProps, keyof $Props> & $Props;
 export default class ToastNotification extends SvelteComponentTyped<
   ToastNotificationProps,
   {
-    close: CustomEvent<{ timeout: boolean }>;
+    close: CustomEvent<{
+      timeout: boolean;
+    }>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];

package/src/NumberInput/NumberInput.svelte

@@ -122,6 +122,11 @@
 
   const dispatch = createEventDispatcher();
 
+  /** Regex to match period/dot characters globally */
+  const RE_DOT = /\./g;
+  /** Regex to match comma and Arabic decimal separator (٫) globally */
+  const RE_COMMA = /[,\u066B]/g;
+
   function updateValue(isIncrementing) {
     if (allowDecimal) {
       // When allowEmpty is false and value is null, use default value
@@ -175,19 +180,28 @@
   $: decrementLabel = translateWithId("decrement");
   $: hasError = invalid && invalidText && !readonly;
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
+  $: helperId = `helper-${id}`;
   $: ariaLabel =
     $$props["aria-label"] ||
     "Numeric input field with increment and decrement buttons";
 
   let inputValue = value?.toString() ?? "";
+  let prevValue = value;
 
   // Only use inputValue tracking in allowDecimal mode
   $: if (allowDecimal) {
+    const valueChanged = value !== prevValue;
+    prevValue = value;
+
     if (value != null) {
       const valueStr = value.toString();
-      // Only update inputValue if it's not the same numeric value
-      // This allows "1.0" to stay as "1.0" while value is 1
-      if (parse(inputValue) !== value) {
+      const parsedInput = parse(inputValue);
+      // Sync inputValue to value when:
+      // - The numeric values differ AND input is valid (preserves "1.0" formatting)
+      // - OR value changed programmatically (force sync even if input is temporarily invalid)
+      // This allows "1.5." to stay visible while user corrects their typo.
+      if ((parsedInput !== value && parsedInput !== null) || valueChanged) {
         inputValue = valueStr;
       }
     } else if (value == null && inputValue !== "") {
@@ -195,9 +209,37 @@
     }
   }
 
-  function parse(raw) {
+  /**
+   * Simple normalization: treat comma/٫ as decimal separator.
+   * Used during typing to avoid mid-keystroke value jumps.
+   */
+  function normalize(raw) {
+    return raw.replace(RE_COMMA, ".");
+  }
+
+  /**
+   * Locale-aware normalization for completed input (on blur).
+   * When both period and comma/٫ are present, the last separator
+   * is the decimal mark; earlier ones are thousands separators.
+   * e.g., "1.000,5" → 1000.5, "1,000.5" → 1000.5
+   */
+  function normalizeLocale(raw) {
+    const lastComma = Math.max(raw.lastIndexOf(","), raw.lastIndexOf("\u066B"));
+    const lastDot = raw.lastIndexOf(".");
+
+    if (lastComma !== -1 && lastDot !== -1) {
+      if (lastComma > lastDot) {
+        return raw.replace(RE_DOT, "").replace(RE_COMMA, ".");
+      }
+      return raw.replace(RE_COMMA, "");
+    }
+
+    return normalize(raw);
+  }
+
+  function parse(raw, locale = false) {
     if (raw === "" || raw === "-") return null;
-    const num = Number(raw);
+    const num = Number(locale ? normalizeLocale(raw) : normalize(raw));
     return Number.isNaN(num) ? null : num;
   }
 
@@ -209,7 +251,12 @@
   function onInput({ target }) {
     if (allowDecimal) {
       inputValue = target.value;
-      value = parse(target.value);
+      const parsed = parse(target.value);
+      // Preserve last valid value when input is invalid (e.g., "1.5." with two decimals).
+      // This provides better UX by letting users see and correct typos without losing data.
+      if (parsed !== null || target.value === "" || target.value === "-") {
+        value = parsed;
+      }
     } else {
       value = parse(target.value);
     }
@@ -218,7 +265,7 @@
   }
 
   function onChange({ target }) {
-    let parsedValue = parse(target.value);
+    let parsedValue = parse(target.value, allowDecimal);
 
     // If allowEmpty is false and value would be null, use default value
     // This prevents the input from staying empty when allowEmpty is false
@@ -232,6 +279,16 @@
         ref.value = parsedValue.toString();
         value = parsedValue;
       }
+    } else if (
+      allowDecimal &&
+      parsedValue === null &&
+      target.value !== "" &&
+      value !== null
+    ) {
+      // In allowDecimal mode, normalize invalid input (e.g., "1.5.") back to
+      // the last valid value on blur. This provides a clean UX where typos
+      // are corrected when the user leaves the field.
+      inputValue = value.toString();
     } else {
       value = parsedValue;
     }
@@ -291,7 +348,13 @@
           value={inputValue}
           type="text"
           inputmode="decimal"
-          aria-describedby={errorId}
+          aria-describedby={hasError
+            ? errorId
+            : warn
+              ? warnId
+              : helperText
+                ? helperId
+                : undefined}
           data-invalid={hasError || undefined}
           aria-invalid={hasError || undefined}
           aria-label={labelText ? undefined : ariaLabel}
@@ -314,7 +377,13 @@
           bind:this={ref}
           type="number"
           pattern="[0-9]*"
-          aria-describedby={errorId}
+          aria-describedby={hasError
+            ? errorId
+            : warn
+              ? warnId
+              : helperText
+                ? helperId
+                : undefined}
           data-invalid={hasError || undefined}
           aria-invalid={hasError || undefined}
           aria-label={labelText ? undefined : ariaLabel}
@@ -386,6 +455,7 @@
     </div>
     {#if !hasError && !warn && helperText}
       <div
+        id={helperId}
         class:bx--form__helper-text={true}
         class:bx--form__helper-text--disabled={disabled}
       >
@@ -398,7 +468,7 @@
       </div>
     {/if}
     {#if !hasError && warn}
-      <div id={errorId} class:bx--form-requirement={true}>{warnText}</div>
+      <div id={warnId} class:bx--form-requirement={true}>{warnText}</div>
     {/if}
   </div>
 </div>

package/src/OverflowMenu/OverflowMenu.svelte

@@ -191,7 +191,7 @@
   });
 
   $: menuId = `menu-${id}`;
-  $: ariaLabel = $$props["aria-label"] || "menu";
+  $: ariaLabel = $$props["aria-label"] ?? "menu";
   $: if ($items[$currentIndex]) {
     focusedId.set($items[$currentIndex].id);
   }

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

@@ -118,7 +118,10 @@ export type OverflowMenuProps = Omit<$RestProps, keyof $Props> & $Props;
 export default class OverflowMenu extends SvelteComponentTyped<
   OverflowMenuProps,
   {
-    close: CustomEvent<{ index?: number; text?: string }>;
+    close: CustomEvent<{
+      index?: number;
+      text?: string;
+    }>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];

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

@@ -116,13 +116,23 @@ export default class Pagination extends SvelteComponentTyped<
   PaginationProps,
   {
     /** Dispatched when the user changes the page or page size through any interaction. */
-    change: CustomEvent<{ page?: number; pageSize?: number }>;
+    change: CustomEvent<{
+      page?: number;
+      pageSize?: number;
+    }>;
     /** Dispatched when the user clicks the previous page button. */
-    "click:button--previous": CustomEvent<{ page: number }>;
+    "click:button--previous": CustomEvent<{
+      page: number;
+    }>;
     /** Dispatched when the user clicks the next page button. */
-    "click:button--next": CustomEvent<{ page: number }>;
+    "click:button--next": CustomEvent<{
+      page: number;
+    }>;
     /** Dispatched reactively whenever the page or page size changes. */
-    update: CustomEvent<{ pageSize: number; page: number }>;
+    update: CustomEvent<{
+      pageSize: number;
+      page: number;
+    }>;
   },
   Record<string, never>
 > {}

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

@@ -55,9 +55,15 @@ export default class PaginationNav extends SvelteComponentTyped<
   PaginationNavProps,
   {
     /** Fires after every user interaction */
-    change: CustomEvent<{ page: number }>;
-    "click:button--previous": CustomEvent<{ page: number }>;
-    "click:button--next": CustomEvent<{ page: number }>;
+    change: CustomEvent<{
+      page: number;
+    }>;
+    "click:button--previous": CustomEvent<{
+      page: number;
+    }>;
+    "click:button--next": CustomEvent<{
+      page: number;
+    }>;
   },
   Record<string, never>
 > {}

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

@@ -67,6 +67,10 @@ export type PopoverProps = Omit<$RestProps, keyof $Props> & $Props;
 
 export default class Popover extends SvelteComponentTyped<
   PopoverProps,
-  { "click:outside": CustomEvent<{ target: HTMLElement }> },
+  {
+    "click:outside": CustomEvent<{
+      target: HTMLElement;
+    }>;
+  },
   { default: Record<string, never> }
 > {}

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

@@ -2,10 +2,14 @@ import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
 export type RecursiveListNode = {
-  /** Node text content */ text?: string;
-  /** Node link URL */ href?: string;
-  /** Node HTML content */ html?: string;
-  /** Child nodes */ nodes?: RecursiveListNode[];
+  /** Node text content */
+  text?: string;
+  /** Node link URL */
+  href?: string;
+  /** Node HTML content */
+  html?: string;
+  /** Child nodes */
+  nodes?: RecursiveListNode[];
 };
 
 type $RestProps = SvelteHTMLElements["ul"] & SvelteHTMLElements["ol"];

package/src/Select/Select.svelte

@@ -129,6 +129,8 @@
   });
 
   $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
+  $: helperId = `helper-${id}`;
   $: selectedValue.set(selected ?? $defaultValue);
 </script>
 
@@ -161,7 +163,13 @@
         >
           <select
             bind:this={ref}
-            aria-describedby={invalid ? errorId : undefined}
+            aria-describedby={invalid
+              ? errorId
+              : warn
+                ? warnId
+                : helperText
+                  ? helperId
+                  : undefined}
             aria-invalid={invalid || undefined}
             disabled={disabled || undefined}
             required={required || undefined}
@@ -192,6 +200,7 @@
       </div>
       {#if !invalid && !warn && helperText}
         <div
+          id={helperId}
           class:bx--form__helper-text={true}
           class:bx--form__helper-text--disabled={disabled}
         >
@@ -208,7 +217,13 @@
           bind:this={ref}
           {id}
           {name}
-          aria-describedby={invalid ? errorId : undefined}
+          aria-describedby={invalid
+            ? errorId
+            : warn
+              ? warnId
+              : helperText
+                ? helperId
+                : undefined}
           disabled={disabled || undefined}
           required={required || undefined}
           aria-invalid={invalid || undefined}
@@ -234,8 +249,9 @@
           />
         {/if}
       </div>
-      {#if !invalid && helperText}
+      {#if !invalid && !warn && helperText}
         <div
+          id={helperId}
           class:bx--form__helper-text={true}
           class:bx--form__helper-text--disabled={disabled}
         >
@@ -248,7 +264,7 @@
         </div>
       {/if}
       {#if !invalid && warn}
-        <div id={errorId} class:bx--form-requirement={true}>
+        <div id={warnId} class:bx--form-requirement={true}>
           {warnText}
         </div>
       {/if}

package/src/Slider/Slider.svelte

@@ -196,7 +196,7 @@
     class:bx--slider-container--readonly={readonly}
     style:width={fullWidth && "100%"}
   >
-    <span class:bx--slider__range-label={true}>{minLabel || min}</span>
+    <span class:bx--slider__range-label={true}>{minLabel ?? min}</span>
     <div
       bind:this={ref}
       role="presentation"
@@ -247,7 +247,7 @@
         style:transform="translate(0, -50%) scaleX({left / 100})"
       ></div>
     </div>
-    <span class:bx--slider__range-label={true}>{maxLabel || max}</span>
+    <span class:bx--slider__range-label={true}>{maxLabel ?? max}</span>
     <div class:bx--slider-text-input-wrapper={true}>
       {#if invalid}
         <WarningFilled class="bx--slider__invalid-icon" />
@@ -267,7 +267,7 @@
         class:bx--slider-text-input--warn={warn}
         {value}
         aria-labelledby={$$props["aria-label"] ? undefined : labelId}
-        aria-label={$$props["aria-label"] || "Slider number input"}
+        aria-label={$$props["aria-label"] ?? "Slider number input"}
         {disabled}
         {readonly}
         {required}

package/src/Tabs/Tabs.svelte

@@ -241,7 +241,7 @@
     role="listbox"
     tabindex="0"
     class:bx--tabs-trigger={true}
-    aria-label={$$props["aria-label"] || "listbox"}
+    aria-label={$$props["aria-label"] ?? "listbox"}
     on:click={() => {
       dropdownHidden = !dropdownHidden;
     }}

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

@@ -57,6 +57,10 @@ export type ThemeProps = {
 
 export default class Theme extends SvelteComponentTyped<
   ThemeProps,
-  { update: CustomEvent<{ theme: CarbonTheme }> },
+  {
+    update: CustomEvent<{
+      theme: CarbonTheme;
+    }>;
+  },
   { default: { theme: CarbonTheme } }
 > {}

package/src/Toggle/Toggle.svelte

@@ -82,7 +82,7 @@
     {name}
   />
   <label
-    aria-label={labelText ? undefined : $$props["aria-label"] || "Toggle"}
+    aria-label={labelText ? undefined : $$props["aria-label"] ?? "Toggle"}
     for={id}
     class:bx--toggle-input__label={true}
   >

package/src/Toggle/ToggleSkeleton.svelte

@@ -32,7 +32,7 @@
   <label
     aria-label={labelText
       ? undefined
-      : $$props["aria-label"] || "Toggle is loading"}
+      : $$props["aria-label"] ?? "Toggle is loading"}
     for={id}
     class:bx--toggle__label={true}
     class:bx--skeleton={true}

package/src/TreeView/TreeView.svelte

@@ -312,6 +312,10 @@
   const selectedNodeIds = writable(selectedIds);
   /** @type {import("svelte/store").Writable<ReadonlyArray<Node["id"]>>} */
   const expandedNodeIds = writable(expandedIds);
+  /** @type {import("svelte/store").Writable<Set<Node["id"]>>} */
+  const selectedIdsSetStore = writable(new Set(selectedIds));
+  /** @type {import("svelte/store").Writable<Set<Node["id"]>>} */
+  const expandedIdsSetStore = writable(new Set(expandedIds));
 
   /** @type {HTMLElement | null} */
   let ref = null;
@@ -329,6 +333,25 @@
   let expandedIdsSet = new Set(expandedIds);
   /** @type {ReadonlyArray<Node["id"]>} */
   let lastExpandedIdsRef = expandedIds;
+  /** @type {Node["id"]} */
+  let lastActiveIdPushed = activeId;
+  /** @type {ReadonlyArray<Node["id"]>} */
+  let lastSelectedIdsPushed = selectedIds;
+  /** @type {ReadonlyArray<Node["id"]>} */
+  let lastExpandedIdsPushed = expandedIds;
+
+  /**
+   * @param {ReadonlyArray<Node["id"]>} a
+   * @param {ReadonlyArray<Node["id"]>} b
+   * @returns {boolean}
+   */
+  function arrayIdsEqual(a, b) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
 
   /** @type {(node: Node) => void} */
   const clickNode = (node) => {
@@ -369,6 +392,8 @@
     activeNodeId,
     selectedNodeIds,
     expandedNodeIds,
+    selectedIdsSetStore,
+    expandedIdsSetStore,
     clickNode,
     selectNode,
     expandNode,
@@ -414,14 +439,53 @@
   $: flattenedNodes = cachedFlattenedNodes ?? [];
   $: nodeIds = cachedNodeIds ?? [];
 
+  let prevActiveIdForAutoCollapse = activeId;
+
   $: {
     if (expandedIds !== lastExpandedIdsRef) {
       expandedIdsSet = new Set(expandedIds);
       lastExpandedIdsRef = expandedIds;
     }
-    activeNodeId.set(activeId);
-    selectedNodeIds.set(selectedIds);
-    expandedNodeIds.set(expandedIds);
+
+    // `autoCollapse` should also be triggered when activeId changes programmatically.
+    if (autoCollapse && activeId !== prevActiveIdForAutoCollapse) {
+      prevActiveIdForAutoCollapse = activeId;
+
+      for (const child of nodes) {
+        const path = findNodeById(child, activeId);
+        if (path) {
+          const ancestorIds = path.slice(0, -1).map((n) => n.id);
+
+          // For each ancestor, collapse its siblings.
+          for (const ancestorId of ancestorIds) {
+            const siblingIds = findSiblingIds(nodes, ancestorId);
+            for (const siblingId of siblingIds) {
+              expandedIdsSet.delete(siblingId);
+            }
+            expandedIdsSet.add(ancestorId);
+          }
+
+          expandedIds = Array.from(expandedIdsSet);
+          lastExpandedIdsRef = expandedIds;
+          break;
+        }
+      }
+    }
+
+    if (activeId !== lastActiveIdPushed) {
+      lastActiveIdPushed = activeId;
+      activeNodeId.set(activeId);
+    }
+    if (!arrayIdsEqual(selectedIds, lastSelectedIdsPushed)) {
+      lastSelectedIdsPushed = selectedIds;
+      selectedIdsSetStore.set(new Set(selectedIds));
+      selectedNodeIds.set(selectedIds);
+    }
+    if (!arrayIdsEqual(expandedIds, lastExpandedIdsPushed)) {
+      lastExpandedIdsPushed = expandedIds;
+      expandedIdsSetStore.set(expandedIdsSet);
+      expandedNodeIds.set(expandedIds);
+    }
   }
 
   $: if (ref && (nodes !== cachedNodes || !treeWalker)) {

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

@@ -5,20 +5,26 @@ export type TreeNode<Id = string | number> = {
   id: Id;
   text: any;
   icon?: any;
-  /** Whether the node is disabled */ disabled?: boolean;
+  /** Whether the node is disabled */
+  disabled?: boolean;
   nodes?: TreeNode<Id>[];
 };
 
 export type ShowNodeOptions = {
-  /** Whether to expand the node and its ancestors (default: true) */ expand?: boolean;
-  /** Whether to select the node (default: true) */ select?: boolean;
-  /** Whether to focus the node (default: true) */ focus?: boolean;
+  /** Whether to expand the node and its ancestors (default: true) */
+  expand?: boolean;
+  /** Whether to select the node (default: true) */
+  select?: boolean;
+  /** Whether to focus the node (default: true) */
+  focus?: boolean;
 };
 
 export type TreeViewContext<Node extends TreeNode<any> = TreeNode<any>> = {
   activeNodeId: import("svelte/store").Writable<Node["id"]>;
   selectedNodeIds: import("svelte/store").Writable<ReadonlyArray<Node["id"]>>;
   expandedNodeIds: import("svelte/store").Writable<ReadonlyArray<Node["id"]>>;
+  selectedIdsSetStore: import("svelte/store").Writable<Set<Node["id"]>>;
+  expandedIdsSetStore: import("svelte/store").Writable<Set<Node["id"]>>;
   clickNode: (node: Node) => void;
   selectNode: (node: Node) => void;
   expandNode: (node: Node, expanded: boolean) => void;

package/src/TreeView/TreeViewNode.svelte

@@ -79,20 +79,25 @@
   let refLabel = null;
   let prevActiveId = undefined;
 
-  const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
-    getContext("TreeView");
+  const {
+    activeNodeId,
+    selectedIdsSetStore,
+    clickNode,
+    selectNode,
+    focusNode,
+  } = getContext("TreeView");
   const offset = () =>
     computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
 
   afterUpdate(() => {
     if (id === $activeNodeId && prevActiveId !== $activeNodeId) {
-      if (!$selectedNodeIds.includes(id)) selectNode(node);
+      if (!$selectedIdsSetStore.has(id)) selectNode(node);
     }
 
     prevActiveId = $activeNodeId;
   });
 
-  $: selected = $selectedNodeIds.includes(id);
+  $: selected = $selectedIdsSetStore.has(id);
   // Merge all props (including custom properties) with computed properties
   // Explicitly include disabled to ensure it's always present (has default value)
   $: node = {