@tensor_1/tokens 2.14.2 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.14.2",
+  "version": "2.15.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/breadcrumbs.css

@@ -1,6 +1,6 @@
 /* uix breadcrumbs — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-breadcrumbs { display: flex; align-items: center; gap: var(--uix-space-2); flex-wrap: wrap; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-breadcrumbs { display: flex; align-items: center; gap: var(--uix-space-2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-breadcrumbs a { color: var(--uix-text-muted); text-decoration: none; }
   /* already a quiet link by its own design — hover/focus parity with the quiet-link
      contract in link.css, so the keyboard state matches the pointer state. */

package/styles/components/card.css

@@ -6,4 +6,15 @@
   .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); }
   .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; gap: var(--uix-space-2); justify-content: flex-end; }
+  .uix-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-card--interactive:is(:hover, :focus-visible) { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; transform: translateY(-1px); }
+  .uix-card--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-collapsible { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
+  .uix-collapsible__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); cursor: pointer; list-style: none; }
+  .uix-collapsible__summary::-webkit-details-marker { display: none; }
+  .uix-collapsible__title { color: var(--uix-text); font-weight: 600; }
+  .uix-collapsible__meta { margin-left: var(--uix-space-2); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-collapsible__chevron { transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-collapsible[open] .uix-collapsible__chevron { transform: rotate(180deg); }
+  .uix-collapsible__body { padding: 0 var(--uix-space-5) var(--uix-space-5); }
 }

package/styles/components/combobox.css

@@ -1,6 +1,8 @@
 /* uix combobox / listbox surface — depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-combobox { position: relative; }
+  .uix-combobox > .uix-input { width: 100%; }
+  .uix-combobox__listbox { position: absolute; z-index: var(--uix-z-dropdown); inset-inline: 0; top: calc(100% + var(--uix-space-1)); max-height: 240px; overflow-y: auto; }
   .uix-listbox {
     list-style: none; margin: 0; padding: var(--uix-space-1); min-width: 200px;
     background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
@@ -11,6 +13,7 @@
     cursor: pointer; display: flex; align-items: center; gap: var(--uix-space-2);
   }
   .uix-listbox__option:hover, .uix-listbox__option[aria-selected="true"], .uix-listbox__option[data-active] { background: var(--uix-bg-hover); }
+  .uix-listbox__option[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
   .uix-listbox__option[aria-selected="true"] { color: var(--uix-link); }
   .uix-listbox__empty { padding: var(--uix-space-3); text-align: center; color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
 }

package/styles/components/detail-layout.css

@@ -3,5 +3,11 @@
   .uix-detail { display: grid; grid-template-columns: 1fr 280px; gap: var(--uix-space-5); align-items: start; }
   .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); }
+  .uix-detail-page__back { align-self: flex-start; }
+  .uix-detail-page__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--uix-space-3); margin: 0; }
+  .uix-detail-page__metrics > div { padding: var(--uix-space-3) var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
+  .uix-detail-page__metrics dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-detail-page__metrics dd { margin: var(--uix-space-1) 0 0; color: var(--uix-text); font-size: var(--uix-text-h3); font-weight: 600; }
   @media (max-width: 820px) { .uix-detail { grid-template-columns: 1fr; } }
 }

package/styles/components/form.css

@@ -11,4 +11,9 @@
   .uix-validation-summary strong { color: var(--uix-danger-text); }
   .uix-validation-summary ul { margin: var(--uix-space-2) 0 0; padding-left: var(--uix-space-5); }
   .uix-validation-summary a { color: var(--uix-danger-text); text-decoration: underline; }
+  .uix-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-5); padding-block: var(--uix-space-3); }
+  .uix-toggle-row + .uix-toggle-row { border-top: 1px solid var(--uix-border); }
+  .uix-toggle-row__copy { min-width: 0; }
+  .uix-toggle-row__label { color: var(--uix-text); font-weight: 500; }
+  .uix-toggle-row__description { margin-top: var(--uix-space-1); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
 }

package/styles/components/link.css

@@ -96,3 +96,9 @@
      link.css is imported last, so a blanket display here would flatten them. */
   a:is(.uix-card, .uix-stat, .uix-kanban__card) { display: block; }
 }
+
+@layer uix.components {
+  .uix-related-links__title { margin: 0 0 var(--uix-space-3); font-size: var(--uix-text-h3); }
+  .uix-related-links__list { display: grid; gap: var(--uix-space-2); margin: 0; padding: 0; list-style: none; }
+  .uix-related-links__list li { display: flex; justify-content: space-between; gap: var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+}

package/styles/components/modal.css

@@ -29,3 +29,8 @@
   .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
   .uix-dialog__footer { display: flex; 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); }
 }
+
+@layer uix.components {
+  .uix-prompt { display: grid; gap: var(--uix-space-3); }
+  .uix-prompt__actions { margin: var(--uix-space-3) calc(var(--uix-space-5) * -1) calc(var(--uix-space-5) * -1); }
+}

package/styles/components/sidebar.css

@@ -34,7 +34,7 @@
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
   .uix-navitem__star { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-navitem__star svg { width: 15px; height: 15px; }
-  .uix-navitem:hover .uix-navitem__star { opacity: 1; }
+  .uix-navitem:hover .uix-navitem__star, .uix-navitem:focus-within .uix-navitem__star, .uix-navitem__star:focus-visible { opacity: 1; }
   .uix-navitem__star[data-on] { opacity: 1; color: var(--uix-warning); }
   .uix-navitem__star[data-on] svg { fill: currentColor; }
 
@@ -47,13 +47,13 @@
     border: 0; background: transparent; cursor: pointer; color: inherit;
   }
   .uix-favourites__list { display: flex; flex-direction: column; gap: calc(var(--uix-space-1) / 4); list-style: none; margin: 0; padding: 0; }
-  .uix-favourites__empty { padding: calc(var(--uix-space-1) * 1.5) var(--uix-space-2); color: color-mix(in srgb, var(--uix-text) 50%, transparent); }
+  .uix-favourites__empty { padding: calc(var(--uix-space-1) * 1.5) var(--uix-space-2); color: var(--uix-text-hushed); }
   .uix-favourites__row { position: relative; display: flex; align-items: center; }
   .uix-favourites__link { min-width: 0; flex: 1; }
   .uix-favourites__menu-trigger {
     margin-left: auto; display: inline-flex; height: 20px; width: 20px; flex-shrink: 0;
     align-items: center; justify-content: center; border: 0; border-radius: calc(var(--uix-radius-xs) / 2);
-    background: transparent; cursor: pointer; color: color-mix(in srgb, var(--uix-text) 50%, transparent);
+    background: transparent; cursor: pointer; color: var(--uix-text-muted);
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-favourites__row:hover .uix-favourites__menu-trigger,
@@ -96,7 +96,16 @@
   .uix-sidebar[data-collapsed] .uix-sidebar__brand,
   .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
   .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
+  .uix-sidebar[data-nav="rail"] .uix-navitem__label,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__badge,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__star,
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__eyebrow,
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__brand,
+  .uix-sidebar[data-nav="rail"] .uix-navgroup__chevron,
+  .uix-sidebar[data-nav="rail"] .uix-navgroup__panel { display: none; }
   /* center the icon-only rail; head keeps just the toggle, centered */
   .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
   .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
+  .uix-sidebar[data-nav="rail"] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
+  .uix-sidebar[data-nav="rail"] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
 }

package/styles/components/states.css

@@ -4,10 +4,20 @@
   .uix-empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--uix-bg-subtle); color: var(--uix-text-muted); }
   .uix-empty__icon svg { width: 22px; height: 22px; }
   .uix-empty__title { font-size: var(--uix-text-h3); font-weight: 600; color: var(--uix-text); }
+  .uix-empty > p { max-width: 52ch; margin: 0; }
+  .uix-empty--drawer { padding: var(--uix-space-5); }
+  .uix-empty--inline { align-items: flex-start; padding: var(--uix-space-4); text-align: left; }
+  .uix-empty--page, .uix-empty--full-page { min-height: min(55vh, 520px); justify-content: center; }
   /* error tone — ErrorState reuses .uix-empty with a danger-toned icon */
   .uix-empty__icon--danger { background: var(--uix-danger-bg); color: var(--uix-danger); }
+  .uix-empty__icon--warning { background: var(--uix-warning-bg); color: var(--uix-warning-text); }
+  .uix-stack--compact { gap: var(--uix-space-2); }
 
   .uix-skeleton { background: linear-gradient(90deg, var(--uix-bg-subtle) 25%, var(--uix-bg-hover) 50%, var(--uix-bg-subtle) 75%); background-size: 200% 100%; animation: uix-shimmer 1.4s linear infinite; border-radius: var(--uix-radius-sm); }
   .uix-skeleton--text { height: 12px; border-radius: var(--uix-radius-pill); }
   .uix-skeleton--circle { border-radius: 50%; }
+  .uix-operation { display: grid; gap: var(--uix-space-3); padding: var(--uix-space-4); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
+  .uix-operation__head { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); }
+  .uix-operation__description { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  .uix-operation__action { justify-self: start; }
 }

package/styles/components/table-toolbar.css

@@ -17,4 +17,7 @@
   .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
   .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
   .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
+  .uix-filter-popover { display: grid; gap: var(--uix-space-4); min-width: 260px; padding: var(--uix-space-4); }
+  .uix-filter-popover .uix-label { display: grid; gap: var(--uix-space-2); }
+  .uix-filter-popover__actions { display: flex; justify-content: flex-end; gap: var(--uix-space-2); }
 }

package/styles/components/view-menu.css

@@ -11,4 +11,9 @@
   .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-saved-views__row { display: flex; align-items: center; }
+  .uix-saved-views__row > .uix-menu__item { min-width: 0; flex: 1; }
+  .uix-saved-views__pin { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--uix-radius-sm); background: transparent; color: var(--uix-text-muted); cursor: pointer; }
+  .uix-saved-views__pin:is(:hover, :focus-visible), .uix-saved-views__pin[data-on] { color: var(--uix-warning-text); background: var(--uix-bg-hover); }
+  .uix-saved-views__footer { border-top: 1px solid var(--uix-border); margin-top: var(--uix-space-1); padding: var(--uix-space-2); }
 }