prime-ui-kit 0.9.2 → 0.9.3

package/dist/chunks/{chunk-LXGRKN34.js → chunk-OAE4IQX2.js}

@@ -7,6 +7,7 @@ import {
   ChoiceField,
   ChoiceLabel,
   ControlSizeProvider,
+  DEFAULT_PROGRESS_SEGMENTS_LABELS,
   Divider,
   EmptyPage,
   FieldCounter,
@@ -20,8 +21,11 @@ import {
   LayerProvider,
   MenuGroup,
   Portal,
+  ProgressBar,
+  RollingNumber,
   ScrollContainer,
   Slot,
+  SurfaceDepthProvider,
   SwatchChip,
   SwatchContent,
   SwatchFill,
@@ -54,6 +58,8 @@ import {
   palette_default,
   prefersReducedMotion,
   readCssLengthPx,
+  resolveSegments,
+  resolveValue,
   rovingIndex,
   sameColor,
   sheet_default,
@@ -72,14 +78,16 @@ import {
   useLayer,
   useMediaQuery,
   useMergedRefs,
+  useNestedSurfaceDepth,
   useOptionalControlSize,
   usePresence,
   useScrollLock,
+  useStageDepth,
   useStoreSlice,
   useSwatchOptions,
   useSwipeDismiss,
   visuallyHiddenClass
-} from "./chunk-ZEFCDEEQ.js";
+} from "./chunk-6JTZOA5I.js";
 
 // src/layout/app-header/AppHeader.tsx
 import * as React from "react";
@@ -418,7 +426,10 @@ function BadgeRoot({
     endTaken: trailing
   });
   const textOnly = !trailing && !onPress && edges.children.every(isText);
-  const body = /* @__PURE__ */ jsx4(ControlSizeProvider, { value: tier, children: textOnly ? edges.children : wrapText(edges.children) });
+  const body = /* @__PURE__ */ jsx4(ControlSizeProvider, { value: tier, children: typeof children === "number" ? (
+    // A count rolls its digits to the new value (foundation §7 rule 8).
+    /* @__PURE__ */ jsx4(RollingNumber, { children })
+  ) : textOnly ? edges.children : wrapText(edges.children) });
   return /* @__PURE__ */ jsxs3(
     "span",
     {
@@ -1410,6 +1421,7 @@ var SidebarRoot = React11.forwardRef(function SidebarRoot2({
     setMode((prev) => prev === "expanded" ? "compact" : "expanded");
   }, [offCanvas, setMode, setOpen]);
   const navId = React11.useId();
+  const depth = useNestedSurfaceDepth();
   const context = React11.useMemo(
     () => ({ persist, mode, setMode, open, setOpen, toggle, offCanvas, size, navId, labels }),
     [persist, mode, setMode, open, setOpen, toggle, offCanvas, size, navId, labels]
@@ -1420,6 +1432,7 @@ var SidebarRoot = React11.forwardRef(function SidebarRoot2({
       ...rest,
       ref: mergedRootRef,
       className: cx(Sidebar_default.root, className),
+      "data-depth": depth,
       ...toDataAttributes({
         size,
         mode,
@@ -1448,7 +1461,7 @@ var SidebarRoot = React11.forwardRef(function SidebarRoot2({
             className: Sidebar_default.panel,
             "aria-label": labels.navigation,
             inert: offCanvas && !open || !offCanvas && mode === "hidden" || void 0,
-            children: /* @__PURE__ */ jsx9(LayerProvider, { value: offCanvas ? layer : null, children: /* @__PURE__ */ jsx9(AnchorRectProvider, { value: offCanvas ? null : anchorRect, children: /* @__PURE__ */ jsx9(ControlSizeProvider, { value: size, children }) }) })
+            children: /* @__PURE__ */ jsx9(LayerProvider, { value: offCanvas ? layer : null, children: /* @__PURE__ */ jsx9(AnchorRectProvider, { value: offCanvas ? null : anchorRect, children: /* @__PURE__ */ jsx9(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx9(ControlSizeProvider, { value: size, children }) }) }) })
           }
         )
       ]
@@ -2355,7 +2368,17 @@ function AccordionRoot(props) {
     children,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx10(AccordionProvider, { value: contextValue, children: /* @__PURE__ */ jsx10("div", { ...rest, className: cx(Accordion_default.root, className), ...toDataAttributes({ size, layout }), children: /* @__PURE__ */ jsx10(ControlSizeProvider, { value: size, children }) }) });
+  const depth = useNestedSurfaceDepth();
+  return /* @__PURE__ */ jsx10(AccordionProvider, { value: contextValue, children: /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ...rest,
+      className: cx(Accordion_default.root, className),
+      "data-depth": depth,
+      ...toDataAttributes({ size, layout }),
+      children: /* @__PURE__ */ jsx10(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx10(ControlSizeProvider, { value: size, children }) })
+    }
+  ) });
 }
 AccordionRoot.displayName = "Accordion.Root";
 function AccordionItem({
@@ -2493,13 +2516,16 @@ function BannerRoot({
     () => ({ onDismiss, size, dismissLabel }),
     [onDismiss, size, dismissLabel]
   );
+  const nested = useNestedSurfaceDepth();
+  const depth = variant === "outline" ? nested : "tinted";
   return /* @__PURE__ */ jsx11(
     "div",
     {
       ...rest,
       className: cx(Banner_default.root, className),
+      "data-depth": depth,
       ...toDataAttributes({ variant, tone, size, placement }),
-      children: /* @__PURE__ */ jsx11(BannerContext.Provider, { value: context, children: /* @__PURE__ */ jsxs8(ControlSizeProvider, { value: size, children: [
+      children: /* @__PURE__ */ jsx11(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx11(BannerContext.Provider, { value: context, children: /* @__PURE__ */ jsxs8(ControlSizeProvider, { value: size, children: [
         children,
         onDismiss ? /* @__PURE__ */ jsx11("span", { className: Banner_default.close, children: /* @__PURE__ */ jsx11(
           Button.Root,
@@ -2512,7 +2538,7 @@ function BannerRoot({
             children: /* @__PURE__ */ jsx11(Button.Icon, { children: /* @__PURE__ */ jsx11(Icon, { name: "action.close" }) })
           }
         ) }) : null
-      ] }) })
+      ] }) }) })
     }
   );
 }
@@ -2829,13 +2855,22 @@ var Card_default = {
 
 // src/components/card/Card.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-function CardRoot({ variant = "panel", flat = false, className, ...rest }) {
+function CardRoot({
+  variant = "panel",
+  flat = false,
+  className,
+  children,
+  ...rest
+}) {
+  const depth = useNestedSurfaceDepth();
   return /* @__PURE__ */ jsx15(
     "div",
     {
       ...rest,
       className: cx(Card_default.root, className),
-      ...toDataAttributes({ variant, flat: flat || void 0 })
+      "data-depth": depth,
+      ...toDataAttributes({ variant, flat: flat || void 0 }),
+      children: /* @__PURE__ */ jsx15(SurfaceDepthProvider, { value: depth, children })
     }
   );
 }
@@ -3619,6 +3654,7 @@ function ModalDialog({
           ),
           "data-size": size,
           "data-state": state,
+          "data-depth": "floating",
           ...shell.aria,
           ...rest,
           onPointerDown: (event) => {
@@ -3627,7 +3663,7 @@ function ModalDialog({
           },
           children: [
             compact ? /* @__PURE__ */ jsx19("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }) : null,
-            /* @__PURE__ */ jsx19(DialogShellProvider, { value: shell.value, children: /* @__PURE__ */ jsx19(LayerProvider, { value: layer, children: /* @__PURE__ */ jsx19(ControlSizeProvider, { value: "m", children }) }) })
+            /* @__PURE__ */ jsx19(DialogShellProvider, { value: shell.value, children: /* @__PURE__ */ jsx19(LayerProvider, { value: layer, children: /* @__PURE__ */ jsx19(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx19(ControlSizeProvider, { value: "m", children }) }) }) })
           ]
         }
       )
@@ -4129,12 +4165,17 @@ var DataTable_default = {
   selectCell: "DataTable_selectCell",
   toggleCell: "DataTable_toggleCell",
   chevron: "DataTable_chevron",
+  fold: "DataTable_fold",
+  foldItem: "DataTable_foldItem",
+  foldPad: "DataTable_foldPad",
+  "dt-fold-open": "DataTable_dt-fold-open",
   measureBody: "DataTable_measureBody",
   truncate: "DataTable_truncate",
   detailCell: "DataTable_detailCell",
   detailMotion: "DataTable_detailMotion",
   detailRow: "DataTable_detailRow",
   "dt-detail-enter": "DataTable_dt-detail-enter",
+  detailClip: "DataTable_detailClip",
   detailContent: "DataTable_detailContent",
   firstColumnSticky: "DataTable_firstColumnSticky",
   stickyLead: "DataTable_stickyLead",
@@ -4338,19 +4379,29 @@ function flatten(data, options) {
       collect(childrenOf(row), key);
     });
   };
-  const visit = (row, key, depth, parentAnimate) => {
+  const visit = (row, key, depth, parentAnimate, parentFolding) => {
     const children = getRowChildren ? childrenOf(row) : [];
     const childKeys = children.map((child, index) => keyOf(child, index, key));
     const expandable = options.expandEnabled && (options.isRowExpandable?.(row) ?? (children.length > 0 || options.withDetail));
     const isExpanded = expandable && expanded.has(key);
+    const isClosing = expandable && !isExpanded && Boolean(options.closing?.has(key));
     const animate = parentAnimate || depth === 0 && arrived.has(key);
-    result.rows.push({ row, key, depth, childKeys, expandable, expanded: isExpanded, animate });
+    result.rows.push({
+      row,
+      key,
+      depth,
+      childKeys,
+      expandable,
+      expanded: isExpanded,
+      animate,
+      folding: parentFolding
+    });
     if (options.collectKeys) result.keys.push(key);
     const childAnimate = parentAnimate || options.lastExpandedKey === key;
     children.forEach((child, index) => {
       const childKey = childKeys[index];
-      if (isExpanded) {
-        visit(child, childKey, depth + 1, childAnimate);
+      if (isExpanded || isClosing) {
+        visit(child, childKey, depth + 1, childAnimate, parentFolding || isClosing);
         return;
       }
       result.measure.push({ row: child, key: childKey, depth: depth + 1 });
@@ -4363,7 +4414,7 @@ function flatten(data, options) {
   data.forEach((row, index) => {
     const key = keyOf(row, index, null);
     if (index >= options.start && index < options.end) {
-      visit(row, key, 0, false);
+      visit(row, key, 0, false, false);
     } else if (options.collectKeys) {
       result.keys.push(key);
       collect(childrenOf(row), key);
@@ -4412,31 +4463,40 @@ function DataTableRowImpl({
   expandable,
   expanded,
   animate,
+  folding = false,
   detailAnimate,
   selected,
   childControls
 }) {
   const { columns, size, labels, selection, renderExpanded } = shared;
   const rowLabel = shared.getRowLabel?.(row);
-  const detail = usePresence(expanded && Boolean(renderExpanded), { exitDuration: "fast" });
+  const detail = usePresence(expanded && Boolean(renderExpanded), { exitDuration: "base" });
   const detailContent = detail.mounted ? renderExpanded?.(row) : null;
   const hasDetail = detailContent != null && detailContent !== false;
   const controls = [
     hasDetail && expanded ? shared.detailDomId(rowKey) : "",
     expanded ? childControls : ""
   ].filter(Boolean).join(" ");
-  const enter = animate && enterMotion_default.enterBase;
+  const sub = depth > 0;
+  const [unfolding, setUnfolding] = React23.useState(sub && animate);
+  const fold = !sub ? void 0 : folding ? "closed" : unfolding ? "opening" : "open";
+  const enter = animate && !sub && enterMotion_default.enterBase;
   const lead = cx(DataTable_default.cell, enter, shared.stickyFirstColumn && DataTable_default.stickyLead);
+  const folded = (node) => sub ? /* @__PURE__ */ jsx24("div", { className: DataTable_default.fold, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.foldItem, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.foldPad, children: node }) }) }) : node;
   return /* @__PURE__ */ jsxs16(Fragment4, { children: [
     /* @__PURE__ */ jsxs16(
       "tr",
       {
         id: shared.rowDomId(rowKey),
         className: DataTable_default.row,
-        style: depth > 0 ? { "--dt-depth": depth } : void 0,
+        style: sub ? { "--dt-depth": depth } : void 0,
         "data-stripe": shared.striped && index % 2 === 1 ? "alt" : void 0,
         "data-clickable": shared.onRowClick ? "true" : void 0,
-        "data-depth": depth > 0 ? depth : void 0,
+        "data-level": sub ? depth : void 0,
+        "data-fold": fold,
+        onAnimationEnd: unfolding ? (event) => {
+          if (event.animationName.includes("dt-fold-open")) setUnfolding(false);
+        } : void 0,
         "data-expanded": expanded ? "true" : void 0,
         "data-animate": animate ? "true" : void 0,
         "aria-selected": shared.selectable ? selected : void 0,
@@ -4451,35 +4511,39 @@ function DataTableRowImpl({
                 "data-select-index": index,
                 onPointerDown: (event) => selection.onPointerDown(index, event),
                 onClick: (event) => selection.onClick(index, event),
-                children: /* @__PURE__ */ jsx24(
-                  Checkbox.Root,
-                  {
-                    size,
-                    checked: selected,
-                    "aria-label": formatLabel(labels.selectRow, { label: rowLabel })
-                  }
+                children: folded(
+                  /* @__PURE__ */ jsx24(
+                    Checkbox.Root,
+                    {
+                      size,
+                      checked: selected,
+                      "aria-label": formatLabel(labels.selectRow, { label: rowLabel })
+                    }
+                  )
                 )
               }
             )
           ) : null,
-          shared.expandEnabled ? /* @__PURE__ */ jsx24("td", { className: cx(lead, DataTable_default.toggleCell), children: expandable ? /* @__PURE__ */ jsx24(
-            Button.Root,
-            {
-              variant: "ghost",
-              tone: "neutral",
-              size: TOGGLE_SIZE[size],
-              "aria-expanded": expanded,
-              "aria-controls": controls || void 0,
-              "aria-label": formatLabel(expanded ? labels.collapse : labels.expand, {
-                label: rowLabel
-              }),
-              onClick: (event) => {
-                event.stopPropagation();
-                shared.toggleExpanded(rowKey);
-              },
-              children: /* @__PURE__ */ jsx24(Button.Icon, { children: /* @__PURE__ */ jsx24(Icon, { name: "nav.chevronRight", className: DataTable_default.chevron }) })
-            }
-          ) : null }) : null,
+          shared.expandEnabled ? /* @__PURE__ */ jsx24("td", { className: cx(lead, DataTable_default.toggleCell), children: folded(
+            expandable ? /* @__PURE__ */ jsx24(
+              Button.Root,
+              {
+                variant: "ghost",
+                tone: "neutral",
+                size: TOGGLE_SIZE[size],
+                "aria-expanded": expanded,
+                "aria-controls": controls || void 0,
+                "aria-label": formatLabel(expanded ? labels.collapse : labels.expand, {
+                  label: rowLabel
+                }),
+                onClick: (event) => {
+                  event.stopPropagation();
+                  shared.toggleExpanded(rowKey);
+                },
+                children: /* @__PURE__ */ jsx24(Button.Icon, { children: /* @__PURE__ */ jsx24(Icon, { name: "nav.chevronRight", className: DataTable_default.chevron }) })
+              }
+            ) : null
+          ) }) : null,
           columns.map((column, columnIndex) => {
             const isFirstColumn = columnIndex === 0;
             return /* @__PURE__ */ jsx24(
@@ -4495,7 +4559,7 @@ function DataTableRowImpl({
                 "data-numeric": column.numeric ? "true" : void 0,
                 "data-first-column": isFirstColumn ? "true" : void 0,
                 "data-column-id": column.id,
-                children: renderCell(row, column, true)
+                children: folded(renderCell(row, column, true))
               },
               column.id
             );
@@ -4511,7 +4575,7 @@ function DataTableRowImpl({
         "data-state": detail.state,
         "data-animate": detailAnimate || animate ? "true" : void 0,
         inert: !expanded,
-        children: /* @__PURE__ */ jsx24("td", { colSpan: shared.totalColumns, className: DataTable_default.detailCell, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.detailMotion, onTransitionEnd: detail.onExitEnd, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.detailContent, children: detailContent }) }) })
+        children: /* @__PURE__ */ jsx24("td", { colSpan: shared.totalColumns, className: DataTable_default.detailCell, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.detailMotion, onTransitionEnd: detail.onExitEnd, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.detailClip, children: /* @__PURE__ */ jsx24("div", { className: DataTable_default.detailContent, children: detailContent }) }) }) })
       }
     ) : null
   ] });
@@ -4528,7 +4592,7 @@ function MeasureBody({
     {
       className: DataTable_default.row,
       style: { "--dt-depth": depth },
-      "data-depth": depth,
+      "data-level": depth,
       children: [
         selectable ? /* @__PURE__ */ jsx24("td", { className: cx(DataTable_default.cell, DataTable_default.selectCell) }) : null,
         expandEnabled ? /* @__PURE__ */ jsx24("td", { className: cx(DataTable_default.cell, DataTable_default.toggleCell) }) : null,
@@ -4981,6 +5045,7 @@ var DEFAULT_LABELS3 = {
 };
 var EMPTY_KEYS = [];
 var SKELETON_ROWS = 5;
+var NO_KEYS = /* @__PURE__ */ new Set();
 var INFINITE_SCROLL_HEIGHT = 360;
 var domIdPart = (key) => String(key).replace(/[^A-Za-z0-9_-]/g, "_");
 function DataTable({
@@ -5041,6 +5106,7 @@ function DataTable({
   const tableRef = React28.useRef(null);
   const rootRef = React28.useRef(null);
   const mergedRootRef = useMergedRefs(rootRef, ref);
+  const depth = useNestedSurfaceDepth();
   const columns = React28.useMemo(() => {
     if (!hiddenColumns?.length) return allColumns;
     const hidden = new Set(hiddenColumns);
@@ -5109,11 +5175,29 @@ function DataTable({
   const [lastExpandedKey, setLastExpandedKey] = React28.useState(null);
   const expansion = React28.useRef({ expandedKeys, setExpandedKeys });
   expansion.current = { expandedKeys, setExpandedKeys };
+  const [closingKeys, setClosingKeys] = React28.useState(NO_KEYS);
   const toggleExpanded = React28.useCallback((key) => {
     const { expandedKeys: keys, setExpandedKeys: setKeys } = expansion.current;
     const isOpen = keys.includes(key);
     setLastExpandedKey(isOpen ? null : key);
     setKeys(isOpen ? keys.filter((k) => k !== key) : [...keys, key]);
+    setClosingKeys((prev) => {
+      const next = new Set(prev);
+      if (isOpen) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+    if (isOpen) {
+      window.setTimeout(
+        () => setClosingKeys((prev) => {
+          if (!prev.has(key)) return prev;
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        }),
+        exitTimeoutMs("base")
+      );
+    }
   }, []);
   const flat = React28.useMemo(
     () => flatten(sortedRows, {
@@ -5127,6 +5211,7 @@ function DataTable({
       withDetail: Boolean(renderExpanded),
       isRowExpandable,
       expanded: expandedSet,
+      closing: closingKeys,
       arrived: rowArrival.added,
       lastExpandedKey,
       collectKeys: selectable
@@ -5143,6 +5228,7 @@ function DataTable({
       renderExpanded,
       isRowExpandable,
       expandedSet,
+      closingKeys,
       rowArrival.added,
       lastExpandedKey,
       selectable
@@ -5220,12 +5306,13 @@ function DataTable({
   );
   const showRange = bodyState === "rows" && (infinite || paged && totalPages > 1);
   const showInfiniteStatus = !hasError && infinite && (infiniteRows.hasInternalMore || loadingMore || infiniteRows.canRequestMore);
-  return /* @__PURE__ */ jsx28(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx28(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx28(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs19(
     "div",
     {
       ...rest,
       ref: mergedRootRef,
       className: cx(DataTable_default.root, className),
+      "data-depth": depth,
       ...toDataAttributes({
         size,
         "row-dividers": rowDividers ? void 0 : "false",
@@ -5301,6 +5388,7 @@ function DataTable({
                             expandable: item.expandable,
                             expanded: item.expanded,
                             animate: item.animate,
+                            folding: item.folding,
                             detailAnimate: lastExpandedKey === item.key,
                             selected: selectable && selection.selectedSet.has(item.key),
                             childControls: item.childKeys.map(rowDomId).join(" ")
@@ -5318,7 +5406,10 @@ function DataTable({
                             error,
                             empty,
                             emptyLabel: labels.empty,
-                            skeletonRows: Math.max(1, loadingRows ?? Math.min(safePageSize, SKELETON_ROWS))
+                            skeletonRows: Math.max(
+                              1,
+                              loadingRows ?? Math.min(safePageSize, SKELETON_ROWS)
+                            )
                           }
                         )
                       },
@@ -5336,7 +5427,14 @@ function DataTable({
                   ]
                 }
               ),
-              infinite ? /* @__PURE__ */ jsx28("div", { ref: infiniteRows.sentinelRef, className: DataTable_default.sentinel, "aria-hidden": "true" }) : null
+              infinite ? /* @__PURE__ */ jsx28(
+                "div",
+                {
+                  ref: infiniteRows.sentinelRef,
+                  className: DataTable_default.sentinel,
+                  "aria-hidden": "true"
+                }
+              ) : null
             ]
           }
         ) }),
@@ -5357,7 +5455,7 @@ function DataTable({
         )
       ]
     }
-  ) });
+  ) }) });
 }
 
 // src/components/datepicker/Datepicker.tsx
@@ -5795,6 +5893,7 @@ function PanelView(props) {
   const [panelNode, setPanelNode] = React30.useState(null);
   const panelRef = useMergedRefs(setPanelNode, domRef);
   const parentWidth = useAvailableWidth(embedded ? panelNode : null);
+  const nestedDepth = useNestedSurfaceDepth();
   const viewportWidth = useViewportWidth(!embedded);
   useContainScroll(embedded ? null : panelNode);
   const hasPresets = Boolean(presets) && isRange;
@@ -5957,6 +6056,7 @@ function PanelView(props) {
       className: cx(Datepicker_default.panel, className),
       "data-size": size,
       "data-embedded": embedded ? "true" : void 0,
+      "data-depth": embedded ? nestedDepth : void 0,
       "data-compact": compact ? "true" : void 0,
       "data-layout": layout,
       children: [
@@ -6356,7 +6456,9 @@ import * as React31 from "react";
 var DigitInput_default = {
   frame: "DigitInput_frame",
   root: "DigitInput_root",
-  cell: "DigitInput_cell"
+  cell: "DigitInput_cell",
+  ring: "DigitInput_ring",
+  primeDigitIn: "DigitInput_primeDigitIn"
 };
 
 // src/components/digit-input/DigitInput.tsx
@@ -6381,6 +6483,7 @@ function DigitInput({
   onComplete,
   disabled,
   invalid,
+  success = false,
   focusRing = true,
   label,
   required,
@@ -6416,6 +6519,32 @@ function DigitInput({
     pendingFocusRef.current = null;
     inputRefs.current[index]?.focus();
   });
+  const [focusIndex, setFocusIndex] = React31.useState(null);
+  const ringRef = React31.useRef(null);
+  const ringShown = React31.useRef(false);
+  React31.useLayoutEffect(() => {
+    const ring = ringRef.current;
+    const cell = focusIndex === null ? null : inputRefs.current[focusIndex];
+    if (!ring) return;
+    if (!cell) {
+      ringShown.current = false;
+      return;
+    }
+    const place = () => {
+      ring.style.width = `${cell.offsetWidth}px`;
+      ring.style.height = `${cell.offsetHeight}px`;
+      ring.style.transform = `translate(${cell.offsetLeft}px, ${cell.offsetTop}px)`;
+    };
+    if (!ringShown.current) {
+      ring.style.transition = "none";
+      place();
+      ring.getBoundingClientRect();
+      ring.style.transition = "";
+      ringShown.current = true;
+    } else {
+      place();
+    }
+  });
   const entryIndex = Math.min(value.length, length - 1);
   const handleChangeAt = (index, nextChar) => {
     const at = Math.min(index, entryIndex);
@@ -6462,10 +6591,27 @@ function DigitInput({
             size,
             "full-width": fullWidth || void 0,
             invalid: ids.invalid || void 0,
+            success: success && !ids.invalid || void 0,
             disabled: disabled || void 0,
             "focus-ring": focusRing ? void 0 : false
           }),
+          onFocus: (event) => {
+            const index = inputRefs.current.indexOf(event.target);
+            if (index >= 0) setFocusIndex(index);
+          },
+          onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) setFocusIndex(null);
+          },
           children: [
+            /* @__PURE__ */ jsx31(
+              "span",
+              {
+                ref: ringRef,
+                className: DigitInput_default.ring,
+                "aria-hidden": "true",
+                "data-visible": focusIndex !== null || void 0
+              }
+            ),
             name ? /* @__PURE__ */ jsx31("input", { type: "hidden", name, value }) : null,
             cells.map((cell, index) => /* @__PURE__ */ jsx31(
               "input",
@@ -6483,6 +6629,8 @@ function DigitInput({
                 disabled,
                 required,
                 className: cx(fieldSurfaceClass, DigitInput_default.cell),
+                "data-focus-ring": "false",
+                style: { "--digit-i": index },
                 "data-size": size,
                 "data-filled": cell ? "true" : void 0,
                 "data-group-start": groupSize && index > 0 && index % groupSize === 0 ? "true" : void 0,
@@ -6700,7 +6848,7 @@ var POINTER_ACTIVATION = {
 };
 var TOUCH_ACTIVATION = {
   distance: Number.POSITIVE_INFINITY,
-  delay: 180,
+  delay: 280,
   tolerance: 10
 };
 function pointerKindOf(pointerType) {
@@ -7146,11 +7294,27 @@ function cloneFor(preview) {
   clone.classList.add(Dnd_default.lift);
   return clone;
 }
+function holdHoverUntilLeave(node) {
+  node.setAttribute("data-dnd-hover", "");
+  const release = () => {
+    node.removeAttribute("data-dnd-hover");
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerdown", release, true);
+  };
+  const onMove = (event) => {
+    const r = node.getBoundingClientRect();
+    const inside = event.clientX >= r.left && event.clientX <= r.right && event.clientY >= r.top && event.clientY <= r.bottom;
+    if (!inside) release();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerdown", release, true);
+}
 function DragOverlay({ controller }) {
   const hostRef = React35.useRef(null);
   const grabRef = React35.useRef({ x: 0, y: 0 });
   const pointRef = React35.useRef({ x: 0, y: 0 });
   const frameRef = React35.useRef(null);
+  const pointerKindRef = React35.useRef("mouse");
   const [mounted, setMounted] = React35.useState(false);
   const stopLandingRef = React35.useRef(null);
   const endTokenRef = React35.useRef(0);
@@ -7210,12 +7374,20 @@ function DragOverlay({ controller }) {
         const rect = layoutRect(destination);
         const to = translate({ x: rect.left, y: rect.top }, { x: 0, y: 0 });
         destination.setAttribute("data-dnd-landing", "");
+        const box = destination.getBoundingClientRect();
+        const point = pointRef.current;
+        const pointerOver = pointerKindRef.current === "mouse" && point.x >= box.left && point.x <= box.right && point.y >= box.top && point.y <= box.bottom;
+        const transition = destination.style.transition;
+        destination.style.transition = "none";
+        if (pointerOver) holdHoverUntilLeave(destination);
+        const landed = getComputedStyle(destination).boxShadow;
+        destination.style.transition = transition;
         const flight = host.animate([{ transform: from }, { transform: to }], timing);
         const drawn = getComputedStyle(lifted);
         const setDown = lifted.animate(
           [
             { transform: drawn.transform, boxShadow: drawn.boxShadow },
-            { transform: "none", boxShadow: "none" }
+            { transform: "none", boxShadow: landed }
           ],
           timing
         );
@@ -7243,6 +7415,7 @@ function DragOverlay({ controller }) {
       if (event.type === "start") {
         grabRef.current = event.preview.grab;
         pointRef.current = event.preview.point;
+        pointerKindRef.current = event.preview.pointerKind;
         settle(host);
         host.replaceChildren(cloneFor(event.preview));
         host.style.transform = translate(event.preview.point, event.preview.grab);
@@ -8002,6 +8175,7 @@ function DrawerDialog({
           "data-side": side,
           "data-size": size,
           "data-state": state,
+          "data-depth": "floating",
           onAnimationEnd: onExitEnd,
           ...shell.aria,
           ...rest,
@@ -8011,7 +8185,7 @@ function DrawerDialog({
           },
           children: [
             bottom ? /* @__PURE__ */ jsx34("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }) : null,
-            /* @__PURE__ */ jsx34(DialogShellProvider, { value: shell.value, children: /* @__PURE__ */ jsx34(LayerProvider, { value: layer, children }) })
+            /* @__PURE__ */ jsx34(DialogShellProvider, { value: shell.value, children: /* @__PURE__ */ jsx34(LayerProvider, { value: layer, children: /* @__PURE__ */ jsx34(SurfaceDepthProvider, { value: "floating", children }) }) })
           ]
         }
       )
@@ -8700,13 +8874,15 @@ function ExampleFrame({
   });
   const rootRef = React43.useRef(null);
   const mergedRef = useMergedRefs(rootRef, ref);
+  const depth = useNestedSurfaceDepth();
+  const stageDepth = useStageDepth();
   const previousScheme = React43.useRef(colorScheme);
   React43.useLayoutEffect(() => {
     if (previousScheme.current === colorScheme) return;
     previousScheme.current = colorScheme;
     if (rootRef.current) suspendTransitions(rootRef.current);
   }, [colorScheme]);
-  return /* @__PURE__ */ jsxs27("div", { ...rest, ref: mergedRef, className: cx(ExampleFrame_default.root, className), children: [
+  return /* @__PURE__ */ jsxs27("div", { ...rest, ref: mergedRef, className: cx(ExampleFrame_default.root, className), "data-depth": depth, children: [
     /* @__PURE__ */ jsx37(
       ExampleFrameToolbar,
       {
@@ -8727,7 +8903,8 @@ function ExampleFrame({
         className: ExampleFrame_default.previewInner,
         "data-preview-layout": previewLayout,
         "data-theme": colorScheme,
-        children
+        "data-depth": stageDepth,
+        children: /* @__PURE__ */ jsx37(SurfaceDepthProvider, { value: stageDepth, children })
       }
     ) }) }) : (
       // Plain CodeBlock is not focusable itself; the scrolling pane takes keyboard focus instead.
@@ -8845,164 +9022,8 @@ function ExampleFrameToolbar({
 ExampleFrameToolbar.displayName = "ExampleFrame.Toolbar";
 
 // src/components/file-upload/FileUpload.tsx
-import * as React45 from "react";
-
-// src/components/progress-bar/ProgressBar.tsx
 import * as React44 from "react";
 
-// src/internal/progressSegments.ts
-function resolveValue(value, max) {
-  const top = max !== void 0 && max > 0 ? max : 100;
-  const clamped = Math.min(top, Math.max(Number.isFinite(value) ? value : 0, 0));
-  return {
-    value: clamped,
-    max: top,
-    ratio: clamped / top,
-    percent: Math.round(clamped / top * 100)
-  };
-}
-var DEFAULT_PROGRESS_SEGMENTS_LABELS = {
-  empty: "\u041D\u0435\u0442 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u043E\u0432",
-  allEmpty: "\u0412\u0441\u0435 \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u044B \u043F\u0443\u0441\u0442\u044B"
-};
-function nonNegative(n) {
-  return Number.isFinite(n) && n > 0 ? n : 0;
-}
-function resolveSegments(input, max, labels) {
-  const segments = input.map((s) => ({ ...s, value: nonNegative(s.value) }));
-  const total = segments.reduce((acc, s) => acc + s.value, 0);
-  const scale = max !== void 0 && max > 0 ? Math.max(max, total) : total;
-  let text;
-  if (segments.length === 0) text = labels.empty;
-  else if (scale <= 0) text = labels.allEmpty;
-  else
-    text = segments.map((s) => {
-      const pct = Math.round(s.value / scale * 100);
-      return s.label ? `${s.label}: ${pct}%` : `${pct}%`;
-    }).join(", ");
-  return {
-    segments,
-    total,
-    scale,
-    rest: scale - total,
-    percent: scale > 0 ? Math.round(total / scale * 100) : 0,
-    text
-  };
-}
-
-// src/components/progress-bar/ProgressBar.module.css
-var ProgressBar_default = {
-  root: "ProgressBar_root",
-  segment: "ProgressBar_segment",
-  header: "ProgressBar_header",
-  label: "ProgressBar_label",
-  value: "ProgressBar_value",
-  native: "ProgressBar_native",
-  bar: "ProgressBar_bar",
-  fill: "ProgressBar_fill",
-  segments: "ProgressBar_segments",
-  rest: "ProgressBar_rest"
-};
-
-// src/components/progress-bar/ProgressBar.tsx
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
-function ProgressBar(props) {
-  const {
-    label,
-    size = "m",
-    showValue = false,
-    className,
-    value: valueProp,
-    max: maxProp,
-    tone: toneProp,
-    segments: segmentsProp,
-    segmentGap = "none",
-    labels,
-    "aria-label": ariaLabel,
-    ...rest
-  } = props;
-  const labelId = React44.useId();
-  const descriptionId = React44.useId();
-  let percent;
-  let tone;
-  let bar;
-  if (segmentsProp) {
-    const resolved = resolveSegments(segmentsProp, maxProp, {
-      ...DEFAULT_PROGRESS_SEGMENTS_LABELS,
-      ...labels
-    });
-    const { segments, total, rest: free, text } = resolved;
-    percent = resolved.percent;
-    const named = Boolean(label || ariaLabel);
-    const a11y = named ? {
-      "aria-labelledby": label ? labelId : void 0,
-      "aria-label": label ? void 0 : ariaLabel,
-      "aria-describedby": descriptionId
-    } : { "aria-label": text };
-    bar = /* @__PURE__ */ jsxs28(Fragment7, { children: [
-      named ? /* @__PURE__ */ jsx38(VisuallyHidden, { id: descriptionId, children: text }) : null,
-      /* @__PURE__ */ jsxs28(
-        "div",
-        {
-          className: ProgressBar_default.bar,
-          role: "group",
-          ...a11y,
-          ...toDataAttributes({ "segment-gap": segmentGap }),
-          children: [
-            total > 0 ? /* @__PURE__ */ jsx38("span", { className: ProgressBar_default.segments, style: { flexGrow: total }, children: segments.map((seg, i) => /* @__PURE__ */ jsx38(
-              "span",
-              {
-                className: ProgressBar_default.segment,
-                style: { flexGrow: seg.value },
-                title: seg.label,
-                ...toDataAttributes({ tone: seg.tone ?? "accent" })
-              },
-              i
-            )) }) : null,
-            free > 0 || total === 0 ? /* @__PURE__ */ jsx38("span", { className: ProgressBar_default.rest, style: { flexGrow: free > 0 ? free : 1 } }) : null
-          ]
-        }
-      )
-    ] });
-  } else {
-    const resolved = resolveValue(valueProp ?? 0, maxProp);
-    const { value, max } = resolved;
-    percent = resolved.percent;
-    tone = toneProp ?? "accent";
-    bar = /* @__PURE__ */ jsxs28(Fragment7, { children: [
-      /* @__PURE__ */ jsx38(
-        "progress",
-        {
-          value,
-          max,
-          "aria-labelledby": label ? labelId : void 0,
-          "aria-label": label ? void 0 : ariaLabel,
-          className: ProgressBar_default.native
-        }
-      ),
-      /* @__PURE__ */ jsx38(
-        "span",
-        {
-          className: ProgressBar_default.bar,
-          "aria-hidden": "true",
-          style: { "--pb-ratio": resolved.ratio },
-          children: /* @__PURE__ */ jsx38("span", { className: ProgressBar_default.fill })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs28("div", { className: cx(ProgressBar_default.root, className), ...rest, ...toDataAttributes({ size, tone }), children: [
-    label || showValue ? /* @__PURE__ */ jsxs28("div", { className: ProgressBar_default.header, children: [
-      label ? /* @__PURE__ */ jsx38("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
-      showValue ? /* @__PURE__ */ jsxs28("span", { className: ProgressBar_default.value, "aria-hidden": "true", children: [
-        percent,
-        "%"
-      ] }) : null
-    ] }) : null,
-    bar
-  ] });
-}
-
 // src/components/file-upload/FileUpload.module.css
 var FileUpload_default = {
   root: "FileUpload_root",
@@ -9020,7 +9041,7 @@ var FileUpload_default = {
 };
 
 // src/components/file-upload/FileUpload.tsx
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var FILE_UPLOAD_LABELS = {
   title: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0435\u0433\u043E \u0441\u044E\u0434\u0430",
   description: "JPEG, PNG, PDF, MP4 \u0434\u043E 50 \u041C\u0411",
@@ -9028,15 +9049,15 @@ var FILE_UPLOAD_LABELS = {
   optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E"
 };
 function FileUploadBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.body, className), ...rest });
+  return /* @__PURE__ */ jsx38("div", { className: cx(FileUpload_default.body, className), ...rest });
 }
 FileUploadBody.displayName = "FileUpload.Body";
 function FileUploadIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("span", { className: cx(FileUpload_default.icon, className), "aria-hidden": true, ...rest });
+  return /* @__PURE__ */ jsx38("span", { className: cx(FileUpload_default.icon, className), "aria-hidden": true, ...rest });
 }
 FileUploadIcon.displayName = "FileUpload.Icon";
 function FileUploadTitle({ className, tone = "default", ...rest }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     "p",
     {
       className: cx(FileUpload_default.title, className),
@@ -9047,7 +9068,7 @@ function FileUploadTitle({ className, tone = "default", ...rest }) {
 }
 FileUploadTitle.displayName = "FileUpload.Title";
 function FileUploadDescription(props) {
-  return /* @__PURE__ */ jsx39(Hint.Root, { size: useControlSize(void 0), ...props });
+  return /* @__PURE__ */ jsx38(Hint.Root, { size: useControlSize(void 0), ...props });
 }
 FileUploadDescription.displayName = "FileUpload.Description";
 function FileUploadItem({
@@ -9057,7 +9078,7 @@ function FileUploadItem({
   ...rest
 }) {
   const size = useControlSize(sizeProp);
-  return /* @__PURE__ */ jsx39(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx38(
     "div",
     {
       className: cx(FileUpload_default.item, className),
@@ -9073,19 +9094,19 @@ function FileUploadFormatBadge({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx39(Badge.Root, { ...rest, color, className: cx(FileUpload_default.formatBadge, className), "aria-hidden": true, children: format4.trim().slice(0, 8).toUpperCase() });
+  return /* @__PURE__ */ jsx38(Badge.Root, { ...rest, color, className: cx(FileUpload_default.formatBadge, className), "aria-hidden": true, children: format4.trim().slice(0, 8).toUpperCase() });
 }
 FileUploadFormatBadge.displayName = "FileUpload.FormatBadge";
 function FileUploadItemName({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemName, className), ...rest });
+  return /* @__PURE__ */ jsx38("div", { className: cx(FileUpload_default.itemName, className), ...rest });
 }
 FileUploadItemName.displayName = "FileUpload.ItemName";
 function FileUploadItemDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemDescription, className), ...rest });
+  return /* @__PURE__ */ jsx38("div", { className: cx(FileUpload_default.itemDescription, className), ...rest });
 }
 FileUploadItemDescription.displayName = "FileUpload.ItemDescription";
 function FileUploadItemActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx39("div", { className: cx(FileUpload_default.itemActions, className), ...rest });
+  return /* @__PURE__ */ jsx38("div", { className: cx(FileUpload_default.itemActions, className), ...rest });
 }
 FileUploadItemActions.displayName = "FileUpload.ItemActions";
 function FileUploadItemProgress({
@@ -9095,7 +9116,7 @@ function FileUploadItemProgress({
   "aria-label": ariaLabel = "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0444\u0430\u0439\u043B\u0430",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx39("div", { ...rest, className: cx(FileUpload_default.itemProgress, className), children: /* @__PURE__ */ jsx39(ProgressBar, { value, max, "aria-label": ariaLabel }) });
+  return /* @__PURE__ */ jsx38("div", { ...rest, className: cx(FileUpload_default.itemProgress, className), children: /* @__PURE__ */ jsx38(ProgressBar, { value, max, "aria-label": ariaLabel }) });
 }
 FileUploadItemProgress.displayName = "FileUpload.ItemProgress";
 function FileUploadRoot({
@@ -9122,8 +9143,8 @@ function FileUploadRoot({
   const size = useControlSize(sizeProp);
   const labels = { ...FILE_UPLOAD_LABELS, ...labelsProp };
   const ids = useFieldFrame(id, { label, hint, error, invalid });
-  const [dragOver, setDragOver] = React45.useState(false);
-  const dragDepth = React45.useRef(0);
+  const [dragOver, setDragOver] = React44.useState(false);
+  const dragDepth = React44.useRef(0);
   const onDragEnter = (event) => {
     event.preventDefault();
     dragDepth.current += 1;
@@ -9139,7 +9160,7 @@ function FileUploadRoot({
     setDragOver(false);
     if (!disabled) onFilesChange?.(Array.from(event.dataTransfer.files));
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx38(
     FieldFrame,
     {
       ...rest,
@@ -9152,7 +9173,7 @@ function FileUploadRoot({
       error,
       disabled,
       optionalLabel: labels.optional,
-      children: /* @__PURE__ */ jsxs29(
+      children: /* @__PURE__ */ jsxs28(
         "label",
         {
           className: FileUpload_default.root,
@@ -9168,7 +9189,7 @@ function FileUploadRoot({
           onDragLeave,
           onDrop,
           children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx38(
               "input",
               {
                 ref: inputRef,
@@ -9190,13 +9211,13 @@ function FileUploadRoot({
                 }
               }
             ),
-            /* @__PURE__ */ jsx39(ControlSizeProvider, { value: size, children: children ?? /* @__PURE__ */ jsxs29(FileUploadBody, { children: [
-              /* @__PURE__ */ jsx39(FileUploadIcon, { children: /* @__PURE__ */ jsx39(Icon, { name: "action.upload", size, tone: "secondary" }) }),
-              /* @__PURE__ */ jsxs29("div", { className: FileUpload_default.copy, children: [
-                /* @__PURE__ */ jsx39(FileUploadTitle, { children: labels.title }),
-                labels.description ? /* @__PURE__ */ jsx39(FileUploadDescription, { children: labels.description }) : null
+            /* @__PURE__ */ jsx38(ControlSizeProvider, { value: size, children: children ?? /* @__PURE__ */ jsxs28(FileUploadBody, { children: [
+              /* @__PURE__ */ jsx38(FileUploadIcon, { children: /* @__PURE__ */ jsx38(Icon, { name: "action.upload", size, tone: "secondary" }) }),
+              /* @__PURE__ */ jsxs28("div", { className: FileUpload_default.copy, children: [
+                /* @__PURE__ */ jsx38(FileUploadTitle, { children: labels.title }),
+                labels.description ? /* @__PURE__ */ jsx38(FileUploadDescription, { children: labels.description }) : null
               ] }),
-              /* @__PURE__ */ jsx39(Button.Root, { asChild: true, variant: "soft", tone: "neutral", size, disabled, children: /* @__PURE__ */ jsx39("span", { children: labels.browse }) })
+              /* @__PURE__ */ jsx38(Button.Root, { asChild: true, variant: "soft", tone: "neutral", size, disabled, children: /* @__PURE__ */ jsx38("span", { children: labels.browse }) })
             ] }) })
           ]
         }
@@ -9220,7 +9241,7 @@ var FileUpload = {
 };
 
 // src/components/kanban/Kanban.tsx
-import * as React46 from "react";
+import * as React45 from "react";
 
 // src/components/kanban/Kanban.module.css
 var Kanban_default = {
@@ -9246,7 +9267,7 @@ var Kanban_default = {
 };
 
 // src/components/kanban/Kanban.tsx
-import { Fragment as Fragment8, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var defaultKanbanLabels = {
   count: "\u041A\u0430\u0440\u0442\u043E\u0447\u0435\u043A: {count}",
   countLimit: "\u041A\u0430\u0440\u0442\u043E\u0447\u0435\u043A: {count} \u0438\u0437 {limit}",
@@ -9256,12 +9277,12 @@ var defaultKanbanLabels = {
 };
 var SKELETON_CARDS = [3, 2, 1];
 var ITEM_SHORTCUTS = "Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight";
-var BoardContext = React46.createContext(null);
-var ItemIdContext = React46.createContext(null);
+var BoardContext = React45.createContext(null);
+var ItemIdContext = React45.createContext(null);
 function KanbanRoot(props) {
-  const outer = React46.useContext(DragControllerContext);
-  const board = /* @__PURE__ */ jsx40(KanbanBoard, { ...props });
-  return outer ? board : /* @__PURE__ */ jsx40(Dnd.Root, { children: board });
+  const outer = React45.useContext(DragControllerContext);
+  const board = /* @__PURE__ */ jsx39(KanbanBoard, { ...props });
+  return outer ? board : /* @__PURE__ */ jsx39(Dnd.Root, { children: board });
 }
 KanbanRoot.displayName = "Kanban.Root";
 var EMPTY_VALUE = {};
@@ -9285,15 +9306,15 @@ function KanbanBoard({
 }) {
   const labels = { ...defaultKanbanLabels, ...labelsProp };
   const controller = useDragController();
-  const kind = `kanban-${React46.useId()}`;
-  const rootRef = React46.useRef(null);
+  const kind = `kanban-${React45.useId()}`;
+  const rootRef = React45.useRef(null);
   const setRootRef = useMergedRefs(rootRef, ref);
-  const pendingFocus = React46.useRef(null);
+  const pendingFocus = React45.useRef(null);
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue: defaultValue ?? EMPTY_VALUE
   });
-  const byId = React46.useMemo(
+  const byId = React45.useMemo(
     () => new Map(items.map((item) => [getId(item), item])),
     [items, getId]
   );
@@ -9351,7 +9372,7 @@ function KanbanBoard({
       })
     );
   };
-  React46.useLayoutEffect(() => {
+  React45.useLayoutEffect(() => {
     const id = pendingFocus.current;
     if (id === null) return;
     pendingFocus.current = null;
@@ -9361,7 +9382,7 @@ function KanbanBoard({
     card?.focus({ focusVisible: true });
   });
   const context = { moveAcross, disabled: disabled || loading };
-  return /* @__PURE__ */ jsx40(BoardContext, { value: context, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx39(BoardContext, { value: context, children: /* @__PURE__ */ jsx39(
     "div",
     {
       ref: setRootRef,
@@ -9370,7 +9391,7 @@ function KanbanBoard({
       className: cx(Kanban_default.root, className),
       "data-loading": loading || void 0,
       "data-disabled": disabled || void 0,
-      children: /* @__PURE__ */ jsx40(ScrollContainer, { axis: "horizontal", className: Kanban_default.scroller, "data-full-width": "true", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx39(ScrollContainer, { axis: "horizontal", className: Kanban_default.scroller, "data-full-width": "true", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx39(
         KanbanColumnView,
         {
           column,
@@ -9412,30 +9433,30 @@ function KanbanColumnView({
   disabled,
   labels
 }) {
-  const headingId = React46.useId();
+  const headingId = React45.useId();
   const count = cards.length;
   const full = column.limit !== void 0 && count >= column.limit;
   const countText = column.limit === void 0 ? formatLabel(labels.count, { count }) : formatLabel(labels.countLimit, { count, limit: column.limit });
-  return /* @__PURE__ */ jsxs30("div", { className: Kanban_default.column, "data-kanban-column": column.id, "data-full": full || void 0, children: [
-    /* @__PURE__ */ jsx40(ControlSizeProvider, { value: "s", children: /* @__PURE__ */ jsxs30("div", { className: Kanban_default.header, children: [
-      /* @__PURE__ */ jsx40("h3", { id: headingId, className: Kanban_default.title, children: column.title }),
-      loading ? null : /* @__PURE__ */ jsxs30(Fragment8, { children: [
-        /* @__PURE__ */ jsx40(Badge.Root, { color: full ? "orange" : "gray", "aria-hidden": "true", children: column.limit === void 0 ? count : `${count} / ${column.limit}` }),
-        /* @__PURE__ */ jsx40(VisuallyHidden, { children: countText })
+  return /* @__PURE__ */ jsxs29("div", { className: Kanban_default.column, "data-kanban-column": column.id, "data-full": full || void 0, children: [
+    /* @__PURE__ */ jsx39(ControlSizeProvider, { value: "s", children: /* @__PURE__ */ jsxs29("div", { className: Kanban_default.header, children: [
+      /* @__PURE__ */ jsx39("h3", { id: headingId, className: Kanban_default.title, children: column.title }),
+      loading ? null : /* @__PURE__ */ jsxs29(Fragment7, { children: [
+        /* @__PURE__ */ jsx39(Badge.Root, { color: full ? "orange" : "gray", "aria-hidden": "true", children: column.limit === void 0 ? count : `${count} / ${column.limit}` }),
+        /* @__PURE__ */ jsx39(VisuallyHidden, { children: countText })
       ] }),
-      actions ? /* @__PURE__ */ jsx40("div", { className: Kanban_default.actions, children: actions }) : null
+      actions ? /* @__PURE__ */ jsx39("div", { className: Kanban_default.actions, children: actions }) : null
     ] }) }),
-    /* @__PURE__ */ jsx40(ScrollContainer, { className: Kanban_default.body, children: /* @__PURE__ */ jsx40(Crossfade, { state: loading ? "loading" : "ready", className: Kanban_default.swap, children: loading ? /* @__PURE__ */ jsx40("div", { className: Kanban_default.list, children: Array.from({ length: skeletons }, (_, index) => (
+    /* @__PURE__ */ jsx39(ScrollContainer, { className: Kanban_default.body, children: /* @__PURE__ */ jsx39(Crossfade, { state: loading ? "loading" : "ready", className: Kanban_default.swap, children: loading ? /* @__PURE__ */ jsx39("div", { className: Kanban_default.list, children: Array.from({ length: skeletons }, (_, index) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder cards
-      /* @__PURE__ */ jsxs30("div", { className: cx(Kanban_default.item, Kanban_default.skeleton), "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx40(Skeleton, { lines: 2 }),
-        /* @__PURE__ */ jsxs30("div", { className: Kanban_default.footer, children: [
-          /* @__PURE__ */ jsx40(Skeleton, { shape: "block", className: Kanban_default.skeletonBadge }),
-          /* @__PURE__ */ jsx40(Skeleton, { shape: "circle", size: "s" })
+      /* @__PURE__ */ jsxs29("div", { className: cx(Kanban_default.item, Kanban_default.skeleton), "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx39(Skeleton, { lines: 2 }),
+        /* @__PURE__ */ jsxs29("div", { className: Kanban_default.footer, children: [
+          /* @__PURE__ */ jsx39(Skeleton, { shape: "block", className: Kanban_default.skeletonBadge }),
+          /* @__PURE__ */ jsx39(Skeleton, { shape: "circle", size: "s" })
         ] })
       ] }, index)
-    )) }) : /* @__PURE__ */ jsxs30("div", { className: Kanban_default.drop, children: [
-      /* @__PURE__ */ jsx40(
+    )) }) : /* @__PURE__ */ jsxs29("div", { className: Kanban_default.drop, children: [
+      /* @__PURE__ */ jsx39(
         Dnd.Sortable,
         {
           as: "ul",
@@ -9448,10 +9469,10 @@ function KanbanColumnView({
           canDrop: accepts,
           disabled,
           onReorder,
-          renderItem: (item) => /* @__PURE__ */ jsx40(ItemIdContext, { value: getId(item), children: renderItem(item) })
+          renderItem: (item) => /* @__PURE__ */ jsx39(ItemIdContext, { value: getId(item), children: renderItem(item) })
         }
       ),
-      count === 0 ? /* @__PURE__ */ jsx40(EmptyPage.Root, { layout: "compact", className: Kanban_default.empty, children: /* @__PURE__ */ jsx40(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null
+      count === 0 ? /* @__PURE__ */ jsx39(EmptyPage.Root, { layout: "compact", className: Kanban_default.empty, children: /* @__PURE__ */ jsx39(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null
     ] }) }) })
   ] });
 }
@@ -9462,13 +9483,13 @@ function KanbanItem({
   children,
   ...rest
 }) {
-  const id = React46.useContext(ItemIdContext);
-  const board = React46.useContext(BoardContext);
+  const id = React45.useContext(ItemIdContext);
+  const board = React45.useContext(BoardContext);
   if (id === null || board === null) {
     throw new Error("Kanban.Item must be returned from Kanban.Root renderItem");
   }
   const locked = disabled || board.disabled;
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx39(
     Dnd.SortableItem,
     {
       id,
@@ -9486,29 +9507,29 @@ function KanbanItem({
         const towardStart = event.key === (rtl ? "ArrowRight" : "ArrowLeft");
         board.moveAcross(id, towardStart ? -1 : 1);
       },
-      children: /* @__PURE__ */ jsx40(ControlSizeProvider, { value: "m", children })
+      children: /* @__PURE__ */ jsx39(ControlSizeProvider, { value: "m", children })
     }
   );
 }
 KanbanItem.displayName = "Kanban.Item";
 function KanbanItemTitle({ className, ...rest }) {
-  return /* @__PURE__ */ jsx40("span", { className: cx(Kanban_default.itemTitle, className), ...rest });
+  return /* @__PURE__ */ jsx39("span", { className: cx(Kanban_default.itemTitle, className), ...rest });
 }
 KanbanItemTitle.displayName = "Kanban.ItemTitle";
 function KanbanItemDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx40("span", { className: cx(Kanban_default.itemDescription, className), ...rest });
+  return /* @__PURE__ */ jsx39("span", { className: cx(Kanban_default.itemDescription, className), ...rest });
 }
 KanbanItemDescription.displayName = "Kanban.ItemDescription";
 function KanbanItemBadges({ className, ...rest }) {
-  return /* @__PURE__ */ jsx40("div", { className: cx(Kanban_default.itemBadges, className), ...rest });
+  return /* @__PURE__ */ jsx39("div", { className: cx(Kanban_default.itemBadges, className), ...rest });
 }
 KanbanItemBadges.displayName = "Kanban.ItemBadges";
 function KanbanItemFooter({ className, ...rest }) {
-  return /* @__PURE__ */ jsx40("div", { className: cx(Kanban_default.footer, className), ...rest });
+  return /* @__PURE__ */ jsx39("div", { className: cx(Kanban_default.footer, className), ...rest });
 }
 KanbanItemFooter.displayName = "Kanban.ItemFooter";
 function KanbanItemCount({ className, ...rest }) {
-  return /* @__PURE__ */ jsx40("span", { className: cx(Kanban_default.count, className), ...rest });
+  return /* @__PURE__ */ jsx39("span", { className: cx(Kanban_default.count, className), ...rest });
 }
 KanbanItemCount.displayName = "Kanban.ItemCount";
 var Kanban = {
@@ -9545,7 +9566,7 @@ var Typography_default = {
 };
 
 // src/components/typography/Typography.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var ROLE_CLASS = {
   caption: textRole_default.caption,
   "body-s": textRole_default.bodyS,
@@ -9575,7 +9596,7 @@ function Typography({
   ref,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     Tag,
     {
       ref,
@@ -9608,7 +9629,7 @@ var LoginForm_default = {
 };
 
 // src/components/login-form/LoginForm.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var TITLE_ROLE = {
   xs: "title-s",
   s: "title-m",
@@ -9640,29 +9661,31 @@ function LoginFormRoot({
   ref,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx42(
+  const depth = useNestedSurfaceDepth();
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       ref,
       ...rest,
       className: cx(LoginForm_default.root, className),
+      "data-depth": depth,
       ...toDataAttributes({ size, align, flat }),
-      children: /* @__PURE__ */ jsx42(ControlSizeProvider, { value: size, children })
+      children: /* @__PURE__ */ jsx41(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx41(ControlSizeProvider, { value: size, children }) })
     }
   );
 }
 LoginFormRoot.displayName = "LoginForm.Root";
 function LoginFormHeader({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx42("header", { className: cx(LoginForm_default.header, className), ...rest, children });
+  return /* @__PURE__ */ jsx41("header", { className: cx(LoginForm_default.header, className), ...rest, children });
 }
 LoginFormHeader.displayName = "LoginForm.Header";
 function LoginFormLogo({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cx(LoginForm_default.logo, className), ...rest, children });
+  return /* @__PURE__ */ jsx41("div", { className: cx(LoginForm_default.logo, className), ...rest, children });
 }
 LoginFormLogo.displayName = "LoginForm.Logo";
 function LoginFormTitle({ as = "h1", className, children, ...rest }) {
   const size = useLoginFormSize();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     Typography,
     {
       as,
@@ -9676,7 +9699,7 @@ function LoginFormTitle({ as = "h1", className, children, ...rest }) {
 LoginFormTitle.displayName = "LoginForm.Title";
 function LoginFormDescription({ className, children, ...rest }) {
   const size = useLoginFormSize();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     Typography,
     {
       as: "p",
@@ -9690,20 +9713,20 @@ function LoginFormDescription({ className, children, ...rest }) {
 }
 LoginFormDescription.displayName = "LoginForm.Description";
 function LoginFormBody({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cx(LoginForm_default.body, className), ...rest, children });
+  return /* @__PURE__ */ jsx41("div", { className: cx(LoginForm_default.body, className), ...rest, children });
 }
 LoginFormBody.displayName = "LoginForm.Body";
 function LoginFormForm({ className, children, ref, ...rest }) {
-  return /* @__PURE__ */ jsx42("form", { ref, className: cx(LoginForm_default.form, className), ...rest, children });
+  return /* @__PURE__ */ jsx41("form", { ref, className: cx(LoginForm_default.form, className), ...rest, children });
 }
 LoginFormForm.displayName = "LoginForm.Form";
 function LoginFormActions({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx42("div", { className: cx(LoginForm_default.actions, className), ...rest, children });
+  return /* @__PURE__ */ jsx41("div", { className: cx(LoginForm_default.actions, className), ...rest, children });
 }
 LoginFormActions.displayName = "LoginForm.Actions";
 function LoginFormFooter({ className, children, ...rest }) {
   const size = useLoginFormSize();
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     Typography,
     {
       as: "p",
@@ -9736,7 +9759,7 @@ var NativeSelect_default = {
 };
 
 // src/components/native-select/NativeSelect.tsx
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
 var NATIVE_SELECT_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function NativeSelect({
   size = "m",
@@ -9763,7 +9786,7 @@ function NativeSelect({
   const labels = { ...NATIVE_SELECT_LABELS, ...labelsProp };
   const ids = useFieldFrame(id, { hint, error, invalid }, ariaDescribedBy);
   const initial = defaultValue ?? (value === void 0 && placeholder ? "" : void 0);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(
     FieldFrame,
     {
       size,
@@ -9776,8 +9799,8 @@ function NativeSelect({
       disabled,
       optionalLabel: labels.optional,
       className,
-      children: /* @__PURE__ */ jsx43(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs31("span", { className: cx(fieldTierClass, NativeSelect_default.root), ...toDataAttributes({ size }), children: [
-        /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsx42(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs30("span", { className: cx(fieldTierClass, NativeSelect_default.root), ...toDataAttributes({ size }), children: [
+        /* @__PURE__ */ jsxs30(
           "select",
           {
             ...rest,
@@ -9799,12 +9822,12 @@ function NativeSelect({
               "focus-ring": focusRing ? void 0 : false
             }),
             children: [
-              placeholder ? /* @__PURE__ */ jsx43("option", { value: "", children: placeholder }) : null,
+              placeholder ? /* @__PURE__ */ jsx42("option", { value: "", children: placeholder }) : null,
               children
             ]
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: NativeSelect_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx43(Icon, { name: "nav.chevronDown" }) })
+        /* @__PURE__ */ jsx42("span", { className: NativeSelect_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(Icon, { name: "nav.chevronDown" }) })
       ] }) })
     }
   );
@@ -9812,7 +9835,7 @@ function NativeSelect({
 NativeSelect.displayName = "NativeSelect";
 
 // src/components/notification/Notification.tsx
-import * as React47 from "react";
+import * as React46 from "react";
 
 // src/components/notification/Notification.module.css
 var Notification_default = {
@@ -9839,7 +9862,7 @@ var Notification_default = {
 };
 
 // src/components/notification/Notification.tsx
-import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
 var NOTIFICATION_LABELS = {
   close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0435",
   regionTopLeft: "\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F \u0441\u0432\u0435\u0440\u0445\u0443 \u0441\u043B\u0435\u0432\u0430",
@@ -9857,7 +9880,7 @@ var REGION_LABEL_KEY = {
   "bottom-center": "regionBottomCenter",
   "bottom-right": "regionBottomRight"
 };
-var NotificationLabelsContext = React47.createContext(NOTIFICATION_LABELS);
+var NotificationLabelsContext = React46.createContext(NOTIFICATION_LABELS);
 var TONE_ICON = {
   info: "status.info",
   success: "status.success",
@@ -9885,15 +9908,16 @@ function CardView({
   stackExpanded = false,
   ...rest
 }) {
-  const labels = React47.useContext(NotificationLabelsContext);
+  const labels = React46.useContext(NotificationLabelsContext);
   const liveRole = tone === "danger" || tone === "warning" ? "alert" : "status";
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     "article",
     {
       ...rest,
       className: cx(Notification_default.card, className),
       role: liveRole,
       "aria-live": liveRole === "alert" ? "assertive" : "polite",
+      "data-depth": "floating",
       ...toDataAttributes({
         tone,
         size,
@@ -9902,14 +9926,14 @@ function CardView({
         "stack-expanded": stackExpanded
       }),
       children: [
-        /* @__PURE__ */ jsx44("div", { className: Notification_default.iconWrap, "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx44(Icon, { name: TONE_ICON[tone] }) }),
-        /* @__PURE__ */ jsxs32("div", { className: Notification_default.content, children: [
-          /* @__PURE__ */ jsxs32("header", { className: Notification_default.header, children: [
-            /* @__PURE__ */ jsx44("p", { className: Notification_default.title, children: title }),
-            badge !== void 0 ? /* @__PURE__ */ jsx44(Badge.Root, { size: "xs", color: TONE_BADGE_COLOR[tone], children: badge }) : null
+        /* @__PURE__ */ jsx43("div", { className: Notification_default.iconWrap, "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx43(Icon, { name: TONE_ICON[tone] }) }),
+        /* @__PURE__ */ jsxs31("div", { className: Notification_default.content, children: [
+          /* @__PURE__ */ jsxs31("header", { className: Notification_default.header, children: [
+            /* @__PURE__ */ jsx43("p", { className: Notification_default.title, children: title }),
+            badge !== void 0 ? /* @__PURE__ */ jsx43(Badge.Root, { size: "xs", color: TONE_BADGE_COLOR[tone], children: badge }) : null
           ] }),
-          description ? /* @__PURE__ */ jsx44("p", { className: Notification_default.description, children: description }) : null,
-          action ? /* @__PURE__ */ jsx44("div", { className: Notification_default.actionRow, children: /* @__PURE__ */ jsx44(
+          description ? /* @__PURE__ */ jsx43("p", { className: Notification_default.description, children: description }) : null,
+          action ? /* @__PURE__ */ jsx43("div", { className: Notification_default.actionRow, children: /* @__PURE__ */ jsx43(
             Button.Root,
             {
               variant: "soft",
@@ -9920,7 +9944,7 @@ function CardView({
             }
           ) }) : null
         ] }),
-        onClose ? /* @__PURE__ */ jsx44(
+        onClose ? /* @__PURE__ */ jsx43(
           Button.Root,
           {
             variant: "ghost",
@@ -9928,10 +9952,10 @@ function CardView({
             size: stepDown(size, 2),
             "aria-label": labels.close,
             onClick: onClose,
-            children: /* @__PURE__ */ jsx44(Button.Icon, { children: /* @__PURE__ */ jsx44(Icon, { name: "action.close" }) })
+            children: /* @__PURE__ */ jsx43(Button.Icon, { children: /* @__PURE__ */ jsx43(Icon, { name: "action.close" }) })
           }
         ) : null,
-        countdown ? /* @__PURE__ */ jsx44("div", { className: Notification_default.progressTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx44(
+        countdown ? /* @__PURE__ */ jsx43("div", { className: Notification_default.progressTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx43(
           "span",
           {
             className: Notification_default.progressValue,
@@ -9949,14 +9973,14 @@ function CardView({
   );
 }
 function NotificationCard({ onDismiss, ...props }) {
-  return /* @__PURE__ */ jsx44(CardView, { ...props, onClose: onDismiss });
+  return /* @__PURE__ */ jsx43(CardView, { ...props, onClose: onDismiss });
 }
 function subscribeVisibility(listener) {
   document.addEventListener("visibilitychange", listener);
   return () => document.removeEventListener("visibilitychange", listener);
 }
 function useDocumentHidden() {
-  return React47.useSyncExternalStore(
+  return React46.useSyncExternalStore(
     subscribeVisibility,
     () => document.visibilityState === "hidden",
     () => false
@@ -9965,7 +9989,7 @@ function useDocumentHidden() {
 function ToastCard({ item, paused, onDismiss, stackDepth, stackExpanded }) {
   const hidden = useDocumentHidden();
   const timed = !item.persistent && item.duration > 0;
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     CardView,
     {
       tone: item.tone,
@@ -9984,8 +10008,8 @@ function ToastCard({ item, paused, onDismiss, stackDepth, stackExpanded }) {
 }
 
 // src/components/notification/NotificationStore.tsx
-import * as React48 from "react";
-import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+import * as React47 from "react";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 5e3;
 var PEEK_VISIBLE = 3;
 var SCALE_STEP = 0.05;
@@ -10017,7 +10041,7 @@ var POSITIONS = [
   "bottom-right"
 ];
 var TONES = ["success", "danger", "warning", "info"];
-var StoreContext = React48.createContext(null);
+var StoreContext = React47.createContext(null);
 function newId() {
   return globalThis.crypto?.randomUUID?.() ?? `ntf-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
@@ -10031,17 +10055,17 @@ function NotificationStack({
   onDismiss,
   onExited
 }) {
-  const labels = React48.useContext(NotificationLabelsContext);
-  const [expanded, setExpanded] = React48.useState(false);
-  const [heights, setHeights] = React48.useState({});
-  const collapseTimerRef = React48.useRef(null);
-  const lastLayoutRef = React48.useRef(/* @__PURE__ */ new Map());
-  const listRef = React48.useRef(null);
-  const hoveredRef = React48.useRef(false);
-  const focusedRef = React48.useRef(false);
+  const labels = React47.useContext(NotificationLabelsContext);
+  const [expanded, setExpanded] = React47.useState(false);
+  const [heights, setHeights] = React47.useState({});
+  const collapseTimerRef = React47.useRef(null);
+  const lastLayoutRef = React47.useRef(/* @__PURE__ */ new Map());
+  const listRef = React47.useRef(null);
+  const hoveredRef = React47.useRef(false);
+  const focusedRef = React47.useRef(false);
   const top = isTop(position);
-  const step = React48.useMemo(space2Px, []);
-  const syncExpanded = React48.useCallback(() => {
+  const step = React47.useMemo(space2Px, []);
+  const syncExpanded = React47.useCallback(() => {
     if (collapseTimerRef.current !== null) {
       clearTimeout(collapseTimerRef.current);
       collapseTimerRef.current = null;
@@ -10052,29 +10076,29 @@ function NotificationStack({
       collapseTimerRef.current = window.setTimeout(() => setExpanded(false), COLLAPSE_DELAY_MS);
     }
   }, []);
-  const handleHover = React48.useCallback(
+  const handleHover = React47.useCallback(
     (hovered) => {
       hoveredRef.current = hovered;
       syncExpanded();
     },
     [syncExpanded]
   );
-  React48.useLayoutEffect(() => {
+  React47.useLayoutEffect(() => {
     if (!focusedRef.current) return;
     if (listRef.current?.contains(document.activeElement)) return;
     focusedRef.current = false;
     syncExpanded();
   });
-  React48.useEffect(
+  React47.useEffect(
     () => () => {
       if (collapseTimerRef.current !== null) clearTimeout(collapseTimerRef.current);
     },
     []
   );
-  const reportHeight = React48.useCallback((id, height) => {
+  const reportHeight = React47.useCallback((id, height) => {
     setHeights((prev) => prev[id] === height ? prev : { ...prev, [id]: height });
   }, []);
-  React48.useEffect(() => {
+  React47.useEffect(() => {
     setHeights((prev) => {
       const ids = new Set(items.map((n) => n.id));
       const stale = Object.keys(prev).filter((id) => !ids.has(id));
@@ -10101,14 +10125,14 @@ function NotificationStack({
   });
   const frontHeight = active.length > 0 ? heights[active[0].id] ?? 0 : 0;
   const stackHeight = active.length === 0 ? 0 : expanded ? flowHeight - step : frontHeight + Math.min(active.length - 1, PEEK_VISIBLE - 1) * step;
-  React48.useLayoutEffect(() => {
+  React47.useLayoutEffect(() => {
     for (const [id, layout] of layouts) lastLayoutRef.current.set(id, layout);
     const ids = new Set(items.map((n) => n.id));
     for (const id of lastLayoutRef.current.keys()) {
       if (!ids.has(id)) lastLayoutRef.current.delete(id);
     }
   });
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     "ol",
     {
       ref: listRef,
@@ -10130,7 +10154,7 @@ function NotificationStack({
       children: items.map((item) => {
         const closing = item.dismissing === true;
         const layout = layouts.get(item.id) ?? lastLayoutRef.current.get(item.id) ?? RESTING_LAYOUT;
-        return /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsx44(
           NotificationStackItem,
           {
             item,
@@ -10152,7 +10176,7 @@ function NotificationStack({
     }
   );
 }
-var NotificationStackItem = React48.memo(function NotificationStackItem2({
+var NotificationStackItem = React47.memo(function NotificationStackItem2({
   item,
   position,
   index,
@@ -10166,9 +10190,9 @@ var NotificationStackItem = React48.memo(function NotificationStackItem2({
   onExited,
   onHeight
 }) {
-  const ref = React48.useRef(null);
+  const ref = React47.useRef(null);
   const { id } = item;
-  React48.useLayoutEffect(() => {
+  React47.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     onHeight(id, el.offsetHeight);
@@ -10179,10 +10203,10 @@ var NotificationStackItem = React48.memo(function NotificationStackItem2({
   }, [id, onHeight]);
   const state = closing ? "closed" : "open";
   const { axis, sign } = swipeDirection(position);
-  const dragRef = React48.useRef(
+  const dragRef = React47.useRef(
     null
   );
-  const [swiping, setSwiping] = React48.useState(false);
+  const [swiping, setSwiping] = React47.useState(false);
   const swipeAmount = (client, origin) => {
     const toward = (client - origin) * sign;
     if (toward >= 0) return toward;
@@ -10233,7 +10257,7 @@ var NotificationStackItem = React48.memo(function NotificationStackItem2({
     if (amount === 0 || prefersReducedMotion()) delete el.dataset.swipe;
     else el.dataset.swipe = "return";
   };
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44(
     "li",
     {
       ref,
@@ -10247,7 +10271,7 @@ var NotificationStackItem = React48.memo(function NotificationStackItem2({
         "--ntf-opacity": opacity,
         zIndex: Z_FRONT - index
       },
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx44(
         "div",
         {
           className: Notification_default.motion,
@@ -10264,7 +10288,7 @@ var NotificationStackItem = React48.memo(function NotificationStackItem2({
               delete event.currentTarget.dataset.swipe;
             }
           },
-          children: /* @__PURE__ */ jsx45(
+          children: /* @__PURE__ */ jsx44(
             ToastCard,
             {
               item,
@@ -10284,7 +10308,7 @@ function NotificationToaster({
   onDismiss,
   onExited
 }) {
-  const grouped = React48.useMemo(() => {
+  const grouped = React47.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const entry of entries) {
       if (!map.has(entry.position)) map.set(entry.position, /* @__PURE__ */ new Map());
@@ -10300,18 +10324,18 @@ function NotificationToaster({
     }
     return map;
   }, [entries]);
-  return /* @__PURE__ */ jsx45(Portal, { children: /* @__PURE__ */ jsx45("div", { className: Notification_default.viewport, ...{ [LIVE_REGION_ATTR]: "" }, children: POSITIONS.map((pos) => {
+  return /* @__PURE__ */ jsx44(Portal, { children: /* @__PURE__ */ jsx44("div", { className: Notification_default.viewport, ...{ [LIVE_REGION_ATTR]: "" }, children: POSITIONS.map((pos) => {
     const byTone = grouped.get(pos);
     if (!byTone?.size) return null;
     const [vertical, horizontal] = pos.split("-");
     const stacks = TONES.map((tone) => ({ tone, items: byTone.get(tone) ?? [] })).filter(
       (s) => s.items.length > 0
     );
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx44(
       "section",
       {
         className: `${Notification_default.zone} ${Notification_default[vertical]} ${Notification_default[horizontal]}`,
-        children: stacks.map((s) => /* @__PURE__ */ jsx45(
+        children: stacks.map((s) => /* @__PURE__ */ jsx44(
           NotificationStack,
           {
             position: pos,
@@ -10332,22 +10356,22 @@ function NotificationProvider({
   max = 5,
   labels: labelsProp
 }) {
-  const labels = React48.useMemo(
+  const labels = React47.useMemo(
     () => ({ ...NOTIFICATION_LABELS, ...labelsProp }),
     [labelsProp]
   );
-  const [entries, setEntries] = React48.useState([]);
-  const entriesRef = React48.useRef(entries);
+  const [entries, setEntries] = React47.useState([]);
+  const entriesRef = React47.useRef(entries);
   entriesRef.current = entries;
-  const exitTimersRef = React48.useRef(/* @__PURE__ */ new Map());
-  React48.useEffect(() => {
+  const exitTimersRef = React47.useRef(/* @__PURE__ */ new Map());
+  React47.useEffect(() => {
     const timers = exitTimersRef.current;
     return () => {
       for (const timer of timers.values()) clearTimeout(timer);
       timers.clear();
     };
   }, []);
-  const remove = React48.useCallback((id) => {
+  const remove = React47.useCallback((id) => {
     const timer = exitTimersRef.current.get(id);
     if (timer !== void 0) {
       clearTimeout(timer);
@@ -10355,7 +10379,7 @@ function NotificationProvider({
     }
     setEntries((prev) => prev.filter((n) => n.id !== id));
   }, []);
-  const startExit = React48.useCallback(
+  const startExit = React47.useCallback(
     (ids) => {
       if (ids.length === 0) return;
       const target = new Set(ids);
@@ -10382,12 +10406,12 @@ function NotificationProvider({
     },
     [remove]
   );
-  const dismiss = React48.useCallback((id) => startExit([id]), [startExit]);
-  const dismissAll = React48.useCallback(
+  const dismiss = React47.useCallback((id) => startExit([id]), [startExit]);
+  const dismissAll = React47.useCallback(
     () => startExit(entriesRef.current.filter((n) => !n.dismissing).map((n) => n.id)),
     [startExit]
   );
-  const notify = React48.useCallback(
+  const notify = React47.useCallback(
     (options) => {
       const id = newId();
       const record = {
@@ -10414,24 +10438,24 @@ function NotificationProvider({
     },
     [position, max]
   );
-  const publicItems = React48.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
-  const value = React48.useMemo(
+  const publicItems = React47.useMemo(() => entries.filter((n) => !n.dismissing), [entries]);
+  const value = React47.useMemo(
     () => ({ items: publicItems, notify, dismiss, dismissAll }),
     [publicItems, notify, dismiss, dismissAll]
   );
-  return /* @__PURE__ */ jsx45(StoreContext.Provider, { value, children: /* @__PURE__ */ jsxs33(NotificationLabelsContext.Provider, { value: labels, children: [
+  return /* @__PURE__ */ jsx44(StoreContext.Provider, { value, children: /* @__PURE__ */ jsxs32(NotificationLabelsContext.Provider, { value: labels, children: [
     children,
-    /* @__PURE__ */ jsx45(NotificationToaster, { entries, onDismiss: dismiss, onExited: remove })
+    /* @__PURE__ */ jsx44(NotificationToaster, { entries, onDismiss: dismiss, onExited: remove })
   ] }) });
 }
 function useNotifications() {
-  const ctx = React48.useContext(StoreContext);
+  const ctx = React47.useContext(StoreContext);
   if (!ctx) throw new Error("useNotifications must be used within NotificationProvider");
   return ctx;
 }
 
 // src/components/page-content/PageContent.tsx
-import * as React49 from "react";
+import * as React48 from "react";
 
 // src/components/page-content/PageContent.module.css
 var PageContent_default = {
@@ -10446,9 +10470,9 @@ var PageContent_default = {
 };
 
 // src/components/page-content/PageContent.tsx
-import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
 function PageContentRoot({ maxWidth = "full", className, ...rest }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cx(PageContent_default.root, className),
@@ -10459,25 +10483,25 @@ function PageContentRoot({ maxWidth = "full", className, ...rest }) {
 }
 PageContentRoot.displayName = "PageContent.Root";
 function PageContentSection({ className, ...rest }) {
-  return /* @__PURE__ */ jsx46("section", { className: cx(PageContent_default.section, className), ...rest });
+  return /* @__PURE__ */ jsx45("section", { className: cx(PageContent_default.section, className), ...rest });
 }
 PageContentSection.displayName = "PageContent.Section";
 function PageContentActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx46("div", { className: cx(PageContent_default.actions, className), ...rest });
+  return /* @__PURE__ */ jsx45("div", { className: cx(PageContent_default.actions, className), ...rest });
 }
 PageContentActions.displayName = "PageContent.Actions";
 function PageContentHeader({ className, children, ...rest }) {
-  const items = React49.Children.toArray(children);
-  const isActions = (child) => React49.isValidElement(child) && child.type === PageContentActions;
+  const items = React48.Children.toArray(children);
+  const isActions = (child) => React48.isValidElement(child) && child.type === PageContentActions;
   const actions = items.filter(isActions);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: cx(PageContent_default.header, className),
       "data-has-actions": actions.length > 0 ? "true" : void 0,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx46("div", { className: PageContent_default.heading, children: items.filter((child) => !isActions(child)) }),
+        /* @__PURE__ */ jsx45("div", { className: PageContent_default.heading, children: items.filter((child) => !isActions(child)) }),
         actions
       ]
     }
@@ -10485,7 +10509,7 @@ function PageContentHeader({ className, children, ...rest }) {
 }
 PageContentHeader.displayName = "PageContent.Header";
 function PageContentTitle({ className, ...rest }) {
-  return /* @__PURE__ */ jsx46("h1", { className: cx(PageContent_default.title, className), ...rest });
+  return /* @__PURE__ */ jsx45("h1", { className: cx(PageContent_default.title, className), ...rest });
 }
 PageContentTitle.displayName = "PageContent.Title";
 function PageContentDescription({
@@ -10493,7 +10517,7 @@ function PageContentDescription({
   measure = "readable",
   ...rest
 }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx45(
     "p",
     {
       className: cx(PageContent_default.description, className),
@@ -10504,7 +10528,7 @@ function PageContentDescription({
 }
 PageContentDescription.displayName = "PageContent.Description";
 function PageContentBody({ className, ...rest }) {
-  return /* @__PURE__ */ jsx46("div", { className: cx(PageContent_default.body, className), ...rest });
+  return /* @__PURE__ */ jsx45("div", { className: cx(PageContent_default.body, className), ...rest });
 }
 PageContentBody.displayName = "PageContent.Body";
 var PageContent = {
@@ -10518,7 +10542,7 @@ var PageContent = {
 };
 
 // src/components/page-toolbar/PageToolbar.tsx
-import * as React50 from "react";
+import * as React49 from "react";
 
 // src/components/page-toolbar/PageToolbar.module.css
 var PageToolbar_default = {
@@ -10533,37 +10557,37 @@ var PageToolbar_default = {
 };
 
 // src/components/page-toolbar/PageToolbar.tsx
-import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs34 } from "react/jsx-runtime";
 function PageToolbarRoot({ className, children, ref, ...rest }) {
-  const items = React50.Children.toArray(children);
-  const isChips = (child) => React50.isValidElement(child) && child.type === PageToolbarChips;
-  return /* @__PURE__ */ jsxs35("div", { ...rest, ref, className: cx(PageToolbar_default.root, className), children: [
-    /* @__PURE__ */ jsxs35("div", { className: PageToolbar_default.bar, children: [
+  const items = React49.Children.toArray(children);
+  const isChips = (child) => React49.isValidElement(child) && child.type === PageToolbarChips;
+  return /* @__PURE__ */ jsxs34("div", { ...rest, ref, className: cx(PageToolbar_default.root, className), children: [
+    /* @__PURE__ */ jsxs34("div", { className: PageToolbar_default.bar, children: [
       items.filter((child) => !isChips(child)),
-      /* @__PURE__ */ jsx47("span", { className: PageToolbar_default.break, "aria-hidden": "true" })
+      /* @__PURE__ */ jsx46("span", { className: PageToolbar_default.break, "aria-hidden": "true" })
     ] }),
     items.filter(isChips)
   ] });
 }
 PageToolbarRoot.displayName = "PageToolbar.Root";
 function PageToolbarSections({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47("div", { ...rest, className: cx(PageToolbar_default.sections, className) });
+  return /* @__PURE__ */ jsx46("div", { ...rest, className: cx(PageToolbar_default.sections, className) });
 }
 PageToolbarSections.displayName = "PageToolbar.Sections";
 function PageToolbarTools({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47("div", { ...rest, className: cx(PageToolbar_default.tools, className) });
+  return /* @__PURE__ */ jsx46("div", { ...rest, className: cx(PageToolbar_default.tools, className) });
 }
 PageToolbarTools.displayName = "PageToolbar.Tools";
 function PageToolbarView({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47("div", { ...rest, className: cx(PageToolbar_default.view, className) });
+  return /* @__PURE__ */ jsx46("div", { ...rest, className: cx(PageToolbar_default.view, className) });
 }
 PageToolbarView.displayName = "PageToolbar.View";
 function PageToolbarActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47("div", { ...rest, className: cx(PageToolbar_default.actions, className) });
+  return /* @__PURE__ */ jsx46("div", { ...rest, className: cx(PageToolbar_default.actions, className) });
 }
 PageToolbarActions.displayName = "PageToolbar.Actions";
 function PageToolbarChips({ className, ...rest }) {
-  return /* @__PURE__ */ jsx47("div", { ...rest, className: cx(PageToolbar_default.chips, className) });
+  return /* @__PURE__ */ jsx46("div", { ...rest, className: cx(PageToolbar_default.chips, className) });
 }
 PageToolbarChips.displayName = "PageToolbar.Chips";
 var PageToolbar = {
@@ -10576,7 +10600,7 @@ var PageToolbar = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import * as React51 from "react";
+import * as React50 from "react";
 
 // src/components/progress-circle/ProgressCircle.module.css
 var ProgressCircle_default = {
@@ -10593,7 +10617,7 @@ var ProgressCircle_default = {
 };
 
 // src/components/progress-circle/ProgressCircle.tsx
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
 var STROKE = 100 / 12;
 var RADIUS = 50 - STROKE / 2;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
@@ -10606,10 +10630,10 @@ function arcStyle(start, length) {
   };
 }
 function Ring(props) {
-  return /* @__PURE__ */ jsx48("circle", { cx: 50, cy: 50, r: RADIUS, strokeWidth: STROKE, ...props });
+  return /* @__PURE__ */ jsx47("circle", { cx: 50, cy: 50, r: RADIUS, strokeWidth: STROKE, ...props });
 }
 function Cap({ position, tone }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     "circle",
     {
       cx: 50 + RADIUS,
@@ -10628,7 +10652,7 @@ function SegmentArcs({
 }) {
   if (gap === "hairline" && arcs.length > 1) {
     const inset = (STROKE + HAIRLINE_GAP) / 2;
-    return /* @__PURE__ */ jsx48(Fragment9, { children: arcs.map((a, i) => /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx47(Fragment8, { children: arcs.map((a, i) => /* @__PURE__ */ jsx47(
       Ring,
       {
         className: a.rest ? ProgressCircle_default.restRound : ProgressCircle_default.segmentRound,
@@ -10641,8 +10665,8 @@ function SegmentArcs({
   const parts = arcs.filter((a) => !a.rest);
   const first = parts[0];
   const last = parts[parts.length - 1];
-  return /* @__PURE__ */ jsxs36(Fragment9, { children: [
-    parts.map((a, i) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs35(Fragment8, { children: [
+    parts.map((a, i) => /* @__PURE__ */ jsx47(
       Ring,
       {
         className: ProgressCircle_default.segment,
@@ -10651,9 +10675,9 @@ function SegmentArcs({
       },
       i
     )),
-    first && last && !closed ? /* @__PURE__ */ jsxs36(Fragment9, { children: [
-      /* @__PURE__ */ jsx48(Cap, { position: first.start, tone: first.tone }),
-      /* @__PURE__ */ jsx48(Cap, { position: last.start + last.length, tone: last.tone })
+    first && last && !closed ? /* @__PURE__ */ jsxs35(Fragment8, { children: [
+      /* @__PURE__ */ jsx47(Cap, { position: first.start, tone: first.tone }),
+      /* @__PURE__ */ jsx47(Cap, { position: last.start + last.length, tone: last.tone })
     ] }) : null
   ] });
 }
@@ -10671,7 +10695,7 @@ function ProgressCircle(props) {
     labels,
     ...rest
   } = props;
-  const descriptionId = React51.useId();
+  const descriptionId = React50.useId();
   const showInner = children != null && children !== false && !SIZES_WITHOUT_INNER.has(size);
   const valueText = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
   let tone;
@@ -10698,9 +10722,9 @@ function ProgressCircle(props) {
     }
     if (free > 0 && total > 0) arcs.push({ start: cursor, length: free * unit, rest: true });
     const a11y = label ? { "aria-label": label, "aria-describedby": descriptionId } : { "aria-label": text };
-    if (label) description = /* @__PURE__ */ jsx48(VisuallyHidden, { id: descriptionId, children: text });
+    if (label) description = /* @__PURE__ */ jsx47(VisuallyHidden, { id: descriptionId, children: text });
     svg = // biome-ignore lint/a11y/useSemanticElements: a distribution is a group of parts, not a fieldset
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx47(
       "svg",
       {
         viewBox: "0 0 100 100",
@@ -10708,16 +10732,16 @@ function ProgressCircle(props) {
         role: "group",
         ...a11y,
         ...toDataAttributes({ "segment-gap": gap }),
-        children: /* @__PURE__ */ jsxs36("g", { className: ProgressCircle_default.arcs, children: [
-          gap === "none" || total === 0 ? /* @__PURE__ */ jsx48(Ring, { className: ProgressCircle_default.track }) : null,
-          total > 0 ? /* @__PURE__ */ jsx48(SegmentArcs, { arcs, gap, closed: free === 0 }) : null
+        children: /* @__PURE__ */ jsxs35("g", { className: ProgressCircle_default.arcs, children: [
+          gap === "none" || total === 0 ? /* @__PURE__ */ jsx47(Ring, { className: ProgressCircle_default.track }) : null,
+          total > 0 ? /* @__PURE__ */ jsx47(SegmentArcs, { arcs, gap, closed: free === 0 }) : null
         ] })
       }
     );
   } else {
     const { value, max, ratio } = resolveValue(valueProp ?? 0, maxProp);
     tone = toneProp ?? "accent";
-    svg = /* @__PURE__ */ jsx48(
+    svg = /* @__PURE__ */ jsx47(
       "svg",
       {
         viewBox: "0 0 100 100",
@@ -10728,9 +10752,9 @@ function ProgressCircle(props) {
         "aria-valuemax": max,
         "aria-label": label,
         "aria-valuetext": valueText,
-        children: /* @__PURE__ */ jsxs36("g", { className: ProgressCircle_default.arcs, children: [
-          /* @__PURE__ */ jsx48(Ring, { className: ProgressCircle_default.track }),
-          /* @__PURE__ */ jsx48(
+        children: /* @__PURE__ */ jsxs35("g", { className: ProgressCircle_default.arcs, children: [
+          /* @__PURE__ */ jsx47(Ring, { className: ProgressCircle_default.track }),
+          /* @__PURE__ */ jsx47(
             Ring,
             {
               className: ProgressCircle_default.fill,
@@ -10745,15 +10769,15 @@ function ProgressCircle(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs36("div", { className: cx(ProgressCircle_default.root, className), ...rest, ...toDataAttributes({ size, tone }), children: [
+  return /* @__PURE__ */ jsxs35("div", { className: cx(ProgressCircle_default.root, className), ...rest, ...toDataAttributes({ size, tone }), children: [
     svg,
     description,
-    showInner ? /* @__PURE__ */ jsx48("div", { className: ProgressCircle_default.inner, "aria-hidden": valueText !== void 0 ? true : void 0, children }) : null
+    showInner ? /* @__PURE__ */ jsx47("div", { className: ProgressCircle_default.inner, "aria-hidden": valueText !== void 0 ? true : void 0, children }) : null
   ] });
 }
 
 // src/components/radio/Radio.tsx
-import * as React52 from "react";
+import * as React51 from "react";
 
 // src/components/radio/Radio.module.css
 var Radio_default = {
@@ -10764,7 +10788,7 @@ var Radio_default = {
 };
 
 // src/components/radio/Radio.tsx
-import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
 var RADIO_GROUP_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 var [RadioGroupProvider, useRadioGroupContext] = createComponentContext("Radio.Group");
 function RadioGroup({
@@ -10793,7 +10817,7 @@ function RadioGroup({
   const size = useControlSize(sizeProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid }, ariaDescribedBy);
   const name = nameProp ?? ids.controlId;
-  const reportChange = React52.useCallback(
+  const reportChange = React51.useCallback(
     (next) => {
       if (next !== void 0) onValueChange?.(next);
     },
@@ -10804,11 +10828,11 @@ function RadioGroup({
     defaultValue,
     onChange: reportChange
   });
-  const ctxValue = React52.useMemo(
+  const ctxValue = React51.useMemo(
     () => ({ name, value, setValue, size, disabled, invalid: ids.invalid, required }),
     [name, value, setValue, size, disabled, ids.invalid, required]
   );
-  return /* @__PURE__ */ jsx49(RadioGroupProvider, { value: ctxValue, children: /* @__PURE__ */ jsx49(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(RadioGroupProvider, { value: ctxValue, children: /* @__PURE__ */ jsx48(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx48(
     FieldFrame,
     {
       ...rest,
@@ -10823,7 +10847,7 @@ function RadioGroup({
       optionalLabel: labelsProp?.optional ?? RADIO_GROUP_LABELS.optional,
       group: true,
       className,
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx48(
         "div",
         {
           id: ids.controlId,
@@ -10858,7 +10882,7 @@ function RadioRoot({
   const ids = useFieldFrame(id, { hint, invalid: group.invalid }, ariaDescribedBy);
   const disabled = group.disabled || disabledProp;
   const checked = group.value === value;
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     ChoiceField,
     {
       ids,
@@ -10867,8 +10891,8 @@ function RadioRoot({
       disabled,
       hint,
       className: cx(Radio_default.root, className),
-      control: /* @__PURE__ */ jsxs37(Fragment10, { children: [
-        /* @__PURE__ */ jsx49(
+      control: /* @__PURE__ */ jsxs36(Fragment9, { children: [
+        /* @__PURE__ */ jsx48(
           "input",
           {
             ...inputRest,
@@ -10886,7 +10910,7 @@ function RadioRoot({
             "aria-describedby": ids.describedBy
           }
         ),
-        /* @__PURE__ */ jsx49("span", { className: cx(choiceVisualClass, Radio_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx49("span", { className: Radio_default.dot }) })
+        /* @__PURE__ */ jsx48("span", { className: cx(choiceVisualClass, Radio_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx48("span", { className: Radio_default.dot }) })
       ] }),
       children
     }
@@ -10894,7 +10918,7 @@ function RadioRoot({
 }
 RadioRoot.displayName = "Radio.Root";
 function RadioLabel(props) {
-  return /* @__PURE__ */ jsx49(ChoiceLabel, { ...props });
+  return /* @__PURE__ */ jsx48(ChoiceLabel, { ...props });
 }
 RadioLabel.displayName = "Radio.Label";
 var Radio = {
@@ -10915,7 +10939,7 @@ var Slider_default = {
 };
 
 // src/components/slider/Slider.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
 var SLIDER_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 function Slider({
@@ -10954,7 +10978,7 @@ function Slider({
   const safeValue = clamp(value, min, max);
   const ratio = max > min ? (safeValue - min) / (max - min) : 0;
   const valueText = formatValue ? formatValue(safeValue) : String(safeValue);
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     FieldFrame,
     {
       ...rest,
@@ -10967,12 +10991,12 @@ function Slider({
       error,
       disabled,
       optionalLabel: labelsProp?.optional ?? SLIDER_LABELS.optional,
-      labelEnd: showValue ? /* @__PURE__ */ jsx50("output", { className: Slider_default.value, htmlFor: ids.controlId, "aria-hidden": "true", children: valueText }) : void 0,
+      labelEnd: showValue ? /* @__PURE__ */ jsx49("output", { className: Slider_default.value, htmlFor: ids.controlId, "aria-hidden": "true", children: valueText }) : void 0,
       className: cx(Slider_default.root, className),
       style: { ...style, "--slider-ratio": ratio },
       ...toDataAttributes({ tone }),
-      children: /* @__PURE__ */ jsx50(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs38("div", { className: Slider_default.control, children: [
-        /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx49(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs37("div", { className: Slider_default.control, children: [
+        /* @__PURE__ */ jsx49(
           "input",
           {
             id: ids.controlId,
@@ -10993,15 +11017,15 @@ function Slider({
             "aria-invalid": ids.invalid || void 0
           }
         ),
-        /* @__PURE__ */ jsx50("span", { className: Slider_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx50("span", { className: Slider_default.range }) }),
-        /* @__PURE__ */ jsx50("span", { className: Slider_default.thumb, "aria-hidden": "true" })
+        /* @__PURE__ */ jsx49("span", { className: Slider_default.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx49("span", { className: Slider_default.range }) }),
+        /* @__PURE__ */ jsx49("span", { className: Slider_default.thumb, "aria-hidden": "true" })
       ] }) })
     }
   );
 }
 
 // src/components/smart-filter/SmartFilter.tsx
-import * as React53 from "react";
+import * as React52 from "react";
 
 // src/components/smart-filter/model.ts
 var EMPTY = { include: [], exclude: [] };
@@ -11065,7 +11089,7 @@ var SmartFilter_default = {
 };
 
 // src/components/smart-filter/SmartFilter.tsx
-import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var DEFAULT_LABELS4 = {
   filter: "\u0424\u0438\u043B\u044C\u0442\u0440",
   searchPlaceholder: "\u041F\u043E\u0438\u0441\u043A",
@@ -11113,7 +11137,7 @@ function SmartFilterRoot({
     defaultValue: defaultSearch,
     onChange: onSearchChange
   });
-  const [open, setOpen] = React53.useState(false);
+  const [open, setOpen] = React52.useState(false);
   const context = {
     fields,
     value: current,
@@ -11133,15 +11157,15 @@ function SmartFilterRoot({
     size,
     collapsedLimit
   };
-  return /* @__PURE__ */ jsx51(SmartFilterProvider, { value: context, children: /* @__PURE__ */ jsx51(Popover.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx51("div", { ref, className: cx(SmartFilter_default.root, className), "data-size": size, children }) }) });
+  return /* @__PURE__ */ jsx50(SmartFilterProvider, { value: context, children: /* @__PURE__ */ jsx50(Popover.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx50("div", { ref, className: cx(SmartFilter_default.root, className), "data-size": size, children }) }) });
 }
 SmartFilterRoot.displayName = "SmartFilter.Root";
 function SmartFilterToolbar({ className, ...rest }) {
   const { fields, total, open, setOpen, search, setSearch, labels, size } = useSmartFilter();
   const hasFilters = fields.length > 0;
-  return /* @__PURE__ */ jsxs39(Fragment12, { children: [
-    /* @__PURE__ */ jsx51(Popover.Anchor, { children: /* @__PURE__ */ jsxs39("div", { ...rest, className: cx(SmartFilter_default.toolbar, className), "data-slot": "smart-filter-toolbar", children: [
-      hasFilters && /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(Fragment11, { children: [
+    /* @__PURE__ */ jsx50(Popover.Anchor, { children: /* @__PURE__ */ jsxs38("div", { ...rest, className: cx(SmartFilter_default.toolbar, className), "data-slot": "smart-filter-toolbar", children: [
+      hasFilters && /* @__PURE__ */ jsxs38(
         Button.Root,
         {
           variant: "soft",
@@ -11152,15 +11176,15 @@ function SmartFilterToolbar({ className, ...rest }) {
           "aria-haspopup": "dialog",
           onClick: () => setOpen(!open),
           children: [
-            /* @__PURE__ */ jsx51(Button.Icon, { children: /* @__PURE__ */ jsx51(Icon, { name: "action.filter" }) }),
+            /* @__PURE__ */ jsx50(Button.Icon, { children: /* @__PURE__ */ jsx50(Icon, { name: "action.filter" }) }),
             labels.filter,
-            total > 0 && /* @__PURE__ */ jsx51(Badge.Root, { color: "blue", children: total })
+            total > 0 && /* @__PURE__ */ jsx50(Badge.Root, { color: "blue", children: total })
           ]
         }
       ),
-      /* @__PURE__ */ jsx51(Input.Root, { size, className: SmartFilter_default.search, labels: { clear: labels.clearSearch }, children: /* @__PURE__ */ jsxs39(Input.Wrapper, { children: [
-        /* @__PURE__ */ jsx51(Input.Icon, { side: "start", children: /* @__PURE__ */ jsx51(Icon, { name: "action.search", tone: "secondary" }) }),
-        /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx50(Input.Root, { size, className: SmartFilter_default.search, labels: { clear: labels.clearSearch }, children: /* @__PURE__ */ jsxs38(Input.Wrapper, { children: [
+        /* @__PURE__ */ jsx50(Input.Icon, { side: "start", children: /* @__PURE__ */ jsx50(Icon, { name: "action.search", tone: "secondary" }) }),
+        /* @__PURE__ */ jsx50(
           Input.Field,
           {
             type: "search",
@@ -11175,10 +11199,10 @@ function SmartFilterToolbar({ className, ...rest }) {
             }
           }
         ),
-        search.length > 0 && /* @__PURE__ */ jsx51(Input.ClearButton, { onClick: () => setSearch("") })
+        search.length > 0 && /* @__PURE__ */ jsx50(Input.ClearButton, { onClick: () => setSearch("") })
       ] }) })
     ] }) }),
-    hasFilters && /* @__PURE__ */ jsx51(Popover.Content, { matchTriggerWidth: true, flush: true, size, children: /* @__PURE__ */ jsx51(Panel, {}) })
+    hasFilters && /* @__PURE__ */ jsx50(Popover.Content, { matchTriggerWidth: true, flush: true, size, children: /* @__PURE__ */ jsx50(Panel, {}) })
   ] });
 }
 SmartFilterToolbar.displayName = "SmartFilter.Toolbar";
@@ -11196,7 +11220,7 @@ function Panel() {
     collapsedLimit
   } = useSmartFilter();
   const query = search.trim();
-  const [expanded, setExpanded] = React53.useState(() => /* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = React52.useState(() => /* @__PURE__ */ new Set());
   const rows = fields.map((field) => {
     const selection = value[field.key];
     const known = new Set(field.options.map((o) => o.value));
@@ -11214,7 +11238,7 @@ function Panel() {
   if (query) {
     sections.push({
       key: "query",
-      node: /* @__PURE__ */ jsx51("div", { className: SmartFilter_default.queryRow, children: /* @__PURE__ */ jsxs39(
+      node: /* @__PURE__ */ jsx50("div", { className: SmartFilter_default.queryRow, children: /* @__PURE__ */ jsxs38(
         Button.Root,
         {
           variant: "ghost",
@@ -11223,9 +11247,9 @@ function Panel() {
           fullWidth: true,
           onClick: () => setOpen(false),
           children: [
-            /* @__PURE__ */ jsx51(Button.Icon, { children: /* @__PURE__ */ jsx51(Icon, { name: "action.search" }) }),
+            /* @__PURE__ */ jsx50(Button.Icon, { children: /* @__PURE__ */ jsx50(Icon, { name: "action.search" }) }),
             formatLabel(labels.searchText, { query }),
-            /* @__PURE__ */ jsx51(Kbd, { className: SmartFilter_default.queryKey, children: "\u21B5" })
+            /* @__PURE__ */ jsx50(Kbd, { className: SmartFilter_default.queryKey, children: "\u21B5" })
           ]
         }
       ) })
@@ -11237,10 +11261,10 @@ function Panel() {
     const all = field.options.map((o) => o.value);
     sections.push({
       key: `field:${field.key}`,
-      node: /* @__PURE__ */ jsxs39("div", { className: SmartFilter_default.row, "data-field": field.key, children: [
-        /* @__PURE__ */ jsx51(Typography, { as: "span", variant: "body-s", tone: "secondary", children: field.label }),
-        /* @__PURE__ */ jsxs39("div", { className: SmartFilter_default.values, children: [
-          shown.map((option) => /* @__PURE__ */ jsx51(
+      node: /* @__PURE__ */ jsxs38("div", { className: SmartFilter_default.row, "data-field": field.key, children: [
+        /* @__PURE__ */ jsx50(Typography, { as: "span", variant: "body-s", tone: "secondary", children: field.label }),
+        /* @__PURE__ */ jsxs38("div", { className: SmartFilter_default.values, children: [
+          shown.map((option) => /* @__PURE__ */ jsx50(
             ValueToggle,
             {
               option,
@@ -11252,7 +11276,7 @@ function Panel() {
             },
             option.value
           )),
-          collapsible && /* @__PURE__ */ jsxs39(
+          collapsible && /* @__PURE__ */ jsxs38(
             Badge.Root,
             {
               size,
@@ -11260,7 +11284,7 @@ function Panel() {
               onPress: () => setExpanded((prev) => new Set(prev).add(field.key)),
               children: [
                 formatLabel(labels.more, { count: options.length - collapsedLimit }),
-                /* @__PURE__ */ jsx51(Badge.Icon, { children: /* @__PURE__ */ jsx51(Icon, { name: "nav.chevronDown" }) })
+                /* @__PURE__ */ jsx50(Badge.Icon, { children: /* @__PURE__ */ jsx50(Icon, { name: "nav.chevronDown" }) })
               ]
             }
           )
@@ -11271,21 +11295,21 @@ function Panel() {
   if (empty.length > 0) {
     sections.push({
       key: "empty",
-      node: /* @__PURE__ */ jsx51(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx51(EmptyPage.Description, { children: formatLabel(labels.noMatches, { fields: empty.join(", ") }) }) })
+      node: /* @__PURE__ */ jsx50(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx50(EmptyPage.Description, { children: formatLabel(labels.noMatches, { fields: empty.join(", ") }) }) })
     });
   }
   sections.push({
     key: "footer",
-    node: /* @__PURE__ */ jsxs39("div", { className: SmartFilter_default.footer, children: [
-      /* @__PURE__ */ jsx51(Typography, { as: "span", variant: "caption", tone: "muted", className: SmartFilter_default.hint, children: labels.hint }),
-      /* @__PURE__ */ jsx51(Typography, { as: "span", variant: "caption", tone: "muted", children: formatLabel(labels.count, { count: total }) }),
-      total > 0 && /* @__PURE__ */ jsx51(Button.Root, { variant: "ghost", tone: "neutral", size: "xs", onClick: clearAll, children: labels.reset })
+    node: /* @__PURE__ */ jsxs38("div", { className: SmartFilter_default.footer, children: [
+      /* @__PURE__ */ jsx50(Typography, { as: "span", variant: "caption", tone: "muted", className: SmartFilter_default.hint, children: labels.hint }),
+      /* @__PURE__ */ jsx50(Typography, { as: "span", variant: "caption", tone: "muted", children: formatLabel(labels.count, { count: total }) }),
+      total > 0 && /* @__PURE__ */ jsx50(Button.Root, { variant: "ghost", tone: "neutral", size: "xs", onClick: clearAll, children: labels.reset })
     ] })
   });
-  return /* @__PURE__ */ jsxs39(Fragment12, { children: [
-    /* @__PURE__ */ jsx51(Popover.Title, { children: /* @__PURE__ */ jsx51(VisuallyHidden, { children: labels.filter }) }),
-    sections.map((section, index) => /* @__PURE__ */ jsxs39(React53.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx51(Divider, { role: "presentation" }),
+  return /* @__PURE__ */ jsxs38(Fragment11, { children: [
+    /* @__PURE__ */ jsx50(Popover.Title, { children: /* @__PURE__ */ jsx50(VisuallyHidden, { children: labels.filter }) }),
+    sections.map((section, index) => /* @__PURE__ */ jsxs38(React52.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx50(Divider, { role: "presentation" }),
       section.node
     ] }, section.key))
   ] });
@@ -11301,7 +11325,7 @@ var TIER_BELOW = {
 };
 function ValueToggle({ option, size, mode, canHide, query, onMode }) {
   const { labels } = useSmartFilter();
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     Badge.Root,
     {
       size: tagSizeOf(size),
@@ -11318,9 +11342,9 @@ function ValueToggle({ option, size, mode, canHide, query, onMode }) {
       },
       children: [
         mode === "exclude" && `${labels.not} `,
-        option.icon ? /* @__PURE__ */ jsx51(Badge.Icon, { children: option.icon }) : null,
-        /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(HighlightMatch, { text: option.label, query }) }),
-        /* @__PURE__ */ jsx51(
+        option.icon ? /* @__PURE__ */ jsx50(Badge.Icon, { children: option.icon }) : null,
+        /* @__PURE__ */ jsx50("span", { children: /* @__PURE__ */ jsx50(HighlightMatch, { text: option.label, query }) }),
+        /* @__PURE__ */ jsx50(
           Badge.Action,
           {
             label: formatLabel(mode === "exclude" ? labels.unhideValue : labels.hideValue, {
@@ -11340,7 +11364,7 @@ function SmartFilterChips({ className, ...rest }) {
   const { fields, value, setSelection, total, clearAll, setOpen, setSearch, labels, size } = useSmartFilter();
   if (total === 0) return null;
   const tagSize = tagSizeOf(size);
-  return /* @__PURE__ */ jsxs39("div", { ...rest, className: cx(SmartFilter_default.chips, className), "data-slot": "smart-filter-chips", children: [
+  return /* @__PURE__ */ jsxs38("div", { ...rest, className: cx(SmartFilter_default.chips, className), "data-slot": "smart-filter-chips", children: [
     fields.flatMap((field) => {
       const selection = value[field.key];
       if (!selection) return [];
@@ -11350,7 +11374,7 @@ function SmartFilterChips({ className, ...rest }) {
           field: field.label,
           value: labelOf2(v)
         });
-        return /* @__PURE__ */ jsx51(
+        return /* @__PURE__ */ jsx50(
           Badge.Root,
           {
             size: tagSize,
@@ -11368,7 +11392,7 @@ function SmartFilterChips({ className, ...rest }) {
         ...selection.exclude.map((v) => tag(v, true))
       ];
     }),
-    /* @__PURE__ */ jsxs39(
+    /* @__PURE__ */ jsxs38(
       Badge.Root,
       {
         size: tagSize,
@@ -11377,12 +11401,12 @@ function SmartFilterChips({ className, ...rest }) {
           setOpen(true);
         },
         children: [
-          /* @__PURE__ */ jsx51(Badge.Icon, { children: /* @__PURE__ */ jsx51(Icon, { name: "action.add" }) }),
+          /* @__PURE__ */ jsx50(Badge.Icon, { children: /* @__PURE__ */ jsx50(Icon, { name: "action.add" }) }),
           labels.add
         ]
       }
     ),
-    /* @__PURE__ */ jsx51(LinkButton, { asChild: true, tone: "neutral", size: TIER_BELOW[tagSize], className: SmartFilter_default.clearAll, children: /* @__PURE__ */ jsx51("button", { type: "button", onClick: clearAll, children: labels.clearAll }) })
+    /* @__PURE__ */ jsx50(LinkButton, { asChild: true, tone: "neutral", size: TIER_BELOW[tagSize], className: SmartFilter_default.clearAll, children: /* @__PURE__ */ jsx50("button", { type: "button", onClick: clearAll, children: labels.clearAll }) })
   ] });
 }
 SmartFilterChips.displayName = "SmartFilter.Chips";
@@ -11392,6 +11416,152 @@ var SmartFilter = {
   Chips: SmartFilterChips
 };
 
+// src/components/sparkline/Sparkline.tsx
+import * as React53 from "react";
+
+// src/components/sparkline/Sparkline.module.css
+var Sparkline_default = {
+  root: "Sparkline_root",
+  head: "Sparkline_head",
+  label: "Sparkline_label",
+  date: "Sparkline_date",
+  valueRow: "Sparkline_valueRow",
+  value: "Sparkline_value",
+  change: "Sparkline_change",
+  trend: "Sparkline_trend",
+  plot: "Sparkline_plot",
+  svg: "Sparkline_svg",
+  line: "Sparkline_line",
+  area: "Sparkline_area",
+  cursor: "Sparkline_cursor",
+  guide: "Sparkline_guide",
+  dot: "Sparkline_dot"
+};
+
+// src/components/sparkline/Sparkline.tsx
+import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+var SPARKLINE_LABELS = { point: "{label}: {value}" };
+var NUMBER = new Intl.NumberFormat("ru-RU");
+var PERCENT = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+function changeAt(data, index) {
+  if (index <= 0) return null;
+  const prev = data[index - 1].value;
+  return prev === 0 ? null : (data[index].value - prev) / Math.abs(prev) * 100;
+}
+function Sparkline({
+  data,
+  label,
+  formatValue = (value) => NUMBER.format(value),
+  labels: labelsProp,
+  className,
+  ref,
+  ...rest
+}) {
+  const labels = { ...SPARKLINE_LABELS, ...labelsProp };
+  const last = data.length - 1;
+  const [active, setActive] = React53.useState(null);
+  const index = active === null ? last : Math.min(active, last);
+  const point = data[index];
+  const [series, setSeries] = React53.useState({ data, version: 0 });
+  if (series.data !== data) setSeries({ data, version: series.version + 1 });
+  const version = series.data === data ? series.version : series.version + 1;
+  const swapped = useStateSwap(version);
+  const values = data.map((p) => p.value);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span2 = max - min || 1;
+  const y = (value) => 1 - (value - min) / span2;
+  const x = (i) => last > 0 ? i / last : 0.5;
+  const line = data.map((p, i) => `${i ? "L" : "M"}${x(i) * 100},${y(p.value) * 100}`).join("");
+  const fromPointer = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const ratio = rect.width ? (event.clientX - rect.left) / rect.width : 1;
+    setActive(Math.max(0, Math.min(last, Math.round(ratio * last))));
+  };
+  const change = changeAt(data, index);
+  const valueText = point ? formatValue(point.value) : "";
+  return /* @__PURE__ */ jsxs39(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: cx(Sparkline_default.root, className),
+      "data-scrubbing": active !== null || void 0,
+      children: [
+        /* @__PURE__ */ jsxs39("div", { className: Sparkline_default.head, children: [
+          /* @__PURE__ */ jsx51("span", { className: Sparkline_default.label, children: label }),
+          /* @__PURE__ */ jsx51("span", { className: Sparkline_default.date, children: point?.label })
+        ] }),
+        /* @__PURE__ */ jsxs39("div", { className: Sparkline_default.valueRow, children: [
+          /* @__PURE__ */ jsx51("span", { className: Sparkline_default.value, children: active === null ? /* @__PURE__ */ jsx51(RollingNumber, { children: valueText }) : valueText }),
+          change !== null ? /* @__PURE__ */ jsxs39(Badge.Root, { color: change < 0 ? "red" : "green", className: Sparkline_default.change, children: [
+            /* @__PURE__ */ jsx51(Badge.Icon, { className: Sparkline_default.trend, "data-down": change < 0 || void 0, children: /* @__PURE__ */ jsx51(Icon, { name: "status.trendUp" }) }),
+            `${change > 0 ? "+" : change < 0 ? "\u2212" : ""}${PERCENT.format(Math.abs(change))}%`
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs39(
+          "div",
+          {
+            className: Sparkline_default.plot,
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": Math.max(last, 0),
+            "aria-valuenow": index,
+            "aria-valuetext": point ? formatLabel(labels.point, { label: point.label, value: valueText }) : void 0,
+            onPointerDown: (event) => {
+              if (event.pointerType !== "mouse") event.currentTarget.setPointerCapture(event.pointerId);
+              fromPointer(event);
+            },
+            onPointerMove: fromPointer,
+            onPointerLeave: () => setActive(null),
+            onPointerUp: (event) => {
+              if (event.pointerType !== "mouse") setActive(null);
+            },
+            onPointerCancel: () => setActive(null),
+            onKeyDown: (event) => {
+              const next = event.key === "ArrowLeft" || event.key === "ArrowDown" ? index - 1 : event.key === "ArrowRight" || event.key === "ArrowUp" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? last : null;
+              if (next === null) return;
+              event.preventDefault();
+              setActive(Math.max(0, Math.min(last, next)));
+            },
+            onBlur: () => setActive(null),
+            children: [
+              /* @__PURE__ */ jsx51(
+                "svg",
+                {
+                  className: cx(Sparkline_default.svg, swapped && swapMotion_default.swapIn),
+                  viewBox: "0 0 100 100",
+                  preserveAspectRatio: "none",
+                  "aria-hidden": "true",
+                  children: data.length > 1 ? /* @__PURE__ */ jsxs39(Fragment12, { children: [
+                    /* @__PURE__ */ jsx51("path", { className: Sparkline_default.area, d: `${line}L100,100L0,100Z` }),
+                    /* @__PURE__ */ jsx51("path", { className: Sparkline_default.line, d: line })
+                  ] }) : null
+                },
+                version
+              ),
+              point ? /* @__PURE__ */ jsxs39(
+                "span",
+                {
+                  className: Sparkline_default.cursor,
+                  "aria-hidden": "true",
+                  style: { "--sparkline-x": x(index), "--sparkline-y": y(point.value) },
+                  children: [
+                    /* @__PURE__ */ jsx51("span", { className: Sparkline_default.guide }),
+                    /* @__PURE__ */ jsx51("span", { className: Sparkline_default.dot })
+                  ]
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/stepper/Stepper.tsx
 import * as React54 from "react";
 
@@ -11633,7 +11803,6 @@ var Tabs_default = {
   list: "Tabs_list",
   indicator: "Tabs_indicator",
   indicatorFolder: "Tabs_indicatorFolder",
-  indicatorPill: "Tabs_indicatorPill",
   item: "Tabs_item",
   tab: "Tabs_tab",
   content: "Tabs_content",
@@ -11708,14 +11877,16 @@ function TabsRoot({
     ...minItemWidth !== void 0 && { "--tabs-item-min": cssLength(minItemWidth) },
     ...maxItemWidth !== void 0 && { "--tabs-item-max": cssLength(maxItemWidth) }
   };
+  const depth = useNestedSurfaceDepth();
   return /* @__PURE__ */ jsx54(TabsProvider, { value: context, children: /* @__PURE__ */ jsx54(
     "div",
     {
       ...rest,
       className: cx(Tabs_default.root, className),
       style: { ...style, ...widths },
+      "data-depth": depth,
       ...toDataAttributes({ orientation, size, tone, "full-width": fullWidth }),
-      children: /* @__PURE__ */ jsx54("div", { className: Tabs_default.layout, children })
+      children: /* @__PURE__ */ jsx54(SurfaceDepthProvider, { value: depth, children: /* @__PURE__ */ jsx54("div", { className: Tabs_default.layout, children }) })
     }
   ) });
 }
@@ -11774,7 +11945,11 @@ function placeIndicator(list, indicator, activeValue, animate) {
   }
   const left = box.offsetLeft;
   const right = left + box.offsetWidth;
-  const flare = Number.parseFloat(getComputedStyle(indicator, "::after").width) || 0;
+  const top = box.offsetTop;
+  const bottom = top + box.offsetHeight;
+  const column = getComputedStyle(list).flexDirection.startsWith("column");
+  indicator.dataset.axis = column ? "y" : "x";
+  const flare = Number.parseFloat(getComputedStyle(indicator).scrollMarginTop) || 0;
   const transform = `translate(${left}px, ${box.offsetTop}px)`;
   const width = `${box.offsetWidth}px`;
   const height = `${box.offsetHeight}px`;
@@ -11786,18 +11961,35 @@ function placeIndicator(list, indicator, activeValue, animate) {
   indicator.style.transform = transform;
   indicator.style.width = width;
   indicator.style.height = height;
-  indicator.dataset.edgeStart = String(left - flare < 0);
-  indicator.dataset.edgeEnd = String(box === items.at(-1) && right + flare > list.clientWidth);
+  const scrolls = !column && list.scrollWidth > list.clientWidth + 0.5;
+  indicator.dataset.edgeStart = String(column ? top - flare < 0 : left - flare < 0);
+  indicator.dataset.edgeEnd = String(
+    box === items.at(-1) && (column ? bottom + flare > list.clientHeight : scrolls || right + flare > list.clientWidth)
+  );
   indicator.dataset.visible = String(box.offsetWidth > 0 && box.offsetHeight > 0);
 }
+function fadeDepth(list) {
+  const raw = getComputedStyle(list).getPropertyValue("--prime-space-8").trim();
+  const value = Number.parseFloat(raw);
+  if (!Number.isFinite(value)) return 0;
+  if (raw.endsWith("rem")) {
+    return value * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+  }
+  return value;
+}
 function revealActive(list, smooth) {
   if (list.scrollWidth <= list.clientWidth || typeof list.scrollTo !== "function") return;
   const box = list.querySelector('[role="tab"][aria-selected="true"]')?.parentElement;
   if (!box) return;
-  const start = box.offsetLeft;
-  const end = start + box.offsetWidth;
-  const left = start < list.scrollLeft ? start : end > list.scrollLeft + list.clientWidth ? end - list.clientWidth : null;
-  if (left !== null) list.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
+  const margin = fadeDepth(list);
+  const max = list.scrollWidth - list.clientWidth;
+  const start = box.offsetLeft - margin;
+  const end = box.offsetLeft + box.offsetWidth + margin;
+  const target = start < list.scrollLeft ? start : end > list.scrollLeft + list.clientWidth ? end - list.clientWidth : null;
+  if (target === null) return;
+  const left = Math.min(max, Math.max(0, target));
+  if (Math.abs(left - list.scrollLeft) < 1) return;
+  list.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
 }
 function useListLayout(listRef, indicatorRef, userChangeRef, activeValue, horizontal) {
   const [collapse, setCollapse] = React55.useState("full");
@@ -11874,7 +12066,7 @@ function TabsList({ children, className, ref, ...rest }) {
       role: "tablist",
       "aria-orientation": orientation,
       className: cx(Tabs_default.list, className),
-      "data-indicator": horizontal ? "folder" : "pill",
+      "data-indicator": "folder",
       "data-collapse": collapse,
       onKeyDown: handleKeyDown,
       children: [
@@ -11882,7 +12074,7 @@ function TabsList({ children, className, ref, ...rest }) {
           "div",
           {
             ref: indicatorRef,
-            className: cx(Tabs_default.indicator, horizontal ? Tabs_default.indicatorFolder : Tabs_default.indicatorPill),
+            className: cx(Tabs_default.indicator, Tabs_default.indicatorFolder),
             "data-indicator": "",
             "aria-hidden": "true",
             onTransitionEnd: (event) => {
@@ -13194,6 +13386,103 @@ var Timeline = {
   GapMeta: TimelineGapMeta
 };
 
+// src/motion/celebrate.ts
+var COLOR_TOKENS = [
+  "--prime-color-accent-default",
+  "--prime-color-success-default",
+  "--prime-color-warning-default",
+  "--prime-color-info-default"
+];
+var PIECES = 90;
+var DURATION_MS = 1400;
+var GRAVITY = 16e-4;
+var DRAG = 12e-4;
+function celebrate(options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") return Promise.resolve();
+  if (prefersReducedMotion()) return Promise.resolve();
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const { origin } = options;
+  let x = width / 2;
+  let y = height / 3;
+  let themed = document.body;
+  if (origin instanceof Element) {
+    const rect = origin.getBoundingClientRect();
+    x = rect.left + rect.width / 2;
+    y = rect.top + rect.height / 2;
+    themed = origin;
+  } else if (origin) {
+    x = origin.x;
+    y = origin.y;
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return Promise.resolve();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  canvas.setAttribute("aria-hidden", "true");
+  Object.assign(canvas.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: "var(--prime-z-toast)"
+  });
+  ctx.scale(dpr, dpr);
+  document.body.append(canvas);
+  const css = getComputedStyle(themed);
+  const colors = COLOR_TOKENS.map((token) => css.getPropertyValue(token).trim()).filter(Boolean);
+  const palette = colors.length > 0 ? colors : ["currentColor"];
+  const pieces = Array.from({ length: PIECES }, () => {
+    const direction = -Math.PI / 2 + (Math.random() - 0.5) * (Math.PI * 2) / 3;
+    const speed = 0.45 + Math.random() * 0.75;
+    return {
+      x,
+      y,
+      vx: Math.cos(direction) * speed,
+      vy: Math.sin(direction) * speed,
+      angle: Math.random() * Math.PI,
+      spin: (Math.random() - 0.5) * 0.02,
+      size: 5 + Math.random() * 5,
+      color: palette[Math.floor(Math.random() * palette.length)]
+    };
+  });
+  return new Promise((resolve) => {
+    const start = performance.now();
+    let prev = start;
+    const frame = (now) => {
+      const t = now - start;
+      const dt = Math.min(32, now - prev);
+      prev = now;
+      ctx.clearRect(0, 0, width, height);
+      if (t >= DURATION_MS) {
+        canvas.remove();
+        resolve();
+        return;
+      }
+      ctx.globalAlpha = t < DURATION_MS * 0.6 ? 1 : 1 - (t - DURATION_MS * 0.6) / (DURATION_MS * 0.4);
+      for (const piece of pieces) {
+        piece.vy += GRAVITY * dt;
+        piece.vx *= 1 - DRAG * dt;
+        piece.vy *= 1 - DRAG * dt;
+        piece.x += piece.vx * dt;
+        piece.y += piece.vy * dt;
+        piece.angle += piece.spin * dt;
+        ctx.save();
+        ctx.translate(piece.x, piece.y);
+        ctx.rotate(piece.angle);
+        ctx.fillStyle = piece.color;
+        ctx.fillRect(-piece.size / 2, -piece.size / 4, piece.size, piece.size / 2);
+        ctx.restore();
+      }
+      requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+  });
+}
+
 export {
   Kbd,
   AppHeader,
@@ -13234,7 +13523,6 @@ export {
   applyTheme,
   SegmentedControl,
   ExampleFrame,
-  ProgressBar,
   FileUpload,
   Kanban,
   Typography,
@@ -13251,10 +13539,12 @@ export {
   matchesSmartFilter,
   resolveSmartFilterValues,
   SmartFilter,
+  Sparkline,
   Stepper,
   Switch,
   Tabs,
   TagSelect,
   Textarea,
-  Timeline
+  Timeline,
+  celebrate
 };