@tensor_1/tokens 2.46.0 → 2.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.46.0",
+  "version": "2.47.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/busy-region.css

@@ -0,0 +1,47 @@
+/* uix busy region — keep what is on screen while it is fetched again (HAR-2582, motion
+   standard §2.5). A refetch dims the content under an indeterminate bar along the top instead
+   of swapping it for skeletons, so nothing the person was looking at vanishes. The React
+   BusyBar sets [data-shown] after 300 ms and holds it 500 ms; the parent reads it with :has(),
+   so `BusyRegion` and `TableWrap refreshing` stay server components. Depends only on --uix-*
+   tokens. */
+@layer uix.components {
+  .uix-busy-region { position: relative; }
+  .uix-busy-region__content { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-busy-region:has(> .uix-busy-bar[data-shown]) > .uix-busy-region__content { opacity: .6; transition-duration: var(--uix-dur); }
+
+  .uix-busy-bar {
+    position: absolute; inset-block-start: 0; inset-inline: 0; z-index: var(--uix-z-sticky);
+    display: block; height: 2px; overflow: hidden; pointer-events: none;
+    opacity: 0; transition: opacity var(--uix-dur-exit) var(--uix-ease-out);
+  }
+  .uix-busy-bar[data-shown] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-busy-bar::before {
+    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
+    background: var(--uix-accent); transform: translateX(-100%);
+  }
+  /* constant motion is linear (§2.4) */
+  .uix-busy-bar[data-shown]::before { animation: uix-busy-sweep var(--uix-loop-progress) linear infinite; }
+  @keyframes uix-busy-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
+  /* right to left: the stripe starts at the right (inline-start) edge and sweeps leftwards */
+  @keyframes uix-busy-sweep-rtl { from { transform: translateX(100%); } to { transform: translateX(-250%); } }
+  .uix-busy-bar[data-shown]:dir(rtl)::before { animation-name: uix-busy-sweep-rtl; }
+
+  /* Reduced motion: no sweep; the full bar pulses (the kit's uix-pulse), so "still working" survives (§2.7). */
+  @media (prefers-reduced-motion: reduce) {
+    .uix-busy-bar::before { width: 100%; transform: none; }
+    /* !important: the kit's reduced-motion policy ends keyframes at once; a still-working signal opts back in */
+    .uix-busy-bar[data-shown]::before, .uix-busy-bar[data-shown]:dir(rtl)::before { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; }
+  }
+  @media (forced-colors: active) {
+    .uix-busy-bar::before { background: Highlight; }
+  }
+
+  /* A refreshing table: the bar sticks to the top of the scrolling wrap (over the sticky
+     header) and takes no room: it is 0 tall and draws its 2 px stripe below its own edge. It
+     clips sideways only (overflow-x: clip), so the sweep never widens the wrap's scroll area.
+     The rows dim; the header stays. */
+  .uix-table-wrap > .uix-busy-bar { position: sticky; inset-inline-start: 0; height: 0; overflow-x: clip; overflow-y: visible; z-index: calc(var(--uix-z-sticky) + 1); }
+  .uix-table-wrap > .uix-busy-bar::before { inset-block: 0 auto; height: 2px; }
+  .uix-table-wrap > .uix-table > tbody { transition: opacity var(--uix-dur-exit) var(--uix-ease-out); }
+  .uix-table-wrap:has(> .uix-busy-bar[data-shown]) > .uix-table > tbody { opacity: .6; transition-duration: var(--uix-dur); }
+}

package/styles/components/button.css

@@ -52,20 +52,49 @@
   .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; }
+  /* Pending (React `loading`, HAR-2580): the button stops taking presses at once but looks the
+     same for the first 300 ms; a fast action shows nothing new. It keeps full colour while it
+     works (a spinner, never a greyed-out control), which overrides the aria-disabled dim. */
+  .uix-btn[data-pending], .uix-btn:has(> [data-uix-btn-busy]) { opacity: 1; pointer-events: none; }
+
+  /* The spinner: `data-loading` (plain markup, shows at once) or React's delayed busy marker. */
+  .uix-btn:has(> [data-uix-btn-busy]), .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.
      TENSOR RX-125 (UIX-01): the ring was on-accent for every variant, so a
      loading secondary/outline/ghost button rendered blank. */
-  .uix-btn[data-loading]::after {
+  .uix-btn:has(> [data-uix-btn-busy])::after, .uix-btn[data-loading]::after {
     content: ""; position: absolute; width: 1em; height: 1em;
     border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
     color: var(--uix-text); animation: uix-spin var(--uix-loop-spin) linear infinite;
   }
-  @media (prefers-reduced-motion: reduce) { .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
-  .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
-  .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
-  .uix-btn--link[data-loading]::after { color: var(--uix-link); }
+  @media (prefers-reduced-motion: reduce) { .uix-btn:has(> [data-uix-btn-busy])::after, .uix-btn[data-loading]::after { animation: uix-pulse var(--uix-loop-pulse) var(--uix-ease-in-out) infinite !important; } }
+  .uix-btn--primary:has(> [data-uix-btn-busy])::after, .uix-btn--primary[data-loading]::after { color: var(--uix-accent-fg); }
+  .uix-btn--danger:has(> [data-uix-btn-busy])::after, .uix-btn--danger[data-loading]::after { color: var(--uix-danger-fg); }
+  .uix-btn--link:has(> [data-uix-btn-busy])::after, .uix-btn--link[data-loading]::after { color: var(--uix-link); }
+  /* The result face hides with the label while the spinner shows. */
+  .uix-btn:has(> [data-uix-btn-busy]) .uix-btn__result { visibility: hidden; }
+
+  /* Result (React `result`, HAR-2581): the label and both result wordings share one grid cell,
+     so the button is always as wide as the widest and nothing beside it moves. A result
+     crossfades in over the label (opacity only), holds, and fades back. Text and icon carry
+     the meaning; colour only tints the icon. */
+  .uix-btn__face { display: inline-grid; justify-items: center; align-items: center; }
+  .uix-btn__face > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; transition: opacity var(--uix-dur) var(--uix-ease-out); }
+  .uix-btn__result { opacity: 0; transition-duration: var(--uix-dur-exit); }
+  .uix-btn__face[data-result] > .uix-btn__label { opacity: 0; transition-duration: var(--uix-dur-exit-fast); }
+  .uix-btn__face[data-result="success"] > [data-kind="success"],
+  .uix-btn__face[data-result="error"] > [data-kind="error"] { opacity: 1; transition-duration: var(--uix-dur); }
+  .uix-btn--secondary .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="success"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="success"] svg { color: var(--uix-success-text); }
+  .uix-btn--secondary .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--outline .uix-btn__result[data-kind="error"] svg,
+  .uix-btn--ghost .uix-btn__result[data-kind="error"] svg { color: var(--uix-danger-text); }
+  .uix-btn--wrap .uix-btn__face > * { white-space: normal; }
+  .uix-btn--xs .uix-btn__face > * { gap: .25em; }
+  /* An icon-only button keeps its square: the result is the mark alone (the words are spoken). */
+  .uix-btn--icon .uix-btn__result-text { display: none; }
 
   /* attached group */
   .uix-btn-group { display: inline-flex; }