@tensor_1/tokens 2.48.0 → 2.49.0

package/build/css/tokens.css

@@ -120,6 +120,10 @@
     --uix-dur-exit: 110ms;
     --uix-dur-exit-slow: 160ms;
     --uix-dur-highlight: 2400ms;
+    --uix-dur-change: 1200ms;
+    --uix-delay-pending: 300ms;
+    --uix-hold-pending: 500ms;
+    --uix-hold-result: 1500ms;
     --uix-delay-tooltip: 400ms;
     --uix-delay-tooltip-skip: 300ms;
     --uix-loop-spin: 600ms;

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
+export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "accent-text" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "success-text" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "warning-border" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-border" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "neutral-solid" | "neutral-text" | "neutral-bg" | "neutral-border" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "chart-grid" | "chart-axis" | "chart-reference" | "chart-zone-warning" | "chart-zone-danger" | "chart-forecast-band" | "chart-event" | "chart-partial" | "chart-comparison" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "print-ink" | "print-ink-quiet" | "print-paper" | "print-paper-quiet" | "print-line" | "print-danger" | "shadow-sm" | "shadow-md" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "dur-exit-fast" | "dur-exit" | "dur-exit-slow" | "dur-highlight" | "dur-change" | "delay-pending" | "hold-pending" | "hold-result" | "delay-tooltip" | "delay-tooltip-skip" | "loop-spin" | "loop-progress" | "loop-shimmer" | "loop-ping" | "loop-blink" | "loop-pulse" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-xl" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -121,6 +121,10 @@ export const cssVar = {
   "dur-exit": "var(--uix-dur-exit)",
   "dur-exit-slow": "var(--uix-dur-exit-slow)",
   "dur-highlight": "var(--uix-dur-highlight)",
+  "dur-change": "var(--uix-dur-change)",
+  "delay-pending": "var(--uix-delay-pending)",
+  "hold-pending": "var(--uix-hold-pending)",
+  "hold-result": "var(--uix-hold-result)",
   "delay-tooltip": "var(--uix-delay-tooltip)",
   "delay-tooltip-skip": "var(--uix-delay-tooltip-skip)",
   "loop-spin": "var(--uix-loop-spin)",
@@ -312,6 +316,10 @@ export const light = {
   "dur-exit": "110ms",
   "dur-exit-slow": "160ms",
   "dur-highlight": "2400ms",
+  "dur-change": "1200ms",
+  "delay-pending": "300ms",
+  "hold-pending": "500ms",
+  "hold-result": "1500ms",
   "delay-tooltip": "400ms",
   "delay-tooltip-skip": "300ms",
   "loop-spin": "600ms",

package/package.json

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

package/styles/components/card.css

@@ -24,6 +24,18 @@
   .uix-collapsible__summary:hover .uix-collapsible__chevron { color: var(--uix-text); }
   .uix-collapsible[open] .uix-collapsible__chevron { transform: rotate(180deg); }
   .uix-collapsible__body { padding: 0 var(--uix-space-5) var(--uix-space-5); }
+  /* Opening (HAR-2589): the body fades in and settles 4 px down into place. A transition on
+     ::details-content, not @starting-style, so a section that is already open when the page
+     loads does not animate; opening from the keyboard (the summary is :focus-visible) is
+     instant too, and so is closing. Height never animates (the motion contract forbids layout
+     animation): what follows moves at once and the eye follows the fade. Browsers without
+     ::details-content simply open. Reduced motion drops the 4 px and keeps the fade. */
+  .uix-collapsible::details-content { opacity: 0; translate: 0 calc(-1 * var(--uix-space-1)); }
+  .uix-collapsible[open]::details-content {
+    opacity: 1; translate: none;
+    transition: opacity var(--uix-dur) var(--uix-ease-out), translate var(--uix-dur) var(--uix-ease-out);
+  }
+  .uix-collapsible[open]:has(> summary:focus-visible)::details-content { transition: none; }
 }
 
 /* CollapsibleSection `headingLevel` and `compact` (HAR-1628). The heading only adds the outline

package/styles/components/data-workspace.css

@@ -17,13 +17,11 @@
      (the checkbox itself stays as it is, centred, its input over its box). */
   .uix-data-workspace__grid--pin-id :is(th, td):first-child::after { content: ""; display: block; inline-size: calc(var(--uix-selcol-w) - var(--uix-space-3)); }
   .uix-data-workspace__grid--pin-id thead th:nth-child(2) { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
-  .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { background: var(--uix-row); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
-  .uix-data-workspace__grid--pin-id:not(.uix-table--no-zebra) tbody tr:nth-child(even) td:nth-child(2) { background: var(--uix-row-alt); }
-  .uix-data-workspace__grid--pin-id tbody tr[data-pinned] td:nth-child(2) { background: linear-gradient(var(--uix-row-pinned-bg), var(--uix-row-pinned-bg)) var(--uix-surface); }
-  .uix-data-workspace__grid--pin-id tbody tr[data-selected] td:nth-child(2) { background: linear-gradient(var(--uix-row-selected-bg), var(--uix-row-selected-bg)) var(--uix-surface); }
-  .uix-data-workspace__grid--pin-id tbody tr:hover td:nth-child(2) { background: var(--uix-bg-hover); }
+  /* the row's state (--uix-row-bg, table.css) over the surface: opaque, and the same as the row
+     (a zebra rule here outranked selected on every even row: operator review 2026-10-23) */
+  .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { background: linear-gradient(var(--uix-row-bg), var(--uix-row-bg)), var(--uix-surface); }
+  @media (forced-colors: active) { .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { background: Canvas; } }
   .uix-table-wrap[data-overflow="false"] .uix-data-workspace__grid--pin-id :is(th, td):nth-child(2) { box-shadow: none; }
-  @media (prefers-reduced-motion: reduce) { .uix-data-workspace__grid--pin-id tbody tr td:nth-child(2) { transition: none; } }
   /* the record-id cell: the id opens a peek, ↗ opens the full record */
   .uix-data-workspace__id { display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap; }
   .uix-data-workspace__open { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--uix-radius-xs); color: var(--uix-text-muted); }

package/styles/components/drag.css

@@ -0,0 +1,63 @@
+/* uix drag — the shared affordances of anything a person drags (HAR-2590, motion standard §2.8):
+   a list row, a kanban card, a dashboard widget. Attributes, so any element can carry them:
+     [data-uix-drag="lifted"]   picked up by the pointer: raised, a little larger, a deeper shadow
+     [data-uix-drag="grabbed"]  picked up from the keyboard (Space): a dashed ring, no motion
+     [data-uix-drop-target]     the zone the item would land in: tinted and outlined
+     .uix-drop-line             where it would land between two items: an accent line with ends
+     [data-uix-settle]          set for a moment on drop: the item lands (settleDrop)
+   Lift and settle are transform only; the shadow steps. Reduced motion: no scale, no settle.
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  [data-uix-drag="lifted"] {
+    position: relative; z-index: var(--uix-z-raised); cursor: grabbing;
+    box-shadow: var(--uix-shadow-popover); transform: scale(1.02);
+    transition: transform var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  [data-uix-drag="grabbed"] {
+    position: relative; z-index: var(--uix-z-raised);
+    box-shadow: var(--uix-shadow-popover); outline: 2px dashed var(--uix-ring); outline-offset: 2px;
+  }
+
+  [data-uix-drop-target] {
+    background-color: color-mix(in srgb, var(--uix-accent) 8%, transparent);
+    outline: 2px dashed var(--uix-ring); outline-offset: -2px;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+
+  /* zero tall where it stands (a flex gap around it opens the room); the line is drawn across it */
+  .uix-drop-line { position: relative; display: block; block-size: 0; pointer-events: none; }
+  .uix-drop-line::before {
+    content: ""; position: absolute; inset-inline: var(--uix-space-1); inset-block-start: calc(var(--uix-space-1) * -.25);
+    block-size: calc(var(--uix-space-1) * .5); border-radius: var(--uix-radius-pill); background: var(--uix-accent);
+  }
+  .uix-drop-line::after {
+    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--uix-space-2) * -.5);
+    inline-size: var(--uix-space-2); block-size: var(--uix-space-2); border-radius: var(--uix-radius-pill);
+    border: 2px solid var(--uix-accent); background: var(--uix-surface);
+  }
+
+  @keyframes uix-drag-settle { from { transform: scale(1.02); } }
+  [data-uix-settle] { animation: uix-drag-settle var(--uix-dur) var(--uix-ease-out); }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-uix-drag="lifted"] { transform: none; }
+    [data-uix-settle] { animation: none; }
+  }
+  @media (forced-colors: active) {
+    /* the dashes are what tells a picked-up item from a focused one: keep them */
+    [data-uix-drag="lifted"] { outline: 2px solid Highlight; }
+    [data-uix-drag="grabbed"] { outline: 2px dashed Highlight; }
+    [data-uix-drop-target] { outline-color: Highlight; }
+    .uix-drop-line::before, .uix-drop-line::after { forced-color-adjust: none; }
+    .uix-drop-line::before { background: Highlight; }
+    .uix-drop-line::after { border-color: Highlight; background: Canvas; }
+  }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rules */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] [data-uix-drag="lifted"] { transform: none; }
+    :root[data-motion="reduce"] [data-uix-settle] { animation: none; }
+  }
+}

package/styles/components/drawer.css

@@ -5,18 +5,19 @@
     border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
     background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
     transform: translateX(100%);
-    transition: transform var(--uix-dur-slow) var(--uix-ease-out),
-                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* the closed state's durations are the exit's (--uix-dur-exit-slow); [open] carries the enter */
+    transition: transform var(--uix-dur-exit-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
     /* Author display values for both states required for the slide-in (see peek.css). Closed = none. */
     display: none;
   }
-  .uix-drawer[open] { transform: none; display: flex; flex-direction: column; }
+  .uix-drawer[open] { transform: none; display: flex; flex-direction: column; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-drawer[open] { transform: translateX(100%); } }
   .uix-drawer::backdrop {
     background: var(--uix-scrim); opacity: 0;
-    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    transition: opacity var(--uix-dur-exit-slow) var(--uix-ease-out), overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
   }
-  .uix-drawer[open]::backdrop { opacity: 1; }
+  .uix-drawer[open]::backdrop { opacity: 1; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-drawer[open]::backdrop { opacity: 0; } }
   /* side="start" — the phone navigation drawer, from the left edge (HAR-1351) */
   .uix-drawer--start { margin: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--uix-border); transform: translateX(-100%); }

package/styles/components/kanban.css

@@ -4,10 +4,19 @@
   .uix-kanban__col { flex: 0 0 260px; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); display: flex; flex-direction: column; max-height: 460px; }
   .uix-kanban__head { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-3) var(--uix-space-4); font-weight: 600; font-size: var(--uix-text-meta); }
   .uix-kanban__count { margin-left: auto; color: var(--uix-text-muted); font-weight: 500; }
-  .uix-kanban__body { padding: 0 var(--uix-space-3) var(--uix-space-3); display: flex; flex-direction: column; gap: var(--uix-space-2); overflow-y: auto; }
+  /* a little room on top: the scrolling body would clip a lifted or picked-up card's edge */
+  .uix-kanban__body { padding: var(--uix-space-1) var(--uix-space-3) var(--uix-space-3); display: flex; flex-direction: column; gap: var(--uix-space-2); overflow-y: auto; }
   .uix-kanban__card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-3); box-shadow: var(--uix-shadow-sm); cursor: grab; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
   @media (hover: hover) and (pointer: fine) { .uix-kanban__card:hover { box-shadow: var(--uix-shadow-popover); transform: translateY(calc(-1 * var(--uix-lift))); } }
   .uix-kanban__card:active { cursor: grabbing; }
+  /* dragged (drag.css, HAR-2590): the lift wins over the hover rise while the pointer is on it */
+  .uix-kanban__card[data-uix-drag="lifted"] { transform: scale(1.02); box-shadow: var(--uix-shadow-popover); }
+  @media (prefers-reduced-motion: reduce) { .uix-kanban__card[data-uix-drag="lifted"] { transform: none; } }
   .uix-kanban__card-title { font-weight: 500; font-size: var(--uix-text-body); margin-bottom: var(--uix-space-2); }
   .uix-kanban__card-meta { display: flex; align-items: center; gap: var(--uix-space-2); }
 }
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same rule */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) { :root[data-motion="reduce"] .uix-kanban__card[data-uix-drag="lifted"] { transform: none; } }
+}

package/styles/components/kbd.css

@@ -12,3 +12,28 @@
   .uix-kbd-combo { display: inline-flex; align-items: center; }
   .uix-kbd-combo__keys { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
 }
+
+/* Shortcut hints are for a keyboard. On a device with no hover and a coarse pointer (a touch
+   phone or tablet) the kit's decorative key caps go: the Sidebar search row's keys, the keys of a
+   Menu, CommandPalette or Tooltip row, SearchSuggest's trailing key, and a Button's hint bubble
+   (a tap fires mouseenter, which opened it). A keyboard-and-mouse window of any width keeps them.
+   Nothing a screen reader hears changes: what goes is already aria-hidden (each KbdCombo says its
+   keys in a visually-hidden span, which stays), a key a product put in a Menu or CommandItem
+   shortcut slot is only clipped from view, and `aria-keyshortcuts` and descriptions stay. Each
+   selector out-specifies the rule that lays the part out, so the order the sheets load in does
+   not matter. */
+@layer uix.components {
+  @media (hover: none) and (pointer: coarse) {
+    .uix-sidebar__search .uix-sidebar__search-keys,
+    :is(.uix-menu__shortcut, .uix-cmdk__shortcut, .uix-tooltip__shortcut) .uix-kbd-combo__keys,
+    .uix-search-suggest__trail > .uix-kbd,
+    .uix-tooltip__bubble.uix-tooltip__bubble--hint,
+    .uix-tooltip__bubble:has(> .uix-tooltip__shortcut:only-child) { display: none; }
+    :is(.uix-menu__shortcut, .uix-cmdk__item) > kbd.uix-kbd {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+    /* no gap left where the keys were */
+    .uix-menu__item .uix-menu__shortcut { padding-left: 0; }
+    .uix-tooltip__bubble .uix-tooltip__shortcut { margin-inline-start: 0; }
+  }
+}

package/styles/components/list-motion.css

@@ -0,0 +1,27 @@
+/* uix list motion — items arrive, leave and move visibly (HAR-2586, motion standard §2.5).
+   React's MotionList marks its children: [data-uix-entering] rises 8 px and fades in (never on
+   the first render); [data-uix-exiting] fades out in place, and only then is it removed, so the
+   items after it glide up into the gap ([data-uix-moving]: a FLIP transform, never a height).
+   Reduced motion keeps the fades and drops the rise and the glide. Depends only on --uix-*
+   tokens. */
+@layer uix.components {
+  @keyframes uix-list-enter { from { opacity: 0; transform: translateY(var(--uix-space-2)); } }
+  @keyframes uix-list-exit { to { opacity: 0; transform: scale(.98); } }
+  @keyframes uix-list-fade-out { to { opacity: 0; } }
+  .uix-motion-list > [data-uix-entering] { animation: uix-list-enter var(--uix-dur) var(--uix-ease-out); }
+  .uix-motion-list > [data-uix-exiting] { animation: uix-list-exit var(--uix-dur-exit) var(--uix-ease-out) forwards; pointer-events: none; }
+  .uix-motion-list > [data-uix-moving] { transition: transform var(--uix-dur-slow) var(--uix-ease-in-out); }
+  @media (prefers-reduced-motion: reduce) {
+    /* !important: the kit's reduced-motion policy ends keyframes at once; the fades are the signal */
+    .uix-motion-list > [data-uix-entering] { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) !important; }
+    .uix-motion-list > [data-uix-exiting] { animation: uix-list-fade-out var(--uix-dur-exit) var(--uix-ease-out) forwards !important; }
+  }
+}
+
+/* the in-app reduced-motion preference (HAR-1372, <html data-motion="reduce">): the same fades */
+@layer uix.components {
+  @media (prefers-reduced-motion: no-preference) {
+    :root[data-motion="reduce"] .uix-motion-list > [data-uix-entering] { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) !important; }
+    :root[data-motion="reduce"] .uix-motion-list > [data-uix-exiting] { animation: uix-list-fade-out var(--uix-dur-exit) var(--uix-ease-out) forwards !important; }
+  }
+}

package/styles/components/modal.css

@@ -5,20 +5,21 @@
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
     background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay);
     opacity: 0; transform: translateY(8px) scale(.98);
-    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), transform var(--uix-dur-slow) var(--uix-ease-out),
-                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* the closed state's durations are the exit's: --uix-dur-exit-slow, faster than the enter, ease-out */
+    transition: opacity var(--uix-dur-exit-slow) var(--uix-ease-out), transform var(--uix-dur-exit-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
     /* Author display values for both states required for the fade-in to animate: the allow-discrete
        `display` transition only engages with author values, which also lets @starting-style fire.
        With only the UA dialog display, the modal stays at opacity:0. Closed = none; open = block. */
     display: none;
   }
-  .uix-dialog[open] { opacity: 1; transform: none; display: block; }
+  .uix-dialog[open] { opacity: 1; transform: none; display: block; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
   .uix-dialog::backdrop {
     background: var(--uix-scrim); opacity: 0;
-    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    transition: opacity var(--uix-dur-exit-slow) var(--uix-ease-out), overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
   }
-  .uix-dialog[open]::backdrop { opacity: 1; }
+  .uix-dialog[open]::backdrop { opacity: 1; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
 
   .uix-dialog__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }

package/styles/components/peek.css

@@ -6,21 +6,22 @@
     border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
     background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
     transform: translateX(100%);
-    transition: transform var(--uix-dur-slow) var(--uix-ease-out),
-                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* the closed state's durations are the exit's (--uix-dur-exit-slow); [open] carries the enter */
+    transition: transform var(--uix-dur-exit-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
     /* Author display values for BOTH states are required for the slide-in to animate: the
        allow-discrete `display` transition only engages with author values, and that gating also
        lets the @starting-style entrance fire. With only the UA dialog display, the panel stays
        parked at translateX(100%). Closed = none; open = flex. */
     display: none;
   }
-  .uix-peek[open] { transform: none; display: flex; flex-direction: column; }
+  .uix-peek[open] { transform: none; display: flex; flex-direction: column; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-peek[open] { transform: translateX(100%); } }
   .uix-peek::backdrop {
     background: var(--uix-scrim); opacity: 0;
-    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    transition: opacity var(--uix-dur-exit-slow) var(--uix-ease-out), overlay var(--uix-dur-exit-slow) allow-discrete, display var(--uix-dur-exit-slow) allow-discrete;
   }
-  .uix-peek[open]::backdrop { opacity: 1; }
+  .uix-peek[open]::backdrop { opacity: 1; transition-duration: var(--uix-dur-slow); }
   @starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
 
   .uix-peek__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }

package/styles/components/popover.css

@@ -1,18 +1,18 @@
 /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style.
-   Enter/exit: fade + --uix-lift slide, always away from the anchor (the React Popover sets
-   data-placement, and data-uix-placing holds the first frame until it is placed). */
+   Enter: fade + scale(.95 → 1) growing out of the trigger — useAnchoredPosition writes the anchor
+   point as --uix-anchor-origin — at --uix-dur-fast. Exit: the same, back in, at --uix-dur-exit-fast
+   (faster than the enter, still ease-out). data-uix-placing holds the first frame until it is placed;
+   a popover opened from the keyboard carries [data-uix-key-opened] and does not animate (motion.css). */
 @layer uix.components {
   .uix-popover { margin: 0; padding: var(--uix-space-2); background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); color: var(--uix-text); }
   [popover].uix-popover {
-    --popover-from: translateY(calc(-1 * var(--uix-lift)));
-    opacity: 0; transform: var(--popover-from);
-    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
-                overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
+    --popover-from: scale(.95);
+    opacity: 0; transform: var(--popover-from); transform-origin: var(--uix-anchor-origin, top left);
+    /* the closed state's durations are the exit's */
+    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-popover[data-placement^="top"] { --popover-from: translateY(var(--uix-lift)); }
-  [popover].uix-popover[data-placement^="left"] { --popover-from: translateX(var(--uix-lift)); }
-  [popover].uix-popover[data-placement^="right"] { --popover-from: translateX(calc(-1 * var(--uix-lift))); }
-  [popover].uix-popover:popover-open { opacity: 1; transform: none; }
+  [popover].uix-popover:popover-open { opacity: 1; transform: none; transition-duration: var(--uix-dur-fast); }
   /* A closed popover is display:none by the UA stylesheet only, so a component that sets its
      own display (.uix-popconfirm, .uix-filter-popover: grid) stayed laid out while closed: an
      invisible fixed box at the viewport's top-left that took clicks (HAR-2029). The display

package/styles/components/relationship-graph.css

@@ -9,8 +9,11 @@
   /* Node fills must be opaque: edges run to node centres, so a translucent tint lets them strike through the label. */
   .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:color-mix(in srgb, var(--uix-accent) 16%, var(--uix-surface)); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:color-mix(in srgb, var(--uix-danger) 20%, var(--uix-surface)); stroke:var(--uix-danger); stroke-dasharray:4 2; }
   .uix-relationship-graph__node:focus-visible rect { stroke:var(--uix-ring); stroke-width:4; }
-  .uix-relationship-graph__legend { display:flex; gap:var(--uix-space-4); flex-wrap:wrap; margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
-  .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); vertical-align:middle; }
+  /* One row per item, symbol and words centred on each other (operator review 2026-10-23: the dashed
+     samples and swatches sat off the text's middle). Items wrap whole on a narrow screen. */
+  .uix-relationship-graph__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2) var(--uix-space-4); margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); line-height:1.4; }
+  .uix-relationship-graph__legend li { display:inline-flex; align-items:center; gap:var(--uix-space-2); min-width:0; }
+  .uix-relationship-graph__legend-mark { flex:none; box-sizing:border-box; width:.8rem; height:.8rem; border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); }
   /* TENSOR RX-125 (UIX-14): an edge whose type is in the legend draws that type's colour. */
   .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); }
@@ -36,6 +39,11 @@
   .uix-relationship-graph--layered .uix-relationship-graph__toolbar button:disabled { opacity:.5; cursor:not-allowed; }
   .uix-relationship-graph__viewport { position:relative; height:var(--uix-relationship-graph-height, 22rem); overflow:hidden; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-bg-subtle); cursor:grab; touch-action:pan-y; }
   .uix-relationship-graph__viewport:active { cursor:grabbing; }
+  /* The map is a pan surface: a press starts a pan, never a text selection or a native drag of the
+     words (operator review 2026-10-23: a ghost of the labels followed the pointer). The list below
+     stays selectable; screen readers read the names as before. */
+  .uix-relationship-graph__viewport { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
+  .uix-relationship-graph__viewport :is(img, svg, a) { -webkit-user-drag:none; }
   .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; }
@@ -43,12 +51,22 @@
      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; }
+  /* Edge labels: drawn after every line, each on a chip of the map's surface, in the kit's small
+     text at >= 4.5:1 on the chip; a tone is the chip's border, never the words' colour. */
+  /* zoomed out, a label keeps its on-screen size: scaled by 1 / zoom about its own centre (React
+     sets --uix-graph-label-scale on the stage and places the labels at that size) */
+  .uix-relationship-graph__edge-labels { pointer-events:none; }
+  .uix-relationship-graph__edge-label { transform-box:fill-box; transform-origin:center; transform:scale(var(--uix-graph-label-scale, 1)); }
+  .uix-relationship-graph__edge-label rect { fill:var(--uix-bg-subtle); stroke:var(--uix-border-strong); stroke-width:1px; }
+  .uix-relationship-graph__edge-label[data-tone] rect { stroke:var(--uix-graph-tone); }
+  .uix-relationship-graph__edge-label text { fill:var(--uix-text-muted); font-family:var(--uix-font-sans); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__edge-label[data-active] rect { stroke:var(--uix-accent); }
+  .uix-relationship-graph__edge-label[data-active] text { fill:var(--uix-text); }
+  .uix-relationship-graph__edge-label[data-dimmed] { opacity:.35; }
   .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%, 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); }
   .uix-relationship-graph__link[data-conflicted] path { stroke:var(--uix-danger); }
   .uix-relationship-graph__link[data-dimmed] { opacity:.35; }
   .uix-relationship-graph__column { position:absolute; top:var(--uix-space-4); overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.04em; pointer-events:none; }
@@ -74,8 +92,11 @@
   /* The hint, the zoom level and the cluster share one row along the map's bottom edge (TENSOR
      HAR-2512: positioned apart, "Zoom 75 %" was drawn over the hint on a 500–600 px map). The hint
      takes only the room the controls leave: it ellipsises, then hides; then the zoom level gives
-     way; the cluster always stays. The row lets the pointer through to the map. */
-  .uix-relationship-graph__footer { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); left:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
+     way; the cluster always stays. The row lets the pointer through to the map.
+     The row is a band across the map's whole bottom edge, on the map's own background with a rule
+     above it: the map ends at the rule, so no node is ever half under a pill (PR #166 review:
+     "Application 83" and "Rack 27" were). Fit and the first view leave its height free. */
+  .uix-relationship-graph__footer { position:absolute; right:0; bottom:0; left:0; z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); padding:var(--uix-space-2) var(--uix-space-3); border-top:1px solid var(--uix-border); background:var(--uix-bg-subtle); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
   .uix-relationship-graph__controls { display:flex; flex:0 1 auto; align-items:center; gap:var(--uix-space-2); min-width:0; pointer-events:auto; }
   .uix-relationship-graph__control-cluster { display:flex; flex:none; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
   .uix-relationship-graph__control { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-text-muted); cursor:pointer; }
@@ -109,9 +130,9 @@
   .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; } }
+  .uix-relationship-graph__legend li[data-tone] .uix-relationship-graph__legend-mark { border-color:var(--uix-graph-tone); }
+  .uix-relationship-graph__legend li:is([data-shape="edge"],[data-variant]):not([data-shape="node"]) .uix-relationship-graph__legend-mark { width:1.5rem; height:2px; border-width:2px 0 0; border-radius:0; }
+  .uix-relationship-graph__legend li[data-variant="dashed"] .uix-relationship-graph__legend-mark { border-top-style:dashed; }
+  .uix-relationship-graph__legend li[data-shape="node"] .uix-relationship-graph__legend-mark { width:1rem; height:.75rem; border-width:1px 1px 1px 4px; border-radius:var(--uix-radius-xs); }
+  @media (forced-colors: active) { .uix-relationship-graph__edge-label rect { fill:Canvas; stroke:CanvasText; } .uix-relationship-graph__edge-label text { fill:CanvasText; } .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/search-suggest.css

@@ -34,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);
@@ -109,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

@@ -27,4 +27,25 @@
      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

@@ -66,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/states.css

@@ -27,3 +27,48 @@
 @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; }
+  }
+}