@tensor_1/tokens 2.16.0 → 2.18.0

package/build/css/tokens.css

@@ -139,19 +139,19 @@
     --uix-font-sans: "Inter",system-ui,sans-serif;
     --uix-font-heading: "IBM Plex Sans","Inter",system-ui,sans-serif;
     --uix-font-mono: "IBM Plex Mono",ui-monospace,monospace;
-    --uix-text-display: 40px;
+    --uix-text-display: 2.5rem;
     --uix-leading-display: 1.05;
-    --uix-text-data-hero: 34px;
+    --uix-text-data-hero: 2.125rem;
     --uix-leading-data-hero: 1.1;
-    --uix-text-h2: 24px;
+    --uix-text-h2: 1.5rem;
     --uix-leading-h2: 1.15;
-    --uix-text-h3: 15px;
+    --uix-text-h3: 0.9375rem;
     --uix-leading-h3: 1.3;
-    --uix-text-body: 14px;
+    --uix-text-body: 0.875rem;
     --uix-leading-body: 1.5;
-    --uix-text-meta: 12.5px;
+    --uix-text-meta: 0.78125rem;
     --uix-leading-meta: 1.4;
-    --uix-text-eyebrow: 11px;
+    --uix-text-eyebrow: 0.6875rem;
     --uix-leading-eyebrow: 1.2;
     --uix-tracking-tight: -0.02em;
     --uix-tracking-eyebrow: 0.06em;

package/build/ts/tokens.js

@@ -295,19 +295,19 @@ export const light = {
   "font-sans": "\"Inter\",system-ui,sans-serif",
   "font-heading": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif",
   "font-mono": "\"IBM Plex Mono\",ui-monospace,monospace",
-  "text-display": "40px",
+  "text-display": "2.5rem",
   "leading-display": "1.05",
-  "text-data-hero": "34px",
+  "text-data-hero": "2.125rem",
   "leading-data-hero": "1.1",
-  "text-h2": "24px",
+  "text-h2": "1.5rem",
   "leading-h2": "1.15",
-  "text-h3": "15px",
+  "text-h3": "0.9375rem",
   "leading-h3": "1.3",
-  "text-body": "14px",
+  "text-body": "0.875rem",
   "leading-body": "1.5",
-  "text-meta": "12.5px",
+  "text-meta": "0.78125rem",
   "leading-meta": "1.4",
-  "text-eyebrow": "11px",
+  "text-eyebrow": "0.6875rem",
   "leading-eyebrow": "1.2",
   "tracking-tight": "-0.02em",
   "tracking-eyebrow": "0.06em",
@@ -417,11 +417,4 @@ export const num = {
   "space-10": 64,
   "space-11": 80,
   "space-12": 96,
-  "text-display": 40,
-  "text-data-hero": 34,
-  "text-h2": 24,
-  "text-h3": 15,
-  "text-body": 14,
-  "text-meta": 12.5,
-  "text-eyebrow": 11,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.16.0",
+  "version": "2.18.0",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "sideEffects": [

package/styles/components/app-shell.css

@@ -9,7 +9,7 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden;
     transition: grid-template-columns var(--uix-dur) var(--uix-ease-out), grid-template-rows var(--uix-dur) var(--uix-ease-out);
   }
-  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; }
+  .uix-shell__sidebar { grid-row: 1 / 3; background: var(--uix-bg-subtle); border-right: 1px solid var(--uix-border); overflow-y: auto; overflow-x: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
   .uix-shell__topbar { grid-column: 2; display: flex; align-items: center; gap: var(--uix-space-3); padding: 0 var(--uix-space-6); background: var(--uix-bg-app); border-bottom: 1px solid var(--uix-border); }
   .uix-shell__main { grid-column: 2; overflow: auto; padding: var(--uix-space-7); background: var(--uix-bg-app); }
 
@@ -18,17 +18,39 @@
      only) → hidden (0). data-collapsed stays a back-compat alias for the rail. */
   .uix-shell[data-nav="rail"], .uix-shell[data-collapsed] { grid-template-columns: var(--uix-sidebar-w-rail) 1fr; }
   .uix-shell[data-nav="hidden"] { grid-template-columns: 0 1fr; }
+  /* the 0-width column still renders its links — visibility removes them from the tab
+     order / accessibility tree while keeping the width transition (UIX-A11Y-2) */
+  .uix-shell[data-nav="hidden"] .uix-shell__sidebar { visibility: hidden; }
 
   /* ── focus / immersive mode ───────────────────────────────────────────────────
      A table-scoped escape hatch: hide the sidebar AND the topbar so a dense grid
      uses the whole frame. The app toggles [data-focus] (from a toolbar maximize
      control) and restores the previous nav state + focus on Esc. */
   .uix-shell[data-focus] { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
+  .uix-shell[data-focus] .uix-shell__sidebar { visibility: hidden; } /* see [data-nav="hidden"] above (UIX-A11Y-2) */
   .uix-shell[data-focus] .uix-shell__topbar { display: none; }
 
   /* a floating host for the "exit focus" affordance (Esc also exits) */
   .uix-shell__focus-exit { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); z-index: var(--uix-z-overlay); }
 
+  /* ── skip link ────────────────────────────────────────────────────────────────
+     First tab stop in the shell (UIX-A11Y-2): visually hidden until keyboard focus,
+     then a small pill floating over the shell's top-left corner. */
+  .uix-skiplink {
+    position: absolute; top: var(--uix-space-3); left: var(--uix-space-3); z-index: var(--uix-z-overlay);
+    width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
+  }
+  .uix-skiplink:focus-visible {
+    width: auto; height: auto; clip: auto;
+    display: inline-flex; align-items: center;
+    padding: var(--uix-space-2) var(--uix-space-4);
+    background: var(--uix-surface); color: var(--uix-text);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-pill);
+    box-shadow: var(--uix-shadow-popover);
+    outline: 2px solid var(--uix-ring); outline-offset: 2px;
+    font-size: var(--uix-text-meta); font-weight: 500; text-decoration: none;
+  }
+
   /* ── full-bleed main ──────────────────────────────────────────────────────────
      Opt-in per surface: a genuinely wide grid drops the content gutter and runs
      edge to edge, reclaiming 2 x --uix-space-7. Not the default — most pages want

package/styles/components/checkbox.css

@@ -14,7 +14,8 @@
   }
   .uix-checkbox > input:checked + .uix-checkbox__box,
   .uix-checkbox > input:indeterminate + .uix-checkbox__box { background: var(--uix-accent); border-color: var(--uix-accent); }
-  .uix-checkbox > input:checked + .uix-checkbox__box svg { opacity: 1; transform: none; }
+  .uix-checkbox > input:checked + .uix-checkbox__box svg,
+  .uix-checkbox > input:indeterminate + .uix-checkbox__box svg { opacity: 1; transform: none; } /* indeterminate shows its dash icon, not just the filled box (UIX-A11Y-3) */
   .uix-checkbox > input:focus-visible + .uix-checkbox__box { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-checkbox > input:disabled ~ * { opacity: .5; }
 }

package/styles/components/command-palette.css

@@ -3,6 +3,9 @@
   .uix-cmdk { width: min(560px, 92vw); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay); overflow: hidden; }
   .uix-cmdk__input { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--uix-border); background: transparent; color: var(--uix-text); font: inherit; font-size: var(--uix-text-h3); padding: 0 var(--uix-space-4); }
   .uix-cmdk__input:focus { outline: none; }
+  /* visible focus replacement for the suppressed outline (UIX-A11Y-1): the divider under the
+     input thickens to a 2px ring-colored line */
+  .uix-cmdk__input:focus-visible { border-bottom-color: var(--uix-ring); box-shadow: 0 1px 0 0 var(--uix-ring); }
   .uix-cmdk__list { max-height: 320px; overflow-y: auto; padding: var(--uix-space-2); }
   .uix-cmdk__group { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
   .uix-cmdk__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-3); border-radius: var(--uix-radius-sm); color: var(--uix-text); cursor: pointer; font-size: var(--uix-text-body); }

package/styles/components/form.css

@@ -3,6 +3,11 @@
   .uix-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--uix-space-5); }
   .uix-fieldset { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
   .uix-fieldset > legend { padding: 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
+  /* Labeled RadioGroup renders as a fieldset (UIX-A11Y-3): strip the UA chrome so it
+     looks identical to the plain-div group; the legend spaces itself (fieldset gap
+     doesn't reach a legend). */
+  fieldset.uix-radio-group { border: 0; margin: 0; padding: 0; min-inline-size: auto; }
+  .uix-radio-group__legend { padding: 0; margin: 0 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); }
   .uix-form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--uix-space-4); }
   .uix-validation-summary {
     border: 1px solid var(--uix-danger); background: var(--uix-danger-bg); color: var(--uix-text);

package/styles/components/inbox.css

@@ -4,10 +4,19 @@
   .uix-inbox__list { border-right: 1px solid var(--uix-border); overflow-y: auto; background: var(--uix-surface); }
   .uix-inbox__item { position: relative; display: flex; flex-direction: column; gap: var(--uix-space-1); padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); cursor: pointer; }
   .uix-inbox__item:hover { background: var(--uix-bg-hover); }
+  /* keyboard active option (aria-activedescendant) mirrors the hover style (UIX-A11Y-2) */
+  .uix-inbox__item[data-active] { background: var(--uix-bg-hover); }
   .uix-inbox__item[aria-selected="true"] { background: linear-gradient(to right, var(--uix-accent) 3px, var(--uix-brand-muted) 3px); }
   .uix-inbox__item[data-unread] .uix-inbox__subject { font-weight: 600; }
   .uix-inbox__subject { font-size: var(--uix-text-body); }
   .uix-inbox__preview { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-inbox__detail { overflow-y: auto; padding: var(--uix-space-5); background: var(--uix-bg-app); }
-  @media (max-width: 700px) { .uix-inbox { grid-template-columns: 1fr; } .uix-inbox__detail { display: none; } }
+  /* narrow viewports stack to one pane: list by default, detail when the app sets
+     view="detail" — with a consumer-rendered Back control in the detail pane (UIX-A11Y-2) */
+  @media (max-width: 700px) {
+    .uix-inbox { grid-template-columns: 1fr; }
+    .uix-inbox__detail { display: none; }
+    .uix-inbox[data-view="detail"] .uix-inbox__list { display: none; }
+    .uix-inbox[data-view="detail"] .uix-inbox__detail { display: block; }
+  }
 }

package/styles/components/link.css

@@ -39,7 +39,8 @@
  *   2 · TITLE / NAME SLOTS — quiet by default. `:not(.uix-btn)` so an anchor deliberately
  *       styled as a button inside a title slot keeps its button treatment.
  *   3 · DATA CELLS — table cells and description-list values. `:not([class])` so
- *       class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled.
+ *       class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled. Table BODY
+ *       links skip the hover underline too — see table.css (the row hover is the cue).
  *   4 · CONTAINER ANCHORS — the anchor IS the kit block (`<a class="uix-card">`). Without
  *       this the base `a { color }` tints every word in the block brand-blue.
  * Depends only on --uix-* tokens. */
@@ -79,7 +80,8 @@
     .uix-audit__actor
   ) a:not(.uix-btn):is(:hover, :focus-visible),
 
-  :is(.uix-table td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
+  /* body-row links are excluded: table.css keeps them calm on hover (the row tint is the cue) */
+  :is(.uix-table :is(thead, tfoot) td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
 
   /* Container anchors never underline: the anchor wraps the whole block, so an underline
      would strike through every word in it. They take the kit's standard row-hover tint

package/styles/components/modal.css

@@ -22,7 +22,9 @@
   @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
 
   .uix-dialog__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
-  .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
+     heading font/tracking/leading so it renders exactly like the old <div> */
+  .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
   .uix-dialog__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
   .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }

package/styles/components/peek.css

@@ -27,7 +27,13 @@
   .uix-peek__nav { display: inline-flex; gap: var(--uix-space-1); }
   .uix-peek__navbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text); border-radius: var(--uix-radius-sm); cursor: pointer; }
   .uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
-  .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  /* boundary nav uses aria-disabled (still focusable, so focus isn't stranded — UIX-A11Y-1);
+     mute it and suppress the hover cue like a disabled control */
+  .uix-peek__navbtn[aria-disabled="true"] { color: var(--uix-text-muted); cursor: default; }
+  .uix-peek__navbtn[aria-disabled="true"]:hover { background: var(--uix-surface); }
+  /* title is an <h2> for SR navigation (UIX-A11Y-1); inherits neutralize the base h2
+     heading font/tracking/leading so it renders exactly like the old <div> */
+  .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; font-family: inherit; letter-spacing: inherit; line-height: inherit; }
   .uix-peek__title a { color: var(--uix-link); }
   .uix-peek__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
   .uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }

package/styles/components/relationship-graph.css

@@ -18,4 +18,38 @@
   .uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg { min-height:16rem; height:16rem; }
   .uix-relationship-graph--state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
   @media (max-width:640px) { .uix-relationship-graph__list li { display:grid; } }
+
+  /* Layered mode (ADR-0002): HTML node buttons over an SVG edge layer, one transformed stage. */
+  .uix-relationship-graph--layered .uix-relationship-graph__toolbar button:disabled { opacity:.5; cursor:not-allowed; }
+  .uix-relationship-graph__viewport { position:relative; height:var(--uix-relationship-graph-height, 22rem); overflow:hidden; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-bg-subtle); cursor:grab; touch-action:pan-y; }
+  .uix-relationship-graph__viewport:active { cursor:grabbing; }
+  .uix-relationship-graph__stage { position:absolute; top:0; left:0; transform-origin:0 0; }
+  .uix-relationship-graph__stage[data-animate] { transition:transform var(--uix-dur) var(--uix-ease-out); }
+  .uix-relationship-graph__edges { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
+  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, transparent); stroke-width:1.5px; }
+  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, transparent); }
+  .uix-relationship-graph__link text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-eyebrow); paint-order:stroke; stroke:var(--uix-bg-subtle); stroke-width:4px; stroke-linejoin:round; }
+  .uix-relationship-graph__link[data-kind="lateral"] path, .uix-relationship-graph__link[data-kind="cycle"] path { stroke-dasharray:5 4; }
+  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, transparent); }
+  .uix-relationship-graph__link[data-active] path { stroke:var(--uix-accent); stroke-width:2.5px; }
+  .uix-relationship-graph__link[data-active] polygon { fill:var(--uix-accent); }
+  .uix-relationship-graph__link[data-active] text { fill:var(--uix-text); }
+  .uix-relationship-graph__link[data-conflicted] path { stroke:var(--uix-danger); }
+  .uix-relationship-graph__link[data-dimmed] { opacity:.35; }
+  .uix-relationship-graph__column { position:absolute; top:var(--uix-space-4); overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.04em; pointer-events:none; }
+  .uix-relationship-graph__item { position:absolute; display:flex; flex-direction:column; justify-content:center; gap:var(--uix-space-1); padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); color:var(--uix-text); font:inherit; text-align:left; cursor:pointer; transition:border-color var(--uix-dur-fast) var(--uix-ease-out), opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-relationship-graph__item:hover { border-color:var(--uix-accent); }
+  .uix-relationship-graph__item:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-relationship-graph__item[data-root] { border-width:2px; }
+  .uix-relationship-graph__item[data-selected], .uix-relationship-graph__item[data-highlighted] { border-color:var(--uix-accent); background:color-mix(in srgb, var(--uix-accent) 8%, var(--uix-surface)); }
+  .uix-relationship-graph__item[data-conflicted] { border-color:var(--uix-danger); border-style:dashed; }
+  .uix-relationship-graph__item[data-dimmed] { opacity:.45; }
+  .uix-relationship-graph__item[data-kind="cluster"] { border-style:dashed; background:var(--uix-surface-2); }
+  .uix-relationship-graph__item-label { min-width:0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; font-size:var(--uix-text-body); line-height:1.25; }
+  .uix-relationship-graph__item-meta { min-width:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__item-flag { position:absolute; top:-9px; right:var(--uix-space-2); padding:0 var(--uix-space-1); border:1px solid var(--uix-border); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
+  .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
+  .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-relationship-graph--compact .uix-relationship-graph__item { padding:var(--uix-space-1) var(--uix-space-2); }
+  @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/segmented.css

@@ -7,6 +7,6 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-segmented__option:hover { color: var(--uix-text); }
-  .uix-segmented__option[aria-selected="true"], .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
+  .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
   .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 }

package/styles/components/sidebar.css

@@ -32,7 +32,9 @@
   .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
-  .uix-navitem__star { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  /* invisible halo → 24px effective target with zero visual change (UIX-A11Y-2) */
+  .uix-navitem__star::before { content: ""; position: absolute; inset: -1px; }
   .uix-navitem__star svg { width: 15px; height: 15px; }
   .uix-navitem:hover .uix-navitem__star, .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
   .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
@@ -83,26 +85,39 @@
   .uix-navgroup__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
   .uix-navgroup__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--uix-dur) var(--uix-ease-out); }
   .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel { grid-template-rows: 0fr; }
-  .uix-navgroup__panel > div { overflow: hidden; }
+  /* visibility keeps the 0fr-collapsed links out of the tab order / accessibility tree
+     (UIX-A11Y-2); the transition delays hiding until the row collapse finishes, and
+     visibility snaps back to visible instantly on expand, so nothing visibly glitches. */
+  .uix-navgroup__panel > div { overflow: hidden; visibility: visible; transition: visibility var(--uix-dur) var(--uix-ease-out); }
+  .uix-navgroup__trigger[aria-expanded="false"] + .uix-navgroup__panel > div { visibility: hidden; }
   .uix-subitem { padding-left: var(--uix-space-5); }
   .uix-subitem .uix-navitem__label::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--uix-text-muted); margin-right: var(--uix-space-3); vertical-align: middle; }
 
   /* collapsed rail */
   .uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"] { width: var(--uix-sidebar-w-rail); }
-  .uix-sidebar[data-collapsed] .uix-navitem__label,
   .uix-sidebar[data-collapsed] .uix-navitem__badge,
   .uix-sidebar[data-collapsed] .uix-navitem__star,
   .uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,
   .uix-sidebar[data-collapsed] .uix-sidebar__brand,
   .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
   .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
-  .uix-sidebar[data-nav="rail"] .uix-navitem__label,
   .uix-sidebar[data-nav="rail"] .uix-navitem__badge,
   .uix-sidebar[data-nav="rail"] .uix-navitem__star,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__eyebrow,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__brand,
   .uix-sidebar[data-nav="rail"] .uix-navgroup__chevron,
   .uix-sidebar[data-nav="rail"] .uix-navgroup__panel { display: none; }
+  /* rail labels stay in the accessibility tree — clip pattern (mirrors .uix-visually-hidden),
+     not display:none, so icon-only nav items keep their names (UIX-A11Y-2). position:absolute
+     removes the label from the flex row, so the centered rail layout is unaffected. */
+  .uix-sidebar[data-collapsed] .uix-navitem__label,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__label {
+    position: absolute !important;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0);
+    white-space: nowrap; border: 0;
+  }
   /* center the icon-only rail; head keeps just the toggle, centered */
   .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
   .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }

package/styles/components/stat-tile.css

@@ -6,6 +6,8 @@
   .uix-stat__value { font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); }
   .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; align-items: center; gap: var(--uix-space-2); }
   .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); }
+  /* direction glyph inside the chip (UIX-A11Y-4) — sized to sit on the text baseline row */
+  .uix-stat__trend svg { width: 10px; height: 10px; flex: none; }
   .uix-stat__trend--up { color: var(--uix-success); background: var(--uix-success-bg); }
   .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
 }

package/styles/components/table.css

@@ -18,18 +18,32 @@
   /* multi-column sort ordinal (⇧+click adds a secondary key) */
   .uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
 
+  /* sortable header's real <button> (UIX-A11Y-2): visually indistinguishable from the old
+     plain-text th — inherited font/colour, no chrome — with an inset overlay so the whole
+     cell stays the click target (the sticky th is its containing block). The sort arrow and
+     ordinal stay as th pseudo-content so they never pollute the button's accessible name. */
+  .uix-th__sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
+  .uix-th__sortbtn::before { content: ""; position: absolute; inset: 0; }
+
   .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
-  .uix-table tbody tr { background: var(--uix-row); }
+  .uix-table tbody tr { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
   .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
   .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
-  .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
+  /* [data-selected] carries row-selection styling; aria-selected is invalid on a native
+     table row — AT state comes from the row checkbox (UIX-A11Y-2). */
+  .uix-table tbody tr[data-selected] { background: var(--uix-row-selected-bg); }
   .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
+  /* Row links stay calm on hover/focus: the row tint is the affordance, so neither the base
+     layer's `a:hover` underline nor link.css reaches them. `:not(.uix-btn)` keeps buttons
+     styled; the global :focus-visible ring still marks keyboard focus. */
+  .uix-table tbody a:not(.uix-btn):is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: none; }
   .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
   .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
 
   .uix-table__pin { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin[data-on] { opacity: 1; }
+  /* :focus-visible reveal mirrors .uix-rowact so keyboard users can find the pin (UIX-A11Y-2) */
+  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin:focus-visible, .uix-table__pin[data-on] { opacity: 1; }
   .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
   .uix-table__pin[data-on] { color: var(--uix-accent); }
   .uix-table__pin svg { width: 15px; height: 15px; }
@@ -38,13 +52,16 @@
   /* frozen first column (opt-in via .uix-table--pinned-col) */
   .uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
   .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
-  .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
+  .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-table--pinned-col tbody tr:nth-child(even) td:first-child { background: var(--uix-row-alt); }
   .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
   .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
   .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
-  .uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
+  .uix-table--pinned-col tbody tr[data-selected] td:first-child { background: var(--uix-row-selected-bg); }
   .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
+  @media (prefers-reduced-motion: reduce) {
+    .uix-table tbody tr, .uix-table--pinned-col tbody tr td:first-child { transition: none; }
+  }
 
   /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
   .uix-table--fixed { table-layout: fixed; width: 100%; }
@@ -142,7 +159,7 @@
   .uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
   .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
   .uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
-  .uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
+  .uix-table--cards tbody tr[data-selected] { box-shadow: 0 0 0 2px var(--uix-accent); }
   .uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
   .uix-table--cards td:last-child { border-bottom: 0; }
   .uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }

package/styles/components/tag-input.css

@@ -10,7 +10,9 @@
     display: inline-flex; align-items: center; gap: var(--uix-space-1); padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-sm);
     background: var(--uix-bg-active); color: var(--uix-text); font-size: var(--uix-text-meta);
   }
-  .uix-tag__remove { display: grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); }
+  .uix-tag__remove { position: relative; display: grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); }
+  /* Invisible overlay grows the 16px visual to a 24px hit target (UIX-A11Y-3). */
+  .uix-tag__remove::before { content: ""; position: absolute; inset: -4px; }
   .uix-tag__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-tag__remove svg { width: 12px; height: 12px; }
 }

package/styles/components/timeline.css

@@ -1,6 +1,7 @@
 /* uix timeline / activity feed — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-timeline { display: flex; flex-direction: column; }
+  /* list reset — the React Timeline renders <ol>/<li> for semantics; keep visuals pixel-identical (UIX-A11Y-4) */
+  .uix-timeline { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
   .uix-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--uix-space-3); }
   .uix-timeline__rail { display: flex; flex-direction: column; align-items: center; }
   .uix-timeline__node { width: 12px; height: 12px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-1); flex: none; box-shadow: 0 0 0 3px var(--uix-brand-muted); }

package/styles/components/tooltip.css

@@ -13,7 +13,8 @@
     background: var(--uix-text); color: var(--uix-bg-app);
     font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
     padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm);
-    box-shadow: var(--uix-shadow-popover); white-space: normal; pointer-events: none;
+    /* no pointer-events:none — the bubble must be hoverable (WCAG 1.4.13, UIX-A11Y-1) */
+    box-shadow: var(--uix-shadow-popover); white-space: normal;
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-tooltip__bubble:popover-open { opacity: 1; }

package/tokens/base/typography.json

@@ -3,19 +3,19 @@
   "font-heading": { "$type": "fontFamily", "$value": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif" },
   "font-mono":    { "$type": "fontFamily", "$value": "\"IBM Plex Mono\",ui-monospace,monospace" },
 
-  "text-display":   { "$type": "dimension", "$value": "40px" },
+  "text-display":   { "$type": "dimension", "$value": "2.5rem" },
   "leading-display":{ "$type": "number",    "$value": "1.05" },
-  "text-data-hero": { "$type": "dimension", "$value": "34px" },
+  "text-data-hero": { "$type": "dimension", "$value": "2.125rem" },
   "leading-data-hero": { "$type": "number", "$value": "1.1" },
-  "text-h2":   { "$type": "dimension", "$value": "24px" },
+  "text-h2":   { "$type": "dimension", "$value": "1.5rem" },
   "leading-h2":{ "$type": "number",    "$value": "1.15" },
-  "text-h3":   { "$type": "dimension", "$value": "15px" },
+  "text-h3":   { "$type": "dimension", "$value": "0.9375rem" },
   "leading-h3":{ "$type": "number",    "$value": "1.3" },
-  "text-body":   { "$type": "dimension", "$value": "14px" },
+  "text-body":   { "$type": "dimension", "$value": "0.875rem" },
   "leading-body":{ "$type": "number",    "$value": "1.5" },
-  "text-meta":   { "$type": "dimension", "$value": "12.5px" },
+  "text-meta":   { "$type": "dimension", "$value": "0.78125rem" },
   "leading-meta":{ "$type": "number",    "$value": "1.4" },
-  "text-eyebrow":   { "$type": "dimension", "$value": "11px" },
+  "text-eyebrow":   { "$type": "dimension", "$value": "0.6875rem" },
   "leading-eyebrow":{ "$type": "number",    "$value": "1.2" },
 
   "tracking-tight":   { "$type": "dimension", "$value": "-0.02em" },