@tensor_1/tokens 2.40.1 → 2.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.40.1",
+  "version": "2.40.2",
   "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/scheduling-calendar.css

@@ -45,7 +45,9 @@
     --calendar-hour: 3rem;
     --calendar-gutter: 3.5rem;
 
-    display:grid; gap:var(--uix-space-3); min-width:0; color:var(--calendar-chrome-text);
+    /* one column that never grows past its container: a child's minimum (a long marker, a 7-day grid)
+       scrolls or wraps inside the calendar instead of widening it (TENSOR HAR-1519) */
+    display:grid; grid-template-columns:minmax(0,1fr); gap:var(--uix-space-3); min-width:0; color:var(--calendar-chrome-text);
   }
   .uix-scheduling-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); flex-wrap:wrap; }
   .uix-scheduling-calendar__notice { padding:var(--uix-space-2) var(--uix-space-3); border:1px solid var(--calendar-chrome-line); border-radius:var(--uix-radius-sm); background:var(--calendar-chrome-surface-quiet); font-size:var(--uix-text-meta); }
@@ -196,7 +198,11 @@
   /* 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-row > .uix-scheduling-calendar__markers { flex:0 1 auto; flex-wrap:wrap; min-width:0; gap:var(--uix-space-1) var(--uix-space-2); font-size:var(--uix-text-meta); }
+  /* a full-width agenda row has room to say a marker whole: its label wraps instead of setting the row's width (TENSOR HAR-1519) */
+  .uix-scheduling-calendar__agenda-row > .uix-scheduling-calendar__markers > * { min-width:0; }
+  .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker { flex:0 1 auto; min-width:0; }
+  .uix-scheduling-calendar__agenda-row .uix-scheduling-calendar__marker-label { white-space:normal; overflow-wrap:break-word; }
   .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); }
@@ -218,6 +224,7 @@
   .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-label { white-space:nowrap; overflow-wrap:normal; }
   .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 */

package/styles/components/segmented.css

@@ -2,12 +2,16 @@
 @layer uix.components {
   /* min-inline-size: 0 + max-inline-size: 100% — a <fieldset> defaults to min-inline-size:
      min-content, so a segmented control on one could never be narrower than its longest words
-     and ran past its container at 320 px (WCAG 1.4.10). The options wrap instead. */
-  .uix-segmented { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
+     and ran past its container at 320 px (WCAG 1.4.10). The options wrap instead: onto a new
+     row first, then inside an option at a space, and inside a word only when that one word is
+     wider than the whole container (break-word, not anywhere). Before, an option broke inside a word
+     as soon as its row was tight (TENSOR HAR-1519: "Monat" read "Mona / t" in the calendar view switcher at 375 px, the
+     class HAR-1601 fixed for the ViewMenu alone). */
+  .uix-segmented { display: inline-flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
   .uix-segmented__option {
     border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
     padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
-    white-space: normal; overflow-wrap: anywhere;
+    min-inline-size: 0; white-space: normal; overflow-wrap: break-word; hyphens: manual;
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-segmented__option:hover { color: var(--uix-text); }