@tensor_1/tokens 2.41.0 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.41.0",
+  "version": "2.42.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/button.css

@@ -38,6 +38,20 @@
   .uix-btn--icon.uix-btn--sm { width: 28px; }
   .uix-btn--icon.uix-btn--lg { width: 44px; }
 
+  /* A label that may wrap (HAR-1813, WCAG 1.4.10). The size sets a floor instead of a fixed
+     height, so a long human-language label breaks onto a second line in a narrow or zoomed
+     column instead of pushing it wider. Opt-in (`wrap` on Button / ButtonLink): dense staff
+     rows keep one line. Never on an icon-only button, which keeps its square. */
+  .uix-btn--wrap:not(.uix-btn--icon) {
+    height: auto; min-height: var(--uix-control-h); max-width: 100%;
+    padding-block: var(--uix-space-2); white-space: normal; line-height: 1.25;
+    text-align: center; text-wrap: balance; overflow-wrap: anywhere;
+  }
+  .uix-btn--wrap.uix-btn--xs:not(.uix-btn--icon) { min-height: 24px; padding-block: var(--uix-space-1); }
+  .uix-btn--wrap.uix-btn--sm:not(.uix-btn--icon) { min-height: 28px; padding-block: var(--uix-space-1); }
+  .uix-btn--wrap.uix-btn--lg:not(.uix-btn--icon) { min-height: 44px; }
+  .uix-btn--wrap.uix-btn--link { min-height: 0; padding-block: 0; }
+
   .uix-btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
   /* The label is hidden (color: transparent), so the ring cannot inherit
      currentColor from the button; each variant names its own foreground.

package/styles/components/description-list.css

@@ -1,7 +1,29 @@
 /* uix description / key-value list — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--uix-space-3) var(--uix-space-6); }
+  /* The list is its own inline-size container, so it stacks by ITS width, not the viewport's
+     (HAR-2032): a list in a phone card, a 320 px side rail or a narrow column gets the same
+     treatment. Inline-size containment replaces the list's content width with
+     contain-intrinsic-inline-size, both where a box is sized by its content (a flex row, a
+     max-content popover) and where a parent sizes from its children's minimum (a grid with
+     auto tracks). 0 would collapse the list in a flex row; a wide value would push a phone
+     page sideways. 12rem is neither: it fits a card on a 280 px screen, and a list in a flex
+     row is 12rem wide (stacked) unless you size it (`flex: 1`, a width). */
+  .uix-dl {
+    display: grid; grid-template-columns: max-content 1fr; gap: var(--uix-space-3) var(--uix-space-6);
+    container: uix-dl / inline-size; contain-intrinsic-inline-size: 12rem; min-width: 0;
+  }
   .uix-dl dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
   /* min-width:0 + anywhere: a long unbroken value (URL, id, hash) wraps instead of widening the grid (HAR-1353) */
   .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; min-width: 0; overflow-wrap: anywhere; }
+
+  /* Narrow: each label sits above its value and both take the full width, so a long label
+     ("Neue Tickets pro Person und Stunde") can no longer squeeze the value to a letter per
+     line or push it off a 320 px screen (TENSOR HAR-1651). The label is pulled toward its own
+     value, so the gap inside a pair (4 px) is smaller than the gap between pairs (12 px). */
+  /* Pairs may sit in display:contents <div>s, which HTML allows. The pull assumes the default
+     12 px row gap: shrink the list's row-gap below 8 px and a stacked label touches its value. */
+  @container uix-dl (max-width: 22rem) {
+    .uix-dl > :is(dt, dd), .uix-dl > div > :is(dt, dd) { grid-column: 1 / -1; }
+    .uix-dl > dt, .uix-dl > div > dt { margin-bottom: calc(-1 * var(--uix-space-2)); overflow-wrap: anywhere; }
+  }
 }

package/styles/components/detail-layout.css

@@ -1,6 +1,8 @@
 /* uix detail layout — two-column record (main + side meta). Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-detail { display: grid; grid-template-columns: 1fr 280px; gap: var(--uix-space-5); align-items: start; }
+  /* No side column: the main column takes the whole width instead of leaving 280 px empty (HAR-1814). */
+  .uix-detail:not(:has(> .uix-detail__side)) { grid-template-columns: minmax(0, 1fr); }
   .uix-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--uix-space-4); }
   .uix-detail__side { display: flex; flex-direction: column; gap: var(--uix-space-4); }
   .uix-detail-page { display: flex; flex-direction: column; gap: var(--uix-space-5); }

package/styles/components/drawer.css

@@ -33,4 +33,8 @@
   .uix-drawer__header { 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-drawer__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
   .uix-drawer__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
+  /* the React close button (it was inline styles until HAR-2029 gave it a pending state) */
+  .uix-drawer__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
+  /* `pending` (HAR-2029): a save is in flight, so the close button does nothing and says so */
+  .uix-drawer__close[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
 }

package/styles/components/editorial-home.css

@@ -23,6 +23,28 @@
   .uix-searchbar__wrap { position: relative; }
   .uix-searchbar__wrap > svg { position: absolute; top: 50%; left: 14px; z-index: var(--uix-z-raised); width: 17px; height: 17px; color: var(--uix-text-hushed); transform: translateY(-50%); pointer-events: none; }
 
+  /* React SearchBar (HAR-2030). Without a submit button the field takes the whole row (an
+     empty auto track would still leave the column gap). The clear button sits inside the
+     field's end, and the browser's own search clear (×) is not drawn beside it. */
+  .uix-searchbar > :only-child { grid-column: 1 / -1; }
+  .uix-searchbar__wrap:has(> .uix-searchbar__clear) > .uix-input::-webkit-search-cancel-button,
+  .uix-searchbar__wrap:has(> .uix-searchbar__clear) > .uix-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
+  .uix-searchbar__wrap:has(> .uix-searchbar__clear) > .uix-input { padding-right: 44px; }
+  .uix-searchbar__clear {
+    position: absolute; top: 50%; right: 8px; z-index: var(--uix-z-raised); transform: translateY(-50%);
+    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
+    border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer;
+  }
+  .uix-searchbar__clear svg { width: 14px; height: 14px; }
+  .uix-searchbar__clear:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-searchbar__clear:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+  /* md: a control-height field for a header or a toolbar (the bare contract is the 44 px public size) */
+  .uix-searchbar--md .uix-input, .uix-searchbar--md .uix-btn { min-height: 0; }
+  .uix-searchbar--md .uix-input { padding-left: 36px; }
+  .uix-searchbar--md .uix-searchbar__wrap > svg { left: 12px; width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-searchbar--md .uix-searchbar__wrap:has(> .uix-searchbar__clear) > .uix-input { padding-right: 36px; }
+  .uix-searchbar--md .uix-searchbar__clear { right: 6px; width: 24px; height: 24px; }
+
   /* The grid fits ITSELF rather than counting columns: a fixed count is only safe for label
      lengths you already know, and `1fr` takes an auto minimum, so nowrap button labels push
      the track past the viewport (LD-11: 382 px of content at 320 px on the German portal).
@@ -122,8 +144,11 @@
   .uix-content-list { margin: 0; padding: 0; list-style: none; }
   .uix-content-list__item { min-height: 68px; padding: var(--uix-space-3) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
   .uix-content-list__item:last-child { border-bottom: 0; }
-  .uix-content-list__title { margin: 0; font-weight: 600; }
-  .uix-content-list__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  /* One long unbroken word (a German compound, a file name) breaks inside the row instead of
+     widening the page (HAR-1811). */
+  .uix-content-list__item > div { min-width: 0; }
+  .uix-content-list__title { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
+  .uix-content-list__meta { margin: var(--uix-space-1) 0 0; color: var(--uix-text-hushed); font-size: var(--uix-text-meta); min-width: 0; overflow-wrap: anywhere; }
 
   /* ── resource grid ─────────────────────────────────────────────────────────── */
   .uix-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uix-space-2); }
@@ -178,6 +203,8 @@
     .uix-notice__position { flex: 1; }
 
     .uix-searchbar { grid-template-columns: 1fr; }
+    /* a header or toolbar field keeps its button beside it */
+    .uix-searchbar--md { grid-template-columns: minmax(0, 1fr) auto; }
 
     .uix-page-intro { margin-top: var(--uix-space-5); gap: var(--uix-space-5); }
     /* auto-fit already narrows the tracks; only the touch target grows here. Re-pinning a

package/styles/components/input.css

@@ -13,6 +13,7 @@
   .uix-field__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-field__error { font-size: var(--uix-text-meta); color: var(--uix-danger-text); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
   .uix-field__error svg, .uix-field__success svg { width: 14px; height: 14px; flex: none; }
+  .uix-field__warning { font-size: var(--uix-text-meta); color: var(--uix-warning-text); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
   .uix-field__success { font-size: var(--uix-text-meta); color: var(--uix-success); display: inline-flex; align-items: center; gap: var(--uix-space-2); }
 
   .uix-input {
@@ -38,6 +39,10 @@
   /* validation microinteractions */
   .uix-input[data-valid] { border-color: var(--uix-success); }
   .uix-input[data-valid]:focus { box-shadow: 0 0 0 3px var(--uix-success-bg); }
+  /* "Check this": a value to confirm, not an error (HAR-1814; e.g. a field an assistant filled).
+     Invalid wins when both are set. */
+  .uix-input[data-warning]:not([aria-invalid="true"]) { border-color: var(--uix-warning); }
+  .uix-input[data-warning]:not([aria-invalid="true"]):focus { box-shadow: 0 0 0 3px var(--uix-warning-bg); }
   .uix-input-group--has-trailing .uix-input { padding-right: 38px; }
   .uix-input-group__icon--trailing { left: auto; right: 10px; }
 }

package/styles/components/modal.css

@@ -28,6 +28,9 @@
   .uix-dialog__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
   .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  /* `pending` (HAR-2029): a save is in flight, so the close button does nothing and says so */
+  .uix-dialog__close[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+  .uix-dialog__close[aria-disabled="true"]:hover { background: transparent; color: var(--uix-text-muted); }
   .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
   /* wraps at 320 px (WCAG 1.4.10) */
   .uix-dialog__footer { display: flex; flex-wrap: wrap; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }

package/styles/components/popover.css

@@ -13,6 +13,11 @@
   [popover].uix-popover[data-placement^="left"] { --popover-from: translateX(var(--uix-lift)); }
   [popover].uix-popover[data-placement^="right"] { --popover-from: translateX(calc(-1 * var(--uix-lift))); }
   [popover].uix-popover:popover-open { opacity: 1; transform: none; }
+  /* A closed popover is display:none by the UA stylesheet only, so a component that sets its
+     own display (.uix-popconfirm, .uix-filter-popover: grid) stayed laid out while closed: an
+     invisible fixed box at the viewport's top-left that took clicks (HAR-2029). The display
+     transition above still keeps it painted while it fades out. */
+  [popover].uix-popover:not(:popover-open) { display: none; }
   @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: var(--popover-from); } }
   [popover].uix-popover[data-uix-placing]:popover-open { opacity: 0; transform: var(--popover-from); transition: none; }
 }

package/styles/components/sidebar.css

@@ -24,6 +24,9 @@
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-navitem:hover { background: var(--uix-bg-hover); color: var(--uix-text); text-decoration: none; }
+  /* Its own ring, drawn inside: the global outset ring is cut off by the sidebar's
+     overflow-x: hidden (HAR-1814). */
+  .uix-navitem:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
   /* active uses --uix-link (the brightened-on-dark accent) not raw --uix-accent: the deep accent
      fails AA as text on the brand-muted tint in dark; link reads legibly in both themes. */
   .uix-navitem[aria-current="page"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 500; }

package/styles/components/table.css

@@ -26,7 +26,9 @@
      plain-text th — inherited font/colour, no chrome — with an inset overlay so the whole
      cell stays the click target (the sticky th is its containing block). The sort arrow and
      ordinal stay as th pseudo-content so they never pollute the button's accessible name. */
-  .uix-th__sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
+  /* letter-spacing and text-transform too: the UA button style resets them, so a sortable
+     header lost the eyebrow tracking and case its neighbours keep (HAR-1814). */
+  .uix-th__sortbtn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
   .uix-th__sortbtn::before { content: ""; position: absolute; inset: 0; }
 
   .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
@@ -112,7 +114,8 @@
     width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
-  .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
+  /* :focus-within as well: a keyboard user on the id link sees the arrow too (HAR-1814). */
+  .uix-table tbody tr:hover .uix-id-cell__arrow, .uix-table tbody tr:focus-within .uix-id-cell__arrow { opacity: 1; }
 
   /* ── selection column + select-all ────────────────────────────────────────────── */
   .uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
@@ -135,7 +138,8 @@
   .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
   .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-rowact svg { width: 16px; height: 16px; display: block; }
-  .uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
+  /* A row the keyboard is in shows its actions, as a hovered one does (HAR-1814). */
+  .uix-table tbody tr:hover .uix-rowact, .uix-table tbody tr:focus-within .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
   .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
 
   /* ── expandable inline row ─────────────────────────────────────────────────────── */

package/styles/components/tooltip.css

@@ -21,6 +21,13 @@
   .uix-tooltip__bubble :is(ul, ol) { margin: 0; padding-left: 1.1em; }
   .uix-tooltip__bubble :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--uix-space-1); }
   .uix-tooltip__bubble:popover-open { opacity: 1; }
+  /* A shortcut in the bubble (HAR-2031: Tooltip `shortcut`, Button `shortcut`): after the text,
+     the keys drawn as outlines in the bubble's own colour, so they keep its contrast in both
+     themes. A Button's hint bubble is one line: the name of an icon button, then the keys. */
+  .uix-tooltip__shortcut { display: inline-flex; vertical-align: middle; margin-inline-start: var(--uix-space-2); }
+  .uix-tooltip__shortcut:first-child { margin-inline-start: 0; }
+  .uix-tooltip__shortcut .uix-kbd { color: inherit; background: transparent; border-color: color-mix(in srgb, currentColor 45%, transparent); }
+  .uix-tooltip__bubble--hint { white-space: nowrap; }
   @starting-style { .uix-tooltip__bubble:popover-open { opacity: 0; } }
 
   /* legacy CSS-only tooltip — clipped by overflow ancestors; superseded by .uix-tooltip__bubble */