@tensor_1/tokens 2.35.0 → 2.37.0

package/build/css/tokens.css

@@ -96,6 +96,12 @@
     --uix-scrollbar-track: transparent;
     --uix-scrim: rgba(0,0,0,.5);
     --uix-scrim-strong: rgba(0,0,0,.7);
+    --uix-print-ink: #0A0A0A;
+    --uix-print-ink-quiet: #525252;
+    --uix-print-paper: #FFFFFF;
+    --uix-print-paper-quiet: #F0F0F0;
+    --uix-print-line: #8A8A8A;
+    --uix-print-danger: #C40012;
     --uix-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
     --uix-shadow-md: 0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
     --uix-shadow-popover: 0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05);

package/build/tailwind/preset.cjs

@@ -97,6 +97,12 @@ module.exports = {
       "uix-scrollbar-track": "var(--uix-scrollbar-track)",
       "uix-scrim": "var(--uix-scrim)",
       "uix-scrim-strong": "var(--uix-scrim-strong)",
+      "uix-print-ink": "var(--uix-print-ink)",
+      "uix-print-ink-quiet": "var(--uix-print-ink-quiet)",
+      "uix-print-paper": "var(--uix-print-paper)",
+      "uix-print-paper-quiet": "var(--uix-print-paper-quiet)",
+      "uix-print-line": "var(--uix-print-line)",
+      "uix-print-danger": "var(--uix-print-danger)",
       },
       borderRadius: {
       "uix-xs": "var(--uix-radius-xs)",

package/build/tailwind/theme.css

@@ -94,6 +94,12 @@
   --color-uix-scrollbar-track: var(--uix-scrollbar-track);
   --color-uix-scrim: var(--uix-scrim);
   --color-uix-scrim-strong: var(--uix-scrim-strong);
+  --color-uix-print-ink: var(--uix-print-ink);
+  --color-uix-print-ink-quiet: var(--uix-print-ink-quiet);
+  --color-uix-print-paper: var(--uix-print-paper);
+  --color-uix-print-paper-quiet: var(--uix-print-paper-quiet);
+  --color-uix-print-line: var(--uix-print-line);
+  --color-uix-print-danger: var(--uix-print-danger);
 
   --radius-uix-xs: var(--uix-radius-xs);
   --radius-uix-sm: var(--uix-radius-sm);

package/build/ts/tokens.d.ts

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

package/build/ts/tokens.js

@@ -97,6 +97,12 @@ export const cssVar = {
   "scrollbar-track": "var(--uix-scrollbar-track)",
   "scrim": "var(--uix-scrim)",
   "scrim-strong": "var(--uix-scrim-strong)",
+  "print-ink": "var(--uix-print-ink)",
+  "print-ink-quiet": "var(--uix-print-ink-quiet)",
+  "print-paper": "var(--uix-print-paper)",
+  "print-paper-quiet": "var(--uix-print-paper-quiet)",
+  "print-line": "var(--uix-print-line)",
+  "print-danger": "var(--uix-print-danger)",
   "shadow-sm": "var(--uix-shadow-sm)",
   "shadow-md": "var(--uix-shadow-md)",
   "shadow-popover": "var(--uix-shadow-popover)",
@@ -270,6 +276,12 @@ export const light = {
   "scrollbar-track": "transparent",
   "scrim": "rgba(0,0,0,.5)",
   "scrim-strong": "rgba(0,0,0,.7)",
+  "print-ink": "#0A0A0A",
+  "print-ink-quiet": "#525252",
+  "print-paper": "#FFFFFF",
+  "print-paper-quiet": "#F0F0F0",
+  "print-line": "#8A8A8A",
+  "print-danger": "#C40012",
   "shadow-sm": "0 1px 2px rgba(0,0,0,.06)",
   "shadow-md": "0 4px 12px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05)",
   "shadow-popover": "0 8px 24px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.05)",

package/package.json

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

package/styles/components/avatar.css

@@ -13,6 +13,12 @@
   .uix-avatar--xl .uix-avatar__status { width: 14px; height: 14px; right: 1px; bottom: 1px; }
   .uix-avatar--2xl .uix-avatar__status { width: 18px; height: 18px; border-width: 3px; right: 4px; bottom: 4px; }
   .uix-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--uix-surface); background: var(--uix-success); }
+  /* The dot sits on the circle's edge, so the circle must not clip it: it used to, and a quarter
+     of the dot was all that showed (HAR-1374). Only an avatar with a dot stops clipping; its
+     photo and its edit overlay keep the round shape themselves. */
+  .uix-avatar:has(> .uix-avatar__status) { overflow: visible; }
+  .uix-avatar:has(> .uix-avatar__status) > img, .uix-avatar__edit { border-radius: 50%; }
+  .uix-avatar--lg .uix-avatar__status { right: 1px; bottom: 1px; }
   .uix-avatar-group { display: inline-flex; }
   .uix-avatar-group .uix-avatar { box-shadow: 0 0 0 2px var(--uix-surface); margin-left: calc(-1 * var(--uix-space-2)); }
   .uix-avatar-group .uix-avatar:first-child { margin-left: 0; }
@@ -27,3 +33,17 @@
   .uix-avatar--editable:hover .uix-avatar__edit, .uix-avatar--editable:focus-visible .uix-avatar__edit { opacity: 1; }
   .uix-avatar--empty { background: var(--uix-bg-subtle); border: 1.5px dashed var(--uix-border-strong); color: var(--uix-text-muted); }
 }
+
+/* Presence (HAR-1374): online, busy, away, offline. Each state has its own SHAPE as well as its
+   own colour (a filled dot, a dot with a bar, two rings), and the React components add the state
+   in text. The same four looks serve the dot on an avatar and the standalone .uix-presence. The
+   ring colours are text colours on purpose: the status hues are too light for a 2 px ring
+   (packages/tokens/tests/presence-contrast.test.mjs holds all four to 3:1 on the surface). */
+@layer uix.components {
+  .uix-presence { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--uix-success); }
+  .uix-avatar__status::after, .uix-presence::after { content: ""; position: absolute; left: 20%; right: 20%; top: calc(50% - 1px); height: 2px; border-radius: var(--uix-radius-pill); background: var(--uix-surface); display: none; }
+  .uix-avatar__status[data-presence="busy"], .uix-presence--busy { background: var(--uix-danger); }
+  .uix-avatar__status[data-presence="busy"]::after, .uix-presence--busy::after { display: block; }
+  .uix-avatar__status[data-presence="away"], .uix-presence--away { background: var(--uix-surface); box-shadow: inset 0 0 0 2px var(--uix-warning-text); }
+  .uix-avatar__status[data-presence="offline"], .uix-presence--offline { background: var(--uix-surface); box-shadow: inset 0 0 0 2px var(--uix-text-muted); }
+}

package/styles/components/date-picker.css

@@ -0,0 +1,72 @@
+/* uix date fields — DatePicker, DateTimePicker and the field mode of DateRangePicker (HAR-1383).
+   The day cells are the range picker's (date-range-picker.css); this file adds the field, the
+   popover's one-month calendar and the single selected day. Depends only on --uix-* tokens. */
+@layer uix.components {
+  /* --- DatePicker: a text input with a calendar button inside its trailing edge ------------- */
+  .uix-date-picker { display: grid; gap: var(--uix-space-1); width: 100%; min-width: 0; max-width: 11rem; }
+  .uix-date-picker__control { position: relative; display: flex; min-width: 0; }
+  .uix-date-picker__input { padding-inline-end: calc(var(--uix-control-h) + var(--uix-space-1)); font-variant-numeric: tabular-nums; }
+  .uix-date-picker--sm .uix-date-picker__input { padding-inline-end: var(--uix-space-7); }
+  .uix-date-picker__toggle {
+    /* Half a space step (2 px) inside the field's border, on every side it touches. */
+    --date-picker-inset: calc(var(--uix-space-1) / 2);
+    position: absolute; inset-block: var(--date-picker-inset); inset-inline-end: var(--date-picker-inset); aspect-ratio: 1;
+    display: inline-flex; align-items: center; justify-content: center; 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);
+  }
+  .uix-date-picker__toggle:hover:not(:disabled),
+  .uix-date-picker__toggle[aria-expanded="true"] { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-date-picker__toggle:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 0; }
+  .uix-date-picker__toggle:disabled { cursor: not-allowed; opacity: .55; }
+  .uix-date-picker__error { min-width: 0; overflow-wrap: anywhere; }
+
+  /* --- The calendar in the popover -------------------------------------------------------- */
+  .uix-date-picker__popover { padding: var(--uix-space-3); }
+  .uix-date-picker__calendar { display: grid; gap: var(--uix-space-2); width: 17rem; max-width: calc(100vw - 2 * var(--uix-space-6)); color: var(--uix-text); }
+  .uix-date-picker__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-2); }
+  .uix-date-picker__month { font-weight: 600; }
+  .uix-date-picker__nav-btn {
+    display: inline-flex; align-items: center; justify-content: 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;
+  }
+  .uix-date-picker__nav-btn:hover:not([aria-disabled="true"]) { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-date-picker__nav-btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+  .uix-date-picker__nav-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
+  .uix-date-picker__nav-btn:dir(rtl) svg { transform: scaleX(-1); }
+
+  /* One selected day: the accent circle the range picker gives its two ends. A day that
+     cannot be chosen stays focusable (so it can be read out), hence aria-disabled, not :disabled. */
+  .uix-date-picker__grid button { cursor: pointer; }
+  .uix-date-picker__grid button[data-selected] { color: var(--uix-accent-fg); font-weight: 600; }
+  .uix-date-picker__grid button[data-selected]::after,
+  .uix-date-picker__grid button[data-selected]:hover:not(:disabled)::after { background: var(--uix-accent); }
+  .uix-date-picker__grid button[aria-disabled="true"] { color: var(--uix-text-hushed); text-decoration: line-through; cursor: not-allowed; }
+  .uix-date-picker__grid button[aria-disabled="true"]:not([data-selected]):hover:not(:disabled)::after { background: transparent; }
+
+  /* --- DateTimePicker: the date field, a time input and the zone they are in ---------------- */
+  .uix-date-time-picker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--uix-space-2); min-width: 0; }
+  .uix-date-time-picker > .uix-date-picker { flex: 1 1 8.5rem; }
+  .uix-date-time-picker__time { flex: 0 1 auto; width: auto; min-width: 6.5rem; font-variant-numeric: tabular-nums; }
+  .uix-date-time-picker__zone { display: inline-flex; align-items: center; min-height: var(--uix-control-h); color: var(--uix-text-muted); font-size: var(--uix-text-meta); white-space: nowrap; }
+  .uix-date-time-picker--sm .uix-date-time-picker__zone { min-height: 28px; }
+
+  /* --- DateRangePicker mode="field": a trigger that shows the range ------------------------- */
+  .uix-date-range-field { display: grid; width: 100%; min-width: 0; max-width: 18rem; }
+  .uix-date-range-field__trigger { display: flex; align-items: center; gap: var(--uix-space-2); min-width: 0; text-align: start; cursor: pointer; }
+  .uix-date-range-field__trigger:disabled { cursor: not-allowed; }
+  .uix-date-range-field__icon { display: inline-flex; flex: none; color: var(--uix-text-muted); }
+  .uix-date-range-field__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .uix-date-range-field__value--empty { color: var(--uix-text-muted); }
+  .uix-date-range-field__popover { padding: 0; }
+  .uix-date-range-picker--in-popover { max-width: min(46rem, calc(100vw - 2 * var(--uix-space-4))); border: 0; background: transparent; }
+  .uix-date-range-picker--in-popover .uix-date-range-picker__months:has(> :only-child) { grid-template-columns: minmax(15rem, 1fr); }
+
+  @media (forced-colors: active) {
+    .uix-date-picker__grid button[data-selected] { forced-color-adjust: none; color: HighlightText; }
+    .uix-date-picker__grid button[data-selected]::after,
+    .uix-date-picker__grid button[data-selected]:hover:not(:disabled)::after { forced-color-adjust: none; background: Highlight; }
+    .uix-date-picker__grid button[aria-disabled="true"] { color: GrayText; }
+    .uix-date-picker__toggle[aria-expanded="true"] { outline: 1px solid Highlight; }
+  }
+}

package/styles/components/inline-edit.css

@@ -0,0 +1,28 @@
+/* uix inline edit — a value that is edited in place (React `InlineEdit`, HAR-1381).
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-inline-edit { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: top; }
+  .uix-inline-edit--editing { display: flex; }
+  /* 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. */
+  .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);
+    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); }
+  .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); }
+  /* 75% at rest keeps the pencil above 3:1 (the same floor as the view menu's quiet controls). */
+  .uix-inline-edit__icon { display: inline-flex; flex: none; color: var(--uix-text-muted); opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-inline-edit__view:is(:hover, :focus-visible) .uix-inline-edit__icon { opacity: 1; }
+  .uix-inline-edit__editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--uix-space-2); flex: 1; min-width: 0; }
+  .uix-inline-edit__control { flex: 1 1 12rem; min-width: 0; }
+  .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%; }
+}

package/styles/components/radio.css

@@ -18,3 +18,36 @@
   .uix-radio > input:focus-visible + .uix-radio__dot { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
   .uix-radio > input:disabled ~ * { opacity: .5; }
 }
+
+/* RadioCard (HAR-1373): a native radio inside a label card, for a choice whose options need a
+   description or a preview. Selected = a stronger border AND a check mark, never colour alone.
+   The group is a grid that drops to one column when a card would be narrower than 12rem. */
+@layer uix.components {
+  .uix-radio-group--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--uix-space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
+  .uix-radio-group--cards > .uix-radio-group__legend { grid-column: 1 / -1; padding: 0; margin-bottom: var(--uix-space-1); }
+  .uix-radio-card {
+    position: relative; display: flex; flex-direction: column; gap: var(--uix-space-3); min-width: 0; padding: var(--uix-space-4);
+    border: 1px solid var(--uix-border-strong); border-radius: var(--uix-radius-lg); background: var(--uix-surface); color: var(--uix-text); cursor: pointer;
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-radio-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .uix-radio-card:hover { border-color: var(--uix-text-muted); }
+  .uix-radio-card:has(> input:checked) { border-color: var(--uix-accent); box-shadow: inset 0 0 0 1px var(--uix-accent); }
+  .uix-radio-card:has(> input:focus-visible) { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-radio-card:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+  .uix-radio-card__media { display: block; min-width: 0; border-radius: var(--uix-radius-md); overflow: hidden; }
+  .uix-radio-card__media > :is(img, svg) { display: block; max-width: 100%; }
+  .uix-radio-card__body { display: grid; gap: var(--uix-space-1); min-width: 0; padding-inline-end: var(--uix-space-6); }
+  .uix-radio-card__title { font-size: var(--uix-text-body); font-weight: 600; overflow-wrap: anywhere; }
+  .uix-radio-card__desc { font-size: var(--uix-text-meta); color: var(--uix-text-hushed); overflow-wrap: anywhere; }
+  .uix-radio-card__check {
+    position: absolute; inset-block-start: var(--uix-space-3); inset-inline-end: var(--uix-space-3); display: grid; place-items: center;
+    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--uix-border-strong); background: var(--uix-surface); color: transparent;
+  }
+  .uix-radio-card__check svg { width: 14px; height: 14px; }
+  .uix-radio-card > input:checked ~ .uix-radio-card__check { border-color: var(--uix-accent); background: var(--uix-accent); color: var(--uix-accent-fg); }
+  @media (forced-colors: active) {
+    .uix-radio-card:has(> input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
+    .uix-radio-card > input:checked ~ .uix-radio-card__check { background: Highlight; color: HighlightText; }
+  }
+}

package/styles/components/scheduling-calendar.css

@@ -24,6 +24,7 @@
     --calendar-status-text-dim: var(--uix-text-muted);
     --calendar-band-medium-edge: var(--uix-neutral-solid);
     --calendar-band-high-fill: var(--uix-danger);
+    --calendar-band-high-edge: var(--uix-danger); /* read on paper only, where the fill is the paper's */
     --calendar-band-high-text: var(--uix-danger-fg);
     --calendar-window-surface: var(--uix-neutral-bg);
     --calendar-window-ink: var(--uix-neutral-solid);
@@ -280,6 +281,8 @@
   .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__entry-text { white-space:normal; overflow-wrap:anywhere; max-height:100%; }
   .uix-scheduling-calendar__tg-item[data-lines="1"] > .uix-scheduling-calendar__entry-text { white-space:nowrap; overflow-wrap:normal; }
   .uix-scheduling-calendar__tg-item > .uix-scheduling-calendar__markers { height:1rem; }
+  /* an item too short for a line shows its markers only; its words are in the markup for paper (HAR-1541) */
+  .uix-scheduling-calendar__tg-item > [data-room="none"] { display:none; }
   .uix-scheduling-calendar__tg-from { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; font-style:italic; }
   /* an item that crosses midnight: two parts with the shared edge left open */
   .uix-scheduling-calendar__tg-item[data-part="start"] { border-bottom-style:dashed; border-bottom-left-radius:0; border-bottom-right-radius:0; }
@@ -298,4 +301,115 @@
   .uix-scheduling-calendar__tg-probe { position:absolute; left:0; top:0; height:0; padding:0 0.125rem; border:0 solid transparent; border-width:0 1px; visibility:hidden; overflow:hidden; white-space:nowrap; font-size:var(--uix-text-meta); pointer-events:none; }
 
   .uix-scheduling-calendar__state { padding:var(--uix-space-8); border:1px dashed var(--calendar-chrome-line-strong); border-radius:var(--uix-radius-lg); text-align:center; }
+  /* ── Print (HAR-1541) ────────────────────────────────────────────────────────────────────────
+     The same markup on paper. Nothing scrolls or is cut, and the colours are the paper's (light,
+     whatever theme the screen has). The calendar asks the browser to print its surfaces as they
+     are; a browser may refuse, so no meaning rests on a fill or a pattern: each is an edge too.
+     The first rule is the colour map again. */
+  @media print {
+    .uix-scheduling-calendar {
+      --calendar-chrome-text: var(--uix-print-ink);
+      --calendar-chrome-text-quiet: var(--uix-print-ink-quiet);
+      --calendar-chrome-surface: var(--uix-print-paper);
+      --calendar-chrome-surface-quiet: var(--uix-print-paper-quiet);
+      --calendar-chrome-line: var(--uix-print-line);
+      --calendar-chrome-line-strong: var(--uix-print-ink-quiet);
+      --calendar-status-surface: var(--uix-print-paper);
+      --calendar-status-surface-quiet: var(--uix-print-paper-quiet);
+      --calendar-status-edge: var(--uix-print-line);
+      --calendar-status-edge-strong: var(--uix-print-ink-quiet);
+      --calendar-status-text: var(--uix-print-ink);
+      --calendar-status-text-dim: var(--uix-print-ink-quiet);
+      --calendar-band-medium-edge: var(--uix-print-ink-quiet);
+      --calendar-band-high-fill: var(--uix-print-paper);
+      --calendar-band-high-edge: var(--uix-print-danger);
+      --calendar-band-high-text: var(--uix-print-ink);
+      --calendar-window-surface: var(--uix-print-paper);
+      --calendar-window-ink: var(--uix-print-ink);
+      --calendar-window-edge: var(--uix-print-ink-quiet);
+      --calendar-window-text: var(--uix-print-ink);
+      --calendar-marker-ink: var(--uix-print-ink);
+      --calendar-chrome-now: var(--uix-print-ink);
+      --calendar-chrome-ghost: var(--uix-print-line);
+      --calendar-chrome-ghost-surface: var(--uix-print-paper);
+    }
+    /* The calendar brings its own paper and asks for its surfaces to be printed as they are, so
+       an item covers what is behind it whether or not the reader prints background graphics. */
+    :where(.uix-scheduling-calendar) { background:var(--calendar-chrome-surface); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
+    /* a focus ring belongs to the screen */
+    .uix-scheduling-calendar :focus-visible { outline:none; }
+    /* nothing scrolls on paper: a grid is as wide as the page and as tall as what it holds */
+    .uix-scheduling-calendar__grid,.uix-scheduling-calendar__timegrid,.uix-scheduling-calendar__agenda--virtual { overflow:visible; max-height:none; }
+    .uix-scheduling-calendar__grid,.uix-scheduling-calendar__week { grid-template-columns:repeat(7,minmax(0,1fr)); }
+    .uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__tg-body { grid-template-columns:var(--calendar-gutter) repeat(var(--uix-scheduling-calendar-days,7),minmax(0,1fr)); min-width:0; }
+    /* controls do nothing on paper; the period title, the zone label and the legend stay */
+    .uix-scheduling-calendar__header :is(button,.uix-segmented) { display:none; }
+    /* the line for "now" and a move not yet sent belong to the moment, not to the page */
+    .uix-scheduling-calendar__tg-now,.uix-scheduling-calendar__tg-ghost { display:none; }
+    /* a week row, an agenda row, the legend, and a time grid that fits a page stay on one page;
+       a heading stays with what it heads */
+    .uix-scheduling-calendar__week,.uix-scheduling-calendar__agenda-rows > li,.uix-scheduling-calendar__agenda-vrow,.uix-scheduling-calendar__tg-head,.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__timegrid,.uix-scheduling-calendar__legend { break-inside:avoid; }
+    .uix-scheduling-calendar__header,.uix-scheduling-calendar__agenda-vrow[data-kind="heading"] { break-after:avoid; }
+    .uix-scheduling-calendar__agenda-head { position:static; break-after:avoid; }
+    .uix-scheduling-calendar__empty { position:static; }
+
+    /* Month: a week is as tall as the page allows for six of them, and grows with what it holds */
+    .uix-scheduling-calendar__day { min-height:clamp(4.5rem,calc((100vh - 10rem) / 6),8rem); }
+    .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__week { height:auto; }
+    .uix-scheduling-calendar__grid[data-fixed] .uix-scheduling-calendar__day { overflow:visible; }
+    /* a chip holds its whole title, and a day badge its whole text */
+    .uix-scheduling-calendar__entries > .uix-scheduling-calendar__entry { height:auto; min-height:var(--calendar-chip); white-space:normal; overflow:visible; }
+    .uix-scheduling-calendar__entries > .uix-scheduling-calendar__entry > .uix-scheduling-calendar__entry-text { overflow:visible; overflow-wrap:anywhere; }
+    .uix-scheduling-calendar__badge { overflow:visible; white-space:normal; }
+
+    /* Time grid: an hour is as tall as the page allows for the whole day, between a readable
+       hour and the hour of the screen. Every position is counted in hours, so the items follow. */
+    .uix-scheduling-calendar__timegrid { --calendar-hour:clamp(1.25rem,calc((100vh - 21rem) / var(--uix-scheduling-calendar-hours,24)),3rem); margin-bottom:var(--uix-space-8); }
+    .uix-scheduling-calendar__tg-dayhead,.uix-scheduling-calendar__tg-dayhead > .uix-scheduling-calendar__markers { overflow:visible; flex-wrap:wrap; }
+    /* the lanes over the days grow with the words of a window or of an item with no time of day */
+    .uix-scheduling-calendar__tg-strip { grid-auto-rows:minmax(var(--calendar-lane),auto); }
+    .uix-scheduling-calendar__tg-strip > :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__tg-span),.uix-scheduling-calendar__agenda-notes .uix-scheduling-calendar__window,.uix-scheduling-calendar__agenda-vrow > .uix-scheduling-calendar__window { height:auto; min-height:calc(var(--calendar-lane) - var(--calendar-gap)); white-space:normal; overflow:visible; }
+    :is(.uix-scheduling-calendar__tg-strip,.uix-scheduling-calendar__agenda-notes,.uix-scheduling-calendar__agenda-vrow) :is(.uix-scheduling-calendar__window-text,.uix-scheduling-calendar__window-name,.uix-scheduling-calendar__window-scope,.uix-scheduling-calendar__entry-text) { flex-wrap:wrap; overflow:visible; overflow-wrap:anywhere; }
+    /* the hour lines are a background: on paper each hour label draws its own line across the days */
+    .uix-scheduling-calendar__tg-column { background:none; }
+    .uix-scheduling-calendar__tg-gutter { position:static; }
+    .uix-scheduling-calendar__tg-gutter > .uix-scheduling-calendar__tg-hour { left:0; right:0; padding-right:calc(100% - var(--calendar-gutter) + var(--uix-space-1)); }
+    .uix-scheduling-calendar__tg-gutter > .uix-scheduling-calendar__tg-hour::after { content:""; position:absolute; top:0; left:var(--calendar-gutter); right:0; border-top:1px dotted var(--calendar-chrome-line); }
+    /* the hours of a window for everything: a quiet tint under the hour lines, and an edge of its own inside the
+       day. Its clip makes it a layer of its own, painted in the order of the grid: `order` puts it before the
+       hours, so their lines are drawn over it and the items over both. */
+    .uix-scheduling-calendar__tg-shade[data-pattern] { order:-1; margin-inline:var(--uix-space-1); border-inline:1px dashed var(--calendar-window-edge); background-color:var(--calendar-chrome-surface-quiet); opacity:1; }
+    /* an item is at least as tall as its time and grows to hold its words; one that starts later lies over the end of it */
+    .uix-scheduling-calendar__tg-item { height:auto; min-height:max(calc(var(--uix-scheduling-calendar-length,1) * var(--calendar-hour) - 1px),0.875rem); overflow:visible; }
+    .uix-scheduling-calendar__tg-item[data-lines] > :is(.uix-scheduling-calendar__entry-text,.uix-scheduling-calendar__tg-from) { display:block; max-height:none; overflow:visible; white-space:normal; overflow-wrap:anywhere; }
+
+    /* Agenda: the long form mounts every row while the page prints, each as tall as its text */
+    .uix-scheduling-calendar__agenda-window { padding:0 !important; }
+    .uix-scheduling-calendar__agenda--virtual .uix-scheduling-calendar__agenda-vrow,.uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-vrow { height:auto; min-height:44px; overflow:visible; }
+    .uix-scheduling-calendar__agenda--virtual .uix-scheduling-calendar__agenda-vrow :is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda-main,.uix-scheduling-calendar__agenda-time,.uix-scheduling-calendar__agenda-heading,.uix-scheduling-calendar__markers,.uix-scheduling-calendar__markers > span,.uix-scheduling-calendar__marker) { flex-wrap:wrap; overflow:visible; white-space:normal; }
+
+    /* Paper has no fill to rely on: the high band is the heaviest edge, in the one signal colour, in every
+       state. Its fill is the paper's on paper (the map above), so it still covers what is behind it, and its
+       edge has a name of its own there. */
+    :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"] { border-width:3px; border-color:var(--calendar-band-high-edge); }
+    :is(.uix-scheduling-calendar__entry,.uix-scheduling-calendar__swatch)[data-band="high"]:is([data-status="tentative"],[data-status="dead"],[data-status="done"]) { border-color:var(--calendar-band-high-edge); }
+    .uix-scheduling-calendar__entry[data-band="high"][data-dim] { border-color:var(--calendar-band-high-edge); }
+    /* a highlight is a heavier edge, which does not show beside the edge of the high band, and in
+       the agendas a shadow, which may not print: on paper its title is underlined as well */
+    .uix-scheduling-calendar__entry[data-highlight] .uix-scheduling-calendar__title,:is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda > ol > li > button)[data-highlight] :is(.uix-scheduling-calendar__title,strong) { text-decoration:underline; }
+    /* a window's pattern is a background and may not print: its edge says the same */
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="diagonal"] { border-style:dashed; }
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="cross"] { border-style:double; border-width:3px; }
+    :is(.uix-scheduling-calendar__window,.uix-scheduling-calendar__swatch)[data-pattern="dotted"] { border-style:dotted; border-width:2px; }
+    /* a window for everything keeps its heavier edge in each pattern */
+    .uix-scheduling-calendar__window[data-global][data-pattern="diagonal"] { border-width:2px; }
+    .uix-scheduling-calendar__window[data-global][data-pattern="cross"] { border-width:4px; }
+    .uix-scheduling-calendar__window[data-global][data-pattern="dotted"] { border-width:3px; }
+    /* a window that goes on past the row is open at that end, whatever its pattern */
+    .uix-scheduling-calendar__window[data-continues-before] { border-left-style:none; }
+    .uix-scheduling-calendar__window[data-continues-after] { border-right-style:none; }
+    /* a bar too short for all its words gives up the scope first and keeps the name */
+    .uix-scheduling-calendar__window-name { flex-shrink:0; }
+    .uix-scheduling-calendar__window-scope { flex-shrink:1; }
+  }
 }