@tensor_1/tokens 2.46.0 → 2.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.46.0",
+  "version": "2.48.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/alert.css

@@ -9,10 +9,12 @@
   .uix-alert__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
   .uix-alert__title { font-weight: 600; margin-bottom: var(--uix-space-1); }
   .uix-alert__body { font-size: var(--uix-text-meta); color: var(--uix-text-hushed); }
-  .uix-alert--info    { --tone-bg: var(--uix-info-bg);    --tone-border: color-mix(in srgb, var(--uix-info) 30%, transparent);    --tone-fg: var(--uix-info-text); }
-  .uix-alert--success { --tone-bg: var(--uix-success-bg); --tone-border: color-mix(in srgb, var(--uix-success) 30%, transparent); --tone-fg: var(--uix-success-text); }
-  .uix-alert--warning { --tone-bg: var(--uix-warning-bg); --tone-border: color-mix(in srgb, var(--uix-warning) 40%, transparent); --tone-fg: var(--uix-warning-text); }
-  .uix-alert--danger  { --tone-bg: var(--uix-danger-bg);  --tone-border: color-mix(in srgb, var(--uix-danger) 30%, transparent);  --tone-fg: var(--uix-danger-text); }
+  /* the border is a 24 % hairline of the tone (HAR-1563): the tint already says the tone, and a
+     stronger edge made a page of alerts loud. The icon takes the text role, which clears 3:1. */
+  .uix-alert--info    { --tone-bg: var(--uix-info-bg);    --tone-border: color-mix(in srgb, var(--uix-info) 24%, transparent);    --tone-fg: var(--uix-info-text); }
+  .uix-alert--success { --tone-bg: var(--uix-success-bg); --tone-border: color-mix(in srgb, var(--uix-success) 24%, transparent); --tone-fg: var(--uix-success-text); }
+  .uix-alert--warning { --tone-bg: var(--uix-warning-bg); --tone-border: color-mix(in srgb, var(--uix-warning) 24%, transparent); --tone-fg: var(--uix-warning-text); }
+  .uix-alert--danger  { --tone-bg: var(--uix-danger-bg);  --tone-border: color-mix(in srgb, var(--uix-danger) 24%, transparent);  --tone-fg: var(--uix-danger-text); }
 }
 
 /* HAR-1614: the text column takes the free width and may shrink below its longest word, so a

package/styles/components/app-shell.css

@@ -57,3 +57,43 @@
      the gutter. Pair with a frozen identifier column for horizontal scroll. */
   .uix-shell__main--bleed { padding: 0; }
 }
+
+/* Full-viewport mode (HAR-1815): an application's shell, not a framed demo. No border or radius,
+   the dynamic viewport height, and no fixed top-bar row: the sidebar runs the full height, and a
+   topbar, if there is one, takes the height it needs at the top of the main column. Main gets the
+   staff padding (space-7 / space-6 / space-6) and space-8 at the sides on a wide screen. Below
+   40rem the shell is one column and the sidebar is hidden: the phone nav tier takes over. */
+@layer uix.components {
+  .uix-shell--viewport { height: 100dvh; min-height: 0; border: 0; border-radius: 0; grid-template-rows: auto minmax(0, 1fr); }
+  .uix-shell--viewport > .uix-shell__topbar { grid-row: 1; padding-block: var(--uix-space-3); }
+  .uix-shell--viewport > .uix-shell__main { grid-row: 2; padding: var(--uix-space-7) var(--uix-space-6) var(--uix-space-6); }
+  .uix-shell--viewport:not(:has(> .uix-shell__topbar)) > .uix-shell__main { grid-row: 1 / 3; }
+  .uix-shell--viewport > .uix-shell__main.uix-shell__main--bleed { padding: 0; }
+  @media (min-width: 80rem) { .uix-shell--viewport > .uix-shell__main:not(.uix-shell__main--bleed) { padding-inline: var(--uix-space-8); } }
+  /* one column and no sidebar at phone width come from the phone tier below ([data-phone-nav],
+     the viewport default); with phoneNav="none" the sidebar column stays, as in the frame */
+  @media (max-width: 40rem) {
+    .uix-shell--viewport > .uix-shell__main { padding: var(--uix-space-5) var(--uix-space-4) var(--uix-space-6); }
+  }
+}
+
+/* The phone nav tier (HAR-1371, AppShell phoneNav="drawer"): at 40rem and under, the sidebar
+   column goes and a menu button opens the sidebar in a start-side drawer. The switch is a
+   breakpoint, not an animation; the drawer brings the kit's own enter and exit. */
+@layer uix.components {
+  .uix-shell__nav-button { display: none; }
+  .uix-shell__phone-bar { display: none; }
+  /* the sidebar fills its column, so a Sidebar footer (the AccountMenu) sits at the bottom */
+  .uix-shell__sidebar > .uix-sidebar { min-height: 100%; }
+  /* in the drawer the sidebar grows to the drawer body (a flex column whose height is a min-height,
+     so min-height: 100% would not resolve) and the AccountMenu sits at the bottom, as in the column */
+  .uix-shell__nav-drawer .uix-sidebar { flex: 1 0 auto; width: auto; padding: 0; background: transparent; }
+  .uix-shell__nav-drawer-body { display: flex; flex-direction: column; min-height: 100%; }
+  @media (max-width: 40rem) {
+    .uix-shell[data-phone-nav], .uix-shell[data-phone-nav][data-nav] { grid-template-columns: minmax(0, 1fr); }
+    .uix-shell[data-phone-nav] > .uix-shell__sidebar { display: none; }
+    .uix-shell[data-phone-nav] > :is(.uix-shell__topbar, .uix-shell__main) { grid-column: 1; }
+    .uix-shell[data-phone-nav] .uix-shell__nav-button { display: inline-flex; flex: none; }
+    .uix-shell[data-phone-nav] .uix-shell__phone-bar { display: flex; margin-block-end: var(--uix-space-3); }
+  }
+}

package/styles/components/arrival.css

@@ -19,8 +19,14 @@
     0% { outline: 2px solid var(--uix-ring); outline-offset: var(--uix-space-1); }
     100% { outline: 2px solid transparent; outline-offset: var(--uix-space-1); }
   }
+  /* !important: the reduced-motion policy (motion.css) ends every keyframe animation at once, which
+     would end this steady outline before anyone saw it; a layered !important wins over it. The
+     in-app preference (data-motion="reduce", HAR-1372) gets the same outline. */
   @media (prefers-reduced-motion: reduce) {
-    .uix-arrival { animation: uix-arrival-static var(--uix-dur-highlight) step-end both; }
+    .uix-arrival { animation: uix-arrival-static var(--uix-dur-highlight) step-end both !important; }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-arrival { animation: uix-arrival-static var(--uix-dur-highlight) step-end both !important; }
   }
 
   @media (forced-colors: active) {

package/styles/components/attachment.css

@@ -4,8 +4,11 @@
   .uix-attachment { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
   .uix-attachment__icon { width: 32px; height: 32px; flex: none; border-radius: var(--uix-radius-sm); background: var(--uix-bg-subtle); display: grid; place-items: center; color: var(--uix-text-muted); }
   .uix-attachment__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
-  .uix-attachment__name { font-size: var(--uix-text-body); }
+  .uix-attachment__name { display: block; font-size: var(--uix-text-body); }
   .uix-attachment__size { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  /* plain markup: the size under the name, --uix-space-1 apart (HAR-1577). The React row stacks
+     its line and meta in .uix-attachment__body, whose gap is the same --uix-space-1. */
+  .uix-attachment__name + .uix-attachment__size { display: block; margin-top: var(--uix-space-1); }
   .uix-attachment__actions { margin-left: auto; }
 }
 

package/styles/components/audit-log.css

@@ -8,4 +8,33 @@
   .uix-audit__detail ins { background: var(--uix-success-bg); color: var(--uix-success); text-decoration: none; padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); }
   .uix-audit__detail del { background: var(--uix-danger-bg); color: var(--uix-danger-text); text-decoration: line-through; padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); }
   .uix-audit__time { color: var(--uix-text-muted); white-space: nowrap; }
+
+  /* React `AuditLog` (HAR-987): filters over a list of entries; a row is who · what (a labelled
+     action and its target) · when (relative, the exact time under it), with Details below. */
+  .uix-audit-log { display: grid; gap: var(--uix-space-3); min-width: 0; }
+  .uix-audit-log__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
+  /* a reload keeps the rows on show: BusyRegion dims them under its bar (HAR-2582) */
+  ol.uix-audit-log__list { margin: 0; padding: 0; list-style: none; }
+  .uix-audit-log__row { align-items: start; }
+  .uix-audit-log__what { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1) var(--uix-space-2); min-width: 0; color: var(--uix-text); }
+  .uix-audit-log__target { min-width: 0; overflow-wrap: anywhere; }
+  .uix-audit-log__when { display: grid; justify-items: end; gap: calc(var(--uix-space-1) / 2); text-align: end; }
+  .uix-audit-log__exact { font-size: var(--uix-text-eyebrow); color: var(--uix-text-muted); font-variant-numeric: tabular-nums; }
+  .uix-audit-log__more { grid-column: 1 / -1; }
+  /* Details: a quiet disclosure, not a link — the kit chevron (as CollapsibleSection), muted text. */
+  .uix-audit-log__more-summary { display: inline-flex; align-items: flex-start; gap: var(--uix-space-1); width: max-content; list-style: none; cursor: pointer; color: var(--uix-text-muted); font-weight: 500; }
+  .uix-audit-log__more-summary::-webkit-details-marker { display: none; }
+  .uix-audit-log__more-summary:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
+  .uix-audit-log__more[open] .uix-collapsible__chevron { transform: rotate(180deg); }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-audit-log__more-summary:hover, .uix-audit-log__more-summary:hover .uix-collapsible__chevron { color: var(--uix-text); }
+  }
+  .uix-audit-log__detail { margin-top: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); background: var(--uix-bg-subtle); color: var(--uix-text-hushed); overflow-wrap: anywhere; }
+  .uix-audit-log__more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--uix-space-2) var(--uix-space-3); }
+  .uix-audit-log__more-failed { color: var(--uix-danger-text); font-size: var(--uix-text-meta); }
+  /* a phone: who, then what, then when, one under the other */
+  @media (max-width: 30rem) {
+    .uix-audit-log__row { grid-template-columns: minmax(0, 1fr); gap: var(--uix-space-1); }
+    .uix-audit-log__when { justify-items: start; text-align: start; grid-auto-flow: column; justify-content: start; gap: var(--uix-space-2); }
+  }
 }

package/styles/components/breadcrumbs.css

@@ -5,6 +5,8 @@
   /* already a quiet link by its own design — hover/focus parity with the quiet-link
      contract in link.css, so the keyboard state matches the pointer state. */
   .uix-breadcrumbs a:is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: underline; }
+  /* a long unbroken title (a German compound, a file name) wraps instead of widening a phone page */
+  .uix-breadcrumbs > li { min-inline-size: 0; overflow-wrap: anywhere; }
   .uix-breadcrumbs__sep { opacity: .55; }
   .uix-breadcrumbs [aria-current="page"] { color: var(--uix-text); font-weight: 500; }
 }

package/styles/components/busy-region.css

@@ -0,0 +1,55 @@
+/* uix busy region — keep what is on screen while it is fetched again (HAR-2582, motion
+   standard §2.5). A refetch dims the content under an indeterminate bar along the top instead
+   of swapping it for skeletons, so nothing the person was looking at vanishes. The React
+   BusyBar sets [data-shown] after 300 ms and holds it 500 ms; the parent reads it with :has(),
+   so `BusyRegion` and `TableWrap refreshing` stay server components. Depends only on --uix-*
+   tokens. */
+@layer uix.components {
+  .uix-busy-region { position: relative; }
+  .uix-busy-region__content { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-busy-region:has(> .uix-busy-bar[data-shown]) > .uix-busy-region__content { opacity: .8; transition-duration: var(--uix-dur); }
+
+  .uix-busy-bar {
+    position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--uix-z-sticky);
+    display: block; height: 2px; overflow: hidden; pointer-events: none;
+    opacity: 0; transition: opacity var(--uix-dur-exit) var(--uix-ease-out);
+  }
+  .uix-busy-bar[data-shown] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-busy-bar::before {
+    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
+    background: var(--uix-accent); transform: translateX(-100%);
+  }
+  /* constant motion is linear (§2.4) */
+  .uix-busy-bar[data-shown]::before { animation: uix-busy-sweep var(--uix-loop-progress) linear infinite; }
+  @keyframes uix-busy-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
+  /* right to left: the stripe starts at the right (inline-start) edge and sweeps leftwards */
+  @keyframes uix-busy-sweep-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }
+  .uix-busy-bar[data-shown]:dir(rtl)::before { animation-name: uix-busy-sweep-rtl; }
+
+  /* Reduced motion: no sweep; the full bar pulses (the kit's uix-pulse), so "still working" survives (§2.7). */
+  @media (prefers-reduced-motion: reduce) {
+    .uix-busy-bar::before { width: 100%; transform: none; }
+    /* !important: the kit's reduced-motion policy ends keyframes at once; a still-working signal opts back in */
+    .uix-busy-bar[data-shown]::before, .uix-busy-bar[data-shown]:dir(rtl)::before { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+  @media (forced-colors: active) {
+    .uix-busy-bar::before { background: Highlight; }
+  }
+
+  /* A refreshing table: the bar sticks to the top of the scrolling wrap (over the sticky
+     header) and takes no room: it is 0 tall and draws its 2 px stripe below its own edge. It
+     clips sideways only (overflow-x: clip), so the sweep never widens the wrap's scroll area.
+     The rows dim; the header stays. */
+  .uix-table-wrap > .uix-busy-bar { position: sticky; inset-inline-start: 0; height: 0; overflow-x: clip; overflow-y: visible; z-index: calc(var(--uix-z-sticky) + 1); }
+  .uix-table-wrap > .uix-busy-bar::before { inset-block: 0 auto; height: 2px; }
+  .uix-table-wrap > .uix-table > tbody { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-table-wrap:has(> .uix-busy-bar[data-shown]) > .uix-table > tbody { opacity: .8; transition-duration: var(--uix-dur); }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rule */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-busy-bar::before { width: 100%; transform: none; }
+    :root[data-motion="reduce"] .uix-busy-bar[data-shown]::before { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+}

package/styles/components/button.css

@@ -36,6 +36,8 @@
   .uix-btn--icon { width: var(--uix-control-h); padding: 0; }
   .uix-btn--icon.uix-btn--xs { width: 24px; }
   .uix-btn--icon.uix-btn--sm { width: 28px; }
+  /* A small link button is still a link: no side padding, so it lines up with the text around it. */
+  .uix-btn--link.uix-btn--sm { padding-inline: 0; }
   .uix-btn--icon.uix-btn--lg { width: 44px; }
 
   /* A label that may wrap (HAR-1813, WCAG 1.4.10). The size sets a floor instead of a fixed
@@ -52,20 +54,49 @@
   .uix-btn--wrap.uix-btn--lg:not(.uix-btn--icon) { min-height: 44px; }
   .uix-btn--wrap.uix-btn--link { min-height: 0; padding-block: 0; }
 
-  .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
+  /* Pending (React `loading`, HAR-2580): the button stops taking presses at once but looks the
+     same for the first 300 ms; a fast action shows nothing new. It keeps full colour while it
+     works (a spinner, never a greyed-out control), which overrides the aria-disabled dim. */
+  .uix-btn[data-pending], .uix-btn:has(> [data-uix-btn-busy]) { opacity: 1; pointer-events: none; }
+
+  /* The spinner: `data-loading` (plain markup, shows at once) or React's delayed busy marker. */
+  .uix-btn:has(> [data-uix-btn-busy]), .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
   /* The label is hidden (color: transparent), so the ring cannot inherit
      currentColor from the button; each variant names its own foreground.
      TENSOR RX-125 (UIX-01): the ring was on-accent for every variant, so a
      loading secondary/outline/ghost button rendered blank. */
-  .uix-btn[data-loading]::after {
+  .uix-btn:has(> [data-uix-btn-busy])::after, .uix-btn[data-loading]::after {
     content: ""; position: absolute; width: 1em; height: 1em;
     border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
     color: var(--uix-text); animation: uix-spin var(--uix-loop-spin) linear infinite;
   }
-  @media (prefers-reduced-motion: reduce) { .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
-  .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
-  .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
-  .uix-btn--link[data-loading]::after { color: var(--uix-link); }
+  @media (prefers-reduced-motion: reduce) { .uix-btn:has(> [data-uix-btn-busy])::after, .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+  .uix-btn--primary:has(> [data-uix-btn-busy])::after, .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
+  .uix-btn--danger:has(> [data-uix-btn-busy])::after, .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
+  .uix-btn--link:has(> [data-uix-btn-busy])::after, .uix-btn--link[data-loading]::after { color: var(--uix-link); }
+  /* The result face hides with the label while the spinner shows. */
+  .uix-btn:has(> [data-uix-btn-busy]) .uix-btn__result { visibility: hidden; }
+
+  /* Result (React `result`, HAR-2581): the label and both result wordings share one grid cell,
+     so the button is always as wide as the widest and nothing beside it moves. A result
+     crossfades in over the label (opacity only), holds, and fades back. Text and icon carry
+     the meaning; colour only tints the icon. */
+  .uix-btn__face { display: inline-grid; justify-items: center; align-items: center; }
+  .uix-btn__face > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; transition: opacity var(--uix-dur) var(--uix-ease-out); }
+  .uix-btn__result { opacity: 0; transition-duration: var(--uix-dur-exit); }
+  .uix-btn__face[data-result] > .uix-btn__label { opacity: 0; transition-duration: var(--uix-dur-exit-fast); }
+  .uix-btn__face[data-result="success"] > [data-kind="success"],
+  .uix-btn__face[data-result="error"] > [data-kind="error"] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-btn--secondary .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="success"] svg { color: var(--uix-success-text); }
+  .uix-btn--secondary .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="error"] svg { color: var(--uix-danger-text); }
+  .uix-btn--wrap .uix-btn__face > * { white-space: normal; }
+  .uix-btn--xs .uix-btn__face > * { gap: .25em; }
+  /* An icon-only button keeps its square: the result is the mark alone (the words are spoken). */
+  .uix-btn--icon .uix-btn__result-text { display: none; }
 
   /* attached group */
   .uix-btn-group { display: inline-flex; }
@@ -73,3 +104,8 @@
   .uix-btn-group .uix-btn:first-child { border-top-left-radius: var(--uix-radius-md); border-bottom-left-radius: var(--uix-radius-md); }
   .uix-btn-group .uix-btn:last-child { border-radius: 0 var(--uix-radius-md) var(--uix-radius-md) 0; border-right-width: 1px; }
 }
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same pulse */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) { :root[data-motion="reduce"] .uix-btn:has(> [data-uix-btn-busy])::after, :root[data-motion="reduce"] .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}

package/styles/components/card.css

@@ -36,3 +36,13 @@
   .uix-collapsible--compact > .uix-collapsible__summary { padding: var(--uix-space-2) 0; border-radius: var(--uix-radius-sm); }
   .uix-collapsible--compact > .uix-collapsible__body { padding: 0 0 var(--uix-space-3); }
 }
+
+/* Inset (HAR-1818): a bordered, sunken well inside a card body for a preview or a specimen (a
+   rendered header, an image crop, a code sample). Not a nested card: no shadow, no card padding,
+   no card semantics. The consumer lays out what is inside. */
+@layer uix.components {
+  .uix-inset { min-width: 0; padding: var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-bg-subtle); overflow-wrap: anywhere; }
+  .uix-inset--sm { padding: var(--uix-space-3); }
+  /* the well on a sunken page (a bg-subtle panel) takes the surface instead, so it still reads as a well */
+  .uix-inset--surface { background: var(--uix-surface); }
+}

package/styles/components/change-highlight.css

@@ -0,0 +1,58 @@
+/* uix change highlight — "this changed": the sibling of .uix-arrival for a value that changed in
+   place (a live update, a transition's result, a rolled-back optimistic change; HAR-2585, motion
+   standard §2.5). The element is tinted at once, holds a moment, and the tint fades back to the
+   element's own background. React's ChangeHighlight / useChangeHighlight set [data-uix-changed]
+   (never on the first render); plain markup adds .uix-changed (remove it, force a reflow and add
+   it again to replay). Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-change-highlight, .uix-changed {
+    /* opaque, so a pinned table cell never turns see-through while it is tinted */
+    --uix-change-tint: color-mix(in srgb, var(--uix-accent) 14%, var(--uix-surface));
+    --uix-change-ring: var(--uix-ring);
+    /* about 1.3 s: long enough to find, short enough to be gone before the next glance */
+    --uix-change-duration: calc(var(--uix-dur-slower) * 4);
+  }
+
+  /* No fill-mode: the last frame is the element's own background, so a pill or a zebra row keeps
+     its colour once the tint is gone. */
+  @keyframes uix-changed { 0%, 40% { background-color: var(--uix-change-tint); } }
+  @keyframes uix-changed-ring { 0%, 40% { outline: 2px solid var(--uix-change-ring); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } }
+  /* reduced motion and forced colours: a steady outline for the same time, then nothing — just
+     inside the edge of a row or field, just outside a ringed pill (inside it would cover the label) */
+  @keyframes uix-changed-static-ring { 0% { outline: 2px solid var(--uix-change-ring); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } }
+  @keyframes uix-changed-static { 0% { outline: 2px solid var(--uix-change-ring); outline-offset: calc(-1 * var(--uix-space-1)); } 100% { outline: 2px solid transparent; outline-offset: calc(-1 * var(--uix-space-1)); } }
+
+  /* held, then an even fade: an ease-out would drain most of the tint before anyone looks */
+  .uix-changed, .uix-change-highlight[data-uix-changed] { animation: uix-changed var(--uix-change-duration) var(--uix-ease-in-out); }
+  /* the ring hugs what it wraps (a pill, a star): inline-flex, pill-round */
+  .uix-change-highlight--ring { display: inline-flex; vertical-align: middle; border-radius: var(--uix-radius-pill); }
+  .uix-change-highlight--ring[data-uix-changed], .uix-changed.uix-change-highlight--ring { animation-name: uix-changed-ring; }
+  /* a row tints its cells: cells paint over the row's own background */
+  tr.uix-changed, tr.uix-change-highlight[data-uix-changed] { animation: none; }
+  tr.uix-changed > :is(td, th), tr.uix-change-highlight[data-uix-changed] > :is(td, th) { animation: uix-changed var(--uix-change-duration) var(--uix-ease-in-out); }
+
+  @media (prefers-reduced-motion: reduce) {
+    /* !important: the kit's reduced-motion policy ends keyframes at once; this one is the signal.
+       A row is outlined as one box, not cell by cell. */
+    .uix-changed, .uix-change-highlight[data-uix-changed],
+    tr.uix-changed, tr.uix-change-highlight[data-uix-changed] { animation: uix-changed-static var(--uix-change-duration) step-end !important; }
+    .uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end !important; }
+    tr.uix-changed > :is(td, th), tr.uix-change-highlight[data-uix-changed] > :is(td, th) { animation: none !important; }
+  }
+  @media (forced-colors: active) {
+    .uix-change-highlight, .uix-changed { --uix-change-ring: Highlight; }
+    .uix-changed, .uix-change-highlight[data-uix-changed],
+    tr.uix-changed, tr.uix-change-highlight[data-uix-changed] { animation: uix-changed-static var(--uix-change-duration) step-end; }
+    .uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end; }
+    tr.uix-changed > :is(td, th), tr.uix-change-highlight[data-uix-changed] > :is(td, th) { animation: none; }
+  }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same outline */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] :is(.uix-changed, .uix-change-highlight[data-uix-changed]) { animation: uix-changed-static var(--uix-change-duration) step-end !important; }
+    :root[data-motion="reduce"] .uix-change-highlight--ring[data-uix-changed] { animation: uix-changed-static-ring var(--uix-change-duration) step-end !important; }
+    :root[data-motion="reduce"] :is(tr.uix-changed, tr.uix-change-highlight[data-uix-changed]) > :is(td, th) { animation: none !important; }
+  }
+}

package/styles/components/checkbox.css

@@ -19,3 +19,21 @@
   .uix-checkbox > input:focus-visible + .uix-checkbox__box { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-checkbox > input:disabled ~ * { opacity: .5; }
 }
+
+/* CheckboxGroup (HAR-1799): a fieldset whose legend names the boxes, with the field's message
+   slot. The UA fieldset chrome is stripped so it reads like a Field. `--uix-checkbox-group-columns`
+   (React `columns`) is a ceiling: a column never gets narrower than 10rem, so a phone gets one. */
+@layer uix.components {
+  .uix-checkbox-group { display: flex; flex-direction: column; gap: var(--uix-space-2); min-width: 0; min-inline-size: auto; margin: 0; padding: 0; border: 0; }
+  .uix-checkbox-group__legend { padding: 0; margin: 0 0 var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text); overflow-wrap: anywhere; }
+  .uix-checkbox-group__legend[data-required]::after { content: " *"; color: var(--uix-danger-text); }
+  .uix-checkbox-group__options {
+    --uix-checkbox-group-columns: 1;
+    display: grid; gap: var(--uix-space-2) var(--uix-space-5); align-items: start;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(10rem, calc((100% - (var(--uix-checkbox-group-columns) - 1) * var(--uix-space-5)) / var(--uix-checkbox-group-columns)))), 1fr));
+  }
+  .uix-checkbox-group__options > .uix-checkbox { align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
+  /* the box sits on the first line of a label that wraps */
+  .uix-checkbox-group__options > .uix-checkbox > .uix-checkbox__box { translate: 0 calc((1lh - 18px) / 2); }
+  .uix-checkbox-group[data-invalid] .uix-checkbox__box { border-color: var(--uix-danger); }
+}

package/styles/components/code-display.css

@@ -0,0 +1,43 @@
+/* uix code display (HAR-1253) — a one-time code shown large: React CodeDisplay.
+   Groups wrap as whole groups on a narrow screen; a single group too long for the line breaks
+   between characters rather than leaving the page. The expired state is said in words (the meta
+   line) and the code is struck through, so it never rests on colour alone. */
+@layer uix.components {
+  .uix-code-display { display: inline-grid; justify-items: start; gap: var(--uix-space-2); max-width: 100%; min-width: 0; }
+  .uix-code-display__label { color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; }
+  .uix-code-display__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2) var(--uix-space-3); max-width: 100%; min-width: 0; }
+  .uix-code-display__code {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--uix-text);
+    font-family: var(--uix-font-mono);
+    font-size: var(--uix-text-data-hero);
+    font-weight: 600;
+    line-height: var(--uix-leading-data-hero);
+    font-variant-numeric: tabular-nums slashed-zero;
+    letter-spacing: .06em;
+  }
+  /* lg is the hero of a card or a till screen: it takes the width it is given and fits a
+     three-by-three code (11 characters with the separators, ~8.4em of mono at this tracking) on
+     one line, down to the h2 size; only below that do the groups wrap (review of PR #166: in a
+     card at 320–360 px the last group fell to its own line). */
+  .uix-code-display--lg { display: grid; inline-size: 100%; container-type: inline-size; }
+  .uix-code-display--lg .uix-code-display__code { font-size: clamp(var(--uix-text-h2), calc(100cqi / 8.4), var(--uix-text-display)); line-height: var(--uix-leading-display); }
+  .uix-code-display__group { min-width: 0; overflow-wrap: anywhere; }
+  .uix-code-display__sep { margin-inline: .2em; color: var(--uix-text-hushed); font-weight: 400; }
+  /* the spoken copy is for screen readers only; a pointer selection of the code never picks it up */
+  .uix-code-display__spoken { user-select: none; }
+  .uix-code-display__meta { color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-variant-numeric: tabular-nums; }
+
+  /* the last minute (warnBefore): the countdown turns to a warning; nothing moves per tick */
+  .uix-code-display[data-state="soon"] .uix-code-display__meta { color: var(--uix-warning-text); font-weight: 600; }
+  .uix-code-display[data-state="expired"] .uix-code-display__code { color: var(--uix-text-hushed); text-decoration: line-through; text-decoration-thickness: .06em; }
+  .uix-code-display[data-state="expired"] .uix-code-display__meta { color: var(--uix-danger-text); font-weight: 600; }
+
+  @media print {
+    .uix-code-display__code { color: var(--uix-print-ink); }
+  }
+}

package/styles/components/combobox.css

@@ -2,7 +2,10 @@
 @layer uix.components {
   .uix-combobox { position: relative; }
   .uix-combobox > .uix-input { width: 100%; }
-  .uix-combobox__listbox { position: absolute; z-index: var(--uix-z-dropdown); inset-inline: 0; top: calc(100% + var(--uix-space-1)); max-height: 240px; overflow-y: auto; }
+  /* a static list right under the field (plain HTML); the React Combobox draws its list in a
+     top-layer popup instead (HAR-1588), styled as Select's */
+  .uix-combobox > .uix-combobox__listbox { position: absolute; z-index: var(--uix-z-dropdown); inset-inline: 0; top: calc(100% + var(--uix-space-1)); max-height: 240px; overflow-y: auto; }
+  .uix-combobox__popup { max-width: min(32rem, calc(100vw - 2 * var(--uix-space-4))); }
   .uix-listbox {
     list-style: none; margin: 0; padding: var(--uix-space-1); min-width: 200px;
     background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);

package/styles/components/command-palette.css

@@ -1,6 +1,6 @@
 /* uix command palette (⌘K) — inner surface; mounts in a dialog/popover (overlay mechanics in motion + overlays). */
 @layer uix.components {
-  .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 { width: min(560px, 92vw); max-width: 100%; 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
@@ -10,8 +10,22 @@
   .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); }
   .uix-cmdk__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
-  .uix-cmdk__item:hover, .uix-cmdk__item[data-active] { background: var(--uix-bg-hover); }
+  .uix-cmdk__item[data-active] { background: var(--uix-bg-hover); }
+  /* items mode moves the active row with the pointer, so a hover tint there would mark a second row */
+  @media (hover: hover) and (pointer: fine) { .uix-cmdk:not([data-items]) .uix-cmdk__item:hover { background: var(--uix-bg-hover); } }
   .uix-cmdk__item .uix-kbd { margin-left: auto; }
+  /* items mode (HAR-1378): label + description, matched text, the shortcut at the end, empty state */
+  .uix-cmdk__icon { display: inline-flex; flex: none; }
+  .uix-cmdk__text { display: grid; flex: 1; min-width: 0; gap: calc(var(--uix-space-1) / 2); }
+  .uix-cmdk__label { overflow-wrap: anywhere; }
+  .uix-cmdk__desc { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow-wrap: anywhere; }
+  .uix-cmdk__mark { background: transparent; color: inherit; font-weight: 600; }
+  .uix-cmdk__shortcut { flex: none; margin-left: auto; }
+  .uix-cmdk__item[aria-disabled="true"] { color: var(--uix-text-muted); cursor: default; }
+  .uix-cmdk__empty { margin: 0; padding: var(--uix-space-6) var(--uix-space-4); text-align: center; color: var(--uix-text-muted); font-size: var(--uix-text-body); }
+  /* the palette's own dialog: the palette is the visible box, the dialog only hosts it */
+  .uix-dialog.uix-cmdk-dialog { width: auto; max-width: min(560px, 92vw); margin: 12vh auto auto; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
+  .uix-cmdk-dialog .uix-cmdk { width: min(560px, 92vw); }
   /* ⌘K is keyboard-triggered and high-frequency → open instantly, no animation (Emil's rule) */
   dialog[data-uix-cmdk-dialog], dialog[data-uix-cmdk-dialog]::backdrop { transition: none; }
 }

package/styles/components/contact-card.css

@@ -1,12 +1,23 @@
-/* uix contact / customer card (CRM) — depends only on --uix-* tokens. */
+/* uix contact / customer card (CRM) — depends only on --uix-* tokens. React: ContactCard (HAR-1379). */
 @layer uix.components {
-  .uix-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--uix-space-1); padding: var(--uix-space-5); }
-  .uix-contact__name { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-2); }
-  .uix-contact__role { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
-  .uix-contact__actions { display: flex; gap: var(--uix-space-2); margin-top: var(--uix-space-3); align-self: stretch; }
-  .uix-contact__actions > .uix-btn { flex: 1; }
+  .uix-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--uix-space-1); padding: var(--uix-space-5); min-width: 0; }
+  /* bare: inside a surface that already has its padding (a card body, a peek, a popover) */
+  .uix-contact--bare { padding: 0; }
+  .uix-contact__name { font-size: var(--uix-text-h3); font-weight: 600; margin: var(--uix-space-2) 0 0; max-width: 100%; overflow-wrap: anywhere; }
+  .uix-contact__role { font-size: var(--uix-text-meta); color: var(--uix-text-muted); max-width: 100%; overflow-wrap: anywhere; }
+  .uix-contact__actions { display: flex; flex-wrap: wrap; gap: var(--uix-space-2); margin-top: var(--uix-space-3); align-self: stretch; }
+  .uix-contact__actions > .uix-btn { flex: 1 1 7rem; }
   .uix-contact__stats { display: flex; gap: var(--uix-space-5); margin-top: var(--uix-space-4); }
   .uix-contact__stat { text-align: center; }
   .uix-contact__stat b { display: block; font-size: var(--uix-text-h3); }
   .uix-contact__stat span { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+
+  /* the address and number as text, selectable; a long address breaks rather than widening the card */
+  .uix-contact__details { display: flex; flex-direction: column; gap: var(--uix-space-1); margin-top: var(--uix-space-2); max-width: 100%; font-size: var(--uix-text-meta); }
+  .uix-contact__detail { overflow-wrap: anywhere; }
+  /* an erased or unavailable contact: a neutral placeholder and a line that says why */
+  .uix-contact__placeholder { background: var(--uix-bg-subtle); color: var(--uix-text-muted); border: 1px solid var(--uix-border); }
+  .uix-contact__placeholder svg { width: 55%; height: 55%; }
+  .uix-contact__note { color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-style: italic; }
+  .uix-contact[data-state="purged"] .uix-contact__name { color: var(--uix-text-muted); font-weight: 500; }
 }

package/styles/components/count.css

@@ -0,0 +1,23 @@
+/* uix count — a number that ticks once when it changes (HAR-2587, motion standard §2.8): a badge,
+   a stat value, an unread total. React's Count sets [data-uix-tick="up" | "down"] after a change,
+   never on the first render: the new figure comes in 4 px from below (up) or above (down) with a
+   fade. One tick, never a loop, never a count-up. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-count { display: inline-block; font-variant-numeric: tabular-nums; }
+  @keyframes uix-count-up { from { opacity: .3; transform: translateY(var(--uix-lift)); } }
+  @keyframes uix-count-down { from { opacity: .3; transform: translateY(calc(-1 * var(--uix-lift))); } }
+  @keyframes uix-count-fade { from { opacity: .3; } }
+  .uix-count[data-uix-tick="up"] { animation: uix-count-up var(--uix-dur) var(--uix-ease-out); }
+  .uix-count[data-uix-tick="down"] { animation: uix-count-down var(--uix-dur) var(--uix-ease-out); }
+  @media (prefers-reduced-motion: reduce) {
+    /* no travel; the fade stays (!important: the reduced-motion policy ends keyframes at once) */
+    .uix-count[data-uix-tick="up"], .uix-count[data-uix-tick="down"] { animation: uix-count-fade var(--uix-dur) var(--uix-ease-out) !important; }
+  }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same fade */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-count:is([data-uix-tick="up"], [data-uix-tick="down"]) { animation: uix-count-fade var(--uix-dur) var(--uix-ease-out) !important; }
+  }
+}

package/styles/components/data-workspace.css

@@ -0,0 +1,42 @@
+/* uix data workspace — the generic presentation half of a product's data table (React
+   `DataWorkspace`, HAR-1388, ADR-0005): toolbar · bulk bar · table · footer, composed from
+   .uix-toolbar, .uix-chip, .uix-searchbar, .uix-bulkbar, .uix-table and .uix-pagination.
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-data-workspace { display: grid; gap: var(--uix-space-3); min-width: 0; }
+  .uix-data-workspace > .uix-toolbar { margin-bottom: 0; }
+  .uix-data-workspace__search { flex: 0 1 18rem; min-width: min(12rem, 100%); }
+  .uix-data-workspace__chip, .uix-data-workspace__menu { display: inline-flex; }
+  /* the row-actions column takes the width of its buttons, not the table's 84px */
+  .uix-data-workspace .uix-table__actions { width: 1%; }
+  /* with selection, the id column is frozen too, right after the checkbox column */
+  .uix-data-workspace__grid--pin-id :is(th, td):nth-child(2) { position: sticky; left: var(--uix-selcol-w); z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
+  .uix-data-workspace__grid--pin-id :is(th, td):first-child { box-shadow: none; }
+  /* A squeezed table shrinks the checkbox column to its content (30px), which would open a gap
+     before the id frozen at --uix-selcol-w: an empty, 0-high block holds the column at that width
+     (the checkbox itself stays as it is, centred, its input over its box). */
+  .uix-data-workspace__grid--pin-id :is(th, td):first-child::after { content: ""; display: block; inline-size: calc(var(--uix-selcol-w) - var(--uix-space-3)); }
+  .uix-data-workspace__grid--pin-id thead th:nth-child(2) { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
+  .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-data-workspace__grid--pin-id:not(.uix-table--no-zebra) tbody tr:nth-child(even) td:nth-child(2) { background: var(--uix-row-alt); }
+  .uix-data-workspace__grid--pin-id tbody tr[data-pinned] td:nth-child(2) { background: linear-gradient(var(--uix-row-pinned-bg), var(--uix-row-pinned-bg)) var(--uix-surface); }
+  .uix-data-workspace__grid--pin-id tbody tr[data-selected] td:nth-child(2) { background: linear-gradient(var(--uix-row-selected-bg), var(--uix-row-selected-bg)) var(--uix-surface); }
+  .uix-data-workspace__grid--pin-id tbody tr:hover td:nth-child(2) { background: var(--uix-bg-hover); }
+  .uix-table-wrap[data-overflow="false"] .uix-data-workspace__grid--pin-id :is(th, td):nth-child(2) { box-shadow: none; }
+  @media (prefers-reduced-motion: reduce) { .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { transition: none; } }
+  /* the record-id cell: the id opens a peek, ↗ opens the full record */
+  .uix-data-workspace__id { display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap; }
+  .uix-data-workspace__open { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--uix-radius-xs); color: var(--uix-text-muted); }
+  .uix-data-workspace__open:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+  @media (hover: hover) and (pointer: fine) { .uix-data-workspace__open:hover { background: var(--uix-bg-hover); color: var(--uix-text); } }
+  .uix-data-workspace__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2) var(--uix-space-4); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-data-workspace__range { font-variant-numeric: tabular-nums; }
+  .uix-data-workspace__size { display: inline-flex; align-items: center; gap: var(--uix-space-2); white-space: nowrap; }
+  /* maximized: the workspace takes the window; Escape or the toggle restores it */
+  .uix-data-workspace--maximized {
+    position: fixed; inset: 0; z-index: var(--uix-z-overlay); align-content: start; overflow: auto;
+    padding: var(--uix-space-4); background: var(--uix-bg-app);
+  }
+  /* a phone: the search takes its own row */
+  @media (max-width: 40rem) { .uix-data-workspace__search { flex: 1 1 100%; } }
+}

package/styles/components/date-picker.css

@@ -47,10 +47,23 @@
   /* --- DateTimePicker: the date field, a time input and the zone they are in ---------------- */
   .uix-date-time-picker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--uix-space-2); min-width: 0; }
   .uix-date-time-picker > .uix-date-picker { flex: 1 1 8.5rem; }
-  .uix-date-time-picker__time { flex: 0 1 auto; width: auto; min-width: 6.5rem; font-variant-numeric: tabular-nums; }
+  /* the time part is a TimePicker (HAR-1835): narrower than the date, never under a "12:30 PM" */
+  .uix-date-time-picker > .uix-date-time-picker__time { flex: 0 1 8.5rem; min-width: 7rem; }
   .uix-date-time-picker__zone { display: inline-flex; align-items: center; min-height: var(--uix-control-h); color: var(--uix-text-muted); font-size: var(--uix-text-meta); white-space: nowrap; }
   .uix-date-time-picker--sm .uix-date-time-picker__zone { min-height: 28px; }
 
+  /* --- TimePicker (HAR-1835): the date field's shape, a clock button and a list of times ------- */
+  .uix-time-picker { max-width: 9rem; }
+  .uix-time-picker__input { text-overflow: ellipsis; }
+  .uix-time-picker__popover { padding: var(--uix-space-1); }
+  .uix-time-picker__list {
+    min-width: 8rem; max-height: min(16rem, 50vh); overflow-y: auto; overscroll-behavior: contain;
+    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-variant-numeric: tabular-nums;
+  }
+  .uix-time-picker__list:focus { outline: none; }
+  /* the list has focus, its active time is the ring (aria-activedescendant) */
+  .uix-time-picker__list:focus-visible .uix-listbox__option[data-active] { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+
   /* --- DateRangePicker mode="field": a trigger that shows the range ------------------------- */
   .uix-date-range-field { display: grid; width: 100%; min-width: 0; max-width: 18rem; }
   .uix-date-range-field__trigger { display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0; text-align: start; cursor: pointer; }

package/styles/components/detail-layout.css

@@ -13,3 +13,12 @@
   .uix-detail-page__metrics dd { margin: var(--uix-space-1) 0 0; color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; }
   @media (max-width: 820px) { .uix-detail { grid-template-columns: 1fr; } }
 }
+
+/* Staff preset (HAR-1815): the record page TENSOR and MOTUS share. */
+@layer uix.components {
+  .uix-detail-page--staff .uix-page-header__title { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); }
+  .uix-detail-page--staff .uix-detail-page__back { display: inline-flex; align-items: center; gap: var(--uix-space-1); color: var(--uix-text-hushed); text-decoration: none; }
+  @media (hover: hover) { .uix-detail-page--staff .uix-detail-page__back:hover { color: var(--uix-text); } }
+  .uix-detail-page--staff .uix-detail-page__metrics dt { font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--uix-text-muted); }
+  .uix-detail-page--staff .uix-detail-page__metrics dd { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); font-weight: 400; font-variant-numeric: tabular-nums; }
+}