@tensor_1/tokens 2.47.0 → 2.49.0

package/styles/components/diff-viewer.css

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

package/styles/components/display-preferences.css

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

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/editorial-home.css

@@ -166,8 +166,17 @@
   .uix-event-date { text-align: center; }
   .uix-event-date__month { display: block; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); text-transform: uppercase; }
   .uix-event-date__day { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
-  .uix-event-row__title { margin: 0; font-weight: 600; }
-  .uix-event-row__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  .uix-event-row__title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
+  .uix-event-row__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); overflow-wrap: anywhere; }
+  /* HAR-1370: weekday, year and time in the tile (it widens to its longest line, never under
+     42 px), and a 4:3 thumbnail at the row's end */
+  .uix-event-row:has(.uix-event-date__weekday, .uix-event-date__year, .uix-event-date__time) { grid-template-columns: minmax(42px, max-content) minmax(0, 1fr); }
+  .uix-event-row--media, .uix-event-row--media:has(.uix-event-date__weekday, .uix-event-date__year, .uix-event-date__time) { grid-template-columns: minmax(42px, max-content) minmax(0, 1fr) auto; }
+  .uix-event-date__weekday, .uix-event-date__year, .uix-event-date__time { display: block; color: var(--uix-text-hushed); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; white-space: nowrap; }
+  .uix-event-date__weekday { text-transform: uppercase; }
+  .uix-event-date__time { margin-top: var(--uix-space-1); color: var(--uix-text); font-weight: 600; }
+  .uix-event-row__media { width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--uix-radius-md); background: var(--uix-bg-subtle); }
+  .uix-event-row__media > :is(img, picture, video, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
 
   .uix-status-row { min-height: 48px; display: flex; align-items: center; gap: var(--uix-space-3); border-bottom: 1px solid var(--uix-border); }
   .uix-status-row:last-child { border-bottom: 0; }
@@ -218,5 +227,18 @@
 
     .uix-stat-line { grid-template-columns: 1fr; }
     .uix-stat-line__item { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--uix-border); }
+
+    /* on a phone the thumbnail goes under the text, so the title keeps the row's width */
+    .uix-event-row--media, .uix-event-row--media:has(.uix-event-date__weekday, .uix-event-date__year, .uix-event-date__time) { grid-template-columns: minmax(42px, max-content) minmax(0, 1fr); }
+    .uix-event-row--media > .uix-event-date { grid-row: span 2; align-self: start; }
+    .uix-event-row__media { grid-column: 2; width: min(8rem, 100%); }
   }
 }
+
+/* Compact section title (HAR-1815): the in-card section preset, 15 px / 1.3 / 600, for a section
+   head inside a card or a side panel. .uix-section-title--compact for a title on its own. */
+@layer uix.components {
+  .uix-section-head--compact { min-height: 0; margin-bottom: var(--uix-space-2); }
+  :is(.uix-section-head--compact .uix-section-title, .uix-section-title--compact),
+  .uix-section-head--compact .uix-section-head__title-row { font-family: var(--uix-font-sans); font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); font-weight: 600; letter-spacing: normal; }
+}

package/styles/components/flow.css

@@ -225,3 +225,8 @@
     .uix-flow--linear .uix-flow__connector { flex-basis: 38px; }
   }
 }
+
+/* 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-node--running .uix-node__icon svg { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+}

package/styles/components/heartbeat.css

@@ -15,3 +15,11 @@
   }
   .uix-live { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text-hushed); }
 }
+
+/* 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-heartbeat__ping { display: none; }
+    :root[data-motion="reduce"] .uix-heartbeat:not(.uix-heartbeat--idle) .uix-heartbeat__dot { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+}

package/styles/components/icon.css

@@ -20,3 +20,17 @@
   .uix-icon-grid__item { display: grid; justify-items: center; gap: var(--uix-space-2); padding: var(--uix-space-3) var(--uix-space-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface); color: var(--uix-text); }
   .uix-icon-grid__item code { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow-wrap: break-word; text-align: center; }
 }
+
+/* Glyphs for plain CSS (HAR-1576): an icon where markup cannot hold an <svg> (generated content, a
+   CMS field), drawn from the icon set through a mask in currentColor, so it takes the text colour and
+   the theme. <span class="uix-glyph uix-glyph--x" aria-hidden="true"></span>. Never a text character:
+   a typed × or › has the font's shape and baseline, not the icon set's.
+   scripts/glyph-mask.mjs prints each url; src/glyph-masks.test.mjs checks them against the glyphs. */
+@layer uix.components {
+  .uix-glyph { display: inline-block; flex: none; width: var(--uix-icon-sm); height: var(--uix-icon-sm); vertical-align: middle; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
+  .uix-glyph--chevron-down { --glyph: 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"); }
+  .uix-glyph--arrow-up { --glyph: 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='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
+  .uix-glyph--arrow-down { --glyph: 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='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
+  .uix-glyph--arrow-up-down { --glyph: 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='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E"); }
+  .uix-glyph--x { --glyph: 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='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
+}

package/styles/components/inline-edit.css

@@ -6,14 +6,17 @@
   /* A value that cannot be edited is plain text on the same line box as its editable neighbours. */
   .uix-inline-edit--readonly { align-items: center; min-height: 28px; }
   /* The value IS the button: it looks like text until it is hovered or focused. The negative
-     inline margin keeps the text on the column it had as plain text. */
+     inline margin keeps the text on the column it had as plain text. It sits on the wrapper, not
+     the button: an inline-flex box sizes itself to its item's width MINUS the item's negative
+     margins, so on the button it squeezed every value by 16 px and wrapped "Amra / Kovač" (HAR-1833). */
+  .uix-inline-edit:has(> .uix-inline-edit__view) { margin-inline: calc(-1 * var(--uix-space-2)); max-width: calc(100% + 2 * var(--uix-space-2)); }
   .uix-inline-edit__view {
     display: inline-flex; align-items: center; gap: var(--uix-space-2); max-width: 100%; min-width: 0; min-height: 28px;
-    margin: 0 calc(-1 * var(--uix-space-2)); padding: var(--uix-space-1) var(--uix-space-2);
+    margin: 0; padding: var(--uix-space-1) var(--uix-space-2);
     border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out);
   }
-  .uix-inline-edit__view:hover { background: var(--uix-bg-hover); }
+  @media (hover: hover) and (pointer: fine) { .uix-inline-edit__view:hover { background: var(--uix-bg-hover); } }
   .uix-inline-edit__view:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
   .uix-inline-edit__value { min-width: 0; overflow-wrap: anywhere; }
   .uix-inline-edit__placeholder { color: var(--uix-text-muted); }
@@ -26,4 +29,17 @@
   .uix-inline-edit__control > * { width: 100%; }
   .uix-inline-edit__actions { display: inline-flex; flex: none; gap: var(--uix-space-2); }
   .uix-inline-edit__error { flex-basis: 100%; }
+  /* trigger="icon" (HAR-1833): the value stays text; a pencil button after it is named only
+     "Edit {label}". 28 px, the same row height as the value button. */
+  .uix-inline-edit--icon-trigger { align-items: center; gap: var(--uix-space-1); min-height: 28px; }
+  .uix-inline-edit__trigger {
+    display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
+    border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  @media (hover: hover) and (pointer: fine) { .uix-inline-edit__trigger:hover { background: var(--uix-bg-hover); color: var(--uix-text); } }
+  .uix-inline-edit__trigger:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; color: var(--uix-text); }
+  /* readOnlyReason (HAR-1833): why it cannot be edited, quieter, under the value */
+  .uix-inline-edit--reason { flex-direction: column; align-items: flex-start; gap: var(--uix-space-1); }
+  .uix-inline-edit__reason { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow-wrap: anywhere; }
 }

package/styles/components/input.css

@@ -30,6 +30,8 @@
   .uix-input[aria-invalid="true"] { border-color: var(--uix-danger); }
   .uix-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
   .uix-input--sm { height: 28px; font-size: var(--uix-text-meta); }
+  /* lg: 44 px, the touch-target floor of a public page, as tall as .uix-btn--lg (HAR-1812) */
+  .uix-input--lg { height: 44px; padding: 0 var(--uix-space-4); font-size: var(--uix-text-h3); }
 
   /* leading/trailing adornments */
   .uix-input-group { position: relative; display: flex; align-items: center; }
@@ -45,4 +47,64 @@
   .uix-input[data-warning]:not([aria-invalid="true"]):focus { box-shadow: 0 0 0 3px var(--uix-warning-bg); }
   .uix-input-group--has-trailing .uix-input { padding-right: 38px; }
   .uix-input-group__icon--trailing { left: auto; right: 10px; }
+  /* lg: the icons move in with the field's wider padding, and the text clears them */
+  .uix-input-group:has(> .uix-input--lg) .uix-input-group__icon { left: 14px; }
+  .uix-input-group:has(> .uix-input--lg) .uix-input-group__icon--trailing { left: auto; right: 14px; }
+  .uix-input-group--has-leading > .uix-input--lg { padding-left: 44px; }
+  .uix-input-group--has-trailing > .uix-input--lg { padding-right: 44px; }
+
+  /* trailing action (HAR-1376): a real button inside the field's end (a reveal toggle, a clear),
+     square, as tall as the field less a 4 px inset: 28 px at md, 36 px at lg, 24 px at sm */
+  .uix-input-group__action {
+    position: absolute; top: 4px; bottom: 4px; right: 4px; aspect-ratio: 1; display: inline-grid; place-items: center;
+    padding: 0; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted);
+    font: inherit; line-height: 0; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-input-group__action svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); pointer-events: none; }
+  @media (hover: hover) { .uix-input-group__action:hover:not(:disabled) { background: var(--uix-bg-hover); color: var(--uix-text); } }
+  .uix-input-group__action:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 0; }
+  .uix-input-group__action[aria-pressed="true"] { color: var(--uix-text); }
+  .uix-input-group__action:disabled { cursor: not-allowed; opacity: .55; }
+  .uix-input-group:has(> .uix-input--sm) > .uix-input-group__action { top: 2px; bottom: 2px; right: 2px; }
+  .uix-input-group--has-action > .uix-input { padding-right: 40px; }
+  .uix-input-group--has-action > .uix-input--sm { padding-right: 32px; }
+  .uix-input-group--has-action > .uix-input--lg { padding-right: 48px; }
+  /* at lg (a public page) the 36 px button gets a 44 px target without a bigger look */
+  .uix-input-group:has(> .uix-input--lg) > .uix-input-group__action::before { content: ""; position: absolute; inset: -4px; }
+
+  /* OtpInput (HAR-1376): ONE native input (screen readers, autofill and paste see one field)
+     laid transparently over cells that draw its characters; the cell at the caret shows the ring */
+  /* As wide as its cells at 44 px (React sets --uix-otp-cells and --uix-otp-seps), never wider than
+     its container: the cells give way first, down to 24 px each. */
+  .uix-otp {
+    --uix-otp-cells: 6; --uix-otp-seps: 0;
+    position: relative; display: flex; gap: var(--uix-space-2); width: 100%;
+    direction: ltr; /* a code reads left to right, also in an RTL page */
+    max-width: calc(var(--uix-otp-cells) * 44px + (var(--uix-otp-cells) + var(--uix-otp-seps) - 1) * var(--uix-space-2) + var(--uix-otp-seps) * 8px);
+  }
+  .uix-otp__input {
+    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none;
+    background: transparent; color: transparent; caret-color: transparent; font: inherit; letter-spacing: 0;
+    opacity: 0; cursor: text;
+  }
+  .uix-otp__input:disabled { cursor: not-allowed; }
+  .uix-otp__cell {
+    display: grid; place-items: center; flex: 1 1 0; min-width: 20px; height: 44px;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
+    color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; font-variant-numeric: tabular-nums;
+    /* no transition: the active cell moves on every keystroke, and typing gets no animation */
+  }
+  .uix-otp__cell[data-active] { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  /* the caret of the cell being typed into: a static bar (typing is frequent, so it does not blink) */
+  .uix-otp__cell[data-active]:empty::after { content: ""; width: 1px; height: 1.2em; background: var(--uix-text); }
+  @media (hover: hover) { .uix-otp:hover:not(:has(> .uix-otp__input:disabled)) > .uix-otp__cell:not([data-active]) { border-color: var(--uix-border-strong); } }
+  .uix-otp:has(> .uix-otp__input[aria-invalid="true"]) > .uix-otp__cell { border-color: var(--uix-danger); }
+  .uix-otp:has(> .uix-otp__input[aria-invalid="true"]) > .uix-otp__cell[data-active] { box-shadow: 0 0 0 3px var(--uix-danger-bg); }
+  .uix-otp:has(> .uix-otp__input:disabled) > .uix-otp__cell { opacity: .55; background: var(--uix-bg-subtle); }
+  .uix-otp__sep { align-self: center; flex: none; width: 8px; height: 2px; border-radius: var(--uix-radius-pill); background: var(--uix-border-strong); }
+  @media (forced-colors: active) {
+    .uix-otp__cell[data-active] { outline: 2px solid Highlight; outline-offset: 1px; }
+    .uix-otp__cell[data-active]:empty::after { background: CanvasText; }
+  }
 }

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/lightbox.css

@@ -40,12 +40,25 @@
   .uix-lightbox__nav--prev { left: var(--uix-space-3); }
   .uix-lightbox__nav--next { right: var(--uix-space-3); }
   .uix-lightbox__close { top: var(--uix-space-3); right: var(--uix-space-3); }
+  /* HAR-1826: the consumer's actions, then Close, top right; it wraps under itself on a phone. */
+  .uix-lightbox__toolbar { position: absolute; top: var(--uix-space-3); right: var(--uix-space-3); left: var(--uix-space-3); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--uix-space-2); pointer-events: none; }
+  .uix-lightbox__toolbar > * { pointer-events: auto; }
+  .uix-lightbox__toolbar .uix-lightbox__close { position: static; flex: none; }
+  /* With actions the toolbar is wider than Close alone: the picture starts below it. */
+  .uix-lightbox--gallery[data-actions] { padding-top: calc(44px + 2 * var(--uix-space-3)); }
+  .uix-lightbox--gallery[data-actions] :is(.uix-lightbox__stage, .uix-lightbox__media) { max-height: calc(100dvh - 8rem - 44px - var(--uix-space-3)); }
+  /* Laid over the picture's own box (measured by the React adapter); it draws, so no swipe. */
+  .uix-lightbox__stage:has(.uix-lightbox__overlay) { position: relative; }
+  .uix-lightbox__overlay { position: absolute; touch-action: none; }
   .uix-lightbox__nav:disabled { opacity: .4; cursor: default; }
   .uix-lightbox__nav:not(:disabled):hover, .uix-lightbox__close:hover { background: var(--uix-bg-hover); }
   .uix-lightbox__nav:focus-visible, .uix-lightbox__close:focus-visible, .uix-lightbox__tool:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   /* phones: the image takes the width; previous/next sit at the bottom corners, clear of it */
   @media (max-width: 40rem) {
     .uix-lightbox--gallery .uix-lightbox__media { width: calc(100vw - 2 * var(--uix-space-4)); max-height: calc(100dvh - 10rem); }
+    /* the actions may wrap to a second row here */
+    .uix-lightbox--gallery[data-actions] { padding-top: calc(2 * 44px + 3 * var(--uix-space-3)); }
+    .uix-lightbox--gallery[data-actions] :is(.uix-lightbox__stage, .uix-lightbox__media) { max-height: calc(100dvh - 10rem - 2 * 44px - 2 * var(--uix-space-3)); }
     .uix-lightbox__nav { top: auto; bottom: var(--uix-space-3); transform: none; }
     .uix-lightbox__figure { margin-bottom: 3.5rem; }
   }

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/list.css

@@ -9,5 +9,7 @@
   .uix-list--roving > .uix-list__item[tabindex] { cursor: default; }
   .uix-list__title { display: block; font-weight: 500; }
   .uix-list__meta { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  /* the kit's one title -> secondary rhythm: --uix-space-1 under the title (HAR-1577) */
+  .uix-list__title + .uix-list__meta { margin-top: var(--uix-space-1); }
   .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }
 }

package/styles/components/match-review.css

@@ -7,5 +7,45 @@
   .uix-match-review__table { min-width:54rem; } .uix-match-review__table tr[data-status="resolved"] { background:var(--uix-success-bg); }
   .uix-match-review__confidence { font-variant-numeric:tabular-nums; font-weight:600; }
   .uix-match-review__actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
+  /* fieldMode="adopt" (HAR-1369): per candidate, the record now against the candidate, field by field */
+  .uix-match-review__candidate { display:grid; gap:var(--uix-space-3); padding:var(--uix-space-4); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
+  .uix-match-review__candidate-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2) var(--uix-space-3); }
+  .uix-match-review__candidate-title { margin:0; min-width:0; font-size:var(--uix-text-h3); overflow-wrap:anywhere; }
+  .uix-match-review__candidate .uix-match-review__table-wrap { border-radius:var(--uix-radius-md); }
+  .uix-match-review__compare :is(tbody th, td) { padding-block:var(--uix-space-2); overflow-wrap:anywhere; }
+  .uix-match-review__compare thead th:last-child, .uix-match-review__compare td:last-child { width:1%; white-space:nowrap; text-align:center; }
+  /* row headers sit in the rows like cells: same padding, rule and height, the row's own background */
+  .uix-match-review__compare tbody th { padding-inline:var(--uix-space-4); height:var(--uix-row-h); border-bottom:1px solid var(--uix-border); background:transparent; color:var(--uix-text-muted); font-weight:500; text-align:start; vertical-align:middle; }
+  .uix-match-review__compare tr[data-differs] td:nth-child(3) { font-weight:600; }
+  .uix-match-review__compare tr[data-chosen] { background:var(--uix-row-selected-bg); }
+  .uix-match-review__adopt { width:18px; height:18px; margin:0; accent-color:var(--uix-accent); }
+  .uix-match-review__same { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  /* The disclosure is a quiet row, not a link: the kit chevron (as CollapsibleSection), muted text. */
+  .uix-match-review__provenance-summary { display:inline-flex; align-items:flex-start; gap:var(--uix-space-1); list-style:none; cursor:pointer; color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-weight:500; border-radius:var(--uix-radius-xs); }
+  .uix-match-review__provenance-summary::-webkit-details-marker { display:none; }
+  .uix-match-review__provenance-summary:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  .uix-match-review__provenance[open] .uix-collapsible__chevron { transform:rotate(180deg); }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-match-review__provenance-summary:hover, .uix-match-review__provenance-summary:hover .uix-collapsible__chevron { color:var(--uix-text); }
+  }
+  .uix-match-review__provenance-body { margin-top:var(--uix-space-2); color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-match-review__candidate-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2); }
+  /* A resolved candidate keeps only the (empty) live region here: it takes no row gap until it speaks. */
+  .uix-match-review__candidate-actions:not(:has(.uix-btn)):has(.uix-match-review__result:empty) { margin-block-start:calc(-1 * var(--uix-space-3)); }
+  .uix-match-review__result { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-match-review__result--failed { color:var(--uix-danger-text); }
+  /* A phone: each field is a block, its name and the checkbox on top, the two values under it,
+     each named by its column (data-label), so no word breaks inside itself (HAR-1369 screenshots). */
+  @media (max-width:30rem) {
+    .uix-match-review__candidate { padding:var(--uix-space-3); }
+    .uix-match-review__compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
+    .uix-match-review__compare, .uix-match-review__compare tbody { display:block; }
+    .uix-match-review__compare tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--uix-space-1) var(--uix-space-3); padding:var(--uix-space-2) var(--uix-space-3); border-bottom:1px solid var(--uix-border); }
+    .uix-match-review__compare tbody tr:last-child { border-bottom:0; }
+    .uix-match-review__compare tbody :is(th, td) { display:block; height:auto; padding:0; border:0; }
+    .uix-match-review__compare tbody td:nth-child(2), .uix-match-review__compare tbody td:nth-child(3) { grid-column:1 / -1; }
+    .uix-match-review__compare tbody td:last-child { grid-row:1; grid-column:2; width:auto; }
+    .uix-match-review__compare tbody td[data-label]::before { content:attr(data-label) ": "; color:var(--uix-text-muted); font-weight:400; }
+  }
   .uix-match-review--state { justify-items:start; padding:var(--uix-space-6); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
 }

package/styles/components/media.css

@@ -4,6 +4,8 @@
   .uix-media__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--uix-radius-md); overflow: hidden; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); display: grid; place-items: center; }
   .uix-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
   .uix-media__thumb svg { width: 28px; height: 28px; color: var(--uix-text-muted); }
-  .uix-media__name { font-weight: 600; }
-  .uix-media__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-media__name { display: block; font-weight: 600; }
+  .uix-media__meta { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  /* the kit's one title -> secondary rhythm: --uix-space-1 under the name (HAR-1577) */
+  .uix-media__name + .uix-media__meta { margin-top: var(--uix-space-1); }
 }

package/styles/components/metric-input.css

@@ -6,5 +6,7 @@
   .uix-metric-input__unit { display:flex; align-items:center; padding-inline:var(--uix-space-3); border-block:1px solid var(--uix-border-strong); background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
   .uix-metric-input__steps { display:grid; grid-template-rows:1fr 1fr; width:2.5rem; min-height:0; }
   .uix-metric-input__step { min-height:0; padding:0; border:1px solid var(--uix-border-strong); background:var(--uix-surface); color:var(--uix-text); line-height:1; } .uix-metric-input__step:first-child { border-top-right-radius:var(--uix-radius-md); } .uix-metric-input__step:last-child { border-top:0; border-bottom-right-radius:var(--uix-radius-md); }
-  .uix-metric-input__step:hover { background:var(--uix-bg-hover); } .uix-metric-input--invalid .uix-metric-input__control { color:var(--uix-danger-text); }
+  .uix-metric-input__step:hover { background:var(--uix-bg-hover); }
+  /* + and − are the icon set's Plus and Minus (HAR-1576), centred in each half */
+  .uix-metric-input__step { display:grid; place-items:center; } .uix-metric-input__step > .uix-icon { width:var(--uix-icon-sm); height:var(--uix-icon-sm); } .uix-metric-input--invalid .uix-metric-input__control { color:var(--uix-danger-text); }
 }

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); }
@@ -47,6 +48,10 @@
   .uix-confirm__body { display: grid; gap: var(--uix-space-3); }
   .uix-confirm__compensation { display: grid; gap: var(--uix-space-1); padding: var(--uix-space-3); border-radius: var(--uix-radius-sm); background: var(--uix-bg-subtle); color: var(--uix-text); font-size: var(--uix-text-meta); }
   .uix-confirm__compensation-title { font-weight: 600; }
+  /* the mismatch message (HAR-1831): a hidden copy holds its wrapped height, so it never moves the footer */
+  .uix-confirm__typed-msg { display: grid; }
+  .uix-confirm__typed-msg > * { grid-area: 1 / 1; }
+  .uix-confirm__typed-msg > [aria-hidden="true"] { visibility: hidden; }
   .uix-confirm__error { padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); background: var(--uix-danger-bg); color: var(--uix-danger-text); font-size: var(--uix-text-meta); }
   .uix-dialog__footer .uix-confirm__tertiary { margin-inline-end: auto; }
 }

package/styles/components/page-header.css

@@ -10,3 +10,15 @@
   .uix-page-header__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); margin-top: var(--uix-space-2); max-width: 70ch; }
   .uix-page-header__actions { display: flex; gap: var(--uix-space-2); align-items: center; flex-wrap: wrap; }
 }
+
+/* Display preset (HAR-1815): the staff page header TENSOR and MOTUS share. A 40 px heading-font
+   title (--uix-text-display, leading 1.05, weight 600, tight tracking), a bold hushed eyebrow, a
+   body-size hushed subtitle up to 42rem, and the actions on the titles' bottom line. */
+@layer uix.components {
+  .uix-page-header--display { align-items: flex-end; }
+  .uix-page-header--display .uix-page-header__eyebrow { color: var(--uix-text-hushed); font-weight: 700; }
+  .uix-page-header--display :is(.uix-page-header__title, .uix-page-header__title-row) { font-family: var(--uix-font-heading); font-size: var(--uix-text-display); line-height: var(--uix-leading-display); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
+  .uix-page-header--display .uix-page-header__subtitle { font-size: var(--uix-text-body); color: var(--uix-text-hushed); max-width: 42rem; }
+  /* a 40 px title is too wide for a phone: it steps down to the h2 size there */
+  @media (max-width: 40rem) { .uix-page-header--display :is(.uix-page-header__title, .uix-page-header__title-row) { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); } }
+}

package/styles/components/pagination.css

@@ -8,6 +8,8 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-pagination__btn:hover { background: var(--uix-bg-hover); }
+  /* first / previous / next are the icon set's chevrons (HAR-1576) */
+  .uix-pagination__btn > .uix-icon { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
   .uix-pagination__btn[aria-current="page"] { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
   .uix-pagination__btn:disabled, .uix-pagination__btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
   /* link pager (HAR-1357): anchors look like the buttons */