@tensor_1/tokens 2.47.0 → 2.49.0

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); }
 
@@ -32,9 +34,13 @@
     display: flex; flex-direction: column; max-height: min(28rem, 70vh); overflow-y: auto; overscroll-behavior: contain;
     padding: var(--uix-space-1); background: var(--uix-surface-2); border: 1px solid var(--uix-border);
     border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover);
-    animation: uix-search-suggest-in var(--uix-dur-fast) var(--uix-ease-out);
+    /* Enters once per opening, growing from the field (a transition from @starting-style, not a
+       keyframe): the React SearchSuggest sets [data-settled] after the first show, so a list that
+       hides and reappears while the user types comes back in place (HAR-2578). */
+    transform-origin: var(--uix-anchor-origin, top center);
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
   }
-  @keyframes uix-search-suggest-in { from { opacity: 0; transform: translateY(-4px); } }
+  @starting-style { .uix-search-suggest__popup:not([hidden], [data-settled]) { opacity: 0; transform: scale(.95); } }
 
   .uix-search-suggest__header {
     display: flex; align-items: baseline; justify-content: space-between; gap: var(--uix-space-3);
@@ -107,10 +113,6 @@
     .uix-search-suggest__option { min-height: 44px; padding-block: var(--uix-space-3); }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .uix-search-suggest__popup:not([hidden]) { animation: none; }
-  }
-
   @media (forced-colors: active) {
     .uix-search-suggest__option[data-active], .uix-search-suggest__footer[data-active] { outline: 2px solid Highlight; outline-offset: -2px; }
     .uix-search-suggest__match { text-decoration: underline; }

package/styles/components/segmented.css

@@ -16,6 +16,36 @@
   }
   .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; }
+
+  /* Sliding indicator (React Segmented, HAR-2589). At rest the chosen option shows its own lift.
+     When a click changes it, one lifted segment slides from the old option to the new one
+     (transform only); while it slides ([data-uix-indicator]) the new option's own lift steps
+     aside, then the indicator hides again. Keyboard changes jump. */
+  /* the indicator is the last child: isolate + z-index -1 paint it above the track and beneath
+     the options */
+  .uix-segmented { position: relative; isolation: isolate; }
+  /* A window that narrows mid-slide wraps the options before the ResizeObserver that ends the
+     slide has run, so for that frame the indicator sits at its old place, past the control's edge,
+     and widened the page by 19 px at 320 px in CI (display-preferences.spec, red on master since
+     #170). The track clips it; the margin keeps the options' focus ring and lift. */
+  .uix-segmented { overflow: clip; overflow-clip-margin: var(--uix-space-1); }
+  .uix-segmented__option { position: relative; }
+  /* the same look as a selected option: surface, lift and the 3:1 inset ring */
+  .uix-segmented__indicator { position: absolute; z-index: calc(-1 * var(--uix-z-raised)); pointer-events: none; transform-origin: 0 0; background: var(--uix-surface); box-shadow: var(--uix-shadow-sm), inset 0 0 0 1px var(--uix-text-muted); border-radius: calc(var(--uix-radius-md) - 3px); }
+  .uix-segmented__indicator[data-moving] { transition: transform var(--uix-dur) var(--uix-ease-in-out); }
+  @media (forced-colors: none) {
+    .uix-segmented[data-uix-indicator] .uix-segmented__option:is([aria-pressed="true"], [aria-checked="true"]) { background: transparent; box-shadow: none; }
+  }
+  @media (forced-colors: active) { .uix-segmented__indicator { display: none; } }
 }

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); }
@@ -55,8 +66,15 @@
   }
   .uix-select__popup:not([hidden]) { display: flex; }
   [popover].uix-select__popup:not(:popover-open) { display: none; }
-  [popover].uix-select__popup { opacity: 1; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete; }
-  @starting-style { [popover].uix-select__popup:popover-open { opacity: 0; } }
+  /* grows out of the trigger (--uix-anchor-origin from useAnchoredPosition) at --uix-dur-fast; the
+     closed state carries the faster exit. Opened from the keyboard it does not animate (motion.css). */
+  [popover].uix-select__popup {
+    opacity: 0; transform: scale(.95); transform-origin: var(--uix-anchor-origin, top left);
+    transition: opacity var(--uix-dur-exit-fast) var(--uix-ease-out), transform var(--uix-dur-exit-fast) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-fast) allow-discrete, display var(--uix-dur-exit-fast) allow-discrete;
+  }
+  [popover].uix-select__popup:popover-open { opacity: 1; transform: none; transition-duration: var(--uix-dur-fast); }
+  @starting-style { [popover].uix-select__popup:popover-open { opacity: 0; transform: scale(.95); } }
   .uix-select__listbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
   .uix-select__popup .uix-listbox { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
   .uix-select__popup .uix-listbox:focus { outline: none; }

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,53 @@
   .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; } }
+}
+
+/* uix success state (HAR-2588): the outcome of a rare, important journey — a request
+   submitted. The mark draws once (the disc settles in, then the check is drawn), never repeats,
+   never bounces; reduced motion shows it at once. Then the title (focused on mount), the
+   reference, what happens next and the next action. */
+@layer uix.components {
+  .uix-success { gap: var(--uix-space-4); color: var(--uix-text); }
+  .uix-success__mark { inline-size: var(--uix-space-12); block-size: var(--uix-space-12); }
+  .uix-success__mark svg { inline-size: 100%; block-size: 100%; overflow: visible; }
+  .uix-success__disc { fill: var(--uix-success-bg); stroke: var(--uix-success); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
+  .uix-success__check { stroke: var(--uix-success-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
+  @keyframes uix-success-disc { from { opacity: 0; transform: scale(.85); } }
+  /* hidden until it starts drawing: a round cap on the zero-length dash would show as a dot */
+  @keyframes uix-success-check { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } }
+  .uix-success__disc { animation: uix-success-disc var(--uix-dur-slow) var(--uix-ease-out) both; }
+  .uix-success__check { animation: uix-success-check var(--uix-dur-slower) var(--uix-ease-out) var(--uix-dur-fast) both; }
+  @media (prefers-reduced-motion: reduce) {
+    /* no settle, no drawing: the disc fades in with the check already there */
+    .uix-success__disc { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) both !important; }
+    .uix-success__check { animation: none !important; }
+  }
+  .uix-success__title { margin: 0; }
+  .uix-success__title:focus { outline: none; }
+  .uix-success__title:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: var(--uix-space-1); border-radius: var(--uix-radius-sm); }
+  .uix-success__body { max-inline-size: 52ch; color: var(--uix-text-muted); }
+  .uix-success__body > p { margin: 0; }
+  .uix-success__reference { margin: 0; color: var(--uix-text-muted); }
+  .uix-success__reference-label { font-size: var(--uix-text-meta); }
+  .uix-success__reference-value { display: inline-flex; align-items: center; gap: var(--uix-space-1); font-family: var(--uix-font-mono); font-weight: 600; color: var(--uix-text); }
+  .uix-success__next { inline-size: min(100%, 28rem); padding: var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); text-align: start; }
+  .uix-success__next-title { margin: 0 0 var(--uix-space-2); font-size: var(--uix-text-body); font-weight: 600; }
+  .uix-success__steps { margin: 0; padding-inline-start: var(--uix-space-5); display: grid; gap: var(--uix-space-2); color: var(--uix-text-muted); }
+  @media (forced-colors: active) {
+    .uix-success__disc { fill: Canvas; stroke: CanvasText; }
+    .uix-success__check { stroke: CanvasText; }
+  }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the mark is simply there */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-success__disc { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) both !important; }
+    :root[data-motion="reduce"] .uix-success__check { animation: none !important; }
+  }
+}

package/styles/components/status-pill.css

@@ -28,12 +28,32 @@
   .uix-pill--p4 { --tone-bg: var(--uix-info-bg);    --tone-fg: var(--uix-info-text);    --tone-dot: var(--uix-info); }
   .uix-pill--p5 { --tone-bg: var(--uix-bg-active);  --tone-fg: var(--uix-text-hushed);  --tone-dot: var(--uix-text-muted); }
 
-  /* outline treatment — transparent fill, tone-tinted border, tone-colored text. The border tints
-     the tone hue (--tone-fg) at 40%; neutral/muted use the structural borders, critical reads strongest. */
-  .uix-pill--outline { background: transparent; border: 1px solid var(--tone-line, color-mix(in srgb, var(--tone-fg) 40%, transparent)); }
-  .uix-pill--outline.uix-pill--neutral  { --tone-line: var(--uix-border-strong); }
-  .uix-pill--outline.uix-pill--muted    { --tone-line: var(--uix-border); }
-  .uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
+  /* in flight (HAR-1563): the same blue as info, under the name the colour policy uses */
+  .uix-pill--progress { --tone-bg: var(--uix-info-bg); --tone-fg: var(--uix-info-text); --tone-dot: var(--uix-info); }
+
+  /* each tone's solid, for the quiet treatments below, where the dot is the only hue (HAR-1563) */
+  .uix-pill--neutral, .uix-pill--muted, .uix-pill--p5 { --tone-solid: var(--uix-neutral-solid); }
+  /* the pale hues mix 40 % of their text role in, so a light-mode dot clears 3:1 on the surface
+     (success 2.54 -> 3.38, warning 2.15 -> 3.32, amber 2.94 -> 4.09) and a dark one stays calm */
+  .uix-pill--success, .uix-pill--sla-ok { --tone-solid: color-mix(in srgb, var(--uix-success-solid) 60%, var(--uix-success-text)); }
+  .uix-pill--info, .uix-pill--progress, .uix-pill--p4 { --tone-solid: var(--uix-info-solid); }
+  .uix-pill--warning, .uix-pill--p2 { --tone-solid: color-mix(in srgb, var(--uix-warning-solid) 60%, var(--uix-warning-text)); }
+  .uix-pill--p3 { --tone-solid: color-mix(in srgb, var(--uix-amber) 60%, var(--uix-amber-text)); }
+  .uix-pill--danger, .uix-pill--critical, .uix-pill--p1 { --tone-solid: var(--uix-danger-solid); }
+  .uix-pill--attention, .uix-pill--sla-at-risk { --tone-solid: var(--uix-attention-solid); }
+  .uix-pill--overdue, .uix-pill--sla-breached { --tone-solid: var(--uix-overdue-solid); }
+
+  /* dot treatment (HAR-1563) — for dense tables: no fill and no padding, a neutral label, and the
+     tone only in the dot. The label is the meaning; the dot is the glance. */
+  .uix-pill--dot { background: transparent; padding-inline: 0; color: var(--uix-neutral-text); }
+  .uix-pill--dot .uix-pill__dot { background: var(--tone-solid, var(--uix-neutral-solid)); }
+
+  /* outline treatment (HAR-1563) — a neutral hairline, a hushed label and the tone's dot. Only
+     critical keeps a toned border, so the one thing that needs action still stands out. */
+  .uix-pill--outline { background: transparent; border: 1px solid var(--uix-neutral-border); color: var(--uix-neutral-text); }
+  .uix-pill--outline .uix-pill__dot { background: var(--tone-solid, var(--uix-neutral-solid)); }
+  .uix-pill--outline.uix-pill--muted { border-color: var(--uix-border); }
+  .uix-pill--outline.uix-pill--critical { border-color: var(--uix-danger-solid); color: var(--uix-danger-text); }
 }
 
 /* Sizes (HAR-1614): sm for dense cells, lg for a page header. The default is unchanged. */
@@ -42,4 +62,6 @@
   .uix-pill--sm .uix-pill__dot { width: 6px; height: 6px; }
   .uix-pill--lg { padding: var(--uix-space-2) var(--uix-space-4); font-size: var(--uix-text-body); }
   .uix-pill--lg .uix-pill__dot { width: 9px; height: 9px; }
+  /* the dot treatment has no box at any size: its label lines up with the cell's other text */
+  .uix-pill--dot:is(.uix-pill--sm, .uix-pill--lg) { padding-inline: 0; }
 }

package/styles/components/steps.css

@@ -32,6 +32,8 @@
   .uix-steps--horizontal > .uix-step > .uix-step__text { flex: 0 0 auto; max-width: 12rem; }
   .uix-step[data-state="waiting"] .uix-step__marker { border-style: dashed; border-color: var(--uix-warning-border); color: var(--uix-warning-text); }
   .uix-step[data-state="error"] { color: var(--uix-text); }
+  /* the error marker is the icon set's X (HAR-1576), the size of the done check */
+  .uix-step__marker > .uix-icon { width: 12px; height: 12px; }
   .uix-step[data-state="error"] .uix-step__marker { background: var(--uix-danger-bg); border-color: var(--uix-danger-border); color: var(--uix-danger-text); }
   /* vertical (and horizontal below 40rem): a column, the connector a line under the marker */
   .uix-steps--vertical { flex-direction: column; gap: 0; }

package/styles/components/table-toolbar.css

@@ -60,7 +60,7 @@
 /* FilterEditor (React, HAR-1365): typed filter content inside .uix-filter-popover */
 @layer uix.components {
   .uix-filter-editor { width: min(22rem, calc(100vw - 4rem)); min-width: 0; gap: var(--uix-space-3); }
-  .uix-filter-editor[data-kind="number"] .uix-filter-editor__row > .uix-select { flex-basis: 100%; }
+  .uix-filter-editor:is([data-kind="number"], [data-kind="date"]) .uix-filter-editor__row > .uix-select { flex-basis: 100%; }
   .uix-filter-editor__label { font-weight: 600; color: var(--uix-text); }
   .uix-filter-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
   .uix-filter-editor__row > .uix-input, .uix-filter-editor__row > .uix-select { flex: 1 1 8rem; min-width: 0; }