@tensor_1/tokens 2.33.0 → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.33.0",
+  "version": "2.35.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/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/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; }
@@ -140,9 +158,9 @@
 
   .uix-scheduling-calendar__empty { grid-column:1 / -1; position:sticky; left:0; padding:var(--uix-space-3); border-right:1px solid var(--calendar-chrome-line); border-bottom:1px solid var(--calendar-chrome-line); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text-quiet); }
 
-  .uix-scheduling-calendar__agenda ol { display:grid; gap:var(--uix-space-2); margin:0; padding:0; list-style:none; }
-  .uix-scheduling-calendar__agenda li>button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); padding:var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-md); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text); text-align:left; }
-  .uix-scheduling-calendar__agenda li>button>span:first-child { flex:1 1 auto; display:grid; gap:var(--uix-space-1); min-width:0; } .uix-scheduling-calendar__agenda li>button>span:first-child>span { color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__agenda > ol { display:grid; gap:var(--uix-space-2); margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__agenda > ol > li > button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); padding:var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-md); background:var(--calendar-chrome-surface); color:var(--calendar-chrome-text); text-align:left; }
+  .uix-scheduling-calendar__agenda > ol > li > button > span:first-child { flex:1 1 auto; display:grid; gap:var(--uix-space-1); min-width:0; } .uix-scheduling-calendar__agenda > ol > li > button > span:first-child > span { color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
   .uix-scheduling-calendar__status { flex:none; color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
 
   .uix-scheduling-calendar__legend { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-2) var(--uix-space-3); font-size:var(--uix-text-meta); color:var(--calendar-chrome-text-quiet); }
@@ -156,6 +174,76 @@
   .uix-scheduling-calendar__legend > span[data-state="in-progress"]::before { border:0.1875rem solid var(--calendar-status-text); border-radius:50%; width:0; height:0; }
   .uix-scheduling-calendar__legend > span:is([data-state="conflicted"],[data-state="blackout-violation"])::before { border:0; border-radius:0; background:var(--calendar-marker-ink); clip-path:polygon(50% 0,100% 100%,0 100%); }
 
+  /* ── Agenda grouped by day (HAR-1520) ─────────────────────────────────────────────────────
+     The consumer builds the groups. A heading per day with its window notes, then the rows.
+     A long agenda is a flat run of fixed-height rows inside its own scroller. */
+  .uix-scheduling-calendar__agenda-group + .uix-scheduling-calendar__agenda-group { margin-top:var(--uix-space-4); }
+  .uix-scheduling-calendar__agenda-head { position:sticky; top:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-1) var(--uix-space-3); padding:var(--uix-space-2); border-bottom:1px solid var(--calendar-chrome-line-strong); background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__agenda-heading { margin:0; font-size:var(--uix-text-meta); font-weight:600; }
+  .uix-scheduling-calendar__agenda-notes { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); min-width:0; margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__agenda-notes > li { min-width:0; margin:0; }
+  /* a window note is the window's bar from the grids, at rest in a line of text */
+  .uix-scheduling-calendar__agenda-notes .uix-scheduling-calendar__window { height:var(--calendar-lane); max-width:100%; margin:0; }
+  .uix-scheduling-calendar__agenda-rows { margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__agenda-rows > li { margin:0; border-bottom:1px solid var(--calendar-chrome-line); }
+  /* a row scrolled to by the keyboard stops below the sticky heading, not behind it */
+  .uix-scheduling-calendar__agenda-group :is(.uix-scheduling-calendar__agenda-row,.uix-scheduling-calendar__agenda-more) { scroll-margin-top:var(--uix-scheduling-calendar-agenda-head,3rem); }
+  .uix-scheduling-calendar__agenda-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--uix-space-1) var(--uix-space-2); width:100%; min-width:0; padding:var(--uix-space-2) var(--uix-space-1); border:0; border-radius:var(--uix-radius-xs); background:transparent; color:var(--calendar-chrome-text); text-align:left; cursor:pointer; outline-offset:-2px; }
+  .uix-scheduling-calendar__agenda-row:hover { background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__swatch { align-self:center; }
+  .uix-scheduling-calendar__agenda-time { flex:none; min-width:6.25rem; color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; }
+  /* the title takes the whole row before it wraps; it is never cut short of the row width */
+  .uix-scheduling-calendar__agenda-main { flex:1 1 12rem; display:grid; gap:var(--calendar-gap); min-width:0; overflow-wrap:anywhere; }
+  .uix-scheduling-calendar__agenda-meta { color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:wrap; gap:var(--uix-space-1) var(--uix-space-2); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__agenda-more,.uix-scheduling-calendar__agenda-continues { margin:0; padding:var(--uix-space-2) var(--uix-space-1); color:var(--calendar-chrome-text-quiet); font-size:var(--uix-text-meta); }
+  button.uix-scheduling-calendar__agenda-more { display:block; border:0; border-radius:var(--uix-radius-xs); background:transparent; color:var(--calendar-chrome-text); font-weight:600; text-align:left; text-decoration:underline; cursor:pointer; }
+  button.uix-scheduling-calendar__agenda-more:hover { background:var(--calendar-chrome-surface-quiet); }
+  .uix-scheduling-calendar__agenda--virtual { container:uix-scheduling-agenda / inline-size; max-height:min(70vh,40rem); overflow-y:auto; border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); }
+  /* the mounted rows; its padding stands in for the rows above and below them */
+  .uix-scheduling-calendar__agenda-window { box-sizing:content-box; min-width:0; }
+  .uix-scheduling-calendar__agenda-vrow { display:flex; align-items:center; height:44px; padding:0 var(--uix-space-2); border-bottom:1px solid var(--calendar-chrome-line); overflow:hidden; }
+  .uix-scheduling-calendar__agenda-vrow > * { flex:1 1 auto; min-width:0; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-head { position:static; padding:0; border:0; background:transparent; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-head { flex-wrap:nowrap; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-heading { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  /* a window note has a row of its own here: the bar from the grids, as wide as its words */
+  .uix-scheduling-calendar__agenda-vrow > .uix-scheduling-calendar__window { flex:0 1 auto; align-self:center; height:var(--calendar-lane); margin:0; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row { flex-wrap:nowrap; align-items:center; padding:0; white-space:nowrap; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-time { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
+  /* the title keeps a readable width; the markers give way first, their labels cut with an ellipsis */
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-main { flex:1 1 10rem; display:block; min-width:10rem; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-meta { margin-left:var(--uix-space-2); }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:nowrap; min-width:0; overflow:hidden; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers > span { flex:0 1 auto; display:inline-flex; min-width:0.6875rem; overflow:hidden; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker { flex:0 1 auto; min-width:0; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker::before,.uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker-icon { flex:none; }
+  .uix-scheduling-calendar__agenda-vrow .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__status { flex:none; }
+  /* a narrow long agenda (the component measures it): taller rows of three lines — the title, the time, then markers and status */
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-vrow { height:64px; }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto auto; align-content:center; gap:0 var(--uix-space-2); }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__swatch { grid-row:1 / span 3; }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-main { grid-column:2 / -1; grid-row:1; min-width:0; }
+  /* a time that names two days may not fit: each end keeps half the line and is cut on its own, so both stay in sight */
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-time { grid-column:2 / -1; grid-row:2; display:flex; min-width:0; overflow:visible; white-space:pre; }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-time-part { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers { grid-column:2; grid-row:3; justify-self:start; max-width:100%; }
+  .uix-scheduling-calendar__agenda--virtual[data-narrow] .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__status { grid-column:3; grid-row:3; max-width:50cqi; overflow:hidden; text-overflow:ellipsis; }
+  .uix-scheduling-calendar__agenda-vrow :is(.uix-scheduling-calendar__agenda-more,.uix-scheduling-calendar__agenda-continues) { padding:0; }
+
+  /* ── Month, counts only (HAR-1520): a narrow screen gets the day, its count and its markers ── */
+  /* the head of a cell is three lines here, the date over the count over the markers; the lanes and the cell height follow from it */
+  .uix-scheduling-calendar__grid[data-density="counts"] { --calendar-head:4rem; }
+  .uix-scheduling-calendar__grid[data-density="counts"],.uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__week { grid-template-columns:repeat(7,minmax(2.75rem,1fr)); }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__dayhead { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1.5rem 1.25rem 1.25rem; align-items:center; gap:0 var(--calendar-gap); }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__date { grid-column:1 / -1; grid-row:1; width:100%; height:1.5rem; }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__day > .uix-scheduling-calendar__date { height:1.5rem; }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__badge { grid-column:1; grid-row:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__count { grid-column:2; grid-row:2; display:inline-flex; align-items:center; }
+  /* a count of any length keeps its own line; the markers have the next one */
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__markers { grid-column:1 / -1; grid-row:3; justify-self:end; max-width:100%; overflow:hidden; }
+  .uix-scheduling-calendar__grid[data-density="counts"] .uix-scheduling-calendar__weekday { padding-inline:var(--calendar-pad); overflow:hidden; }
+
   /* ── Week / Day time grid (HAR-1509) ─────────────────────────────────────────────────────────
      Four stacked rows share one column template: the day heads, the window strip, the top lane
      and the hours. A day column is as tall as its day: --uix-scheduling-calendar-hours is the