@tensor_1/tokens 2.46.0 → 2.48.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/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/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.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

@@ -47,6 +47,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 */

package/styles/components/popover.css

@@ -27,5 +27,9 @@
   .uix-popconfirm { display: grid; gap: var(--uix-space-2); width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--uix-space-4))); padding: var(--uix-space-3); }
   .uix-popconfirm__title { font-weight: 600; color: var(--uix-text); }
   .uix-popconfirm__body { display: grid; gap: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  /* content of its own, e.g. a required reason field (HAR-1831): the step takes its full width
+     so the field is not squeezed to the text's max-content */
+  .uix-popconfirm--content { width: min(20rem, calc(100vw - 2 * var(--uix-space-4))); }
+  .uix-popconfirm__content { display: grid; gap: var(--uix-space-2); min-width: 0; }
   .uix-popconfirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--uix-space-2); margin-top: var(--uix-space-1); }
 }

package/styles/components/print-layout.css

@@ -0,0 +1,177 @@
+/* uix print layout (HAR-986, HAR-1252) — React PrintLayout, PrintSignature, PrintPageBreak.
+   A document frame for the browser's own print: A4 or A5 named pages with the paper's margins,
+   a header and a footer that repeat on every page (a CSS table's header and footer groups, which
+   the browser repeats per page and which take their own room, so they never sit on the content),
+   "page / pages" in the bottom-right page margin, and black-on-white tokens inside the frame.
+
+   On screen the frame is a paper preview: the page at its true width and its print type size,
+   scaled as a whole (zoom, measured by PrintLayout) to the room it has, ink on paper in both
+   themes — what you see, and what fits on one page, is what prints.
+   Units: mm and pt are the paper's own units; they are not --uix-* scale values. */
+@layer uix.components {
+  /* ── the paper ─────────────────────────────────────────────────────────────── */
+  @page uix-print-a4 { size: A4 portrait; margin: 16mm 16mm 18mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 8pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a4-landscape { size: A4 landscape; margin: 14mm 16mm 16mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 8pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a5 { size: A5 portrait; margin: 10mm 10mm 12mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 7pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a5-landscape { size: A5 landscape; margin: 10mm 12mm 12mm; @bottom-right { content: counter(page) " / " counter(pages); font-size: 7pt; color: var(--uix-print-ink-quiet); } }
+  @page uix-print-a4-plain { size: A4 portrait; margin: 16mm 16mm 18mm; }
+  @page uix-print-a4-landscape-plain { size: A4 landscape; margin: 14mm 16mm 16mm; }
+  @page uix-print-a5-plain { size: A5 portrait; margin: 10mm 10mm 12mm; }
+  @page uix-print-a5-landscape-plain { size: A5 landscape; margin: 10mm 12mm 12mm; }
+
+  .uix-print-layout {
+    /* the page box and its margins, for the screen preview (the same as the @page rules) */
+    --print-width: 210mm; --print-height: 297mm; --print-margin: 16mm 16mm 18mm;
+    /* everything inside reads ink on paper, in both themes, on screen and on paper */
+    --uix-text: var(--uix-print-ink);
+    --uix-text-muted: var(--uix-print-ink-quiet);
+    --uix-text-hushed: var(--uix-print-ink-quiet);
+    --uix-surface: var(--uix-print-paper);
+    --uix-surface-2: var(--uix-print-paper);
+    --uix-surface-3: var(--uix-print-paper-quiet);
+    --uix-bg-app: var(--uix-print-paper);
+    --uix-bg-subtle: var(--uix-print-paper-quiet);
+    --uix-bg-hover: var(--uix-print-paper-quiet);
+    --uix-border: var(--uix-print-line);
+    --uix-border-strong: var(--uix-print-ink-quiet);
+    --uix-link: var(--uix-print-ink);
+    --uix-accent-text: var(--uix-print-ink);
+    --uix-row: var(--uix-print-paper);
+    --uix-row-alt: var(--uix-print-paper-quiet);
+    --uix-row-selected-bg: var(--uix-print-paper-quiet);
+    --uix-row-pinned-bg: var(--uix-print-paper-quiet);
+    color-scheme: light;
+    box-sizing: border-box;
+    width: var(--print-width);
+    margin-inline: auto;
+    /* the type and the rows of the paper, on screen too */
+    font-size: 10pt;
+    line-height: 1.45;
+    --uix-row-h: var(--uix-row-h-compact);
+    background: var(--uix-print-paper);
+    color: var(--uix-print-ink);
+    box-shadow: var(--uix-shadow-md);
+    border: 1px solid var(--uix-print-line);
+  }
+  /* The dark theme's tints are dark: on the paper they read as quiet paper with ink text, so a
+     pill or a callout inside the document prints in black and white instead of a dark slab. */
+  :root:where(.dark,[data-theme="dark"]) .uix-print-layout {
+    --uix-brand-muted: var(--uix-print-paper-quiet);
+    --uix-neutral-bg: var(--uix-print-paper-quiet); --uix-neutral-text: var(--uix-print-ink); --uix-neutral-border: var(--uix-print-line);
+    --uix-info-bg: var(--uix-print-paper-quiet); --uix-info-text: var(--uix-print-ink);
+    --uix-success-bg: var(--uix-print-paper-quiet); --uix-success-text: var(--uix-print-ink);
+    --uix-warning-bg: var(--uix-print-paper-quiet); --uix-warning-text: var(--uix-print-ink); --uix-warning-border: var(--uix-print-line);
+    --uix-danger-bg: var(--uix-print-paper-quiet); --uix-danger-text: var(--uix-print-danger); --uix-danger-border: var(--uix-print-danger);
+    --uix-attention-bg: var(--uix-print-paper-quiet); --uix-attention-text: var(--uix-print-ink);
+    --uix-amber-bg: var(--uix-print-paper-quiet); --uix-amber-text: var(--uix-print-ink);
+    --uix-overdue-bg: var(--uix-print-paper-quiet); --uix-overdue-text: var(--uix-print-ink);
+    --uix-sev-4-bg: var(--uix-print-paper-quiet); --uix-sev-4-text: var(--uix-print-ink);
+    --uix-sev-5-bg: var(--uix-print-paper-quiet); --uix-sev-5-text: var(--uix-print-ink);
+  }
+  .uix-print-layout[data-size="A4"][data-orientation="landscape"] { --print-width: 297mm; --print-height: 210mm; --print-margin: 14mm 16mm 16mm; }
+  .uix-print-layout[data-size="A5"] { --print-width: 148mm; --print-height: 210mm; --print-margin: 10mm 10mm 12mm; font-size: 9pt; }
+  @media screen { .uix-print-layout { zoom: var(--uix-print-preview-scale, 1); } }
+  .uix-print-layout[data-size="A5"][data-orientation="landscape"] { --print-width: 210mm; --print-height: 148mm; --print-margin: 10mm 12mm 12mm; }
+  /* The preview box: the paper's width (set inline by PrintLayout), or its container's when that
+     is narrower; the page inside is scaled to it. */
+  .uix-print-preview { box-sizing: border-box; max-inline-size: 100%; margin-inline: auto; }
+  .uix-print-preview + .uix-print-preview { margin-top: var(--uix-space-6); }
+
+  /* The page is a <table> for print's sake (a repeated thead and tfoot); on screen it is a column. */
+  .uix-print-layout__page {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--uix-space-4);
+    width: 100%;
+    min-height: var(--print-height);
+    padding: var(--print-margin);
+    border-spacing: 0;
+    font-size: inherit;
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+  /* zero specificity, so the part classes below (and the print rules) win over this reset */
+  :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: block; padding: 0; }
+  .uix-print-layout__main { flex: 1 0 auto; }
+  .uix-print-layout__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--uix-space-2) var(--uix-space-4); }
+  .uix-print-layout__header .uix-print-layout__bar { padding-bottom: var(--uix-space-3); border-bottom: 1px solid var(--uix-print-ink); }
+  .uix-print-layout__body { display: flex; flex-direction: column; gap: var(--uix-space-4); min-width: 0; }
+  .uix-print-layout__footer { color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+  .uix-print-layout__footer .uix-print-layout__bar { padding-top: var(--uix-space-2); border-top: 1px solid var(--uix-print-line); }
+
+  /* one page and no more: the preview is one page tall; content that does not fit is outlined */
+  .uix-print-layout[data-single-page] .uix-print-layout__page { height: var(--print-height); overflow: hidden; }
+  .uix-print-layout[data-overflowing] { outline: 2px dashed var(--uix-danger); outline-offset: 2px; }
+
+  /* ── signature ─────────────────────────────────────────────────────────────── */
+  .uix-print-signature { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--uix-space-4) var(--uix-space-6); margin-top: var(--uix-space-6); break-inside: avoid; }
+  .uix-print-signature__place { margin-right: auto; }
+  .uix-print-signature__field { display: grid; gap: var(--uix-space-1); width: min(70mm, 100%); text-align: center; }
+  .uix-print-signature__line { height: 14mm; border-bottom: 1px solid var(--uix-print-ink); }
+  .uix-print-signature__caption { color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+  .uix-print-signature__name { font-weight: 600; }
+  .uix-print-signature__stamp { display: grid; place-items: center; width: 34mm; height: 34mm; border: 1px dashed var(--uix-print-line); border-radius: 50%; color: var(--uix-print-ink-quiet); font-size: var(--uix-text-meta); }
+
+  /* ── page breaks and helpers ───────────────────────────────────────────────── */
+  .uix-print-break { height: 0; margin-block: var(--uix-space-3); border-top: 1px dashed var(--uix-print-line); }
+  .uix-print-keep { break-inside: avoid; }
+  .uix-print-only { display: none; }
+
+  @media print {
+    .uix-print-hide { display: none !important; }
+    .uix-print-only { display: revert; }
+
+    /* Only the documents print: every element that neither is nor holds a print layout goes,
+       and the ones that hold it (the app shell, its scrolling main) become plain flow, so a
+       scroll box cannot cut the document to one page. */
+    :root:has(.uix-print-layout[data-isolate]) body :not(:has(.uix-print-layout[data-isolate]), .uix-print-layout[data-isolate], .uix-print-layout[data-isolate] *) { display: none !important; }
+    :root:has(.uix-print-layout[data-isolate]) body :has(.uix-print-layout[data-isolate]) {
+      display: block !important; position: static !important; overflow: visible !important;
+      height: auto !important; min-height: 0 !important; max-height: none !important;
+      margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
+      box-shadow: none !important; transform: none !important;
+    }
+    /* the sheet is paper whatever the screen theme was, also with background graphics on */
+    :root:has(.uix-print-layout[data-isolate]) { color-scheme: light; background: var(--uix-print-paper) !important; }
+    :root:has(.uix-print-layout[data-isolate]) body { margin: 0; padding: 0; background: none !important; }
+
+    .uix-print-layout {
+      display: block; width: 100%; max-width: none; margin: 0;
+      border: 0; box-shadow: none; outline: none;
+      -webkit-print-color-adjust: exact; print-color-adjust: exact;
+    }
+    .uix-print-preview { inline-size: auto !important; max-inline-size: none; }
+    .uix-print-preview + .uix-print-preview { margin: 0; break-before: page; }
+    .uix-print-layout[data-page="uix-print-a4"] { page: uix-print-a4; }
+    .uix-print-layout[data-page="uix-print-a4-landscape"] { page: uix-print-a4-landscape; }
+    .uix-print-layout[data-page="uix-print-a5"] { page: uix-print-a5; }
+    .uix-print-layout[data-page="uix-print-a5-landscape"] { page: uix-print-a5-landscape; }
+    .uix-print-layout[data-page="uix-print-a4-plain"] { page: uix-print-a4-plain; }
+    .uix-print-layout[data-page="uix-print-a4-landscape-plain"] { page: uix-print-a4-landscape-plain; }
+    .uix-print-layout[data-page="uix-print-a5-plain"] { page: uix-print-a5-plain; }
+    .uix-print-layout[data-page="uix-print-a5-landscape-plain"] { page: uix-print-a5-landscape-plain; }
+
+    /* the page is a table again, and the browser repeats its thead and tfoot on every page */
+    .uix-print-layout__page { display: table; table-layout: fixed; min-height: 0; padding: 0; }
+    :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: revert; }
+    .uix-print-layout__body { display: table-cell; }
+    .uix-print-layout__body > * + * { margin-top: var(--uix-space-4); }
+    /* space between the bars and the body, on every page */
+    .uix-print-layout__header .uix-print-layout__bar { margin-bottom: 5mm; }
+    .uix-print-layout__footer .uix-print-layout__bar { margin-top: 5mm; }
+
+    /* one page: nothing repeats, nothing is cut, the frame stays in one piece */
+    .uix-print-layout[data-single-page] { display: block; break-inside: avoid; }
+    .uix-print-layout[data-single-page] .uix-print-layout__page { display: flex; height: auto; overflow: visible; }
+    .uix-print-layout[data-single-page] :where(.uix-print-layout__page > thead, .uix-print-layout__page > tbody, .uix-print-layout__page > tfoot, .uix-print-layout__page > * > tr, .uix-print-layout__page > * > tr > td) { display: block; }
+    .uix-print-layout[data-single-page] .uix-print-layout__body { display: flex; }
+    .uix-print-layout[data-single-page] .uix-print-layout__body > * + * { margin-top: 0; }
+
+    /* tables, lists and figures inside keep their rows whole; focus rings belong to the screen */
+    .uix-print-layout__body :is(tr, li, figure, .uix-card) { break-inside: avoid; }
+    .uix-print-layout__body thead { display: table-header-group; }
+    .uix-print-layout :focus, .uix-print-layout :focus-visible { outline: none; }
+    .uix-print-break { height: 0; margin: 0; border: 0; break-after: page; }
+  }
+}

package/styles/components/progress.css

@@ -16,3 +16,10 @@
     background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }
   .uix-ring__inner { width: 32px; height: 32px; border-radius: 50%; background: var(--uix-surface); display: grid; place-items: center; font-size: var(--uix-text-meta); font-weight: 600; }
 }
+
+/* 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-progress--indeterminate .uix-progress__bar { width: 100%; animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+}