@tensor_1/tokens 2.23.0 → 2.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.23.0",
+  "version": "2.25.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/arrival.css

@@ -0,0 +1,28 @@
+/* uix arrival — "you are here": the highlight a page puts on the element a link or a search result
+   landed on (a settings row, a section, a comment). Add the class after scrolling the target into
+   view; it tints the target and fades out on its own. To replay it, remove the class, force a
+   reflow, and add it again. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-arrival {
+    border-radius: var(--uix-radius-md);
+    scroll-margin-block: var(--uix-space-10);
+    animation: uix-arrival 2.4s var(--uix-ease-out) both;
+  }
+  @keyframes uix-arrival {
+    0%, 40% { background-color: var(--uix-brand-muted); box-shadow: 0 0 0 var(--uix-space-2) var(--uix-brand-muted); }
+    100% { background-color: transparent; box-shadow: 0 0 0 var(--uix-space-2) transparent; }
+  }
+
+  /* no fade: a steady outline for two seconds, then nothing */
+  @keyframes uix-arrival-static {
+    0% { outline: 2px solid var(--uix-ring); outline-offset: var(--uix-space-1); }
+    100% { outline: 2px solid transparent; outline-offset: var(--uix-space-1); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .uix-arrival { animation: uix-arrival-static 2s step-end both; }
+  }
+
+  @media (forced-colors: active) {
+    .uix-arrival { animation: uix-arrival-static 2s step-end both; }
+  }
+}

package/styles/components/card.css

@@ -3,6 +3,7 @@
   .uix-card { background: var(--uix-surface); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); box-shadow: var(--uix-shadow-sm); }
   .uix-card__header { padding: var(--uix-space-5) var(--uix-space-6); border-bottom: 1px solid var(--uix-border); display: flex; align-items: center; gap: var(--uix-space-3); }
   .uix-card__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  .uix-card__title-row { display: flex; align-items: baseline; gap: var(--uix-space-1); min-width: 0; font-size: var(--uix-text-h3); }
   .uix-card__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
   .uix-card__body { padding: var(--uix-space-6); }
   /* wraps at 320 px (WCAG 1.4.10) */

package/styles/components/diff-viewer.css

@@ -8,6 +8,9 @@
   .uix-diff-viewer__versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--uix-border); }
   .uix-diff-viewer__versions>div { min-width:0; padding:var(--uix-space-3); border-right:1px solid var(--uix-border); background:var(--uix-surface); } .uix-diff-viewer__versions>div:last-child { border-right:0; } .uix-diff-viewer__versions strong { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
   .uix-diff-viewer__versions pre { max-height:14rem; overflow:auto; margin-top:var(--uix-space-2); color:var(--uix-text); font-family:var(--uix-font-mono); white-space:pre-wrap; overflow-wrap:anywhere; }
+  /* controlSize: entry rows are controls too; md follows --uix-control-h */
+  .uix-diff-viewer[data-control-size="md"] .uix-diff-viewer__entry summary { min-height:var(--uix-control-h); }
+  .uix-diff-viewer[data-control-size="lg"] .uix-diff-viewer__entry summary { min-height:44px; }
   .uix-diff-viewer__actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-2); padding:var(--uix-space-3); border-top:1px solid var(--uix-border); }
   .uix-diff-viewer--empty { padding:var(--uix-space-6); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); color:var(--uix-text-muted); }
   @media (max-width:720px) { .uix-diff-viewer__versions { grid-template-columns:1fr; } }

package/styles/components/editorial-home.css

@@ -98,6 +98,7 @@
   /* ── section heads ─────────────────────────────────────────────────────────── */
   .uix-section-head { min-height: 36px; margin-bottom: var(--uix-space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-4); }
   .uix-section-title { margin: 0; font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); font-weight: 400; letter-spacing: var(--uix-tracking-tight); }
+  .uix-section-head__title-row { display: flex; align-items: baseline; gap: var(--uix-space-1); min-width: 0; font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); }
   .uix-section-link { color: var(--uix-text-hushed); font-size: var(--uix-text-meta); text-decoration: none; }
   /* already a quiet link by its own design — hover/focus parity with link.css */
   .uix-section-link:is(:hover, :focus-visible) { color: var(--uix-text); text-decoration: underline; }

package/styles/components/info-tip.css

@@ -0,0 +1,41 @@
+/* uix info tip — a small ? that opens a plain-text help panel beside a page title, section title
+   or field label. The panel is a top-layer .uix-popover (React <InfoTip> positions it with the
+   shared overlay engine); this file owns the ? and the panel's type and measure.
+   The ? is a fixed 9px filled glyph (no circle), whatever the size of the text it follows, and
+   sits superscript-style at the top right of that text: the .uix-info-tip box sits on the text's
+   baseline and raises the glyph so its top overshoots the capitals (`1cap`) by 0.2em. A glyph
+   whose top only met the cap line spanned the whole height of 15px capitals and read as centred.
+   That holds for any line-height, inline in running text too. The slot rows (page header, card, section
+   head, field) align on the first baseline and set the title's font-size, so `cap` measures the
+   title. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-info-tip { display: inline-block; flex: none; line-height: 1; }
+
+  .uix-info-tip__button {
+    position: relative;
+    /* no text inside, so its baseline is its bottom edge: raise its top 0.2em above cap height */
+    display: inline-block; vertical-align: calc(1cap + 0.2em - 9px);
+    width: 7px; height: 9px; padding: 0; margin: 0;
+    border: 0; border-radius: var(--uix-radius-sm);
+    background: transparent; color: var(--uix-text-muted);
+    cursor: pointer;
+    transition: color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  /* 25px hit area around the 7x9px glyph (WCAG 2.5.8), without changing the layout */
+  .uix-info-tip__button::before { content: ""; position: absolute; inset: -8px -9px; }
+  .uix-info-tip__button svg { width: 7px; height: 9px; display: block; }
+  .uix-info-tip__button:hover,
+  .uix-info-tip[data-open] .uix-info-tip__button { color: var(--uix-accent); }  /* the primary-button blue */
+  .uix-info-tip__button:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+
+  .uix-popover.uix-info-tip__panel {
+    width: max-content; max-width: min(360px, calc(100vw - 16px));
+    padding: var(--uix-space-3);
+    font-size: var(--uix-text-meta); font-weight: 400; line-height: var(--uix-leading-body);
+    color: var(--uix-text); text-align: start; text-transform: none; letter-spacing: normal;
+    overflow-wrap: anywhere;
+  }
+  /* single line breaks inside a paragraph are kept; blank lines already split paragraphs */
+  .uix-info-tip__panel p { margin: 0; white-space: pre-line; }
+  .uix-info-tip__panel p + p { margin-top: var(--uix-space-2); }
+}

package/styles/components/input.css

@@ -3,6 +3,10 @@
   .uix-field { display: flex; flex-direction: column; gap: var(--uix-space-2); }
   .uix-field__label { font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-text); }
   .uix-field__label[data-required]::after { content: " *"; color: var(--uix-danger-text); }
+  /* label + help ? (React Field `help`): the ? stays OUTSIDE the <label> (a button inside a label
+     is its activation target), so the row draws the required marker after the ? */
+  .uix-field__label-row { display: flex; align-items: baseline; gap: var(--uix-space-1); min-width: 0; font-size: var(--uix-text-meta); }
+  .uix-field__required { font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-danger-text); }
   /* message slot for hint / error / success — reserves one line so an appearing error never
      shifts the layout (UIX-FIX-04); the React <Field> always renders it. */
   .uix-field__msg { font-size: var(--uix-text-meta); line-height: 1.45; min-height: 1.45em; }

package/styles/components/page-header.css

@@ -4,6 +4,9 @@
   .uix-page-header__titles { flex: 1; min-width: 220px; }
   .uix-page-header__eyebrow { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
   .uix-page-header__title { font-size: var(--uix-text-h2); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
+  /* title + help ? (React PageHeader `help`): the ? sits beside the heading, not inside it; the row
+     carries the title size so the ? (info-tip.css) lands at the top right of the title text */
+  .uix-page-header__title-row { display: flex; align-items: baseline; gap: var(--uix-space-1); min-width: 0; font-family: var(--uix-font-heading); font-size: var(--uix-text-h2); }
   .uix-page-header__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); margin-top: var(--uix-space-2); max-width: 70ch; }
   .uix-page-header__actions { display: flex; gap: var(--uix-space-2); align-items: center; flex-wrap: wrap; }
 }

package/styles/components/search-suggest.css

@@ -0,0 +1,116 @@
+/* uix search suggest — a search field with a suggestion list (name · where it lives · context).
+   Depends only on --uix-* tokens. React: <SearchSuggest>. */
+@layer uix.components {
+  .uix-search-suggest { position: relative; width: 100%; }
+
+  /* field: leading magnifier, trailing spinner / clear / shortcut hint */
+  .uix-search-suggest__field { position: relative; display: flex; align-items: center; }
+  .uix-search-suggest__input { padding-left: 38px; padding-right: 44px; }
+  .uix-search-suggest__lead {
+    position: absolute; left: 12px; display: inline-flex; color: var(--uix-text-muted); pointer-events: none;
+  }
+  .uix-search-suggest__lead svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-search-suggest__trail {
+    position: absolute; right: var(--uix-space-2); display: inline-flex; align-items: center; gap: var(--uix-space-2);
+  }
+  .uix-search-suggest__spinner { width: 14px; height: 14px; }
+  .uix-search-suggest__clear {
+    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
+    border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer;
+  }
+  .uix-search-suggest__clear svg { width: 14px; height: 14px; }
+  .uix-search-suggest__clear:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-search-suggest__clear:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+
+  .uix-search-suggest--lg .uix-search-suggest__input { height: calc(var(--uix-control-h) + 8px); padding-left: 44px; font-size: var(--uix-text-h3); }
+  .uix-search-suggest--lg .uix-search-suggest__lead { left: 14px; }
+  .uix-search-suggest--lg .uix-search-suggest__lead svg { width: var(--uix-icon-lg); height: var(--uix-icon-lg); }
+
+  /* the suggestion list */
+  .uix-search-suggest__popup:not([hidden]) {
+    position: absolute; z-index: var(--uix-z-dropdown); inset-inline: 0; top: calc(100% + var(--uix-space-1));
+    display: flex; flex-direction: column; max-height: min(28rem, 70vh); overflow-y: auto; overscroll-behavior: contain;
+    padding: var(--uix-space-1); background: var(--uix-surface-2); border: 1px solid var(--uix-border);
+    border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover);
+    animation: uix-search-suggest-in var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  @keyframes uix-search-suggest-in { from { opacity: 0; transform: translateY(-4px); } }
+
+  .uix-search-suggest__header {
+    display: flex; align-items: baseline; justify-content: space-between; gap: var(--uix-space-3);
+    padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1);
+  }
+  .uix-search-suggest__heading {
+    font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted);
+  }
+  .uix-search-suggest__header-action {
+    border: 0; padding: 0; background: none; font: inherit; font-size: var(--uix-text-meta); color: var(--uix-link); cursor: pointer;
+    border-radius: var(--uix-radius-xs);
+  }
+  .uix-search-suggest__header-action:hover { text-decoration: underline; }
+  .uix-search-suggest__header-action:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+
+  .uix-search-suggest__list { list-style: none; margin: 0; padding: 0; }
+  .uix-search-suggest__list:empty { display: none; }
+
+  .uix-search-suggest__option {
+    display: flex; align-items: flex-start; gap: var(--uix-space-3);
+    padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); cursor: pointer; color: var(--uix-text);
+  }
+  .uix-search-suggest__option[data-active] { background: var(--uix-bg-hover); }
+  .uix-search-suggest__icon { display: inline-flex; flex: none; margin-top: 2px; color: var(--uix-text-muted); }
+  .uix-search-suggest__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-search-suggest__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+  .uix-search-suggest__title {
+    font-size: var(--uix-text-body); font-weight: 500; line-height: 1.35;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+
+  /* breadcrumb: middle crumbs give way first so the outermost and the innermost stay readable */
+  .uix-search-suggest__meta {
+    display: flex; min-width: 0; overflow: hidden; white-space: nowrap;
+    font-size: var(--uix-text-meta); line-height: 1.35; color: var(--uix-text-muted);
+  }
+  .uix-search-suggest__crumb { flex: 0 1000 auto; min-width: 1.75em; overflow: hidden; text-overflow: ellipsis; }
+  .uix-search-suggest__crumb:first-child, .uix-search-suggest__crumb:last-child { flex-shrink: 1; min-width: 3em; }
+  .uix-search-suggest__crumb:only-child { min-width: 0; }
+  .uix-search-suggest__crumb + .uix-search-suggest__crumb::before { content: "›"; margin-inline: var(--uix-space-1); color: var(--uix-text-hushed); }
+
+  .uix-search-suggest__desc {
+    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
+    font-size: var(--uix-text-meta); line-height: 1.45; color: var(--uix-text-muted);
+  }
+
+  /* matched letters: weight, not a highlighter — reads as Windows / Android settings search does */
+  .uix-search-suggest__match { background: none; color: inherit; font-weight: 700; }
+  .uix-search-suggest__desc .uix-search-suggest__match { color: var(--uix-text); font-weight: 600; }
+
+  .uix-search-suggest__footer {
+    margin-top: var(--uix-space-1); padding: var(--uix-space-2) var(--uix-space-3);
+    border-top: 1px solid var(--uix-border); border-radius: 0 0 var(--uix-radius-sm) var(--uix-radius-sm);
+    font-size: var(--uix-text-meta); font-weight: 500; color: var(--uix-link); cursor: pointer;
+  }
+  .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); }
+
+  .uix-search-suggest__state {
+    display: flex; align-items: center; justify-content: center; gap: var(--uix-space-2); flex-wrap: wrap;
+    padding: var(--uix-space-4) var(--uix-space-3); text-align: center; font-size: var(--uix-text-meta); color: var(--uix-text-muted);
+  }
+  .uix-search-suggest__state .uix-spinner { width: 16px; height: 16px; }
+
+  /* touch-sized rows on narrow screens */
+  @media (max-width: 640px) {
+    .uix-search-suggest__popup:not([hidden]) { max-height: 60vh; }
+    .uix-search-suggest__option { min-height: 44px; padding-block: var(--uix-space-3); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .uix-search-suggest__popup:not([hidden]) { animation: none; }
+  }
+
+  @media (forced-colors: active) {
+    .uix-search-suggest__option[data-active], .uix-search-suggest__footer[data-active] { outline: 2px solid Highlight; outline-offset: -2px; }
+    .uix-search-suggest__match { text-decoration: underline; }
+  }
+}

package/styles/components/view-menu.css

@@ -1,16 +1,48 @@
-/* uix table View menu — consolidates density / zebra / freeze / columns into one popover.
-   Reuses .uix-popover (surface + animation), .uix-segmented, .uix-switch. Depends only on --uix-* tokens. */
+/* uix table View menu — density / zebra / freeze / columns in one panel with its OWN surface, so it
+   renders opaque inside a Popover or inside an overlay shell that adds no chrome. Section titles stay
+   pinned while the panel scrolls; a column row is grip · checkbox · name · ⋯.
+   Reuses .uix-segmented, .uix-switch, .uix-checkbox, .uix-menu__item. Depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-view-menu { min-width: 248px; padding: var(--uix-space-2); }
+  .uix-view-menu {
+    min-width: 280px; max-width: 360px; max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain;
+    padding: var(--uix-space-2); color: var(--uix-text);
+    background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover);
+  }
+  /* Inside a .uix-popover the popover is the surface; don't draw a second border and shadow. */
+  .uix-popover > .uix-view-menu { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
   .uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
   .uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
-  .uix-view-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
+  .uix-view-menu__label {
+    position: sticky; top: calc(-1 * var(--uix-space-2)); z-index: var(--uix-z-raised); padding-block: var(--uix-space-1); margin-bottom: var(--uix-space-1);
+    background: var(--uix-surface-2); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted);
+  }
   .uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
   .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
   .uix-view-menu .uix-segmented { display: flex; width: 100%; }
   .uix-view-menu .uix-segmented__option { flex: 1; text-align: center; }
-  .uix-view-menu__cols { display: flex; flex-direction: column; gap: var(--uix-space-1); max-height: 180px; overflow: auto; }
-  .uix-view-menu__cols .uix-menu__item { font-size: var(--uix-text-meta); }
+  .uix-view-menu__cols { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--uix-space-1)); padding: 0; list-style: none; }
+  .uix-view-menu__footer { border-top: 1px solid var(--uix-border); padding: var(--uix-space-1) 0 0; }
+  /* Column rows. Hover paints the WHOLE row (grip, checkbox, name, ⋯ together), never just the label. */
+  .uix-view-menu__col { display: flex; align-items: center; gap: var(--uix-space-1); border-radius: var(--uix-radius-sm); }
+  .uix-view-menu__col:hover { background: var(--uix-bg-hover); }
+  .uix-view-menu__col[data-dragging] { opacity: .55; }
+  .uix-view-menu[data-dragging] { cursor: grabbing; user-select: none; }
+  /* The toggle is a .uix-checkbox (or, for a required column, a plain span) — not a .uix-menu__item,
+     whose svg rule would recolour and resize the check glyph. */
+  .uix-view-menu__col-toggle { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-1); font-size: var(--uix-text-body); color: var(--uix-text); }
+  span.uix-view-menu__col-toggle { cursor: default; }
+  /* A required column has no checkbox; the box's width is kept so every name starts at the same x. */
+  .uix-view-menu__col-box { flex: none; width: 18px; }
+  .uix-view-menu__col-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-view-menu__grip { display: grid; place-items: center; flex: none; width: 20px; height: 28px; padding: 0; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: grab; touch-action: none; }
+  .uix-view-menu__grip svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-view-menu__actions { display: flex; flex: none; align-items: center; }
+  .uix-view-menu__row-menu { min-width: 160px; padding: var(--uix-space-1); }
+  /* Grip and ⋯ are quiet until the row is hovered or holds focus, the grip is in use, or the menu is
+     open — at 75%, the same WCAG 1.4.11 floor as the saved-views row (see below). */
+  :is(.uix-view-menu__grip, .uix-view-menu__actions) { opacity: .75; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-view-menu__col:is(:hover, :focus-within, [data-dragging]) :is(.uix-view-menu__grip, .uix-view-menu__actions),
+  .uix-view-menu__actions:has([aria-expanded="true"]) { opacity: 1; }
   /* Saved views: optional titled sections in one scrolling menu; a row is grip · name · overflow.
      Hover and selection paint the WHOLE row; the selected row is an accent tint, never a check glyph. */
   .uix-saved-views { max-width: 400px; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }