prime-ui-kit 0.9.2 → 0.10.0

package/dist/chunks/{chunk-ZEFCDEEQ.js → chunk-4TRNUP45.js}

@@ -1,27 +1,91 @@
-// src/internal/ControlSizeContext.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var ControlSizeContext = React.createContext(null);
-ControlSizeContext.displayName = "ControlSizeContext";
-function ControlSizeProvider({ value, children }) {
-  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value, children });
-}
-ControlSizeProvider.displayName = "ControlSizeProvider";
-function useOptionalControlSize() {
-  return React.useContext(ControlSizeContext) ?? void 0;
-}
-function useControlSize(sizeProp) {
-  const host = React.useContext(ControlSizeContext);
-  return sizeProp ?? host ?? "m";
-}
+import {
+  Activity,
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Bell,
+  Bold,
+  BookOpen,
+  Calendar,
+  ChartColumn,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronsLeft,
+  ChevronsUpDown,
+  Circle,
+  CircleCheck,
+  CircleX,
+  CloudOff,
+  CloudUpload,
+  CodeXml,
+  ControlSizeProvider,
+  Copy,
+  Download,
+  Ellipsis,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileText,
+  GripVertical,
+  HardDrive,
+  House,
+  Image,
+  Inbox,
+  Info,
+  Italic,
+  KeyRound,
+  LayoutDashboard,
+  LayoutGrid,
+  Link2,
+  List,
+  ListFilter,
+  ListTodo,
+  Lock,
+  LogIn,
+  LogOut,
+  Mail,
+  MailCheck,
+  Menu,
+  MessageSquare,
+  Minus,
+  Monitor,
+  Moon,
+  Package,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Pipette,
+  Plus,
+  Receipt,
+  RefreshCw,
+  Rocket,
+  Search,
+  Send,
+  Settings,
+  ShoppingCart,
+  Smartphone,
+  Sun,
+  Tablet,
+  Trash2,
+  TriangleAlert,
+  Truck,
+  Underline,
+  UserRound,
+  Users,
+  Wallet,
+  X,
+  cx,
+  iconBoxClass,
+  textTone_default,
+  useControlSize,
+  useIconRoot,
+  useOptionalControlSize
+} from "./chunk-GFKDZFQR.js";
 
 // src/components/spinner/Spinner.tsx
-import * as React2 from "react";
-
-// src/internal/cx.ts
-function cx(...classNames) {
-  return classNames.filter(Boolean).join(" ");
-}
+import * as React from "react";
 
 // src/internal/data-attributes.ts
 function toDataAttributes(input) {
@@ -36,37 +100,16 @@ function toDataAttributes(input) {
   return result;
 }
 
-// src/internal/iconBox.module.css
-var iconBox_default = {
-  box: "iconBox_box",
-  xs: "iconBox_xs",
-  s: "iconBox_s",
-  m: "iconBox_m",
-  l: "iconBox_l",
-  xl: "iconBox_xl",
-  inherit: "iconBox_inherit"
-};
-
-// src/internal/iconBox.ts
-function iconBoxClass(size, tier) {
-  return cx(iconBox_default.box, iconBox_default[size ?? tier ?? "m"], size === void 0 && iconBox_default.inherit);
-}
-
-// src/internal/textTone.module.css
-var textTone_default = {
-  tone: "textTone_tone"
-};
-
 // src/internal/VisuallyHidden.module.css
 var VisuallyHidden_default = {
   root: "VisuallyHidden_root"
 };
 
 // src/internal/VisuallyHidden.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var visuallyHiddenClass = VisuallyHidden_default.root;
 function VisuallyHidden({ className, ...rest }) {
-  return /* @__PURE__ */ jsx2("span", { className: cx(VisuallyHidden_default.root, className), ...rest });
+  return /* @__PURE__ */ jsx("span", { className: cx(VisuallyHidden_default.root, className), ...rest });
 }
 
 // src/components/spinner/Spinner.module.css
@@ -77,7 +120,7 @@ var Spinner_default = {
 };
 
 // src/components/spinner/Spinner.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var SPINNER_LABELS = {
   loading: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"
 };
@@ -89,7 +132,7 @@ function Spinner({
   ...rest
 }) {
   const controlSize = useOptionalControlSize();
-  const labels = React2.useMemo(() => ({ ...SPINNER_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React.useMemo(() => ({ ...SPINNER_LABELS, ...labelsProp }), [labelsProp]);
   const size = sizeProp ?? controlSize ?? "m";
   return /* @__PURE__ */ jsxs(
     "span",
@@ -99,13 +142,16 @@ function Spinner({
       ...toDataAttributes({ size, tone: tone === "default" ? void 0 : tone }),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx3("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx3(VisuallyHidden, { children: labels.loading })
+        /* @__PURE__ */ jsx2("span", { className: Spinner_default.ring, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx2(VisuallyHidden, { children: labels.loading })
       ]
     }
   );
 }
 
+// src/components/button/Button.tsx
+import * as React7 from "react";
+
 // src/internal/fieldSurface.module.css
 var fieldSurface_default = {
   surface: "fieldSurface_surface"
@@ -127,12 +173,12 @@ var fieldTierClass = fieldTier_default.tier;
 var fieldTriggerClass = `${fieldTier_default.tier} ${fieldSurface_default.surface} ${fieldTrigger_default.trigger}`;
 
 // src/internal/iconLayout.ts
-import * as React3 from "react";
+import * as React2 from "react";
 function iconLayout(children, iconType) {
-  const content = React3.Children.toArray(children).filter(
+  const content = React2.Children.toArray(children).filter(
     (child) => !(typeof child === "string" && child.trim() === "")
   );
-  const isIcon = (child) => React3.isValidElement(child) && child.type === iconType;
+  const isIcon = (child) => React2.isValidElement(child) && child.type === iconType;
   const iconOnly = content.length > 0 && content.every(isIcon);
   return {
     iconOnly,
@@ -141,11 +187,152 @@ function iconLayout(children, iconType) {
   };
 }
 
+// src/internal/MorphText.tsx
+import * as React4 from "react";
+
+// src/hooks/usePresence.ts
+import * as React3 from "react";
+var DURATION_FALLBACK_MS = {
+  fast: 230,
+  base: 380,
+  slow: 570
+};
+var TIMEOUT_SLACK_MS = 50;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function parseDurationMs(raw) {
+  const value = raw.trim();
+  if (value === "") return null;
+  const n = Number.parseFloat(value);
+  if (Number.isNaN(n)) return null;
+  if (value.endsWith("ms")) return n;
+  if (value.endsWith("s")) return n * 1e3;
+  return null;
+}
+function motionDurationMs(token) {
+  if (typeof document === "undefined") return DURATION_FALLBACK_MS[token];
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(
+    `--prime-motion-duration-${token}`
+  );
+  return parseDurationMs(raw) ?? DURATION_FALLBACK_MS[token];
+}
+function exitTimeoutMs(token) {
+  return motionDurationMs(token) + TIMEOUT_SLACK_MS;
+}
+function usePresence(open, options = {}) {
+  const { exitDuration = "base" } = options;
+  const [mounted, setMounted] = React3.useState(open);
+  if (open && !mounted) setMounted(true);
+  if (!open && mounted && prefersReducedMotion()) setMounted(false);
+  const openRef = React3.useRef(open);
+  openRef.current = open;
+  React3.useEffect(() => {
+    if (open || !mounted) return;
+    const id = window.setTimeout(() => setMounted(false), exitTimeoutMs(exitDuration));
+    return () => window.clearTimeout(id);
+  }, [open, mounted, exitDuration]);
+  const onExitEnd = React3.useCallback((event) => {
+    if (event.target !== event.currentTarget) return;
+    if (!openRef.current) setMounted(false);
+  }, []);
+  return { mounted: open || mounted, state: open ? "open" : "closed", onExitEnd };
+}
+
+// src/internal/MorphText.module.css
+var MorphText_default = {
+  root: "MorphText_root",
+  morphing: "MorphText_morphing",
+  sizer: "MorphText_sizer",
+  layer: "MorphText_layer",
+  letter: "MorphText_letter",
+  letterOut: "MorphText_letterOut",
+  primeMorphOut: "MorphText_primeMorphOut",
+  letterIn: "MorphText_letterIn",
+  primeMorphIn: "MorphText_primeMorphIn"
+};
+
+// src/internal/MorphText.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function digitsOnly(a, b) {
+  return a.replace(/\d/g, "") === b.replace(/\d/g, "");
+}
+function letters(text, kind) {
+  return [...text].map((char, i) => /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cx(MorphText_default.letter, kind === "in" ? MorphText_default.letterIn : MorphText_default.letterOut),
+      style: { "--morph-i": i },
+      children: char
+    },
+    i
+  ));
+}
+function settleMs(text, root) {
+  const css = getComputedStyle(root);
+  const read = (name) => Number.parseFloat(css.getPropertyValue(name)) || 0;
+  const base = read("--prime-motion-duration-base");
+  const step = read("--prime-motion-stagger") / 6;
+  return base + step * text.length + 50;
+}
+function MorphText({ children: text, className }) {
+  const rootRef = React4.useRef(null);
+  const sizerRef = React4.useRef(null);
+  const prevText = React4.useRef(null);
+  const restWidth = React4.useRef(0);
+  const nextId = React4.useRef(0);
+  const [morph, setMorph] = React4.useState(null);
+  const morphRef = React4.useRef(morph);
+  morphRef.current = morph;
+  React4.useLayoutEffect(() => {
+    const root = rootRef.current;
+    const prev = prevText.current;
+    prevText.current = text;
+    if (!root || prev === null || prev === text) return;
+    if (prefersReducedMotion() || digitsOnly(prev, text)) {
+      setMorph(null);
+      return;
+    }
+    const running = morphRef.current;
+    const width = running ? root.getBoundingClientRect().width : restWidth.current;
+    nextId.current += 1;
+    setMorph({ id: nextId.current, from: running ? running.to : prev, to: text, width });
+  }, [text]);
+  React4.useLayoutEffect(() => {
+    if (!morph) return;
+    const root = rootRef.current;
+    const sizer = sizerRef.current;
+    if (!root || !sizer) return;
+    const target = sizer.getBoundingClientRect().width;
+    if (target !== morph.width) {
+      root.style.width = `${morph.width}px`;
+      root.getBoundingClientRect();
+      root.style.width = `${target}px`;
+    }
+    const timer = window.setTimeout(() => setMorph(null), settleMs(morph.to, root));
+    return () => window.clearTimeout(timer);
+  }, [morph]);
+  React4.useLayoutEffect(() => {
+    if (morph || !rootRef.current) return;
+    rootRef.current.style.width = "";
+    restWidth.current = rootRef.current.getBoundingClientRect().width;
+  });
+  if (!morph) {
+    return /* @__PURE__ */ jsx3("span", { ref: rootRef, className: cx(MorphText_default.root, className), children: text });
+  }
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: cx(MorphText_default.root, MorphText_default.morphing, className), children: [
+    /* @__PURE__ */ jsx3("span", { ref: sizerRef, className: MorphText_default.sizer, "aria-hidden": "true", children: morph.to }),
+    /* @__PURE__ */ jsx3("span", { className: MorphText_default.layer, "aria-hidden": "true", children: letters(morph.from, "out") }, `out-${morph.id}`),
+    /* @__PURE__ */ jsx3("span", { className: MorphText_default.layer, "aria-hidden": "true", children: letters(morph.to, "in") }, `in-${morph.id}`),
+    /* @__PURE__ */ jsx3(VisuallyHidden, { children: morph.to })
+  ] });
+}
+
 // src/internal/slot.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 
 // src/hooks/useMergedRefs.ts
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/internal/mergeRefs.ts
 function mergeRefs(...refs) {
@@ -163,7 +350,7 @@ function mergeRefs(...refs) {
 
 // src/hooks/useMergedRefs.ts
 function useMergedRefs(...refs) {
-  return React4.useMemo(() => mergeRefs(...refs), refs);
+  return React5.useMemo(() => mergeRefs(...refs), refs);
 }
 
 // src/internal/slot.tsx
@@ -206,14 +393,14 @@ function blockDisabledClick(event) {
   event.stopPropagation();
 }
 function Slot({ children, ref, ...slotProps }) {
-  const child = React5.isValidElement(children) ? children : null;
+  const child = React6.isValidElement(children) ? children : null;
   const childRef = child?.props.ref ?? void 0;
   const composedRef = useMergedRefs(ref, childRef);
   if (!child) return /* @__PURE__ */ jsx4(Fragment, { children });
   const merged = mergeProps(slotProps, child.props);
   const disabled = slotProps["aria-disabled"] === true || slotProps["aria-disabled"] === "true";
   if (disabled) merged.onClickCapture = blockDisabledClick;
-  return React5.cloneElement(child, { ...merged, ref: composedRef });
+  return React6.cloneElement(child, { ...merged, ref: composedRef });
 }
 Slot.displayName = "Slot";
 
@@ -231,11 +418,57 @@ var touchTargetBlockClass = touchTarget_default.targetBlock;
 var Button_default = {
   root: "Button_root",
   icon: "Button_icon",
-  spinner: "Button_spinner"
+  spinner: "Button_spinner",
+  fillTrack: "Button_fillTrack",
+  fill: "Button_fill"
 };
 
 // src/components/button/Button.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var BUTTON_LABELS = { holdHint: "\u0423\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" };
+var HOLD_MS = 1200;
+function useHoldToConfirm(enabled, onConfirm) {
+  const [phase, setPhase] = React7.useState("idle");
+  const timer = React7.useRef(void 0);
+  const confirm = React7.useRef(onConfirm);
+  confirm.current = onConfirm;
+  React7.useEffect(() => () => window.clearTimeout(timer.current), []);
+  const start = () => {
+    if (!enabled || phase === "holding" || phase === "done") return;
+    setPhase("holding");
+    timer.current = window.setTimeout(() => {
+      setPhase("done");
+      confirm.current?.();
+    }, HOLD_MS);
+  };
+  const stop = () => {
+    window.clearTimeout(timer.current);
+    setPhase(
+      (current) => current === "holding" ? "cancel" : current === "done" ? "idle" : current
+    );
+  };
+  return { phase, start, stop };
+}
+function morphLabels(children) {
+  const out = [];
+  let run = null;
+  const flush = () => {
+    if (run !== null && run !== "") {
+      out.push(/* @__PURE__ */ jsx5(MorphText, { children: run }, `label-${out.length}`));
+    }
+    run = null;
+  };
+  for (const child of React7.Children.toArray(children)) {
+    if (typeof child === "string" || typeof child === "number") {
+      run = (run ?? "") + String(child);
+    } else {
+      flush();
+      out.push(child);
+    }
+  }
+  flush();
+  return out;
+}
 function ButtonRoot({
   children,
   className,
@@ -245,6 +478,10 @@ function ButtonRoot({
   fullWidth,
   type = "button",
   loading = false,
+  progress,
+  holdToConfirm = false,
+  onConfirm,
+  labels,
   disabled,
   asChild = false,
   onClick: onClick2,
@@ -254,6 +491,11 @@ function ButtonRoot({
   const size = useControlSize(sizeProp);
   const isDisabled = disabled || loading;
   const layout = iconLayout(children, ButtonIcon);
+  const hold = useHoldToConfirm(holdToConfirm && !isDisabled, onConfirm);
+  const hintId = React7.useId();
+  const inProgress = progress !== void 0;
+  const [fillUsed, setFillUsed] = React7.useState(false);
+  if ((inProgress || holdToConfirm) && !fillUsed) setFillUsed(true);
   const dataAttrs = toDataAttributes({
     variant,
     tone,
@@ -266,7 +508,9 @@ function ButtonRoot({
     "leading-icon": layout.leadingIcon || void 0,
     "trailing-icon": layout.trailingIcon || void 0,
     // Without a leading icon the spinner is centered over the hidden label: width stays put.
-    "loading-overlay": loading && !asChild && !layout.leadingIcon && !layout.iconOnly || void 0
+    "loading-overlay": loading && !asChild && !layout.leadingIcon && !layout.iconOnly || void 0,
+    progress: inProgress || void 0,
+    hold: holdToConfirm ? hold.phase : void 0
   });
   const classes = cx(fieldTierClass, touchTargetClass, Button_default.root, className);
   if (asChild) {
@@ -284,23 +528,85 @@ function ButtonRoot({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx5(
+  const {
+    onPointerDown: onPointerDown2,
+    onPointerUp,
+    onPointerLeave,
+    onPointerCancel,
+    onKeyDown: onKeyDown2,
+    onKeyUp,
+    onBlur
+  } = rest;
+  const holdHandlers = holdToConfirm ? {
+    onPointerDown: (event) => {
+      onPointerDown2?.(event);
+      if (event.button === 0) hold.start();
+    },
+    onPointerUp: (event) => {
+      onPointerUp?.(event);
+      hold.stop();
+    },
+    onPointerLeave: (event) => {
+      onPointerLeave?.(event);
+      hold.stop();
+    },
+    onPointerCancel: (event) => {
+      onPointerCancel?.(event);
+      hold.stop();
+    },
+    onKeyDown: (event) => {
+      onKeyDown2?.(event);
+      if ((event.key === " " || event.key === "Enter") && !event.repeat) {
+        event.preventDefault();
+        hold.start();
+      }
+    },
+    onKeyUp: (event) => {
+      onKeyUp?.(event);
+      if (event.key === " " || event.key === "Enter") hold.stop();
+    },
+    onBlur: (event) => {
+      onBlur?.(event);
+      hold.stop();
+    },
+    onContextMenu: (event) => {
+      rest.onContextMenu?.(event);
+      if (hold.phase === "holding" || hold.phase === "done") event.preventDefault();
+    }
+  } : null;
+  const describedBy = holdToConfirm ? cx(rest["aria-describedby"], hintId) || void 0 : rest["aria-describedby"];
+  const button = /* @__PURE__ */ jsxs3(
     "button",
     {
       ...rest,
+      ...holdHandlers,
       ref,
       type,
       className: classes,
       disabled: isDisabled,
-      "aria-busy": loading || void 0,
+      "aria-busy": loading || inProgress || void 0,
+      "aria-describedby": describedBy,
       onClick: onClick2,
+      style: inProgress || holdToConfirm ? {
+        ...rest.style,
+        "--btn-progress": inProgress ? Math.min(1, Math.max(0, progress)) : void 0,
+        "--btn-hold-duration": holdToConfirm ? `${HOLD_MS}ms` : void 0
+      } : rest.style,
       ...dataAttrs,
-      children: /* @__PURE__ */ jsxs2(ControlSizeProvider, { value: size, children: [
-        loading ? /* @__PURE__ */ jsx5(Spinner, { className: Button_default.spinner, "aria-hidden": "true" }) : null,
-        children
-      ] })
+      children: [
+        fillUsed ? /* @__PURE__ */ jsx5("span", { className: Button_default.fillTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: Button_default.fill }) }) : null,
+        /* @__PURE__ */ jsxs3(ControlSizeProvider, { value: size, children: [
+          loading ? /* @__PURE__ */ jsx5(Spinner, { className: Button_default.spinner, "aria-hidden": "true" }) : null,
+          morphLabels(children)
+        ] })
+      ]
     }
   );
+  if (!holdToConfirm) return button;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    button,
+    /* @__PURE__ */ jsx5(VisuallyHidden, { id: hintId, children: { ...BUTTON_LABELS, ...labels }.holdHint })
+  ] });
 }
 ButtonRoot.displayName = "Button.Root";
 function ButtonIcon({ children, className, ...rest }) {
@@ -339,90 +645,7 @@ function Divider({
   );
 }
 
-// src/icons/Icon.module.css
-var Icon_default = {
-  root: "Icon_root"
-};
-
 // src/icons/registry.ts
-import {
-  Activity,
-  AlertTriangle,
-  ArrowDown,
-  ArrowUp,
-  ArrowUpDown,
-  Bell,
-  Bold,
-  BookOpen,
-  Calendar,
-  ChartColumn,
-  Check,
-  CheckCircle2,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsUpDown,
-  ChevronUp,
-  Circle,
-  CloudOff,
-  CloudUpload,
-  Code2,
-  Copy,
-  Download,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  FileText,
-  GripVertical,
-  HardDrive,
-  House,
-  Image,
-  Inbox,
-  Info,
-  Italic,
-  KeyRound,
-  LayoutDashboard,
-  LayoutGrid,
-  Link2,
-  List,
-  ListFilter,
-  ListTodo,
-  Lock,
-  LogIn,
-  LogOut,
-  Mail,
-  MailCheck,
-  Menu,
-  MessageSquare,
-  Minus,
-  Monitor,
-  Moon,
-  MoreHorizontal,
-  Package,
-  PanelLeftClose,
-  PanelLeftOpen,
-  Pipette,
-  Plus,
-  Receipt,
-  RefreshCw,
-  Rocket,
-  Search,
-  Send,
-  Settings,
-  ShoppingCart,
-  Smartphone,
-  Sun,
-  Tablet,
-  Trash2,
-  Truck,
-  Underline,
-  UserRound,
-  Users,
-  Wallet,
-  X,
-  XCircle
-} from "lucide-react";
 var iconRegistry = {
   "nav.chevronDown": ChevronDown,
   "nav.chevronLeft": ChevronLeft,
@@ -449,7 +672,7 @@ var iconRegistry = {
   "action.filter": ListFilter,
   "action.login": LogIn,
   "action.logout": LogOut,
-  "action.more": MoreHorizontal,
+  "action.more": Ellipsis,
   "action.refresh": RefreshCw,
   "action.remove": Minus,
   "action.search": Search,
@@ -487,16 +710,18 @@ var iconRegistry = {
   "sort.ascending": ArrowUp,
   "sort.descending": ArrowDown,
   "sort.none": ArrowUpDown,
-  "status.danger": XCircle,
+  "status.danger": CircleX,
   "status.emailSent": MailCheck,
   "status.info": Info,
   "status.locked": Lock,
   "status.offline": CloudOff,
-  "status.success": CheckCircle2,
-  "status.warning": AlertTriangle,
+  "status.success": CircleCheck,
+  /** A rising trend; a falling one is the same arrow turned half a turn (it rotates between them). */
+  "status.trendUp": ArrowUp,
+  "status.warning": TriangleAlert,
   "theme.dark": Moon,
   "theme.light": Sun,
-  "view.code": Code2,
+  "view.code": CodeXml,
   "view.preview": Eye,
   "viewport.desktop": Monitor,
   "viewport.mobile": Smartphone,
@@ -505,46 +730,44 @@ var iconRegistry = {
 
 // src/icons/Icon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
-function IconSvg({
-  glyph: GlyphSvg,
-  className,
-  size,
-  tone = "default",
-  strokeWidth = 1.75,
-  ...rest
-}) {
-  const tier = useOptionalControlSize();
-  return /* @__PURE__ */ jsx7(
-    GlyphSvg,
-    {
-      className: cx(Icon_default.root, iconBoxClass(size, tier), textTone_default.tone, className),
-      "data-tone": tone === "default" ? void 0 : tone,
-      strokeWidth,
-      "aria-hidden": "true",
-      ...rest
-    }
-  );
-}
 function Icon({ name, ...rest }) {
-  return /* @__PURE__ */ jsx7(IconSvg, { glyph: iconRegistry[name], ...rest });
+  const Glyph = iconRegistry[name];
+  return /* @__PURE__ */ jsx7(Glyph, { ...rest });
 }
 function createIcon(glyph) {
-  function DomainIcon(props) {
-    return /* @__PURE__ */ jsx7(IconSvg, { glyph, ...props });
+  const LucideGlyph = glyph;
+  function DomainIcon({
+    className,
+    size,
+    tone,
+    animated,
+    strokeWidth = 1.75,
+    ...rest
+  }) {
+    const root = useIconRoot({ className, size, tone, animated, motion: "generic" });
+    return /* @__PURE__ */ jsx7(
+      LucideGlyph,
+      {
+        strokeWidth,
+        "aria-hidden": "true",
+        ...root,
+        ...rest
+      }
+    );
   }
   DomainIcon.displayName = `Icon(${glyph.displayName ?? "Glyph"})`;
   return DomainIcon;
 }
 
 // src/components/scroll-container/ScrollContainer.tsx
-import * as React7 from "react";
+import * as React9 from "react";
 
 // src/hooks/useEdgeOverflow.ts
-import * as React6 from "react";
+import * as React8 from "react";
 var NONE = { start: false, end: false };
 function useEdgeOverflow(ref, enabled, horizontal) {
-  const [overflow, setOverflow] = React6.useState(NONE);
-  React6.useLayoutEffect(() => {
+  const [overflow, setOverflow] = React8.useState(NONE);
+  React8.useLayoutEffect(() => {
     const node = ref.current;
     if (!enabled || !node) return;
     const update = () => {
@@ -552,6 +775,8 @@ function useEdgeOverflow(ref, enabled, horizontal) {
       const max = horizontal ? node.scrollWidth - node.clientWidth : node.scrollHeight - node.clientHeight;
       const start = position > 1;
       const end = max - position > 1;
+      node.style.setProperty("--edge-start", `${Math.max(0, position)}px`);
+      node.style.setProperty("--edge-end", `${Math.max(0, max - position)}px`);
       setOverflow((prev) => prev.start === start && prev.end === end ? prev : { start, end });
     };
     let frame = 0;
@@ -613,7 +838,7 @@ function ScrollContainer({
   ref,
   ...rest
 }) {
-  const innerRef = React7.useRef(null);
+  const innerRef = React9.useRef(null);
   const mergedRef = useMergedRefs(innerRef, ref);
   const horizontal = axis === "horizontal";
   const overflow = useEdgeOverflow(innerRef, fade, horizontal);
@@ -725,7 +950,7 @@ var Label_default = {
 };
 
 // src/components/label/Label.tsx
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var LABEL_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
 function LabelRoot({
   className,
@@ -749,7 +974,7 @@ function LabelRoot({
         "aria-disabled": disabled || void 0,
         ...rest,
         ...toDataAttributes({ disabled: disabled || void 0, size }),
-        children: /* @__PURE__ */ jsxs3(ControlSizeProvider, { value: size, children: [
+        children: /* @__PURE__ */ jsxs4(ControlSizeProvider, { value: size, children: [
           children,
           required ? /* @__PURE__ */ jsx10("span", { className: Label_default.asterisk, "aria-hidden": "true", children: "*" }) : null,
           optional ? /* @__PURE__ */ jsx10("span", { className: Label_default.optional, children: labels?.optional ?? LABEL_LABELS.optional }) : null
@@ -774,21 +999,21 @@ var Label = {
 };
 
 // src/components/checkbox/Checkbox.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 
 // src/hooks/useControllableState.ts
-import * as React8 from "react";
+import * as React10 from "react";
 function useControllableState({
   value,
   defaultValue,
   onChange
 }) {
-  const [internalValue, setInternalValue] = React8.useState(defaultValue);
+  const [internalValue, setInternalValue] = React10.useState(defaultValue);
   const isControlled = value !== void 0;
   const currentValue = isControlled ? value : internalValue;
-  const currentValueRef = React8.useRef(currentValue);
+  const currentValueRef = React10.useRef(currentValue);
   currentValueRef.current = currentValue;
-  const setValue = React8.useCallback(
+  const setValue = React10.useCallback(
     (nextValue) => {
       const previousValue = currentValueRef.current;
       const computedValue = typeof nextValue === "function" ? nextValue(previousValue) : nextValue;
@@ -806,62 +1031,34 @@ function useControllableState({
   return [currentValue, setValue];
 }
 
-// src/internal/ChoiceField.module.css
-var ChoiceField_default = {
-  tier: "ChoiceField_tier",
-  field: "ChoiceField_field",
-  row: "ChoiceField_row",
-  controlCell: "ChoiceField_controlCell",
-  input: "ChoiceField_input",
-  text: "ChoiceField_text",
-  support: "ChoiceField_support",
-  visual: "ChoiceField_visual"
+// src/internal/CheckMark.module.css
+var CheckMark_default = {
+  svg: "CheckMark_svg",
+  check: "CheckMark_check",
+  bar: "CheckMark_bar"
 };
 
-// src/internal/ChoiceField.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var choiceInputClass = ChoiceField_default.input;
-var choiceVisualClass = ChoiceField_default.visual;
-var choiceTierClass = ChoiceField_default.tier;
-function ChoiceField({
-  ids,
-  size,
-  state,
-  disabled,
-  readOnly = false,
-  hint,
-  error,
-  control,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsx11(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs4(
-    "div",
+// src/internal/CheckMark.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function CheckMark({ state, className }) {
+  return /* @__PURE__ */ jsxs5(
+    "svg",
     {
-      className: cx(ChoiceField_default.tier, ChoiceField_default.field, className),
-      ...toDataAttributes({
-        size,
-        state,
-        invalid: ids.invalid || void 0,
-        disabled: disabled || void 0,
-        readonly: readOnly || void 0
-      }),
+      viewBox: "0 0 24 24",
+      className: cx(CheckMark_default.svg, className),
+      "data-state": state,
+      "aria-hidden": "true",
+      focusable: "false",
       children: [
-        /* @__PURE__ */ jsxs4("label", { htmlFor: ids.controlId, className: ChoiceField_default.row, children: [
-          /* @__PURE__ */ jsx11("span", { className: cx(ChoiceField_default.controlCell, touchTargetClass), children: control }),
-          children
-        ] }),
-        ids.showError ? /* @__PURE__ */ jsx11(Hint.Root, { id: ids.errorId, size, invalid: true, className: ChoiceField_default.support, children: error }) : ids.showHint ? /* @__PURE__ */ jsx11(Hint.Root, { id: ids.hintId, size, disabled, className: ChoiceField_default.support, children: hint }) : null
+        /* @__PURE__ */ jsx11("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
+        /* @__PURE__ */ jsx11("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
       ]
-    }
-  ) });
-}
-function ChoiceLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx11("span", { className: cx(ChoiceField_default.text, className), ...rest });
+    }
+  );
 }
 
 // src/internal/FieldFrame.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 
 // src/internal/formatLabel.ts
 function formatLabel(template, values) {
@@ -871,6 +1068,31 @@ function formatLabel(template, values) {
   ).trim();
 }
 
+// src/internal/RollingNumber.module.css
+var RollingNumber_default = {
+  root: "RollingNumber_root",
+  digit: "RollingNumber_digit",
+  char: "RollingNumber_char"
+};
+
+// src/internal/RollingNumber.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function RollingNumber({ children, className }) {
+  const chars = [...String(children)];
+  return /* @__PURE__ */ jsx12("span", { className: cx(RollingNumber_default.root, className), children: chars.map((char, i) => {
+    const key = chars.length - i;
+    return /\d/.test(char) ? /* @__PURE__ */ jsx12(
+      "span",
+      {
+        className: RollingNumber_default.digit,
+        style: { "--rolling-n": char },
+        children: char
+      },
+      `d${key}`
+    ) : /* @__PURE__ */ jsx12("span", { className: RollingNumber_default.char, children: char }, `c${key}`);
+  }) });
+}
+
 // src/internal/FieldFrame.module.css
 var FieldFrame_default = {
   root: "FieldFrame_root",
@@ -880,11 +1102,16 @@ var FieldFrame_default = {
   body: "FieldFrame_body",
   supportText: "FieldFrame_supportText",
   support: "FieldFrame_support",
-  counter: "FieldFrame_counter"
+  shakeSelf: "FieldFrame_shakeSelf",
+  "field-shake-odd": "FieldFrame_field-shake-odd",
+  "field-shake-even": "FieldFrame_field-shake-even",
+  counter: "FieldFrame_counter",
+  leaving: "FieldFrame_leaving",
+  "field-error-leave": "FieldFrame_field-error-leave"
 };
 
 // src/internal/FieldFrame.tsx
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function hasContent(node) {
   return node != null && node !== false && node !== "";
 }
@@ -894,7 +1121,7 @@ function useFieldFrame(explicitId, {
   error,
   invalid
 }, ariaDescribedBy) {
-  const generated = React9.useId();
+  const generated = React11.useId();
   const controlId = explicitId ?? generated;
   const labelId = `${controlId}-label`;
   const hintId = `${controlId}-hint`;
@@ -914,6 +1141,25 @@ function useFieldFrame(explicitId, {
     invalid: Boolean(invalid) || showError
   };
 }
+function useErrorShake(invalid, error) {
+  const key = !invalid ? null : typeof error === "string" || typeof error === "number" ? String(error) : "invalid";
+  const previous = React11.useRef(key);
+  const [count, setCount] = React11.useState(0);
+  React11.useEffect(() => {
+    if (key !== null && key !== previous.current) setCount((n) => n + 1);
+    previous.current = key;
+  }, [key]);
+  if (count === 0) return void 0;
+  return count % 2 ? "odd" : "even";
+}
+function useLeavingError(showError, error) {
+  const last = React11.useRef(error);
+  if (showError) last.current = error;
+  const presence = usePresence(showError, { exitDuration: "fast" });
+  if (showError || !presence.mounted) return null;
+  return { node: last.current, onExitEnd: presence.onExitEnd };
+}
+var leavingErrorClass = FieldFrame_default.leaving;
 function FieldFrame({
   size,
   ids,
@@ -933,8 +1179,10 @@ function FieldFrame({
   ...rest
 }) {
   const { showError, showHint } = ids;
-  const showSupport = showError || showHint || counter != null || reserveSupportRow;
-  const labelNode = hasContent(label) ? /* @__PURE__ */ jsx12(
+  const leaving = useLeavingError(showError, error);
+  const showSupport = showError || showHint || leaving != null || counter != null || reserveSupportRow;
+  const shake = useErrorShake(ids.invalid, error);
+  const labelNode = hasContent(label) ? /* @__PURE__ */ jsx13(
     Label.Root,
     {
       id: ids.labelId,
@@ -948,7 +1196,7 @@ function FieldFrame({
       children: label
     }
   ) : null;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ...rest,
@@ -956,22 +1204,34 @@ function FieldFrame({
       ...toDataAttributes({
         size,
         invalid: ids.invalid || void 0,
-        disabled: disabled || void 0
+        disabled: disabled || void 0,
+        shake
       }),
       children: [
-        labelEnd != null ? /* @__PURE__ */ jsxs5("div", { className: FieldFrame_default.labelRow, children: [
+        labelEnd != null ? /* @__PURE__ */ jsxs6("div", { className: FieldFrame_default.labelRow, children: [
           labelNode,
-          /* @__PURE__ */ jsx12("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
+          /* @__PURE__ */ jsx13("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
         ] }) : labelNode,
-        /* @__PURE__ */ jsxs5("div", { className: FieldFrame_default.body, children: [
+        /* @__PURE__ */ jsxs6("div", { className: FieldFrame_default.body, children: [
           children,
-          showSupport ? /* @__PURE__ */ jsxs5(
+          showSupport ? /* @__PURE__ */ jsxs6(
             "div",
             {
               className: FieldFrame_default.support,
               ...toDataAttributes({ size, reserve: reserveSupportRow || void 0 }),
               children: [
-                showError ? /* @__PURE__ */ jsx12(Hint.Root, { id: ids.errorId, size, invalid: true, className: FieldFrame_default.supportText, children: error }) : showHint ? /* @__PURE__ */ jsx12(
+                showError ? /* @__PURE__ */ jsx13(Hint.Root, { id: ids.errorId, size, invalid: true, className: FieldFrame_default.supportText, children: error }) : leaving ? /* @__PURE__ */ jsx13(
+                  Hint.Root,
+                  {
+                    size,
+                    invalid: true,
+                    "aria-hidden": "true",
+                    "data-state": "closed",
+                    onAnimationEnd: leaving.onExitEnd,
+                    className: cx(FieldFrame_default.supportText, FieldFrame_default.leaving),
+                    children: leaving.node
+                  }
+                ) : showHint ? /* @__PURE__ */ jsx13(
                   Hint.Root,
                   {
                     id: ids.hintId,
@@ -980,7 +1240,7 @@ function FieldFrame({
                     className: FieldFrame_default.supportText,
                     children: hint
                   }
-                ) : /* @__PURE__ */ jsx12("span", { className: FieldFrame_default.supportText }),
+                ) : /* @__PURE__ */ jsx13("span", { className: FieldFrame_default.supportText }),
                 counter
               ]
             }
@@ -991,7 +1251,7 @@ function FieldFrame({
   );
 }
 function FieldCounter({ current, max, size, label, className, ...rest }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "span",
     {
       ...rest,
@@ -1000,35 +1260,101 @@ function FieldCounter({ current, max, size, label, className, ...rest }) {
       "data-invalid": current > max || void 0,
       "aria-live": "polite",
       children: [
-        /* @__PURE__ */ jsxs5("span", { "aria-hidden": "true", children: [
-          current,
+        /* @__PURE__ */ jsxs6("span", { "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx13(RollingNumber, { children: current }),
           "/",
           max
         ] }),
-        /* @__PURE__ */ jsx12(VisuallyHidden, { children: formatLabel(label, { current, max }) })
+        /* @__PURE__ */ jsx13(VisuallyHidden, { children: formatLabel(label, { current, max }) })
       ]
     }
   );
 }
 
+// src/internal/ChoiceField.module.css
+var ChoiceField_default = {
+  tier: "ChoiceField_tier",
+  field: "ChoiceField_field",
+  row: "ChoiceField_row",
+  controlCell: "ChoiceField_controlCell",
+  input: "ChoiceField_input",
+  text: "ChoiceField_text",
+  support: "ChoiceField_support",
+  visual: "ChoiceField_visual"
+};
+
+// src/internal/ChoiceField.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var choiceInputClass = ChoiceField_default.input;
+var choiceVisualClass = ChoiceField_default.visual;
+var choiceTierClass = ChoiceField_default.tier;
+function ChoiceField({
+  ids,
+  size,
+  state,
+  disabled,
+  readOnly = false,
+  hint,
+  error,
+  control,
+  className,
+  children
+}) {
+  const shake = useErrorShake(ids.invalid, error);
+  const leaving = useLeavingError(ids.showError, error);
+  return /* @__PURE__ */ jsx14(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cx(ChoiceField_default.tier, ChoiceField_default.field, className),
+      ...toDataAttributes({
+        size,
+        state,
+        invalid: ids.invalid || void 0,
+        disabled: disabled || void 0,
+        readonly: readOnly || void 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "label",
+          {
+            htmlFor: ids.controlId,
+            className: cx(ChoiceField_default.row, FieldFrame_default.shakeSelf),
+            "data-shake": shake,
+            children: [
+              /* @__PURE__ */ jsx14("span", { className: cx(ChoiceField_default.controlCell, touchTargetClass), children: control }),
+              children
+            ]
+          }
+        ),
+        ids.showError ? /* @__PURE__ */ jsx14(Hint.Root, { id: ids.errorId, size, invalid: true, className: ChoiceField_default.support, children: error }) : leaving ? /* @__PURE__ */ jsx14(
+          Hint.Root,
+          {
+            size,
+            invalid: true,
+            "aria-hidden": "true",
+            "data-state": "closed",
+            onAnimationEnd: leaving.onExitEnd,
+            className: cx(ChoiceField_default.support, leavingErrorClass),
+            children: leaving.node
+          }
+        ) : ids.showHint ? /* @__PURE__ */ jsx14(Hint.Root, { id: ids.hintId, size, disabled, className: ChoiceField_default.support, children: hint }) : null
+      ]
+    }
+  ) });
+}
+function ChoiceLabel({ className, ...rest }) {
+  return /* @__PURE__ */ jsx14("span", { className: cx(ChoiceField_default.text, className), ...rest });
+}
+
 // src/components/checkbox/Checkbox.module.css
 var Checkbox_default = {
   root: "Checkbox_root",
   indicator: "Checkbox_indicator",
-  control: "Checkbox_control",
-  svg: "Checkbox_svg",
-  checkPath: "Checkbox_checkPath",
-  indeterminateLine: "Checkbox_indeterminateLine"
+  control: "Checkbox_control"
 };
 
 // src/components/checkbox/Checkbox.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
-function CheckboxMark() {
-  return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", className: Checkbox_default.svg, "aria-hidden": "true", focusable: "false", children: [
-    /* @__PURE__ */ jsx13("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: Checkbox_default.checkPath }),
-    /* @__PURE__ */ jsx13("path", { d: "M7 12h10", pathLength: 1, className: Checkbox_default.indeterminateLine })
-  ] });
-}
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function CheckboxRoot({
   id,
   checked: checkedProp,
@@ -1054,12 +1380,12 @@ function CheckboxRoot({
     defaultValue: defaultChecked,
     onChange: onCheckedChange
   });
-  const internalRef = React10.useRef(null);
+  const internalRef = React12.useRef(null);
   const mergedRef = useMergedRefs(internalRef, ref);
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     if (internalRef.current) internalRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     ChoiceField,
     {
       ids,
@@ -1070,8 +1396,8 @@ function CheckboxRoot({
       hint,
       error,
       className: cx(Checkbox_default.root, className),
-      control: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx13(
+      control: /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        /* @__PURE__ */ jsx15(
           "input",
           {
             ...inputRest,
@@ -1089,7 +1415,12 @@ function CheckboxRoot({
             "aria-describedby": ids.describedBy
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: cx(choiceVisualClass, Checkbox_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx13(CheckboxMark, {}) })
+        /* @__PURE__ */ jsx15("span", { className: cx(choiceVisualClass, Checkbox_default.control), "aria-hidden": "true", children: /* @__PURE__ */ jsx15(
+          CheckMark,
+          {
+            state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
+          }
+        ) })
       ] }),
       children
     }
@@ -1097,7 +1428,7 @@ function CheckboxRoot({
 }
 CheckboxRoot.displayName = "Checkbox.Root";
 function CheckboxLabel(props) {
-  return /* @__PURE__ */ jsx13(ChoiceLabel, { ...props });
+  return /* @__PURE__ */ jsx15(ChoiceLabel, { ...props });
 }
 CheckboxLabel.displayName = "Checkbox.Label";
 function CheckboxIndicator({
@@ -1109,7 +1440,7 @@ function CheckboxIndicator({
   ...rest
 }) {
   const size = useControlSize(sizeProp);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     "span",
     {
       "aria-hidden": "true",
@@ -1126,7 +1457,7 @@ function CheckboxIndicator({
         disabled: disabled || void 0
       }),
       ...rest,
-      children: /* @__PURE__ */ jsx13(CheckboxMark, {})
+      children: /* @__PURE__ */ jsx15(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
     }
   );
 }
@@ -1138,7 +1469,7 @@ var Checkbox = {
 };
 
 // src/internal/swatch.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 
 // src/internal/swatch.module.css
 var swatch_default = {
@@ -1151,7 +1482,7 @@ var swatch_default = {
 };
 
 // src/internal/swatch.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var COLOR_PRESETS = [
   { value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
   { value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
@@ -1171,7 +1502,7 @@ var COLOR_PRESETS = [
   { value: "#be185d", label: "\u0422\u0451\u043C\u043D\u043E-\u0440\u043E\u0437\u043E\u0432\u044B\u0439" }
 ];
 function useSwatchOptions(presets, allowEmpty, emptyLabel) {
-  return React11.useMemo(
+  return React13.useMemo(
     () => [
       ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
       ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "dark" }] : []
@@ -1182,17 +1513,17 @@ function useSwatchOptions(presets, allowEmpty, emptyLabel) {
 var swatchClass = swatch_default.swatch;
 var swatchTierClass = swatch_default.tier;
 function SwatchFill({ value }) {
-  if (value == null) return /* @__PURE__ */ jsx14("span", { "aria-hidden": true, className: swatch_default.checker });
-  return /* @__PURE__ */ jsx14("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx14("rect", { width: "1", height: "1", fill: value }) });
+  if (value == null) return /* @__PURE__ */ jsx16("span", { "aria-hidden": true, className: swatch_default.checker });
+  return /* @__PURE__ */ jsx16("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx16("rect", { width: "1", height: "1", fill: value }) });
 }
 function SwatchContent({ value, selected }) {
-  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx14(SwatchFill, { value }),
-    selected ? /* @__PURE__ */ jsx14(Icon, { name: "action.check", strokeWidth: 3, className: swatch_default.check }) : null
+  return /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(SwatchFill, { value }),
+    /* @__PURE__ */ jsx16(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
   ] });
 }
 function SwatchChip({ value, className, ...rest }) {
-  return /* @__PURE__ */ jsx14("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx14(SwatchFill, { value }) });
+  return /* @__PURE__ */ jsx16("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx16(SwatchFill, { value }) });
 }
 function sameColor(a, b) {
   return (a ?? "").trim().toLowerCase() === (b ?? "").trim().toLowerCase();
@@ -1236,7 +1567,7 @@ function markContrast(value) {
 }
 
 // src/components/color-swatches/ColorSwatches.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 
 // src/internal/rovingFocus.ts
 var PREV = {
@@ -1285,7 +1616,7 @@ var ColorSwatches_default = {
 };
 
 // src/components/color-swatches/ColorSwatches.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var COLOR_SWATCHES_LABELS = {
   group: "\u0426\u0432\u0435\u0442",
   empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
@@ -1330,7 +1661,7 @@ function ColorSwatches({
   const options = useSwatchOptions(presets, allowEmpty, labels.empty);
   const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
   const focusIndex = Math.max(0, selectedIndex);
-  const itemRefs = React12.useRef([]);
+  const itemRefs = React14.useRef([]);
   const labelledBy = ariaLabelledBy ?? ids.labelledBy;
   const onKeyDown2 = (event) => {
     const current = itemRefs.current.indexOf(document.activeElement);
@@ -1345,7 +1676,7 @@ function ColorSwatches({
     setValue(options[next].value);
     itemRefs.current[next]?.focus();
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     FieldFrame,
     {
       ...rest,
@@ -1360,7 +1691,7 @@ function ColorSwatches({
       optionalLabel: labels.optional,
       group: true,
       className,
-      children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs10(
         "div",
         {
           id: ids.controlId,
@@ -1382,7 +1713,7 @@ function ColorSwatches({
               const selected = index === selectedIndex;
               return (
                 // biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx17(
                   "button",
                   {
                     ref: (el) => {
@@ -1401,13 +1732,13 @@ function ColorSwatches({
                       contrast: option.contrast
                     }),
                     onClick: () => setValue(option.value),
-                    children: /* @__PURE__ */ jsx15(SwatchContent, { value: option.value, selected })
+                    children: /* @__PURE__ */ jsx17(SwatchContent, { value: option.value, selected })
                   },
                   option.value ?? "empty"
                 )
               );
             }),
-            name ? /* @__PURE__ */ jsx15("input", { type: "hidden", name, value: value ?? "" }) : null
+            name ? /* @__PURE__ */ jsx17("input", { type: "hidden", name, value: value ?? "" }) : null
           ]
         }
       )
@@ -1425,7 +1756,7 @@ var EmptyPage_default = {
 };
 
 // src/components/empty-page/EmptyPage.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function EmptyPageRoot({
   size = "m",
   layout = "default",
@@ -1433,31 +1764,31 @@ function EmptyPageRoot({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: cx(EmptyPage_default.root, layout !== "compact" && enterMotion_default.enterBaseChildren, className),
       ...rest,
       ...toDataAttributes({ size, layout: layout === "default" ? void 0 : layout }),
-      children: /* @__PURE__ */ jsx16(ControlSizeProvider, { value: size, children })
+      children: /* @__PURE__ */ jsx18(ControlSizeProvider, { value: size, children })
     }
   );
 }
 EmptyPageRoot.displayName = "EmptyPage.Root";
 function EmptyPageIcon({ tone = "neutral", className, ...rest }) {
-  return /* @__PURE__ */ jsx16("div", { className: cx(EmptyPage_default.iconWrap, className), "data-tone": tone, ...rest });
+  return /* @__PURE__ */ jsx18("div", { className: cx(EmptyPage_default.iconWrap, className), "data-tone": tone, ...rest });
 }
 EmptyPageIcon.displayName = "EmptyPage.Icon";
 function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
-  return /* @__PURE__ */ jsx16(Tag, { ref, className: cx(EmptyPage_default.title, className), ...rest });
+  return /* @__PURE__ */ jsx18(Tag, { ref, className: cx(EmptyPage_default.title, className), ...rest });
 }
 EmptyPageTitle.displayName = "EmptyPage.Title";
 function EmptyPageDescription({ className, ...rest }) {
-  return /* @__PURE__ */ jsx16("p", { className: cx(EmptyPage_default.description, className), ...rest });
+  return /* @__PURE__ */ jsx18("p", { className: cx(EmptyPage_default.description, className), ...rest });
 }
 EmptyPageDescription.displayName = "EmptyPage.Description";
 function EmptyPageActions({ className, ...rest }) {
-  return /* @__PURE__ */ jsx16("div", { className: cx(EmptyPage_default.actions, className), ...rest });
+  return /* @__PURE__ */ jsx18("div", { className: cx(EmptyPage_default.actions, className), ...rest });
 }
 EmptyPageActions.displayName = "EmptyPage.Actions";
 var EmptyPage = {
@@ -1468,16 +1799,208 @@ var EmptyPage = {
   Actions: EmptyPageActions
 };
 
+// src/components/progress-bar/ProgressBar.tsx
+import * as React15 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",
+  step: "ProgressBar_step"
+};
+
+// src/components/progress-bar/ProgressBar.tsx
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var MIN_STEPS = 2;
+var MAX_STEPS = 12;
+function useStepOrder(filled, count) {
+  const prev = React15.useRef(filled);
+  const from = prev.current;
+  React15.useEffect(() => {
+    prev.current = filled;
+  }, [filled]);
+  return Array.from(
+    { length: count },
+    (_, i) => filled >= from ? Math.max(0, i - from) : Math.max(0, from - 1 - i)
+  );
+}
+function ProgressBar(props) {
+  const {
+    label,
+    size = "m",
+    showValue = false,
+    className,
+    value: valueProp,
+    max: maxProp,
+    tone: toneProp,
+    segments: segmentsProp,
+    segmentGap = "none",
+    steps = false,
+    labels,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const labelId = React15.useId();
+  const descriptionId = React15.useId();
+  const stepResolved = !segmentsProp && steps ? resolveValue(valueProp ?? 0, maxProp) : null;
+  const stepCount = stepResolved ? Math.min(MAX_STEPS, Math.max(MIN_STEPS, Math.round(stepResolved.max))) : 0;
+  const stepFilled = stepResolved ? Math.round(stepResolved.value / stepResolved.max * stepCount) : 0;
+  const stepOrder = useStepOrder(stepFilled, stepCount);
+  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__ */ jsxs11(Fragment5, { children: [
+      named ? /* @__PURE__ */ jsx19(VisuallyHidden, { id: descriptionId, children: text }) : null,
+      /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: ProgressBar_default.bar,
+          role: "group",
+          ...a11y,
+          ...toDataAttributes({ "segment-gap": segmentGap }),
+          children: [
+            total > 0 ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.segments, style: { flexGrow: total }, children: segments.map((seg, i) => /* @__PURE__ */ jsx19(
+              "span",
+              {
+                className: ProgressBar_default.segment,
+                style: { flexGrow: seg.value },
+                title: seg.label,
+                ...toDataAttributes({ tone: seg.tone ?? "accent" })
+              },
+              i
+            )) }) : null,
+            free > 0 || total === 0 ? /* @__PURE__ */ jsx19("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__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx19(
+        "progress",
+        {
+          value,
+          max,
+          "aria-labelledby": label ? labelId : void 0,
+          "aria-label": label ? void 0 : ariaLabel,
+          className: ProgressBar_default.native
+        }
+      ),
+      steps ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.bar, "aria-hidden": "true", "data-steps": "true", children: stepOrder.map((order, i) => /* @__PURE__ */ jsx19(
+        "span",
+        {
+          className: ProgressBar_default.step,
+          "data-filled": i < stepFilled || void 0,
+          style: { "--pb-step-order": order }
+        },
+        i
+      )) }) : /* @__PURE__ */ jsx19(
+        "span",
+        {
+          className: ProgressBar_default.bar,
+          "aria-hidden": "true",
+          style: { "--pb-ratio": resolved.ratio },
+          children: /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.fill })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: cx(ProgressBar_default.root, className), ...rest, ...toDataAttributes({ size, tone }), children: [
+    label || showValue ? /* @__PURE__ */ jsxs11("div", { className: ProgressBar_default.header, children: [
+      label ? /* @__PURE__ */ jsx19("span", { className: ProgressBar_default.label, id: labelId, children: label }) : null,
+      showValue ? /* @__PURE__ */ jsxs11("span", { className: ProgressBar_default.value, "aria-hidden": "true", children: [
+        percent,
+        "%"
+      ] }) : null
+    ] }) : null,
+    bar
+  ] });
+}
+
+// src/components/input/passwordStrength.ts
+var SHORT = 8;
+function getPasswordStrength(value) {
+  if (value.length === 0) return 0;
+  const points = Number(/\p{Ll}/u.test(value)) + Number(/\p{Lu}/u.test(value)) + Number(/\p{N}/u.test(value)) + Number(/[^\p{L}\p{N}\s]/u.test(value)) + Number(value.length >= 10) + Number(value.length >= 14);
+  const level = points >= 5 ? 4 : points === 4 ? 3 : points === 3 ? 2 : 1;
+  return value.length < SHORT ? Math.min(level, 2) : level;
+}
+
 // src/components/input/Input.tsx
-import * as React14 from "react";
+import * as React17 from "react";
 
 // src/internal/context.ts
-import * as React13 from "react";
+import * as React16 from "react";
 function createComponentContext(displayName) {
-  const Ctx = React13.createContext(null);
+  const Ctx = React16.createContext(null);
   Ctx.displayName = `${displayName}Context`;
   function useComponentContext() {
-    const value = React13.useContext(Ctx);
+    const value = React16.useContext(Ctx);
     if (value === null) {
       throw new Error(
         `[prime-ui-kit] \`${displayName}\` sub-component must be used inside \`${displayName}.Root\`.`
@@ -1496,15 +2019,27 @@ var Input_default = {
   field: "Input_field",
   inlineAffix: "Input_inlineAffix",
   icon: "Input_icon",
-  action: "Input_action"
+  action: "Input_action",
+  strengthWord: "Input_strengthWord"
 };
 
 // src/components/input/Input.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var INPUT_LABELS = {
   optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
   clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
-  counter: "{current} \u0438\u0437 {max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432"
+  counter: "{current} \u0438\u0437 {max} \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432",
+  strength: "\u041D\u0430\u0434\u0451\u0436\u043D\u043E\u0441\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044F",
+  strengthWeak: "\u0421\u043B\u0430\u0431\u044B\u0439",
+  strengthEasy: "\u041B\u0451\u0433\u043A\u0438\u0439",
+  strengthMedium: "\u0421\u0440\u0435\u0434\u043D\u0438\u0439",
+  strengthHard: "\u0421\u043B\u043E\u0436\u043D\u044B\u0439"
+};
+var STRENGTH_TONES = {
+  1: "danger",
+  2: "warning",
+  3: "accent",
+  4: "success"
 };
 var [InputProvider, useInputContext] = createComponentContext("Input");
 function InputRoot({
@@ -1519,17 +2054,20 @@ function InputRoot({
   counter,
   reserveSupportRow = false,
   id,
+  strength = false,
+  getStrength = getPasswordStrength,
   labels: labelsProp,
   children,
   className,
   ...rest
 }) {
+  const [strengthValue, setStrengthValue] = React17.useState("");
   const size = useControlSize(sizeProp);
   const ids = useFieldFrame(id, { label, hint, error, invalid });
-  const labels = React14.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React17.useMemo(() => ({ ...INPUT_LABELS, ...labelsProp }), [labelsProp]);
   const { invalid: isInvalid, controlId: inputId, describedBy } = ids;
-  const inputRef = React14.useRef(null);
-  const contextValue = React14.useMemo(
+  const inputRef = React17.useRef(null);
+  const contextValue = React17.useMemo(
     () => ({
       size,
       invalid: isInvalid,
@@ -1538,11 +2076,14 @@ function InputRoot({
       inputId,
       inputRef,
       describedBy,
-      labels
+      labels,
+      reportValue: strength ? setStrengthValue : null
     }),
-    [size, isInvalid, focusRing, required, inputId, describedBy, labels]
+    [size, isInvalid, focusRing, required, inputId, describedBy, labels, strength]
   );
-  return /* @__PURE__ */ jsx17(InputProvider, { value: contextValue, children: /* @__PURE__ */ jsx17(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx17(
+  const level = strength ? getStrength(strengthValue) : 0;
+  const levelWord = level ? [labels.strengthWeak, labels.strengthEasy, labels.strengthMedium, labels.strengthHard][level - 1] : "";
+  return /* @__PURE__ */ jsx20(InputProvider, { value: contextValue, children: /* @__PURE__ */ jsx20(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs12(
     FieldFrame,
     {
       ...rest,
@@ -1553,18 +2094,45 @@ function InputRoot({
       optional,
       hint,
       error,
-      counter,
-      reserveSupportRow,
+      counter: strength ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+        /* @__PURE__ */ jsx20(
+          "span",
+          {
+            className: Input_default.strengthWord,
+            "data-tone": level ? STRENGTH_TONES[level] : void 0,
+            "aria-live": "polite",
+            children: levelWord ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+              /* @__PURE__ */ jsx20(VisuallyHidden, { children: `${labels.strength}: ` }),
+              /* @__PURE__ */ jsx20(MorphText, { children: levelWord })
+            ] }) : null
+          }
+        ),
+        counter
+      ] }) : counter,
+      reserveSupportRow: reserveSupportRow || strength,
       optionalLabel: labels.optional,
       className: cx(fieldTierClass, Input_default.root, className),
-      children
+      children: [
+        children,
+        strength ? /* @__PURE__ */ jsx20(
+          ProgressBar,
+          {
+            steps: true,
+            value: level,
+            max: 4,
+            tone: level ? STRENGTH_TONES[level] : "neutral",
+            size: "xs",
+            "aria-label": labels.strength
+          }
+        ) : null
+      ]
     }
   ) }) });
 }
 InputRoot.displayName = "Input.Root";
 function InputWrapper({ children, className, ...rest }) {
   const { size, invalid, focusRing } = useInputContext();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...rest,
@@ -1588,10 +2156,23 @@ function InputField({
   ref,
   ...rest
 }) {
-  const { inputId, inputRef, invalid, required: requiredCtx, describedBy } = useInputContext();
+  const {
+    inputId,
+    inputRef,
+    invalid,
+    required: requiredCtx,
+    describedBy,
+    reportValue
+  } = useInputContext();
   const setRefs = useMergedRefs(inputRef, ref);
+  const controlled = rest.value;
+  React17.useEffect(() => {
+    if (!reportValue) return;
+    if (controlled !== void 0) reportValue(String(controlled));
+    else if (inputRef.current) reportValue(inputRef.current.value);
+  }, [reportValue, controlled, inputRef]);
   const resolvedDescribedBy = [ariaDescribedBy, describedBy].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "input",
     {
       ...rest,
@@ -1604,21 +2185,22 @@ function InputField({
       onChange: (event) => {
         onChange?.(event);
         onValueChange?.(event.target.value);
+        reportValue?.(event.target.value);
       }
     }
   );
 }
 InputField.displayName = "Input.Field";
 function InputIcon({ side, children, className, ...rest }) {
-  return /* @__PURE__ */ jsx17("span", { ...rest, className: cx(Input_default.icon, className), "data-side": side, "aria-hidden": "true", children });
+  return /* @__PURE__ */ jsx20("span", { ...rest, className: cx(Input_default.icon, className), "data-side": side, "aria-hidden": "true", children });
 }
 InputIcon.displayName = "Input.Icon";
 function InputAffix({ side, children, className, ...rest }) {
-  return /* @__PURE__ */ jsx17("div", { ...rest, className: cx(Input_default.affix, className), "data-side": side, "aria-hidden": "true", children });
+  return /* @__PURE__ */ jsx20("div", { ...rest, className: cx(Input_default.affix, className), "data-side": side, "aria-hidden": "true", children });
 }
 InputAffix.displayName = "Input.Affix";
 function InputInlineAffix({ side, children, className, ...rest }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "span",
     {
       ...rest,
@@ -1632,7 +2214,7 @@ function InputInlineAffix({ side, children, className, ...rest }) {
 InputInlineAffix.displayName = "Input.InlineAffix";
 function InputClearButton({ className, onClick: onClick2, ref, ...rest }) {
   const { inputId, inputRef, labels } = useInputContext();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
       ...rest,
@@ -1645,14 +2227,14 @@ function InputClearButton({ className, onClick: onClick2, ref, ...rest }) {
         onClick2?.(event);
         if (!event.defaultPrevented) inputRef.current?.focus();
       },
-      children: /* @__PURE__ */ jsx17(Icon, { name: "action.close" })
+      children: /* @__PURE__ */ jsx20(Icon, { name: "action.close" })
     }
   );
 }
 InputClearButton.displayName = "Input.ClearButton";
 function InputCounter(props) {
   const { size, labels } = useInputContext();
-  return /* @__PURE__ */ jsx17(FieldCounter, { ...props, size, label: labels.counter });
+  return /* @__PURE__ */ jsx20(FieldCounter, { ...props, size, label: labels.counter });
 }
 InputCounter.displayName = "Input.Counter";
 var Input = {
@@ -1667,17 +2249,17 @@ var Input = {
 };
 
 // src/internal/imageSlot.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 
 // src/hooks/useImageStatus.ts
-import * as React15 from "react";
+import * as React18 from "react";
 function useImageStatus(report, { onLoad, onError } = {}) {
-  const [status, setStatus] = React15.useState("loading");
-  React15.useLayoutEffect(() => {
+  const [status, setStatus] = React18.useState("loading");
+  React18.useLayoutEffect(() => {
     report("loading");
     return () => report("idle");
   }, [report]);
-  const handleLoad = React15.useCallback(
+  const handleLoad = React18.useCallback(
     (event) => {
       setStatus("loaded");
       report("loaded");
@@ -1685,7 +2267,7 @@ function useImageStatus(report, { onLoad, onError } = {}) {
     },
     [onLoad, report]
   );
-  const handleError = React15.useCallback(
+  const handleError = React18.useCallback(
     (event) => {
       setStatus("error");
       report("error");
@@ -1697,18 +2279,18 @@ function useImageStatus(report, { onLoad, onError } = {}) {
 }
 
 // src/internal/imageSlot.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function createImageSlot(name, classNames) {
   const [Provider, useSlotContext] = createComponentContext(name);
   function ImageSlotProvider({ children }) {
-    const [imageStatus, setImageStatus] = React16.useState("idle");
-    const value = React16.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
-    return /* @__PURE__ */ jsx18(Provider, { value, children });
+    const [imageStatus, setImageStatus] = React19.useState("idle");
+    const value = React19.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
+    return /* @__PURE__ */ jsx21(Provider, { value, children });
   }
   function ImageInner({ src, alt = "", className, onLoad, onError, ...rest }) {
     const { setImageStatus } = useSlotContext();
     const image = useImageStatus(setImageStatus, { onLoad, onError });
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx21(
       "img",
       {
         src,
@@ -1722,12 +2304,12 @@ function createImageSlot(name, classNames) {
     );
   }
   function Image2(props) {
-    return /* @__PURE__ */ jsx18(ImageInner, { ...props }, props.src);
+    return /* @__PURE__ */ jsx21(ImageInner, { ...props }, props.src);
   }
   Image2.displayName = `${name}.Image`;
   function Fallback({ className, ...rest }) {
     const { imageStatus } = useSlotContext();
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx21(
       "span",
       {
         className: cx(classNames.fallback, className),
@@ -1758,7 +2340,7 @@ var Thumbnail_default = {
 };
 
 // src/components/thumbnail/Thumbnail.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var slot = createImageSlot("Thumbnail", { image: Thumbnail_default.image, fallback: Thumbnail_default.fallback });
 function ThumbnailRoot({
   size = "m",
@@ -1771,7 +2353,7 @@ function ThumbnailRoot({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx19(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx22(
     "div",
     {
       className: cx(Thumbnail_default.root, palette_default.hue, className),
@@ -1790,7 +2372,7 @@ function ThumbnailRoot({
 }
 ThumbnailRoot.displayName = "Thumbnail.Root";
 function ThumbnailImage({ fit = "cover", ...rest }) {
-  return /* @__PURE__ */ jsx19(slot.Image, { ...rest, "data-fit": fit });
+  return /* @__PURE__ */ jsx22(slot.Image, { ...rest, "data-fit": fit });
 }
 ThumbnailImage.displayName = "Thumbnail.Image";
 var ThumbnailFallback = slot.Fallback;
@@ -1801,10 +2383,10 @@ var Thumbnail = {
 };
 
 // src/components/select/Select.tsx
-import * as React30 from "react";
+import * as React33 from "react";
 
 // src/internal/listbox.ts
-import * as React17 from "react";
+import * as React20 from "react";
 var optionDomId = (listboxId, value) => `${listboxId}-opt-${value.replace(/\s+/g, "_")}`;
 function enabledOptions(container) {
   if (!container) return [];
@@ -1829,11 +2411,11 @@ function createStore(initial) {
   };
 }
 function useCreateStore(initial) {
-  return React17.useState(() => createStore(initial))[0];
+  return React20.useState(() => createStore(initial))[0];
 }
 function useStoreSlice(store, select) {
   const read = () => select(store.get());
-  return React17.useSyncExternalStore(store.subscribe, read, read);
+  return React20.useSyncExternalStore(store.subscribe, read, read);
 }
 function handleListboxKeyDown(event, { items, highlight, onSelect }) {
   if (items.length === 0) return;
@@ -1855,10 +2437,10 @@ function handleListboxKeyDown(event, { items, highlight, onSelect }) {
 }
 var TYPEAHEAD_RESET_MS = 500;
 function useTypeahead() {
-  const state = React17.useRef({ buffer: "", timer: 0 });
-  React17.useEffect(() => () => window.clearTimeout(state.current.timer), []);
-  const isTyping = React17.useCallback(() => state.current.buffer !== "", []);
-  const find = React17.useCallback(
+  const state = React20.useRef({ buffer: "", timer: 0 });
+  React20.useEffect(() => () => window.clearTimeout(state.current.timer), []);
+  const isTyping = React20.useCallback(() => state.current.buffer !== "", []);
+  const find = React20.useCallback(
     (key, items, highlighted) => {
       const s = state.current;
       window.clearTimeout(s.timer);
@@ -1880,7 +2462,7 @@ function useTypeahead() {
 }
 
 // src/internal/MenuGroup.tsx
-import * as React18 from "react";
+import * as React21 from "react";
 
 // src/internal/menu.module.css
 var menu_default = {
@@ -1898,12 +2480,12 @@ var menu_default = {
 };
 
 // src/internal/MenuGroup.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function MenuGroup({ label, className, children, ...rest }) {
-  const labelId = React18.useId();
+  const labelId = React21.useId();
   return (
     // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         ...rest,
@@ -1911,7 +2493,7 @@ function MenuGroup({ label, className, children, ...rest }) {
         "aria-labelledby": label != null ? labelId : void 0,
         className: cx(menu_default.group, className),
         children: [
-          label != null ? /* @__PURE__ */ jsx20("div", { id: labelId, role: "presentation", className: menu_default.groupLabel, children: label }) : null,
+          label != null ? /* @__PURE__ */ jsx23("div", { id: labelId, role: "presentation", className: menu_default.groupLabel, children: label }) : null,
           children
         ]
       }
@@ -1948,11 +2530,11 @@ var overlayMotion_default = {
 };
 
 // src/internal/Portal.tsx
-import * as React19 from "react";
+import * as React22 from "react";
 import { createPortal } from "react-dom";
 function Portal({ children, container }) {
-  const [mounted, setMounted] = React19.useState(false);
-  React19.useLayoutEffect(() => {
+  const [mounted, setMounted] = React22.useState(false);
+  React22.useLayoutEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
@@ -1967,8 +2549,28 @@ var sheet_default = {
   swipeX: "sheet_swipeX"
 };
 
+// src/internal/surfaceDepth.tsx
+import * as React23 from "react";
+var SurfaceDepthContext = React23.createContext(0);
+SurfaceDepthContext.displayName = "SurfaceDepthContext";
+function nextSurfaceDepth(depth) {
+  if (typeof depth === "number") return Math.min(depth + 1, 4);
+  if (depth === "tinted") return 1;
+  return depth === "floating" ? "floating-1" : "floating-2";
+}
+function useNestedSurfaceDepth() {
+  return nextSurfaceDepth(React23.useContext(SurfaceDepthContext));
+}
+var SurfaceDepthProvider = SurfaceDepthContext.Provider;
+var StageDepthContext = React23.createContext(0);
+StageDepthContext.displayName = "StageDepthContext";
+var StageDepthProvider = StageDepthContext.Provider;
+function useStageDepth() {
+  return React23.useContext(StageDepthContext);
+}
+
 // src/internal/overlay/layerStack.ts
-import * as React20 from "react";
+import * as React24 from "react";
 
 // src/internal/overlay/focus.ts
 var FOCUSABLE = [
@@ -2089,22 +2691,22 @@ function push(entry) {
     if (stack.length === 0) listen(false);
   };
 }
-var LayerContext = React20.createContext(null);
+var LayerContext = React24.createContext(null);
 var LayerProvider = LayerContext.Provider;
 function useLayer(open, options) {
-  const parent = React20.useContext(LayerContext);
-  const [entry] = React20.useState(() => ({ parent, trap: false, ...options }));
+  const parent = React24.useContext(LayerContext);
+  const [entry] = React24.useState(() => ({ parent, trap: false, ...options }));
   entry.parent = parent;
   entry.refs = options.refs;
   entry.dismiss = options.dismiss;
   entry.trap = options.trap ?? false;
   entry.onDismiss = options.onDismiss;
-  React20.useLayoutEffect(() => open ? push(entry) : void 0, [open, entry]);
+  React24.useLayoutEffect(() => open ? push(entry) : void 0, [open, entry]);
   return entry;
 }
 
 // src/internal/overlay/FloatingPanel.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function FloatingPanel({
   floating,
   size,
@@ -2129,6 +2731,7 @@ function FloatingPanel({
       className
     ),
     "data-size": size,
+    ...surface && !sheet ? { "data-depth": "floating" } : null,
     ...sheet ? null : {
       "data-state": presence.state,
       "data-side": floating.side,
@@ -2139,9 +2742,9 @@ function FloatingPanel({
       floating.onKeyDown(event);
     }
   };
-  const panel = scroll ? /* @__PURE__ */ jsx21(ScrollContainer, { ...props, ref: panelRef, children }) : /* @__PURE__ */ jsx21("div", { ...props, ref: panelRef, children });
-  return /* @__PURE__ */ jsx21(Portal, { children: /* @__PURE__ */ jsx21(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx21(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx21(
+  const panel = scroll ? /* @__PURE__ */ jsx24(ScrollContainer, { ...props, ref: panelRef, children }) : /* @__PURE__ */ jsx24("div", { ...props, ref: panelRef, children });
+  return /* @__PURE__ */ jsx24(Portal, { children: /* @__PURE__ */ jsx24(LayerProvider, { value: floating.layer, children: /* @__PURE__ */ jsx24(SurfaceDepthProvider, { value: "floating", children: /* @__PURE__ */ jsx24(ControlSizeProvider, { value: size, children: sheet ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    /* @__PURE__ */ jsx24(
       "div",
       {
         role: "presentation",
@@ -2149,7 +2752,7 @@ function FloatingPanel({
         "data-state": presence.state
       }
     ),
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         ref: floating.panelRef,
@@ -2159,29 +2762,30 @@ function FloatingPanel({
           overlayMotion_default.sheet,
           sheet_default.swipeY
         ),
+        "data-depth": "floating",
         "data-state": presence.state,
         onAnimationEnd: presence.onExitEnd,
         onPointerDown: floating.onSheetPointerDown,
         children: [
-          /* @__PURE__ */ jsx21("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx24("div", { className: sheet_default.handle, "data-swipe-handle": "", "aria-hidden": "true" }),
           panel
         ]
       }
     )
-  ] }) : panel }) }) });
+  ] }) : panel }) }) }) });
 }
 function FloatingTrigger({ triggerProps, children, ...forwarded }) {
-  return /* @__PURE__ */ jsx21(Slot, { ...forwarded, children: /* @__PURE__ */ jsx21(Slot, { ...triggerProps, children }) });
+  return /* @__PURE__ */ jsx24(Slot, { ...forwarded, children: /* @__PURE__ */ jsx24(Slot, { ...triggerProps, children }) });
 }
 
 // src/internal/overlay/useFloatingLayer.ts
-import * as React27 from "react";
+import * as React30 from "react";
 
 // src/hooks/useMediaQuery.ts
-import * as React21 from "react";
+import * as React25 from "react";
 var COMPACT_QUERY = "(max-width: 639px)";
 function useMediaQuery(query, enabled = true) {
-  const subscribe = React21.useCallback(
+  const subscribe = React25.useCallback(
     (onChange) => {
       if (!enabled || typeof window === "undefined" || !window.matchMedia) return () => {
       };
@@ -2192,18 +2796,18 @@ function useMediaQuery(query, enabled = true) {
     [enabled, query]
   );
   const getSnapshot = () => enabled && typeof window !== "undefined" && !!window.matchMedia ? window.matchMedia(query).matches : false;
-  return React21.useSyncExternalStore(subscribe, getSnapshot, () => false);
+  return React25.useSyncExternalStore(subscribe, getSnapshot, () => false);
 }
 
 // src/hooks/usePosition.ts
-import * as React23 from "react";
+import * as React27 from "react";
 
 // src/internal/AnchorRectContext.tsx
-import * as React22 from "react";
-var AnchorRectContext = React22.createContext(null);
+import * as React26 from "react";
+var AnchorRectContext = React26.createContext(null);
 var AnchorRectProvider = AnchorRectContext.Provider;
 function useAnchorRectResolver() {
-  return React22.useContext(AnchorRectContext);
+  return React26.useContext(AnchorRectContext);
 }
 
 // src/internal/layoutPxFromPrimitives.ts
@@ -2328,11 +2932,11 @@ function usePosition(enabled, anchorRef, layerRef, {
   offsetToken = "--prime-panel-offset",
   arrowInset
 } = {}) {
-  const [attached, setAttached] = React23.useState(false);
-  const [resolvedSide, setResolvedSide] = React23.useState(preferredSide);
+  const [attached, setAttached] = React27.useState(false);
+  const [resolvedSide, setResolvedSide] = React27.useState(preferredSide);
   const resolveAnchorRect = useAnchorRectResolver();
-  const metricsRef = React23.useRef(null);
-  const update = React23.useCallback(
+  const metricsRef = React27.useRef(null);
+  const update = React27.useCallback(
     (remeasure) => {
       const anchor = anchorRef.current;
       const layer = layerRef.current;
@@ -2386,9 +2990,9 @@ function usePosition(enabled, anchorRef, layerRef, {
       resolveAnchorRect
     ]
   );
-  const updateRef = React23.useRef(update);
+  const updateRef = React27.useRef(update);
   updateRef.current = update;
-  const attachLayer = React23.useCallback(
+  const attachLayer = React27.useCallback(
     (node) => {
       layerRef.current = node;
       setAttached(node !== null);
@@ -2396,10 +3000,10 @@ function usePosition(enabled, anchorRef, layerRef, {
     [layerRef]
   );
   const active = enabled && attached;
-  React23.useLayoutEffect(() => {
+  React27.useLayoutEffect(() => {
     if (active) update(true);
   }, [active, update]);
-  React23.useLayoutEffect(() => {
+  React27.useLayoutEffect(() => {
     if (!active) return;
     let frame = 0;
     let remeasure = false;
@@ -2433,57 +3037,8 @@ function usePosition(enabled, anchorRef, layerRef, {
   return { side: resolvedSide, attachLayer };
 }
 
-// src/hooks/usePresence.ts
-import * as React24 from "react";
-var DURATION_FALLBACK_MS = {
-  fast: 230,
-  base: 380,
-  slow: 570
-};
-var TIMEOUT_SLACK_MS = 50;
-function prefersReducedMotion() {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function parseDurationMs(raw) {
-  const value = raw.trim();
-  if (value === "") return null;
-  const n = Number.parseFloat(value);
-  if (Number.isNaN(n)) return null;
-  if (value.endsWith("ms")) return n;
-  if (value.endsWith("s")) return n * 1e3;
-  return null;
-}
-function motionDurationMs(token) {
-  if (typeof document === "undefined") return DURATION_FALLBACK_MS[token];
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(
-    `--prime-motion-duration-${token}`
-  );
-  return parseDurationMs(raw) ?? DURATION_FALLBACK_MS[token];
-}
-function exitTimeoutMs(token) {
-  return motionDurationMs(token) + TIMEOUT_SLACK_MS;
-}
-function usePresence(open, options = {}) {
-  const { exitDuration = "base" } = options;
-  const [mounted, setMounted] = React24.useState(open);
-  if (open && !mounted) setMounted(true);
-  if (!open && mounted && prefersReducedMotion()) setMounted(false);
-  const openRef = React24.useRef(open);
-  openRef.current = open;
-  React24.useEffect(() => {
-    if (open || !mounted) return;
-    const id = window.setTimeout(() => setMounted(false), exitTimeoutMs(exitDuration));
-    return () => window.clearTimeout(id);
-  }, [open, mounted, exitDuration]);
-  const onExitEnd = React24.useCallback((event) => {
-    if (event.target !== event.currentTarget) return;
-    if (!openRef.current) setMounted(false);
-  }, []);
-  return { mounted: open || mounted, state: open ? "open" : "closed", onExitEnd };
-}
-
 // src/hooks/useScrollLock.ts
-import * as React25 from "react";
+import * as React28 from "react";
 var lockCount = 0;
 var saved = null;
 function lockScroll() {
@@ -2508,7 +3063,7 @@ function unlockScroll() {
   }
 }
 function useScrollLock(enabled) {
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!enabled) return;
     lockScroll();
     return unlockScroll;
@@ -2516,7 +3071,7 @@ function useScrollLock(enabled) {
 }
 
 // src/hooks/useSwipeDismiss.ts
-import * as React26 from "react";
+import * as React29 from "react";
 var SLOP_PX = 8;
 var DISTANCE_RATIO = 0.3;
 var FLICK_VELOCITY = 0.5;
@@ -2544,11 +3099,11 @@ function useSwipeDismiss({
   touchAnywhere = false,
   onProgress
 }) {
-  const optionsRef = React26.useRef({ direction, onDismiss, handle, touchAnywhere, onProgress });
+  const optionsRef = React29.useRef({ direction, onDismiss, handle, touchAnywhere, onProgress });
   optionsRef.current = { direction, onDismiss, handle, touchAnywhere, onProgress };
-  const cleanupRef = React26.useRef(null);
-  React26.useEffect(() => () => cleanupRef.current?.(), []);
-  const onPointerDown2 = React26.useCallback(
+  const cleanupRef = React29.useRef(null);
+  React29.useEffect(() => () => cleanupRef.current?.(), []);
+  const onPointerDown2 = React29.useCallback(
     (event) => {
       if (!enabled || event.defaultPrevented || !event.isPrimary || event.button !== 0) return;
       const { direction: direction2, handle: handle2, touchAnywhere: touchAnywhere2 } = optionsRef.current;
@@ -2655,24 +3210,24 @@ function useFloatingLayer({
   const sheet = useMediaQuery(COMPACT_QUERY, sheetOption);
   const presence = usePresence(open, { exitDuration: sheet ? "base" : exitDuration });
   const mounted = presence.mounted && (open || !skipExit);
-  const contentRef = React27.useRef(null);
+  const contentRef = React30.useRef(null);
   const position = usePosition(mounted && !sheet, triggerRef, contentRef, positionOptions);
   useScrollLock(open && sheet);
-  const [panel, setPanel] = React27.useState(null);
+  const [panel, setPanel] = React30.useState(null);
   const { attachLayer } = position;
-  const panelRef = React27.useCallback(
+  const panelRef = React30.useCallback(
     (node) => {
       attachLayer(node);
       setPanel(node);
     },
     [attachLayer]
   );
-  const outsideRef = React27.useRef(false);
-  const close = React27.useCallback(() => {
+  const outsideRef = React30.useRef(false);
+  const close = React30.useCallback(() => {
     outsideRef.current = false;
     onOpenChange(false);
   }, [onOpenChange]);
-  const dismissOutside = React27.useCallback(() => {
+  const dismissOutside = React30.useCallback(() => {
     outsideRef.current = true;
     onOpenChange(false);
   }, [onOpenChange]);
@@ -2696,7 +3251,7 @@ function useFloatingLayer({
     onDismiss
   });
   const passive = dismiss === "none";
-  React27.useEffect(() => {
+  React30.useEffect(() => {
     if (!open || !panel || passive) return;
     outsideRef.current = false;
     if (focusOnOpen) focusInto(panel);
@@ -2761,10 +3316,10 @@ var Select_default = {
 };
 
 // src/components/select/SelectItem.tsx
-import * as React29 from "react";
+import * as React32 from "react";
 
 // src/internal/HighlightMatch.tsx
-import * as React28 from "react";
+import * as React31 from "react";
 
 // src/internal/HighlightMatch.module.css
 var HighlightMatch_default = {
@@ -2772,7 +3327,7 @@ var HighlightMatch_default = {
 };
 
 // src/internal/HighlightMatch.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function matchIndex(text, query) {
   if (!query) return -1;
   return text.toLowerCase().indexOf(query.toLowerCase());
@@ -2780,18 +3335,18 @@ function matchIndex(text, query) {
 function HighlightMatch({ text, query }) {
   const q = query.trim();
   const at = matchIndex(text, q);
-  if (at < 0) return /* @__PURE__ */ jsx22(Fragment5, { children: text });
-  return /* @__PURE__ */ jsxs11("span", { children: [
+  if (at < 0) return /* @__PURE__ */ jsx25(Fragment8, { children: text });
+  return /* @__PURE__ */ jsxs15("span", { children: [
     text.slice(0, at),
-    /* @__PURE__ */ jsx22("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
+    /* @__PURE__ */ jsx25("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
     text.slice(at + q.length)
   ] });
 }
 function highlightChildren(children, query) {
   if (!query.trim()) return children;
-  return React28.Children.map(
+  return React31.Children.map(
     children,
-    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx22(HighlightMatch, { text: String(child), query }) : child
+    (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx25(HighlightMatch, { text: String(child), query }) : child
   );
 }
 
@@ -2825,24 +3380,24 @@ function createItemRegistry() {
 var [SelectProvider, useSelectContext] = createComponentContext("Select");
 
 // src/components/select/SelectItem.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var MEDIA_SIZE = { xs: "xs", s: "xs", m: "s", l: "s", xl: "m" };
 function textOf(node) {
   if (node == null || typeof node === "boolean") return "";
   if (typeof node === "string" || typeof node === "number") return String(node);
   if (Array.isArray(node)) return node.map(textOf).join("");
-  if (React29.isValidElement(node))
+  if (React32.isValidElement(node))
     return textOf(node.props.children);
   return "";
 }
 function SelectItemIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, className), ...rest });
+  return /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, className), ...rest });
 }
 SelectItemIcon.displayName = "Select.ItemIcon";
-var OptionQueryContext = React29.createContext("");
+var OptionQueryContext = React32.createContext("");
 function SelectItemText({ children, className, ...rest }) {
-  const query = React29.useContext(OptionQueryContext);
-  return /* @__PURE__ */ jsx23("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
+  const query = React32.useContext(OptionQueryContext);
+  return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
 }
 SelectItemText.displayName = "Select.ItemText";
 function SelectItemDescription({
@@ -2850,12 +3405,12 @@ function SelectItemDescription({
   className,
   ...rest
 }) {
-  const query = React29.useContext(OptionQueryContext);
-  return /* @__PURE__ */ jsx23("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
+  const query = React32.useContext(OptionQueryContext);
+  return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
 }
 SelectItemDescription.displayName = "Select.ItemDescription";
 function SelectItemMeta({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx23("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
+  return /* @__PURE__ */ jsx26("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
 }
 SelectItemMeta.displayName = "Select.ItemMeta";
 function splitItemChildren(children) {
@@ -2868,11 +3423,11 @@ function splitItemChildren(children) {
     description: ""
   };
   let plain = "";
-  for (const child of React29.Children.toArray(children)) {
-    if (!React29.isValidElement(child)) {
+  for (const child of React32.Children.toArray(children)) {
+    if (!React32.isValidElement(child)) {
       plain += textOf(child);
       parts.body.push(child);
-    } else if (child.type === React29.Fragment) {
+    } else if (child.type === React32.Fragment) {
       const inner = splitItemChildren(child.props.children);
       parts.leading.push(...inner.leading);
       parts.body.push(...inner.body);
@@ -2902,7 +3457,7 @@ function splitItemChildren(children) {
 }
 function sizeMedia(leading, size) {
   return leading.map(
-    (node) => React29.isValidElement(node) && node.type === Thumbnail.Root ? React29.cloneElement(node, {
+    (node) => React32.isValidElement(node) && node.type === Thumbnail.Root ? React32.cloneElement(node, {
       size: node.props.size ?? MEDIA_SIZE[size],
       className: cx(Select_default.media, node.props.className),
       "aria-hidden": true
@@ -2924,7 +3479,7 @@ function SelectItem({
   const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
   const isSelected = selected.includes(value);
   const isHighlighted = useStoreSlice(highlight, (current) => current === value);
-  React29.useLayoutEffect(
+  React32.useLayoutEffect(
     () => registry.register(value, resolvedLabel, haystack),
     [registry, value, resolvedLabel, haystack]
   );
@@ -2933,7 +3488,7 @@ function SelectItem({
   return (
     // biome-ignore lint/a11y/useFocusableInteractive: focus stays on the listbox / search (aria-activedescendant)
     // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard is handled on the listbox
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -2957,11 +3512,11 @@ function SelectItem({
           rich: parts.rich || void 0
         }),
         children: [
-          multiple ? /* @__PURE__ */ jsx23(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
+          multiple ? /* @__PURE__ */ jsx26(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
           sizeMedia(parts.leading, size),
-          /* @__PURE__ */ jsx23("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx23(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
+          /* @__PURE__ */ jsx26("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx26(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
           parts.meta,
-          multiple ? null : /* @__PURE__ */ jsx23("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx23(Icon, { name: "action.check" }) : null })
+          multiple ? null : /* @__PURE__ */ jsx26("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx26(Icon, { name: "action.check" }) : null })
         ]
       }
     )
@@ -2970,7 +3525,7 @@ function SelectItem({
 SelectItem.displayName = "Select.Item";
 
 // src/components/select/Select.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var SELECT_LABELS = {
   search: "\u041F\u043E\u0438\u0441\u043A",
   empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
@@ -3007,14 +3562,14 @@ function SelectRoot(props) {
     ...rest
   } = props;
   const multiple = props.multiple === true;
-  const labels = React30.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
+  const labels = React33.useMemo(() => ({ ...SELECT_LABELS, ...labelsProp }), [labelsProp]);
   const ids = useFieldFrame(id, { hint, error, invalid });
   const [value, setValue] = useControllableState({
     value: props.value,
     defaultValue: props.defaultValue ?? (multiple ? [] : void 0),
     onChange: props.onValueChange
   });
-  const selected = React30.useMemo(
+  const selected = React33.useMemo(
     () => Array.isArray(value) ? value : value ? [value] : [],
     [value]
   );
@@ -3024,11 +3579,11 @@ function SelectRoot(props) {
     onChange: onOpenChange
   });
   const highlight = useCreateStore(void 0);
-  const [registry] = React30.useState(createItemRegistry);
-  const [query, setQuery] = React30.useState("");
-  const triggerRef = React30.useRef(null);
+  const [registry] = React33.useState(createItemRegistry);
+  const [query, setQuery] = React33.useState("");
+  const triggerRef = React33.useRef(null);
   if (!isOpen && query !== "") setQuery("");
-  const pick = React30.useCallback(
+  const pick = React33.useCallback(
     (optionValue) => {
       if (multiple) {
         setValue((prev) => {
@@ -3042,8 +3597,8 @@ function SelectRoot(props) {
     },
     [multiple, setValue, setOpen]
   );
-  const clear = React30.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
-  const context = React30.useMemo(
+  const clear = React33.useCallback(() => setValue(multiple ? [] : ""), [multiple, setValue]);
+  const context = React33.useMemo(
     () => ({
       size,
       invalid: ids.invalid,
@@ -3092,7 +3647,7 @@ function SelectRoot(props) {
       labels
     ]
   );
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     FieldFrame,
     {
       ...rest,
@@ -3106,7 +3661,7 @@ function SelectRoot(props) {
       disabled,
       optionalLabel: labels.optional,
       className,
-      children: /* @__PURE__ */ jsx24(SelectProvider, { value: context, children: /* @__PURE__ */ jsx24(ControlSizeProvider, { value: size, children }) })
+      children: /* @__PURE__ */ jsx27(SelectProvider, { value: context, children: /* @__PURE__ */ jsx27(ControlSizeProvider, { value: size, children }) })
     }
   );
 }
@@ -3140,7 +3695,7 @@ function SelectTrigger({
   } = useSelectContext();
   const mergedRef = useMergedRefs(triggerRef, ref);
   const showClear = clearable && selected.length > 0 && !disabled && !loading;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs17(
     "button",
     {
       ...rest,
@@ -3181,11 +3736,11 @@ function SelectTrigger({
         "focus-ring": focusRing ? void 0 : false
       }),
       children: [
-        /* @__PURE__ */ jsx24("span", { className: Select_default.triggerMain, children }),
+        /* @__PURE__ */ jsx27("span", { className: Select_default.triggerMain, children }),
         showClear ? (
           // A segment, not a button: interactive content inside a <button> is invalid. The keyboard
           // clears with Delete / Backspace on the trigger.
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx27(
             "span",
             {
               className: Select_default.clear,
@@ -3197,11 +3752,11 @@ function SelectTrigger({
                 event.stopPropagation();
                 clear();
               },
-              children: /* @__PURE__ */ jsx24(Icon, { name: "action.close" })
+              children: /* @__PURE__ */ jsx27(Icon, { name: "action.close" })
             }
           )
         ) : null,
-        /* @__PURE__ */ jsx24("span", { className: Select_default.chevron, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx24(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx24(Icon, { name: "nav.chevronDown" }) })
+        /* @__PURE__ */ jsx27("span", { className: Select_default.chevron, "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx27(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(Icon, { name: "nav.chevronDown" }) })
       ]
     }
   );
@@ -3213,7 +3768,7 @@ function SelectValue({ renderValue, className, ...rest }) {
   if (selected.length > 0 && renderValue && !multiple) {
     const value = selected[0] ?? "";
     const parts = splitItemChildren(renderValue({ value, label: text }));
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs17(
       "span",
       {
         ...rest,
@@ -3221,12 +3776,12 @@ function SelectValue({ renderValue, className, ...rest }) {
         ...toDataAttributes({ rich: parts.rich || void 0 }),
         children: [
           sizeMedia(parts.leading, size),
-          /* @__PURE__ */ jsx24("span", { className: Select_default.valueBody, children: parts.body })
+          /* @__PURE__ */ jsx27("span", { className: Select_default.valueBody, children: parts.body })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     "span",
     {
       ...rest,
@@ -3238,7 +3793,7 @@ function SelectValue({ renderValue, className, ...rest }) {
 }
 SelectValue.displayName = "Select.Value";
 function SelectTriggerIcon({ className, ...rest }) {
-  return /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
+  return /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
 }
 SelectTriggerIcon.displayName = "Select.TriggerIcon";
 function SelectContent({ searchable = false, className, children, ...rest }) {
@@ -3258,7 +3813,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     labels,
     registry
   } = useSelectContext();
-  const listboxRef = React30.useRef(null);
+  const listboxRef = React33.useRef(null);
   const floating = useFloatingLayer({
     open: isOpen,
     onOpenChange: setOpen,
@@ -3289,9 +3844,9 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
     }
     handleListboxKeyDown(event, { items, highlight, onSelect: pick });
   };
-  if (!floating.mounted) return /* @__PURE__ */ jsx24("div", { hidden: true, children });
+  if (!floating.mounted) return /* @__PURE__ */ jsx27("div", { hidden: true, children });
   const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs17(
     FloatingPanel,
     {
       ...rest,
@@ -3303,9 +3858,9 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
       children: [
         searchable ? (
           // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
-          /* @__PURE__ */ jsxs13("div", { className: cx(menu_default.searchRow, Select_default.search), "data-focus-ring": "false", children: [
-            /* @__PURE__ */ jsx24(Icon, { name: "action.search", size: "s" }),
-            /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsxs17("div", { className: cx(menu_default.searchRow, Select_default.search), "data-focus-ring": "false", children: [
+            /* @__PURE__ */ jsx27(Icon, { name: "action.search", size: "s" }),
+            /* @__PURE__ */ jsx27(
               "input",
               {
                 type: "text",
@@ -3324,11 +3879,11 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             )
           ] })
         ) : null,
-        loading ? /* @__PURE__ */ jsxs13("div", { className: Select_default.status, role: "status", children: [
-          /* @__PURE__ */ jsx24(Spinner, { "aria-hidden": "true" }),
+        loading ? /* @__PURE__ */ jsxs17("div", { className: Select_default.status, role: "status", children: [
+          /* @__PURE__ */ jsx27(Spinner, { "aria-hidden": "true" }),
           labels.loading
         ] }) : null,
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx27(
           ScrollContainer,
           {
             ref: listboxRef,
@@ -3344,11 +3899,11 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
             children
           }
         ),
-        isEmpty && !loading ? /* @__PURE__ */ jsxs13(EmptyPage.Root, { layout: "compact", role: "status", children: [
-          /* @__PURE__ */ jsx24(EmptyPage.Title, { as: "p", children: labels.empty }),
-          query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx24(EmptyPage.Description, { children: labels.emptyHint }) : null
+        isEmpty && !loading ? /* @__PURE__ */ jsxs17(EmptyPage.Root, { layout: "compact", role: "status", children: [
+          /* @__PURE__ */ jsx27(EmptyPage.Title, { as: "p", children: labels.empty }),
+          query !== "" && labels.emptyHint ? /* @__PURE__ */ jsx27(EmptyPage.Description, { children: labels.emptyHint }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx24(HighlightOnOpen, { listboxRef, highlight })
+        /* @__PURE__ */ jsx27(HighlightOnOpen, { listboxRef, highlight })
       ]
     }
   );
@@ -3359,9 +3914,9 @@ function HighlightOnOpen({
   highlight
 }) {
   const { isOpen, query, selected } = useSelectContext();
-  const selectedRef = React30.useRef(selected);
+  const selectedRef = React33.useRef(selected);
   selectedRef.current = selected;
-  React30.useLayoutEffect(() => {
+  React33.useLayoutEffect(() => {
     if (!isOpen) return;
     const options = enabledOptions(listboxRef.current);
     const first = options.find((item) => selectedRef.current.includes(item.dataset.value ?? ""));
@@ -3369,17 +3924,17 @@ function HighlightOnOpen({
     first?.scrollIntoView?.({ block: "nearest" });
     return () => highlight.set(void 0);
   }, [isOpen, listboxRef, highlight]);
-  React30.useLayoutEffect(() => {
+  React33.useLayoutEffect(() => {
     if (query !== "") highlight.set(enabledOptions(listboxRef.current)[0]?.dataset.value);
   }, [query, listboxRef, highlight]);
   return null;
 }
 function SelectGroup({ className, ...rest }) {
-  return /* @__PURE__ */ jsx24(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
+  return /* @__PURE__ */ jsx27(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
 }
 SelectGroup.displayName = "Select.Group";
 function SelectSeparator({ className, ...rest }) {
-  return /* @__PURE__ */ jsx24(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
+  return /* @__PURE__ */ jsx27(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
 }
 SelectSeparator.displayName = "Select.Separator";
 var Select = {
@@ -3398,21 +3953,20 @@ var Select = {
 };
 
 export {
-  ControlSizeProvider,
-  useOptionalControlSize,
-  useControlSize,
-  cx,
   toDataAttributes,
   fieldSurfaceClass,
   fieldTierClass,
   fieldTriggerClass,
   iconLayout,
+  prefersReducedMotion,
+  motionDurationMs,
+  exitTimeoutMs,
+  usePresence,
+  visuallyHiddenClass,
+  VisuallyHidden,
   useMergedRefs,
   Slot,
   touchTargetBlockClass,
-  textTone_default,
-  visuallyHiddenClass,
-  VisuallyHidden,
   Spinner,
   Button,
   Divider,
@@ -3421,12 +3975,16 @@ export {
   useEdgeOverflow,
   ScrollContainer,
   palette_default,
+  RollingNumber,
   createComponentContext,
   createImageSlot,
   useControllableState,
   overlayMotion_default,
   Portal,
   sheet_default,
+  useNestedSurfaceDepth,
+  SurfaceDepthProvider,
+  useStageDepth,
   focusInto,
   focusBack,
   activeElement,
@@ -3439,10 +3997,6 @@ export {
   AnchorRectProvider,
   readCssLengthPx,
   getViewportPadPx,
-  prefersReducedMotion,
-  motionDurationMs,
-  exitTimeoutMs,
-  usePresence,
   useScrollLock,
   useSwipeDismiss,
   useFloatingLayer,
@@ -3457,15 +4011,15 @@ export {
   textTones,
   enterMotion_default,
   Hint,
-  choiceInputClass,
-  choiceVisualClass,
-  ChoiceField,
-  ChoiceLabel,
   Label,
   formatLabel,
   useFieldFrame,
   FieldFrame,
   FieldCounter,
+  choiceInputClass,
+  choiceVisualClass,
+  ChoiceField,
+  ChoiceLabel,
   Checkbox,
   COLOR_PRESETS,
   useSwatchOptions,
@@ -3487,6 +4041,11 @@ export {
   handleListboxKeyDown,
   menu_default,
   MenuGroup,
+  resolveValue,
+  DEFAULT_PROGRESS_SEGMENTS_LABELS,
+  resolveSegments,
+  ProgressBar,
+  getPasswordStrength,
   Input,
   Thumbnail,
   Select