@evinvest/uikit 0.32.0 → 0.33.0

package/dist/index.js

@@ -76,6 +76,7 @@ export { usePendingNavigation } from "./components/shell/use-shell-nav.js";
 export { ShellNav } from "./components/shell/shell-nav.js";
 export { NavBadge, NavDot } from "./components/shell/nav-badge.js";
 export { BottomTabBar } from "./components/shell/bottom-tab-bar.js";
+export { Hotbar } from "./components/shell/hotbar.js";
 export { TopBar } from "./components/shell/top-bar.js";
 export { AccountMenu } from "./components/shell/account-menu.js";
 export { MobileAppBar } from "./components/shell/mobile-app-bar.js";

package/dist/lib/cn.js

@@ -2,6 +2,7 @@ import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 const twMerge = extendTailwindMerge({
   extend: {
+    theme: { radius: ["control", "panel", "chip", "row"] },
     classGroups: {
       "font-size": [{ text: ["caption", "body-s", "body", "body-l", "h3", "h2", "h1", "figure-m", "figure-l"] }]
     }

package/dist/lib/cn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// The kit's own type scale (theme.css `--text-*`). tailwind-merge only knows\n// t-shirt sizes as font sizes, so `text-body` would be filed under text colour\n// and dropped by a later `text-ink`. The Rust mirror is `fuse` in ev_lib_classes.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: [\"caption\", \"body-s\", \"body\", \"body-l\", \"h3\", \"h2\", \"h1\", \"figure-m\", \"figure-l\"] }],\n    },\n  },\n});\n\n/**\n * Fuses class fragments into one string with real Tailwind conflict resolution:\n * `clsx` drops falsy fragments and joins the rest, `tailwind-merge` resolves\n * conflicting utilities so the rightmost wins (`cn(\"p-4\", \"p-2\") === \"p-2\"`). A\n * caller's `className` override, passed last, therefore beats the base classes.\n *\n * `twMerge` parses every utility on every render, and the overwhelmingly common\n * call is one kit constant plus a `className` override that is absent — so that\n * call returns the constant untouched.\n *\n * The Rust mirror is the `cn!` macro in `ev_lib::uikit` (`tailwind_fuse::tw_merge!`).\n */\nexport function cn(...inputs: ClassValue[]): string {\n  if (inputs.length === 2 && typeof inputs[0] === \"string\" && !inputs[1]) {\n    return inputs[0];\n  }\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAKpC,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,CAAC,WAAW,UAAU,QAAQ,UAAU,MAAM,MAAM,MAAM,YAAY,UAAU,EAAE,CAAC;AAAA,IAC3G;AAAA,EACF;AACF,CAAC;AAcM,SAAS,MAAM,QAA8B;AAClD,MAAI,OAAO,WAAW,KAAK,OAAO,OAAO,CAAC,MAAM,YAAY,CAAC,OAAO,CAAC,GAAG;AACtE,WAAO,OAAO,CAAC;AAAA,EACjB;AACA,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}
+{"version":3,"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n// The kit's own type scale (theme.css `--text-*`). tailwind-merge only knows\n// t-shirt sizes as font sizes, so `text-body` would be filed under text colour\n// and dropped by a later `text-ink`. The Rust mirror is `fuse` in ev_lib_classes.\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: { radius: [\"control\", \"panel\", \"chip\", \"row\"] },\n    classGroups: {\n      \"font-size\": [{ text: [\"caption\", \"body-s\", \"body\", \"body-l\", \"h3\", \"h2\", \"h1\", \"figure-m\", \"figure-l\"] }],\n    },\n  },\n});\n\n/**\n * Fuses class fragments into one string with real Tailwind conflict resolution:\n * `clsx` drops falsy fragments and joins the rest, `tailwind-merge` resolves\n * conflicting utilities so the rightmost wins (`cn(\"p-4\", \"p-2\") === \"p-2\"`). A\n * caller's `className` override, passed last, therefore beats the base classes.\n *\n * `twMerge` parses every utility on every render, and the overwhelmingly common\n * call is one kit constant plus a `className` override that is absent — so that\n * call returns the constant untouched.\n *\n * The Rust mirror is the `cn!` macro in `ev_lib::uikit` (`tailwind_fuse::tw_merge!`).\n */\nexport function cn(...inputs: ClassValue[]): string {\n  if (inputs.length === 2 && typeof inputs[0] === \"string\" && !inputs[1]) {\n    return inputs[0];\n  }\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAKpC,MAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,OAAO,EAAE,QAAQ,CAAC,WAAW,SAAS,QAAQ,KAAK,EAAE;AAAA,IACrD,aAAa;AAAA,MACX,aAAa,CAAC,EAAE,MAAM,CAAC,WAAW,UAAU,QAAQ,UAAU,MAAM,MAAM,MAAM,YAAY,UAAU,EAAE,CAAC;AAAA,IAC3G;AAAA,EACF;AACF,CAAC;AAcM,SAAS,MAAM,QAA8B;AAClD,MAAI,OAAO,WAAW,KAAK,OAAO,OAAO,CAAC,MAAM,YAAY,CAAC,OAAO,CAAC,GAAG;AACtE,WAAO,OAAO,CAAC;AAAA,EACjB;AACA,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/primitives/use-floating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/primitives/use-floating.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport type Side = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type Align = \"start\" | \"center\" | \"end\";\n\nexport interface FloatingResult {\n  floatingRef: React.RefObject<HTMLElement | null>;\n  style: React.CSSProperties;\n  side: Side;\n  align: Align;\n}\n\n// The element sits at its containing block's origin and is moved with the\n// `translate` property, never with `top`/`left`: an absolute box's\n// shrink-to-fit width is \"containing block minus `left`\", so a `w-fit` surface\n// pushed past the viewport's right edge (horizontal scroll, a nested scroller)\n// would collapse to one word per line. `translate` composes with `transform`,\n// so the enter animations (which animate `transform`) are unaffected. The\n// offset never goes through React: `place()` / `sync()` write it straight to\n// the element, so this style prop stays one frozen object.\nconst ABSOLUTE: React.CSSProperties = Object.freeze({ position: \"absolute\", top: 0, left: 0 });\n\nconst POSITIONED = new Set([\"relative\", \"absolute\", \"fixed\", \"sticky\"]);\n\n/**\n * Converts a viewport-relative point into the coordinate space of the\n * floating element's containing block, i.e. the numbers `position: absolute`\n * expects. floating-ui's `strategy: \"absolute\"` does the same walk.\n */\nfunction toContainingBlock(\n  floating: HTMLElement,\n  x: number,\n  y: number,\n): { x: number; y: number; root: boolean } {\n  const parent = floating.offsetParent;\n  const doc = floating.ownerDocument;\n  const root = parent === doc.body || parent === doc.documentElement || parent === null;\n  // `offsetParent` reports `body` even when nothing is positioned; only a\n  // positioned body/html really forms a containing block.\n  const positioned =\n    parent instanceof HTMLElement &&\n    (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? \"\"));\n  if (!positioned) {\n    const win = doc.defaultView;\n    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };\n  }\n  const p = parent.getBoundingClientRect();\n  return {\n    x: x - p.left - parent.clientLeft + parent.scrollLeft,\n    y: y - p.top - parent.clientTop + parent.scrollTop,\n    root: false,\n  };\n}\n\ninterface Size2D {\n  width: number;\n  height: number;\n}\n\n// The layout box, not `getBoundingClientRect()`: the latter reports the box\n// mid-animation (`zoom-in-95` scales it to 0.95 on the first frame), which\n// placed a top-side popover 5 % of its height too low, over the anchor.\nfunction layoutSize(el: HTMLElement): Size2D {\n  return { width: el.offsetWidth, height: el.offsetHeight };\n}\n\n// jsdom has no `getAnimations`; there nothing animates.\nfunction hasRunningAnimationAbove(el: Element): boolean {\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (node.getAnimations?.().some((a) => a.playState === \"running\")) return true;\n  }\n  return false;\n}\n\nfunction viewport(): { vw: number; vh: number } {\n  // `clientWidth` excludes the scrollbar, which the floating element cannot\n  // sit under anyway; jsdom reports 0 there, hence the fallback.\n  const el = document.documentElement;\n  return {\n    vw: el.clientWidth || window.innerWidth,\n    vh: el.clientHeight || window.innerHeight,\n  };\n}\n\n/**\n * Positions a floating element against an anchor with `position: absolute` in\n * the coordinate space of its containing block (the `Portal` puts it in\n * `document.body`, so normally document coordinates) — the dep-light stand-in\n * for `@radix-ui/react-popper` / floating-ui. Supports a preferred\n * `side`/`align`, an `offset`, and a single collision flip onto the opposite\n * side when the preferred side overflows the viewport.\n *\n * Two update modes:\n * - `place()` — full pass (flip + clamp into the viewport) on open, on window\n *   `resize`, and whenever the anchor or the floating element changes size.\n * - `sync()` — re-derives the coordinates from the anchor with the side and\n *   the clamp shift already chosen; runs on every `scroll` (captured on\n *   `window`, so nested scroll containers count too).\n *\n * Because the element is absolutely positioned in the document, a document\n * scroll moves it natively with the page — `sync()` then computes the same\n * numbers and is a no-op — so the overlay never lags behind the compositor.\n * Only a nested scroll container changes the coordinates, and there a frame\n * of lag is acceptable. The side is never revisited on scroll: no jumping.\n * A page that scrolls `body` instead of the document (`html { overflow:\n * hidden } body { overflow: auto }`) is such a nested scroller: correct, but\n * with the frame of lag the `fixed` strategy had.\n *\n * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see\n * the README \"Limitations\".\n */\nexport function useFloating(opts: {\n  anchorRef: React.RefObject<Element | null>;\n  open: boolean;\n  side?: Side;\n  align?: Align;\n  offset?: number;\n}): FloatingResult {\n  const { anchorRef, open, side = \"bottom\", align = \"center\", offset = 4 } = opts;\n  const floatingRef = React.useRef<HTMLElement | null>(null);\n  const [placedSide, setPlacedSide] = React.useState<Side>(side);\n  // The last full placement: the side that won the flip and how far the\n  // viewport clamp pushed the element off its ideal spot. `sync()` reuses both\n  // instead of measuring against the viewport again.\n  const placement = React.useRef<{ side: Side; shiftX: number; shiftY: number }>({\n    side,\n    shiftX: 0,\n    shiftY: 0,\n  });\n\n  React.useLayoutEffect(() => {\n    if (!open) return;\n\n    function ideal(a: DOMRect, f: Size2D, placed: Side): { top: number; left: number } {\n      let top = 0;\n      let left = 0;\n      const vertical = placed === \"top\" || placed === \"bottom\";\n\n      if (placed === \"bottom\") top = a.bottom + offset;\n      else if (placed === \"top\") top = a.top - offset - f.height;\n      else if (placed === \"right\") left = a.right + offset;\n      else left = a.left - offset - f.width;\n\n      if (vertical) {\n        if (align === \"start\") left = a.left;\n        else if (align === \"end\") left = a.right - f.width;\n        else left = a.left + a.width / 2 - f.width / 2;\n      } else {\n        if (align === \"start\") top = a.top;\n        else if (align === \"end\") top = a.bottom - f.height;\n        else top = a.top + a.height / 2 - f.height / 2;\n      }\n      return { top, left };\n    }\n\n    // `contain` keeps the box inside the initial containing block: a box past\n    // the document's edge grows the page (a scrollbar shows for as long as the\n    // overlay is open). `place()` already clamps against the viewport;\n    // `sync()` follows a nested scroller's anchor and only needs this bound.\n    function write(floating: HTMLElement, f: Size2D, top: number, left: number, contain: boolean) {\n      const p = toContainingBlock(floating, left, top);\n      let { x, y } = p;\n      if (contain && p.root) {\n        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;\n        x = Math.max(0, Math.min(x, icbWidth - f.width));\n        y = Math.max(0, y);\n      }\n      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;\n    }\n\n    function place() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { vw, vh } = viewport();\n\n      let placed: Side = side;\n      if (side === \"bottom\" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)\n        placed = \"top\";\n      else if (side === \"top\" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)\n        placed = \"bottom\";\n      else if (side === \"right\" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)\n        placed = \"left\";\n      else if (side === \"left\" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)\n        placed = \"right\";\n\n      const { top, left } = ideal(a, f, placed);\n      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));\n      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));\n\n      placement.current = {\n        side: placed,\n        shiftX: clampedLeft - left,\n        shiftY: clampedTop - top,\n      };\n      write(floating, f, clampedTop, clampedLeft, false);\n      // Only a real change may re-render: this runs on every resize tick.\n      setPlacedSide(prev => (prev === placed ? prev : placed));\n    }\n\n    function sync() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { side: placed, shiftX, shiftY } = placement.current;\n      const { top, left } = ideal(a, f, placed);\n      write(floating, f, top + shiftY, left + shiftX, true);\n    }\n\n    // An anchor inside an entering dialog is measured scaled and shifted by the\n    // dialog's animation (`zoom-in-95`), which places the floating element off\n    // its anchor for good: no resize or scroll follows the animation's end. So\n    // keep re-placing, a frame at a time, until no ancestor animates.\n    let frame = 0;\n    function follow() {\n      frame = 0;\n      place();\n      if (anchorRef.current && hasRunningAnimationAbove(anchorRef.current)) {\n        frame = requestAnimationFrame(follow);\n      }\n    }\n    follow();\n    // No rAF: `scroll` already fires at most once per frame, and a synchronous\n    // DOM write from the handler lands in that same frame — rAF would cost one.\n    window.addEventListener(\"scroll\", sync, true);\n    window.addEventListener(\"resize\", place);\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(place);\n      if (anchorRef.current) observer.observe(anchorRef.current);\n      if (floatingRef.current) observer.observe(floatingRef.current);\n    }\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      window.removeEventListener(\"scroll\", sync, true);\n      window.removeEventListener(\"resize\", place);\n      observer?.disconnect();\n    };\n  }, [open, side, align, offset, anchorRef]);\n\n  return { floatingRef, style: ABSOLUTE, side: placedSide, align };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/primitives/use-floating.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { Side } from \"../generated/primitives\";\n\nexport type { Side };\nexport type Align = \"start\" | \"center\" | \"end\";\n\nexport interface FloatingResult {\n  floatingRef: React.RefObject<HTMLElement | null>;\n  style: React.CSSProperties;\n  side: Side;\n  align: Align;\n}\n\n// The element sits at its containing block's origin and is moved with the\n// `translate` property, never with `top`/`left`: an absolute box's\n// shrink-to-fit width is \"containing block minus `left`\", so a `w-fit` surface\n// pushed past the viewport's right edge (horizontal scroll, a nested scroller)\n// would collapse to one word per line. `translate` composes with `transform`,\n// so the enter animations (which animate `transform`) are unaffected. The\n// offset never goes through React: `place()` / `sync()` write it straight to\n// the element, so this style prop stays one frozen object.\nconst ABSOLUTE: React.CSSProperties = Object.freeze({ position: \"absolute\", top: 0, left: 0 });\n\nconst POSITIONED = new Set([\"relative\", \"absolute\", \"fixed\", \"sticky\"]);\n\n/**\n * Converts a viewport-relative point into the coordinate space of the\n * floating element's containing block, i.e. the numbers `position: absolute`\n * expects. floating-ui's `strategy: \"absolute\"` does the same walk.\n */\nfunction toContainingBlock(\n  floating: HTMLElement,\n  x: number,\n  y: number,\n): { x: number; y: number; root: boolean } {\n  const parent = floating.offsetParent;\n  const doc = floating.ownerDocument;\n  const root = parent === doc.body || parent === doc.documentElement || parent === null;\n  // `offsetParent` reports `body` even when nothing is positioned; only a\n  // positioned body/html really forms a containing block.\n  const positioned =\n    parent instanceof HTMLElement &&\n    (!root || POSITIONED.has(doc.defaultView?.getComputedStyle(parent).position ?? \"\"));\n  if (!positioned) {\n    const win = doc.defaultView;\n    return { x: x + (win?.scrollX ?? 0), y: y + (win?.scrollY ?? 0), root: true };\n  }\n  const p = parent.getBoundingClientRect();\n  return {\n    x: x - p.left - parent.clientLeft + parent.scrollLeft,\n    y: y - p.top - parent.clientTop + parent.scrollTop,\n    root: false,\n  };\n}\n\ninterface Size2D {\n  width: number;\n  height: number;\n}\n\n// The layout box, not `getBoundingClientRect()`: the latter reports the box\n// mid-animation (`zoom-in-95` scales it to 0.95 on the first frame), which\n// placed a top-side popover 5 % of its height too low, over the anchor.\nfunction layoutSize(el: HTMLElement): Size2D {\n  return { width: el.offsetWidth, height: el.offsetHeight };\n}\n\n// jsdom has no `getAnimations`; there nothing animates.\nfunction hasRunningAnimationAbove(el: Element): boolean {\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (node.getAnimations?.().some((a) => a.playState === \"running\")) return true;\n  }\n  return false;\n}\n\nfunction viewport(): { vw: number; vh: number } {\n  // `clientWidth` excludes the scrollbar, which the floating element cannot\n  // sit under anyway; jsdom reports 0 there, hence the fallback.\n  const el = document.documentElement;\n  return {\n    vw: el.clientWidth || window.innerWidth,\n    vh: el.clientHeight || window.innerHeight,\n  };\n}\n\n/**\n * Positions a floating element against an anchor with `position: absolute` in\n * the coordinate space of its containing block (the `Portal` puts it in\n * `document.body`, so normally document coordinates) — the dep-light stand-in\n * for `@radix-ui/react-popper` / floating-ui. Supports a preferred\n * `side`/`align`, an `offset`, and a single collision flip onto the opposite\n * side when the preferred side overflows the viewport.\n *\n * Two update modes:\n * - `place()` — full pass (flip + clamp into the viewport) on open, on window\n *   `resize`, and whenever the anchor or the floating element changes size.\n * - `sync()` — re-derives the coordinates from the anchor with the side and\n *   the clamp shift already chosen; runs on every `scroll` (captured on\n *   `window`, so nested scroll containers count too).\n *\n * Because the element is absolutely positioned in the document, a document\n * scroll moves it natively with the page — `sync()` then computes the same\n * numbers and is a no-op — so the overlay never lags behind the compositor.\n * Only a nested scroll container changes the coordinates, and there a frame\n * of lag is acceptable. The side is never revisited on scroll: no jumping.\n * A page that scrolls `body` instead of the document (`html { overflow:\n * hidden } body { overflow: auto }`) is such a nested scroller: correct, but\n * with the frame of lag the `fixed` strategy had.\n *\n * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see\n * the README \"Limitations\".\n */\nexport function useFloating(opts: {\n  anchorRef: React.RefObject<Element | null>;\n  open: boolean;\n  side?: Side;\n  align?: Align;\n  offset?: number;\n}): FloatingResult {\n  const { anchorRef, open, side = \"bottom\", align = \"center\", offset = 4 } = opts;\n  const floatingRef = React.useRef<HTMLElement | null>(null);\n  const [placedSide, setPlacedSide] = React.useState<Side>(side);\n  // The last full placement: the side that won the flip and how far the\n  // viewport clamp pushed the element off its ideal spot. `sync()` reuses both\n  // instead of measuring against the viewport again.\n  const placement = React.useRef<{ side: Side; shiftX: number; shiftY: number }>({\n    side,\n    shiftX: 0,\n    shiftY: 0,\n  });\n\n  React.useLayoutEffect(() => {\n    if (!open) return;\n\n    function ideal(a: DOMRect, f: Size2D, placed: Side): { top: number; left: number } {\n      let top = 0;\n      let left = 0;\n      const vertical = placed === \"top\" || placed === \"bottom\";\n\n      if (placed === \"bottom\") top = a.bottom + offset;\n      else if (placed === \"top\") top = a.top - offset - f.height;\n      else if (placed === \"right\") left = a.right + offset;\n      else left = a.left - offset - f.width;\n\n      if (vertical) {\n        if (align === \"start\") left = a.left;\n        else if (align === \"end\") left = a.right - f.width;\n        else left = a.left + a.width / 2 - f.width / 2;\n      } else {\n        if (align === \"start\") top = a.top;\n        else if (align === \"end\") top = a.bottom - f.height;\n        else top = a.top + a.height / 2 - f.height / 2;\n      }\n      return { top, left };\n    }\n\n    // `contain` keeps the box inside the initial containing block: a box past\n    // the document's edge grows the page (a scrollbar shows for as long as the\n    // overlay is open). `place()` already clamps against the viewport;\n    // `sync()` follows a nested scroller's anchor and only needs this bound.\n    function write(floating: HTMLElement, f: Size2D, top: number, left: number, contain: boolean) {\n      const p = toContainingBlock(floating, left, top);\n      let { x, y } = p;\n      if (contain && p.root) {\n        const icbWidth = floating.ownerDocument.documentElement.clientWidth || window.innerWidth;\n        x = Math.max(0, Math.min(x, icbWidth - f.width));\n        y = Math.max(0, y);\n      }\n      floating.style.translate = `${Math.round(x)}px ${Math.round(y)}px`;\n    }\n\n    function place() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { vw, vh } = viewport();\n\n      let placed: Side = side;\n      if (side === \"bottom\" && a.bottom + offset + f.height > vh && a.top - offset - f.height > 0)\n        placed = \"top\";\n      else if (side === \"top\" && a.top - offset - f.height < 0 && a.bottom + offset + f.height < vh)\n        placed = \"bottom\";\n      else if (side === \"right\" && a.right + offset + f.width > vw && a.left - offset - f.width > 0)\n        placed = \"left\";\n      else if (side === \"left\" && a.left - offset - f.width < 0 && a.right + offset + f.width < vw)\n        placed = \"right\";\n\n      const { top, left } = ideal(a, f, placed);\n      const clampedLeft = Math.max(offset, Math.min(left, vw - f.width - offset));\n      const clampedTop = Math.max(offset, Math.min(top, vh - f.height - offset));\n\n      placement.current = {\n        side: placed,\n        shiftX: clampedLeft - left,\n        shiftY: clampedTop - top,\n      };\n      write(floating, f, clampedTop, clampedLeft, false);\n      // Only a real change may re-render: this runs on every resize tick.\n      setPlacedSide(prev => (prev === placed ? prev : placed));\n    }\n\n    function sync() {\n      const anchor = anchorRef.current;\n      const floating = floatingRef.current;\n      if (!anchor || !floating) return;\n\n      const a = anchor.getBoundingClientRect();\n      const f = layoutSize(floating);\n      const { side: placed, shiftX, shiftY } = placement.current;\n      const { top, left } = ideal(a, f, placed);\n      write(floating, f, top + shiftY, left + shiftX, true);\n    }\n\n    // An anchor inside an entering dialog is measured scaled and shifted by the\n    // dialog's animation (`zoom-in-95`), which places the floating element off\n    // its anchor for good: no resize or scroll follows the animation's end. So\n    // keep re-placing, a frame at a time, until no ancestor animates.\n    let frame = 0;\n    function follow() {\n      frame = 0;\n      place();\n      if (anchorRef.current && hasRunningAnimationAbove(anchorRef.current)) {\n        frame = requestAnimationFrame(follow);\n      }\n    }\n    follow();\n    // No rAF: `scroll` already fires at most once per frame, and a synchronous\n    // DOM write from the handler lands in that same frame — rAF would cost one.\n    window.addEventListener(\"scroll\", sync, true);\n    window.addEventListener(\"resize\", place);\n\n    let observer: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\") {\n      observer = new ResizeObserver(place);\n      if (anchorRef.current) observer.observe(anchorRef.current);\n      if (floatingRef.current) observer.observe(floatingRef.current);\n    }\n\n    return () => {\n      if (frame) cancelAnimationFrame(frame);\n      window.removeEventListener(\"scroll\", sync, true);\n      window.removeEventListener(\"resize\", place);\n      observer?.disconnect();\n    };\n  }, [open, side, align, offset, anchorRef]);\n\n  return { floatingRef, style: ABSOLUTE, side: placedSide, align };\n}\n"],"mappings":"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","names":[]}

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 * `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":[]}
+{"version":3,"sources":["../../src/primitives/use-roving-focus.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { RovingOrientation } from \"../generated/primitives\";\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?: RovingOrientation;\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;AAgBhB,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.32.0",
+  "version": "0.33.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

@@ -39,7 +39,6 @@
   --background: #0d0d0f;
   --card: #151518;
   --secondary: #1c1c20;
-  --on-secondary: var(--ink);
   --popover: #252529;
   --muted: #070709;
   --hover: #e6e1d30f;
@@ -63,13 +62,11 @@
 
   /* brand and primary. A fill and an ink are different jobs (docs/spec/accents.md):
    * --primary carries white at 4.62:1 and reads as a shape on every plane (3.30:1
-   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there).
-   * Figma's hover #18998b is 3.52:1 under white, so #127c71 (5.06:1) is pinned. */
+   * on the popover); --primary-ink is the teal that reads as text (4.96:1 there). */
   --brand: #0d1627;
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a3958c;
 
   /* status. Fills carry the dark label (white fails 3:1–3.4:1 on these); the
@@ -95,29 +92,6 @@
   --chart-4: #e68aaf;
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
-
-  --button-primary-bg: #e6e1d300;
-  --button-primary-hover: #e6e1d314;
-  --button-primary-border: #e6e1d399;
-  --button-primary-ink: #e6e1d3;
-  --button-danger-bg: #f05b5200;
-  --button-danger-hover: #f05b521a;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: var(--accent-error);
-
-  /* chips are outlines: a transparent fill and the label's hue at 50 % */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #35a39500;
-  --chip-primary-border: #35a3958c;
-  --chip-positive-bg: #2e9e5c00;
-  --chip-positive-border: #4abf7680;
-  --chip-info-bg: #4990d800;
-  --chip-info-border: #6ca6e480;
-  --chip-warn-bg: #f5c84e00;
-  --chip-warn-border: #f5c84e80;
-  --chip-error-bg: #f05b5200;
-  --chip-error-border: #f05b5280;
 }
 
 /* ── u2 Light ────────────────────────────────────────────────── */
@@ -127,7 +101,6 @@
   --background: #efebdf;
   --card: #f6f3eb;
   --secondary: #fbfaf6;
-  --on-secondary: var(--ink);
   --popover: #ffffff;
   --muted: #e6e1d3;
   --hover: #0d0d0f0d;
@@ -149,7 +122,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #116f65;
-  --primary-hover: #116f65;
   --primary-border: #116f658c;
 
   /* Figma's positive #228a4e carries neither label at 4.5:1 (white 4.36, dark
@@ -178,29 +150,6 @@
   --chart-4: #b74679;
   --chart-5: #228a4e;
   --chart-6: #6d5acc;
-
-  --button-primary-bg: #0d0d0f00;
-  --button-primary-hover: #0d0d0f0f;
-  --button-primary-border: #0d0d0fa6;
-  --button-primary-ink: #080e1a;
-  --button-danger-bg: #db383400;
-  --button-danger-hover: #db383414;
-  --button-danger-border: #db3834;
-  --button-danger-ink: var(--accent-error);
-
-  /* the solid hue at 50 % (warning 60 %), where Dark uses the ink's */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: #13837700;
-  --chip-primary-border: #116f658c;
-  --chip-positive-bg: #228a4e00;
-  --chip-positive-border: #228a4e80;
-  --chip-info-bg: #2d79c200;
-  --chip-info-border: #2d79c280;
-  --chip-warn-bg: #a77f1200;
-  --chip-warn-border: #a77f1299;
-  --chip-error-bg: #db383400;
-  --chip-error-border: #db383480;
 }
 
 /* ── Oldschool ───────────────────────────────────────────────── *
@@ -220,7 +169,6 @@
   --background: #070d18;
   --card: #16233c;
   --secondary: #0d1526;
-  --on-secondary: var(--ink);
   --popover: #1d2c49;
   --muted: #26375c;
   --hover: #e6e1d312;
@@ -242,7 +190,6 @@
   --primary: #138377;
   --on-primary: #ffffff;
   --primary-ink: #35a395;
-  --primary-hover: #127c71;
   --primary-border: #35a39500;
 
   --positive: #2e9e5c;
@@ -267,31 +214,21 @@
   --chart-5: #2e9e5c;
   --chart-6: #988eef;
 
-  /* filled buttons. The danger label stays dark: white on #f05b52 is 3.32:1. */
-  --button-primary-bg: #138377;
-  --button-primary-hover: #127c71;
-  --button-primary-border: #138377;
-  --button-primary-ink: #ffffff;
-  --button-danger-bg: #f05b52;
-  --button-danger-hover: #f06c61;
-  --button-danger-border: #f05b52;
-  --button-danger-ink: #070d18;
+  /* danger is a fill */
+  --button-danger-bg: var(--accent-error);
+  --button-danger-hover: var(--accent-error-hover);
+  --button-danger-border: var(--accent-error);
+  --button-danger-ink: var(--on-accent-error);
 
-  /* chips are tinted pills with no edge */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: #e6e1d300;
+  /* tints are pills with no edge */
+  --tint-fill: 18%;
+  --tint-edge: 0%;
+  --tint-neutral-edge: transparent;
   /* Figma tints the accent chip 16 %, which leaves its teal label at 4.03:1 on
    * the card; 8 % holds 4.56:1 */
-  --chip-primary-bg: #35a39514;
-  --chip-primary-border: #35a39500;
-  --chip-positive-bg: #2e9e5c2e;
-  --chip-positive-border: #4abf7600;
-  --chip-info-bg: #4990d82e;
-  --chip-info-border: #6ca6e400;
-  --chip-warn-bg: #f5c84e29;
-  --chip-warn-border: #f5c84e00;
-  --chip-error-bg: #f05b522e;
-  --chip-error-border: #f06c6100;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) 8%, transparent);
+  /* at 18 % the info label reads 4.43:1 on its fill; 16 % clears 4.5:1 */
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) 16%, transparent);
 
   --radius: 0.5rem;
   --control-radius: 0.375rem;

package/styles/theme.css

@@ -664,6 +664,11 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 8px);
+  /* the roles the kit's tables name; the steps above are the consumer's */
+  --radius-control: var(--control-radius);
+  --radius-panel: var(--radius);
+  --radius-chip: var(--chip-radius);
+  --radius-row: calc(var(--radius) - 4px); /* concentric inside a panel's p-1 */
 
   /* The names stay, the values are per theme: u2 is flat (`--depth-*` is a
    * zero shadow), Oldschool brings the ladder back in ev.css. */
@@ -671,25 +676,25 @@
   --shadow-elevated: var(--depth-elevated);
   --shadow-overlay: var(--depth-overlay);
 
-  /* Type scale: size / line-height in pairs, the Figma text styles. */
-  --text-caption: 0.6875rem;
-  --text-caption--line-height: 0.875rem;
-  --text-body-s: 0.75rem;
-  --text-body-s--line-height: 1rem;
-  --text-body: 0.8125rem;
-  --text-body--line-height: 1.125rem;
-  --text-body-l: 0.875rem;
-  --text-body-l--line-height: 1.25rem;
-  --text-h3: 0.875rem;
-  --text-h3--line-height: 1.25rem;
-  --text-h2: 1.5rem;
-  --text-h2--line-height: 1.875rem;
-  --text-h1: 2rem;
-  --text-h1--line-height: 2.375rem;
-  --text-figure-m: 1.25rem;
-  --text-figure-m--line-height: 1.5rem;
-  --text-figure-l: 1.75rem;
-  --text-figure-l--line-height: 2rem;
+  /* Type scale: two even-step ramps off the geometry rule's inputs (docs/spec/roles.md). */
+  --text-caption: calc(var(--body-size) - 2 * var(--body-step));
+  --text-caption--line-height: calc(var(--body-leading) - 4 * var(--body-step));
+  --text-body-s: calc(var(--body-size) - var(--body-step));
+  --text-body-s--line-height: calc(var(--body-leading) - 2 * var(--body-step));
+  --text-body: var(--body-size);
+  --text-body--line-height: var(--body-leading);
+  --text-body-l: calc(var(--body-size) + var(--body-step));
+  --text-body-l--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h3: calc(var(--body-size) + var(--body-step));
+  --text-h3--line-height: calc(var(--body-leading) + 2 * var(--body-step));
+  --text-h2: calc((var(--display-base) + 2 * var(--display-step)) * var(--display-scale));
+  --text-h2--line-height: calc((var(--display-base) + 2 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-h1: calc((var(--display-base) + 4 * var(--display-step)) * var(--display-scale));
+  --text-h1--line-height: calc((var(--display-base) + 4 * var(--display-step) + var(--display-leading)) * var(--display-scale));
+  --text-figure-m: calc((var(--display-base) + var(--display-step)) * var(--display-scale));
+  --text-figure-m--line-height: calc((var(--display-base) + var(--display-step) + var(--figure-leading)) * var(--display-scale));
+  --text-figure-l: calc((var(--display-base) + 3 * var(--display-step)) * var(--display-scale));
+  --text-figure-l--line-height: calc((var(--display-base) + 3 * var(--display-step) + var(--figure-leading)) * var(--display-scale));
 
   /* The families are parameters, apart from the colour contract: a brand scope
    * sets `--brand-font-sans`, `--brand-font-serif` and `--brand-font-mono`
@@ -748,38 +753,51 @@
   --color-positive-ink: var(--positive-ink);
   --color-accent-trace: var(--accent-trace);
   --color-on-accent-trace: var(--on-accent-trace);
+  --color-accent-trace-hover: var(--accent-trace-hover);
   --color-accent-debug: var(--accent-debug);
   --color-on-accent-debug: var(--on-accent-debug);
+  --color-accent-debug-hover: var(--accent-debug-hover);
   --color-accent-info: var(--accent-info);
   --color-on-accent-info: var(--on-accent-info);
+  --color-accent-info-hover: var(--accent-info-hover);
   --color-accent-info-ink: var(--accent-info-ink);
   --color-accent-warn: var(--accent-warn);
   --color-on-accent-warn: var(--on-accent-warn);
+  --color-accent-warn-hover: var(--accent-warn-hover);
   --color-accent-error: var(--accent-error);
   --color-on-accent-error: var(--on-accent-error);
+  --color-accent-error-hover: var(--accent-error-hover);
 
-  /* component faces: derived below, pinned per theme by EV, so `bg-button-primary-bg`
-   * and `border-chip-error-border` are real utilities the class merge understands */
-  --color-button-primary-bg: var(--button-primary-bg);
-  --color-button-primary-hover: var(--button-primary-hover);
-  --color-button-primary-border: var(--button-primary-border);
-  --color-button-primary-ink: var(--button-primary-ink);
+  /* component faces: derived below, pinned per theme by EV, so `bg-button-danger-bg`
+   * and `border-tint-error-edge` are real utilities the class merge understands */
   --color-button-danger-bg: var(--button-danger-bg);
   --color-button-danger-hover: var(--button-danger-hover);
   --color-button-danger-border: var(--button-danger-border);
   --color-button-danger-ink: var(--button-danger-ink);
-  --color-chip-neutral-bg: var(--chip-neutral-bg);
-  --color-chip-neutral-border: var(--chip-neutral-border);
-  --color-chip-primary-bg: var(--chip-primary-bg);
-  --color-chip-primary-border: var(--chip-primary-border);
-  --color-chip-positive-bg: var(--chip-positive-bg);
-  --color-chip-positive-border: var(--chip-positive-border);
-  --color-chip-info-bg: var(--chip-info-bg);
-  --color-chip-info-border: var(--chip-info-border);
-  --color-chip-warn-bg: var(--chip-warn-bg);
-  --color-chip-warn-border: var(--chip-warn-border);
-  --color-chip-error-bg: var(--chip-error-bg);
-  --color-chip-error-border: var(--chip-error-border);
+  --color-tint-neutral-fill: var(--tint-neutral-fill);
+  --color-tint-neutral-edge: var(--tint-neutral-edge);
+  --color-tint-neutral-wash: var(--tint-neutral-wash);
+  --color-tint-primary-fill: var(--tint-primary-fill);
+  --color-tint-primary-edge: var(--tint-primary-edge);
+  --color-tint-primary-wash: var(--tint-primary-wash);
+  --color-tint-positive-fill: var(--tint-positive-fill);
+  --color-tint-positive-edge: var(--tint-positive-edge);
+  --color-tint-positive-wash: var(--tint-positive-wash);
+  --color-tint-info-fill: var(--tint-info-fill);
+  --color-tint-info-edge: var(--tint-info-edge);
+  --color-tint-info-wash: var(--tint-info-wash);
+  --color-tint-warn-fill: var(--tint-warn-fill);
+  --color-tint-warn-edge: var(--tint-warn-edge);
+  --color-tint-warn-wash: var(--tint-warn-wash);
+  --color-tint-error-fill: var(--tint-error-fill);
+  --color-tint-error-edge: var(--tint-error-edge);
+  --color-tint-error-wash: var(--tint-error-wash);
+  --color-tint-trace-fill: var(--tint-trace-fill);
+  --color-tint-trace-edge: var(--tint-trace-edge);
+  --color-tint-trace-wash: var(--tint-trace-wash);
+  --color-tint-debug-fill: var(--tint-debug-fill);
+  --color-tint-debug-edge: var(--tint-debug-edge);
+  --color-tint-debug-wash: var(--tint-debug-wash);
 
   /* charts — distinguishable hues carrying no significance */
   --color-chart-1: var(--chart-1);
@@ -819,7 +837,14 @@
    * 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);
-  --primary-hover: color-mix(in srgb, var(--primary) 95%, black);
+  --on-secondary: var(--ink);
+  /* a solid fill's hover moves away from its label, so the label only gains contrast */
+  --primary-hover: color-mix(in srgb, rgb(from var(--on-primary) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--primary));
+  --accent-trace-hover: color-mix(in srgb, rgb(from var(--on-accent-trace) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-trace));
+  --accent-debug-hover: color-mix(in srgb, rgb(from var(--on-accent-debug) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-debug));
+  --accent-info-hover: color-mix(in srgb, rgb(from var(--on-accent-info) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-info));
+  --accent-warn-hover: color-mix(in srgb, rgb(from var(--on-accent-warn) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-warn));
+  --accent-error-hover: color-mix(in srgb, rgb(from var(--on-accent-error) calc(255 - r) calc(255 - g) calc(255 - b)) var(--tint-hover), var(--accent-error));
   --primary-border: color-mix(in srgb, var(--primary-ink) 55%, transparent);
   /* the quiet status roles as text on a surface: a fill is a shape, and as text
    * it reads far below AA on a light plane. warn and error have none: they are
@@ -834,31 +859,40 @@
  * same scopes, listed in another order so the contract reader finds one rule
  * per selector. */
 :where([data-theme], [data-brand], .light, .dark, :root) {
-  /* primary is an outline button, danger the same in the error role */
-  --button-primary-bg: transparent;
-  --button-primary-hover: var(--hover);
-  --button-primary-border: color-mix(in srgb, var(--ink) 60%, transparent);
-  --button-primary-ink: var(--ink);
+  /* danger is an outline in the error role */
   --button-danger-bg: transparent;
-  --button-danger-hover: color-mix(in srgb, var(--accent-error) 10%, transparent);
+  --button-danger-hover: color-mix(in srgb, var(--accent-error) var(--tint-hover), transparent);
   --button-danger-border: var(--accent-error);
   --button-danger-ink: var(--accent-error);
 
-  /* chips (Badge, status pills). The source is the colour the label wears, so
-   * the edge and the label are one hue; --chip-fill and --chip-edge are in the
-   * geometry. */
-  --chip-neutral-bg: var(--hover);
-  --chip-neutral-border: var(--border);
-  --chip-primary-bg: color-mix(in srgb, var(--primary-ink) var(--chip-fill), transparent);
-  --chip-primary-border: color-mix(in srgb, var(--primary-ink) var(--chip-edge), transparent);
-  --chip-positive-bg: color-mix(in srgb, var(--positive-ink) var(--chip-fill), transparent);
-  --chip-positive-border: color-mix(in srgb, var(--positive-ink) var(--chip-edge), transparent);
-  --chip-info-bg: color-mix(in srgb, var(--accent-info-ink) var(--chip-fill), transparent);
-  --chip-info-border: color-mix(in srgb, var(--accent-info-ink) var(--chip-edge), transparent);
-  --chip-warn-bg: color-mix(in srgb, var(--accent-warn) var(--chip-fill), transparent);
-  --chip-warn-border: color-mix(in srgb, var(--accent-warn) var(--chip-edge), transparent);
-  --chip-error-bg: color-mix(in srgb, var(--accent-error) var(--chip-fill), transparent);
-  --chip-error-border: color-mix(in srgb, var(--accent-error) var(--chip-edge), transparent);
+  /* a tone worn as a tint: a chip's fill and edge are the tone's ink at
+   * --tint-fill and --tint-edge, so the edge and the label are one hue, and an
+   * area's wash is it at --tint-wash. warn and error are their own ink
+   * (docs/spec/accents.md). */
+  --tint-neutral-fill: var(--hover);
+  --tint-neutral-edge: var(--border);
+  --tint-neutral-wash: transparent;
+  --tint-primary-fill: color-mix(in srgb, var(--primary-ink) var(--tint-fill), transparent);
+  --tint-primary-edge: color-mix(in srgb, var(--primary-ink) var(--tint-edge), transparent);
+  --tint-primary-wash: color-mix(in srgb, var(--primary-ink) var(--tint-wash), transparent);
+  --tint-positive-fill: color-mix(in srgb, var(--positive-ink) var(--tint-fill), transparent);
+  --tint-positive-edge: color-mix(in srgb, var(--positive-ink) var(--tint-edge), transparent);
+  --tint-positive-wash: color-mix(in srgb, var(--positive-ink) var(--tint-wash), transparent);
+  --tint-info-fill: color-mix(in srgb, var(--accent-info-ink) var(--tint-fill), transparent);
+  --tint-info-edge: color-mix(in srgb, var(--accent-info-ink) var(--tint-edge), transparent);
+  --tint-info-wash: color-mix(in srgb, var(--accent-info-ink) var(--tint-wash), transparent);
+  --tint-warn-fill: color-mix(in srgb, var(--accent-warn) var(--tint-fill), transparent);
+  --tint-warn-edge: color-mix(in srgb, var(--accent-warn) var(--tint-edge), transparent);
+  --tint-warn-wash: color-mix(in srgb, var(--accent-warn) var(--tint-wash), transparent);
+  --tint-error-fill: color-mix(in srgb, var(--accent-error) var(--tint-fill), transparent);
+  --tint-error-edge: color-mix(in srgb, var(--accent-error) var(--tint-edge), transparent);
+  --tint-error-wash: color-mix(in srgb, var(--accent-error) var(--tint-wash), transparent);
+  --tint-trace-fill: color-mix(in srgb, var(--accent-trace) var(--tint-fill), transparent);
+  --tint-trace-edge: color-mix(in srgb, var(--accent-trace) var(--tint-edge), transparent);
+  --tint-trace-wash: color-mix(in srgb, var(--accent-trace) var(--tint-wash), transparent);
+  --tint-debug-fill: color-mix(in srgb, var(--accent-debug) var(--tint-fill), transparent);
+  --tint-debug-edge: color-mix(in srgb, var(--accent-debug) var(--tint-edge), transparent);
+  --tint-debug-wash: color-mix(in srgb, var(--accent-debug) var(--tint-wash), transparent);
 }
 
 /* Geometry. A `[data-brand]` scope is a theme root of its own, so it restarts
@@ -868,22 +902,37 @@
   --radius: 0.375rem; /* panels and menus */
   /* control geometry, so a consumer reshapes every button/input at once */
   --control-radius: 0.25rem;
+  --control-h: 2.25rem;
+  --control-step: 0.25rem;
+  --control-inset: 1rem; /* the md rung's side inset; every other rung's moves with its height */
   --chip-radius: 0.25rem;
-  /* how much of its ink a chip's fill and edge take, for a brand that pins
-   * nothing: an outline by default, a tint where a theme raises the fill */
-  --chip-fill: 0%;
-  --chip-edge: 50%;
+  --disabled-opacity: 0.5;
+  /* how much of its ink a tint's fill and edge take: an outline by default, a
+   * tinted pill where a theme raises the fill; and a tone's pointed-at row or face */
+  --tint-fill: 0%;
+  --tint-edge: 50%;
+  --tint-hover: 10%;
+  /* how much of its ink an area in a tone (a banner, an alert) is washed with:
+   * an area needs a body to read as content, where a chip reads as an outline.
+   * At 10 % Light's positive and warn labels fall under their floor. */
+  --tint-wash: 6%;
   /* u2 is flat: depth is surface steps and hairlines. Never `none` — inside
    * Tailwind's comma-separated box-shadow list it invalidates the whole
    * declaration, and the focus ring goes with it. */
   --depth-card: 0 0 #0000;
   --depth-elevated: 0 0 #0000;
   --depth-overlay: 0 0 #0000;
-  --control-py: 0.5rem;
-  /* the Xl (call-to-action) button reads all three */
+  /* the Xl (call-to-action) rung's inset and text */
   --control-px: 2rem;
   --control-text: 1rem;
-  /* multiplies the display type scale (uikit <Display>) */
+  /* the type ramps: text steps 1 px, display steps 4 px, a scale over the display tier */
+  --body-size: 0.8125rem;
+  --body-step: 0.0625rem;
+  --body-leading: 1.125rem;
+  --display-base: 1rem;
+  --display-step: 0.25rem;
+  --display-leading: 0.375rem; /* h1, h2 */
+  --figure-leading: 0.25rem; /* figure-m, figure-l */
   --display-scale: 1;
   /* the vertical rhythm of a full-bleed <Section>; `tight` is the sub-page one */
   --band-py: 2.25rem;
@@ -927,6 +976,24 @@
    */
 }
 
+/* The control height and inset ramps a `Size` step names, re-derived on every
+ * scope that may set `--control-h`. Pin one step to bend the ramp. */
+:where(:root, [data-brand], [data-theme]) {
+  --control-h-2xs: calc(var(--control-h) - 3 * var(--control-step));
+  --control-h-xs: calc(var(--control-h) - 2 * var(--control-step));
+  --control-h-sm: calc(var(--control-h) - var(--control-step));
+  --control-h-md: var(--control-h);
+  --control-h-lg: calc(var(--control-h) + var(--control-step));
+  --control-h-xl: calc(var(--control-h) + 3 * var(--control-step));
+  --control-h-touch: max(var(--control-h-lg), 2.75rem); /* the 44 px pointer-target floor (WCAG 2.5.5) */
+  --control-inset-xs: calc(var(--control-h-xs) - var(--control-h) + var(--control-inset));
+  --control-inset-sm: calc(var(--control-h-sm) - var(--control-h) + var(--control-inset));
+  --control-inset-md: var(--control-inset);
+  --control-inset-lg: calc(var(--control-h-lg) - var(--control-h) + var(--control-inset));
+  --control-inset-xl: var(--control-px);
+  --control-inset-touch: calc(var(--control-h-touch) - var(--control-h) + var(--control-inset));
+}
+
 :root {
   /* shell offset — viewport space reserved by whatever shell hosts the app.
      Standalone apps get 0; a hosting shell overrides on :root. Size