@tensor_1/tokens 2.21.0 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.21.0",
+  "version": "2.22.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/avatar.css

@@ -8,6 +8,10 @@
   .uix-avatar img { width: 100%; height: 100%; object-fit: cover; }
   .uix-avatar--sm { width: 24px; height: 24px; font-size: var(--uix-text-eyebrow); }
   .uix-avatar--lg { width: 44px; height: 44px; }
+  .uix-avatar--xl { width: 64px; height: 64px; font-size: var(--uix-text-h3); }
+  .uix-avatar--2xl { width: 96px; height: 96px; font-size: var(--uix-text-h2); }
+  .uix-avatar--xl .uix-avatar__status { width: 14px; height: 14px; right: 1px; bottom: 1px; }
+  .uix-avatar--2xl .uix-avatar__status { width: 18px; height: 18px; border-width: 3px; right: 4px; bottom: 4px; }
   .uix-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--uix-surface); background: var(--uix-success); }
   .uix-avatar-group { display: inline-flex; }
   .uix-avatar-group .uix-avatar { box-shadow: 0 0 0 2px var(--uix-surface); margin-left: calc(-1 * var(--uix-space-2)); }

package/styles/components/brand-profiles.css

@@ -1,9 +1,12 @@
 @layer uix.components {
   .uix-brand-profiles { display:grid; grid-template-columns:minmax(16rem,.8fr) minmax(18rem,1.2fr); gap:var(--uix-space-5); color:var(--uix-text); }
-  .uix-brand-profiles__form { display:grid; align-content:start; gap:var(--uix-space-3); }
-  .uix-brand-profiles__form label { display:grid; gap:var(--uix-space-2); font-weight:600; }
-  .uix-brand-profiles__colors { display:grid; grid-template-columns:1fr 1fr; gap:var(--uix-space-3); }
+  .uix-brand-profiles__form { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; gap:var(--uix-space-3); min-width:0; }
+  .uix-brand-profiles__form label { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--uix-space-2); min-width:0; font-weight:600; }
+  .uix-brand-profiles__colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--uix-space-3); }
   .uix-brand-profiles__upload { padding:var(--uix-space-3); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  /* A native file input has a ~360px intrinsic width; let it shrink so it cannot push the form under the preview. */
+  .uix-brand-profiles__upload input { min-width:0; max-width:100%; }
+  .uix-brand-profiles__colors .uix-color-picker__trigger { max-width:100%; }
   .uix-brand-profiles__preview { overflow:hidden; align-self:start; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); font-family:var(--uix-font-sans); }
   .uix-brand-profiles__preview-header { display:flex; align-items:center; gap:var(--uix-space-3); padding:var(--uix-space-4); background:var(--uix-accent); color:var(--uix-accent-fg); }
   .uix-brand-profiles__preview-header img,.uix-brand-profiles__logo-placeholder { display:grid; place-items:center; width:3rem; height:3rem; border-radius:var(--uix-radius-md); background:var(--uix-surface); color:var(--uix-text); object-fit:contain; }

package/styles/components/metric-input.css

@@ -1,9 +1,10 @@
 @layer uix.components {
   .uix-metric-input { display:grid; gap:var(--uix-space-2); color:var(--uix-text); }
-  .uix-metric-input__control { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:stretch; max-width:22rem; }
-  .uix-metric-input__control .uix-input { border-top-right-radius:0; border-bottom-right-radius:0; font-variant-numeric:tabular-nums; }
+  .uix-metric-input__control { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:stretch; height:var(--uix-control-h); max-width:22rem; }
+  /* The row is pinned to the control height: the stacked steps split it (1fr each) instead of growing it past the input. */
+  .uix-metric-input__control .uix-input { height:100%; border-top-right-radius:0; border-bottom-right-radius:0; font-variant-numeric:tabular-nums; }
   .uix-metric-input__unit { display:flex; align-items:center; padding-inline:var(--uix-space-3); border-block:1px solid var(--uix-border-strong); background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
-  .uix-metric-input__steps { display:grid; width:2.5rem; }
-  .uix-metric-input__step { border:1px solid var(--uix-border-strong); background:var(--uix-surface); color:var(--uix-text); line-height:1; } .uix-metric-input__step:first-child { border-top-right-radius:var(--uix-radius-md); } .uix-metric-input__step:last-child { border-top:0; border-bottom-right-radius:var(--uix-radius-md); }
+  .uix-metric-input__steps { display:grid; grid-template-rows:1fr 1fr; width:2.5rem; min-height:0; }
+  .uix-metric-input__step { min-height:0; padding:0; border:1px solid var(--uix-border-strong); background:var(--uix-surface); color:var(--uix-text); line-height:1; } .uix-metric-input__step:first-child { border-top-right-radius:var(--uix-radius-md); } .uix-metric-input__step:last-child { border-top:0; border-bottom-right-radius:var(--uix-radius-md); }
   .uix-metric-input__step:hover { background:var(--uix-bg-hover); } .uix-metric-input--invalid .uix-metric-input__control { color:var(--uix-danger-text); }
 }

package/styles/components/relationship-graph.css

@@ -6,7 +6,8 @@
   .uix-relationship-graph__visual svg { display:block; width:100%; height:22rem; }
   .uix-relationship-graph__edge { stroke:var(--uix-border-strong); stroke-width:2; } .uix-relationship-graph__edge[data-highlighted] { stroke:var(--uix-accent); stroke-width:4; } .uix-relationship-graph__edge[data-conflicted] { stroke:var(--uix-danger); stroke-dasharray:6 4; }
   .uix-relationship-graph__node { cursor:pointer; } .uix-relationship-graph__node rect { fill:var(--uix-surface); stroke:var(--uix-border-strong); stroke-width:2; } .uix-relationship-graph__node text { fill:var(--uix-text); font-family:var(--uix-font-sans); font-size:var(--uix-text-meta); }
-  .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:var(--uix-brand-muted); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:var(--uix-danger-bg); stroke:var(--uix-danger); stroke-dasharray:4 2; }
+  /* Node fills must be opaque: edges run to node centres, so a translucent tint lets them strike through the label. */
+  .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:color-mix(in srgb, var(--uix-accent) 16%, var(--uix-surface)); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:color-mix(in srgb, var(--uix-danger) 20%, var(--uix-surface)); stroke:var(--uix-danger); stroke-dasharray:4 2; }
   .uix-relationship-graph__node:focus-visible rect { stroke:var(--uix-ring); stroke-width:4; }
   .uix-relationship-graph__legend { display:flex; gap:var(--uix-space-4); flex-wrap:wrap; margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
   .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-graph-type-color, var(--uix-chart-1)); border-radius:var(--uix-radius-pill); vertical-align:middle; }

package/styles/components/stepper.css

@@ -1,6 +1,6 @@
 /* uix number stepper — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-stepper { display: inline-flex; align-items: center; height: var(--uix-control-h); overflow: hidden;
+  .uix-stepper { display: inline-flex; align-items: center; width: fit-content; height: var(--uix-control-h); overflow: hidden;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); }
   .uix-stepper__btn { width: 32px; align-self: stretch; border: 0; background: transparent; color: var(--uix-text); cursor: pointer;
     display: grid; place-items: center; transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }