@apliteni/apliteni-ui 0.34.3 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.34.3",
+  "version": "0.36.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -30,6 +30,11 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 
 Components: `DataTable`, `Pagination`, `StatBand`, `Modal`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Button`, `Badge`, `Card`, `Icon`.
 
+`Button` accepts `size="xs" | "sm" | "md" | "lg"` (default `md`). Use `xs`
+for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconOnly>Copy</Button>`.
+Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use
+`--text-xs`. The other sizes keep 16px glyphs.
+
 `CommandPalette` renders the kit's `commandPalette()` markup, class for class, and imports the
 kit's ranking rather than repeating it — so a palette a server rendered and the same palette
 after a keystroke put the same row first. Three differences from the vanilla one. Two are
@@ -96,6 +101,11 @@ each other on the same page.
 
 ## Dropdown
 
+Use `badge: { text: 'Archivado', tone: 'state' }` for off, unset, disabled or archived
+states, including translated labels. Explicit `tone: 'neutral'` uses body ink. When tone
+is omitted, exact English off/unset/disabled/archive/archived labels fall back to state
+ink and Live to live ink; other labels use body ink. This also applies to vanilla `dropdown()`.
+
 `Dropdown` renders the kit's `dropdown()` markup, class for class, and carries
 `wireDropdown()`'s keyboard: the arrows open it onto the first row or the selected one and
 then walk the ring, stepping over a disabled row and wrapping at both ends; Home and End go

package/react/dist/index.css

@@ -98,4 +98,5 @@
 }
 .rx-caret {
   margin-left: 2px;
+  color: var(--muted);
 }

package/react/dist/index.d.ts

@@ -7,7 +7,7 @@ declare function Icon({ name }: {
 
 type ButtonProps = {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     icon?: string;
     iconRight?: string;
     iconOnly?: boolean;

package/react/dist/index.js

@@ -1064,7 +1064,8 @@ var Glyph2 = ({ name, className, hidden }) => /* @__PURE__ */ jsx12(
 function RowBadge({ badge }) {
   const text2 = typeof badge === "string" ? badge : badge.text;
   const given = typeof badge === "string" ? "" : badge.tone || "";
-  const tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
+  let tone = given || (/^live$/i.test(String(text2)) ? "live" : "neutral");
+  if (!given && tone === "neutral" && /^(?:off|unset|disabled|archive|archived)$/i.test(text2)) tone = "state";
   return /* @__PURE__ */ jsx12("span", { className: `ui-dropdown__badge is-${tone}`, children: text2 });
 }
 var keyOf = (it) => it.value != null ? `v:${it.value}` : `l:${it.label}`;

package/src/components/dropdown.js

@@ -22,7 +22,8 @@ function ddBadge(badge) {
   if (!badge) return '';
   const text = typeof badge === 'string' ? badge : badge.text;
   let tone = typeof badge === 'string' ? '' : (badge.tone || '');
-  if (!tone) tone = /^live$/i.test(text) ? 'live' : 'neutral';
+  if (!tone) tone = /^live$/i.test(text) ? 'live'
+    : /^(?:off|unset|disabled|archive|archived)$/i.test(text) ? 'state' : 'neutral';
   return `<span class="${cx('ui-dropdown__badge', `is-${tone}`)}">${esc(text)}</span>`;
 }
 

package/src/styles/back.css

@@ -30,7 +30,7 @@
    and outranks a bare class: it would paint this in the host's link colour.
    (0,2,0) wins without !important — the argument `.ui-nav .ui-nav__item` makes
    in nav.css. */
-.ui-back[href] { color: var(--dim); }
+.ui-back[href] { color: var(--text); }
 .ui-back[href]:hover { color: var(--strong); background: var(--surface-2); }
 .ui-back:focus-visible { outline: none; box-shadow: var(--ring); }
 

package/src/styles/badge.css

@@ -14,7 +14,7 @@
   font-weight: var(--weight-semibold);
   padding: 3px 9px;
   border-radius: var(--radius-pill);
-  color: var(--muted);
+  color: var(--text);
   background: var(--surface-2);
   white-space: nowrap;
 }
@@ -26,18 +26,18 @@
 .ui-badge--info { color: var(--chip-info-ink); background: var(--chip-info-fill); }
 .ui-badge--warn { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
 .ui-badge--danger { color: var(--chip-danger-ink); background: var(--chip-danger-fill); }
-.ui-badge--archive { color: var(--muted); background: var(--surface); }
+.ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--surface); }
 
 /* Semantic status variants — for record/row status in data tables
    (paid / verified / pending / failed …). Same chip, mapped to meaning. */
 .ui-badge--success { color: var(--chip-success-ink); background: var(--chip-success-fill); }
 .ui-badge--pending { color: var(--chip-warn-ink); background: var(--chip-warn-fill); }
-.ui-badge--neutral { color: var(--muted); background: var(--surface-2); }
+.ui-badge--neutral { color: var(--text); background: var(--surface-2); }
 
 /* The two neutral chips are the exception: their light fill is already in the
-   surface scale (--surface-3), and their ink is plain --muted. */
-:root[data-theme="light"] .ui-badge--neutral,
-:root[data-theme="light"] .ui-badge--archive { color: var(--muted); background: var(--surface-3); }
+   surface scale (--surface-3), and only archive uses muted state ink. */
+:root[data-theme="light"] .ui-badge--neutral { background: var(--surface-3); }
+:root[data-theme="light"] .ui-badge--archive { /* muted-ink: state — archived record */ color: var(--muted); background: var(--surface-3); }
 
 /* Pill: same shape, sentence case, a touch larger — a metadata chip */
 .ui-pill {
@@ -46,7 +46,7 @@
   gap: 7px;
   /* rank: chip */
   font-size: var(--text-xs);
-  color: var(--muted);
+  color: var(--text);
   background: var(--surface-2);
   border-radius: var(--radius-pill);
   padding: 4px 11px;

package/src/styles/base.css

@@ -120,7 +120,7 @@ strong {
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
 }
 
 /* Sensible default size for inline icons that a parent rule doesn't size.

package/src/styles/button.css

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Button — .ui-btn  (variants: primary / secondary / ghost / danger)
- *                   (sizes: sm / md / lg, [icon], [disabled], [aria-busy])
+ *                   (sizes: xs / sm / md / lg, [icon], [disabled], [aria-busy])
  * ========================================================================== */
 
 .ui-btn {
@@ -56,7 +56,7 @@
 .ui-btn--ghost {
   background: transparent;
   border-color: transparent;
-  color: var(--dim);
+  color: var(--text);
 }
 .ui-btn--ghost:hover {
   background: var(--surface-2);
@@ -64,7 +64,7 @@
   color: var(--strong);
 }
 
-.ui-btn--danger { color: var(--muted); }
+.ui-btn--danger { color: var(--text); }
 .ui-btn--danger:hover {
   color: var(--pink);
   border-color: var(--pink);
@@ -72,11 +72,15 @@
 }
 
 /* -- Sizes -------------------------------------------------------------- */
+/* why: docs/specification.md#extra-small-buttons */
+.ui-btn--xs { --btn-pad-y: 4.5px; --btn-pad-x: 8px; --btn-font: var(--text-xs); min-width: 24px; min-height: 24px; }
+.ui-btn--xs svg { width: 13px; height: 13px; stroke-width: 2.8; }
 .ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: calc(var(--text-sm) - 0.5px); }
 .ui-btn--lg { --btn-pad-y: 13px; --btn-pad-x: 24px; --btn-font: var(--text-md); border-radius: var(--radius-md); }
 
 /* Icon-only */
 .ui-btn--icon { padding: 9px; border-radius: var(--radius-sm); }
+.ui-btn--icon.ui-btn--xs { padding: 4.5px; }
 .ui-btn--icon.ui-btn--sm { padding: 6px; }
 
 .ui-btn--block { width: 100%; }
@@ -91,7 +95,7 @@
 .ui-btn[aria-disabled="true"] {
   background: var(--disabled-surface);
   border-color: var(--disabled-border);
-  color: var(--disabled-ink);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -100,12 +104,12 @@
 .ui-btn--ghost[aria-disabled="true"] {
   background: transparent;
   border-color: transparent;
-  color: var(--disabled-ink-bare);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare);
 }
 /* With no box, the ink is read on whatever is behind it, so the ghost takes an ink
    set for the dullest ground: in dark 7.49 / 6.31 / 7.00 / 5.44 on --bg / --surface /
-   --surface-2 / --surface-3, in light 5.70 / 6.17 / 5.20 / 5.39. The enabled ghost's
-   --dim reads about 1.5 times that in both themes. #273 cut this ink to rescue two
+   --surface-2 / --surface-3, in light 5.70 / 6.17 / 5.20 / 5.39. The enabled ghost now uses body
+   ink, keeping its words readable without changing the disabled pair. #273 cut this ink to rescue two
    dark pairs from under #220's floor; #295 re-picked --muted against the elevation
    ladder and lifted both clear, so it is the margin now rather than the rescue.
 
@@ -139,6 +143,7 @@
   transform-origin: center;
   animation: ui-bars-in var(--dur-fast) var(--ease) both;
 }
+.ui-btn--xs .ui-btn__bars { left: 4px; right: 4px; bottom: 2px; height: 2px; }
 .ui-btn--sm .ui-btn__bars { left: 7px; right: 7px; bottom: 4px; }
 .ui-btn--lg .ui-btn__bars { left: 14px; right: 14px; bottom: 7px; }
 .ui-btn__bars i {

package/src/styles/callout.css

@@ -10,9 +10,9 @@
   background: var(--surface-2);
   font-size: calc(var(--text-sm) + 0.5px);
   line-height: 1.55;
-  color: var(--dim);
+  color: var(--text);
 }
-.ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
+.ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; /* muted-ink: glyph — nonverbal callout icon */ color: var(--muted); }
 .ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.1; } /* 2.1 of a 24 box drawn at 18px = 1.58 CSS px, which is what buys the 3:1 graphic bar rather than the 4.5:1 text one. docs/specification.md#icons-and-glyphs */
 .ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }
@@ -61,7 +61,7 @@
 .ui-toast--danger  { --toast-accent: var(--pink);  --toast-action-ink: var(--chip-danger-ink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
 .ui-toast--warn    { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink);    --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
 .ui-toast--info    { --toast-accent: var(--cyan);  --toast-action-ink: var(--chip-info-ink);    --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
-.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--text);            --toast-glow: var(--surface-2); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
 .ui-toast--soft::before,
@@ -74,7 +74,7 @@
 .ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; } /* 2.8 of a 24 box drawn at 13px = 1.52 CSS px. The circle has no room for a bigger glyph, so the weight comes out of the stroke. docs/specification.md#icons-and-glyphs */
 .ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
-.ui-toast__text { color: var(--dim); }
+.ui-toast__text { color: var(--text); }
 
 /* trailing action ("Undo" / "Retry") — status-coloured TEXT, so it takes the
    text-grade ink rather than the accent.
@@ -87,7 +87,7 @@
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
 
-.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; /* muted-ink: glyph — dismiss icon */ color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
 /* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
    the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box
@@ -142,14 +142,14 @@
    (--chip-success-ink in light). The opacity: 0.82 this replaced measured 4.19
    there, and 2.25 on the dark danger fill — the pair was correct and the
    dilution then spent it. */
-.ui-toast--solid .ui-toast__text { color: color-mix(in srgb, var(--toast-ink) 90%, transparent); }
+.ui-toast--solid .ui-toast__text { color: var(--toast-ink); }
 .ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-ink) 22%, transparent); color: var(--toast-ink); }
 .ui-toast--solid .ui-toast__action { color: var(--toast-ink); }
 /* Hover darkens the FILL rather than lightening the ink. Washing the ink over
    itself was the one surface #149 did not reach, and it worked against the pair
    it was drawn from: it pulled the fill towards the ink it has to clear. */
 .ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--signal-contrast) 14%, transparent); }
-.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
+.ui-toast--solid .ui-toast__close { /* muted-ink: glyph — dismiss icon on solid toast */ color: color-mix(in srgb, var(--toast-ink) 68%, transparent); }
 .ui-toast--solid .ui-toast__close:hover { color: var(--toast-ink); }
 .ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }
 
@@ -191,4 +191,4 @@
 }
 .ui-success__check svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; }
 .ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; }
-.ui-success__sub { color: var(--dim); font-size: var(--text-base); }
+.ui-success__sub { color: var(--text); font-size: var(--text-base); }

package/src/styles/card.css

@@ -64,7 +64,7 @@
   margin: 0 0 5px;
 }
 .ui-card__sub {
-  color: var(--dim);
+  color: var(--text);
   font-size: var(--text-base);
   line-height: var(--leading-snug);
   margin-bottom: var(--space-5);
@@ -80,7 +80,7 @@
 }
 .ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
 .ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
-.ui-card__row .hint { color: var(--dim); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }
+.ui-card__row .hint { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }
 
 /* Icon chip that leads a card header */
 .ui-card__icon {

package/src/styles/code.css

@@ -18,7 +18,7 @@
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
 }
 .ui-snippet pre {
   margin: 0;
@@ -33,7 +33,7 @@
 .ui-snippet__copy {
   background: none;
   border: 0;
-  color: var(--muted);
+  color: var(--text);
   cursor: pointer;
   font-family: var(--font-sans);
   font-size: calc(var(--text-xs) + 1px);
@@ -57,7 +57,7 @@
 .ui-snippet pre .f { color: var(--cyan); }
 .ui-snippet pre .s { color: var(--green); }
 .ui-snippet pre .u { color: var(--cyan); }
-.ui-snippet pre .c { color: var(--muted); }
+.ui-snippet pre .c { color: var(--text); font-style: italic; }
 
 /* Reveal: a live secret/token, tinted green */
 .ui-snippet--reveal {

package/src/styles/command-palette.css

@@ -99,7 +99,7 @@
 }
 .ui-cmdk__search-ic {
   display: inline-flex;
-  color: var(--muted);
+  /* muted-ink: glyph — search icon */ color: var(--muted);
   flex: none;
 }
 /* 2.2 of a 24 box drawn at 17px = 1.56 CSS px, which is what keeps the mark a
@@ -130,7 +130,7 @@
      already carries one, and the caret says where the typing goes. */
   outline: none;
 }
-.ui-cmdk__input::placeholder { color: var(--muted); }
+.ui-cmdk__input::placeholder { /* muted-ink: placeholder — empty command search */ color: var(--muted); }
 
 /* -- The list ------------------------------------------------------------- */
 
@@ -149,7 +149,7 @@
   padding: var(--space-2) var(--space-3) var(--space-1);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
 }
 
 /* Row — [icon] [label + description] [badge] [keys]. A <div role="option">, so
@@ -183,7 +183,7 @@
 
 .ui-cmdk__ic {
   display: inline-flex;
-  color: var(--dim);
+  /* muted-ink: glyph — result icon */ color: var(--dim);
   flex: none;
 }
 /* 2.3 of a 24 box drawn at 16px = 1.53 CSS px. Same arithmetic as the dropdown's
@@ -208,10 +208,10 @@
 }
 .ui-cmdk__desc {
   font-size: var(--text-sm);
-  /* --dim and not --muted: a row's note is how two rows called INV-4812 and
+  /* Body ink: a row's note is how two rows called INV-4812 and
      INV-4809 are told apart, which is not something a reader may skip.
-     why: docs/specification.md#colour-and-contrast */
-  color: var(--dim);
+     why: docs/specification.md#text-ink */
+  color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -224,7 +224,7 @@
   border-radius: var(--radius-pill);
   border: 1px solid var(--border);
   font-size: var(--text-xs);
-  color: var(--dim);
+  color: var(--text);
 }
 
 /* Destructive rows take the kit's danger ink, never the accent, and stay quiet
@@ -232,8 +232,8 @@
    writes with :hover. A palette row is reached with an arrow key far more often
    than with a pointer, so `.is-active` carries the signal beside :hover: it is
    the same moment, and it is the row Enter would run.
-   why: docs/specification.md#colour-and-contrast */
-.ui-cmdk__item.is-danger .ui-cmdk__label { color: var(--muted); }
+   why: docs/specification.md#text-ink */
+.ui-cmdk__item.is-danger .ui-cmdk__label { color: var(--text); }
 .ui-cmdk__item.is-danger:hover .ui-cmdk__label,
 .ui-cmdk__item.is-danger.is-active .ui-cmdk__label { color: var(--pink); }
 .ui-cmdk__item.is-danger.is-active .ui-cmdk__ic { color: var(--pink); }
@@ -242,11 +242,11 @@
    for a control with no box of its own: --disabled-surface IS --surface-2,
    which is the panel behind it, so a disabled row paints no box a reader can
    see and its label is read on whatever the panel is.
-   why: docs/specification.md#colour-and-contrast */
-.ui-cmdk__item.is-disabled { cursor: default; color: var(--disabled-ink-bare); }
+   why: docs/specification.md#text-ink */
+.ui-cmdk__item.is-disabled { cursor: default; /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare); }
 .ui-cmdk__item.is-disabled .ui-cmdk__label,
 .ui-cmdk__item.is-disabled .ui-cmdk__desc,
-.ui-cmdk__item.is-disabled .ui-cmdk__ic { color: var(--disabled-ink-bare); }
+.ui-cmdk__item.is-disabled .ui-cmdk__ic { /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare); }
 
 /* -- Keys, empty state, legend -------------------------------------------- */
 
@@ -262,7 +262,7 @@
   font-family: var(--font-sans);
   font-size: var(--text-xs);
   line-height: 1.5;
-  color: var(--dim);
+  color: var(--text);
   text-align: center;
 }
 
@@ -271,7 +271,7 @@
   padding: var(--space-6) var(--space-4) var(--space-8);
   text-align: center;
   font-size: var(--text-base);
-  color: var(--dim);
+  color: var(--text);
 }
 
 .ui-cmdk__foot {
@@ -281,7 +281,7 @@
   padding: var(--space-2) var(--space-4);
   border-top: 1px solid var(--border);
   font-size: var(--text-xs);
-  color: var(--muted);
+  color: var(--text);
 }
 .ui-cmdk__foot span { display: inline-flex; align-items: center; gap: 5px; }
 

package/src/styles/confirm.css

@@ -105,7 +105,7 @@
   font-size: var(--text-sm);
   font-weight: var(--weight-normal);
   line-height: 1.55;
-  color: var(--muted);
+  color: var(--text);
 }
 .ui-confirm__acts {
   display: flex;

package/src/styles/drawer.css

@@ -159,7 +159,7 @@
   width: 30px; height: 30px;
   flex: none;
   cursor: pointer;
-  color: var(--muted);
+  /* muted-ink: glyph — dismiss icon */ color: var(--muted);
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
@@ -232,7 +232,7 @@
   padding-block: var(--space-1);
   overflow-wrap: anywhere;
 }
-.ui-drawer__row dt { color: var(--muted); }
+.ui-drawer__row dt { color: var(--text); }
 .ui-drawer__row dd { color: var(--text); font-variant-numeric: tabular-nums; }
 .ui-drawer__rows + * { margin-top: var(--space-3); }
 

package/src/styles/dropdown.css

@@ -25,7 +25,7 @@
 }
 .ui-dropdown__trigger:hover { border-color: var(--accent); }
 .ui-dropdown__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
-.ui-dropdown__pre { color: var(--muted); }
+.ui-dropdown__pre { color: var(--text); }
 .ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 
 /* Chevron — border caret that flips when the container is .open. Its ink is an L
@@ -156,8 +156,8 @@
 .ui-dropdown__item:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }
 .ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ui-dropdown__label { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
-.ui-dropdown__desc { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
-.ui-dropdown__ic { display: inline-flex; flex: none; color: var(--muted); }
+.ui-dropdown__desc { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }
+.ui-dropdown__ic { display: inline-flex; flex: none; /* muted-ink: glyph — option icon */ color: var(--muted); }
 .ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; }
 
 /* Trailing selected tick (listbox variant) */
@@ -178,7 +178,7 @@
   border-radius: var(--radius-pill);
   margin-left: auto;
   flex: none;
-  color: var(--muted);
+  color: var(--text);
   /* A chip is the top step. why: docs/specification.md#elevation */
   background: var(--surface-3);
 }
@@ -190,13 +190,13 @@
 .ui-dropdown__badge.is-accent { color: var(--accent); background: var(--surface-3); }
 
 /* Disabled + danger rows */
-.ui-dropdown__item.is-disabled { color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
+.ui-dropdown__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
 .ui-dropdown__item.is-disabled .ui-dropdown__label,
 .ui-dropdown__item.is-disabled .ui-dropdown__desc { color: inherit; }
-/* Quiet at rest, --pink on the way to being pressed. Both states, not hover alone:
+/* Body ink at rest, --pink on the way to being pressed. Both states, not hover alone:
    the ring says where the reader is, not that this row ends something.
    why: docs/specification.md#a-dropdown-row-is-a-div-a-link-or-a-button */
-.ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
+.ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--text); }
 .ui-dropdown__item.is-danger:hover .ui-dropdown__label,
 .ui-dropdown__item.is-danger:focus-visible .ui-dropdown__label { color: var(--pink); }
 
@@ -207,7 +207,7 @@
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
   padding: 7px 12px 4px;
 }
 
@@ -244,7 +244,7 @@
   position: absolute;
   left: 11px;
   display: inline-flex;
-  color: var(--muted);
+  /* muted-ink: glyph — search icon */ color: var(--muted);
   pointer-events: none;
 }
 /* 16px at 2.4 paints 1.6px, over the 1.5px floor stories/glyph-stroke.test.js holds. */
@@ -273,7 +273,7 @@
    why: docs/specification.md#elevation */
 :root[data-theme="light"] .ui-dropdown__search-input { background: var(--bg); }
 
-.ui-dropdown__search-input::placeholder { color: var(--muted); }
+.ui-dropdown__search-input::placeholder { /* muted-ink: placeholder — empty search field */ color: var(--muted); }
 .ui-dropdown__search-input:hover { border-color: var(--border-strong); }
 .ui-dropdown__search-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
 
@@ -291,4 +291,6 @@
 .ui-dropdown__none { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 10px; text-align: center; }
 .ui-dropdown__none:empty { display: none; }
 .ui-dropdown__none-title { font-size: calc(var(--text-sm) - 0.5px); font-weight: 600; color: var(--strong); }
-.ui-dropdown__none-hint { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
+.ui-dropdown__none-hint { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }
+
+.ui-dropdown__badge.is-state { /* muted-ink: state — off, unset, disabled or archived badge */ color: var(--muted); }

package/src/styles/empty.css

@@ -22,7 +22,7 @@
   text-align: center;
   gap: 8px;
   padding: 48px 24px;
-  color: var(--muted);
+  color: var(--text);
 }
 
 /* Duotone illustration slot. */
@@ -77,7 +77,7 @@
   width: 32px;
   height: 32px;
   margin: 0 auto 14px;
-  color: var(--muted);
+  /* muted-ink: glyph — empty-state illustration */ color: var(--muted);
   opacity: 0.6;
 }
 .ui-empty__icon svg {

package/src/styles/feedback.css

@@ -76,30 +76,30 @@
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
 .ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
-.ui-fbc__x { margin-left: auto; background: var(--surface-2); color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
+.ui-fbc__x { margin-left: auto; background: var(--surface-2); /* muted-ink: glyph — dismiss icon */ color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
 .ui-fbc__x:hover { color: var(--strong); }
 .ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface-2); border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
 .ui-fbc__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
-.ui-fbc__quote q { quotes: none; color: var(--dim); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
+.ui-fbc__quote q { quotes: none; color: var(--text); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
 .ui-fbc__body { padding: 14px 20px 0; }
 .ui-fbcomposer textarea {
   width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55;
   color: var(--strong); background: var(--surface-2); border: 0; border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
 }
-.ui-fbcomposer textarea::placeholder { color: var(--muted); }
+.ui-fbcomposer textarea::placeholder { /* muted-ink: placeholder — empty feedback field */ color: var(--muted); }
 .ui-fbcomposer textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
 .ui-fbc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 20px 18px; }
 
 .ui-fbbtn { font-family: var(--font-sans); font-size: calc(var(--text-sm) + 0.5px); font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
-.ui-fbbtn.ghost { background: transparent; color: var(--dim); }
+.ui-fbbtn.ghost { background: transparent; color: var(--text); }
 .ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface-2); }
 .ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
 .ui-fbbtn.primary:hover { filter: brightness(1.08); }
 /* Same flat pair as .ui-btn:disabled, for the same reason (#220). */
 .ui-fbbtn.primary:disabled {
   background: var(--disabled-surface);
-  color: var(--disabled-ink);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: default;
   filter: none;
 }
@@ -115,7 +115,7 @@
 .ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the mark draws while the spring is still settling */ }
 .ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the comet rides the mark, so it shares its duration and delay exactly */ }
 .ui-fbc__done h4 { color: var(--strong); font-size: calc(var(--text-lg) + 1px); font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
-.ui-fbc__done p { color: var(--dim); font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
+.ui-fbc__done p { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
 .ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-fbc__done .row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
 @keyframes uiFbCkDraw { to { stroke-dashoffset: 0; } }

package/src/styles/footer.css

@@ -9,10 +9,10 @@
 .ui-footer {
   --footer-surface: transparent;
   --footer-border: var(--border);
-  --footer-link: var(--muted);
+  --footer-link: var(--text);
   --footer-link-hover: var(--strong);
   --footer-title: var(--strong);
-  --footer-text: var(--dim);
+  --footer-text: var(--text);
 
   background: var(--footer-surface);
   border-top: 1px solid var(--footer-border);

package/src/styles/input.css

@@ -13,7 +13,7 @@
 /* Required marker. Decoration only — the control carries `required`, which is
    what assistive technology reads, so this asterisk is aria-hidden. */
 .ui-field__req { color: var(--pink); margin-left: 4px; }
-.ui-field__hint { color: var(--muted); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; }
+.ui-field__hint { color: var(--text); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; }
 .ui-field__error { color: var(--pink); font-size: var(--text-sm); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
 .ui-field__error svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
 
@@ -45,7 +45,7 @@
 }
 
 .ui-input::placeholder,
-.ui-textarea::placeholder { color: var(--muted); opacity: 0.9; }
+.ui-textarea::placeholder { /* muted-ink: placeholder — empty form field */ color: var(--muted); opacity: 0.9; }
 
 /* The value a reader typed is still the value; it goes quiet, it does not fade
    into the field under it the way an opacity would take both down together. #220 */
@@ -59,7 +59,7 @@
 .ui-textarea:disabled {
   background: var(--disabled-surface);
   border-color: var(--disabled-border);
-  color: var(--disabled-ink);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: not-allowed;
 }
 
@@ -75,7 +75,7 @@
   left: 14px;
   width: 17px;
   height: 17px;
-  color: var(--muted);
+  /* muted-ink: glyph — field icon */ color: var(--muted);
   pointer-events: none;
 }
 .ui-input-group__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; }

package/src/styles/layout.css

@@ -163,7 +163,7 @@
 .ui-app__who b { display: block; color: var(--strong); font-weight: var(--weight-semibold); }
 /* nowrap is what makes the ellipsis fire — without it the address wraps, and
    the rail column is max-content, so a long one widens the rail instead. */
-.ui-app__who span { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ui-app__who span { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 /* -- the reader's menu ---------------------------------------------------- */
 /* The account block is a dropdown() trigger, so it takes the rail's own row skin
@@ -198,7 +198,7 @@
    `text-overflow` would have nothing to fire against — the inert pair
    .ui-app__who's own comment warns about. `anywhere` keeps an address with no
    break in it from widening the panel instead. */
-.ui-app__user-panel .ui-dropdown__head span { display: block; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.ui-app__user-panel .ui-dropdown__head span { display: block; color: var(--text); font-size: var(--text-xs); overflow-wrap: anywhere; }
 
 /* The toggle's cell, at the far end of the brand row: the auto margin puts it there
    with or without a wordmark beside it, and the offset below rides it back onto the
@@ -221,7 +221,7 @@
    row under it. The glyph box carries the line instead, in both states.
    why: docs/specification.md#the-page-shell */
 .ui-app__fold .ui-nav__ic { height: 1lh; }
-.ui-app .ui-app__fold { color: var(--dim); }
+.ui-app .ui-app__fold { color: var(--text); }
 .ui-app .ui-app__fold:hover,
 .ui-app .ui-app__fold:focus-visible { color: var(--strong); }
 /* The width's own clock, not the words', so the mark and the closing edge arrive
@@ -351,7 +351,7 @@
   font: inherit;
   font-size: var(--text-sm);
   text-align: start;
-  color: var(--muted);
+  color: var(--text);
   /* --surface, not the sunken --surface-2 every other field in the kit takes:
      those sit on a card and this one sits on the band, and the band IS --bg, the
      bottom of the ladder — so a sunken fill has nowhere to go but down into its
@@ -402,7 +402,7 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-.ui-app__sub { color: var(--dim); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
+.ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
 .ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
 /* A flex child's min-width is its content by default, so one wide block — a
    ledger, a code sample — pushes the whole page sideways instead of scrolling
@@ -509,10 +509,10 @@
 .ui-auth__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
 .ui-auth__brand span { font-size: calc(var(--text-base) + 0.5px); font-weight: 600; color: var(--strong); }
 .ui-auth__title { color: var(--strong); font-size: calc(var(--text-xl) + 2px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
-.ui-auth__sub { color: var(--dim); font-size: var(--text-base); line-height: 1.55; margin-bottom: 26px; }
-.ui-auth__foot { margin-top: 24px; text-align: center; font-size: var(--text-sm); color: var(--muted); }
+.ui-auth__sub { color: var(--text); font-size: var(--text-base); line-height: 1.55; margin-bottom: 26px; }
+.ui-auth__foot { margin-top: 24px; text-align: center; font-size: var(--text-sm); color: var(--text); }
 .ui-auth__foot a { color: var(--accent); }
-.ui-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: calc(var(--text-xs) + 1px); }
+.ui-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text); font-size: calc(var(--text-xs) + 1px); }
 .ui-divider::before, .ui-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
 
 /* App scope grant list (OAuth consent) */
@@ -528,7 +528,7 @@
 }
 .ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
 .ui-scope__t { color: var(--strong); font-size: calc(var(--text-base) - 0.5px); font-weight: 500; }
-.ui-scope__d { color: var(--dim); font-size: var(--text-sm); margin-top: 2px; line-height: 1.5; }
+.ui-scope__d { color: var(--text); font-size: var(--text-sm); margin-top: 2px; line-height: 1.5; }
 
 /* -- Landing hero -------------------------------------------------------- */
 .ui-hero {
@@ -567,7 +567,7 @@
 }
 .ui-hero__sub {
   font-size: clamp(16px, 2.1vw, 20px);
-  color: var(--dim);
+  color: var(--text);
   max-width: var(--prose-lede);
   margin: 0 auto 34px;
   line-height: 1.6;
@@ -595,8 +595,8 @@
 }
 .ui-feature__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.8; }
 .ui-feature h3 { color: var(--strong); font-size: calc(var(--text-lg) - 1px); font-weight: 600; margin-bottom: 7px; }
-.ui-feature p { color: var(--dim); font-size: var(--text-base); line-height: 1.6; }
+.ui-feature p { color: var(--text); font-size: var(--text-base); line-height: 1.6; }
 
 .ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
-.ui-section-head p { color: var(--dim); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }
+.ui-section-head p { color: var(--text); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }

package/src/styles/loading.css

@@ -89,7 +89,7 @@
   text-align: center;
   gap: 8px;
   padding: 48px 24px;
-  color: var(--muted);
+  color: var(--text);
 }
 .ui-denied__seal {
   width: 44px;
@@ -98,7 +98,7 @@
   border-radius: 50%;
   display: grid;
   place-items: center;
-  color: var(--dim);
+  /* muted-ink: glyph — permission seal */ color: var(--dim);
   background: color-mix(in srgb, var(--text) 7%, transparent);
 }
 .ui-denied__seal svg {

package/src/styles/nav.css

@@ -41,7 +41,7 @@
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
   padding: 4px 12px 8px;
   /* Goes on the labels' clock — a section heading is words, and the fold takes
      every word on the rail together. */
@@ -105,16 +105,16 @@
   transition: opacity var(--dur-fast) var(--ease);
 }
 
-/* Destructive row (sign out, revoke). Quiet at rest, --pink once a pointer or
+/* Destructive row (sign out, revoke). Body ink at rest, --pink once a pointer or
    the keyboard reaches it — as .ui-btn--danger and .ui-dropdown__item do. */
-.ui-nav__item.is-danger { color: var(--muted); }
+.ui-nav__item.is-danger { color: var(--text); }
 .ui-nav__item.is-danger:hover { background: var(--glow-pink); color: var(--pink); }
 /* Tabbing onto it is the same "about to click this" the pointer means. The ring
    says where you are; only this says what the row does. */
 .ui-nav__item.is-danger:focus-visible { background: var(--glow-pink); color: var(--pink); }
-/* A row that is off. No opacity: the label was already --muted and the fade
-   only pulled it toward the rail behind it (#220). */
-.ui-nav__item.is-disabled { color: var(--disabled-ink); cursor: default; pointer-events: none; }
+/* An unavailable row uses disabled ink directly; opacity would also fade its
+   background and pull its label toward the rail behind it (#220). */
+.ui-nav__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: default; pointer-events: none; }
 
 /* The current row under the pointer. It rests on --surface-3, which is also what
    a resting row hovers to, so the one row with no hover response was the row the
@@ -141,7 +141,7 @@
   font-weight: 600;
   line-height: 1;
   background: var(--surface-3);
-  color: var(--dim);
+  color: var(--text);
   /* The count fades with the words. It is never lost: sidebarNav() spells it
      into the row's aria-label, so "Pending 3" is what a reader hears at either
      width. */
@@ -267,7 +267,7 @@
   align-items: center;
   gap: 8px;
   padding: 11px 14px;
-  color: var(--dim);
+  color: var(--text);
   text-decoration: none;
   font-size: calc(var(--text-base) - 0.5px);
   font-weight: 500;
@@ -300,7 +300,7 @@
   color: var(--accent);
 }
 
-.ui-nav__tab.is-disabled { color: var(--disabled-ink); cursor: default; }
+.ui-nav__tab.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: default; }
 .ui-nav__tab .ui-nav__badge { height: 18px; }
 
 /* -- Breadcrumbs --------------------------------------------------------- */
@@ -328,7 +328,7 @@
 /* Carries the block's class as well as its own, for the reason .ui-nav__item
    does above: a linked crumb is an <a>, and a host stylesheet's `a:link` is
    (0,1,1), which outranks a bare (0,1,0) class. */
-.ui-nav .ui-nav__crumb { color: var(--dim); }
+.ui-nav .ui-nav__crumb { color: var(--text); }
 a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface-2); }
 a.ui-nav__crumb:focus-visible { outline: none; box-shadow: var(--ring); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }

package/src/styles/pagination.css

@@ -20,7 +20,7 @@
    target group in one place as the row count changes width. */
 .ui-pager__status {
   margin: 0 auto 0 0;
-  color: var(--muted);
+  color: var(--text);
   font-variant-numeric: tabular-nums;
 }
 
@@ -29,7 +29,7 @@
   align-items: center;
   gap: var(--space-2);
 }
-.ui-pager__size-label { color: var(--muted); }
+.ui-pager__size-label { color: var(--text); }
 
 /* .ui-select is a form field sized for a form — full width, 12px/15px padding.
    In a pager it sits in a row of sm buttons, so it takes their scale. Two things
@@ -77,14 +77,14 @@
 
 .ui-pager__gap {
   padding: 0 var(--space-1);
-  color: var(--muted);
+  /* muted-ink: glyph — ellipsis for omitted page controls */ color: var(--muted);
 }
 
 .ui-pager__jump {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
-  color: var(--muted);
+  color: var(--text);
   padding: 0 var(--space-1);
 }
 /* Wide enough for four digits and the spinner a number input draws beside them;
@@ -120,6 +120,6 @@
    discovered.
    why: docs/specification.md#pagination */
 a.ui-pager__step,
-a.ui-pager__page { color: var(--dim); }
+a.ui-pager__page { color: var(--text); }
 a.ui-pager__step:hover,
 a.ui-pager__page:hover { color: var(--strong); }

package/src/styles/segmented.css

@@ -15,7 +15,7 @@
   font-size: calc(var(--text-sm) + 0.5px);
   font-weight: var(--weight-semibold);
   letter-spacing: 0.02em;
-  color: var(--dim);
+  color: var(--text);
   background: none;
   border: 0;
   padding: 7px 18px;
@@ -23,7 +23,7 @@
   cursor: pointer;
   transition: color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
 }
-.ui-seg button:hover { color: var(--text); }
+.ui-seg button:hover { color: var(--strong); }
 /* aria-pressed is what segmented() emits now; aria-selected is kept so markup
    copied from an older release keeps painting its active pill. */
 .ui-seg button.is-active,

package/src/styles/stat.css

@@ -27,7 +27,7 @@
    figure's parts are held close, so the label keeps the band's tighter line.
    It sits outside the rank table for that one reason, and claims no rank. */
 .ui-stat__label {
-  color: var(--dim);
+  color: var(--text);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: var(--leading-snug);
@@ -55,15 +55,15 @@
   align-items: center;
   gap: 2px var(--space-1);
   margin-top: var(--space-2);
-  color: var(--dim);
+  color: var(--text);
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: var(--leading-snug);
 }
 .ui-stat__delta svg { width: 14px; height: 14px; flex: none; stroke-width: 2.7; } /* 2.7 of a 24 box drawn at 14px = 1.58 CSS px. docs/specification.md#icons-and-glyphs */
 .ui-stat__change { font-variant-numeric: tabular-nums; white-space: nowrap; }
-.ui-stat__basis { color: var(--muted); font-weight: var(--weight-normal); }
-.ui-stat__delta--none { color: var(--muted); font-weight: var(--weight-normal); }
+.ui-stat__basis { color: var(--text); font-weight: var(--weight-normal); }
+.ui-stat__delta--none { color: var(--text); font-weight: var(--weight-normal); }
 
 /* Tone is set by the caller and says good or bad news. Direction is the arrow's
    job, so an unset tone keeps the change neutral whichever way it points. */
@@ -72,7 +72,7 @@
 
 /* The trend is the caller's <svg>. margin-top: auto seats it on the bottom of
    the figure, so trends line up across figures whose text wraps differently. */
-.ui-stat__trend { margin-top: auto; padding-top: var(--space-4); color: var(--muted); }
+.ui-stat__trend { margin-top: auto; padding-top: var(--space-4); /* muted-ink: glyph — caller-supplied sparkline */ color: var(--muted); }
 .ui-stat__trend svg { display: block; width: 100%; height: 32px; overflow: visible; }
 .ui-stat--good .ui-stat__trend { color: var(--chip-success-ink); }
 .ui-stat--bad .ui-stat__trend { color: var(--chip-danger-ink); }
@@ -82,7 +82,7 @@
    margin is under it because it leads the row. */
 .ui-stats__basis {
   margin: 0 0 var(--space-5);
-  color: var(--muted);
+  color: var(--text);
   font-size: var(--text-xs);
   line-height: var(--leading-snug);
 }

package/src/styles/success.css

@@ -64,7 +64,7 @@
   letter-spacing: -.02em; line-height: 1.2; margin: 0;
 }
 .ui-sx__body {
-  color: var(--dim); font-size: var(--text-base); line-height: 1.6; margin: 9px 0 0; max-width: var(--prose-caption);
+  color: var(--text); font-size: var(--text-base); line-height: 1.6; margin: 9px 0 0; max-width: var(--prose-caption);
 }
 .ui-sx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
 
@@ -166,8 +166,8 @@
   animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards; /* motion: ambient — the caller sets the countdown; the ring just spends it */
 }
 @keyframes ui-sx-sweep { from { --sx-a: 360deg; } to { --sx-a: 0deg; } }
-.ui-sx__count-text { color: var(--muted); font-size: var(--text-sm); }
-.ui-sx__count-text b { color: var(--dim); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
+.ui-sx__count-text { color: var(--text); font-size: var(--text-sm); }
+.ui-sx__count-text b { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
 
 /* ---- Reduced motion — static check, no burst / confetti / sweep ---------- */
 @media (prefers-reduced-motion: reduce) {

package/src/styles/table.css

@@ -13,14 +13,14 @@
   /* rank: label */
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
-  color: var(--muted);
+  color: var(--text);
   padding: 0 var(--space-4) var(--space-3) 0;
   border-bottom: 1px solid var(--border);
 }
 .ui-table td {
   padding: var(--space-4) var(--space-4) var(--space-4) 0;
   border-bottom: 1px solid var(--border);
-  color: var(--dim);
+  color: var(--text);
   vertical-align: middle;
   white-space: nowrap;
 }
@@ -28,7 +28,7 @@
 .ui-table td.ui-table__title { color: var(--strong); font-weight: var(--weight-medium); width: 99%; white-space: normal; }
 .ui-table th:last-child,
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
-.ui-table tr.is-dead td { color: var(--muted); }
+.ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
 .ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 
@@ -79,7 +79,7 @@
 .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 .ui-table th.ui-table__num { text-align: right; }
 .ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
-.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
+.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
 
 /* The empty state (.ui-empty) — shown when a table/list has no rows — now
    lives in styles/empty.css as a standalone component (illustration support). */

package/src/styles/tabs.css

@@ -14,13 +14,13 @@
   border: 0;
   cursor: pointer;
   font: 600 calc(var(--text-base) - 0.5px)/1 var(--font-sans);
-  color: var(--dim);
+  color: var(--text);
   padding: 11px 14px;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
 }
-.ui-tabs__tab:hover { color: var(--text); }
+.ui-tabs__tab:hover { color: var(--strong); }
 .ui-tabs__tab.is-active { color: var(--strong); border-bottom-color: var(--accent); }
 .ui-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px 7px 0 0; }
 

package/src/styles/tooltip.css

@@ -57,11 +57,11 @@
 
 .ui-tip.is-open { opacity: 1; visibility: visible; }
 
-.ui-tip__label { color: var(--muted); }
+.ui-tip__label { color: var(--text); }
 .ui-tip__value {
   font-size: var(--text-sm);
   font-weight: var(--weight-semibold);
   color: var(--strong);
   font-variant-numeric: tabular-nums;
 }
-.ui-tip__detail { color: var(--dim); font-variant-numeric: tabular-nums; }
+.ui-tip__detail { color: var(--text); font-variant-numeric: tabular-nums; }

package/src/styles/topbar.css

@@ -60,12 +60,12 @@
   font-size: calc(var(--text-xs) + 1px);
   font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--muted);
+  color: var(--text);
   padding: 4px 13px;
   border-radius: 24px;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
-.dtsw a:hover { color: var(--text); }
+.dtsw a:hover { color: var(--strong); }
 .dtsw a.cur { color: var(--strong); background: var(--surface); }
 
 /* Theme toggle — a single icon-only switch (no label). */
@@ -107,7 +107,7 @@
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .vsw__btn:hover { border-color: var(--accent); }
-.vsw__btn .lbl { color: var(--muted); }
+.vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
   width: 8px; height: 8px;
@@ -184,7 +184,7 @@
    why: docs/specification.md#elevation */
 .vopt:hover { background: var(--surface-3); }
 .vopt .vname { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
-.vopt .vmeta { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
+.vopt .vmeta { font-size: var(--text-xs); color: var(--text); margin-top: 2px; }
 .vopt .vbadge {
   /* rank: chip */
   font-size: var(--text-xs);
@@ -196,7 +196,7 @@
   margin-top: 1px;
 }
 .vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
-.vbadge.arch { color: var(--muted); background: var(--surface-3); }
+.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface-3); }
 /* The switcher keeps its glyph and drops its label where the shell folds — the
    same step the rail folds at: docs/specification.md#breakpoints. */
 @media (max-width: 720px) { .vsw__btn .lbl { display: none; } }
@@ -256,11 +256,11 @@
 .amenu .ahead .avatar { cursor: default; }
 .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
 .amenu .ahead .anm { color: var(--strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.amenu .ahead .aem { color: var(--muted); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.amenu .ahead .aem { color: var(--text); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer; }
 .amenu a:hover { background: var(--surface-3); }
 .amenu a.cur { color: var(--accent); }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }
-.amenu a.aout { color: var(--muted); }
+.amenu a.aout { color: var(--text); }
 .amenu a.aout:hover { color: var(--pink); }