@evinvest/uikit 0.25.0 → 0.27.0

package/dist/primitives/focus-scope.js

@@ -16,15 +16,25 @@ function focusable(root) {
     (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement
   );
 }
-function useFocusScope(enabled) {
+function usable(el) {
+  return !!el && el !== document.body && el.isConnected;
+}
+function focusRoot(root) {
+  if (!root.hasAttribute("tabindex")) root.tabIndex = -1;
+  root.focus();
+}
+function useFocusScope(enabled, { initialFocus = "first", returnFocusTo } = {}) {
   const ref = React.useRef(null);
+  const fallbackRef = React.useRef(returnFocusTo);
+  fallbackRef.current = returnFocusTo;
   React.useEffect(() => {
     if (!enabled) return;
     const root = ref.current;
     if (!root) return;
     const previouslyFocused = document.activeElement;
-    const first = focusable(root)[0];
-    (first ?? root).focus();
+    const first = initialFocus === "first" ? focusable(root)[0] : void 0;
+    if (first) first.focus();
+    else focusRoot(root);
     function onKeyDown(event) {
       if (event.key !== "Tab" || !root) return;
       const items = focusable(root);
@@ -35,7 +45,10 @@ function useFocusScope(enabled) {
       const firstEl = items[0];
       const lastEl = items[items.length - 1];
       const active = document.activeElement;
-      if (event.shiftKey && active === firstEl) {
+      if (active === root) {
+        event.preventDefault();
+        (event.shiftKey ? lastEl : firstEl).focus();
+      } else if (event.shiftKey && active === firstEl) {
         event.preventDefault();
         lastEl.focus();
       } else if (!event.shiftKey && active === lastEl) {
@@ -46,9 +59,12 @@ function useFocusScope(enabled) {
     root.addEventListener("keydown", onKeyDown);
     return () => {
       root.removeEventListener("keydown", onKeyDown);
-      previouslyFocused?.focus?.();
+      const active = document.activeElement;
+      if (active && active !== document.body && !root.contains(active)) return;
+      const target = usable(previouslyFocused) ? previouslyFocused : fallbackRef.current?.current;
+      if (usable(target)) target.focus({ preventScroll: true });
     };
-  }, [enabled]);
+  }, [enabled, initialFocus]);
   return ref;
 }
 export {

package/dist/primitives/focus-scope.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/focus-scope.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// `tabindex=\"-1\"` opts an element out of Tab order whatever its tag, so the\n// exclusion goes on every branch — otherwise a roving-tabindex grid's parked\n// cells would count as tab stops.\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"[tabindex]\",\n]\n  .map(sel => `${sel}:not([tabindex=\"-1\"])`)\n  .join(\",\");\n\n/**\n * Every enabled, Tab-reachable candidate under `root` in DOM (= Tab) order,\n * before the layout-based visibility filter; `tabindex=\"-1\"` is skipped on any\n * tag. For content that is fully visible while it exists (a popover), this is\n * the tab order itself. Internal to the kit.\n */\nexport function focusCandidates(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));\n}\n\nfunction focusable(root: HTMLElement): HTMLElement[] {\n  return focusCandidates(root).filter(\n    (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement,\n  );\n}\n\n/**\n * Traps Tab focus inside the returned ref's subtree and restores focus to the\n * previously-focused element on unmount — the dep-light core of dialogs/menus,\n * replacing `@radix-ui/react-focus-scope`. On mount, focuses the first\n * focusable (or the container itself).\n *\n * Rust dialogs rely on the browser's native focus order within a fixed overlay;\n * see the README \"Limitations\".\n */\nexport function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null> {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    const root = ref.current;\n    if (!root) return;\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    const first = focusable(root)[0];\n    (first ?? root).focus();\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key !== \"Tab\" || !root) return;\n      const items = focusable(root);\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const firstEl = items[0]!;\n      const lastEl = items[items.length - 1]!;\n      const active = document.activeElement;\n      if (event.shiftKey && active === firstEl) {\n        event.preventDefault();\n        lastEl.focus();\n      } else if (!event.shiftKey && active === lastEl) {\n        event.preventDefault();\n        firstEl.focus();\n      }\n    }\n\n    root.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      root.removeEventListener(\"keydown\", onKeyDown);\n      previouslyFocused?.focus?.();\n    };\n  }, [enabled]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAKvB,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,SAAO,GAAG,GAAG,uBAAuB,EACxC,KAAK,GAAG;AAQJ,SAAS,gBAAgB,MAAkC;AAChE,SAAO,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC;AACjE;AAEA,SAAS,UAAU,MAAkC;AACnD,SAAO,gBAAgB,IAAI,EAAE;AAAA,IAC3B,CAAC,OAAO,GAAG,cAAc,KAAK,GAAG,eAAe,KAAK,OAAO,SAAS;AAAA,EACvE;AACF;AAWO,SAAS,cAAc,SAA0D;AACtF,QAAM,MAAM,MAAM,OAA8B,IAAI;AAEpD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AAEX,UAAM,oBAAoB,SAAS;AACnC,UAAM,QAAQ,UAAU,IAAI,EAAE,CAAC;AAC/B,KAAC,SAAS,MAAM,MAAM;AAEtB,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,SAAS,CAAC,KAAM;AAClC,YAAM,QAAQ,UAAU,IAAI;AAC5B,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,UAAU,MAAM,CAAC;AACvB,YAAM,SAAS,MAAM,MAAM,SAAS,CAAC;AACrC,YAAM,SAAS,SAAS;AACxB,UAAI,MAAM,YAAY,WAAW,SAAS;AACxC,cAAM,eAAe;AACrB,eAAO,MAAM;AAAA,MACf,WAAW,CAAC,MAAM,YAAY,WAAW,QAAQ;AAC/C,cAAM,eAAe;AACrB,gBAAQ,MAAM;AAAA,MAChB;AAAA,IACF;AAEA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM;AACX,WAAK,oBAAoB,WAAW,SAAS;AAC7C,yBAAmB,QAAQ;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/primitives/focus-scope.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// `tabindex=\"-1\"` opts an element out of Tab order whatever its tag, so the\n// exclusion goes on every branch — otherwise a roving-tabindex grid's parked\n// cells would count as tab stops.\nconst FOCUSABLE = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"[tabindex]\",\n]\n  .map(sel => `${sel}:not([tabindex=\"-1\"])`)\n  .join(\",\");\n\n/**\n * Every enabled, Tab-reachable candidate under `root` in DOM (= Tab) order,\n * before the layout-based visibility filter; `tabindex=\"-1\"` is skipped on any\n * tag. For content that is fully visible while it exists (a popover), this is\n * the tab order itself. Internal to the kit.\n */\nexport function focusCandidates(root: HTMLElement): HTMLElement[] {\n  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE));\n}\n\nfunction focusable(root: HTMLElement): HTMLElement[] {\n  return focusCandidates(root).filter(\n    (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement,\n  );\n}\n\n/**\n * Where focus lands when the scope opens. `first` is the first Tab stop inside\n * (an input, an alert dialog's least destructive action); `container` is the\n * scope root itself, so a reader starts at the top and the first Tab reaches the\n * first control — right for a panel of content, where the first stop may be an\n * action one keypress away from firing.\n */\nexport type InitialFocus = \"first\" | \"container\";\n\nexport interface FocusScopeOptions {\n  /** Default `first`; falls back to the container when nothing inside is focusable. */\n  initialFocus?: InitialFocus;\n  /**\n   * Where focus goes back on close when the element focused before opening is\n   * no use: `<body>` (Safari does not focus a clicked button), or detached (the\n   * opener was re-rendered away). Pass the overlay's trigger.\n   */\n  returnFocusTo?: React.RefObject<HTMLElement | null>;\n}\n\nfunction usable(el: HTMLElement | null | undefined): el is HTMLElement {\n  return !!el && el !== document.body && el.isConnected;\n}\n\n// A `<div>` without a tabindex ignores `.focus()`, so a scope with no Tab stops\n// used to leave focus on the trigger behind the scrim. `-1` makes the root\n// focusable by script (and by a click on its empty area, which keeps focus in\n// the scope) without adding it to the Tab order.\nfunction focusRoot(root: HTMLElement) {\n  if (!root.hasAttribute(\"tabindex\")) root.tabIndex = -1;\n  root.focus();\n}\n\n/**\n * Traps Tab focus inside the returned ref's subtree and restores focus to the\n * previously-focused element on unmount — the dep-light core of dialogs/menus,\n * replacing `@radix-ui/react-focus-scope`. On mount, focuses per\n * `initialFocus`; the root gets `tabindex=\"-1\"` whenever it is the target.\n *\n * Rust dialogs rely on the browser's native focus order within a fixed overlay;\n * see the README \"Limitations\".\n */\nexport function useFocusScope(\n  enabled: boolean,\n  { initialFocus = \"first\", returnFocusTo }: FocusScopeOptions = {},\n): React.RefObject<HTMLDivElement | null> {\n  const ref = React.useRef<HTMLDivElement | null>(null);\n  // Read at close, not captured at open: a trigger re-rendered while the\n  // overlay was up is a new node by then.\n  const fallbackRef = React.useRef(returnFocusTo);\n  fallbackRef.current = returnFocusTo;\n\n  React.useEffect(() => {\n    if (!enabled) return;\n    const root = ref.current;\n    if (!root) return;\n\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n    const first = initialFocus === \"first\" ? focusable(root)[0] : undefined;\n    if (first) first.focus();\n    else focusRoot(root);\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key !== \"Tab\" || !root) return;\n      const items = focusable(root);\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const firstEl = items[0]!;\n      const lastEl = items[items.length - 1]!;\n      const active = document.activeElement;\n      // From the root itself Shift+Tab would leave the scope for whatever\n      // precedes the portal, so both directions are steered explicitly.\n      if (active === root) {\n        event.preventDefault();\n        (event.shiftKey ? lastEl : firstEl).focus();\n      } else if (event.shiftKey && active === firstEl) {\n        event.preventDefault();\n        lastEl.focus();\n      } else if (!event.shiftKey && active === lastEl) {\n        event.preventDefault();\n        firstEl.focus();\n      }\n    }\n\n    root.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      root.removeEventListener(\"keydown\", onKeyDown);\n      // Focus that already left the scope (a click outside landed on a field)\n      // is the user's; only focus still inside, or dropped to <body>, returns.\n      const active = document.activeElement;\n      if (active && active !== document.body && !root.contains(active)) return;\n      const target = usable(previouslyFocused) ? previouslyFocused : fallbackRef.current?.current;\n      if (usable(target)) target.focus({ preventScroll: true });\n    };\n  }, [enabled, initialFocus]);\n\n  return ref;\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAKvB,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EACG,IAAI,SAAO,GAAG,GAAG,uBAAuB,EACxC,KAAK,GAAG;AAQJ,SAAS,gBAAgB,MAAkC;AAChE,SAAO,MAAM,KAAK,KAAK,iBAA8B,SAAS,CAAC;AACjE;AAEA,SAAS,UAAU,MAAkC;AACnD,SAAO,gBAAgB,IAAI,EAAE;AAAA,IAC3B,CAAC,OAAO,GAAG,cAAc,KAAK,GAAG,eAAe,KAAK,OAAO,SAAS;AAAA,EACvE;AACF;AAsBA,SAAS,OAAO,IAAuD;AACrE,SAAO,CAAC,CAAC,MAAM,OAAO,SAAS,QAAQ,GAAG;AAC5C;AAMA,SAAS,UAAU,MAAmB;AACpC,MAAI,CAAC,KAAK,aAAa,UAAU,EAAG,MAAK,WAAW;AACpD,OAAK,MAAM;AACb;AAWO,SAAS,cACd,SACA,EAAE,eAAe,SAAS,cAAc,IAAuB,CAAC,GACxB;AACxC,QAAM,MAAM,MAAM,OAA8B,IAAI;AAGpD,QAAM,cAAc,MAAM,OAAO,aAAa;AAC9C,cAAY,UAAU;AAEtB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AAEX,UAAM,oBAAoB,SAAS;AACnC,UAAM,QAAQ,iBAAiB,UAAU,UAAU,IAAI,EAAE,CAAC,IAAI;AAC9D,QAAI,MAAO,OAAM,MAAM;AAAA,QAClB,WAAU,IAAI;AAEnB,aAAS,UAAU,OAAsB;AACvC,UAAI,MAAM,QAAQ,SAAS,CAAC,KAAM;AAClC,YAAM,QAAQ,UAAU,IAAI;AAC5B,UAAI,MAAM,WAAW,GAAG;AACtB,cAAM,eAAe;AACrB;AAAA,MACF;AACA,YAAM,UAAU,MAAM,CAAC;AACvB,YAAM,SAAS,MAAM,MAAM,SAAS,CAAC;AACrC,YAAM,SAAS,SAAS;AAGxB,UAAI,WAAW,MAAM;AACnB,cAAM,eAAe;AACrB,SAAC,MAAM,WAAW,SAAS,SAAS,MAAM;AAAA,MAC5C,WAAW,MAAM,YAAY,WAAW,SAAS;AAC/C,cAAM,eAAe;AACrB,eAAO,MAAM;AAAA,MACf,WAAW,CAAC,MAAM,YAAY,WAAW,QAAQ;AAC/C,cAAM,eAAe;AACrB,gBAAQ,MAAM;AAAA,MAChB;AAAA,IACF;AAEA,SAAK,iBAAiB,WAAW,SAAS;AAC1C,WAAO,MAAM;AACX,WAAK,oBAAoB,WAAW,SAAS;AAG7C,YAAM,SAAS,SAAS;AACxB,UAAI,UAAU,WAAW,SAAS,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAG;AAClE,YAAM,SAAS,OAAO,iBAAiB,IAAI,oBAAoB,YAAY,SAAS;AACpF,UAAI,OAAO,MAAM,EAAG,QAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,YAAY,CAAC;AAE1B,SAAO;AACT;","names":[]}

package/dist/primitives/use-roving-focus.js

@@ -3,12 +3,17 @@ import * as React from "react";
 function useRovingFocus(opts) {
   const { count, orientation = "vertical", loop = true, initial = 0 } = opts;
   const [activeIndex, setActiveIndex] = React.useState(initial);
-  const next = (dir) => setActiveIndex((i) => {
-    let n = i + dir;
-    if (n < 0) n = loop ? count - 1 : 0;
-    else if (n >= count) n = loop ? 0 : count - 1;
-    return n;
-  });
+  const resolveCount = () => typeof count === "function" ? count() : count;
+  const next = (dir) => {
+    const total = resolveCount();
+    if (total <= 0) return;
+    setActiveIndex((i) => {
+      let n = Math.min(Math.max(i, 0), total - 1) + dir;
+      if (n < 0) n = loop ? total - 1 : 0;
+      else if (n >= total) n = loop ? 0 : total - 1;
+      return n;
+    });
+  };
   const onKeyDown = (event) => {
     const horiz = orientation === "horizontal" || orientation === "both";
     const vert = orientation === "vertical" || orientation === "both";
@@ -29,7 +34,8 @@ function useRovingFocus(opts) {
       setActiveIndex(0);
     } else if (event.key === "End") {
       event.preventDefault();
-      setActiveIndex(count - 1);
+      const total = resolveCount();
+      if (total > 0) setActiveIndex(total - 1);
     }
   };
   return { activeIndex, setActiveIndex, onKeyDown };

package/dist/primitives/use-roving-focus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/use-roving-focus.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Arrow-key roving focus over a set of items — the dep-light core of menus,\n * tabs, radio-groups and toolbars (replacing `@radix-ui/react-roving-focus`).\n * Returns an `onKeyDown` to spread on the container and the active index; items\n * should set `tabIndex={index === activeIndex ? 0 : -1}`.\n *\n * Mirrors the keyboard navigation Rust drives with a focused-index signal.\n */\nexport function useRovingFocus(opts: {\n  count: number;\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\n  loop?: boolean;\n  initial?: number;\n}): {\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n} {\n  const { count, orientation = \"vertical\", loop = true, initial = 0 } = opts;\n  const [activeIndex, setActiveIndex] = React.useState(initial);\n\n  const next = (dir: 1 | -1) =>\n    setActiveIndex((i) => {\n      let n = i + dir;\n      if (n < 0) n = loop ? count - 1 : 0;\n      else if (n >= count) n = loop ? 0 : count - 1;\n      return n;\n    });\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const horiz = orientation === \"horizontal\" || orientation === \"both\";\n    const vert = orientation === \"vertical\" || orientation === \"both\";\n    if (vert && event.key === \"ArrowDown\") {\n      event.preventDefault();\n      next(1);\n    } else if (vert && event.key === \"ArrowUp\") {\n      event.preventDefault();\n      next(-1);\n    } else if (horiz && event.key === \"ArrowRight\") {\n      event.preventDefault();\n      next(1);\n    } else if (horiz && event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      next(-1);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setActiveIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      setActiveIndex(count - 1);\n    }\n  };\n\n  return { activeIndex, setActiveIndex, onKeyDown };\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAUhB,SAAS,eAAe,MAS7B;AACA,QAAM,EAAE,OAAO,cAAc,YAAY,OAAO,MAAM,UAAU,EAAE,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,OAAO;AAE5D,QAAM,OAAO,CAAC,QACZ,eAAe,CAAC,MAAM;AACpB,QAAI,IAAI,IAAI;AACZ,QAAI,IAAI,EAAG,KAAI,OAAO,QAAQ,IAAI;AAAA,aACzB,KAAK,MAAO,KAAI,OAAO,IAAI,QAAQ;AAC5C,WAAO;AAAA,EACT,CAAC;AAEH,QAAM,YAAY,CAAC,UAA+B;AAChD,UAAM,QAAQ,gBAAgB,gBAAgB,gBAAgB;AAC9D,UAAM,OAAO,gBAAgB,cAAc,gBAAgB;AAC3D,QAAI,QAAQ,MAAM,QAAQ,aAAa;AACrC,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,QAAQ,MAAM,QAAQ,WAAW;AAC1C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,SAAS,MAAM,QAAQ,cAAc;AAC9C,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,SAAS,MAAM,QAAQ,aAAa;AAC7C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,qBAAe,CAAC;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,qBAAe,QAAQ,CAAC;AAAA,IAC1B;AAAA,EACF;AAEA,SAAO,EAAE,aAAa,gBAAgB,UAAU;AAClD;","names":[]}
+{"version":3,"sources":["../../src/primitives/use-roving-focus.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Arrow-key roving focus over a set of items — the dep-light core of menus,\n * tabs, radio-groups and toolbars (replacing `@radix-ui/react-roving-focus`).\n * Returns an `onKeyDown` to spread on the container and the active index; items\n * should set `tabIndex={index === activeIndex ? 0 : -1}`.\n *\n * `count` may be a getter: containers whose items are only known from the DOM\n * (menus with conditionally rendered or disabled items, inline sub-menus) pass\n * one so the bound is read at keydown time — never during render, which keeps\n * the hook safe under SSR.\n *\n * Mirrors the keyboard navigation Rust drives with a focused-index signal.\n */\nexport function useRovingFocus(opts: {\n  count: number | (() => number);\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\n  loop?: boolean;\n  initial?: number;\n}): {\n  activeIndex: number;\n  setActiveIndex: (i: number) => void;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n} {\n  const { count, orientation = \"vertical\", loop = true, initial = 0 } = opts;\n  const [activeIndex, setActiveIndex] = React.useState(initial);\n\n  const resolveCount = () => (typeof count === \"function\" ? count() : count);\n\n  const next = (dir: 1 | -1) => {\n    const total = resolveCount();\n    if (total <= 0) return;\n    setActiveIndex((i) => {\n      // Clamp first: the item set may have shrunk since the index was set.\n      let n = Math.min(Math.max(i, 0), total - 1) + dir;\n      if (n < 0) n = loop ? total - 1 : 0;\n      else if (n >= total) n = loop ? 0 : total - 1;\n      return n;\n    });\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    const horiz = orientation === \"horizontal\" || orientation === \"both\";\n    const vert = orientation === \"vertical\" || orientation === \"both\";\n    if (vert && event.key === \"ArrowDown\") {\n      event.preventDefault();\n      next(1);\n    } else if (vert && event.key === \"ArrowUp\") {\n      event.preventDefault();\n      next(-1);\n    } else if (horiz && event.key === \"ArrowRight\") {\n      event.preventDefault();\n      next(1);\n    } else if (horiz && event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      next(-1);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      setActiveIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      const total = resolveCount();\n      if (total > 0) setActiveIndex(total - 1);\n    }\n  };\n\n  return { activeIndex, setActiveIndex, onKeyDown };\n}\n"],"mappings":";AAEA,YAAY,WAAW;AAehB,SAAS,eAAe,MAS7B;AACA,QAAM,EAAE,OAAO,cAAc,YAAY,OAAO,MAAM,UAAU,EAAE,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,OAAO;AAE5D,QAAM,eAAe,MAAO,OAAO,UAAU,aAAa,MAAM,IAAI;AAEpE,QAAM,OAAO,CAAC,QAAgB;AAC5B,UAAM,QAAQ,aAAa;AAC3B,QAAI,SAAS,EAAG;AAChB,mBAAe,CAAC,MAAM;AAEpB,UAAI,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI;AAC9C,UAAI,IAAI,EAAG,KAAI,OAAO,QAAQ,IAAI;AAAA,eACzB,KAAK,MAAO,KAAI,OAAO,IAAI,QAAQ;AAC5C,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,CAAC,UAA+B;AAChD,UAAM,QAAQ,gBAAgB,gBAAgB,gBAAgB;AAC9D,UAAM,OAAO,gBAAgB,cAAc,gBAAgB;AAC3D,QAAI,QAAQ,MAAM,QAAQ,aAAa;AACrC,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,QAAQ,MAAM,QAAQ,WAAW;AAC1C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,SAAS,MAAM,QAAQ,cAAc;AAC9C,YAAM,eAAe;AACrB,WAAK,CAAC;AAAA,IACR,WAAW,SAAS,MAAM,QAAQ,aAAa;AAC7C,YAAM,eAAe;AACrB,WAAK,EAAE;AAAA,IACT,WAAW,MAAM,QAAQ,QAAQ;AAC/B,YAAM,eAAe;AACrB,qBAAe,CAAC;AAAA,IAClB,WAAW,MAAM,QAAQ,OAAO;AAC9B,YAAM,eAAe;AACrB,YAAM,QAAQ,aAAa;AAC3B,UAAI,QAAQ,EAAG,gBAAe,QAAQ,CAAC;AAAA,IACzC;AAAA,EACF;AAEA,SAAO,EAAE,aAAa,gBAAgB,UAAU;AAClD;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {

package/styles/ev.css

@@ -60,8 +60,10 @@
   --accent-warn: #f2c94c;
   --on-accent-warn: #070d18;
   /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * carries both the fill and the text; the vivid brand red is a gitops
-   * constant, not a UI token. */
+   * is the fill and the text on a bare surface; on its own 10 % tint (a
+   * destructive menu row) the text is the derived --accent-error-ink, which
+   * EV leaves to the contract: #ec8379, 4.83:1 on that tint over popover. The
+   * vivid brand red is a gitops constant, not a UI token. */
   --accent-error: #ef5b52;
   --on-accent-error: #070d18;
 

package/styles/theme.css

@@ -1,7 +1,8 @@
 /* AUTO-GENERATED by `nix run .#gen` from the repo-root theme.css — do not edit. */
 /*
- * Toast (sonner) and Drawer enter/exit motion, the entrances (rise / stagger / settled /
- * skeleton) and the app-shell markers, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the reduced-motion fade for Sheet and
+ * the dialogs, the entrances (rise / stagger / settled / skeleton) and the app-shell
+ * markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -307,6 +308,30 @@
   }
 }
 
+/* ── Sheet and dialogs under reduced motion ──────────────────────────────────
+   Both ports animate these with tw-animate-css (`animate-in` / `animate-out` +
+   `slide-*` / `zoom-*`), whose `enter` / `exit` keyframes read the
+   --tw-enter-* / --tw-exit-* variables the slide and zoom utilities set. Zeroing
+   the travel and the scale here leaves a fade: the dialogs already fade, the
+   sheet does not, so its opacity is set too. The keyframes still run on their
+   usual clock, so the TS port's exit `animationend` unmount is untouched.
+   Unlayered, like the rest of this sheet, so it outranks those utilities
+   without !important. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-content"],
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
+    --tw-enter-translate-x: 0;
+    --tw-enter-translate-y: 0;
+    --tw-exit-translate-x: 0;
+    --tw-exit-translate-y: 0;
+    --tw-enter-scale: 1;
+    --tw-exit-scale: 1;
+    --tw-enter-opacity: 0;
+    --tw-exit-opacity: 0;
+  }
+}
+
 /* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
    One keyframe for every "arriving" thing, driven by attributes so a consumer
    without a motion library (and a Server Component) gets it for free:
@@ -513,6 +538,7 @@
   --color-on-accent-warn: var(--on-accent-warn);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-ink: var(--accent-error-ink);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -540,6 +566,12 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
+  /* the error role as text on its own 10 % tint — a destructive menu row
+   * (lib#166). The fill alone read 3.76:1 there on EV and 2.48:1 on a dark
+   * brand; 30 % of the ink pulls it toward whichever polarity the text needs.
+   * Derived rather than required so a brand file that predates it still
+   * renders; one that misses the floor pins its own (docs/spec/accents.md). */
+  --accent-error-ink: color-mix(in srgb, var(--accent-error) 70%, var(--ink));
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts

package/styles/tokens.css

@@ -21,6 +21,8 @@
  *              accent-trace · accent-debug · accent-info · accent-warn · accent-error
  *              primary-ink — the primary role as ink on a surface, where the
  *              fill and the readable value are different colours
+ *              accent-error-ink — the error role as text on its own tint;
+ *              derived from accent-error and ink, a palette may pin it
  *   SCALARS    radius · control-* · display-scale · page-* · shell-* · shadows · fonts
  *   MOTION     ev-ease-* · ev-dur-* · ev-rise · ev-stagger(-section)
  *   CHARTS     chart-1 … chart-5
@@ -37,12 +39,14 @@
  *
  * Accents are ordered by significance, not by meaning; see docs/spec/accents.md.
  * Their values are read outside CSS (gitops mirrors them into Discord embed
- * bars), so they stay plain hex — no color-mix.
+ * bars), so they stay plain hex — no color-mix. `accent-error-ink` is not an
+ * accent but a reading of one, so it lives with the derived tokens.
  */
 
 /*
- * Toast (sonner) and Drawer enter/exit motion, the entrances (rise / stagger / settled /
- * skeleton) and the app-shell markers, shared by both ports. Imported by the token
+ * Toast (sonner) and Drawer enter/exit motion, the reduced-motion fade for Sheet and
+ * the dialogs, the entrances (rise / stagger / settled / skeleton) and the app-shell
+ * markers, shared by both ports. Imported by the token
  * sheets so the lifecycle ships with the theme contract.
  */
 
@@ -348,6 +352,30 @@
   }
 }
 
+/* ── Sheet and dialogs under reduced motion ──────────────────────────────────
+   Both ports animate these with tw-animate-css (`animate-in` / `animate-out` +
+   `slide-*` / `zoom-*`), whose `enter` / `exit` keyframes read the
+   --tw-enter-* / --tw-exit-* variables the slide and zoom utilities set. Zeroing
+   the travel and the scale here leaves a fade: the dialogs already fade, the
+   sheet does not, so its opacity is set too. The keyframes still run on their
+   usual clock, so the TS port's exit `animationend` unmount is untouched.
+   Unlayered, like the rest of this sheet, so it outranks those utilities
+   without !important. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-content"],
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
+    --tw-enter-translate-x: 0;
+    --tw-enter-translate-y: 0;
+    --tw-exit-translate-x: 0;
+    --tw-exit-translate-y: 0;
+    --tw-enter-scale: 1;
+    --tw-exit-scale: 1;
+    --tw-enter-opacity: 0;
+    --tw-exit-opacity: 0;
+  }
+}
+
 /* ── Entrances: rise, stagger, settled, skeleton ─────────────────────────────
    One keyframe for every "arriving" thing, driven by attributes so a consumer
    without a motion library (and a Server Component) gets it for free:
@@ -554,6 +582,7 @@
   --color-on-accent-warn: var(--on-accent-warn);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-ink: var(--accent-error-ink);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -581,6 +610,12 @@
    * side — ink over white needs ~47% to clear it, dark lands near 4:1. */
   --input: color-mix(in srgb, var(--ink) 48%, transparent);
   --ring: var(--primary-ink);
+  /* the error role as text on its own 10 % tint — a destructive menu row
+   * (lib#166). The fill alone read 3.76:1 there on EV and 2.48:1 on a dark
+   * brand; 30 % of the ink pulls it toward whichever polarity the text needs.
+   * Derived rather than required so a brand file that predates it still
+   * renders; one that misses the floor pins its own (docs/spec/accents.md). */
+  --accent-error-ink: color-mix(in srgb, var(--accent-error) 70%, var(--ink));
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
@@ -729,8 +764,10 @@
   --accent-warn: #f2c94c;
   --on-accent-warn: #070d18;
   /* lifted off the brand red #da251d, which failed AA on a card. This one value
-   * carries both the fill and the text; the vivid brand red is a gitops
-   * constant, not a UI token. */
+   * is the fill and the text on a bare surface; on its own 10 % tint (a
+   * destructive menu row) the text is the derived --accent-error-ink, which
+   * EV leaves to the contract: #ec8379, 4.83:1 on that tint over popover. The
+   * vivid brand red is a gitops constant, not a UI token. */
   --accent-error: #ef5b52;
   --on-accent-error: #070d18;