@tensor_1/tokens 2.46.0 → 2.48.0

package/styles/components/qr-code.css

@@ -0,0 +1,30 @@
+/* uix QR code (HAR-1251) — React QrCode renders an <svg class="uix-qr-code"> with a paper rect
+   and one path of dark modules; the four-module quiet zone is inside the viewBox.
+   Scanners read dark on light, so the symbol never follows the theme: it is print ink on print
+   paper in light, dark, print and forced colours alike, and it is printed as drawn. */
+@layer uix.components {
+  .uix-qr-code {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+    border-radius: var(--uix-radius-sm);
+    forced-color-adjust: none;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  .uix-qr-code__paper { fill: var(--uix-print-paper); }
+  .uix-qr-code__ink { fill: var(--uix-print-ink); }
+
+  /* value too long for a QR code: a square that says so, never a broken symbol */
+  .uix-qr-code--error {
+    display: grid;
+    place-items: center;
+    padding: var(--uix-space-3);
+    border: 1px dashed var(--uix-border-strong);
+    background: var(--uix-bg-subtle);
+    color: var(--uix-text-muted);
+    font-size: var(--uix-text-meta);
+    text-align: center;
+  }
+}

package/styles/components/qr-scanner.css

@@ -0,0 +1,61 @@
+/* uix QR scanner (HAR-1254) — React QrScanner: a camera viewfinder with an explainer before the
+   browser's prompt, plain states for blocked / unsupported / no camera / no picture, and the
+   manual entry always below it. The frame is 4:3 while the camera runs; in every other state it
+   is a padded panel that grows with its text, so nothing is cut at 320 px.
+   No decorative scanning line: the target is still, and a read is answered once (the target
+   turns to the success colour for a moment; a status message says what was read). */
+@layer uix.components {
+  .uix-qr-scanner { display: grid; gap: var(--uix-space-3); width: 100%; max-width: 32rem; min-width: 0; }
+
+  .uix-qr-scanner__frame {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: 12rem;
+    overflow: hidden;
+    border: 1px solid var(--uix-border);
+    border-radius: var(--uix-radius-lg);
+    background: var(--uix-bg-subtle);
+  }
+  .uix-qr-scanner[data-status="scanning"] .uix-qr-scanner__frame { aspect-ratio: 4 / 3; min-height: 0; background: var(--uix-print-ink); border-color: transparent; }
+  .uix-qr-scanner__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .uix-qr-scanner__video[hidden] { display: none; }
+
+  /* the aiming square: four corners, still */
+  .uix-qr-scanner__target {
+    --target-ink: var(--uix-print-paper);
+    position: relative;
+    width: min(62%, 16rem);
+    aspect-ratio: 1;
+    border-radius: var(--uix-radius-md);
+    background:
+      linear-gradient(var(--target-ink), var(--target-ink)) top left / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top left / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top right / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) top right / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom left / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom left / 3px 24px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom right / 24px 3px no-repeat,
+      linear-gradient(var(--target-ink), var(--target-ink)) bottom right / 3px 24px no-repeat;
+    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--uix-print-ink) 35%, transparent);
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  /* did it work: the corners turn green and settle in, once */
+  .uix-qr-scanner__frame[data-read] .uix-qr-scanner__target { --target-ink: var(--uix-success-solid); transform: scale(.96); }
+
+  .uix-qr-scanner__panel { display: grid; justify-items: start; gap: var(--uix-space-3); width: 100%; padding: var(--uix-space-5); }
+  .uix-qr-scanner__title { margin: 0; font-weight: 600; font-size: var(--uix-text-h3); }
+  .uix-qr-scanner__body { margin: 0; color: var(--uix-text-muted); }
+  .uix-qr-scanner[data-status="denied"] .uix-qr-scanner__title { color: var(--uix-danger-text); }
+  .uix-qr-scanner__explainer { color: var(--uix-text); max-width: 60ch; }
+
+  .uix-qr-scanner__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
+  .uix-qr-scanner__message { flex: 1 1 12rem; margin: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-qr-scanner__message[data-hint] { color: var(--uix-warning-text); }
+  .uix-qr-scanner__manual { padding-top: var(--uix-space-3); border-top: 1px solid var(--uix-border); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uix-qr-scanner__target { transition: none; }
+    .uix-qr-scanner__frame[data-read] .uix-qr-scanner__target { transform: none; }
+  }
+}

package/styles/components/relationship-graph.css

@@ -15,12 +15,22 @@
   .uix-relationship-graph__edge[data-typed] { stroke:var(--uix-graph-type-color, var(--uix-border-strong)); }
   .uix-relationship-graph__list { padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
   .uix-relationship-graph__list>ul { display:grid; gap:var(--uix-space-2); margin:var(--uix-space-2) 0 0; padding:0; list-style:none; }
-  .uix-relationship-graph__list li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
-  .uix-relationship-graph__list li>button:first-child { display:grid; gap:var(--uix-space-1); flex:1; border:0; background:transparent; color:var(--uix-text); text-align:left; } .uix-relationship-graph__list li>button span { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__list>ul>li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  /* A row: the node's button (its name only), then its neighbours as a list of their own (HAR-1387). */
+  .uix-relationship-graph__list-main { display:grid; flex:1; gap:var(--uix-space-1); min-width:0; }
+  .uix-relationship-graph__list-main>button { display:grid; justify-items:start; gap:var(--uix-space-1); padding:0; border:0; background:transparent; color:var(--uix-text); font:inherit; text-align:left; cursor:pointer; }
+  .uix-relationship-graph__list-main>button span,.uix-relationship-graph__list-relations,.uix-relationship-graph__list-none { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__list-none { margin:0; }
+  /* "Connected to", then the names wrapping beside it, comma after comma, then "Show all N" */
+  .uix-relationship-graph__list-relations { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--uix-space-1); }
+  .uix-relationship-graph__list-relations ul { display:flex; flex:1 1 12rem; flex-wrap:wrap; gap:0 var(--uix-space-1); min-width:0; margin:0; padding:0; list-style:none; }
+  .uix-relationship-graph__list-relations li { min-width:0; overflow-wrap:anywhere; }
+  .uix-relationship-graph__list-relations li:not(:last-child)::after { content:","; }
+  .uix-relationship-graph__list-more { font-size:inherit; }
   .uix-relationship-graph__list-actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
   .uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg { min-height:16rem; height:16rem; }
   .uix-relationship-graph--state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
-  @media (max-width:640px) { .uix-relationship-graph__list li { display:grid; } }
+  @media (max-width:640px) { .uix-relationship-graph__list>ul>li { display:grid; } }
 
   /* Layered mode (ADR-0002): HTML node buttons over an SVG edge layer, one transformed stage. */
   .uix-relationship-graph--layered .uix-relationship-graph__toolbar button:disabled { opacity:.5; cursor:not-allowed; }
@@ -29,11 +39,13 @@
   .uix-relationship-graph__stage { position:absolute; top:0; left:0; transform-origin:0 0; }
   .uix-relationship-graph__stage[data-animate] { transition:transform var(--uix-dur) var(--uix-ease-out); }
   .uix-relationship-graph__edges { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
-  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, transparent); stroke-width:1.5px; }
-  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, transparent); }
+  /* Opaque, mixed into the map's own surface: fifty edges sharing a bus trunk stay one grey line
+     instead of stacking a translucent stroke to black (HAR-1387). */
+  .uix-relationship-graph__link path { fill:none; stroke:color-mix(in srgb, var(--uix-text) 28%, var(--uix-bg-subtle)); stroke-width:1.5px; }
+  .uix-relationship-graph__link polygon { fill:color-mix(in srgb, var(--uix-text) 45%, var(--uix-bg-subtle)); }
   .uix-relationship-graph__link text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-eyebrow); paint-order:stroke; stroke:var(--uix-bg-subtle); stroke-width:4px; stroke-linejoin:round; }
   .uix-relationship-graph__link[data-kind="lateral"] path, .uix-relationship-graph__link[data-kind="cycle"] path { stroke-dasharray:5 4; }
-  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, transparent); }
+  .uix-relationship-graph__link[data-emphasis] path { stroke:color-mix(in srgb, var(--uix-text) 55%, var(--uix-bg-subtle)); }
   .uix-relationship-graph__link[data-active] path { stroke:var(--uix-accent); stroke-width:2.5px; }
   .uix-relationship-graph__link[data-active] polygon { fill:var(--uix-accent); }
   .uix-relationship-graph__link[data-active] text { fill:var(--uix-text); }
@@ -50,6 +62,8 @@
   .uix-relationship-graph__item[data-kind="cluster"] { border-style:dashed; background:var(--uix-surface-2); }
   .uix-relationship-graph__item-label { min-width:0; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow-wrap:anywhere; font-size:var(--uix-text-body); line-height:1.25; }
   .uix-relationship-graph__item-meta { min-width:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* The flag sits on the item's top-right border: the first line of the name keeps clear of it. */
+  .uix-relationship-graph__item[data-flag] .uix-relationship-graph__item-label { padding-right:3.25rem; }
   .uix-relationship-graph__item-flag { position:absolute; top:-9px; right:var(--uix-space-2); padding:0 var(--uix-space-1); border:1px solid var(--uix-border); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
   .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
   .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
@@ -69,8 +83,10 @@
   .uix-relationship-graph__control:focus-visible { outline:2px solid var(--uix-ring); outline-offset:1px; }
   .uix-relationship-graph__control:disabled { opacity:.45; cursor:not-allowed; }
   .uix-relationship-graph__control svg { width:16px; height:16px; }
-  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
-  .uix-relationship-graph__hint { flex:1 1 0; min-width:0; margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* The hint and the zoom level sit on a surface of their own: the map scrolls under them, and a
+     node's name must not show through the words (HAR-1387). */
+  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:var(--uix-space-1) var(--uix-space-2); border:1px solid var(--uix-border); border-radius:var(--uix-radius-sm); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__hint { flex:0 1000 auto; min-width:0; margin:0 auto 0 0; overflow:hidden; padding:var(--uix-space-1) var(--uix-space-2); border:1px solid var(--uix-border); border-radius:var(--uix-radius-sm); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
   /* A hint cut to a few words says nothing, so it goes; on the narrowest map so does the zoom level. */
   @container uix-relationship-graph-footer (max-width:24rem) { .uix-relationship-graph__hint { display:none; } }
   @container uix-relationship-graph-footer (max-width:17rem) { .uix-relationship-graph__zoom-level { display:none; } }
@@ -78,5 +94,24 @@
   .uix-relationship-graph--fullscreen { position:fixed; inset:0; z-index:var(--uix-z-overlay, 1000); display:flex; flex-direction:column; padding:var(--uix-space-4); background:var(--uix-bg-app, var(--uix-surface)); }
   .uix-relationship-graph--fullscreen .uix-relationship-graph__viewport { flex:1; min-height:0; height:auto; }
   @media (max-width:640px) { .uix-relationship-graph__hint { display:none; } }
+  /* ── Tones, variants and legends (HAR-1639) ────────────────────────────────────────────────
+     A tone is a colour a node or an edge shares with its legend item; it never stands alone (the
+     consumer says the same in text). A dashed edge is an expected relation that is missing. */
+  .uix-relationship-graph [data-tone="neutral"] { --uix-graph-tone:var(--uix-neutral-solid); }
+  .uix-relationship-graph [data-tone="info"] { --uix-graph-tone:var(--uix-info); }
+  .uix-relationship-graph [data-tone="success"] { --uix-graph-tone:var(--uix-success); }
+  .uix-relationship-graph [data-tone="warning"] { --uix-graph-tone:var(--uix-warning-text); }
+  .uix-relationship-graph [data-tone="danger"] { --uix-graph-tone:var(--uix-danger); }
+  .uix-relationship-graph [data-tone="accent"] { --uix-graph-tone:var(--uix-accent); }
+  .uix-relationship-graph__link[data-tone] path { stroke:var(--uix-graph-tone); stroke-width:2px; }
+  .uix-relationship-graph__link[data-tone] polygon { fill:var(--uix-graph-tone); }
+  .uix-relationship-graph__link[data-variant="dashed"] path,.uix-relationship-graph__edge[data-variant="dashed"] { stroke-dasharray:6 4; }
+  .uix-relationship-graph__edge[data-tone] { stroke:var(--uix-graph-tone); }
+  /* a toned node: its border and a bar on its leading edge */
+  .uix-relationship-graph__item[data-tone] { border-color:var(--uix-graph-tone); box-shadow:inset 4px 0 0 var(--uix-graph-tone); }
+  .uix-relationship-graph__legend li[data-tone]::before { border-color:var(--uix-graph-tone); }
+  .uix-relationship-graph__legend li:is([data-shape="edge"],[data-variant]):not([data-shape="node"])::before { width:1.5rem; height:0; border-width:2px 0 0; border-radius:0; }
+  .uix-relationship-graph__legend li[data-variant="dashed"]::before { border-top-style:dashed; }
+  .uix-relationship-graph__legend li[data-shape="node"]::before { width:1rem; height:.75rem; border-width:1px 1px 1px 4px; border-radius:var(--uix-radius-xs); }
   @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/rule-builder.css

@@ -6,7 +6,8 @@
   /* a fixed combinator (HAR-1618): the Match choice as plain text, where the select was */
   .uix-rule-builder__match { font-size:var(--uix-text-meta); font-weight:400; color:var(--uix-text-muted); }
   .uix-rule-builder__rows { display:grid; gap:var(--uix-space-3); }
-  .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(10rem,1.4fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  /* a choice column grows to the label it shows before the value takes the rest, so "is greater than" is not cut off (HAR-1575) */
+  .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,max-content) minmax(9rem,max-content) minmax(10rem,1fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
   .uix-rule-builder__nested { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--uix-space-2); align-items:start; }
   .uix-rule-builder__nested .uix-rule-builder__group { border-left:3px solid var(--uix-accent); }
   .uix-rule-builder__row-actions,.uix-rule-builder__add { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }

package/styles/components/save-status.css

@@ -16,3 +16,8 @@
     .uix-save-status[data-state="saving"] .uix-save-status__icon { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
   }
 }
+
+/* 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-save-status[data-state="saving"] .uix-save-status__icon { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}

package/styles/components/scheduling-calendar.css

@@ -170,7 +170,7 @@
   .uix-scheduling-calendar__legend-list { display:flex; flex-wrap:wrap; gap:var(--uix-space-2) var(--uix-space-3); margin:0; padding:0; list-style:none; }
   .uix-scheduling-calendar__legend-list > li { display:inline-flex; align-items:center; gap:var(--uix-space-1); margin:0; }
   .uix-scheduling-calendar__legend-caption { flex:1 1 100%; margin:0; }
-  .uix-scheduling-calendar__swatch { flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:0.875rem; border:1px solid var(--calendar-status-edge); border-radius:var(--uix-radius-xs); background:var(--calendar-status-surface); color:var(--calendar-status-text); }
+  .uix-scheduling-calendar__swatch { flex:none; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:0.875rem; border:1px solid var(--calendar-status-edge); border-radius:var(--uix-radius-xs); background:var(--calendar-status-surface); color:var(--calendar-chrome-text); }
   .uix-scheduling-calendar__swatch > svg { width:0.75rem; height:0.75rem; }
   /* the built-in legend of the deprecated `state` values: the same shapes, no hue */
   .uix-scheduling-calendar__legend > span[data-state]::before { content:""; display:inline-block; width:0.625rem; height:0.625rem; margin-right:var(--uix-space-1); border:1px solid var(--calendar-status-edge-strong); border-radius:var(--uix-radius-xs); vertical-align:middle; }
@@ -313,6 +313,87 @@
      whatever theme the screen has). The calendar asks the browser to print its surfaces as they
      are; a browser may refuse, so no meaning rests on a fill or a pattern: each is an edge too.
      The first rule is the colour map again. */
+  /* ── Resource day (HAR-983): one column per resource on a slot axis ──────────────────────────
+     A free span is cut into bookable slots (a button each); a booking and time off stay whole;
+     time no span covers is "no schedule": hatched, with no button and no "free". No kind takes a
+     hue (the band alone does): free is open paper with a thin bar, a booking is filled with a heavy
+     bar and its words, time off is quiet italic words, no schedule is hatched. The grid scrolls
+     inside its own box, so the time gutter (left) and the heads (top) stay in view. */
+  .uix-scheduling-calendar__resources { --calendar-slot:1.75rem; --calendar-rs-column:9rem; position:relative; min-width:0; }
+  /* a refetch keeps every span readable and says it is loading in words, above the grid */
+  .uix-scheduling-calendar__rs-busy { display:block; margin-bottom:var(--uix-space-2); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__rs-scroll { max-height:var(--uix-scheduling-calendar-rs-height,min(70vh,46rem)); overflow:auto; border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); background:var(--calendar-chrome-surface); overscroll-behavior:contain; }
+  .uix-scheduling-calendar__rs-grid { display:grid; grid-template-columns:var(--calendar-gutter) repeat(var(--uix-scheduling-calendar-rs-columns,1),minmax(var(--calendar-rs-column),1fr)); grid-template-rows:auto calc(var(--uix-scheduling-calendar-rs-slots,1) * var(--calendar-slot)); min-width:calc(var(--calendar-gutter) + var(--uix-scheduling-calendar-rs-columns,1) * var(--calendar-rs-column)); }
+  .uix-scheduling-calendar__rs-corner,.uix-scheduling-calendar__rs-head { position:sticky; top:0; z-index:var(--uix-z-raised); padding:var(--uix-space-2); border-bottom:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__rs-corner { left:0; z-index:var(--uix-z-sticky); display:flex; align-items:flex-end; padding-inline:var(--uix-space-1); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-eyebrow); overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__rs-head { display:grid; align-content:end; gap:var(--calendar-gap); min-width:0; border-left:1px solid var(--calendar-chrome-line); }
+  .uix-scheduling-calendar__rs-name { font-weight:600; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__rs-description { display:block; color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-weight:400; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__rs-gutter { position:sticky; left:0; z-index:var(--uix-z-raised); background:var(--calendar-chrome-surface); }
+  .uix-scheduling-calendar__rs-tick { position:absolute; top:calc(var(--uix-scheduling-calendar-rs-offset,0) * var(--calendar-slot)); right:var(--uix-space-1); padding-top:var(--calendar-gap); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; line-height:1; }
+  /* The column's own background is "no schedule" (hatched); a free span covers it with paper.
+     Lines mark the hours only, drawn over the paper; the slots are felt on hover, not drawn
+     (review of PR #166: per-slot boxes with a label each read as a form, not a day). A booking
+     is the time grid's own entry chip, at the time grid's own lanes. */
+  /* One hour line per hour, as a tile one hour tall: the column and every free slot draw it,
+     each shifted by its own offset, so the lines run unbroken over paper and hatch alike. The
+     column is its own stacking context: what is raised inside it never rises over the sticky
+     heads and gutter. */
+  .uix-scheduling-calendar__rs-column { --calendar-hour:var(--calendar-slot); --calendar-rs-hour:calc(var(--uix-scheduling-calendar-rs-per-hour,1) * var(--calendar-slot));
+    position:relative; isolation:isolate; min-width:0; border-left:1px solid var(--calendar-chrome-line);
+    background:linear-gradient(to bottom,var(--calendar-chrome-line) 0 1px,transparent 1px) 0 calc(var(--uix-scheduling-calendar-rs-hour-at,0) * var(--calendar-slot)) / 100% var(--calendar-rs-hour) repeat-y,repeating-linear-gradient(135deg,var(--calendar-chrome-line) 0 1px,transparent 1px 8px),var(--calendar-chrome-surface-quiet); }
+  /* until the first spans arrive nothing is known: no hatch that would say "no schedule" */
+  .uix-scheduling-calendar__resources[data-first-load] .uix-scheduling-calendar__rs-column { background:var(--calendar-chrome-surface); }
+  .uix-scheduling-calendar__rs-skeleton { position:absolute; top:calc(var(--uix-scheduling-calendar-rs-offset,0) * var(--calendar-slot) + 1px); left:var(--calendar-gap); right:var(--calendar-gap); height:calc(var(--uix-scheduling-calendar-rs-length,1) * var(--calendar-slot) - 2px); }
+  /* a free slot: exactly its slot, so a free span tiles into one sheet of paper */
+  .uix-scheduling-calendar__rs-item { --calendar-rs-paper:var(--calendar-chrome-surface); position:absolute; top:calc(var(--uix-scheduling-calendar-rs-offset,0) * var(--calendar-slot)); left:0; right:0; height:calc(var(--uix-scheduling-calendar-rs-length,1) * var(--calendar-slot)); display:flex; align-items:flex-start; min-width:0; padding:var(--calendar-gap) var(--uix-space-2); overflow:hidden; border:0; border-radius:0;
+    background:linear-gradient(to bottom,var(--calendar-chrome-line) 0 1px,transparent 1px) 0 calc((var(--uix-scheduling-calendar-rs-hour-at,0) - var(--uix-scheduling-calendar-rs-offset,0)) * var(--calendar-slot)) / 100% var(--calendar-rs-hour) repeat-y,var(--calendar-rs-paper); color:var(--calendar-chrome-text); font:inherit; font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; line-height:1.35; text-align:left; cursor:pointer; }
+  .uix-scheduling-calendar__rs-add { display:inline-flex; align-items:center; gap:var(--calendar-gap); visibility:hidden; white-space:nowrap; }
+  .uix-scheduling-calendar__rs-add > svg { flex:none; width:1em; height:1em; }
+  .uix-scheduling-calendar__rs-item:focus-visible,.uix-scheduling-calendar__rs-item[data-selected] { z-index:var(--uix-z-raised); --calendar-rs-paper:var(--calendar-chrome-ghost-surface); }
+  .uix-scheduling-calendar__rs-item:is(:focus-visible,[data-selected]) > .uix-scheduling-calendar__rs-add { visibility:visible; }
+  .uix-scheduling-calendar__rs-item:focus-visible { outline:2px solid var(--calendar-chrome-text); outline-offset:-2px; }
+  .uix-scheduling-calendar__rs-item[data-selected] { box-shadow:inset 0 0 0 2px var(--calendar-chrome-text); }
+  /* time off: quiet words on a quiet sheet, over the paper and under nothing interactive */
+  .uix-scheduling-calendar__rs-off { position:absolute; top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-slot)); left:0; right:0; height:calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-slot)); padding:var(--calendar-gap) var(--uix-space-2); overflow:hidden; border-top:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface-quiet); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-style:italic; line-height:1.35; }
+  .uix-scheduling-calendar__rs-text { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  /* a booking: the entry chip (its plain edge), heavy only when it is the selected one */
+  .uix-scheduling-calendar__rs-booking { top:calc(var(--uix-scheduling-calendar-offset,0) * var(--calendar-slot) + 1px); height:max(calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-slot) - 2px),0.875rem); padding:var(--calendar-gap) var(--uix-space-1); font:inherit; font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__rs-booking[data-continues-before] { border-top-style:dashed; border-top-left-radius:0; border-top-right-radius:0; }
+  .uix-scheduling-calendar__rs-booking[data-continues-after] { border-bottom-style:dashed; border-bottom-left-radius:0; border-bottom-right-radius:0; }
+  .uix-scheduling-calendar__rs-booking[data-selected] { border-width:2px; border-color:var(--calendar-chrome-text); }
+  .uix-scheduling-calendar__rs-booking[data-selected] .uix-scheduling-calendar__title { font-weight:600; }
+  .uix-scheduling-calendar__rs-booking:focus-visible { z-index:var(--uix-z-raised); outline:2px solid var(--calendar-chrome-text); outline-offset:1px; }
+  .uix-scheduling-calendar__rs-row:focus-visible { outline:2px solid var(--calendar-chrome-text); outline-offset:1px; z-index:var(--uix-z-raised); }
+  .uix-scheduling-calendar__rs-row[data-selected] { box-shadow:inset 0 0 0 2px var(--calendar-chrome-text); }
+  @media (hover:hover) {
+    .uix-scheduling-calendar__rs-item:hover { --calendar-rs-paper:var(--calendar-chrome-ghost-surface); }
+    .uix-scheduling-calendar__rs-item:hover > .uix-scheduling-calendar__rs-add { visibility:visible; }
+    .uix-scheduling-calendar__rs-booking:hover { background:var(--calendar-chrome-surface-quiet); }
+    button.uix-scheduling-calendar__rs-row:hover { background:var(--calendar-chrome-ghost-surface); }
+  }
+  /* a finger needs a taller slot than a pointer (WCAG 2.5.8) */
+  @media (pointer:coarse) { .uix-scheduling-calendar__resources { --calendar-slot:2.75rem; } }
+  .uix-scheduling-calendar__rs-skeleton { display:block; }
+
+  /* the list: one resource after another, each time range on its own row */
+  .uix-scheduling-calendar__resources[data-layout="list"] { display:grid; gap:var(--uix-space-4); }
+  .uix-scheduling-calendar__rs-section { display:grid; gap:var(--uix-space-2); min-width:0; }
+  .uix-scheduling-calendar__rs-heading { margin:0; font-size:inherit; font-weight:600; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__rs-list { display:grid; gap:var(--calendar-gap); margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__rs-list > li { min-width:0; }
+  .uix-scheduling-calendar__rs-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--uix-space-1) var(--uix-space-3); width:100%; min-height:2.75rem; padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-xs); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text); font:inherit; text-align:left; }
+  button.uix-scheduling-calendar__rs-row { cursor:pointer; }
+  .uix-scheduling-calendar__rs-row[data-kind="free"] { border-left:3px solid var(--calendar-chrome-line-strong); }
+  .uix-scheduling-calendar__rs-row[data-kind="booked"] { border-color:var(--calendar-chrome-text); border-left-width:3px; background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__rs-row[data-kind="off"] { background:var(--calendar-chrome-surface-quiet); color:var(--calendar-chrome-text-quiet); font-style:italic; }
+  .uix-scheduling-calendar__rs-row[data-kind="none"] { background:repeating-linear-gradient(135deg,var(--calendar-chrome-line) 0 1px,transparent 1px 8px),var(--calendar-chrome-surface-quiet); color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__rs-range { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
+  .uix-scheduling-calendar__rs-kind { color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__rs-label { min-width:0; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__rs-section .uix-scheduling-calendar__rs-skeleton { position:static; height:6rem; }
+  .uix-scheduling-calendar__resources > .uix-scheduling-calendar__empty { position:static; border:0; }
+
   @media print {
     .uix-scheduling-calendar {
       --calendar-chrome-text: var(--uix-print-ink);

package/styles/components/search-suggest.css

@@ -23,6 +23,8 @@
   .uix-search-suggest__clear:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 
   .uix-search-suggest--lg .uix-search-suggest__input { height: calc(var(--uix-control-h) + 8px); padding-left: 44px; font-size: var(--uix-text-h3); }
+  /* free text (HAR-2465): a value field, not a search, so no magnifier and no room for one */
+  .uix-search-suggest--free-text .uix-search-suggest__input { padding-left: var(--uix-space-3); }
   .uix-search-suggest--lg .uix-search-suggest__lead { left: 14px; }
   .uix-search-suggest--lg .uix-search-suggest__lead svg { width: var(--uix-icon-lg); height: var(--uix-icon-lg); }
 

package/styles/components/segmented.css

@@ -16,6 +16,15 @@
   }
   .uix-segmented__option:hover { color: var(--uix-text); }
   /* aria-checked: a `selection="radio"` group (HAR-1604) */
-  .uix-segmented__option:is([aria-pressed="true"], [aria-checked="true"]) { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
+  /* selection="link" (HAR-1380): a <nav> around ul.uix-segmented of links; the current page lifts. */
+  ul.uix-segmented { margin: 0; list-style: none; }
+  ul.uix-segmented > li { display: flex; min-inline-size: 0; margin: 0; }
+  a.uix-segmented__option { display: inline-flex; align-items: center; text-decoration: none; }
+  a.uix-segmented__option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+  /* the selected segment is lifted AND ringed: the surface on the track is only 1.05:1 in dark and
+     1.09:1 in light, so an inset --uix-text-muted hairline (4.9:1 light, 7:1 dark on the track) makes
+     it a 3:1 boundary (WCAG 1.4.11). No weight change: a bolder label would widen the option and
+     shift its neighbours on every selection. */
+  .uix-segmented__option:is([aria-pressed="true"], [aria-checked="true"], [aria-current="page"]) { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm), inset 0 0 0 1px var(--uix-text-muted); }
   .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
 }

package/styles/components/select.css

@@ -14,6 +14,8 @@
   .uix-select:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
   .uix-select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--uix-bg-subtle); }
   .uix-select--sm { height: 28px; font-size: var(--uix-text-meta); }
+  /* lg: 44 px, beside Input and Button lg on a public page (HAR-1812) */
+  .uix-select--lg { height: 44px; padding: 0 calc(var(--uix-space-8) + var(--uix-space-1)) 0 var(--uix-space-4); background-position: right 14px center; font-size: var(--uix-text-h3); }
 
   /* command-palette-style rich select: a trigger that opens a .uix-cmdk popover (search + options) */
   .uix-select-trigger { display: inline-flex; align-items: center; gap: var(--uix-space-2); height: var(--uix-control-h); padding: 0 var(--uix-space-3); min-width: 220px;
@@ -29,6 +31,15 @@
   .uix-select[aria-invalid="true"] { border-color: var(--uix-danger); }
   .uix-select[aria-invalid="true"]:focus, .uix-select[aria-invalid="true"][aria-expanded="true"] { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
   .uix-select[aria-readonly="true"] { cursor: default; background-color: var(--uix-bg-subtle); background-image: none; padding-right: var(--uix-space-3); }
+  /* the trigger's chevron is the icon set's chevron-down through a mask, in the muted text colour of
+     the theme (HAR-1576). A native <select> cannot hold a pseudo-element: it keeps the image above,
+     a mid grey that clears 3:1 on the light and the dark surface. */
+  button.uix-select { position: relative; background-image: none; }
+  button.uix-select::after {
+    content: ""; position: absolute; inset-inline-end: var(--uix-space-3); top: 50%; width: var(--uix-icon-sm); height: var(--uix-icon-sm); translate: 0 -50%;
+    background: var(--uix-text-muted); pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
+  }
+  button.uix-select[aria-readonly="true"]::after { content: none; }
   .uix-select__value { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--uix-space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-select__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-select__icon { display: inline-flex; flex: none; color: var(--uix-text-muted); }

package/styles/components/sidebar.css

@@ -35,7 +35,8 @@
   .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   /* two-line row: a label plus a wrapping second line (HAR-1355). min-height above lets it grow. */
   .uix-navitem[data-multiline] { align-items: flex-start; padding-block: var(--uix-space-2); }
-  .uix-navitem__text { flex: 1; min-width: 0; display: grid; }
+  /* label over description, --uix-space-1 apart: the kit's one title -> secondary rhythm (HAR-1577) */
+  .uix-navitem__text { flex: 1; min-width: 0; display: grid; gap: var(--uix-space-1); }
   .uix-navitem__desc { font-size: var(--uix-text-meta); line-height: 1.35; color: var(--uix-text-muted); overflow-wrap: anywhere; white-space: normal; font-weight: 400; }
   .uix-navitem[aria-current="page"] .uix-navitem__desc { color: var(--uix-text-hushed); }
   /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
@@ -142,3 +143,52 @@
   .uix-sidebar[data-nav="rail"] .uix-navitem { justify-content: center; align-items: center; padding: 0; gap: 0; }
   .uix-sidebar[data-nav="rail"] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
 }
+
+/* Head actions, the search row, the foot and AccountMenu (HAR-1371). Hover tints only where the
+   device can hover; nothing here moves, so a rail switch is instant. */
+@layer uix.components {
+  .uix-sidebar__head .uix-sidebar__brand { flex: 1 1 auto; }
+  .uix-sidebar__actions { display: flex; align-items: center; gap: var(--uix-space-1); flex: none; }
+
+  .uix-sidebar__search {
+    display: flex; align-items: center; gap: var(--uix-space-2); width: 100%; min-height: 32px; margin-block-end: var(--uix-space-1);
+    padding: 0 var(--uix-space-2) 0 var(--uix-space-3); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
+    background: var(--uix-surface); color: var(--uix-text-muted); font: inherit; font-size: var(--uix-text-body); text-align: start; cursor: pointer;
+  }
+  .uix-sidebar__search:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-sidebar__search-icon { width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex: none; }
+  .uix-sidebar__search-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-sidebar__search-keys { flex: none; }
+
+  .uix-sidebar__foot { margin-block-start: auto; padding-block-start: var(--uix-space-2); border-block-start: 1px solid var(--uix-border); }
+
+  .uix-account-menu {
+    display: flex; align-items: center; gap: var(--uix-space-3); width: 100%; min-height: 44px; padding: var(--uix-space-1) var(--uix-space-2);
+    border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text); font: inherit; text-align: start; cursor: pointer;
+  }
+  .uix-account-menu:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-account-menu[aria-expanded="true"] { background: var(--uix-bg-active); }
+  .uix-account-menu__avatar { flex: none; }
+  .uix-account-menu__text { display: grid; flex: 1 1 auto; gap: var(--uix-space-1); min-width: 0; } /* the kit's one title -> secondary rhythm (HAR-1577) */
+  .uix-account-menu__name { font-size: var(--uix-text-body); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* the second line is hushed, not muted: muted dips under 4.5:1 on the hover and open tints */
+  .uix-account-menu__sub { font-size: var(--uix-text-meta); color: var(--uix-text-hushed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-account-menu__chevron { width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex: none; color: var(--uix-text-muted); }
+
+  @media (hover: hover) {
+    .uix-sidebar__search:hover { border-color: var(--uix-border-strong); color: var(--uix-text-hushed); }
+    .uix-account-menu:hover { background: var(--uix-bg-hover); }
+  }
+
+  /* the rail: the search row and the account trigger become centred icon buttons; their words
+     stay as the accessible name (the clip pattern the nav labels use) */
+  :is(.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"]) .uix-sidebar__actions,
+  :is(.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"]) .uix-sidebar__search-keys,
+  .uix-account-menu--collapsed .uix-account-menu__chevron { display: none; }
+  :is(.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"]) .uix-sidebar__search { justify-content: center; min-height: 36px; padding: 0; }
+  :is(.uix-sidebar[data-collapsed], .uix-sidebar[data-nav="rail"]) .uix-sidebar__search-label,
+  .uix-account-menu--collapsed .uix-account-menu__text {
+    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+  .uix-account-menu--collapsed { justify-content: center; padding-inline: 0; }
+}

package/styles/components/sortable-list.css

@@ -0,0 +1,42 @@
+/* uix sortable list — a list the person reorders (React `SortableList`, HAR-1375).
+   A row is grip · content · move up / move down. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-sortable { display: grid; gap: var(--uix-space-2); min-width: 0; margin: 0; padding: 0; list-style: none; }
+  .uix-sortable__row {
+    display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0; margin: 0;
+    padding: var(--uix-space-2) var(--uix-space-2) var(--uix-space-2) var(--uix-space-1);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
+  }
+  /* The dragged row lifts and its neighbours make room by reordering, frame by frame: no motion of its own. */
+  .uix-sortable__row[data-dragging] { position: relative; z-index: var(--uix-z-raised); border-color: var(--uix-ring); box-shadow: var(--uix-shadow-popover); }
+  .uix-sortable[data-dragging] { cursor: grabbing; user-select: none; }
+  .uix-sortable__content { flex: 1; min-width: 0; overflow-wrap: break-word; }
+  /* 24 × 32: the grip is a pointer target, wide enough without taking the content's room. */
+  .uix-sortable__grip {
+    display: grid; place-items: center; flex: none; align-self: stretch; width: 24px; min-height: 32px; padding: 0;
+    border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: grab; touch-action: none;
+  }
+  .uix-sortable__grip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-sortable__moves { display: inline-flex; flex: none; gap: var(--uix-space-1); }
+  .uix-sortable__move {
+    display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface); color: var(--uix-text); cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-sortable__move svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-sortable__move:disabled { color: var(--uix-text-muted); opacity: .45; cursor: default; }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-sortable__move:not(:disabled):hover, .uix-sortable__grip:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  }
+  .uix-sortable__move:not(:disabled):active { background: var(--uix-bg-active); }
+  :is(.uix-sortable__grip, .uix-sortable__move):focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+  .uix-sortable__row:focus-within { border-color: var(--uix-border-strong); }
+  /* On a phone Move up stacks over Move down, so the content keeps the width its words need (at
+     320 px they broke inside every word). A viewport query, not a container: an inline-size
+     container has no width of its own, and the list would collapse in a popover or any
+     shrink-to-fit parent (it did in the docs preview). */
+  @media (max-width: 30rem) {
+    .uix-sortable__moves { flex-direction: column; }
+    .uix-sortable__move { width: 32px; height: 28px; }
+  }
+}

package/styles/components/spinner.css

@@ -12,3 +12,8 @@
     background: color-mix(in srgb, var(--uix-bg-app) 60%, transparent); backdrop-filter: blur(2px);
   }
 }
+
+/* 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-spinner { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}

package/styles/components/stat-tile.css

@@ -2,21 +2,30 @@
 @layer uix.components {
   .uix-stat { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); padding: var(--uix-space-6); }
   .uix-stat__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); }
-  .uix-stat__label > span { min-width: 0; overflow-wrap: anywhere; }
+  /* break-word, not anywhere: a word wraps whole and only breaks when it alone is wider than the tile */
+  .uix-stat__label > span { min-width: 0; overflow-wrap: break-word; }
   .uix-stat__label svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
   .uix-stat__value { display: block; font-size: var(--uix-text-data-hero); font-weight: 600; line-height: var(--uix-leading-data-hero); margin-top: var(--uix-space-3); overflow-wrap: anywhere; }
   .uix-stat__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); overflow-wrap: anywhere; }
-  .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); }
+  /* the chip is neutral unless the product says what the change means (HAR-1563): a rise can be
+     bad (breached SLAs) and a fall good (open incidents), so direction never picks the colour */
+  .uix-stat__trend { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-size: var(--uix-text-meta); font-weight: 600; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-pill); color: var(--uix-neutral-text); background: var(--uix-neutral-bg); }
   /* direction glyph inside the chip (UIX-A11Y-4) — sized to sit on the text baseline row */
   .uix-stat__trend svg { width: 10px; height: 10px; flex: none; }
-  .uix-stat__trend--up { color: var(--uix-success-text); background: var(--uix-success-bg); }
-  .uix-stat__trend--down { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
+  /* the direction classes name the arrow, not a colour; their figures are tabular so deltas line up across tiles */
+  .uix-stat__trend:is(.uix-stat__trend--up, .uix-stat__trend--down) { font-variant-numeric: tabular-nums; }
+  .uix-stat__trend--positive { color: var(--uix-success-text); background: var(--uix-success-bg); }
+  .uix-stat__trend--negative { color: var(--uix-danger-text); background: var(--uix-danger-bg); }
 
-  /* tones — an outlined tile whose value carries the tone; the label keeps its muted colour */
-  .uix-stat--warning { border-color: var(--uix-warning-border); }
-  .uix-stat--warning .uix-stat__value { color: var(--uix-warning-text); }
-  .uix-stat--danger { border-color: var(--uix-danger-border); }
-  .uix-stat--danger .uix-stat__value { color: var(--uix-danger-text); }
+  /* tones (HAR-1563) — the value carries the tone and a dot of its solid leads it; the border stays
+     neutral and the label keeps its muted colour, so a row of tiles has one quiet frame */
+  .uix-stat--warning { --stat-tone-text: var(--uix-warning-text); --stat-tone-solid: var(--uix-warning-solid); }
+  .uix-stat--danger { --stat-tone-text: var(--uix-danger-text); --stat-tone-solid: var(--uix-danger-solid); }
+  .uix-stat:is(.uix-stat--warning, .uix-stat--danger) .uix-stat__value { color: var(--stat-tone-text); }
+  .uix-stat:is(.uix-stat--warning, .uix-stat--danger) .uix-stat__value::before {
+    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+    margin-inline-end: var(--uix-space-2); vertical-align: middle; background: var(--stat-tone-solid);
+  }
 
   /* compact — for dense fact bands */
   .uix-stat--compact { padding: var(--uix-space-3) var(--uix-space-4); }
@@ -29,9 +38,7 @@
     display: flex; flex-direction: column; width: 100%; font: inherit; color: inherit; text-align: start; cursor: pointer;
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
   }
-  .uix-stat--interactive:hover:where(:not([aria-busy="true"])) { background: var(--uix-bg-hover); border-color: var(--uix-border-strong); }
-  .uix-stat--interactive.uix-stat--warning:hover { border-color: var(--uix-warning-border); }
-  .uix-stat--interactive.uix-stat--danger:hover { border-color: var(--uix-danger-border); }
+  @media (hover: hover) { .uix-stat--interactive:hover:where(:not([aria-busy="true"])) { background: var(--uix-bg-hover); border-color: var(--uix-border-strong); } }
   .uix-stat--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-stat--interactive[aria-expanded="true"] { border-color: var(--uix-ring); }
   .uix-stat__chevron { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--uix-text-muted); }
@@ -41,7 +48,24 @@
   .uix-stat--interactive[aria-busy="true"] { cursor: progress; opacity: .6; }
   /* link — the whole tile is an <a> to a filtered list or a record (HAR-1350) */
   .uix-stat--link { text-decoration: none; }
+  /* resting affordance (HAR-1803): a tile that goes somewhere looks it before it is touched, since
+     a tablet has no hover. A link carries a trailing chevron in its label row; an in-place action
+     (no popup, so no chevron) underlines its value. Both are shapes, never colour alone. */
+  .uix-stat__go { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--uix-text-muted); }
+  .uix-stat__label .uix-stat__go svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-stat--action .uix-stat__value { text-decoration: underline dotted var(--uix-text-muted); text-decoration-thickness: from-font; text-underline-offset: .2em; }
   /* current: the ring outline only; a brand tint would drop the muted label below AA */
   .uix-stat--link[aria-current="page"] { border-color: var(--uix-ring); box-shadow: inset 0 0 0 1px var(--uix-ring); }
   @media (prefers-reduced-motion: reduce) { .uix-stat--interactive, .uix-stat__label .uix-stat__chevron svg { transition: none; } }
 }
+
+/* Stat row (HAR-1803 review): tiles side by side while each keeps a readable width, then fewer per
+   row, down to one on a phone. A fixed six-column grid broke labels letter by letter at 320 px
+   ("AS/SI/GN/EE"). --stat-row-min sets the narrowest tile: 8.5rem, and 12rem with --hero (or once
+   a hero tile, with its 34 px value, is in the row); min(100%, …) keeps a single tile inside a
+   container narrower than that. */
+@layer uix.components {
+  .uix-stat-row { --stat-row-auto: 8.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stat-row-min, var(--stat-row-auto))), 1fr)); gap: var(--uix-space-3); min-width: 0; }
+  .uix-stat-row--hero, .uix-stat-row:has(> .uix-stat:not(.uix-stat--compact)) { --stat-row-auto: 12rem; }
+}
+

package/styles/components/states.css

@@ -22,3 +22,8 @@
   .uix-operation__description { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
   .uix-operation__action { justify-self: start; }
 }
+
+/* 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-skeleton { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}