@tensor_1/tokens 2.47.0 → 2.48.0

package/package.json

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

@@ -7,7 +7,7 @@
 @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: .6; transition-duration: var(--uix-dur); }
+  .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);
@@ -43,5 +43,13 @@
   .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: .6; transition-duration: var(--uix-dur); }
+  .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
@@ -102,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; }
+}

package/styles/components/diff-viewer.css

@@ -8,6 +8,11 @@
   .uix-diff-viewer__versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--uix-border); }
   .uix-diff-viewer__versions>div { min-width:0; padding:var(--uix-space-3); border-right:1px solid var(--uix-border); background:var(--uix-surface); } .uix-diff-viewer__versions>div:last-child { border-right:0; } .uix-diff-viewer__versions strong { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
   .uix-diff-viewer__versions pre { max-height:14rem; overflow:auto; margin-top:var(--uix-space-2); color:var(--uix-text); font-family:var(--uix-font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
+  /* HAR-1369: an entry named for people (labelFor), values shown by the product (renderValue), and
+     where each version came from (provenance), quieter, under its value */
+  .uix-diff-viewer__name { min-width:0; overflow-wrap:anywhere; }
+  .uix-diff-viewer__value { margin-top:var(--uix-space-2); color:var(--uix-text); overflow-wrap:anywhere; }
+  .uix-diff-viewer__provenance { margin-top:var(--uix-space-2); color:var(--uix-text-muted); font-size:var(--uix-text-meta); overflow-wrap:anywhere; }
   /* controlSize: entry rows are controls too; md follows --uix-control-h */
   .uix-diff-viewer[data-control-size="md"] .uix-diff-viewer__entry summary { min-height:var(--uix-control-h); }
   .uix-diff-viewer[data-control-size="lg"] .uix-diff-viewer__entry summary { min-height:44px; }

package/styles/components/display-preferences.css

@@ -0,0 +1,38 @@
+/* uix display preferences (HAR-1372) — the attributes useDisplayPreferences, DisplayPreferences and
+   displayPreferencesScript write on <html>, as re-pointed existing tokens (no new --uix-* names):
+     data-contrast="more"          stronger secondary text and borders (3:1 hairlines), both themes
+     data-text-scale="sm|lg|xl"    the rem scale every type token is in (md writes nothing)
+     data-density="compact|comfortable"  table rows and controls
+     data-motion="reduce"          the reduced-motion policy (motion.css), without the OS setting
+   data-theme="light|dark" is the kit's existing theme switch. Depends only on --uix-* tokens. */
+@layer uix.tokens {
+  /* mixes of the theme's own text and surface, so one rule serves light and dark */
+  :root[data-contrast="more"] {
+    --uix-text-hushed: color-mix(in srgb, var(--uix-text) 86%, transparent);
+    --uix-text-muted: color-mix(in srgb, var(--uix-text) 74%, var(--uix-surface));
+    --uix-border: color-mix(in srgb, var(--uix-text) 45%, var(--uix-surface));
+    --uix-border-strong: color-mix(in srgb, var(--uix-text) 60%, var(--uix-surface));
+  }
+
+  /* every --uix-text-* size is in rem, so the root size scales the whole type ramp */
+  :root[data-text-scale="sm"] { font-size: 93.75%; }
+  :root[data-text-scale="lg"] { font-size: 112.5%; }
+  :root[data-text-scale="xl"] { font-size: 125%; }
+
+  :root[data-density="compact"] { --uix-row-h: var(--uix-row-h-compact); --uix-control-h: var(--uix-space-7); }
+  :root[data-density="comfortable"] { --uix-row-h: var(--uix-row-h-comfortable); --uix-control-h: var(--uix-space-8); }
+}
+
+@layer uix.components {
+  /* a switch of theme, contrast, size or density changes tokens under every element: no transition
+     runs for that frame, so nothing fades between themes (the hook sets this for two frames) */
+  :root[data-uix-switching] *, :root[data-uix-switching] *::before, :root[data-uix-switching] *::after { transition: none !important; }
+
+  .uix-display-prefs { display: grid; gap: var(--uix-space-4); min-width: 0; }
+  .uix-display-prefs__row { display: grid; gap: var(--uix-space-2); min-width: 0; }
+  .uix-display-prefs__label { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text-hushed); }
+  /* the groups keep their own width in a stretching grid or flex column; they wrap at 320 px */
+  :is(.uix-display-prefs .uix-segmented, .uix-theme-switcher) { justify-self: start; align-self: flex-start; max-width: 100%; }
+  :is(.uix-theme-switcher, .uix-display-prefs) .uix-segmented__option { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
+  :is(.uix-theme-switcher, .uix-display-prefs) .uix-segmented__option > .uix-icon { flex: none; }
+}