@tensor_1/tokens 2.24.0 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.24.0",
+  "version": "2.26.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/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/rich-text.css

@@ -130,6 +130,11 @@
   .uix-rich-text--composer .uix-rich-text__counter,
   .uix-rich-text--composer .uix-rich-text__status { flex: none; margin-right: 0; }
   .uix-rich-text--composer .uix-rich-text__bar > :last-child:not(.uix-rich-text__toolbar) { margin-left: auto; }
+  /* a status message (uploading, failed, images off) takes its own row under the tools: inline, a
+     long message squeezed the toolbar to a sliver on a 320 px phone (TENSOR HAR-749) */
+  .uix-rich-text--composer .uix-rich-text__bar:has(> .uix-rich-text__status:not(:empty)) { flex-wrap: wrap; }
+  .uix-rich-text--composer .uix-rich-text__bar:has(> .uix-rich-text__status:not(:empty)) > .uix-rich-text__toolbar { flex-basis: 0; }
+  .uix-rich-text--composer .uix-rich-text__status:not(:empty) { order: 1; flex: 1 0 100%; }
   .uix-rich-text--composer .uix-rich-text__source.uix-textarea { border: 0; box-shadow: none; }
 
   /* link popover */

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; }
+  }
+}