carbon-components-svelte 0.98.4 → 0.98.6

package/package.json

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

package/src/Select/Select.svelte

@@ -1,8 +1,6 @@
 <script>
   /**
    * @generics {Value extends string | number = string | number} Value
-   * @template {string | number} Value
-   * @typedef {string | number} SelectValue
    * @event {Value} update The selected value.
    */
 

package/src/Theme/Theme.svelte

@@ -65,7 +65,7 @@
 
   /**
    * Override the default select props.
-   * @type {import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }}
+   * @type {import("../Select/Select.svelte").SelectProps<CarbonTheme> & { themes?: CarbonTheme[]; }}
    */
   export let select = {
     themes: themeKeys,

package/src/TreeView/TreeView.svelte

@@ -281,19 +281,19 @@
   /** @type {ReadonlyArray<TreeNodeId>} */
   let lastExpandedIdsRef = expandedIds;
 
-  /** @type {(node: TreeNode) => void} */
+  /** @type {(node: Node) => void} */
   const clickNode = (node) => {
     activeId = node.id;
     selectedIds = [node.id];
     dispatch("select", node);
   };
 
-  /** @type {(node: TreeNode) => void} */
+  /** @type {(node: Node) => void} */
   const selectNode = (node) => {
     selectedIds = [node.id];
   };
 
-  /** @type {(node: TreeNode, expanded: boolean) => void} */
+  /** @type {(node: Node, expanded: boolean) => void} */
   const expandNode = (node, expanded) => {
     if (expanded) {
       expandedIdsSet.add(node.id);
@@ -304,10 +304,10 @@
     lastExpandedIdsRef = expandedIds;
   };
 
-  /** @type {(node: TreeNode) => void} */
+  /** @type {(node: Node) => void} */
   const focusNode = (node) => dispatch("focus", node);
 
-  /** @type {(node: TreeNode) => void} */
+  /** @type {(node: Node) => void} */
   const toggleNode = (node) => dispatch("toggle", node);
 
   setContext("TreeView", {

package/src/Truncate/truncate.d.ts

@@ -2,11 +2,11 @@ interface TruncateOptions {
   clamp?: "end" | "front";
 }
 
-export function TruncateAction(
+export function truncate(
   node: HTMLElement,
   options?: TruncateOptions,
 ): {
   update: (options?: TruncateOptions) => void;
 };
 
-export default TruncateAction;
+export default truncate;

package/src/UIShell/Content.svelte

@@ -2,16 +2,22 @@
   /** Specify the id for the main element */
   export let id = "main-content";
 
-  import { isSideNavCollapsed, isSideNavRail } from "./navStore";
+  import {
+    isSideNavCollapsed,
+    isSideNavMobile,
+    isSideNavRail,
+  } from "./navStore";
 
   /**
    * By default, the `SideNav` applies a left margin of `3rem` to `Content`
    * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
    *
-   * We manually unset the left margin if the `SideNav`
-   * is collapsed and if it's not the `rail` variant.
+   * Unset the left margin if:
+   * - `SideNav` is collapsed and it's not the `rail` variant, OR
+   * - `SideNav` overlays content on mobile (below the breakpoint)
    */
-  $: unsetLeftMargin = $isSideNavCollapsed && !$isSideNavRail;
+  $: unsetLeftMargin =
+    ($isSideNavCollapsed && !$isSideNavRail) || $isSideNavMobile;
 </script>
 
 <main

package/src/UIShell/Header.svelte

@@ -84,12 +84,33 @@
   import HamburgerMenu from "./HamburgerMenu.svelte";
   import { shouldRenderHamburgerMenu } from "./navStore";
 
+  /** @type {undefined | number} */
   let winWidth = undefined;
+  let wasAboveBreakpoint = undefined;
+  let userExplicitlySet = false;
+
+  $: isAboveBreakpoint =
+    winWidth !== undefined && winWidth >= expansionBreakpoint;
+
+  // Only auto-set isSideNavOpen on initial mount or when crossing the breakpoint threshold.
+  // This prevents mobile browser scroll events (which cause minor width changes
+  // due to address bar hide/show) from unexpectedly closing the nav.
+  $: {
+    const shouldAutoExpand =
+      expandedByDefault && isAboveBreakpoint && !persistentHamburgerMenu;
+
+    if (wasAboveBreakpoint === undefined) {
+      // Initial mount: set based on current viewport
+      isSideNavOpen = shouldAutoExpand;
+    } else if (wasAboveBreakpoint !== isAboveBreakpoint) {
+      // Crossed breakpoint threshold - reset user flag and auto-expand if appropriate
+      userExplicitlySet = false;
+      isSideNavOpen = shouldAutoExpand;
+    }
+
+    wasAboveBreakpoint = isAboveBreakpoint;
+  }
 
-  $: isSideNavOpen =
-    expandedByDefault &&
-    winWidth >= expansionBreakpoint &&
-    !persistentHamburgerMenu;
   $: ariaLabel = companyName
     ? companyName
     : `${uiShellAriaLabel || $$props["aria-label"] || platformName}`;
@@ -104,6 +125,9 @@
   {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
     <HamburgerMenu
       bind:isOpen={isSideNavOpen}
+      on:click={() => {
+        userExplicitlySet = true;
+      }}
       {iconClose}
       {iconMenu}
       ariaLabel={hamburgerAriaLabel}

package/src/UIShell/SideNav.svelte

@@ -34,6 +34,7 @@
   import { createEventDispatcher, onMount } from "svelte";
   import {
     isSideNavCollapsed,
+    isSideNavMobile,
     isSideNavRail,
     shouldRenderHamburgerMenu,
   } from "./navStore";
@@ -45,10 +46,28 @@
   $: dispatch(isOpen ? "open" : "close");
   $: $isSideNavCollapsed = !isOpen;
   $: $isSideNavRail = rail;
+  $: $isSideNavMobile =
+    winWidth !== undefined && winWidth < expansionBreakpoint;
+
+  // Lock body scroll when SideNav is open on mobile (below breakpoint).
+  // Only applies to non-fixed, non-rail variants.
+  $: if (typeof document !== "undefined") {
+    const shouldLockScroll = isOpen && !fixed && !rail && $isSideNavMobile;
+    document.body.classList.toggle(
+      "bx--body--with-modal-open",
+      shouldLockScroll,
+    );
+  }
 
   onMount(() => {
     shouldRenderHamburgerMenu.set(true);
-    return () => shouldRenderHamburgerMenu.set(false);
+    return () => {
+      shouldRenderHamburgerMenu.set(false);
+      isSideNavMobile.set(false);
+      if (typeof document !== "undefined") {
+        document.body.classList.remove("bx--body--with-modal-open");
+      }
+    };
   });
 </script>
 

package/src/UIShell/navStore.js

@@ -5,3 +5,5 @@ export const shouldRenderHamburgerMenu = writable(false);
 export const isSideNavCollapsed = writable(false);
 
 export const isSideNavRail = writable(false);
+
+export const isSideNavMobile = writable(false);

package/types/DataTable/DataTable.svelte.d.ts

@@ -42,7 +42,8 @@ export type DataTableCell<Row = DataTableRow> = {
   value: DataTableValue;
   display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
 };
-export type DataTableContext = {
+
+export type DataTableContext<Row extends DataTableRow = DataTableRow> = {
   batchSelectedIds: import("svelte/store").Writable<
     ReadonlyArray<DataTableRowId>
   >;

package/types/Heading/Section.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
 export type SectionContext = {
   $internalLevel: any;
 };

package/types/MultiSelect/MultiSelect.svelte.d.ts

@@ -10,6 +10,7 @@ export type MultiSelectItem = {
   text: MultiSelectItemText;
   /** Whether the item is disabled */ disabled?: boolean;
 };
+
 export type MultiSelectContext = {
   declareRef: (data: {
     key: "field" | "selection";

package/types/Select/Select.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type SelectValue = string | number;
 export type SelectContext = {
   selectedValue: import("svelte/store").Writable<string | number | undefined>;
   /** Use the first `SelectItem` value as the

package/types/Theme/Theme.svelte.d.ts

@@ -48,7 +48,7 @@ export type ThemeProps = {
    * Override the default select props.
    * @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
    */
-  select?: import("../Select/Select.svelte").SelectProps & {
+  select?: import("../Select/Select.svelte").SelectProps<CarbonTheme> & {
     themes?: CarbonTheme[];
   };
 

package/types/Tile/SelectableTileGroup.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type SelectableTileGroupContext = {
+export type SelectableTileGroupContext<T extends string = string> = {
   selectedValues: import("svelte/store").Writable<T[]>;
   groupName: import("svelte/store").Readable<string | undefined>;
   add: (data: { selected: boolean; value: T }) => void;

package/types/Tile/TileGroup.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SvelteHTMLElements } from "svelte/elements";
 
-export type TileGroupContext = {
+export type TileGroupContext<T extends string = string> = {
   selectedValue: import("svelte/store").Writable<T | undefined>;
   groupName: import("svelte/store").Readable<string | undefined>;
   groupRequired: import("svelte/store").Readable<boolean | undefined>;

package/types/TreeView/TreeView.svelte.d.ts

@@ -16,15 +16,16 @@ export type ShowNodeOptions = {
   /** Whether to select the node (default: true) */ select?: boolean;
   /** Whether to focus the node (default: true) */ focus?: boolean;
 };
-export type TreeViewContext = {
+
+export type TreeViewContext<Node extends TreeNode = TreeNode> = {
   activeNodeId: import("svelte/store").Writable<TreeNodeId>;
   selectedNodeIds: import("svelte/store").Writable<ReadonlyArray<TreeNodeId>>;
   expandedNodeIds: import("svelte/store").Writable<ReadonlyArray<TreeNodeId>>;
-  clickNode: (node: TreeNode) => void;
-  selectNode: (node: TreeNode) => void;
-  expandNode: (node: TreeNode, expanded: boolean) => void;
-  focusNode: (node: TreeNode) => void;
-  toggleNode: (node: TreeNode) => void;
+  clickNode: (node: Node) => void;
+  selectNode: (node: Node) => void;
+  expandNode: (node: Node, expanded: boolean) => void;
+  focusNode: (node: Node) => void;
+  toggleNode: (node: Node) => void;
 };
 
 type $RestProps = SvelteHTMLElements["ul"];

package/types/Truncate/truncate.d.ts

@@ -2,11 +2,11 @@ interface TruncateOptions {
   clamp?: "end" | "front";
 }
 
-export function TruncateAction(
+export function truncate(
   node: HTMLElement,
   options?: TruncateOptions,
 ): {
   update: (options?: TruncateOptions) => void;
 };
 
-export default TruncateAction;
+export default truncate;