kaze-design-system 0.8.0 → 0.8.1

package/dist/components/Avatar/Avatar.js

@@ -4,12 +4,12 @@ import { cn } from "../../lib/utils.js";
 const Avatar = forwardRef(
   ({ size = "md", src, alt, fallback, className, ...rest }, ref) => {
     const showFallback = !src && fallback;
+    const a11yProps = showFallback ? { role: "img", "aria-label": fallback } : {};
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        role: showFallback ? "img" : void 0,
-        "aria-label": showFallback ? fallback : void 0,
+        ...a11yProps,
         className: cn("avatar", `avatar--${size}`, className),
         ...rest,
         children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: fallback })

package/dist/components/BarList/BarList.js

@@ -7,7 +7,7 @@ const BarList = forwardRef(
       (a, b) => sortOrder === "ascending" ? a.value - b.value : b.value - a.value
     );
     const maxValue = Math.max(...sorted.map((d) => d.value), 1);
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("barlist", className), ...rest, children: sorted.map((item, i) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("barlist", className), ...rest, children: sorted.map((item) => {
       const pct = item.value / maxValue * 100;
       const display = item.displayValue ?? (valueFormatter ? valueFormatter(item.value) : String(item.value));
       const content = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -27,7 +27,15 @@ const BarList = forwardRef(
         /* @__PURE__ */ jsx("span", { className: "barlist__value", children: display })
       ] });
       const LinkComponent = item.as ?? "a";
-      return item.href ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: "barlist__row barlist__row--link", children: content }, i) : /* @__PURE__ */ jsx("div", { className: "barlist__row", children: content }, i);
+      return item.href ? /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: item.href,
+          className: "barlist__row barlist__row--link",
+          children: content
+        },
+        item.label
+      ) : /* @__PURE__ */ jsx("div", { className: "barlist__row", children: content }, item.label);
     }) });
   }
 );

package/dist/components/ColumnChart/ColumnChart.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import { forwardRef, useState, useCallback, useMemo } from "react";
 import { cn } from "../../lib/utils.js";
 import { CHART_COLORS } from "../../lib/chartColors.js";
 import { niceScale, linearScale, defaultFormat } from "../../lib/chartScale.js";
+import { useChartWidth } from "../../lib/useChartWidth.js";
 import { ChartLegend } from "../ChartLegend/ChartLegend.js";
 const FALLBACK_WIDTH = 640;
 const PAD_TOP = 8;
@@ -43,23 +44,9 @@ const ColumnChart = forwardRef(
     onBlur,
     ...rest
   }, ref) => {
-    const wrapRef = useRef(null);
-    const [width, setWidth] = useState(FALLBACK_WIDTH);
+    const { ref: wrapRef, width, measured } = useChartWidth(FALLBACK_WIDTH);
     const [hidden, setHidden] = useState([]);
     const [active, setActive] = useState(null);
-    useEffect(() => {
-      const el = wrapRef.current;
-      if (!el) return;
-      const measure = () => {
-        const w = el.clientWidth;
-        if (w > 0) setWidth(w);
-      };
-      measure();
-      if (typeof ResizeObserver === "undefined") return;
-      const ro = new ResizeObserver(measure);
-      ro.observe(el);
-      return () => ro.disconnect();
-    }, []);
     const toggle = useCallback((key) => {
       setHidden((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]);
     }, []);
@@ -177,9 +164,10 @@ const ColumnChart = forwardRef(
               "svg",
               {
                 className: "chart__svg column-chart__svg",
-                width,
+                width: measured ? width : "100%",
                 height,
                 viewBox: `0 0 ${width} ${height}`,
+                preserveAspectRatio: measured ? void 0 : "none",
                 onPointerLeave: () => setActive(null),
                 "aria-hidden": "true",
                 children: [

package/dist/components/CommandPalette/CommandPalette.js

@@ -37,10 +37,12 @@ const CommandPalette = forwardRef(
       const groups = /* @__PURE__ */ new Map();
       for (const cmd of filtered) {
         const group = cmd.group ?? "";
-        if (!groups.has(group)) {
-          groups.set(group, []);
+        const list = groups.get(group);
+        if (list) {
+          list.push(cmd);
+        } else {
+          groups.set(group, [cmd]);
         }
-        groups.get(group).push(cmd);
       }
       return groups;
     }, [filtered]);
@@ -118,6 +120,8 @@ const CommandPalette = forwardRef(
     if (typeof document === "undefined") return null;
     let flatIndex = 0;
     return createPortal(
+      // biome-ignore lint/a11y/noStaticElementInteractions: the backdrop only handles click-outside-to-close; keyboard users close the palette with Escape, and the backdrop itself must not be focusable.
+      // biome-ignore lint/a11y/useKeyWithClickEvents: Escape is handled by the dialog's onKeyDown; the backdrop has no keyboard role of its own.
       /* @__PURE__ */ jsx("div", { className: "overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -152,33 +156,37 @@ const CommandPalette = forwardRef(
                 group && /* @__PURE__ */ jsx("div", { className: "command-palette__group", children: group }),
                 cmds.map((cmd) => {
                   const index = flatIndex++;
-                  return /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      role: "option",
-                      "data-command-item": "",
-                      "aria-selected": index === highlightedIndex,
-                      className: cn(
-                        "command-palette__item",
-                        index === highlightedIndex && "command-palette__item--active"
-                      ),
-                      onClick: () => handleSelect(cmd),
-                      onMouseEnter: () => setHighlightedIndex(index),
-                      children: [
-                        cmd.icon && /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            style: {
-                              display: "inline-flex",
-                              flexShrink: 0
-                            },
-                            children: cmd.icon
-                          }
+                  return (
+                    // biome-ignore lint/a11y/useKeyWithClickEvents: Arrow/Enter selection is handled by the dialog's onKeyDown while focus stays on the search input (listbox pattern).
+                    // biome-ignore lint/a11y/useFocusableInteractive: options must not take focus; focus stays on the search input and the highlighted option is tracked via aria-selected.
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "option",
+                        "data-command-item": "",
+                        "aria-selected": index === highlightedIndex,
+                        className: cn(
+                          "command-palette__item",
+                          index === highlightedIndex && "command-palette__item--active"
                         ),
-                        cmd.label
-                      ]
-                    },
-                    cmd.id
+                        onClick: () => handleSelect(cmd),
+                        onMouseEnter: () => setHighlightedIndex(index),
+                        children: [
+                          cmd.icon && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                display: "inline-flex",
+                                flexShrink: 0
+                              },
+                              children: cmd.icon
+                            }
+                          ),
+                          cmd.label
+                        ]
+                      },
+                      cmd.id
+                    )
                   );
                 })
               ] }, group || "__default"))

package/dist/components/Dialog/Dialog.js

@@ -62,6 +62,7 @@ const Dialog = forwardRef(
     if (!visible) return null;
     if (typeof document === "undefined") return null;
     return createPortal(
+      // biome-ignore lint/a11y/noStaticElementInteractions: the backdrop only handles click-outside-to-close; keyboard users close the dialog with Escape, and the backdrop itself must not be focusable.
       /* @__PURE__ */ jsx(
         "div",
         {

package/dist/components/Disclosure/Disclosure.js

@@ -11,15 +11,14 @@ const iconSvgProps = {
   strokeWidth: 2,
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  className: "disclosure__icon-svg",
-  "aria-hidden": true
+  className: "disclosure__icon-svg"
 };
 function renderIcon(icon) {
   if (icon === "chevron" || icon == null) {
-    return /* @__PURE__ */ jsx("svg", { ...iconSvgProps, children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+    return /* @__PURE__ */ jsx("svg", { ...iconSvgProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
   }
   if (icon === "plus") {
-    return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, children: [
+    return /* @__PURE__ */ jsxs("svg", { ...iconSvgProps, "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
       /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
     ] });
@@ -66,6 +65,7 @@ const Disclosure = forwardRef(
       [isOpen, setOpen]
     );
     const contentId = useId();
+    const triggerId = useId();
     const isBuiltInIcon = icon === "chevron" || icon === "plus";
     const markerNode = useMemo(() => renderIcon(icon), [icon]);
     return /* @__PURE__ */ jsxs(
@@ -85,6 +85,7 @@ const Disclosure = forwardRef(
           /* @__PURE__ */ jsxs(
             "button",
             {
+              id: triggerId,
               type: "button",
               className: cn(
                 "disclosure__trigger",
@@ -122,10 +123,10 @@ const Disclosure = forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(
-            "div",
+            "section",
             {
               id: contentId,
-              role: "region",
+              "aria-labelledby": triggerId,
               className: cn("disclosure__content", contentClassName),
               hidden: !isOpen,
               children: /* @__PURE__ */ jsx("div", { className: "disclosure__content-inner", children })

package/dist/components/Dropdown/Dropdown.js

@@ -66,23 +66,26 @@ const DropdownTrigger = forwardRef(
       },
       [setOpen]
     );
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref: (node) => {
-          triggerRef.current = node;
-          if (typeof ref === "function") ref(node);
-          else if (ref) ref.current = node;
-        },
-        role: "button",
-        tabIndex: 0,
-        "aria-expanded": open ? "true" : "false",
-        "aria-haspopup": "menu",
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        style: { display: "inline-flex" },
-        children
-      }
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: the trigger wraps arbitrary children (often a <Button>), and nesting a <button> inside a <button> is invalid HTML; the span gets role, tabIndex and keyboard handling instead.
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          role: "button",
+          tabIndex: 0,
+          "aria-expanded": open ? "true" : "false",
+          "aria-haspopup": "menu",
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          style: { display: "inline-flex" },
+          children
+        }
+      )
     );
   }
 );

package/dist/components/Icon/Icon.js

@@ -10,18 +10,8 @@ const Icon = forwardRef(
       lg: 20,
       xl: 24
     };
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        ref,
-        role: label ? "img" : void 0,
-        "aria-label": label,
-        "aria-hidden": label ? void 0 : true,
-        className: cn("icon", `icon--${size}`, className),
-        ...rest,
-        children: /* @__PURE__ */ jsx(LucideComponent, { size: sizeMap[size], strokeWidth: 2 })
-      }
-    );
+    const a11yProps = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    return /* @__PURE__ */ jsx("span", { ref, ...a11yProps, className: cn("icon", `icon--${size}`, className), ...rest, children: /* @__PURE__ */ jsx(LucideComponent, { size: sizeMap[size], strokeWidth: 2 }) });
   }
 );
 Icon.displayName = "Icon";

package/dist/components/LineChart/LineChart.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useEffect, useCallback } from "react";
+import { forwardRef, useRef, useState, useCallback } from "react";
 import { cn } from "../../lib/utils.js";
 import { CHART_COLORS } from "../../lib/chartColors.js";
 import { niceScale, linearScale, defaultFormat } from "../../lib/chartScale.js";
+import { useChartWidth } from "../../lib/useChartWidth.js";
 import { ChartLegend } from "../ChartLegend/ChartLegend.js";
 const PAD_TOP = 8;
 const PAD_BOTTOM = 24;
@@ -101,24 +102,10 @@ const LineChart = forwardRef(
     className,
     ...rest
   }, ref) => {
-    const wrapRef = useRef(null);
+    const { ref: wrapRef, width, measured } = useChartWidth(INITIAL_WIDTH);
     const svgRef = useRef(null);
-    const [width, setWidth] = useState(INITIAL_WIDTH);
     const [hidden, setHidden] = useState([]);
     const [active, setActive] = useState(null);
-    useEffect(() => {
-      const el = wrapRef.current;
-      if (!el) return;
-      const measure = () => {
-        const w = Math.round(el.getBoundingClientRect().width);
-        if (w > 0) setWidth(w);
-      };
-      measure();
-      if (typeof ResizeObserver === "undefined") return;
-      const ro = new ResizeObserver(measure);
-      ro.observe(el);
-      return () => ro.disconnect();
-    }, []);
     const toggle = useCallback((key) => {
       setHidden((h) => h.includes(key) ? h.filter((k) => k !== key) : [...h, key]);
     }, []);
@@ -189,9 +176,10 @@ const LineChart = forwardRef(
             className: "chart__svg line-chart__svg",
             role: "img",
             "aria-label": ariaLabel,
-            width,
+            width: measured ? width : "100%",
             height,
             viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: measured ? void 0 : "none",
             tabIndex: 0,
             onPointerMove: (e) => setActive(indexFromPointer(e)),
             onPointerLeave: () => setActive(null),

package/dist/components/NumberField/NumberField.js

@@ -127,6 +127,7 @@ const NumberField = forwardRef(
             children: /* @__PURE__ */ jsx(
               "svg",
               {
+                "aria-hidden": "true",
                 width: "12",
                 height: "12",
                 viewBox: "0 0 12 12",
@@ -171,6 +172,7 @@ const NumberField = forwardRef(
             children: /* @__PURE__ */ jsxs(
               "svg",
               {
+                "aria-hidden": "true",
                 width: "12",
                 height: "12",
                 viewBox: "0 0 12 12",

package/dist/components/Pagination/Pagination.js

@@ -6,9 +6,9 @@ function getPages(current, total, siblings) {
   const left = Math.max(2, current - siblings);
   const right = Math.min(total - 1, current + siblings);
   range.push(1);
-  if (left > 2) range.push("...");
+  if (left > 2) range.push("ellipsis-start");
   for (let i = left; i <= right; i++) range.push(i);
-  if (right < total - 1) range.push("...");
+  if (right < total - 1) range.push("ellipsis-end");
   if (total > 1) range.push(total);
   return range;
 }
@@ -38,7 +38,7 @@ const Pagination = forwardRef(
         }
       ),
       pages.map(
-        (page, i) => page === "..." ? /* @__PURE__ */ jsx("span", { className: "pagination__ellipsis", children: "…" }, `e${i}`) : /* @__PURE__ */ jsx(
+        (page) => typeof page === "string" ? /* @__PURE__ */ jsx("span", { className: "pagination__ellipsis", children: "…" }, page) : /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

package/dist/components/Search/Search.js

@@ -27,41 +27,45 @@ const Search = forwardRef(
       },
       [isControlled, onChangeProp, onSearch]
     );
-    return /* @__PURE__ */ jsxs("div", { role: "search", className: cn("search", className), ...rest, children: [
-      /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          className: "search__icon",
-          "aria-hidden": "true",
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "14",
-          height: "14",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-            /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "text",
-          className: "search__input",
-          placeholder,
-          "aria-label": ariaLabel ?? placeholder,
-          value: currentValue,
-          onChange: handleChange
-        }
-      ),
-      shortcut && /* @__PURE__ */ jsx("kbd", { className: "search__kbd", "aria-hidden": "true", children: shortcut })
-    ] });
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: the <search> element is not supported in all target browsers yet (Safari < 17); role="search" on a div exposes the same landmark.
+      /* @__PURE__ */ jsxs("div", { role: "search", className: cn("search", className), ...rest, children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "search__icon",
+            "aria-hidden": "true",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "text",
+            className: "search__input",
+            placeholder,
+            "aria-label": ariaLabel ?? placeholder,
+            value: currentValue,
+            onChange: handleChange
+          }
+        ),
+        shortcut && // biome-ignore lint/a11y/noAriaHiddenOnFocusable: <kbd> has no tabIndex and is not focusable; the shortcut hint is visual only.
+        /* @__PURE__ */ jsx("kbd", { className: "search__kbd", "aria-hidden": "true", children: shortcut })
+      ] })
+    );
   }
 );
 Search.displayName = "Search";

package/dist/components/Sidebar/Sidebar.js

@@ -38,7 +38,10 @@ const SidebarGroupLabel = forwardRef(
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 const SidebarDivider = forwardRef(
   ({ className, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("sidebar__divider", className), role: "separator", ...rest });
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: the forwarded ref and props are typed as HTMLDivElement (public API); switching to <hr> would change the exported types.
+      /* @__PURE__ */ jsx("div", { ref, className: cn("sidebar__divider", className), role: "separator", ...rest })
+    );
   }
 );
 SidebarDivider.displayName = "SidebarDivider";

package/dist/components/Stepper/Stepper.js

@@ -20,28 +20,31 @@ const Stepper = forwardRef(
   ({ steps, currentStep, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("stepper", className), ...rest, children: steps.map((step, i) => {
     const isCompleted = i < currentStep;
     const isActive = i === currentStep;
-    return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
-      /* @__PURE__ */ jsxs("div", { className: cn("stepper__step", isActive && "stepper__step--active"), children: [
-        /* @__PURE__ */ jsx(
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: steps are ordinal (the index is rendered as the step number) and labels are not guaranteed unique.
+      /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("stepper__step", isActive && "stepper__step--active"), children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "stepper__circle",
+                isActive && "stepper__circle--active",
+                isCompleted && "stepper__circle--completed"
+              ),
+              children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {}) : i + 1
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
+        ] }),
+        i < steps.length - 1 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: cn(
-              "stepper__circle",
-              isActive && "stepper__circle--active",
-              isCompleted && "stepper__circle--completed"
-            ),
-            children: isCompleted ? /* @__PURE__ */ jsx(CheckIcon, {}) : i + 1
+            className: cn("stepper__connector", isCompleted && "stepper__connector--completed")
           }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "stepper__label", children: step.label })
-      ] }),
-      i < steps.length - 1 && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn("stepper__connector", isCompleted && "stepper__connector--completed")
-        }
-      )
-    ] }, i);
+        )
+      ] }, i)
+    );
   }) })
 );
 Stepper.displayName = "Stepper";

package/dist/components/Table/Table.js

@@ -3,16 +3,7 @@ import { forwardRef } from "react";
 import { cn } from "../../lib/utils.js";
 const Table = forwardRef(
   ({ compact, className, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx(
-      "table",
-      {
-        ref,
-        role: "table",
-        className: cn("table", compact && "table--compact", className),
-        ...rest,
-        children
-      }
-    ) });
+    return /* @__PURE__ */ jsx("div", { className: "table-wrapper", children: /* @__PURE__ */ jsx("table", { ref, className: cn("table", compact && "table--compact", className), ...rest, children }) });
   }
 );
 Table.displayName = "Table";

package/dist/components/Toast/Toast.js

@@ -37,6 +37,7 @@ function ToastItem(props) {
       data.variant === "positive" && /* @__PURE__ */ jsx(
         "svg",
         {
+          "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -52,6 +53,7 @@ function ToastItem(props) {
       data.variant === "negative" && /* @__PURE__ */ jsxs(
         "svg",
         {
+          "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -71,6 +73,7 @@ function ToastItem(props) {
       data.variant === "warning" && /* @__PURE__ */ jsxs(
         "svg",
         {
+          "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -90,6 +93,7 @@ function ToastItem(props) {
       data.variant === "info" && /* @__PURE__ */ jsxs(
         "svg",
         {
+          "aria-hidden": "true",
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -114,6 +118,7 @@ function ToastItem(props) {
     /* @__PURE__ */ jsx("button", { type: "button", className: "toast__close", onClick: dismiss, "aria-label": closeLabel, children: /* @__PURE__ */ jsxs(
       "svg",
       {
+        "aria-hidden": "true",
         xmlns: "http://www.w3.org/2000/svg",
         width: "14",
         height: "14",
@@ -155,7 +160,7 @@ function ToastProvider({
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast }, children: [
     children,
     typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx("div", { className: "toast-container", "aria-label": containerLabel, "aria-live": "polite", children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { data: t, onRemove: removeToast, closeLabel }, t.id)) }),
+      /* @__PURE__ */ jsx("section", { className: "toast-container", "aria-label": containerLabel, "aria-live": "polite", children: toasts.map((t) => /* @__PURE__ */ jsx(ToastItem, { data: t, onRemove: removeToast, closeLabel }, t.id)) }),
       document.body
     )
   ] });

package/dist/lib/useChartWidth.js

@@ -0,0 +1,28 @@
+"use client";
+import { useRef, useState, useLayoutEffect, useEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useChartWidth(fallback) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(fallback);
+  const [measured, setMeasured] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const w = Math.round(el.getBoundingClientRect().width);
+      if (w > 0) {
+        setWidth(w);
+        setMeasured(true);
+      }
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, width, measured };
+}
+export {
+  useChartWidth
+};

package/dist/types/lib/useChartWidth.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from "react";
+export interface ChartWidth<T extends HTMLElement> {
+    ref: RefObject<T | null>;
+    /** Measured width in px, or `fallback` until the first measurement */
+    width: number;
+    /**
+     * False until the container has been measured (SSR HTML and the first client
+     * paint before layout). Charts should stretch the SVG to 100% while false so
+     * server-rendered output fits the container instead of jumping on hydration.
+     */
+    measured: boolean;
+}
+/** Track a container's width for SVG charts: measured before paint, then via ResizeObserver. */
+export declare function useChartWidth<T extends HTMLElement>(fallback: number): ChartWidth<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "private": false,
   "type": "module",
   "license": "MIT",