@tensor_1/tokens 2.10.0 → 2.12.0

package/styles/components/table.css

@@ -0,0 +1,160 @@
+/* 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); }
+
+  .uix-table thead th {
+    position: sticky; top: 0; z-index: var(--uix-z-raised); background: var(--uix-surface); text-align: left;
+    font-size: var(--uix-text-meta); font-weight: 600; color: var(--uix-text-hushed);
+    padding: 0 var(--uix-space-4); height: 44px; border-bottom: 1px solid var(--uix-border); white-space: nowrap;
+  }
+  .uix-table th[data-sort] { cursor: pointer; user-select: none; }
+  .uix-table th[data-sort]:hover { color: var(--uix-text); }
+  .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); }
+  .uix-table tbody tr:nth-child(even) { background: var(--uix-row-alt); }
+  .uix-table--no-zebra tbody tr, .uix-table--no-zebra tbody tr:nth-child(even) { background: var(--uix-row); }
+  .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); }
+  .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); }
+
+  .uix-table__pin { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1); border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-table tbody tr:hover .uix-table__pin, .uix-table__pin[data-on] { opacity: 1; }
+  .uix-table__pin:hover { background: var(--uix-bg-active); color: var(--uix-text); }
+  .uix-table__pin[data-on] { color: var(--uix-accent); }
+  .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) */
+  .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); }
+  .uix-table--pinned-col tbody tr:nth-child(even) td:first-child { background: var(--uix-row-alt); }
+  .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); }
+}

package/styles/components/tabs.css

@@ -0,0 +1,31 @@
+/* uix tabs — line / enclosed / pill. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-tabs { display: flex; gap: var(--uix-space-1); }
+  .uix-tab {
+    border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); font-weight: 500;
+    color: var(--uix-text-hushed); padding: var(--uix-space-3) var(--uix-space-3); cursor: pointer; position: relative;
+    transition: color var(--uix-dur-fast) var(--uix-ease-out), background-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-tab:hover { color: var(--uix-text); }
+  .uix-tab[aria-selected="true"] { color: var(--uix-text); }
+  .uix-tab:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; border-radius: var(--uix-radius-sm); }
+
+  /* line */
+  .uix-tabs--line { border-bottom: 1px solid var(--uix-border); }
+  .uix-tabs--line .uix-tab::after {
+    content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
+    background: var(--uix-accent); border-radius: var(--uix-radius-pill);
+    transform: scaleX(0); transition: transform var(--uix-dur) var(--uix-ease-out);
+  }
+  .uix-tabs--line .uix-tab[aria-selected="true"]::after { transform: scaleX(1); }
+
+  /* enclosed */
+  .uix-tabs--enclosed { gap: 0; border-bottom: 1px solid var(--uix-border); }
+  .uix-tabs--enclosed .uix-tab { border: 1px solid transparent; border-top-left-radius: var(--uix-radius-md); border-top-right-radius: var(--uix-radius-md); margin-bottom: -1px; }
+  .uix-tabs--enclosed .uix-tab[aria-selected="true"] { border-color: var(--uix-border); border-bottom-color: var(--uix-bg-app); background: var(--uix-bg-app); }
+
+  /* pill */
+  .uix-tabs--pill { display: inline-flex; background: var(--uix-bg-subtle); padding: var(--uix-space-1); border-radius: var(--uix-radius-md); }
+  .uix-tabs--pill .uix-tab { padding: var(--uix-space-2) var(--uix-space-4); border-radius: calc(var(--uix-radius-md) - 3px); }
+  .uix-tabs--pill .uix-tab[aria-selected="true"] { background: var(--uix-surface); box-shadow: var(--uix-shadow-sm); }
+}

package/styles/components/tag-input.css

@@ -0,0 +1,16 @@
+/* uix tag input / multi-select chips — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-taginput {
+    display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); min-height: var(--uix-control-h); padding: var(--uix-space-1) var(--uix-space-2);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); background: var(--uix-surface);
+  }
+  .uix-taginput:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-taginput__field { flex: 1; min-width: 80px; border: 0; outline: none; background: transparent; color: var(--uix-text); font: inherit; }
+  .uix-tag {
+    display: inline-flex; align-items: center; gap: var(--uix-space-1); padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-sm);
+    background: var(--uix-bg-active); color: var(--uix-text); font-size: var(--uix-text-meta);
+  }
+  .uix-tag__remove { display: grid; place-items: center; width: 16px; height: 16px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); }
+  .uix-tag__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-tag__remove svg { width: 12px; height: 12px; }
+}

package/styles/components/textarea.css

@@ -0,0 +1,15 @@
+/* uix textarea — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-textarea {
+    width: 100%; min-height: 84px; padding: var(--uix-space-3) var(--uix-space-3); resize: vertical;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
+    background: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body);
+    line-height: var(--uix-leading-body);
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-textarea::placeholder { color: var(--uix-text-muted); }
+  .uix-textarea:hover { border-color: var(--uix-border-strong); }
+  .uix-textarea:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-textarea:disabled { opacity: .55; background: var(--uix-bg-subtle); }
+  .uix-textarea[aria-invalid="true"] { border-color: var(--uix-danger); }
+}

package/styles/components/timeline.css

@@ -0,0 +1,11 @@
+/* uix timeline / activity feed — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-timeline { display: flex; flex-direction: column; }
+  .uix-timeline__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--uix-space-3); }
+  .uix-timeline__rail { display: flex; flex-direction: column; align-items: center; }
+  .uix-timeline__node { width: 12px; height: 12px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-1); flex: none; box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-timeline__line { width: 1px; flex: 1; background: var(--uix-border); margin: var(--uix-space-1) 0; }
+  .uix-timeline__item:last-child .uix-timeline__line { display: none; }
+  .uix-timeline__body { padding-bottom: var(--uix-space-5); }
+  .uix-timeline__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+}

package/styles/components/toast.css

@@ -0,0 +1,21 @@
+/* uix toast / notification — depends only on --uix-* tokens. JS appends to .uix-toaster. */
+@layer uix.components {
+  .uix-toaster { position: fixed; bottom: 16px; right: 16px; z-index: var(--uix-z-toast); display: flex; flex-direction: column; gap: var(--uix-space-2); width: 340px; max-width: calc(100vw - 32px); }
+  .uix-toast {
+    display: flex; gap: var(--uix-space-3); align-items: flex-start; padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md);
+    background: var(--uix-surface-2); border: 1px solid var(--uix-border); box-shadow: var(--uix-shadow-popover);
+    animation: uix-slide-in-right var(--uix-dur-slow) var(--uix-ease-out);
+  }
+  .uix-toast[data-leaving] { animation: uix-toast-out var(--uix-dur) var(--uix-ease-in) forwards; }
+  @keyframes uix-toast-out { to { opacity: 0; transform: translateX(16px); } }
+  .uix-toast__icon { flex: none; margin-top: 1px; }
+  .uix-toast__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-toast__body { flex: 1; }
+  .uix-toast__title { font-weight: 600; font-size: var(--uix-text-body); }
+  .uix-toast__msg { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
+  .uix-toast__close { border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; padding: var(--uix-space-1) var(--uix-space-2); border-radius: var(--uix-radius-xs); }
+  .uix-toast__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-toast--success .uix-toast__icon { color: var(--uix-success); }
+  .uix-toast--danger  .uix-toast__icon { color: var(--uix-danger); }
+  .uix-toast--info    .uix-toast__icon { color: var(--uix-info); }
+}

package/styles/components/tooltip.css

@@ -0,0 +1,35 @@
+/* uix tooltip. Two flavours, both depend only on --uix-* tokens:
+   • .uix-tooltip__bubble — the React <Tooltip>: renders in the top layer via the
+     Popover API, so it escapes any overflow:hidden/scroll ancestor (UIX-FIX-02).
+     JS sets position/left/top; CSS owns appearance + the fade.
+   • [data-uix-tip] — the legacy CSS-only tooltip, kept for back-compat. It is
+     position:absolute and so is clipped by an overflow ancestor; prefer <Tooltip>. */
+@layer uix.components {
+  .uix-tooltip { display: inline-flex; }
+
+  .uix-tooltip__bubble {
+    position: fixed; margin: 0; inset: auto; border: 0;
+    width: max-content; max-width: 16rem;
+    background: var(--uix-text); color: var(--uix-bg-app);
+    font-size: var(--uix-text-meta); font-weight: 500; line-height: 1.4;
+    padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm);
+    box-shadow: var(--uix-shadow-popover); white-space: normal; pointer-events: none;
+    opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-tooltip__bubble:popover-open { opacity: 1; }
+  @starting-style { .uix-tooltip__bubble:popover-open { opacity: 0; } }
+
+  /* legacy CSS-only tooltip — clipped by overflow ancestors; superseded by .uix-tooltip__bubble */
+  [data-uix-tip] { position: relative; }
+  [data-uix-tip]::after {
+    content: attr(data-uix-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%) translateY(var(--uix-lift));
+    background: var(--uix-text); color: var(--uix-bg-app); font-size: var(--uix-text-meta); font-weight: 500;
+    padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); white-space: nowrap; box-shadow: var(--uix-shadow-popover);
+    opacity: 0; pointer-events: none; z-index: var(--uix-z-tooltip);
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  [data-uix-tip]:hover::after, [data-uix-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
+  /* when JS upgrades [data-uix-tip] to a top-layer bubble, drop the clipped CSS-only one */
+  .uix-has-js-tip [data-uix-tip]::after { content: none; }
+}

package/styles/components/tree.css

@@ -0,0 +1,17 @@
+/* uix tree view — WAI-ARIA tree (role=tree/treeitem/group). Depends only on --uix-* tokens.
+   ARIA (aria-expanded / aria-selected / aria-level) lives on the treeitem <li>, so the chevron,
+   selection, and collapse styling all key off the item, not the row (UIX-FIX-04). */
+@layer uix.components {
+  .uix-tree, .uix-tree ul { list-style: none; margin: 0; padding: 0; }
+  .uix-tree__group { padding-left: var(--uix-space-5); }
+  .uix-tree__item { outline: none; } /* the focus ring is drawn on the row, below */
+  .uix-tree__row { display: flex; align-items: center; gap: var(--uix-space-2); padding: var(--uix-space-2) var(--uix-space-2); border-radius: var(--uix-radius-sm); cursor: pointer; color: var(--uix-text); font-size: var(--uix-text-body); }
+  .uix-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uix-tree__item > .uix-tree__row:hover { background: var(--uix-bg-hover); }
+  .uix-tree__item[aria-selected="true"] > .uix-tree__row { background: var(--uix-bg-active); }
+  .uix-tree__item:focus-visible > .uix-tree__row { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
+  .uix-tree__toggle { width: 16px; height: 16px; flex: none; display: grid; place-items: center; color: var(--uix-text-muted); transition: transform var(--uix-dur) var(--uix-ease-out); }
+  .uix-tree__toggle svg { width: 14px; height: 14px; }
+  .uix-tree__item[aria-expanded="false"] > .uix-tree__row .uix-tree__toggle { transform: rotate(-90deg); }
+  .uix-tree__item[aria-expanded="false"] > .uix-tree__group { display: none; }
+}

package/styles/components/typography.css

@@ -0,0 +1,45 @@
+/* uix typography utilities — class-based application of the --uix-text-* scale.
+   A `<span class="uix-text-h3">` reads identically to an `<h3>`; consumers reach
+   for these instead of re-deriving the scale inline. (House products migrating
+   off bespoke `type-*` classes map 1:1 onto these — same sizes/leading/weights.)
+   Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-text-display {
+    font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
+    font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
+  }
+  .uix-text-h1 {
+    font-size: var(--uix-text-display); line-height: var(--uix-leading-display);
+    font-weight: 400; letter-spacing: var(--uix-tracking-tight); color: var(--uix-text);
+  }
+  .uix-text-h2 {
+    font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2);
+    font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
+  }
+  .uix-text-h3 {
+    font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3);
+    font-weight: 700; color: var(--uix-text);
+  }
+  .uix-text-body {
+    font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
+    font-weight: 400; color: var(--uix-text);
+  }
+  .uix-text-body-hushed {
+    font-size: var(--uix-text-body); line-height: var(--uix-leading-body);
+    font-weight: 400; color: var(--uix-text-hushed);
+  }
+  .uix-text-meta {
+    font-size: var(--uix-text-meta); line-height: var(--uix-leading-meta);
+    font-weight: 400; color: var(--uix-text-hushed);
+  }
+  .uix-text-eyebrow {
+    font-size: var(--uix-text-eyebrow); line-height: var(--uix-leading-eyebrow);
+    font-weight: 700; letter-spacing: var(--uix-tracking-eyebrow);
+    text-transform: uppercase; color: var(--uix-text-hushed);
+  }
+  .uix-text-data-hero {
+    font-size: var(--uix-text-data-hero); line-height: 1.1;
+    font-weight: 400; letter-spacing: -0.01em; color: var(--uix-text);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/styles/components/utility-bits.css

@@ -0,0 +1,14 @@
+/* uix utility/typography bits — code, pre, blockquote, divider, status dots. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-xs); padding: .1em .4em; color: var(--uix-text); }
+  .uix-pre { font-family: var(--uix-font-mono); font-size: var(--uix-text-meta); line-height: 1.5; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); padding: var(--uix-space-4) var(--uix-space-4); overflow-x: auto; color: var(--uix-text); }
+  .uix-blockquote { border-left: 3px solid var(--uix-accent); padding: var(--uix-space-1) 0 var(--uix-space-1) var(--uix-space-4); color: var(--uix-text-hushed); font-style: italic; }
+  .uix-divider { height: 1px; background: var(--uix-border); border: 0; margin: var(--uix-space-4) 0; }
+  .uix-divider--label { display: flex; align-items: center; gap: var(--uix-space-3); color: var(--uix-text-muted); font-size: var(--uix-text-meta); background: transparent; height: auto; }
+  .uix-divider--label::before, .uix-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--uix-border); }
+  .uix-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-text-muted); }
+  .uix-dot--success { background: var(--uix-success); }
+  .uix-dot--warning { background: var(--uix-warning); }
+  .uix-dot--danger { background: var(--uix-danger); }
+  .uix-dot--info { background: var(--uix-info); }
+}

package/styles/components/view-menu.css

@@ -0,0 +1,14 @@
+/* uix table View menu — consolidates density / zebra / freeze / columns into one popover.
+   Reuses .uix-popover (surface + animation), .uix-segmented, .uix-switch. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-view-menu { min-width: 248px; padding: var(--uix-space-2); }
+  .uix-view-menu__group { padding: var(--uix-space-2) var(--uix-space-2); }
+  .uix-view-menu__group + .uix-view-menu__group { border-top: 1px solid var(--uix-border); }
+  .uix-view-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
+  .uix-view-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--uix-space-3); font-size: var(--uix-text-body); color: var(--uix-text); cursor: pointer; }
+  .uix-view-menu__row + .uix-view-menu__row { margin-top: var(--uix-space-3); }
+  .uix-view-menu .uix-segmented { display: flex; width: 100%; }
+  .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); }
+}

package/styles/motion.css

@@ -0,0 +1,35 @@
+/* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
+   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
+
+/* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Keyframes (cascade-neutral). */
+@keyframes uix-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes uix-pop-in {
+  from { opacity: 0; transform: scale(.96) translateY(var(--uix-lift)); }
+  to   { opacity: 1; transform: none; }
+}
+@keyframes uix-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
+@keyframes uix-slide-in-up    { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
+@keyframes uix-spin { to { transform: rotate(1turn); } }
+@keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+@layer uix.motion {
+  .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
+  .uix-anim-pop  { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-anim-up   { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
+
+  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
+  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  @media (hover: hover) and (pointer: fine) {
+    .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
+  }
+}

package/styles/utilities.css

@@ -0,0 +1,26 @@
+/* uix utilities — a few layout/a11y helpers. Keep this small; tokens + components do the heavy lifting. */
+@layer uix.util {
+  /* visually hidden but available to screen readers */
+  .uix-visually-hidden {
+    position: absolute !important;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0);
+    white-space: nowrap; border: 0;
+  }
+
+  /* vertical rhythm — set gap via --gap (defaults to --uix-space-4 / 16px) */
+  .uix-stack { display: flex; flex-direction: column; gap: var(--gap, var(--uix-space-4)); }
+  /* horizontal grouping that wraps */
+  .uix-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--uix-space-2)); }
+
+  .uix-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+  /* elevation — apply the surface shadow tokens as a utility (cards/panels,
+     floating popovers/menus/dialogs, pressed/active pills). In dark mode
+     --uix-shadow-sm resolves to the inset top highlight, so elevated surfaces
+     keep their lift cue without a heavy drop shadow. */
+  .uix-elevated         { box-shadow: var(--uix-shadow-sm); }
+  .uix-elevated-popover { box-shadow: var(--uix-shadow-popover); }
+  .uix-elevated-pill    { box-shadow: var(--uix-shadow-sm); }
+}

package/tokens/base/typography.json

@@ -3,19 +3,19 @@
   "font-heading": { "$type": "fontFamily", "$value": "\"IBM Plex Sans\",\"Inter\",system-ui,sans-serif" },
   "font-mono":    { "$type": "fontFamily", "$value": "\"IBM Plex Mono\",ui-monospace,monospace" },
 
-  "text-display":   { "$type": "dimension", "$value": "2.5rem" },
+  "text-display":   { "$type": "dimension", "$value": "40px" },
   "leading-display":{ "$type": "number",    "$value": "1.05" },
-  "text-data-hero": { "$type": "dimension", "$value": "2.125rem" },
+  "text-data-hero": { "$type": "dimension", "$value": "34px" },
   "leading-data-hero": { "$type": "number", "$value": "1.1" },
-  "text-h2":   { "$type": "dimension", "$value": "1.5rem" },
+  "text-h2":   { "$type": "dimension", "$value": "24px" },
   "leading-h2":{ "$type": "number",    "$value": "1.15" },
-  "text-h3":   { "$type": "dimension", "$value": "0.9375rem" },
+  "text-h3":   { "$type": "dimension", "$value": "15px" },
   "leading-h3":{ "$type": "number",    "$value": "1.3" },
-  "text-body":   { "$type": "dimension", "$value": "0.875rem" },
+  "text-body":   { "$type": "dimension", "$value": "14px" },
   "leading-body":{ "$type": "number",    "$value": "1.5" },
-  "text-meta":   { "$type": "dimension", "$value": "0.78125rem" },
+  "text-meta":   { "$type": "dimension", "$value": "12.5px" },
   "leading-meta":{ "$type": "number",    "$value": "1.4" },
-  "text-eyebrow":   { "$type": "dimension", "$value": "0.6875rem" },
+  "text-eyebrow":   { "$type": "dimension", "$value": "11px" },
   "leading-eyebrow":{ "$type": "number",    "$value": "1.2" },
 
   "tracking-tight":   { "$type": "dimension", "$value": "-0.02em" },