@tensor_1/tokens 2.11.0 → 2.12.0

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); }
+}