@tensor_1/tokens 2.4.0 → 2.5.0

package/build/css/components.css

@@ -601,7 +601,9 @@
   .uix-pill--outline.uix-pill--muted    { --tone-line: var(--uix-border); }
   .uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
 }
-/* uix data table — zebra, sticky header, sort, selection, density, pinned rows. Depends only on --uix-* tokens. */
+/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
+   column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
+   search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
   .uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
@@ -616,6 +618,8 @@
   .uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
   .uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
   .uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
+  /* multi-column sort ordinal (⇧+click adds a secondary key) */
+  .uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
 
   .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
   .uix-table tbody tr { background: var(--uix-row); }
@@ -624,8 +628,6 @@
   .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
   .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
   .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
-  /* density tiers — standard is the default td height above; data-density overrides it.
-     .uix-table--compact kept as a back-compat alias. */
   .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
   .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
 
@@ -636,7 +638,7 @@
   .uix-table__pin svg { width: 15px; height: 15px; }
   .uix-table__pin[data-on] svg { fill: currentColor; }
 
-  /* frozen first column (opt-in via .uix-table--pinned-col) — keeps the identifier visible on horizontal scroll, preserving zebra/state bg */
+  /* frozen first column (opt-in via .uix-table--pinned-col) */
   .uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
   .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
   .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
@@ -644,7 +646,120 @@
   .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
   .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
   .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
+  .uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
   .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
+
+  /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
+  .uix-table--fixed { table-layout: fixed; width: 100%; }
+  .uix-col--w-xs { width: var(--uix-col-w-xs); }
+  .uix-col--w-sm { width: var(--uix-col-w-sm); }
+  .uix-col--w-md { width: var(--uix-col-w-md); }
+  .uix-col--w-lg { width: var(--uix-col-w-lg); }
+  .uix-col--w-xl { width: var(--uix-col-w-xl); }
+  .uix-col--flex,
+  .uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
+  .uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
+  .uix-col--num { font-variant-numeric: tabular-nums; }
+  .uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
+
+  /* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
+  .uix-cell-strong { font-weight: 600; }
+  .uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
+
+  /* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
+  .uix-id-cell__btn {
+    border: 0; background: transparent; cursor: pointer; padding: 0;
+    color: var(--uix-text); font: inherit;
+    display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
+  }
+  .uix-id-cell__btn:hover { color: var(--uix-accent); }
+  .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
+  .uix-id-cell__arrow {
+    width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
+    opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
+
+  /* ── selection column + select-all ────────────────────────────────────────────── */
+  .uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
+
+  /* contextual bulk-action bar — appears when >=1 row is selected */
+  .uix-bulkbar {
+    display: flex; align-items: center; gap: var(--uix-space-3);
+    padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
+    border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
+    background: var(--uix-brand-muted); color: var(--uix-text);
+    animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
+  }
+  .uix-bulkbar[hidden] { display: none; }
+  .uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
+  .uix-bulkbar__spacer { flex: 1; }
+  @keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+  @media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
+
+  /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
+  .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
+  .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-rowact svg { width: 16px; height: 16px; display: block; }
+  .uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
+  .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
+
+  /* ── expandable inline row ─────────────────────────────────────────────────────── */
+  .uix-table__expand { border: 0; background: transparent; cursor: pointer; color: var(--uix-text-muted); padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); display: inline-grid; place-items: center; }
+  .uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
+  .uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
+  tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
+  .uix-table__detail-inner { padding: var(--uix-space-4) var(--uix-space-1) var(--uix-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uix-space-4) var(--uix-space-7); }
+  .uix-kv { font-size: var(--uix-text-meta); }
+  .uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
+  .uix-kv__v { color: var(--uix-text); }
+  @media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
+
+  /* ── inline cell edit ──────────────────────────────────────────────────────────── */
+  .uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-cell-edit:hover { background: var(--uix-bg-active); }
+  .uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
+  .uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
+  .uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
+  .uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
+
+  /* ── column resize grip (drag the header's right edge) ─────────────────────────── */
+  .uix-table__resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: var(--uix-z-raised); user-select: none; touch-action: none; }
+  .uix-table__resize::after { content: ""; position: absolute; top: 25%; right: 3px; width: 2px; height: 50%; background: transparent; border-radius: var(--uix-radius-pill); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
+
+  /* ── search match highlight ────────────────────────────────────────────────────── */
+  .uix-mark { background: var(--uix-warning-bg); color: var(--uix-text); border-radius: var(--uix-radius-xs); padding: 0 0.15em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--uix-warning) 60%, transparent); }
+
+  /* ── responsive ladder — priority-column drop, then card transform ─────────────── */
+  .uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
+  .uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
+  .uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
+
+  .uix-table--cards { display: block; }
+  .uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
+  .uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
+  .uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
+  .uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
+  .uix-table--cards td:last-child { border-bottom: 0; }
+  .uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }
+  .uix-table--cards td[data-col="id"] { font-size: var(--uix-text-h3); font-weight: 600; border-bottom: 1px solid var(--uix-border); padding-bottom: var(--uix-space-3); }
+  .uix-table--cards td[data-col="id"]::before { display: none; }
+  .uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
+
+  /* ── compare view — two records field-by-field on a narrow screen ──────────────── */
+  .uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
+  .uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
+  .uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
+  .uix-compare__head > div { font-weight: 600; border-top: 0; }
+  .uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
+  .uix-compare__attr { grid-column: 1 / -1; background: var(--uix-bg-subtle); padding: var(--uix-space-1) var(--uix-space-3); border-top: 1px solid var(--uix-border); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); }
 }
 /* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
 @layer uix.components {
@@ -946,27 +1061,9 @@
   [data-uix-rowpeek] tbody tr { cursor: pointer; }
   [data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
 
-  /* Pattern B table layout: columns keep natural width, no squeezing or wrapping.
-     Subject is the only column that may truncate (it can be long). */
-  [data-uix-table-v2] .uix-table td { white-space: nowrap; }
-  [data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
-
-  /* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
-     Monospace so IDs align vertically. Arrow fades in on row hover. */
-  .uix-id-cell__btn {
-    border: 0; background: transparent; cursor: pointer; padding: 0;
-    color: var(--uix-text); font: inherit;
-    display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
-  }
-  .uix-id-cell__btn:hover { color: var(--uix-accent); }
-  .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
-  .uix-id-cell__arrow {
-    width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
-    opacity: 0;
-    transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
-  }
-  [data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
-  @media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
+  /* Column sizing + the id-cell click-through pattern now live in table.css (one story for
+     "table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
+     instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
 }
 /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
 @layer uix.components {

package/build/css/styles.css

@@ -120,12 +120,19 @@
     --uix-row-h-comfortable: 68px;
     --uix-control-h: 36px;
     --uix-sidebar-w: 248px;
+    --uix-sidebar-w-rail: 56px;
     --uix-topbar-h: 56px;
     --uix-scrollbar-size: 10px;
     --uix-icon-sm: 16px;
     --uix-icon-md: 20px;
     --uix-icon-lg: 24px;
     --uix-peek-w: 420px;
+    --uix-col-w-xs: 92px;
+    --uix-col-w-sm: 112px;
+    --uix-col-w-md: 132px;
+    --uix-col-w-lg: 176px;
+    --uix-col-w-xl: 240px;
+    --uix-col-title-min: 340px;
     --uix-space-0: 0;
     --uix-space-1: 4px;
     --uix-space-2: 8px;
@@ -890,7 +897,9 @@
   .uix-pill--outline.uix-pill--muted    { --tone-line: var(--uix-border); }
   .uix-pill--outline.uix-pill--critical { color: var(--uix-danger-text); --tone-dot: var(--uix-danger); --tone-line: color-mix(in srgb, var(--uix-danger) 60%, transparent); }
 }
-/* uix data table — zebra, sticky header, sort, selection, density, pinned rows. Depends only on --uix-* tokens. */
+/* uix data table — zebra, sticky header, sort, selection, density, pinned rows,
+   column sizing, bulk actions, row actions, expandable rows, inline edit, resize,
+   search highlight, responsive ladder + compare. Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-table-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); background: var(--uix-surface); }
   .uix-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--uix-text-body); }
@@ -905,6 +914,8 @@
   .uix-table th[data-sort]::after { content: " ↕"; opacity: .35; }
   .uix-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; color: var(--uix-accent); }
   .uix-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--uix-accent); }
+  /* multi-column sort ordinal (⇧+click adds a secondary key) */
+  .uix-table th[data-sort-order]::before { content: attr(data-sort-order); display: inline-block; margin-right: var(--uix-space-1); font-size: var(--uix-text-eyebrow); font-variant-numeric: tabular-nums; color: var(--uix-accent); }
 
   .uix-table td { padding: 0 var(--uix-space-4); height: var(--uix-row-h); border-bottom: 1px solid var(--uix-border); color: var(--uix-text); vertical-align: middle; }
   .uix-table tbody tr { background: var(--uix-row); }
@@ -913,8 +924,6 @@
   .uix-table tbody tr[data-pinned] { background: var(--uix-row-pinned-bg); }
   .uix-table tbody tr[aria-selected="true"] { background: var(--uix-row-selected-bg); }
   .uix-table tbody tr:hover { background: var(--uix-bg-hover); }
-  /* density tiers — standard is the default td height above; data-density overrides it.
-     .uix-table--compact kept as a back-compat alias. */
   .uix-table[data-density="compact"] td, .uix-table--compact td { height: var(--uix-row-h-compact); }
   .uix-table[data-density="comfortable"] td { height: var(--uix-row-h-comfortable); }
 
@@ -925,7 +934,7 @@
   .uix-table__pin svg { width: 15px; height: 15px; }
   .uix-table__pin[data-on] svg { fill: currentColor; }
 
-  /* frozen first column (opt-in via .uix-table--pinned-col) — keeps the identifier visible on horizontal scroll, preserving zebra/state bg */
+  /* frozen first column (opt-in via .uix-table--pinned-col) */
   .uix-table--pinned-col th:first-child, .uix-table--pinned-col td:first-child { position: sticky; left: 0; z-index: var(--uix-z-raised); box-shadow: 1px 0 0 var(--uix-border); }
   .uix-table--pinned-col thead th:first-child { z-index: var(--uix-z-sticky); background: var(--uix-surface); }
   .uix-table--pinned-col tbody tr td:first-child { background: var(--uix-row); }
@@ -933,7 +942,120 @@
   .uix-table--pinned-col.uix-table--no-zebra tbody tr td:first-child,
   .uix-table--pinned-col.uix-table--no-zebra tbody tr:nth-child(even) td:first-child { background: var(--uix-row); }
   .uix-table--pinned-col tbody tr[data-pinned] td:first-child { background: var(--uix-row-pinned-bg); }
+  .uix-table--pinned-col tbody tr[aria-selected="true"] td:first-child { background: var(--uix-row-selected-bg); }
   .uix-table--pinned-col tbody tr:hover td:first-child { background: var(--uix-bg-hover); }
+
+  /* ── column sizing + cell behaviour (a shared vocabulary, not per-app px) ──────── */
+  .uix-table--fixed { table-layout: fixed; width: 100%; }
+  .uix-col--w-xs { width: var(--uix-col-w-xs); }
+  .uix-col--w-sm { width: var(--uix-col-w-sm); }
+  .uix-col--w-md { width: var(--uix-col-w-md); }
+  .uix-col--w-lg { width: var(--uix-col-w-lg); }
+  .uix-col--w-xl { width: var(--uix-col-w-xl); }
+  .uix-col--flex,
+  .uix-col--primary { width: auto; min-width: var(--uix-col-title-min); }
+  .uix-col--truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .uix-col--wrap { white-space: normal; overflow-wrap: anywhere; }
+  .uix-col--num { font-variant-numeric: tabular-nums; }
+  .uix-table th.uix-col--num, .uix-table td.uix-col--num { text-align: right; }
+
+  /* ── cell content vocabulary — a fixed set of renderers keeps tables consistent ── */
+  .uix-cell-strong { font-weight: 600; }
+  .uix-cell-sub { display: block; font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-cell-mono { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); }
+
+  /* ── id cell — the canonical row click-through (row → peek, ↗ → full record) ───── */
+  .uix-id-cell__btn {
+    border: 0; background: transparent; cursor: pointer; padding: 0;
+    color: var(--uix-text); font: inherit;
+    display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
+  }
+  .uix-id-cell__btn:hover { color: var(--uix-accent); }
+  .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
+  .uix-id-cell__arrow {
+    width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
+    opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-table tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
+
+  /* ── selection column + select-all ────────────────────────────────────────────── */
+  .uix-table th.uix-table__selcol, .uix-table td.uix-table__selcell { width: 44px; padding-left: var(--uix-space-3); padding-right: 0; text-align: center; }
+
+  /* contextual bulk-action bar — appears when >=1 row is selected */
+  .uix-bulkbar {
+    display: flex; align-items: center; gap: var(--uix-space-3);
+    padding: var(--uix-space-2) var(--uix-space-3); margin-bottom: var(--uix-space-3);
+    border: 1px solid var(--uix-accent); border-radius: var(--uix-radius-md);
+    background: var(--uix-brand-muted); color: var(--uix-text);
+    animation: uix-bulkbar-in var(--uix-dur) var(--uix-ease-out);
+  }
+  .uix-bulkbar[hidden] { display: none; }
+  .uix-bulkbar__count { font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-accent); font-variant-numeric: tabular-nums; }
+  .uix-bulkbar__spacer { flex: 1; }
+  @keyframes uix-bulkbar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+  @media (prefers-reduced-motion: reduce) { .uix-bulkbar { animation: none; } }
+
+  /* ── row hover actions + kebab ─────────────────────────────────────────────────── */
+  .uix-table__actions { width: 84px; text-align: right; white-space: nowrap; }
+  .uix-rowact { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-sm); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-rowact svg { width: 16px; height: 16px; display: block; }
+  .uix-table tbody tr:hover .uix-rowact, .uix-rowact:focus-visible, .uix-rowact[aria-expanded="true"] { opacity: 1; }
+  .uix-rowact:hover { background: var(--uix-bg-active); color: var(--uix-text); }
+
+  /* ── expandable inline row ─────────────────────────────────────────────────────── */
+  .uix-table__expand { border: 0; background: transparent; cursor: pointer; color: var(--uix-text-muted); padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); display: inline-grid; place-items: center; }
+  .uix-table__expand svg { width: 16px; height: 16px; transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table__expand[aria-expanded="true"] svg { transform: rotate(90deg); }
+  .uix-table__expand:hover { background: var(--uix-bg-active); color: var(--uix-text); }
+  tr.uix-table__detail > td { background: var(--uix-bg-subtle); padding: 0 var(--uix-space-4); }
+  .uix-table__detail-inner { padding: var(--uix-space-4) var(--uix-space-1) var(--uix-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--uix-space-4) var(--uix-space-7); }
+  .uix-kv { font-size: var(--uix-text-meta); }
+  .uix-kv__k { color: var(--uix-text-muted); margin-bottom: var(--uix-space-1); }
+  .uix-kv__v { color: var(--uix-text); }
+  @media (prefers-reduced-motion: reduce) { .uix-table__expand svg { transition: none; } }
+
+  /* ── inline cell edit ──────────────────────────────────────────────────────────── */
+  .uix-cell-edit { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: text; border-radius: var(--uix-radius-sm); padding: var(--uix-space-1) var(--uix-space-2); margin: calc(-1 * var(--uix-space-1)) calc(-1 * var(--uix-space-2)); transition: background-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-cell-edit:hover { background: var(--uix-bg-active); }
+  .uix-cell-edit__pencil { width: 13px; height: 13px; color: var(--uix-text-muted); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table tbody tr:hover .uix-cell-edit__pencil { opacity: 1; }
+  .uix-cell-edit[data-editing] { background: var(--uix-surface); box-shadow: 0 0 0 2px var(--uix-ring); cursor: default; }
+  .uix-cell-edit__ok { color: var(--uix-success); width: 14px; height: 14px; opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-cell-edit[data-saved] .uix-cell-edit__ok { opacity: 1; }
+  .uix-cell-edit input, .uix-cell-edit select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; }
+
+  /* ── column resize grip (drag the header's right edge) ─────────────────────────── */
+  .uix-table__resize { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: var(--uix-z-raised); user-select: none; touch-action: none; }
+  .uix-table__resize::after { content: ""; position: absolute; top: 25%; right: 3px; width: 2px; height: 50%; background: transparent; border-radius: var(--uix-radius-pill); transition: background-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table thead th:hover .uix-table__resize::after, .uix-table__resize[data-drag]::after { background: var(--uix-accent); }
+
+  /* ── search match highlight ────────────────────────────────────────────────────── */
+  .uix-mark { background: var(--uix-warning-bg); color: var(--uix-text); border-radius: var(--uix-radius-xs); padding: 0 0.15em; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--uix-warning) 60%, transparent); }
+
+  /* ── responsive ladder — priority-column drop, then card transform ─────────────── */
+  .uix-table--priority th[data-priority="low"], .uix-table--priority td[data-priority="low"] { display: none; }
+  .uix-table--priority-mid th[data-priority="low"], .uix-table--priority-mid td[data-priority="low"],
+  .uix-table--priority-mid th[data-priority="mid"], .uix-table--priority-mid td[data-priority="mid"] { display: none; }
+
+  .uix-table--cards { display: block; }
+  .uix-table--cards thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .uix-table--cards tbody, .uix-table--cards tr, .uix-table--cards td { display: block; width: auto; }
+  .uix-table--cards tbody tr { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface); margin: 0 0 var(--uix-space-3); padding: var(--uix-space-1) var(--uix-space-4); box-shadow: var(--uix-shadow-sm); }
+  .uix-table--cards tbody tr[aria-selected="true"] { box-shadow: 0 0 0 2px var(--uix-accent); }
+  .uix-table--cards td { height: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--uix-space-5); padding: var(--uix-space-2) 0; border-bottom: 1px solid var(--uix-border); text-align: right; white-space: normal; }
+  .uix-table--cards td:last-child { border-bottom: 0; }
+  .uix-table--cards td::before { content: attr(data-label); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-weight: 500; text-align: left; flex: none; }
+  .uix-table--cards td[data-col="id"] { font-size: var(--uix-text-h3); font-weight: 600; border-bottom: 1px solid var(--uix-border); padding-bottom: var(--uix-space-3); }
+  .uix-table--cards td[data-col="id"]::before { display: none; }
+  .uix-table--cards td[data-col="select"], .uix-table--cards td[data-col="actions"], .uix-table--cards td[data-col="expand"] { display: none; }
+
+  /* ── compare view — two records field-by-field on a narrow screen ──────────────── */
+  .uix-compare { border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; font-size: var(--uix-text-meta); }
+  .uix-compare__head, .uix-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
+  .uix-compare__head > div, .uix-compare__cell { padding: var(--uix-space-3); background: var(--uix-surface); border-top: 1px solid var(--uix-border); }
+  .uix-compare__head > div { font-weight: 600; border-top: 0; }
+  .uix-compare__head > div + div, .uix-compare__cell + .uix-compare__cell { border-left: 1px solid var(--uix-border); }
+  .uix-compare__attr { grid-column: 1 / -1; background: var(--uix-bg-subtle); padding: var(--uix-space-1) var(--uix-space-3); border-top: 1px solid var(--uix-border); font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); }
 }
 /* uix table toolbar + two-row filter bar (status / type). Depends only on --uix-* tokens. */
 @layer uix.components {
@@ -1280,27 +1402,9 @@
   [data-uix-rowpeek] tbody tr { cursor: pointer; }
   [data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
 
-  /* Pattern B table layout: columns keep natural width, no squeezing or wrapping.
-     Subject is the only column that may truncate (it can be long). */
-  [data-uix-table-v2] .uix-table td { white-space: nowrap; }
-  [data-uix-table-v2] .uix-table td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
-
-  /* ID cell in pattern B table: ID text + ↗ arrow, single button, quiet/on-brand at rest.
-     Monospace so IDs align vertically. Arrow fades in on row hover. */
-  .uix-id-cell__btn {
-    border: 0; background: transparent; cursor: pointer; padding: 0;
-    color: var(--uix-text); font: inherit;
-    display: inline-flex; align-items: center; gap: var(--uix-space-1); white-space: nowrap;
-  }
-  .uix-id-cell__btn:hover { color: var(--uix-accent); }
-  .uix-id-cell__btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; border-radius: var(--uix-radius-xs); }
-  .uix-id-cell__arrow {
-    width: var(--uix-icon-sm); height: var(--uix-icon-sm); flex-shrink: 0; color: var(--uix-text-muted);
-    opacity: 0;
-    transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
-  }
-  [data-uix-rowpeek] tbody tr:hover .uix-id-cell__arrow { opacity: 1; }
-  @media (prefers-reduced-motion: reduce) { .uix-id-cell__arrow { transition: none; } }
+  /* Column sizing + the id-cell click-through pattern now live in table.css (one story for
+     "table cells"). Size columns with .uix-col--w-* / .uix-col--flex + .uix-col--truncate
+     instead of the old [data-uix-table-v2] :nth-child(2) title cap. */
 }
 /* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
 @layer uix.components {

package/build/css/tokens.css

@@ -109,12 +109,19 @@
     --uix-row-h-comfortable: 68px;
     --uix-control-h: 36px;
     --uix-sidebar-w: 248px;
+    --uix-sidebar-w-rail: 56px;
     --uix-topbar-h: 56px;
     --uix-scrollbar-size: 10px;
     --uix-icon-sm: 16px;
     --uix-icon-md: 20px;
     --uix-icon-lg: 24px;
     --uix-peek-w: 420px;
+    --uix-col-w-xs: 92px;
+    --uix-col-w-sm: 112px;
+    --uix-col-w-md: 132px;
+    --uix-col-w-lg: 176px;
+    --uix-col-w-xl: 240px;
+    --uix-col-title-min: 340px;
     --uix-space-0: 0;
     --uix-space-1: 4px;
     --uix-space-2: 8px;

package/build/ts/tokens.d.ts

@@ -1,5 +1,5 @@
 /* GENERATED — do not edit. */
-export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
+export type UixTokenName = "bg-app" | "bg-subtle" | "bg-hover" | "bg-active" | "surface" | "surface-2" | "surface-3" | "border" | "border-strong" | "text" | "text-hushed" | "text-muted" | "text-reverse" | "text-hushed-reverse" | "accent" | "accent-dark" | "accent-light" | "accent-hover" | "accent-fg" | "link" | "ring" | "brand-muted" | "success" | "success-fg" | "success-bg" | "warning" | "warning-fg" | "warning-bg" | "warning-text" | "info" | "info-fg" | "info-bg" | "info-text" | "danger" | "danger-fg" | "danger-bg" | "danger-text" | "amber" | "amber-text" | "amber-bg" | "attention" | "attention-bg" | "attention-text" | "attention-solid" | "overdue" | "overdue-bg" | "overdue-text" | "overdue-solid" | "sev-4" | "sev-4-bg" | "sev-4-text" | "sev-5" | "sev-5-bg" | "sev-5-text" | "success-solid" | "warning-solid" | "info-solid" | "danger-solid" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8" | "chart-neutral" | "row" | "row-alt" | "row-pinned-bg" | "row-selected-bg" | "scrollbar-thumb" | "scrollbar-thumb-hover" | "scrollbar-track" | "scrim" | "scrim-strong" | "shadow-sm" | "shadow-popover" | "shadow-overlay" | "highlight-top" | "ease-out" | "ease-out-strong" | "ease-in" | "ease-in-out" | "ease-spring" | "dur-fast" | "dur" | "dur-slow" | "dur-slower" | "lift" | "z-raised" | "z-sticky" | "z-dropdown" | "z-overlay" | "z-tooltip" | "z-toast" | "radius-xs" | "radius-sm" | "radius-md" | "radius-lg" | "radius-pill" | "row-h" | "row-h-compact" | "row-h-comfortable" | "control-h" | "sidebar-w" | "sidebar-w-rail" | "topbar-h" | "scrollbar-size" | "icon-sm" | "icon-md" | "icon-lg" | "peek-w" | "col-w-xs" | "col-w-sm" | "col-w-md" | "col-w-lg" | "col-w-xl" | "col-title-min" | "space-0" | "space-1" | "space-2" | "space-3" | "space-4" | "space-5" | "space-6" | "space-7" | "space-8" | "space-9" | "space-10" | "space-11" | "space-12" | "font-sans" | "font-heading" | "font-mono" | "text-display" | "leading-display" | "text-data-hero" | "leading-data-hero" | "text-h2" | "leading-h2" | "text-h3" | "leading-h3" | "text-body" | "leading-body" | "text-meta" | "leading-meta" | "text-eyebrow" | "leading-eyebrow" | "tracking-tight" | "tracking-eyebrow";
 export declare const cssVar: Record<UixTokenName, string>;
 export declare const light: Record<UixTokenName, string>;
 export declare const dark: Partial<Record<UixTokenName, string>>;

package/build/ts/tokens.js

@@ -110,12 +110,19 @@ export const cssVar = {
   "row-h-comfortable": "var(--uix-row-h-comfortable)",
   "control-h": "var(--uix-control-h)",
   "sidebar-w": "var(--uix-sidebar-w)",
+  "sidebar-w-rail": "var(--uix-sidebar-w-rail)",
   "topbar-h": "var(--uix-topbar-h)",
   "scrollbar-size": "var(--uix-scrollbar-size)",
   "icon-sm": "var(--uix-icon-sm)",
   "icon-md": "var(--uix-icon-md)",
   "icon-lg": "var(--uix-icon-lg)",
   "peek-w": "var(--uix-peek-w)",
+  "col-w-xs": "var(--uix-col-w-xs)",
+  "col-w-sm": "var(--uix-col-w-sm)",
+  "col-w-md": "var(--uix-col-w-md)",
+  "col-w-lg": "var(--uix-col-w-lg)",
+  "col-w-xl": "var(--uix-col-w-xl)",
+  "col-title-min": "var(--uix-col-title-min)",
   "space-0": "var(--uix-space-0)",
   "space-1": "var(--uix-space-1)",
   "space-2": "var(--uix-space-2)",
@@ -257,12 +264,19 @@ export const light = {
   "row-h-comfortable": "68px",
   "control-h": "36px",
   "sidebar-w": "248px",
+  "sidebar-w-rail": "56px",
   "topbar-h": "56px",
   "scrollbar-size": "10px",
   "icon-sm": "16px",
   "icon-md": "20px",
   "icon-lg": "24px",
   "peek-w": "420px",
+  "col-w-xs": "92px",
+  "col-w-sm": "112px",
+  "col-w-md": "132px",
+  "col-w-lg": "176px",
+  "col-w-xl": "240px",
+  "col-title-min": "340px",
   "space-0": "0",
   "space-1": "4px",
   "space-2": "8px",
@@ -375,12 +389,19 @@ export const num = {
   "row-h-comfortable": 68,
   "control-h": 36,
   "sidebar-w": 248,
+  "sidebar-w-rail": 56,
   "topbar-h": 56,
   "scrollbar-size": 10,
   "icon-sm": 16,
   "icon-md": 20,
   "icon-lg": 24,
   "peek-w": 420,
+  "col-w-xs": 92,
+  "col-w-sm": 112,
+  "col-w-md": 132,
+  "col-w-lg": 176,
+  "col-w-xl": 240,
+  "col-title-min": 340,
   "space-1": 4,
   "space-2": 8,
   "space-3": 12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.4.0",
+  "version": "2.5.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",
   "license": "UNLICENSED",

package/tokens/base/size.json

@@ -10,11 +10,19 @@
   "row-h-comfortable": { "$type": "dimension", "$value": "68px" },
   "control-h":         { "$type": "dimension", "$value": "36px" },
   "sidebar-w":         { "$type": "dimension", "$value": "248px" },
+  "sidebar-w-rail":    { "$type": "dimension", "$value": "56px", "$description": "Collapsed icon-rail width for the app-shell sidebar (data-nav=rail / data-collapsed). Contractual so the rail width stops being hand-coded as 56px in app-shell.css and products can retheme it. Full = --uix-sidebar-w, rail = this, hidden = 0." },
   "topbar-h":          { "$type": "dimension", "$value": "56px" },
 
   "scrollbar-size": { "$type": "dimension", "$value": "10px" },
   "icon-sm": { "$type": "dimension", "$value": "16px" },
   "icon-md": { "$type": "dimension", "$value": "20px" },
   "icon-lg": { "$type": "dimension", "$value": "24px" },
-  "peek-w":  { "$type": "dimension", "$value": "420px" }
+  "peek-w":  { "$type": "dimension", "$value": "420px" },
+
+  "col-w-xs":      { "$type": "dimension", "$value": "92px",  "$description": "Table column-width scale — the shared tier set consumers attach to a column via .uix-col--w-* (on <col>/<th>/<td>) instead of hand-coding per-app pixel widths. Reconciles the widths house products use for compact data columns: xs≈priority/flag, sm≈type/date, md≈id/status/team, lg≈assignee/person, xl≈long labels. Snap each column to the nearest tier." },
+  "col-w-sm":      { "$type": "dimension", "$value": "112px" },
+  "col-w-md":      { "$type": "dimension", "$value": "132px" },
+  "col-w-lg":      { "$type": "dimension", "$value": "176px" },
+  "col-w-xl":      { "$type": "dimension", "$value": "240px" },
+  "col-title-min": { "$type": "dimension", "$value": "340px", "$description": "Min-width floor for the primary/flex column (.uix-col--flex) — the subject/title never collapses below this; the table scrolls horizontally (pinned first column intact) instead of squeezing the title. Generalises the old 280px title cap." }
 }