@tensor_1/tokens 2.34.0 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.34.0",
+  "version": "2.36.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/list.css

@@ -4,6 +4,9 @@
   .uix-list__item { 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); }
   .uix-list__item:last-child { border-bottom: 0; }
   .uix-list__item:hover { background: var(--uix-bg-hover); }
+  /* roving list: the items take focus one at a time; the ring is inset because the list clips */
+  .uix-list--roving > .uix-list__item:focus-visible { outline-offset: -2px; }
+  .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); }
   .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }

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

@@ -109,6 +109,24 @@
   :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-text); }
   .uix-scheduling-calendar__entry[data-band="high"]:focus-visible { outline-color:var(--calendar-band-high-text); }
 
+  /* emphasis (HAR-1527): an item the consumer brings forward or sets back. Weight and
+     quietness only, and it leaves the other channels alone: a highlight is a heavier edge all
+     round in the text colour, also round the fill of the high band (a medium band keeps a
+     thicker leading edge still), a dimmed item is quieter text. The line style of the state
+     stays as it is: on the fill a dashed or dotted edge keeps the colour that shows on the fill.
+     A dimmed item of the filled band gives the fill up and keeps the band on its edge. */
+  .uix-scheduling-calendar__entry[data-highlight] { border-width:2px; border-color:var(--calendar-chrome-text); font-weight:600; }
+  .uix-scheduling-calendar__entry[data-highlight] .uix-scheduling-calendar__title { font-weight:600; }
+  .uix-scheduling-calendar__entry[data-band="medium"][data-highlight] { border-left-width:5px; }
+  .uix-scheduling-calendar__entry[data-dim] { color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__entry[data-dim] .uix-scheduling-calendar__title { font-weight:400; }
+  .uix-scheduling-calendar__entry[data-band="high"][data-dim] { border-color:var(--calendar-band-high-fill); border-left-width:4px; background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text-quiet); }
+  /* in the agendas the heavier edge is the leading one, drawn inside the row so nothing in it moves */
+  :is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda > ol > li > button)[data-highlight] { box-shadow:inset 3px 0 0 var(--calendar-chrome-text); font-weight:600; }
+  .uix-scheduling-calendar__agenda-row[data-highlight] .uix-scheduling-calendar__title { font-weight:600; }
+  :is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda > ol > li > button)[data-dim] { color:var(--calendar-chrome-text-quiet); }
+  .uix-scheduling-calendar__agenda-row[data-dim] .uix-scheduling-calendar__title,.uix-scheduling-calendar__agenda > ol > li > button[data-dim] strong { font-weight:400; }
+
   /* spans and windows: placed in the week row by the layout, one lane each */
   .uix-scheduling-calendar__span,.uix-scheduling-calendar__window,.uix-scheduling-calendar__rowmore { grid-row:1; align-self:start; height:calc(var(--calendar-lane) - var(--calendar-gap)); margin-top:calc(var(--calendar-pad) + var(--calendar-head) + var(--uix-scheduling-calendar-lane,0) * var(--calendar-lane)); margin-inline:var(--calendar-pad-inline); }
   :is(.uix-scheduling-calendar__span,.uix-scheduling-calendar__window)[data-continues-before] { margin-left:0; border-left-style:dashed; border-top-left-radius:0; border-bottom-left-radius:0; }

package/styles/components/scheduling-timeline.css

@@ -1,51 +1,232 @@
-/* uix scheduling timeline (React `SchedulingTimeline`, HAR-1364) — lanes of bars on a time
-   axis. Depends only on --uix-* tokens. The lane label column is sticky; the axis scrolls. */
+/* uix scheduling timeline (React `SchedulingTimeline`, HAR-1364, HAR-1521) — lanes of bars on a
+   time axis. Depends only on --uix-* tokens. The lane label column is sticky; the axis scrolls.
+
+   COLOUR MAP. Every colour the timeline paints is named once in the first rule and read from
+   there; no other rule names a --uix-* colour. One name has one meaning:
+     --timeline-band-*    the band, the only dimension that takes a hue (only `high` is filled)
+     --timeline-status-*  the state channel of a bar: line style, weight and dimming, never a hue
+     --timeline-window-*  windows: neutral, told apart by pattern and visible label
+     --timeline-marker-*  markers: a shape or icon with text on a bar, a dashed line on the axis
+     --timeline-chrome-*  rows, lines, the axis, the now-line, the move outline and controls
+   To retune a colour, change its line in the map (HAR-1521; packages/tokens/tests/scheduling-timeline-colours.test.mjs). */
 @layer uix.components {
-  .uix-scheduling-timeline { display: grid; gap: var(--uix-space-3); color: var(--uix-text); min-width: 0; }
-  .uix-scheduling-timeline__scroller { position: relative; overflow-x: auto; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
+  .uix-scheduling-timeline {
+    --timeline-chrome-text: var(--uix-text);
+    --timeline-chrome-text-quiet: var(--uix-text-muted);
+    --timeline-chrome-surface: var(--uix-surface);
+    --timeline-chrome-surface-quiet: var(--uix-bg-subtle);
+    --timeline-chrome-line: var(--uix-border);
+    --timeline-chrome-line-strong: var(--uix-border-strong);
+    --timeline-chrome-now: var(--uix-text);
+    --timeline-chrome-now-text: var(--uix-surface);
+    --timeline-chrome-ghost: var(--uix-text);
+    --timeline-chrome-ghost-halo: var(--uix-surface);
+    --timeline-status-surface: var(--uix-surface);
+    --timeline-status-surface-quiet: var(--uix-bg-subtle);
+    --timeline-status-edge: var(--uix-neutral-border);
+    --timeline-status-edge-strong: var(--uix-neutral-solid);
+    --timeline-status-text: var(--uix-text);
+    --timeline-status-text-dim: var(--uix-text-muted);
+    --timeline-band-medium-edge: var(--uix-neutral-solid);
+    --timeline-band-high-fill: var(--uix-danger);
+    --timeline-band-high-text: var(--uix-danger-fg);
+    --timeline-window-surface: var(--uix-neutral-bg);
+    --timeline-window-ink: var(--uix-neutral-solid);
+    --timeline-window-edge: var(--uix-neutral-border);
+    --timeline-window-text: var(--uix-text);
+    --timeline-marker-ink: var(--uix-text);
+    --timeline-marker-line: var(--uix-neutral-solid);
+
+    /* geometry: a lane is its sub-rows plus its padding (the rule under it is inside that); a group
+       head is one line. The component counts row positions in these three lengths (scheduling-timeline-rows.ts). */
+    --timeline-bar-row: 2.25rem;
+    --timeline-bar: 2rem;
+    --timeline-bar-min: 1.5rem; /* the component measures this (the element .…__bar-min) and packs bars as at least this wide */
+    --timeline-lane-pad: calc(2 * var(--uix-space-2));
+    --timeline-head: 2.5rem;
+    --timeline-axis: 2.25rem;
+    --timeline-axis-height: var(--timeline-axis);
+    --timeline-gap: 0.125rem;
+
+    display: grid; gap: var(--uix-space-3); color: var(--timeline-chrome-text); min-width: 0;
+  }
+  .uix-scheduling-timeline__notice { padding: var(--uix-space-2) var(--uix-space-3); border: 1px solid var(--timeline-chrome-line); border-radius: var(--uix-radius-sm); background: var(--timeline-chrome-surface-quiet); font-size: var(--uix-text-meta); }
+  .uix-scheduling-timeline__notice > :first-child { margin-top: 0; }
+  .uix-scheduling-timeline__notice > :last-child { margin-bottom: 0; }
+  .uix-scheduling-timeline__scroller { position: relative; overflow-x: auto; border: 1px solid var(--timeline-chrome-line); border-radius: var(--uix-radius-md); background: var(--timeline-chrome-surface); }
+  /* with `maxHeight` the lanes scroll inside the timeline, under the axis */
+  .uix-scheduling-timeline__scroller[data-scroll-y] { overflow-y: auto; }
   .uix-scheduling-timeline__grid { display: grid; width: max-content; min-width: 100%; }
-  .uix-scheduling-timeline__row { display: flex; border-bottom: 1px solid var(--uix-border); }
+  .uix-scheduling-timeline__grid[data-sub-ticks] { --timeline-axis-height: calc(var(--timeline-axis) + 1rem); }
+  .uix-scheduling-timeline__row { display: flex; border-bottom: 1px solid var(--timeline-chrome-line); }
   .uix-scheduling-timeline__row:last-child { border-bottom: 0; }
   .uix-scheduling-timeline__lane-label {
     position: sticky; left: 0; z-index: var(--uix-z-sticky); flex: 0 0 clamp(7.5rem, 30vw, 12rem); display: grid; align-content: center; gap: var(--uix-space-1);
-    padding: var(--uix-space-2) var(--uix-space-3); border-right: 1px solid var(--uix-border); background: var(--uix-surface); min-width: 0;
+    padding: var(--uix-space-2) var(--uix-space-3); border-right: 1px solid var(--timeline-chrome-line); background: var(--timeline-chrome-surface); min-width: 0;
   }
-  .uix-scheduling-timeline__row--axis .uix-scheduling-timeline__lane-label { background: var(--uix-bg-subtle); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 600; }
   .uix-scheduling-timeline__lane-name { font-weight: 500; overflow-wrap: break-word; hyphens: auto; }
-  .uix-scheduling-timeline__lane-meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
-  .uix-scheduling-timeline__track { position: relative; flex: 1 0 auto; min-height: calc(var(--uix-timeline-rows, 1) * 2.25rem + 2 * var(--uix-space-2)); }
-  .uix-scheduling-timeline__axis { min-height: 2.25rem; background: var(--uix-bg-subtle); }
-  .uix-scheduling-timeline__tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--uix-border); }
-  .uix-scheduling-timeline__tick[data-major] { border-left-color: var(--uix-border-strong); }
-  .uix-scheduling-timeline__tick-label { position: absolute; top: 50%; left: var(--uix-space-1); transform: translateY(-50%); white-space: nowrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
-  .uix-scheduling-timeline__tick[data-major] .uix-scheduling-timeline__tick-label { color: var(--uix-text); font-weight: 600; }
-  .uix-scheduling-timeline__gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--uix-border); }
-  .uix-scheduling-timeline__gridline[data-major] { background: var(--uix-border-strong); }
-  .uix-scheduling-timeline__overlay { position: absolute; top: 0; bottom: 0; background: var(--uix-info-bg); }
-  .uix-scheduling-timeline__overlay[data-kind="freeze"],
-  .uix-scheduling-timeline__overlay[data-kind="blackout"] { background: var(--uix-danger-bg); border-inline: 1px dashed var(--uix-danger-border); }
-  .uix-scheduling-timeline__overlay-label { position: absolute; top: var(--uix-space-1); left: var(--uix-space-1); right: var(--uix-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text); }
-  .uix-scheduling-timeline__now { position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised); width: 2px; transform: translateX(-50%); background: var(--uix-danger); }
-  .uix-scheduling-timeline__now-label { position: absolute; top: 0; left: var(--uix-space-1); padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); background: var(--uix-danger); color: var(--uix-danger-fg); font-size: var(--uix-text-eyebrow); white-space: nowrap; }
-  .uix-scheduling-timeline__marker { position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised); border-left: 2px dashed var(--uix-warning); }
+  .uix-scheduling-timeline__lane-meta { font-size: var(--uix-text-meta); color: var(--timeline-chrome-text-quiet); }
+  .uix-scheduling-timeline__track { position: relative; flex: 1 0 auto; min-height: calc(var(--uix-timeline-rows, 1) * var(--timeline-bar-row) + 2 * var(--uix-space-2)); }
+
+  /* the axis: it stays at the top of a timeline that scrolls inside itself */
+  .uix-scheduling-timeline__row--axis { position: sticky; top: 0; z-index: var(--uix-z-sticky); }
+  .uix-scheduling-timeline__row--axis .uix-scheduling-timeline__lane-label { background: var(--timeline-chrome-surface-quiet); color: var(--timeline-chrome-text-quiet); font-size: var(--uix-text-meta); font-weight: 600; }
+  .uix-scheduling-timeline__axis { min-height: var(--timeline-axis-height); background: var(--timeline-chrome-surface-quiet); }
+  .uix-scheduling-timeline__tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--timeline-chrome-line); }
+  .uix-scheduling-timeline__tick[data-major] { border-left-color: var(--timeline-chrome-line-strong); }
+  .uix-scheduling-timeline__tick-label { position: absolute; top: 50%; left: var(--uix-space-1); transform: translateY(-50%); white-space: nowrap; font-size: var(--uix-text-meta); font-variant-numeric: tabular-nums; color: var(--timeline-chrome-text-quiet); }
+  .uix-scheduling-timeline__tick[data-major] .uix-scheduling-timeline__tick-label { color: var(--timeline-chrome-text); font-weight: 600; }
+  /* a repeated hour says which one it is: its UTC offset, under the hour */
+  .uix-scheduling-timeline__tick-offset { display: block; font-size: var(--uix-text-eyebrow); font-weight: 400; line-height: 1; }
+  /* sub-ticks: the day labels take the upper line of a taller axis, the hours the lower one */
+  .uix-scheduling-timeline__grid[data-sub-ticks] .uix-scheduling-timeline__tick:not([data-minor]) > .uix-scheduling-timeline__tick-label { top: var(--uix-space-1); transform: none; }
+  .uix-scheduling-timeline__tick[data-minor] { top: auto; height: 1.25rem; }
+  .uix-scheduling-timeline__tick[data-minor] > .uix-scheduling-timeline__tick-label { top: auto; bottom: var(--timeline-gap); transform: none; font-size: var(--uix-text-eyebrow); }
+
+  /* notes under the axis, one for the column of a day */
+  .uix-scheduling-timeline__row--notes { background: var(--timeline-chrome-surface-quiet); }
+  .uix-scheduling-timeline__row--notes > .uix-scheduling-timeline__lane-label { background: var(--timeline-chrome-surface-quiet); padding-block: 0; }
+  .uix-scheduling-timeline__row--notes > .uix-scheduling-timeline__track { min-height: 1.75rem; }
+  .uix-scheduling-timeline__column-note { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; min-width: 0; padding: 0 var(--uix-space-1); border-left: 1px solid var(--timeline-chrome-line); overflow: hidden; white-space: nowrap; font-size: var(--uix-text-meta); color: var(--timeline-chrome-text); }
+
+  /* the body: the rows, and under them one layer that holds each grid line, window, marker and
+     the now-line once. `isolation` keeps the sticky lane labels under the sticky axis. */
+  .uix-scheduling-timeline__body { position: relative; isolation: isolate; }
+  .uix-scheduling-timeline__layer { position: absolute; inset: 0; display: flex; pointer-events: none; }
+  /* the layer repeats the lane column, unseen, so its track is exactly as wide as the tracks of the rows */
+  .uix-scheduling-timeline__layer > .uix-scheduling-timeline__lane-label { position: static; visibility: hidden; }
+  .uix-scheduling-timeline__layer > .uix-scheduling-timeline__track { min-height: 0; }
+  /* a click on the empty part of a lane reaches the window drawn under it */
+  .uix-scheduling-timeline__body > .uix-scheduling-timeline__row > .uix-scheduling-timeline__track { pointer-events: none; }
+  .uix-scheduling-timeline__spacer { flex: none; }
+  .uix-scheduling-timeline__gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--timeline-chrome-line); }
+  .uix-scheduling-timeline__gridline[data-major] { background: var(--timeline-chrome-line-strong); }
+  .uix-scheduling-timeline__gridline[data-minor] { background: repeating-linear-gradient(to bottom, var(--timeline-chrome-line) 0 2px, transparent 2px 6px); }
+
+  /* Fixed rows. With groups, a window or marker limited to lanes, or a virtual window, every row
+     has the height the component counts with: a lane is its sub-rows, a head is one line, and a
+     label that does not fit is cut. A plain timeline keeps rows that grow with their label. */
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body > .uix-scheduling-timeline__row { height: calc(var(--uix-timeline-rows, 1) * var(--timeline-bar-row) + var(--timeline-lane-pad)); }
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body .uix-scheduling-timeline__lane-label { padding-block: 0; overflow: hidden; }
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body .uix-scheduling-timeline__track { min-height: 0; }
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body :is(.uix-scheduling-timeline__lane-name, .uix-scheduling-timeline__lane-meta) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* a group: one row. Its head band is lifted over the layer and opaque, so nothing shows through
+     the name. Collapsed, that row is all there is of the group; when a window covers a lane it
+     hides, the row has a strip under the head, one sub-row tall and not lifted, where the window
+     (and the grid lines) are drawn with nothing over them. */
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body > .uix-scheduling-timeline__row--group { flex-direction: column; height: var(--timeline-head); background: var(--timeline-chrome-surface-quiet); }
+  .uix-scheduling-timeline[data-fixed] .uix-scheduling-timeline__body > .uix-scheduling-timeline__row--group[data-strip] { height: calc(var(--timeline-head) + var(--timeline-bar-row)); }
+  .uix-scheduling-timeline__group-head { position: relative; flex: 1 1 var(--timeline-head); display: flex; min-height: 0; background: var(--timeline-chrome-surface-quiet); }
+  .uix-scheduling-timeline__group-strip { flex: 0 0 calc(var(--timeline-bar-row) - 1px); }
+  .uix-scheduling-timeline__group-label { position: sticky; left: 0; z-index: var(--uix-z-sticky); display: flex; align-items: center; gap: var(--uix-space-3); min-width: 0; padding: 0 var(--uix-space-2); background: var(--timeline-chrome-surface-quiet); white-space: nowrap; }
+  .uix-scheduling-timeline__group-toggle { display: inline-flex; align-items: center; gap: var(--uix-space-2); min-height: 1.75rem; padding: 0 var(--uix-space-2); border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
+  .uix-scheduling-timeline__group-toggle:hover { background: var(--timeline-chrome-surface); }
+  /* the chevron is two borders, so it survives forced colours; it points down while the group is open */
+  .uix-scheduling-timeline__group-chevron { flex: none; width: 0.5rem; height: 0.5rem; margin-top: -0.1875rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
+  .uix-scheduling-timeline__group-toggle[aria-expanded="false"] > .uix-scheduling-timeline__group-chevron { margin-top: 0; transform: rotate(-45deg); }
+  .uix-scheduling-timeline__group-name { overflow: hidden; text-overflow: ellipsis; }
+  .uix-scheduling-timeline__group-meta { color: var(--timeline-chrome-text-quiet); font-size: var(--uix-text-meta); }
+  .uix-scheduling-timeline__group-summary { display: inline-flex; align-items: center; gap: var(--uix-space-2); font-size: var(--uix-text-meta); }
+  .uix-scheduling-timeline__group-count { font-weight: 600; font-variant-numeric: tabular-nums; }
+
+  /* windows: one element each, neutral, told apart by pattern and words */
+  .uix-scheduling-timeline__overlay { position: absolute; top: 0; bottom: 0; display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-inline: 1px solid var(--timeline-window-edge); border-radius: 0; background-color: var(--timeline-window-surface); color: var(--timeline-window-text); font: inherit; text-align: start; }
+  button.uix-scheduling-timeline__overlay { pointer-events: auto; cursor: pointer; }
+  /* the ring is drawn inside: a clip would cut an outline that sits outside the box */
+  button.uix-scheduling-timeline__overlay:focus-visible { outline-offset: -2px; }
+  /* limited to its lanes: the clip is the rows of those lanes, written by the component in row units */
+  :is(.uix-scheduling-timeline__overlay, .uix-scheduling-timeline__marker)[data-scope="lanes"] { clip-path: var(--uix-timeline-clip, none); }
+  .uix-scheduling-timeline__overlay[data-pattern="diagonal"] { background-image: repeating-linear-gradient(45deg, var(--timeline-window-ink) 0 1px, transparent 1px 6px); }
+  .uix-scheduling-timeline__overlay[data-pattern="cross"] { background-image: repeating-linear-gradient(45deg, var(--timeline-window-ink) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, var(--timeline-window-ink) 0 1px, transparent 1px 6px); }
+  .uix-scheduling-timeline__overlay[data-pattern="dotted"] { background-image: radial-gradient(circle, var(--timeline-window-ink) 1px, transparent 1.5px); background-size: 5px 5px; }
+  /* the words sit on their own patch of the window colour, so the hatch never runs under them.
+     The component puts them at the top of a lane (--uix-timeline-label-top, in row units): the
+     first lane of each run of rows the window covers. */
+  .uix-scheduling-timeline__overlay-label { position: absolute; top: calc(var(--uix-timeline-label-top, 0%) + var(--timeline-gap)); left: var(--timeline-gap); display: flex; gap: var(--uix-space-1); max-width: calc(100% - 2 * var(--timeline-gap)); padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); background: var(--timeline-window-surface); overflow: hidden; white-space: nowrap; font-size: var(--uix-text-meta); line-height: 1.25rem; }
+  .uix-scheduling-timeline__overlay-kind { flex: none; font-weight: 600; }
+  .uix-scheduling-timeline__overlay-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+  .uix-scheduling-timeline__overlay-scope { flex: 0 2 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
+
+  /* now: one neutral line with its word; a point marker: one dashed line */
+  .uix-scheduling-timeline__now { position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised); width: 2px; transform: translateX(-50%); background: var(--timeline-chrome-now); }
+  .uix-scheduling-timeline__now-label { position: sticky; top: var(--timeline-axis-height); display: block; width: max-content; margin-left: var(--uix-space-1); padding: 0 var(--uix-space-1); border-radius: var(--uix-radius-xs); background: var(--timeline-chrome-now); color: var(--timeline-chrome-now-text); font-size: var(--uix-text-eyebrow); line-height: 1.5; white-space: nowrap; }
+  .uix-scheduling-timeline__marker { position: absolute; top: 0; bottom: 0; z-index: var(--uix-z-raised); border-left: 2px dashed var(--timeline-marker-line); }
+
+  /* bars */
   .uix-scheduling-timeline__items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
-  .uix-scheduling-timeline__slot { position: absolute; top: calc(var(--uix-space-2) + var(--uix-timeline-row, 0) * 2.25rem); height: 2rem; min-width: 0.5rem; }
+  /* a bar is never a smaller target than --timeline-bar-min (24px) on either side. The component
+     measures that length and packs bars as at least that wide, so two drawn at it never cover each other. */
+  .uix-scheduling-timeline__slot { position: absolute; top: calc(var(--uix-space-2) + var(--uix-timeline-row, 0) * var(--timeline-bar-row)); height: var(--timeline-bar); min-width: var(--timeline-bar-min); pointer-events: auto; }
+  /* the default look is the `committed` status with no band: a plain outlined bar */
   .uix-scheduling-timeline__item {
-    display: flex; align-items: center; gap: var(--uix-space-2); width: 100%; height: 100%; padding: 0 var(--uix-space-2); overflow: hidden;
-    border: 0; border-left: 3px solid var(--uix-info); border-radius: var(--uix-radius-sm); background: var(--uix-info-bg); color: var(--uix-info-text);
-    font: inherit; font-size: var(--uix-text-meta); text-align: start; white-space: nowrap; cursor: pointer;
+    position: relative; display: flex; align-items: center; gap: var(--uix-space-1); width: 100%; height: 100%; padding: 0 var(--uix-space-2); overflow: hidden;
+    border: 1px solid var(--timeline-status-edge); border-radius: var(--uix-radius-sm); background: var(--timeline-status-surface); color: var(--timeline-status-text);
+    font: inherit; font-size: var(--uix-text-meta); line-height: 1.25rem; text-align: start; cursor: pointer;
   }
-  .uix-scheduling-timeline__item-title { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
-  .uix-scheduling-timeline__item-meta { overflow: hidden; text-overflow: ellipsis; opacity: .85; }
-  .uix-scheduling-timeline__item[data-state="conflicted"], .uix-scheduling-timeline__item[data-state="blackout-violation"] { border-color: var(--uix-danger); background: var(--uix-danger-bg); color: var(--uix-danger-text); }
-  .uix-scheduling-timeline__item[data-state="in-progress"] { border-color: var(--uix-success); background: var(--uix-success-bg); color: var(--uix-text); }
-  /* overlap with another bar in the lane: hatched, so it reads without colour */
-  .uix-scheduling-timeline__item[data-conflict] { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, currentColor 20%, transparent) 6px 9px); }
+  /* the text wraps and only its first line shows: a long label is cut at a word, never in one.
+     The empty box in front is a place to break before the first word, so a first word that does
+     not fit goes to the hidden second line too: no part of a word (or of a time) is ever shown. */
+  .uix-scheduling-timeline__item-title { flex: 1 1 auto; min-width: 0; max-height: 1.25rem; overflow: hidden; font-weight: 600; }
+  .uix-scheduling-timeline__item-title::before { content: ""; display: inline-block; }
+  .uix-scheduling-timeline__item-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-scheduling-timeline__item-markers { flex: none; display: inline-flex; align-items: center; gap: var(--timeline-gap); }
+
+  /* status: line style, weight and dimming only */
+  .uix-scheduling-timeline__item[data-status="tentative"] { border-style: dashed; border-color: var(--timeline-status-edge-strong); }
+  .uix-scheduling-timeline__item[data-status="live"] { border-color: var(--timeline-status-edge-strong); }
+  /* the live dot is a border, so it survives forced colours */
+  .uix-scheduling-timeline__item[data-status="live"]::before { content: ""; flex: none; border: 0.1875rem solid currentColor; border-radius: 50%; }
+  .uix-scheduling-timeline__item[data-status="done"] { border-style: none none solid; background: var(--timeline-status-surface-quiet); color: var(--timeline-status-text-dim); }
+  .uix-scheduling-timeline__item[data-status="dead"] { border-style: dotted; border-color: var(--timeline-status-edge-strong); color: var(--timeline-status-text-dim); }
+  .uix-scheduling-timeline__item[data-status="dead"] > .uix-scheduling-timeline__item-title { text-decoration: line-through; }
+
+  /* band: `medium` is a heavier leading edge, `high` is the one fill */
+  .uix-scheduling-timeline__item[data-band="medium"] { border-left: 3px solid var(--timeline-band-medium-edge); }
+  .uix-scheduling-timeline__item[data-band="high"] { border-color: var(--timeline-band-high-fill); background: var(--timeline-band-high-fill); color: var(--timeline-band-high-text); }
+  .uix-scheduling-timeline__item[data-band="high"]:is([data-status="tentative"], [data-status="dead"]) { border-color: var(--timeline-band-high-text); }
+  /* done keeps the whole fill on the high band (dimming it would cost the text its contrast). Its
+     cue is a line in the text colour inside the fill, near the bottom: on the edge it would be the
+     colour of the row and the bar would only look shorter. */
+  .uix-scheduling-timeline__item[data-band="high"][data-status="done"] { border-style: solid; background-image: linear-gradient(to top, transparent 0 3px, var(--timeline-band-high-text) 3px 5px, transparent 5px); }
+
+  /* shares time with another bar of its lane (only while `flagOverlaps` is on): hatched in its own text colour */
+  .uix-scheduling-timeline__item[data-conflict]::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 6px, currentColor 6px 9px); opacity: 0.2; pointer-events: none; }
   .uix-scheduling-timeline__item[data-clipped-start] { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
-  .uix-scheduling-timeline__item[data-clipped-end] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+  .uix-scheduling-timeline__item[data-clipped-end] { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }
   .uix-scheduling-timeline__item[data-movable] { cursor: grab; touch-action: none; }
-  .uix-scheduling-timeline__item[data-dragging] { cursor: grabbing; box-shadow: var(--uix-shadow-popover); position: relative; z-index: var(--uix-z-raised); }
-  .uix-scheduling-timeline__item:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; position: relative; z-index: var(--uix-z-raised); }
-  .uix-scheduling-timeline__empty { margin: 0; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
-  .uix-scheduling-timeline__state { padding: var(--uix-space-8); border: 1px dashed var(--uix-border-strong); border-radius: var(--uix-radius-lg); text-align: center; }
+  .uix-scheduling-timeline__item[data-dragging] { cursor: grabbing; box-shadow: var(--uix-shadow-popover); z-index: var(--uix-z-raised); }
+  .uix-scheduling-timeline__item:focus-visible { z-index: var(--uix-z-raised); }
+
+  /* markers on a bar: a shape (or the icon of the consumer) with text; the text is in the accessible name */
+  .uix-scheduling-timeline__item-marker { flex: none; display: inline-flex; align-items: center; color: var(--timeline-marker-ink); }
+  .uix-scheduling-timeline__item .uix-scheduling-timeline__item-marker { color: inherit; }
+  .uix-scheduling-timeline__item-marker-icon { display: inline-flex; width: 0.6875rem; height: 0.6875rem; }
+  .uix-scheduling-timeline__item-marker-icon > svg { width: 100%; height: 100%; }
+  .uix-scheduling-timeline__item-marker-label { margin-left: var(--uix-space-1); }
+  .uix-scheduling-timeline__item-marker[data-glyph]::before { content: ""; width: 0.625rem; height: 0.625rem; background: currentColor; }
+  .uix-scheduling-timeline__item-marker[data-glyph="neutral"]::before { border-radius: 50%; }
+  .uix-scheduling-timeline__item-marker[data-glyph="warning"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
+  .uix-scheduling-timeline__item-marker[data-glyph="refused"]::before { clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
+
+  /* a pending move: an outline where the bar would go; the bar itself stays put. Only an edge, so
+     what is under it stays readable, and in two tones: the dashes in the text colour, with a line
+     of the surface colour on each side. On the row the dashes carry it (3:1 and more); over a bar,
+     the high band included, whichever tone the fill is not close to does. It is lifted as far as
+     a focused bar is, and comes after the bars, so the bar being moved does not hide it. */
+  .uix-scheduling-timeline__ghost { position: absolute; top: calc(var(--uix-space-2) + var(--uix-timeline-row, 0) * var(--timeline-bar-row)); height: var(--timeline-bar); min-width: var(--timeline-bar-min); border: 2px dashed var(--timeline-chrome-ghost); border-radius: var(--uix-radius-sm); pointer-events: none; z-index: var(--uix-z-raised); }
+  .uix-scheduling-timeline__ghost::before, .uix-scheduling-timeline__ghost::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--timeline-chrome-ghost-halo); border-radius: inherit; }
+  .uix-scheduling-timeline__ghost::before { inset: -4px; }
+  .uix-scheduling-timeline__ghost[data-sent] { border-style: dotted; }
+
+  /* the narrowest bar, measured by the component (never drawn) */
+  .uix-scheduling-timeline__bar-min { position: absolute; top: 0; left: 0; width: var(--timeline-bar-min); height: 0; visibility: hidden; pointer-events: none; }
+  /* the three row units, measured by a virtual timeline to turn a scroll position into rows */
+  .uix-scheduling-timeline__probe { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
+  .uix-scheduling-timeline__probe > span { display: block; height: var(--timeline-bar-row); }
+  .uix-scheduling-timeline__probe > span:nth-child(2) { height: var(--timeline-lane-pad); }
+  .uix-scheduling-timeline__probe > span:nth-child(3) { height: var(--timeline-head); }
+
+  .uix-scheduling-timeline__empty { margin: 0; color: var(--timeline-chrome-text-quiet); font-size: var(--uix-text-meta); }
+  .uix-scheduling-timeline__state { padding: var(--uix-space-8); border: 1px dashed var(--timeline-chrome-line-strong); border-radius: var(--uix-radius-lg); text-align: center; }
 }

package/styles/components/search-suggest.css

@@ -92,6 +92,8 @@
   }
   .uix-search-suggest__footer:first-child { margin-top: 0; border-top: 0; border-radius: var(--uix-radius-sm); }
   .uix-search-suggest__footer[data-active] { background: var(--uix-bg-hover); }
+  /* a line under the options that is not an option (HAR-1648): "More matches. Keep typing…" */
+  .uix-search-suggest__note { padding: var(--uix-space-2) var(--uix-space-3); border-top: 1px solid var(--uix-border); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
 
   .uix-search-suggest__state {
     display: flex; align-items: center; justify-content: center; gap: var(--uix-space-2); flex-wrap: wrap;

package/styles/components/tree.css

@@ -27,3 +27,11 @@
   .uix-tree__item[aria-expanded="false"] > .uix-tree__row .uix-tree__toggle { transform: rotate(-90deg); }
   .uix-tree__item[aria-expanded="false"] > .uix-tree__group { display: none; }
 }
+
+/* Children loaded on expand (HAR-1382): the loading row and the failed row under a node. Both
+   are ordinary tree rows, so the arrow keys reach them; the failed row is the Retry control. */
+@layer uix.components {
+  .uix-tree__status { display: inline-flex; align-items: center; gap: var(--uix-space-2); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-tree__status--error { color: var(--uix-danger-text); }
+  .uix-tree__retry { color: var(--uix-link); text-decoration: underline; text-underline-offset: .15em; }
+}