@godxjp/ui 18.15.4 → 19.0.0

package/dist/styles/shell-layout.css

@@ -39,6 +39,40 @@
       "sidebar footer";
   }
 
+  /* NO TOP BAR AT ALL — `topbar`, `topbarLeft`, `topbarRight` and `logo` all undefined. AppShell
+   * renders no `<header class="app-topbar">` in that state (the mobile drawer trigger is the one
+   * exception, below) and publishes it as ONE attribute here, so the geometry is decided by the
+   * grid element itself rather than by `:has()` on whatever the consumer nested inside.
+   *
+   * The row has to go with the header. An empty --app-shell-bar-height track still costs a fixed
+   * 48px, and the header still painted a bottom border over hsl(var(--card)) — so a chat / mail /
+   * IDE shell, whose PAGE header is the top row, showed two rows of chrome (~48 + ~60px) over
+   * exactly the region that needs the height most.
+   *
+   * `auto`, not a `0` literal, is what makes one attribute enough for every branch: an absent row
+   * measures 0, a `display:none` header measures 0, and at narrow widths — where the header comes
+   * back to carry the hamburger — the row sizes itself from that header's own min-height. So the
+   * breakpoint block needs no restatement of these rows, which is the trap this file has already
+   * paid for once: the deleted 768px block re-declared grid-template-rows with a `3rem` literal
+   * and defeated --app-shell-bar-height below 768px only (see the note on the one @media block).
+   * `[data-topbar-span="full"]` re-declares grid-template-AREAS only, so it inherits this row
+   * template untouched and its named-but-empty "topbar topbar" row is 0 as well. */
+  .app-root[data-topbar="none"] {
+    grid-template-rows: auto minmax(0, 1fr) auto;
+  }
+
+  /* The one thing that may still live in a bar-less shell: AppShell's OWN hamburger. Below 900px
+   * the docked sidebar is hidden, and dropping the bar there too would leave the shell with no
+   * reachable navigation at all — a worse failure than the double chrome above (gh#165). So when a
+   * drawer exists the header is still rendered, carrying the trigger and nothing else, and it is
+   * THIS rule, not the empty row, that keeps it off the wide layout: `display:none` removes its
+   * border, its background and its height together. The min-height is inert here and load-bearing
+   * at narrow widths, where it is the only thing giving the `auto` row a height. */
+  .app-root[data-topbar="none"] > .app-topbar {
+    display: none;
+    min-height: var(--app-shell-bar-height);
+  }
+
   .app-sidebar {
     grid-area: sidebar;
     display: flex;
@@ -90,6 +124,15 @@
     grid-area: main;
     min-width: 0;
     overflow: auto;
+    /* Column flow, so a page that asks to FILL can actually be bounded by the
+     * region instead of merely starting at its top. With the default `block`
+     * flow a `--fill` container could only be `min-height: 100%`, i.e. it grew
+     * past the region and pushed the scroll back out here — which is why a chat
+     * transcript slid UNDER its own sticky composer. Ordinary pages are
+     * unaffected: their container still has `min-height: 100%`, still grows,
+     * and this element still scrolls it. */
+    display: flex;
+    flex-direction: column;
     /* Ambient brand glow hook — invisible by default (--gradient-glow: none); a service paints a
      * radial/linear brand wash behind the whole content area by configuring the token alone. */
     background-image: var(--gradient-glow);
@@ -427,20 +470,20 @@
     --card-space-gap: var(--auth-shell-card-gap-compact);
   }
 
+  /* AuthDivider is the auth-scoped PRESET over the labelled `Separator` (gh#308). It no longer
+   * re-implements the grid, the rule or the accessible-name contract — it only re-points
+   * Separator's knobs at the `--auth-shell-divider-*` layer, so the auth micro-scale (11px, not
+   * the stream's xs) and the auth rule/label colours stay exactly where a service already tunes
+   * them, while a day divider in a message stream is no longer coupled to a login form.
+   * `--separator-label-font-weight` is pinned to normal because the auth conjunction has always
+   * inherited the body weight, whereas the generic labelled rule defaults to medium. */
   .ui-auth-divider {
-    display: grid;
-    width: 100%;
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    align-items: center;
-    gap: var(--auth-shell-divider-gap);
-    color: hsl(var(--auth-shell-divider-label-color));
-    font-size: var(--auth-shell-divider-label-font-size);
-    line-height: var(--auth-shell-divider-label-line-height);
-  }
-
-  .ui-auth-divider-rule {
-    height: 1px;
-    background: hsl(var(--auth-shell-divider-rule-color));
+    --separator-label-gap: var(--auth-shell-divider-gap);
+    --separator-label-font-size: var(--auth-shell-divider-label-font-size);
+    --separator-label-line-height: var(--auth-shell-divider-label-line-height);
+    --separator-label-font-weight: var(--font-weight-normal);
+    --separator-rule-color: var(--auth-shell-divider-rule-color);
+    --separator-label-color: var(--auth-shell-divider-label-color);
   }
 
   @media (max-width: 30rem) {
@@ -658,9 +701,14 @@
       display: none;
     }
 
-    /* The docked rail is gone, so the bar tightens against the viewport edge (knob, not a literal). */
-    .app-topbar {
-      padding-inline: var(--app-shell-bar-inset-compact);
+    /* Bar-less shell (data-topbar="none") at narrow widths: the bar comes back for the hamburger
+     * ALONE — the only route to navigation once the docked rail is hidden. The `auto` row picks up
+     * its height from the header's min-height, so no grid-template-rows is restated here, and none
+     * may be: the one-breakpoint guard forbids a rows declaration inside this block precisely
+     * because the last one hard-coded 3rem. Docked mode never reaches this rule — it renders no
+     * drawer, so a bar-less docked shell has no header to show. */
+    .app-root[data-topbar="none"] > .app-topbar {
+      display: flex;
     }
 
     .app-topbar-left:has(.app-mobile-sidebar-trigger) {
@@ -699,15 +747,30 @@
       display: flex;
     }
 
-    .app-root[data-responsive-navigation="docked"] > .app-topbar {
-      padding-inline: var(--app-shell-bar-inset);
-    }
-
+    /* (There is deliberately no `padding-inline` undo for docked mode any more. It existed to
+     * cancel a bar inset that stepped on the SHELL's 900px restructure; since gh#330 the inset
+     * steps on the PAGE's 720px step instead, and a docked page tightens its own gutters at that
+     * same step — so undoing the bar here would re-open the misalignment the step exists to
+     * keep closed.) */
     .app-root[data-responsive-navigation="docked"] .app-mobile-nav-trigger {
       display: none;
     }
   }
 
+  /* The compact step of the HORIZONTAL PAGE-INSET AXIS (gh#330). It is deliberately NOT the shell's
+   * 900px restructure breakpoint: the bar's inset is not a fact about whether a rail is docked, it
+   * is a fact about where the page's content edge is — and the page steps its gutters to
+   * --space-page-compact-x at exactly `(max-width: 720px)` (see styles/layout.css ·
+   * `.ui-page-container`). Stated with the identical condition so the two sides can never drift
+   * apart again; the shell's own restructure block above still owns everything that IS about the
+   * rail. This block mentions `.app-topbar` only, so the one-breakpoint `.app-root` contract
+   * (gh#213) is untouched. */
+  @media (max-width: 720px) {
+    .app-topbar {
+      padding-inline: var(--app-shell-bar-inset-compact);
+    }
+  }
+
   .sb-root {
     display: contents;
   }
@@ -909,8 +972,8 @@
   }
 
   .sb-product-caret svg {
-    width: 0.875rem;
-    height: 0.875rem;
+    width: var(--sidebar-product-caret-icon-size);
+    height: var(--sidebar-product-caret-icon-size);
   }
 
   .sb-nav-scroll {
@@ -929,9 +992,19 @@
     margin-top: var(--sidebar-section-gap);
   }
 
+  /* The section label is the ONE piece of sidebar text with no colour knob.
+   * Every other one has a variable with this same fallback — item, hover,
+   * active, icon — and the sidebar is paintable by design (`--sidebar-gradient`
+   * is a published knob). So a consumer that paints it can recolour every label
+   * except this heading, which stays muted-foreground and lands on whatever
+   * they painted: measured at 1.50 against a mid-tone blue, where 11px text
+   * needs 4.5.
+   *
+   * The fallback is the old value, so nothing changes for a sidebar that does
+   * not paint itself. */
   .sb-section-label {
     padding: 0 var(--sidebar-section-label-padding-x) var(--sidebar-section-label-padding-bottom);
-    color: hsl(var(--muted-foreground));
+    color: var(--sidebar-section-label-foreground, hsl(var(--muted-foreground)));
     font-size: var(--sidebar-section-label-font-size);
     font-weight: 700;
     letter-spacing: 0.08em;
@@ -968,6 +1041,23 @@
     text-align: start;
   }
 
+  /* Every nav row is a CONTROL, so it owes a visible keyboard indicator (WCAG 2.4.7) — and it
+   * has to be the design system's, not the UA's. Measured in Chromium before this rule: the
+   * first Tab into the shell landed on a rail item drawing Chrome's own
+   * `outline: rgb(0,95,204) auto 1px`, a blue that belongs to no theme and matches nothing else
+   * on the page, while every Button beside it drew the token ring. On a Slack-style shell that
+   * is the FIRST thing a keyboard user sees.
+   *
+   * Same shape as `.app-main:focus-visible` above — suppress the UA outline, draw a token ring —
+   * but NOT gated behind an opt-in width the way the region ring is. A whole-content-area frame
+   * reads as a glitch and defaults off; a 2px ring hugging one 32px row is exactly the
+   * affordance, so it reads the global `--focus-ring-width` and is on by default. `box-shadow`
+   * rather than `outline` so the ring follows `--sidebar-nav-item-radius`. */
+  .sb-nav-item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
   .sb-nav-item:hover {
     background: hsl(var(--accent));
     color: var(--sidebar-nav-item-hover-foreground, hsl(var(--foreground)));
@@ -1016,20 +1106,36 @@
     white-space: nowrap;
   }
 
+  /* The nav row's count pill. Its COLOUR is a knob pair, and the resting values are exactly the
+   * literals it carried before (rule #44/#45) — `initial` at the token tier so the role defaults
+   * re-resolve under a scoped theme, resolved here at the call site. Before the knobs the only
+   * way to emphasise a row was to nest a `<Badge>` INSIDE `badge`, which produced two stacked
+   * pills: a 37.11×19.14 `.sb-badge` wrapping a 25.11×19.14 `<Badge>` with its own border. */
   .sb-badge {
     display: inline-flex;
     min-width: 1.125rem;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-pill);
-    background: hsl(var(--secondary));
-    color: hsl(var(--muted-foreground));
+    background: var(--sidebar-badge-background, hsl(var(--secondary)));
+    color: var(--sidebar-badge-foreground, hsl(var(--muted-foreground)));
     font-size: var(--sidebar-badge-font-size);
     font-weight: var(--font-weight-medium);
     line-height: 1.2;
     padding-inline: 0.375rem;
   }
 
+  /* `badgeTone="destructive"` — the count is ADDRESSED TO YOU (an @mention, a direct message),
+   * not merely unread. Present-when-on (rule #44): a neutral row emits no `data-tone` at all, so
+   * this rule cannot reach it and the default pill is byte-identical. GEOMETRY IS UNTOUCHED — the
+   * tone moves two colours and nothing else, which is the whole point of the axis: the row's
+   * height, the pill's radius and its 0.375rem inline pad stay on the base rule, so a mention row
+   * and an unread row still line up in the same column. */
+  .sb-badge[data-tone="destructive"] {
+    background: var(--sidebar-badge-destructive-background, hsl(var(--destructive)));
+    color: var(--sidebar-badge-destructive-foreground, hsl(var(--destructive-foreground)));
+  }
+
   .sb-footer {
     margin-top: auto;
     border-top: 1px solid hsl(var(--border));
@@ -1174,10 +1280,6 @@
     outline: none;
   }
 
-  .sb-user:focus-visible {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)) / 0.45);
-  }
-
   .sb-user-avatar {
     position: relative;
     display: inline-flex;
@@ -1424,8 +1526,8 @@
 
   .tb-chip-icon {
     display: grid;
-    width: 1.125rem;
-    height: 1.125rem;
+    width: var(--topbar-chip-icon-size);
+    height: var(--topbar-chip-icon-size);
     flex: 0 0 auto;
     place-items: center;
     border-radius: calc(var(--radius) - 2px);
@@ -1452,8 +1554,8 @@
   }
 
   .tb-chip-caret svg {
-    width: 0.75rem;
-    height: 0.75rem;
+    width: var(--topbar-caret-icon-size);
+    height: var(--topbar-caret-icon-size);
   }
 
   .tb-search {
@@ -1480,8 +1582,8 @@
 
   .tb-search svg,
   .tb-icon-btn svg {
-    width: 1rem;
-    height: 1rem;
+    width: var(--topbar-icon-size);
+    height: var(--topbar-icon-size);
   }
 
   .kbd {
@@ -1521,10 +1623,6 @@
     outline: none;
   }
 
-  .tb-icon-btn:focus-visible {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)) / 0.45);
-  }
-
   .tb-bell {
     position: relative;
   }

package/dist/styles/table-layout.css

@@ -3,6 +3,27 @@
  */
 
 @layer components {
+  /* The table's base type. It used to ride on a `text-sm` utility emitted by the component; the
+   * font-size AND its line-height companion now live here (gh#319 — see
+   * tokens/components/table.css for why both are required). */
+  [data-slot="table"] {
+    font-size: var(--table-font-size);
+    line-height: var(--table-line-height);
+  }
+
+  /* Horizontal rules between rows, and the "last row draws no rule" idiom. Both must be in the
+   * SAME layer: while the row's rule was a `border-b` utility, no `components` selector could
+   * zero it on the last row however specific (the gh#412 layer contract), so the tbody had to
+   * carry an arbitrary-variant utility of its own. `[data-slot="table-body"] .ui-table-row`
+   * (0,2,0) beats `.ui-table-row` (0,1,0), so the last-row reset lands cleanly. */
+  .ui-table-row {
+    border-block-end-width: var(--table-row-border-width);
+  }
+
+  [data-slot="table-body"] .ui-table-row:last-child {
+    border-block-end-width: 0;
+  }
+
   [data-slot="table-head"] {
     height: var(--table-row-height);
     padding: var(--table-cell-padding-y) var(--table-cell-space-x);
@@ -268,10 +289,9 @@
     inset-inline-end: 0;
   }
 
-  [data-slot="card-content"][data-flush] .ui-data-table-surface {
-    border-width: 0;
-    border-radius: 0;
-  }
+  /* The flush frame contract lives in ONE place, next to `.ui-table-bordered` below — it has to
+   * cover BOTH full-bleed surfaces (`.ui-data-table-surface` and `<Table bordered>`) or the fix
+   * for one silently regresses the other (gh#305 → gh#306). */
 
   @media (min-width: 640px) {
     .ui-data-table-scroll {
@@ -347,17 +367,60 @@
     border-inline-end: 1px solid var(--table-border-color, hsl(var(--border)));
   }
 
-  /* A bordered table sitting FLUSH inside a Card already has the card's frame around it —
-   * its own outer frame doubles up as two nested rounded borders (measured on
-   * customer-inquiries detail: TABLE 1px inside .ui-card 1px, gh#305). Drop the three edges
-   * that coincide with the card frame, but KEEP border-block-start: the top edge meets the
-   * CardHeader area, not the card border, and without it the header band floats with no
-   * separating line (measured on a rental detail's 出荷伝票一覧 section, gh#306). The
-   * vertical column rules above and TableRow's horizontal rules stay, so the grid inside
-   * the card is unchanged. A bordered table NOT in a flush card keeps its full frame. */
-  [data-slot="card-content"][data-flush] .ui-table-bordered {
-    border: 0;
-    border-block-start: 1px solid var(--table-border-color, hsl(var(--border)));
+  /* ── The flush full-bleed frame contract (gh#305 · gh#306) ────────────────────────────────
+   * A full-bleed surface inside `<CardContent flush>` already has the CARD's 1px frame around
+   * it, so its own outer frame doubles up as two nested rounded borders (measured on
+   * customer-inquiries detail: TABLE 1px inside the card's 1px, gh#305). Both full-bleed
+   * surfaces are covered by ONE rule: `.ui-data-table-surface` (the DataTable's own frame) and
+   * `.ui-table-bordered` (`<Table bordered>`). They used to be two rules a hundred lines apart
+   * and the gh#306 repair reached only the second — the canonical
+   * `<Card><CardContent flush><DataTable/></CardContent></Card>` kept a frameless surface, so
+   * the header still floated with no line under it (measured at HEAD: surface
+   * border-top-width 0px).
+   *
+   * ERASE, never repaint (rule #44). The earlier repair spelled this `border: 0` followed by a
+   * hard-coded `border-block-start: 1px solid …` — chrome painted unconditionally, which is the
+   * bug pattern the rule exists to forbid: it re-drew the line even where the card already had
+   * one (a banded header's own bottom border → a doubled 2px rule) and even where the card frame
+   * itself sits (a headerless card → a doubled top edge). Here only the WIDTH is zeroed, so the
+   * style and colour stay whatever the surface's own border declared, and the block-start edge is
+   * restored only where something actually needs separating.
+   *
+   * `.ui-skeleton-table` rides along in BOTH lists on purpose. It is the placeholder the real
+   * DataTable swaps for, and alert-layout.css says so in as many words ("mirrors
+   * `.ui-data-table-surface` … so the skeleton placeholder and the real DataTable it swaps for
+   * sit identically"). Give the surface a divider without giving the skeleton one and that
+   * promise breaks: a 1px line appears the instant the data lands. (alert-layout.css keeps its
+   * own copy of the erase half so Skeleton is still framed correctly for a consumer who imports
+   * it WITHOUT this layer.) */
+  [data-slot="card-content"][data-flush]
+    :is(.ui-data-table-surface, .ui-table-bordered, .ui-skeleton-table) {
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  /* …restored ONLY when a plain CardHeader sits DIRECTLY above the flush body. That edge is the
+   * one place a flush surface's border does NOT coincide with something the card already draws:
+   * above it is the header's whitespace, not the card frame (gh#306, measured on a rental
+   * detail's 出荷伝票一覧 section). Adjacent-sibling, not `:has()` on the card, so the three
+   * counter-cases fall out by construction and need no extra rule: no header above → the card
+   * frame is the top edge; a BANDED header → its own `border-bottom` is the divider; a CardBar
+   * above → its own `border-block` is. Width comes from a token (rules #44/#45) whose default is
+   * the same hairline the surface itself draws, so a service quiets the divider once instead of
+   * forking this file. */
+  [data-slot="card-header"]:not([data-banded])
+    + [data-slot="card-content"][data-flush]
+    :is(.ui-data-table-surface, .ui-table-bordered, .ui-skeleton-table) {
+    border-block-start-width: var(--table-flush-divider-width);
+  }
+
+  /* …and quieted again when a DataTable TOOLBAR sits between the header and the surface: the
+   * flush toolbar already draws that dividing line (see `.ui-data-table-toolbar` above), so the
+   * surface below it would stack a second hairline on top of it. Done by setting the token on the
+   * root rather than by another `border-*` rule, so it INHERITS down to whichever surface ends up
+   * under the toolbar and cannot get into a specificity race with the restore rule. */
+  [data-slot="card-content"][data-flush] .ui-data-table-root:has(.ui-data-table-toolbar) {
+    --table-flush-divider-width: 0px;
   }
 }
 
@@ -452,14 +515,82 @@
 }
 
 /* The compact tier lives in `godxjp-ui-responsive` — the LAST layer, declared after Tailwind in
- * styles/base.css — not in `@layer components`. `<table>` carries `text-sm`, a Tailwind utility,
- * and `utilities` outranks `components` by LAYER ORDER, so a `font-size:` re-point written here as
- * a component rule can never apply however specific it is: that is exactly why
+ * styles/base.css — not in `@layer components`. The <table> USED to carry `text-sm`, a Tailwind
+ * utility, and `utilities` outranks `components` by LAYER ORDER, so a `font-size:` re-point
+ * written as a component rule could never apply however specific it was: that is exactly why
  * `--table-action-collection-font-size-compact` was dead at every width (gh#412), leaving the
- * narrow frame at 14px where a 5–6 character Japanese label overflows its column measure. The
- * column measures move with it so the whole compact tier is decided in ONE place, and so a
- * consumer utility on the table can't half-collapse it either. See styles/base.css · THE LAYER
- * CONTRACT. */
+ * narrow frame at 14px where a 5–6 character Japanese label overflows its column measure.
+ * gh#319 moved the base type off that utility and onto `[data-slot="table"]` above, but the
+ * compact tier STAYS here: a CONSUMER's own `text-*` utility on the table would otherwise
+ * half-collapse it, and this keeps the whole tier — type AND column measures — decided in ONE
+ * place. See styles/base.css · THE LAYER CONTRACT. */
+@layer components {
+  /* DATA TABLE — the pieces around the already-tokenized cell rhythm (#319).
+   *
+   * These belong in `components`, not in the responsive layer above: an append placed them there
+   * by mistake (it targeted the file's last `}`, which closes the layer, not the layer's own end)
+   * and `table-action-collection.test.tsx` catches exactly that — the responsive layer is
+   * reserved for media-queried rules.
+   *
+   * Four of them are scoped through `.ui-data-table-root` rather than left bare, because the last
+   * layer was doing work for them: the icon rules sit on svgs inside real <Button>s where
+   * `.ui-button svg` (0,1,1) outranks a bare class, and the skeleton chip's radius competes with
+   * `.ui-skeleton-block` from the later-imported alert-layout.css. Demoting them without raising
+   * specificity would have shrunk the toolbar/pagination glyphs and re-rounded the chips. */
+
+  /* DATA TABLE — the pieces around the already-tokenized cell rhythm (#319). */
+
+  /* The select column holds only a checkbox, so it takes a fixed narrow width rather than a
+ * share of the flexible content columns. */
+  .ui-data-table-select-column {
+    inline-size: var(--table-select-column-width);
+  }
+
+  /* A sticky header floats over the scrolled rows, so it joins the one system overlay layer
+ * rather than carrying a private z-index that a portaled surface could out-rank. */
+  .ui-data-table-sticky-header {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 10;
+  }
+
+  .ui-data-table-sort-icon {
+    inline-size: var(--table-sort-icon-size);
+    block-size: var(--table-sort-icon-size);
+  }
+
+  .ui-data-table-root .ui-data-table-toolbar-icon {
+    inline-size: var(--table-toolbar-icon-size);
+    block-size: var(--table-toolbar-icon-size);
+    flex-shrink: 0;
+  }
+
+  .ui-data-table-root .ui-data-table-pagination-icon {
+    inline-size: var(--table-pagination-icon-size);
+    block-size: var(--table-pagination-icon-size);
+  }
+
+  .ui-data-table-pagination-text {
+    font-size: var(--table-pagination-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* Skeletons mimic the real content: a checkbox square and a text line at cap height. */
+  .ui-data-table-root .ui-data-table-skeleton-check {
+    inline-size: var(--table-skeleton-check-size);
+    block-size: var(--table-skeleton-check-size);
+    border-radius: var(--table-skeleton-radius);
+  }
+
+  .ui-data-table-root .ui-data-table-skeleton-line {
+    block-size: var(--table-skeleton-line-height);
+  }
+
+  .ui-data-table-sort-button {
+    border-radius: var(--table-skeleton-radius);
+  }
+}
+
 @layer godxjp-ui-responsive {
   /* Below the step the SOURCE measures are re-pointed to their compact tier (and the type / row
    * density with them); nothing else moves. One block per canonical step — a media/container

package/dist/styles/toggle.css

@@ -0,0 +1,59 @@
+/* TOGGLE · counter pill + pressed-state chrome (gh#312).
+ *
+ * The Toggle BOX itself (heights, padding, variants, the pressed fill) lives in
+ * `styles/control.css` alongside every other control — import `@godxjp/ui/styles/control` for it.
+ * This layer is only the counter pill Toggle shares with Button, plus the non-colour encodings of
+ * the pressed state; `@godxjp/ui/styles` imports it right after control.css so its pressed-state
+ * rules land later in the cascade at equal specificity.
+ *
+ * Every constant here is a token declared in `tokens/components/toggle.css`, where the share-vs-
+ * split reasoning and the measured contrast numbers live. The geometry knobs carry Button's exact
+ * counter values off the same primitive scale (asserted by the token-parity test), so the two
+ * pills are the same size; only the COLOUR knobs are deliberately Toggle's own, because Toggle's
+ * pill sits on a surface that inverts.
+ */
+
+@layer components {
+  .ui-toggle-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--toggle-count-min-width);
+    margin-inline-start: var(--toggle-count-gap);
+    border-radius: var(--toggle-count-radius);
+    padding-inline: var(--toggle-count-space-inline);
+    background: var(--toggle-count-background, hsl(var(--muted)));
+    color: var(--toggle-count-color, hsl(var(--foreground)));
+    font-size: var(--toggle-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* PRESSED — the state is never carried by hue alone (WCAG 1.4.1). Three independent encodings:
+   * the chip's own fill/label invert (control.css), the pill inverts from a quiet near-invisible
+   * chip to a solid one, and the forced-colors rule below. `aria-pressed` carries it
+   * programmatically; nothing appends "(selected)" to the accessible name. */
+  .ui-toggle[data-state="on"] {
+    border-color: var(--toggle-pressed-border-color, hsl(var(--primary)));
+  }
+
+  .ui-toggle[data-state="on"] .ui-toggle-count {
+    background: var(--toggle-pressed-count-background, hsl(var(--primary-foreground)));
+    color: var(--toggle-pressed-count-color, hsl(var(--primary)));
+  }
+
+  /* Forced colors flattens every background, so neither inversion distinguishes the states any
+   * more. An outline on the pressed pill restores a structural difference at zero layout cost,
+   * and the chip's border follows the system Highlight — the `default` variant's border is
+   * `transparent` when unpressed, and forced-colors preserves transparency, so the two states
+   * stay structurally different there too. */
+  @media (forced-colors: active) {
+    .ui-toggle[data-state="on"] {
+      border-color: Highlight;
+    }
+
+    .ui-toggle[data-state="on"] .ui-toggle-count {
+      outline: var(--toggle-count-forced-outline-width) solid currentColor;
+    }
+  }
+}

package/dist/tokens/base.css

@@ -7,6 +7,7 @@
 @import "./semantic/layout.css";
 @import "./axes.css";
 @import "./components/control.css";
+@import "./components/toggle.css";
 @import "./components/form.css";
 @import "./components/card.css";
 @import "./components/chart.css";
@@ -18,11 +19,15 @@
 @import "./components/badge.css";
 @import "./components/navigation.css";
 @import "./components/data-display.css";
+@import "./components/scroll-area.css";
 @import "./components/list-row.css";
 @import "./components/logo.css";
 @import "./components/email.css";
 @import "./components/data-entry.css";
+@import "./components/upload.css";
 @import "./components/shell.css";
+@import "./components/separator.css";
 @import "./components/sidebar.css";
 @import "./components/legal-document.css";
 @import "./components/error-surface.css";
+@import "./components/activity.css";

package/dist/tokens/components/activity.css

@@ -0,0 +1,64 @@
+/*
+ * ACTIVITY — the ambient/looping motion primitive (gh#313).
+ *
+ * The loop counterpart to `Reveal`: `Reveal` runs ONCE on mount, `Activity` runs FOREVER while
+ * something is happening elsewhere (someone typing, a sync in flight, a response streaming, a
+ * recording running). Every value the loop reads is a knob (cardinal rule #45) so a service theme
+ * retunes the whole ambient feel in one place instead of forking a `@keyframes`.
+ *
+ * TIMING LIVES IN THE MOTION TIER, NOT HERE. `--duration-loop`, `--activity-interval` and
+ * `--activity-stagger-step` are declared in `src/tokens/foundation.css` beside `--duration-slow`
+ * and `--reveal-stagger-step`: they are the cycle members of the motion tier, they must sit next
+ * to their one-shot siblings to stay comparable, and `check-token-tiers`' component-token name
+ * shape (`--{component}-{part}-{property}`) has no property word for a duration. Geometry, colour
+ * and alpha — everything the shape rule DOES cover — live here.
+ *
+ * Defaults are the QUIETEST ambient state (cardinal rule #44): muted ink, a small mark, low travel.
+ */
+
+:root {
+  /* Mark geometry. `em`-based so the whole mark tracks `--activity-font-size-*` (and therefore
+   * `--font-size-base` and the density axis) instead of pinning a px diameter per size step. */
+  --activity-mark-size: 0.25em;
+  /* Travel of one `dots` step — the loop counterpart to `--reveal-distance`, named to match.
+   * It is ALSO the height the mark row reserves, so the indicator appearing under a composer
+   * never shifts the row. */
+  --activity-mark-offset: 0.25em;
+  /* Resting opacity of a dot at the bottom of its cycle. Never 0: a dot that vanishes reads as a
+   * rendering bug at the trough, and the reduced-motion resting state must stay fully legible. */
+  --activity-mark-rest-alpha: 0.35;
+  /* The single `pulse` mark — a breathing dot (live / recording), bigger than one `dots` dot
+   * because it carries the whole affordance alone. */
+  --activity-pulse-mark-size: 0.5em;
+
+  /* Mark-to-mark and mark-to-label gap. */
+  --activity-gap: var(--space-1);
+
+  /* Root size ladder — the mark is `em`-based, so this ONE value scales the whole indicator.
+   * Steps mirror the `Text` size the label is rendered at, so mark and label stay optically
+   * paired (`--font-size-sm` IS `--font-size-base`; the ladder skips the alias). */
+  --activity-font-size-xs: var(--font-size-2xs);
+  --activity-font-size-sm: var(--font-size-xs);
+  --activity-font-size-md: var(--font-size-sm);
+  --activity-font-size-lg: var(--font-size-lg);
+
+  /* Indeterminate `bar` (syncing). Width is an inline measure, not a fill: the bar sits beside a
+   * label in a row, so `100%` would eat the label's space. */
+  --activity-bar-width: 4rem;
+  --activity-bar-radius: var(--radius-pill);
+  --activity-bar-segment-width: 40%;
+  --activity-bar-track-alpha: 0.2;
+  /* Bar THICKNESS, declared last in the group because it carries the axis exemption below.
+   * Drawn at TEXT scale, not band scale: the bar sits inline beside its label, so it tracks the
+   * type it accompanies instead of a fixed step (gh#324). */
+  /* scale-exempt: an em thickness that must track the label beside it, not a fixed band step */
+  --activity-bar-height: 0.25em;
+
+  /* Mark colour. ROLE-MIRROR KNOB ⇒ declared `initial` here with the role default at the CALL SITE
+   * (`hsl(var(--activity-color, var(--muted-foreground)))` in styles/motion.css). Written as
+   * `--activity-color: var(--muted-foreground)` it would freeze at the `:root` role value and a
+   * scoped `[data-tenant]` / `.dark` override of `--muted-foreground` would never reach it.
+   * @see docs/TOKENS.md · "Role-mirror knobs MUST be `initial`".
+   * Documented default: --activity-color = var(--muted-foreground) (tone="muted"). */
+  --activity-color: initial;
+}

package/dist/tokens/components/badge.css

@@ -12,4 +12,11 @@
    * remaps --text-xs but never that companion). Same unitless ratio here keeps the default
    * badge pixel-identical now that badge-layout.css owns the type metrics. */
   --badge-line-height: calc(1 / 0.75);
+  /* Leading/trailing glyph inside the pill. It was a bare `0.75rem` in badge-layout.css with no
+   * token at all, so a service could only resize it with `!important` or a forked stylesheet —
+   * the two routes the icon axis's tier 2 exists to abolish (gh#326). Same step, so nothing
+   * moves. Matches --badge-font-size's step by design: the glyph reads as a character in the
+   * label's run, so the two retune together. Deliberately NOT --scaling-multiplied — the literal
+   * it replaces did not track density. */
+  --badge-icon-size: var(--icon-size-xs);
 }