@tensor_1/tokens 2.11.0 → 2.13.0

package/styles/components/link.css

@@ -0,0 +1,98 @@
+/* uix link patterns — the quiet link, for anchors whose CONTAINER is the affordance.
+ *
+ * The base layer styles anchors as in-text content links: --uix-link colour, and
+ * classless [href] anchors carry a persistent underline (WCAG 1.4.1 / link-in-text-block —
+ * a link sitting inside a run of same-coloured prose must not be distinguished by colour
+ * alone). That contract is right for prose and wrong for composition slots where the
+ * surrounding row/card already communicates interactivity: framework <Link>s passed into
+ * kit title slots and table cells rendered brand-blue + bold + underlined — unreadable
+ * noise at list density (TENSOR INTRA-04, operator-rejected).
+ *
+ * A quiet link inherits the surrounding text colour and shows its underline on
+ * hover/focus. The global :focus-visible ring (base.css) still fires, so the keyboard
+ * affordance never rests on the underline alone. WCAG 1.4.1 is not in play for anything
+ * below: the link is the WHOLE text of its block — a title, a name, a data cell — or it
+ * is the block itself. It is never a phrase inside a sentence.
+ *
+ * A slot earns quiet-BY-DEFAULT only when BOTH hold:
+ *   (i)  the anchor fills a named title/name slot or a data cell — the link text IS the
+ *        block, not a phrase inside running copy; and
+ *   (ii) the surrounding row/card/tile already reads as interactive (hover state, cursor,
+ *        bordered unit), or the slot is that record's primary label.
+ *
+ * Deliberate exclusions, so the next person doesn't "finish the job":
+ *   • Prose and message bodies — .uix-prose, .uix-note, .uix-notice__copy,
+ *     .uix-timeline__body, .uix-audit__detail, .uix-notif copy. Links there sit inside
+ *     sentences: 1.4.1 applies and the base treatment is correct.
+ *   • .uix-alert, .uix-toast, .uix-peek__title — nothing else in those containers signals
+ *     that the link navigates, so the colour IS the affordance. peek.css sets --uix-link
+ *     on its title anchor on purpose; do not quiet it.
+ *   • .uix-comment__author — a byline renders "Author · 22m ago", so the name is a phrase
+ *     inside a text run, not the whole block, and .uix-comment__meta is not interactive.
+ *     It fails test (i) above. Products wanting the GitHub-style quiet byline opt in with
+ *     .uix-link--quiet; that is what the utility is for.
+ *   • .uix-navitem, .uix-breadcrumbs a, .uix-section-link are already quiet by their own
+ *     design and need no class here.
+ *
+ * Four forms:
+ *   1 · `.uix-link--quiet` — the opt-in utility, for block links outside the registry.
+ *   2 · TITLE / NAME SLOTS — quiet by default. `:not(.uix-btn)` so an anchor deliberately
+ *       styled as a button inside a title slot keeps its button treatment.
+ *   3 · DATA CELLS — table cells and description-list values. `:not([class])` so
+ *       class-bearing anchors (`.uix-btn--link`, pills, tags) stay styled.
+ *   4 · CONTAINER ANCHORS — the anchor IS the kit block (`<a class="uix-card">`). Without
+ *       this the base `a { color }` tints every word in the block brand-blue.
+ * Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-link--quiet,
+
+  /* 2 · title / name slots */
+  :is(
+    /* editorial-home */
+    .uix-featured__title, .uix-rail-card__title, .uix-news-lead__title,
+    .uix-content-list__title, .uix-rundown__item-title, .uix-event-row__title,
+    .uix-status-row__name,
+    /* records, rows, cards */
+    .uix-card__title, .uix-list__title, .uix-inbox__subject, .uix-kanban__card-title,
+    .uix-media__name, .uix-attachment__name, .uix-contact__name, .uix-user-chip__name,
+    .uix-audit__actor
+  ) a:not(.uix-btn),
+
+  /* 3 · data cells */
+  :is(.uix-table td, .uix-dl dd) a:not([class]),
+
+  /* 4 · container anchors */
+  a:is(
+    .uix-card, .uix-stat, .uix-list__item, .uix-inbox__item, .uix-kanban__card,
+    .uix-notif, .uix-media, .uix-attachment, .uix-contact, .uix-cmdk__item,
+    .uix-content-list__item, .uix-event-row, .uix-status-row
+  ) { color: inherit; text-decoration: none; }
+
+  .uix-link--quiet:is(:hover, :focus-visible),
+
+  :is(
+    .uix-featured__title, .uix-rail-card__title, .uix-news-lead__title,
+    .uix-content-list__title, .uix-rundown__item-title, .uix-event-row__title,
+    .uix-status-row__name,
+    .uix-card__title, .uix-list__title, .uix-inbox__subject, .uix-kanban__card-title,
+    .uix-media__name, .uix-attachment__name, .uix-contact__name, .uix-user-chip__name,
+    .uix-audit__actor
+  ) a:not(.uix-btn):is(:hover, :focus-visible),
+
+  :is(.uix-table td, .uix-dl dd) a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; }
+
+  /* Container anchors never underline: the anchor wraps the whole block, so an underline
+     would strike through every word in it. They take the kit's standard row-hover tint
+     instead — the same --uix-bg-hover that .uix-list__item / .uix-inbox__item / .uix-cmdk__item
+     already use, so containers with a hover of their own just restate it. */
+  a:is(
+    .uix-card, .uix-stat, .uix-list__item, .uix-inbox__item, .uix-kanban__card,
+    .uix-notif, .uix-media, .uix-attachment, .uix-contact, .uix-cmdk__item,
+    .uix-content-list__item, .uix-event-row, .uix-status-row
+  ):is(:hover, :focus-visible) { background: var(--uix-bg-hover); }
+
+  /* Container anchors that declare no display of their own would render inline as an <a>.
+     The rest of form 4 (flex/grid rows) set theirs already and must NOT be overridden —
+     link.css is imported last, so a blanket display here would flatten them. */
+  a:is(.uix-card, .uix-stat, .uix-kanban__card) { display: block; }
+}

package/styles/components/list.css

@@ -0,0 +1,10 @@
+/* uix list + list-item — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-list { display: flex; flex-direction: column; border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; background: var(--uix-surface); }
+  .uix-list__item { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
+  .uix-list__item:last-child { border-bottom: 0; }
+  .uix-list__item:hover { background: var(--uix-bg-hover); }
+  .uix-list__title { font-weight: 500; }
+  .uix-list__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-list__trail { margin-left: auto; display: flex; align-items: center; gap: var(--uix-space-2); }
+}

package/styles/components/match-review.css

@@ -0,0 +1,11 @@
+@layer uix.components {
+  .uix-match-review { display:grid; gap:var(--uix-space-3); color:var(--uix-text); }
+  .uix-match-review__summary { display:grid; gap:var(--uix-space-3); padding:var(--uix-space-4); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); } .uix-match-review__summary>div:first-child { display:flex; justify-content:space-between; gap:var(--uix-space-3); } .uix-match-review__summary>div:first-child span { color:var(--uix-text-muted); }
+  .uix-match-review__incoming { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:var(--uix-space-2); } .uix-match-review__incoming span { display:grid; gap:var(--uix-space-1); } .uix-match-review__incoming b { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-match-review__bulk { display:flex; align-items:center; gap:var(--uix-space-2); padding:var(--uix-space-2) var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-brand-muted); }
+  .uix-match-review__table-wrap { overflow:auto; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); }
+  .uix-match-review__table { min-width:54rem; } .uix-match-review__table tr[data-status="resolved"] { background:var(--uix-success-bg); }
+  .uix-match-review__confidence { font-variant-numeric:tabular-nums; font-weight:600; }
+  .uix-match-review__actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
+  .uix-match-review--state { justify-items:start; padding:var(--uix-space-6); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
+}

package/styles/components/media.css

@@ -0,0 +1,9 @@
+/* uix media / device-asset card — image (or icon placeholder) + name + meta. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-media { display: flex; gap: var(--uix-space-3); align-items: center; }
+  .uix-media__thumb { width: 64px; height: 64px; flex: none; border-radius: var(--uix-radius-md); overflow: hidden; background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); display: grid; place-items: center; }
+  .uix-media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .uix-media__thumb svg { width: 28px; height: 28px; color: var(--uix-text-muted); }
+  .uix-media__name { font-weight: 600; }
+  .uix-media__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+}

package/styles/components/menu.css

@@ -0,0 +1,15 @@
+/* uix menu / dropdown / context menu — popover-anchored surface. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-menu { min-width: 200px; margin: 0; padding: var(--uix-space-1); list-style: none; background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); }
+  .uix-menu__item {
+    display: flex; align-items: center; gap: var(--uix-space-3); width: 100%; text-align: left; padding: var(--uix-space-2) var(--uix-space-3);
+    border: 0; background: transparent; border-radius: var(--uix-radius-sm); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
+  }
+  .uix-menu__item svg { width: var(--uix-icon-md); height: var(--uix-icon-md); color: var(--uix-text-muted); }
+  .uix-menu__item:hover, .uix-menu__item[data-active] { background: var(--uix-bg-hover); }
+  .uix-menu__item--danger { color: var(--uix-danger-text); }
+  .uix-menu__item--danger svg { color: var(--uix-danger-text); }
+  .uix-menu__item .uix-kbd { margin-left: auto; }
+  .uix-menu__sep { height: 1px; background: var(--uix-border); margin: var(--uix-space-1) 0; }
+  .uix-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
+}

package/styles/components/meter.css

@@ -0,0 +1,9 @@
+/* uix meter / utilization bar (threshold tones) — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-meter { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
+  .uix-meter__fill { height: 100%; border-radius: inherit; background: var(--uix-success); transition: width var(--uix-dur) var(--uix-ease-out); }
+  .uix-meter__fill[data-tone="warning"]   { background: var(--uix-warning); }
+  .uix-meter__fill[data-tone="danger"]    { background: var(--uix-danger); }
+  .uix-meter__fill[data-tone="attention"] { background: var(--uix-attention); }
+  .uix-meter__fill[data-tone="overdue"]   { background: var(--uix-overdue); }
+}

package/styles/components/metric-input.css

@@ -0,0 +1,9 @@
+@layer uix.components {
+  .uix-metric-input { display:grid; gap:var(--uix-space-2); color:var(--uix-text); }
+  .uix-metric-input__control { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:stretch; max-width:22rem; }
+  .uix-metric-input__control .uix-input { border-top-right-radius:0; border-bottom-right-radius:0; font-variant-numeric:tabular-nums; }
+  .uix-metric-input__unit { display:flex; align-items:center; padding-inline:var(--uix-space-3); border-block:1px solid var(--uix-border-strong); background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
+  .uix-metric-input__steps { display:grid; width:2.5rem; }
+  .uix-metric-input__step { border:1px solid var(--uix-border-strong); background:var(--uix-surface); color:var(--uix-text); line-height:1; } .uix-metric-input__step:first-child { border-top-right-radius:var(--uix-radius-md); } .uix-metric-input__step:last-child { border-top:0; border-bottom-right-radius:var(--uix-radius-md); }
+  .uix-metric-input__step:hover { background:var(--uix-bg-hover); } .uix-metric-input--invalid .uix-metric-input__control { color:var(--uix-danger-text); }
+}

package/styles/components/modal.css

@@ -0,0 +1,31 @@
+/* uix modal / dialog — native <dialog>, animated enter/exit via @starting-style + allow-discrete. */
+@layer uix.components {
+  .uix-dialog {
+    margin: auto; width: 100%; max-width: min(520px, 92vw); padding: 0; color: var(--uix-text);
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg);
+    background: var(--uix-surface-2); box-shadow: var(--uix-shadow-overlay);
+    opacity: 0; transform: translateY(8px) scale(.98);
+    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), transform var(--uix-dur-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* Author display values for both states required for the fade-in to animate: the allow-discrete
+       `display` transition only engages with author values, which also lets @starting-style fire.
+       With only the UA dialog display, the modal stays at opacity:0. Closed = none; open = block. */
+    display: none;
+  }
+  .uix-dialog[open] { opacity: 1; transform: none; display: block; }
+  @starting-style { .uix-dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
+  .uix-dialog::backdrop {
+    background: var(--uix-scrim); opacity: 0;
+    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+  }
+  .uix-dialog[open]::backdrop { opacity: 1; }
+  @starting-style { .uix-dialog[open]::backdrop { opacity: 0; } }
+
+  .uix-dialog__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
+  .uix-dialog__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  .uix-dialog__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
+  .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
+  .uix-dialog__footer { display: flex; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
+}

package/styles/components/notification-center.css

@@ -0,0 +1,14 @@
+/* uix notification center — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-notifs { background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg); overflow: hidden; }
+  .uix-notifs__head { display: flex; align-items: center; padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); font-weight: 600; }
+  .uix-notif { display: grid; grid-template-columns: auto 1fr; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
+  .uix-notif:last-child { border-bottom: 0; }
+  .uix-notif[data-unread] { background: var(--uix-brand-muted); }
+  .uix-notif__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent); margin-top: var(--uix-space-2); }
+  .uix-notif[data-unread] .uix-notif__dot { background: var(--uix-accent); }
+  .uix-notif:not([data-unread]) .uix-notif__dot { background: transparent; }
+  .uix-notif__meta { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  /* on the unread brand-muted tint, muted meta dips below AA — hushed composites darker on the tint */
+  .uix-notif[data-unread] .uix-notif__meta { color: var(--uix-text-hushed); }
+}

package/styles/components/page-header.css

@@ -0,0 +1,9 @@
+/* uix page header — title/subtitle/actions row. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-page-header { display: flex; align-items: flex-start; gap: var(--uix-space-5); flex-wrap: wrap; padding-bottom: var(--uix-space-6); margin-bottom: var(--uix-space-7); border-bottom: 1px solid var(--uix-border); }
+  .uix-page-header__titles { flex: 1; min-width: 220px; }
+  .uix-page-header__eyebrow { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--uix-text-muted); margin-bottom: var(--uix-space-2); }
+  .uix-page-header__title { font-size: var(--uix-text-h2); font-weight: 600; letter-spacing: var(--uix-tracking-tight); }
+  .uix-page-header__subtitle { color: var(--uix-text-muted); font-size: var(--uix-text-meta); margin-top: var(--uix-space-2); max-width: 70ch; }
+  .uix-page-header__actions { display: flex; gap: var(--uix-space-2); align-items: center; flex-wrap: wrap; }
+}

package/styles/components/pagination.css

@@ -0,0 +1,14 @@
+/* uix pagination — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-pagination { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
+  .uix-pagination__btn {
+    min-width: 32px; height: 32px; padding: 0 var(--uix-space-2); display: inline-flex; align-items: center; justify-content: center;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface);
+    color: var(--uix-text); font: inherit; font-size: var(--uix-text-meta); line-height: 1; cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), border-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-pagination__btn:hover { background: var(--uix-bg-hover); }
+  .uix-pagination__btn[aria-current="page"] { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
+  .uix-pagination__btn:disabled { opacity: .45; pointer-events: none; }
+  .uix-pagination__ellipsis { padding: 0 var(--uix-space-1); color: var(--uix-text-muted); }
+}

package/styles/components/peek.css

@@ -0,0 +1,46 @@
+/* uix side-peek drawer (the §5.8 peek pattern, reused by table rows + sidebar items).
+   Native <dialog>, slides from the right; keyboard ↑/↓ navigates records (app.js). */
+@layer uix.components {
+  .uix-peek {
+    margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: var(--uix-peek-w); padding: 0; color: var(--uix-text);
+    border: 0; border-left: 1px solid var(--uix-border); border-radius: 0;
+    background: var(--uix-surface); box-shadow: var(--uix-shadow-overlay);
+    transform: translateX(100%);
+    transition: transform var(--uix-dur-slow) var(--uix-ease-out),
+                overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+    /* Author display values for BOTH states are required for the slide-in to animate: the
+       allow-discrete `display` transition only engages with author values, and that gating also
+       lets the @starting-style entrance fire. With only the UA dialog display, the panel stays
+       parked at translateX(100%). Closed = none; open = flex. */
+    display: none;
+  }
+  .uix-peek[open] { transform: none; display: flex; flex-direction: column; }
+  @starting-style { .uix-peek[open] { transform: translateX(100%); } }
+  .uix-peek::backdrop {
+    background: var(--uix-scrim); opacity: 0;
+    transition: opacity var(--uix-dur-slow) var(--uix-ease-out), overlay var(--uix-dur-slow) allow-discrete, display var(--uix-dur-slow) allow-discrete;
+  }
+  .uix-peek[open]::backdrop { opacity: 1; }
+  @starting-style { .uix-peek[open]::backdrop { opacity: 0; } }
+
+  .uix-peek__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-4); border-bottom: 1px solid var(--uix-border); }
+  .uix-peek__nav { display: inline-flex; gap: var(--uix-space-1); }
+  .uix-peek__navbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--uix-border); background: var(--uix-surface); color: var(--uix-text); border-radius: var(--uix-radius-sm); cursor: pointer; }
+  .uix-peek__navbtn:hover { background: var(--uix-bg-hover); }
+  .uix-peek__title { font-size: var(--uix-text-h3); font-weight: 600; }
+  .uix-peek__title a { color: var(--uix-link); }
+  .uix-peek__close { margin-left: auto; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--uix-radius-sm); }
+  .uix-peek__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-peek__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
+  .uix-peek__hint { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  .uix-peek__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-4); border-top: 1px solid var(--uix-border); }
+
+  /* a table wired to open the peek (app.js sets data-uix-rowpeek): its rows read as clickable,
+     since clicking a ticket row is the queue's primary way to open the side-peek. */
+  [data-uix-rowpeek] tbody tr { cursor: pointer; }
+  [data-uix-rowpeek] tbody tr:hover td { background: var(--uix-bg-hover); }
+
+  /* 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. */
+}

package/styles/components/pipeline.css

@@ -0,0 +1,9 @@
+/* uix deal / pipeline stage bar — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-pipeline { display: flex; gap: var(--uix-space-1); }
+  .uix-pipeline__stage { flex: 1; text-align: center; padding: var(--uix-space-2) var(--uix-space-2); font-size: var(--uix-text-meta); color: var(--uix-text-muted); background: var(--uix-bg-subtle); }
+  .uix-pipeline__stage:first-child { border-radius: var(--uix-radius-pill) 0 0 var(--uix-radius-pill); }
+  .uix-pipeline__stage:last-child { border-radius: 0 var(--uix-radius-pill) var(--uix-radius-pill) 0; }
+  .uix-pipeline__stage[data-state="done"] { background: var(--uix-accent); color: var(--uix-accent-fg); }
+  .uix-pipeline__stage[data-state="active"] { background: var(--uix-brand-muted); color: var(--uix-link); font-weight: 600; }
+}

package/styles/components/popover.css

@@ -0,0 +1,11 @@
+/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
+@layer uix.components {
+  .uix-popover { margin: 0; padding: var(--uix-space-2); background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); color: var(--uix-text); }
+  [popover].uix-popover {
+    opacity: 0; transform: translateY(calc(-1 * var(--uix-lift)));
+    transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
+                overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
+  }
+  [popover].uix-popover:popover-open { opacity: 1; transform: none; }
+  @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: translateY(calc(-1 * var(--uix-lift))); } }
+}

package/styles/components/progress.css

@@ -0,0 +1,12 @@
+/* uix progress bar + ring — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-progress { height: 8px; background: var(--uix-bg-active); border-radius: var(--uix-radius-pill); overflow: hidden; }
+  .uix-progress__bar { height: 100%; background: var(--uix-accent); border-radius: inherit; transition: width var(--uix-dur) var(--uix-ease-out); }
+  .uix-progress--indeterminate { position: relative; }
+  .uix-progress--indeterminate .uix-progress__bar { width: 40%; animation: uix-progress-slide 1.2s var(--uix-ease-in-out) infinite; }
+  @keyframes uix-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
+
+  .uix-ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
+    background: conic-gradient(var(--uix-accent) calc(var(--val, .66) * 360deg), var(--uix-bg-active) 0); }
+  .uix-ring__inner { width: 32px; height: 32px; border-radius: 50%; background: var(--uix-surface); display: grid; place-items: center; font-size: var(--uix-text-meta); font-weight: 600; }
+}

package/styles/components/prose.css

@@ -0,0 +1,27 @@
+/* uix prose content card + note callouts — for KB articles, descriptions, release notes. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-prose { max-width: 66ch; color: var(--uix-text); }
+  .uix-prose > * + * { margin-top: var(--uix-space-3); }
+  .uix-prose h3 { font-size: var(--uix-text-h2); font-weight: 600; }
+  .uix-prose h4 { font-size: var(--uix-text-h3); font-weight: 600; margin-top: var(--uix-space-5); }
+  .uix-prose p { line-height: var(--uix-leading-body); color: var(--uix-text-hushed); }
+  .uix-prose a { color: var(--uix-link); }
+  .uix-prose ul, .uix-prose ol { padding-left: var(--uix-space-5); }
+  .uix-prose li + li { margin-top: var(--uix-space-1); }
+  .uix-prose code { font-family: var(--uix-font-mono); font-size: .9em; background: var(--uix-bg-subtle); padding: 1px var(--uix-space-2); border-radius: var(--uix-radius-xs); }
+  .uix-prose blockquote { border-left: 3px solid var(--uix-border-strong); padding-left: var(--uix-space-3); color: var(--uix-text-muted); }
+
+  .uix-note { display: flex; gap: var(--uix-space-3); padding: var(--uix-space-3) var(--uix-space-4); border-radius: var(--uix-radius-md); border: 1px solid var(--uix-border); background: var(--uix-surface); }
+  .uix-note__icon { flex: none; }
+  .uix-note__icon svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
+  .uix-note__body { font-size: var(--uix-text-body); color: var(--uix-text); }
+  .uix-note__body > * + * { margin-top: var(--uix-space-2); }
+  .uix-note--info { background: var(--uix-info-bg); border-color: color-mix(in srgb, var(--uix-info) 30%, transparent); }
+  .uix-note--info .uix-note__icon { color: var(--uix-info); }
+  .uix-note--success { background: var(--uix-success-bg); border-color: color-mix(in srgb, var(--uix-success) 30%, transparent); }
+  .uix-note--success .uix-note__icon { color: var(--uix-success); }
+  .uix-note--warning { background: var(--uix-warning-bg); border-color: color-mix(in srgb, var(--uix-warning) 30%, transparent); }
+  .uix-note--warning .uix-note__icon { color: var(--uix-warning); }
+  .uix-note--danger { background: var(--uix-danger-bg); border-color: color-mix(in srgb, var(--uix-danger) 30%, transparent); }
+  .uix-note--danger .uix-note__icon { color: var(--uix-danger); }
+}

package/styles/components/radio.css

@@ -0,0 +1,20 @@
+/* uix radio + radio-group — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-radio-group { display: flex; flex-direction: column; gap: var(--uix-space-2); }
+  .uix-radio { display: inline-flex; align-items: center; gap: var(--uix-space-2); cursor: pointer; font-size: var(--uix-text-body); color: var(--uix-text); }
+  .uix-radio > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+  .uix-radio__dot {
+    width: 18px; height: 18px; flex: none; border-radius: 50%;
+    border: 1px solid var(--uix-border-strong); background: var(--uix-surface);
+    display: grid; place-items: center;
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-radio__dot::after {
+    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--uix-accent);
+    opacity: 0; transform: scale(.4); transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-spring);
+  }
+  .uix-radio > input:checked + .uix-radio__dot { border-color: var(--uix-accent); }
+  .uix-radio > input:checked + .uix-radio__dot::after { opacity: 1; transform: none; }
+  .uix-radio > input:focus-visible + .uix-radio__dot { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-radio > input:disabled ~ * { opacity: .5; }
+}

package/styles/components/reactions.css

@@ -0,0 +1,22 @@
+/* uix emoji reactions — pills with counts + an add-reaction picker popover. Depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); margin-top: var(--uix-space-2); }
+  .uix-reaction {
+    display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 1px var(--uix-space-2); line-height: 1.7;
+    border-radius: var(--uix-radius-pill); border: 1px solid var(--uix-border); background: var(--uix-surface);
+    color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); cursor: pointer;
+  }
+  .uix-reaction:hover { border-color: var(--uix-border-strong); }
+  .uix-reaction[data-mine] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent); }
+  .uix-reaction__count { font-variant-numeric: tabular-nums; }
+  .uix-reaction-add {
+    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px;
+    border-radius: var(--uix-radius-pill); border: 1px dashed var(--uix-border-strong); background: transparent;
+    color: var(--uix-text-muted); cursor: pointer;
+  }
+  .uix-reaction-add:hover { color: var(--uix-text); border-color: var(--uix-text-muted); }
+  .uix-reaction-add svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-emoji-picker { display: flex; flex-wrap: wrap; gap: var(--uix-space-1); width: 196px; }
+  .uix-emoji-picker__btn { font-size: 18px; line-height: 1; padding: var(--uix-space-2); border: 0; background: transparent; border-radius: var(--uix-radius-sm); cursor: pointer; }
+  .uix-emoji-picker__btn:hover { background: var(--uix-bg-hover); }
+}

package/styles/components/relationship-graph.css

@@ -0,0 +1,21 @@
+@layer uix.components {
+  .uix-relationship-graph { display:grid; gap:var(--uix-space-3); color:var(--uix-text); }
+  .uix-relationship-graph__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:var(--uix-space-1); } .uix-relationship-graph__toolbar button,.uix-relationship-graph__list-actions button { padding:var(--uix-space-2); border:1px solid var(--uix-border); border-radius:var(--uix-radius-sm); background:var(--uix-surface); color:var(--uix-text); }
+  .uix-relationship-graph__toolbar span,.uix-relationship-graph__bounded { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__visual { min-height:22rem; border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); overflow:hidden; background:var(--uix-bg-subtle); }
+  .uix-relationship-graph__visual svg { display:block; width:100%; height:22rem; }
+  .uix-relationship-graph__edge { stroke:var(--uix-border-strong); stroke-width:2; } .uix-relationship-graph__edge[data-highlighted] { stroke:var(--uix-accent); stroke-width:4; } .uix-relationship-graph__edge[data-conflicted] { stroke:var(--uix-danger); stroke-dasharray:6 4; }
+  .uix-relationship-graph__node { cursor:pointer; } .uix-relationship-graph__node rect { fill:var(--uix-surface); stroke:var(--uix-border-strong); stroke-width:2; } .uix-relationship-graph__node text { fill:var(--uix-text); font-family:var(--uix-font-sans); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__node[data-selected] rect,.uix-relationship-graph__node[data-highlighted] rect { fill:var(--uix-brand-muted); stroke:var(--uix-accent); stroke-width:3; } .uix-relationship-graph__node[data-conflicted] rect { fill:var(--uix-danger-bg); stroke:var(--uix-danger); stroke-dasharray:4 2; }
+  .uix-relationship-graph__node:focus-visible rect { stroke:var(--uix-ring); stroke-width:4; }
+  .uix-relationship-graph__legend { display:flex; gap:var(--uix-space-4); flex-wrap:wrap; margin:0; padding:0; list-style:none; color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__legend li::before { content:""; display:inline-block; width:.8rem; height:.8rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-chart-1); border-radius:var(--uix-radius-pill); vertical-align:middle; }
+  .uix-relationship-graph__list { padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
+  .uix-relationship-graph__list>ul { display:grid; gap:var(--uix-space-2); margin:var(--uix-space-2) 0 0; padding:0; list-style:none; }
+  .uix-relationship-graph__list li { display:flex; justify-content:space-between; gap:var(--uix-space-2); padding:var(--uix-space-2); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  .uix-relationship-graph__list li>button:first-child { display:grid; gap:var(--uix-space-1); flex:1; border:0; background:transparent; color:var(--uix-text); text-align:left; } .uix-relationship-graph__list li>button span { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-relationship-graph__list-actions { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
+  .uix-relationship-graph--compact .uix-relationship-graph__visual,.uix-relationship-graph--compact .uix-relationship-graph__visual svg { min-height:16rem; height:16rem; }
+  .uix-relationship-graph--state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); }
+  @media (max-width:640px) { .uix-relationship-graph__list li { display:grid; } }
+}

package/styles/components/rule-builder.css

@@ -0,0 +1,17 @@
+@layer uix.components {
+  .uix-rule-builder { display:grid; gap:var(--uix-space-4); color:var(--uix-text); }
+  .uix-rule-builder__group,.uix-rule-builder__actions { min-width:0; padding:var(--uix-space-4); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
+  .uix-rule-builder__group-heading { display:flex; align-items:center; gap:var(--uix-space-3); padding:0 var(--uix-space-2); font-weight:600; }
+  .uix-rule-builder__group-heading label { display:flex; align-items:center; gap:var(--uix-space-2); font-size:var(--uix-text-meta); font-weight:400; }
+  .uix-rule-builder__rows { display:grid; gap:var(--uix-space-3); }
+  .uix-rule-builder__condition,.uix-rule-builder__action { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(10rem,1.4fr) auto; gap:var(--uix-space-2); align-items:start; padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); }
+  .uix-rule-builder__nested { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--uix-space-2); align-items:start; }
+  .uix-rule-builder__nested .uix-rule-builder__group { border-left:3px solid var(--uix-accent); }
+  .uix-rule-builder__row-actions,.uix-rule-builder__add { display:flex; flex-wrap:wrap; gap:var(--uix-space-1); }
+  .uix-rule-builder__add { margin-top:var(--uix-space-3); }
+  .uix-rule-builder__actions { display:grid; gap:var(--uix-space-3); }
+  .uix-rule-builder__validation { padding:var(--uix-space-3); border-radius:var(--uix-radius-md); background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
+  .uix-rule-builder__validation:has(ul),.uix-rule-builder__invalid { color:var(--uix-danger-text); background:var(--uix-danger-bg); }
+  .uix-rule-builder--summary { padding:var(--uix-space-4); border:1px solid var(--uix-border); border-radius:var(--uix-radius-lg); background:var(--uix-surface); }
+  @media (max-width:760px) { .uix-rule-builder__condition,.uix-rule-builder__action { grid-template-columns:1fr; } .uix-rule-builder__nested { grid-template-columns:1fr; } }
+}

package/styles/components/scheduling-calendar.css

@@ -0,0 +1,22 @@
+@layer uix.components {
+  .uix-scheduling-calendar { display:grid; gap:var(--uix-space-3); color:var(--uix-text); }
+  .uix-scheduling-calendar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--uix-space-3); flex-wrap:wrap; }
+  .uix-scheduling-calendar__grid { display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr)); border-top:1px solid var(--uix-border); border-left:1px solid var(--uix-border); overflow:auto; }
+  .uix-scheduling-calendar__day { min-height:8rem; padding:var(--uix-space-2); border-right:1px solid var(--uix-border); border-bottom:1px solid var(--uix-border); background:var(--uix-surface); }
+  .uix-scheduling-calendar__day[data-outside] { background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
+  .uix-scheduling-calendar__date { display:block; width:100%; border:0; background:transparent; color:inherit; text-align:right; font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__overlay { display:block; margin-block:var(--uix-space-1); padding:var(--uix-space-1) var(--uix-space-2); border-radius:var(--uix-radius-sm); background:var(--uix-info-bg); color:var(--uix-info-text); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__overlay[data-kind="blackout"] { background:var(--uix-danger-bg); color:var(--uix-danger-text); }
+  .uix-scheduling-calendar__entries { display:grid; gap:var(--uix-space-1); }
+  .uix-scheduling-calendar__entry { min-width:100%; padding:var(--uix-space-1) var(--uix-space-2); border:0; border-left:3px solid var(--uix-info); border-radius:var(--uix-radius-sm); background:var(--uix-info-bg); color:var(--uix-info-text); overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__entry[data-state="conflicted"],.uix-scheduling-calendar__entry[data-state="blackout-violation"] { border-color:var(--uix-danger); background:var(--uix-danger-bg); color:var(--uix-danger-text); }
+  .uix-scheduling-calendar__entry[data-state="in-progress"] { border-color:var(--uix-success); background:var(--uix-success-bg); color:var(--uix-text); }
+  .uix-scheduling-calendar__entry:not([data-range-start]) { border-top-left-radius:0; border-bottom-left-radius:0; } .uix-scheduling-calendar__entry:not([data-range-end]) { border-top-right-radius:0; border-bottom-right-radius:0; }
+  .uix-scheduling-calendar__agenda ol { display:grid; gap:var(--uix-space-2); margin:0; padding:0; list-style:none; }
+  .uix-scheduling-calendar__agenda li>button { width:100%; display:flex; justify-content:space-between; gap:var(--uix-space-3); padding:var(--uix-space-3); border:1px solid var(--uix-border); border-radius:var(--uix-radius-md); background:var(--uix-surface); color:var(--uix-text); text-align:left; }
+  .uix-scheduling-calendar__agenda li>button>span:first-child { display:grid; gap:var(--uix-space-1); } .uix-scheduling-calendar__agenda li>button span span { color:var(--uix-text-muted); font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__legend { display:flex; flex-wrap:wrap; gap:var(--uix-space-3); font-size:var(--uix-text-meta); color:var(--uix-text-muted); }
+  .uix-scheduling-calendar__legend span::before { content:""; display:inline-block; width:.75rem; height:.75rem; margin-right:var(--uix-space-1); border:2px solid var(--uix-info); border-radius:var(--uix-radius-xs); background:var(--uix-info-bg); vertical-align:middle; }
+  .uix-scheduling-calendar__legend span[data-state="conflicted"]::before,.uix-scheduling-calendar__legend span[data-state="blackout-violation"]::before { border-color:var(--uix-danger); background:var(--uix-danger-bg); } .uix-scheduling-calendar__legend span[data-state="in-progress"]::before { border-color:var(--uix-success); background:var(--uix-success-bg); }
+  .uix-scheduling-calendar__state { padding:var(--uix-space-8); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-lg); text-align:center; }
+}

package/styles/components/segmented.css

@@ -0,0 +1,12 @@
+/* uix segmented control — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-segmented { display: inline-flex; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
+  .uix-segmented__option {
+    border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
+    padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
+    transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-segmented__option:hover { color: var(--uix-text); }
+  .uix-segmented__option[aria-selected="true"], .uix-segmented__option[aria-pressed="true"] { background: var(--uix-surface); color: var(--uix-text); box-shadow: var(--uix-shadow-sm); }
+  .uix-segmented__option:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+}

package/styles/components/select.css

@@ -0,0 +1,23 @@
+/* uix select (native, styled) — depends only on --uix-* tokens. */
+@layer uix.components {
+  .uix-select {
+    height: var(--uix-control-h); width: 100%; padding: 0 var(--uix-space-8) 0 var(--uix-space-3); appearance: none;
+    border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md);
+    background-color: var(--uix-surface); color: var(--uix-text); font: inherit; font-size: var(--uix-text-body); cursor: pointer;
+    background-repeat: no-repeat; background-position: right 12px center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out);
+  }
+  .uix-select:hover { border-color: var(--uix-border-strong); }
+  .uix-select:focus { outline: none; border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
+  .uix-select:disabled { opacity: .55; cursor: not-allowed; background-color: var(--uix-bg-subtle); }
+  .uix-select--sm { height: 28px; font-size: var(--uix-text-meta); }
+
+  /* command-palette-style rich select: a trigger that opens a .uix-cmdk popover (search + options) */
+  .uix-select-trigger { display: inline-flex; align-items: center; gap: var(--uix-space-2); height: var(--uix-control-h); padding: 0 var(--uix-space-3); min-width: 220px;
+    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); cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out); }
+  .uix-select-trigger:hover { border-color: var(--uix-border-strong); }
+  .uix-select-trigger:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  .uix-select-trigger__chevron { margin-left: auto; color: var(--uix-text-muted); width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+}