@signal9/era-ui 32.0.0 → 33.0.0

package/dist/generated-docs/utilities.md

@@ -1,1236 +0,0 @@
-# Utilities
-
-The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.
-
-## Overview
-
-era's styling API is pure class names — write `tier-control px-gutter shadow`,
-never the `h-(--era-h-control)` var-class spelling. Everything below rides along
-with the stylesheet and needs no import:
-
-```ts
-import "@signal9/era-ui/css";
-```
-
-```svelte
-<button class="tier-control px-inset-control shadow text-body">era styled</button>
-```
-
-Alongside the `@utility` classes referenced below, era registers named theme
-scales that OVERLOAD the stock Tailwind names, so ordinary-looking markup
-renders on-design and responds to every axis (density, surface, corners,
-motion):
-
-| Stock-looking class | What it resolves to |
-|---|---|
-| `tier-icon/pill/chip/control/bar` | indivisible bounded height + concentric radius |
-| `rounded-icon/pill/chip/control/bar` | the concentric radius ladder (collapses on `data-corners="square"`) |
-| `rounded-menu-item` | menu-row radius, concentric inside a `rounded-control` panel |
-| `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |
-| `shadow-well` / `shadow-pressed` / `shadow-highlight` | recessed, pressed/latched, hover-material chrome |
-| `bg-well` / `bg-elevated` / `bg-highlight` / `bg-overlay` | surface fills: resting, raised, transient feedback, modal scrim |
-| `transition-*` (bare) | duration + easing default to the motion axis |
-| `ease-base` / `duration-base` | the motion axis, named explicitly |
-| `text-body` | density-derived body/control text size |
-| `p-gutter` / `gap-gutter` / `mt-gutter` / … | the spacing scale — EVERY spacing prefix works |
-
-THE SPACING NAMES IN SIZE ORDER, smallest first, because the names do not
-imply it and guessing gets it backwards:
-
-    gutter  <  panel  <  field  <  card  <  content
-
-Measured at `data-mode="balanced"`: gutter 5px, field ~9px, card ~11px,
-content ~22px. `gutter` is the TIGHT one — the gap between sibling controls
-and a rail's own padding. `field` is a text input's side padding, not the
-label-to-input gap. Reading them the other way round produces a layout whose
-hierarchy is inverted and therefore reads flat.
-
-The spacing names (`gutter`, `card`, `panel`, `content`, `menu`, `field`, the
-`inset-*` and concentric `*-inset-*` insets, `glyph-*`) are registered as a
-Tailwind spacing scale, so every prefix derives automatically: `p-`, `px-`,
-`pt-`, `mt-`, `gap-`, `gap-x-`, `inset-`, `translate-`, and the rest. The TIER
-names (`icon`, `pill`, `chip`, `control`, `bar`) are dimensions, not spacing, so
-they are registered per prefix instead — `h-`, `w-`, `min-h-`, `min-w-` and
-`size-` — and the two vocabularies deliberately share no word. Putting a tier
-in the spacing scale would silently make `px-control` mean 24px of padding.
-For chrome, use `tier-T`, which binds `h-T` and `rounded-T`; use the separate
-dimension/radius names only for width, minimums, unbounded surfaces, or
-asymmetric/docked corners.
-
-The var form (`h-(--era-h-control)`) still works and is the escape hatch for a
-token with no registered name — `--era-sp`, the press-sink offsets, anything
-a component reaches for once. `scripts/check-canonical.ts` fails the build if
-source uses it where a name exists.
-
-| Utility | Use it for |
-|---|---|
-| `era-interactive` | the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants. |
-| `era-link` | understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text). |
-| `scrollbar-none` | hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea. |
-| `era-text-trim` | vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
-| `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
-| `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
-| `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
-| `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
-| `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
-| `surface-backdrop` | the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface. |
-| `material-popover` | a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically. |
-| `material-panel` | a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically. |
-| `pressable` | the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale. |
-| `tier-icon` `tier-pill` `tier-chip` `tier-control` `tier-bar` | — |
-| `h-line` | the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box. |
-| `era-track-well` | instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right. |
-| `era-skeleton-pulse` | — |
-| `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
-| `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
-| `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
-| `min-h-icon` `min-h-pill` `min-h-chip` `min-h-control` `min-h-bar` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar). |
-| `w-icon` `w-pill` `w-chip` `w-control` `w-bar` | a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or a column measured in tiers rather than in content. |
-| `min-w-icon` `min-w-pill` `min-w-chip` `min-w-control` `min-w-bar` | a minimum tier WIDTH — the floor that makes a single-glyph control render as a square rather than a skinny pill (min-w-control on an icon button, min-w-pill on a badge). These could not exist before the ladder was renamed: the old rungs were sm/md/lg, and Tailwind's container scale already owns min-w-md and min-w-lg, so the names collided and every call site had to write min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing. |
-| `size-icon` `size-pill` `size-chip` `size-control` `size-bar` | a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face. |
-| `px-pill` `px-chip` `pl-pill` `pr-pill` `pl-chip` `pr-chip` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
-| `p-section` | padding for a content panel that sits UNDER a section header row — the even-padding exception, and the reason it is not called p-section: it deliberately under-pays the block start. For an evenly padded content panel use p-section, which is the plain token. |
-| `duration-base` | the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra". |
-| `text-micro` `text-lede` `text-heading` `text-title` `text-display` | the type ladder — micro (eyebrow/legend) < body (controls) < lede (the paragraph under a title) < heading < title < display. Derived from --era-text, so the ratio between any two rungs holds at every density; leading and tracking ride with the size, so a rung is one class. |
-| `text-body` | — |
-| `leading-body` | — |
-| `rounded-icon` `rounded-pill` `rounded-chip` `rounded-control` `rounded-bar` `rounded-menu-item` | — |
-| `shadow` | — |
-| `shadow-sm` `shadow-lg` `shadow-well` `shadow-pressed` `shadow-highlight` | — |
-| `bg-well` `text-well` `border-well` `bg-elevated` `text-elevated` `border-elevated` `bg-highlight` `text-highlight` `border-highlight` `bg-overlay` `text-overlay` `border-overlay` | — |
-| `p-gutter` `px-gutter` `py-gutter` `gap-gutter` `p-panel` `px-panel` `py-panel` `gap-panel` `p-card` `px-card` `py-card` `gap-card` `p-content` `px-content` `py-content` `gap-content` `p-menu` `px-menu` `py-menu` `gap-menu` `p-field` `px-field` `py-field` `gap-field` | — |
-| `p-inset-pill` `px-inset-pill` `py-inset-pill` `gap-inset-pill` `p-inset-chip` `px-inset-chip` `py-inset-chip` `gap-inset-chip` `p-inset-control` `px-inset-control` `py-inset-control` `gap-inset-control` | text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's. |
-| `p-icon-inset-pill` `px-icon-inset-pill` `py-icon-inset-pill` `gap-icon-inset-pill` `p-icon-inset-chip` `px-icon-inset-chip` `py-icon-inset-chip` `gap-icon-inset-chip` `p-icon-inset-control` `px-icon-inset-control` `py-icon-inset-control` `gap-icon-inset-control` `p-icon-inset-bar` `px-icon-inset-bar` `py-icon-inset-bar` `gap-icon-inset-bar` `p-pill-inset-chip` `px-pill-inset-chip` `py-pill-inset-chip` `gap-pill-inset-chip` `p-pill-inset-control` `px-pill-inset-control` `py-pill-inset-control` `gap-pill-inset-control` `p-pill-inset-bar` `px-pill-inset-bar` `py-pill-inset-bar` `gap-pill-inset-bar` `p-chip-inset-control` `px-chip-inset-control` `py-chip-inset-control` `gap-chip-inset-control` `p-chip-inset-bar` `px-chip-inset-bar` `py-chip-inset-bar` `gap-chip-inset-bar` `p-control-inset-bar` `px-control-inset-bar` `py-control-inset-bar` `gap-control-inset-bar` | the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control. |
-| `p-glyph-icon` `px-glyph-icon` `py-glyph-icon` `gap-glyph-icon` `p-glyph-pill` `px-glyph-pill` `py-glyph-pill` `gap-glyph-pill` | the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill). |
-| `bg-field` `text-field` `border-field` `bg-field-highlight` `text-field-highlight` `border-field-highlight` | the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face. |
-| `ease-base` | — |
-| `bg-divider` `text-divider` `border-divider` `bg-divider-faded` `text-divider-faded` `border-divider-faded` `bg-background` `text-background` `border-background` `bg-foreground` `text-foreground` `border-foreground` `bg-1` `text-1` `border-1` `bg-2` `text-2` `border-2` `bg-3` `text-3` `border-3` `bg-4` `text-4` `border-4` `bg-5` `text-5` `border-5` `bg-6` `text-6` `border-6` `bg-7` `text-7` `border-7` `bg-8` `text-8` `border-8` `bg-9` `text-9` `border-9` `bg-10` `text-10` `border-10` `bg-11` `text-11` `border-11` `bg-12` `text-12` `border-12` `bg-border` `text-border` `border-border` `bg-surface` `text-surface` `border-surface` `bg-hover` `text-hover` `border-hover` `bg-fg` `text-fg` `border-fg` `bg-bright` `text-bright` `border-bright` `bg-muted` `text-muted` `border-muted` | — |
-| `bg-fill` `text-fill` `border-fill` `bg-link` `text-link` `border-link` `bg-primary` `text-primary` `border-primary` `bg-primary-fg` `text-primary-fg` `border-primary-fg` `bg-primary-hover` `text-primary-hover` `border-primary-hover` `bg-destructive` `text-destructive` `border-destructive` `bg-destructive-fg` `text-destructive-fg` `border-destructive-fg` `bg-success` `text-success` `border-success` `bg-success-fg` `text-success-fg` `border-success-fg` `bg-warning` `text-warning` `border-warning` `bg-warning-fg` `text-warning-fg` `border-warning-fg` `bg-info` `text-info` `border-info` `bg-info-fg` `text-info-fg` `border-info-fg` | — |
-
-## era-interactive
-
-**Use it for:** the focus/disabled recipe every era control carries — put it on a custom interactive element instead of hand-writing focus/disabled variants.
-
-Shared interactive-state recipe: quiet focus, disabled affordance.
-Equivalent to `focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`.
-
-Declared in `index.css`.
-
-```css
-@utility era-interactive {
-	&:focus {
-		outline: none;
-	}
-	&:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-}
-```
-
-## era-link
-
-**Use it for:** understated, motion-aware inline text link — the canonical style for a link in body copy or prose; prefer it over a hand-rolled underline or `Button variant="link"` (which is a control, not running text).
-
-Inline text link. An understated, permanent underline that darkens from
-muted to the text colour on hover — no layout shift, no appearing/vanishing
-underline. The colour fade rides the MOTION axis (--era-duration/-ease), so
-it snaps at data-motion="instant", eases at "normal", and sweeps longer at
-"extra" — matching every other era transition. Font-agnostic: it styles
-decoration + colour only, so it reads correctly in mono, sans, or serif, and
-the 0.2em offset scales with the type size. Keyboard focus mirrors hover so
-the affordance is reachable without a pointer.
-
-Declared in `index.css`.
-
-```css
-@utility era-link {
-	/* The text is bright at rest and never changes — the link reads as a link
-	 * before you touch it. Only the UNDERLINE reacts: a faint hint at rest —
-	 * the link's own ink knocked back to 30% so it barely whispers — that
-	 * resolves to the full ink on hover.
-	 *
-	 * currentColor, not --color-muted/--color-fg: the underline belongs to the
-	 * TEXT it underlines. On themes whose link ink is a colour (signalnine's
-	 * navy, an accent-tinted bright), the neutral tokens drew a whitish line
-	 * under coloured text — a second hue where there should be one. Derived
-	 * from currentColor, the underline tracks whatever the link resolves to,
-	 * in every theme, including a caller overriding `color` locally. */
-	color: var(--color-link);
-	text-decoration-line: underline;
-	text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
-	text-underline-offset: 0.2em;
-	transition: text-decoration-color var(--era-duration) var(--era-ease);
-	&:hover,
-	&:focus-visible {
-		text-decoration-color: currentColor;
-	}
-}
-```
-
-## scrollbar-none
-
-**Use it for:** hide the scrollbar on an overflowing strip or rail while keeping it scrollable — for a scroll region that should show its bar, use ScrollArea.
-
-Scrollable but chromeless — hides the scrollbar while keeping wheel / touch /
-drag scrolling (e.g. an overflowing tab strip in a small pane handle).
-
-Declared in `index.css`.
-
-```css
-@utility scrollbar-none {
-	scrollbar-width: none;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-```
-
-## era-text-trim
-
-**Use it for:** vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge. Fixed-height, non-editable elements ONLY: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
-
-Font-agnostic vertical ink-centering for single-line control text.
-Measured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):
-the offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in
-a 24px row places ink on a half pixel, ~1px error) and font ascent/descent
-asymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and
-is the Firefox fallback; text-box ex/alphabetic fixes the second by
-centering the x-height band — the visual mass of MIXED-CASE text (caps and
-descenders cancel above/below). cap alphabetic is the spec-example recipe
-but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
-Where text-box is supported it fully determines the box, so the two
-declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
-mechanism is font-relative, so dense's 12px inherits the same guarantee with
-a proportionally smaller residual).
-
-The hard rules concern overflow clipping, and there are TWO of them.
-
-1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to
-   a UA-owned inner editor box that IS the trimmed line box, so a fixed
-   height does NOT hold it open: whatever you type gets its ascenders and
-   descenders sliced off (a "d" renders as an "o"). This rule used to read
-   the other way round — it claimed a fixed-height <input> was the trim's
-   intended home — and the Input component shipped chopped text as a result.
-   A tier-height input centres its own text; it needs no trim.
-
-2. NEVER on an AUTO-height element that clips — a `truncate` child, an
-   auto-height box with overflow-hidden. With no height to hold it open the
-   box collapses to the x-height band (~7.5px at 14px) and the clip chops the
-   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead
-   and let the child centre via the row's items-center.
-
-A fixed-height NON-editable element is the safe home: the ink overflows the
-trimmed LINE box but stays inside the padding box, which is what actually
-clips. Both rules are enforced at runtime by typography/collapsed-text-trim.
-
-Declared in `index.css`.
-
-```css
-@utility era-text-trim {
-	line-height: 1;
-	text-box: trim-both ex alphabetic;
-}
-```
-
-## truncate
-
-**Use it for:** single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
-
-Tailwind's `truncate`, with the vertical clip fixed at the source.
-
-truncate is overflow:hidden, and overflow clips in BOTH axes — so whatever
-line box the element ends up with is also its ink clip. Era rows put
-era-text-trim on the fixed-height row (a Bar, a list row), and its
-`line-height: 1` INHERITS into the truncating child, which then has no fixed
-height of its own: the child's box collapses to 1em while the font's real ink
-extent is ~1.15-1.2em, and the descenders (the "g" hook, the "y" tail) get
-sliced off at the box edge. Same bug on any `leading-none` + `truncate` pair.
-
-The fix belongs here rather than at each call site: a horizontally-truncating
-element must never be the thing that clips vertically. `line-height: normal`
-restores the font's own ascent+descent box — exactly the ink extent — and
-`text-box: normal` cancels a trim if one is set alongside. Rows stay the same
-height (they are tier-fixed and centre the child), and the child now has room
-for its own glyphs.
-
-Declared in `index.css`.
-
-```css
-@utility truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	line-height: normal;
-	text-box: normal;
-}
-```
-
-## era-text-trim-caps
-
-**Use it for:** the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-
-ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band
-misjudges caps-only strings — cap/alphabetic edges are the right box.
-
-Declared in `index.css`.
-
-```css
-@utility era-text-trim-caps {
-	line-height: 1;
-	text-box: trim-both cap alphabetic;
-}
-```
-
-## era-ink-center
-
-**Use it for:** on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
-
-The EDITABLE counterpart of era-text-trim — for native <input>s, which the
-trim is forbidden on (it collapses the UA's inner editor box and slices the
-glyphs; see typography/collapsed-text-trim).
-
-Without help, a tier-height input centres its text by FONT BOX, and the ui
-stacks' font box is deeply asymmetric: ascent ≈1.07em against descent
-≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em
-LOW — so a field's text sat visibly below the trimmed label beside it.
-
-The value is OPTICAL, not the derivation's: pure x-band centring computes
-to ~0.23em of padding, but pixel-measured against real Title-Case text it
-over-lifts — the eye weighs the cap-to-baseline mass, which x-band
-centring parks ~2px high (caps 2.75px off the top against 5.7px of air
-under the baseline, measured at dense; the general form of that offset,
-and why era-label-ink's note about "System" is not a contradiction of it,
-is derived at era-label-ink below). 0.08em splits the difference
-between the x-band ideal and the cap-band ideal, landing caps ~3.7px in an
-18px field with ~4.7px under the baseline — the reading where neither
-band's partisans win and neither complains.
-
-The lift is padding, not a translateY: an icon-less Input paints the field
-chrome itself, and a transform would drag the field along with the ink.
-padding-bottom shrinks the content box from below, and a single-line input
-re-centres its line box in what remains — the ink rises by exactly half the
-padding, the chrome doesn't move, and the caret and selection follow the
-text. In em on purpose: the correction is a fraction of the type, so it
-holds across every density and text size with one value.
-
-WHEN SOMEONE REPORTS A CORRECTLY-CENTRED FIELD AS "TOO HIGH", check the
-STRING before the geometry. A placeholder like "Filter…" has no descender and
-no cap, so its ink occupies only the x-height band — and a box that centres
-that band exactly still reads high, because the eye centres on the mass it
-can see and expects the space a descender would have filled. Measured at the
-pill tier on the shipped mono stack, "Filter…" sits within half a pixel of
-centre while looking a little high; the pill suite documents the same effect
-from the other side (see OFF_BAND_LOW in ink-centering.spec.ts, where "soon"
-cannot be symmetric and is bounded by sign instead of magnitude).
-
-That is not a licence to ignore the report — era-ink-center IS wrong by
-1.5–2px on the sans and serif stacks (pinned in FIELD_KNOWN_SKEW) — only a
-reason to measure the ink before touching the constant.
-
-Declared in `index.css`.
-
-```css
-@utility era-ink-center {
-	padding-bottom: 0.08em;
-}
-```
-
-## era-token-ink
-
-**Use it for:** the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
-
-TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
-count, a status, a tag. Font-independent, unlike everything it replaces.
-
-THE BUG IT FIXES, which had been shipping library-wide and invisibly:
-`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all
-flex, and a flex container's bare text becomes an ANONYMOUS flex item — a box
-no selector can reach and no non-inherited property can touch. So
-`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one
-thing: `line-height: 1`. The ink was then centred by `align-items: center`
-on the LINE BOX, which is precisely the font-metric-dependent centring the
-trim exists to eliminate. Measured on the shipped mono stack: a badge reading
-"AC-2.1" sat 2px high in an 18px pill, and no amount of tuning the trim's
-BAND changed it, because the trim was never running.
-
-The mechanism here restores it: a BLOCK box (where text-box-trim does apply)
-whose trimmed line box is then centred by `align-content` — block-container
-alignment, so no flex formatting context and no anonymous item. The browser
-computes the band from the font's own metrics, which is what makes it hold
-across ui-monospace, system-ui and ui-serif instead of needing a constant
-per stack.
-
-CAP band, not the x-height band the general trim uses, because the content
-class is different: a token is caps and digits (both cap-height), and
-centring the x-band parks them high by (cap − x)/2. Measured on the shipped
-stacks, cap-band centring takes an id/count/status from −2.0px to 0.0.
-Prose and sentence-case labels keep era-text-trim; this is for tokens.
-
-Declared in `index.css`.
-
-```css
-@utility era-token-ink {
-	display: block;
-	align-content: center;
-	text-align: center;
-	line-height: 1;
-	text-box: trim-both cap alphabetic;
-}
-```
-
-## era-label-ink
-
-**Use it for:** the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
-
-LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
-"this fixed-height control holds one line of text".
-
-Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
-becomes one and `align-content` (block-container alignment) does the
-centring. What differs is the band and the alignment, because the content
-class differs — a label is sentence case, so the x-height band is the visual
-mass to centre (cap-band reads low on "System"), and it is laid out against
-the row's padding rather than centred in it.
-
-THAT PARENTHESIS AND era-ink-center's "x-band centring parks ~2px high" READ
-AS A CONTRADICTION AND ARE NOT. Both are true, of their own example string,
-and each was generalised one step too far. Under an ex band the ink offset is
-
-    (xh − ascent + descent) / 2
-
-which predicts a controlled A/B — one real button, one class set, only the
-STRING changing — within 0.3px:
-
-    Save  asc 9 desc 0   1.28px high     SAVE  asc 9 desc 0   1.28px high
-    Savg  asc 9 desc 3   0.22px low      savg  asc 7 desc 3   1.22px low
-
-"System" has a descender and reads low under the cap band; "Save" has none
-and reads high under the ex band. Case is not the variable — "Save" and
-"SAVE" are identical to the hundredth of a pixel. No fixed band centres both
-a descender-less and a descender-bearing label, because they differ by ~1.5px
-in the same box.
-
-WHICH IS WHY THE BAND IS FIXED ANYWAY, and this is the part that decides it.
-A band gives every label the SAME baseline whatever it spells — measured
-spread across Save/Savg/save/savg/SAVE/PDF/Cancel/"Copy page" is 0.00px —
-while ink-extent centring would move each label independently and leave a bar
-of buttons visibly ragged. A uniform offset the eye cannot see beats a local
-misalignment it can. So the offset is accepted, not corrected, and the only
-escape is per-label and opt-in (Button's `caps`), which buys optical centring
-for a lone label at the cost of ~1.06px against its neighbours.
-
-AND THE GUARANTEE SPANS BOTH INK PATHS. This utility and era-text-trim are
-two mechanisms — block+align-content here, a blockified flex item there — and
-every measurement above was taken on the trim path. Measured since: the
-text-only path holds the same 0.00px spread AND lands on the same baseline,
-15.22px from the button top at control tier. So an icon button and a text
-button put their labels on one line, and `not-has-[svg]` costs nothing but
-which element carries the trim.
-
-Measured by signalnine.org and reproduced here; see label-band.spec.ts, which
-pins the 0.00px spread, the cost of breaking it, and the agreement between
-the two paths.
-
-WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
-text is an ANONYMOUS flex item — a box no selector reaches and no
-non-inherited property touches. So `era-text-trim` on a flex row is inert,
-contributing only its `line-height: 1`, and the ink falls back to line-box
-centring by font metrics. era-token-ink already fixed that for centred
-tokens; this fixes it for everything else.
-
-THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
-needs the box to stay flex, which re-creates the anonymous item. A component
-whose children are an opaque slot therefore guards it —
-`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
-leaving the icon case on line-box centring. Splitting icon and label into
-separate slots is what would close it; typography/inert-trim reports every
-site still on the fallback.
-
-Declared in `index.css`.
-
-```css
-@utility era-label-ink {
-	display: block;
-	align-content: center;
-	line-height: 1;
-	text-box: trim-both ex alphabetic;
-}
-```
-
-## surface-backdrop
-
-**Use it for:** the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
-
-Declared in `index.css`.
-
-```css
-@utility surface-backdrop {
-	backdrop-filter: var(--era-backdrop-filter);
-	-webkit-backdrop-filter: var(--era-backdrop-filter);
-}
-```
-
-## material-popover
-
-**Use it for:** a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
-
-Declared in `index.css`.
-
-```css
-@utility material-popover {
-	background-color: var(--era-surface-bg-elevated);
-	box-shadow: var(--era-shadow-lg);
-	backdrop-filter: var(--era-backdrop-filter);
-	-webkit-backdrop-filter: var(--era-backdrop-filter);
-}
-```
-
-## material-panel
-
-**Use it for:** a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
-
-Declared in `index.css`.
-
-```css
-@utility material-panel {
-	background-color: var(--era-surface-bg);
-	box-shadow: var(--era-shadow-lg);
-	backdrop-filter: var(--era-backdrop-filter);
-	-webkit-backdrop-filter: var(--era-backdrop-filter);
-}
-```
-
-## pressable
-
-**Use it for:** the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
-
-Declared in `index.css`.
-
-```css
-@utility pressable {
-	&:active {
-		box-shadow: var(--era-shadow-pressed);
-	}
-
-	&:active > [data-era-press-content] {
-		translate: var(--era-press-effective-x, var(--era-press-sink-x))
-			var(--era-press-effective-y, var(--era-press-sink-y));
-	}
-}
-```
-
-## tier-icon · tier-pill · tier-chip · tier-control · tier-bar
-
-BOUNDED GEOMETRY — height and radius are one decision.
-
-A tier is a geometric type, not two classes a caller must remember to keep in
-sync. `tier-control` establishes h-control AND rd-control; the radius ladder
-then guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.
-Width remains the component's decision: a row stretches, a button adds
-min-w-control, and a square control adds w-control.
-
-Declared in `index.css`.
-
-```css
-@utility tier-icon {
-	height: var(--era-h-icon);
-	border-radius: var(--era-rd-icon);
-}
-
-@utility tier-pill {
-	height: var(--era-h-pill);
-	border-radius: var(--era-rd-pill);
-}
-
-@utility tier-chip {
-	height: var(--era-h-chip);
-	border-radius: var(--era-rd-chip);
-}
-
-@utility tier-control {
-	height: var(--era-h-control);
-	border-radius: var(--era-rd-control);
-}
-
-@utility tier-bar {
-	height: var(--era-h-bar);
-	border-radius: var(--era-rd-bar);
-}
-```
-
-## h-line
-
-**Use it for:** the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.
-
-One LINE BOX tall — the height of the text this stands in for.
-
-Skeleton's `line` used h-(--era-text), which is the body FONT SIZE: never the
-height of a rendered line (that is font-size x leading), and wrong again by
-the ladder's ratio for any rung other than body. `1lh` resolves against the
-element's OWN computed line-height, so putting a text-* class on the skeleton
-makes it match that tier exactly, at every density, and it follows a leading
-change for free.
-
-Declared in `index.css`.
-
-```css
-@utility h-line {
-	height: 1lh;
-}
-```
-
-## era-track-well
-
-**Use it for:** instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.
-
-A WELL THAT SURVIVES BEING FILLED.
-
-`shadow-well` is an INSET shadow, and an inset shadow belongs to the
-element's background layer — it paints under the element's own descendants.
-That is invisible on a well holding text (a checkbox, a code block: the
-chrome runs around the content) and wrong the moment something paints the
-whole box. Meter, Progress and the Slider track all do exactly that: an
-opaque child, `translateX`-ed to the value. So the well survived only where
-the track was EMPTY — a half-full meter on bevel had a chisel to the right
-of the value and none to the left, which reads as a hole with a sticker
-over it rather than a level inside a well.
-
-The fix is painting order, not geometry: the same `--era-shadow-well` on a
-pseudo-element that is the element's LAST child, so it lands above the fill.
-The fill still spans the full box — nothing is inset, no radius is
-re-derived, and 0% and 100% keep their exact ends. The `position: relative`
-is load-bearing (the overlay resolves against this box) and `inherit` on the
-radius keeps it honest under `data-corners="square"`.
-
-Surface-agnostic on purpose. It reads the same token every well reads, so
-glass's hairline rim is restored by the same line that restores bevel's
-chisel, and flat — where the token is `none` — renders exactly as before.
-Reported against bevel by a consumer; it was never a bevel bug.
-
-Declared in `index.css`.
-
-```css
-@utility era-track-well {
-	position: relative;
-	&::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		box-shadow: var(--era-shadow-well);
-		pointer-events: none;
-	}
-}
-```
-
-## era-skeleton-pulse
-
-Skeleton's pulse, on the MOTION AXIS.
-
-It used to be a literal `2s ease-in-out` on the component, so it neither died
-at data-motion="instant" nor honoured prefers-reduced-motion — on the one
-component most likely to be on screen in bulk, and animating. That is an
-accessibility defect rather than a preference: a page of pulsing blocks is
-exactly what someone with a vestibular disorder turns motion off to avoid.
-
-Same derivation as era-shimmer: 10x the axis duration, so it is a slow pulse
-at normal, slower at extra, and at instant the duration resolves to 0s and it
-freezes on its base frame — full opacity, a plain filled block.
-
-Declared in `index.css`.
-
-```css
-@utility era-skeleton-pulse {
-	animation: era-skeleton-pulse calc(var(--era-duration) * 10) var(--era-ease) infinite;
-}
-```
-
-## era-shimmer
-
-**Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
-
-In-progress text shimmer — a bright sweep through muted text (the standard
-"working…" label treatment in streaming UIs). Timing derives from the motion
-axis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the
-duration is 0s and the sweep freezes on its base frame — plain muted text —
-so reduced-motion and data-motion="instant" both kill it for free.
-
-Declared in `index.css`.
-
-```css
-@utility era-shimmer {
-	background: linear-gradient(
-		110deg,
-		var(--color-muted) 0% 43%,
-		var(--color-bright) 50%,
-		var(--color-muted) 57% 100%
-	);
-	background-size: 200% 100%;
-	background-clip: text;
-	-webkit-text-fill-color: transparent;
-	animation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;
-}
-```
-
-## era-collapse
-
-**Use it for:** the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
-
-The open/close animation for a bits-ui Collapsible.Content — the height
-sweep every disclosure in the library uses (a Step's body, an error panel's
-detail, a swarm node's children).
-
-It has to be a keyframe animation rather than a transition because the
-natural height is only knowable at open time: bits measures the content and
-publishes `--bits-collapsible-content-height`, which the `to` frame reads.
-The class also owns `overflow: hidden` — animating height without it just
-spills the content out of the shrinking box.
-
-Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
-`extra` stretches it, for free. Two components carried a byte-identical copy of
-these keyframes under two different names before this existed (a Step's body
-and the error panel's detail), and the swarm tree would have made a third; the
-panel that needs different motion should override `animation`, not re-declare
-it.
-
-Declared in `index.css`.
-
-```css
-@utility era-collapse {
-	overflow: hidden;
-	&[data-state='open'] {
-		animation: era-collapse-open var(--era-duration) var(--era-ease);
-	}
-	&[data-state='closed'] {
-		animation: era-collapse-close var(--era-duration) var(--era-ease);
-	}
-}
-```
-
-## h-icon · h-pill · h-chip · h-control · h-bar
-
-**Use it for:** the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).
-
-Declared in `index.css`.
-
-```css
-@utility h-icon {
-	height: var(--era-h-icon);
-}
-@utility h-pill {
-	height: var(--era-h-pill);
-}
-@utility h-chip {
-	height: var(--era-h-chip);
-}
-@utility h-control {
-	height: var(--era-h-control);
-}
-@utility h-bar {
-	height: var(--era-h-bar);
-}
-```
-
-## min-h-icon · min-h-pill · min-h-chip · min-h-control · min-h-bar
-
-**Use it for:** minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).
-
-Declared in `index.css`.
-
-```css
-@utility min-h-icon {
-	min-height: var(--era-h-icon);
-}
-@utility min-h-pill {
-	min-height: var(--era-h-pill);
-}
-@utility min-h-chip {
-	min-height: var(--era-h-chip);
-}
-@utility min-h-control {
-	min-height: var(--era-h-control);
-}
-@utility min-h-bar {
-	min-height: var(--era-h-bar);
-}
-```
-
-## w-icon · w-pill · w-chip · w-control · w-bar
-
-**Use it for:** a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or a column measured in tiers rather than in content.
-
-Declared in `index.css`.
-
-```css
-@utility w-icon {
-	width: var(--era-h-icon);
-}
-@utility w-pill {
-	width: var(--era-h-pill);
-}
-@utility w-chip {
-	width: var(--era-h-chip);
-}
-@utility w-control {
-	width: var(--era-h-control);
-}
-@utility w-bar {
-	width: var(--era-h-bar);
-}
-```
-
-## min-w-icon · min-w-pill · min-w-chip · min-w-control · min-w-bar
-
-**Use it for:** a minimum tier WIDTH — the floor that makes a single-glyph control render as a square rather than a skinny pill (min-w-control on an icon button, min-w-pill on a badge). These could not exist before the ladder was renamed: the old rungs were sm/md/lg, and Tailwind's container scale already owns min-w-md and min-w-lg, so the names collided and every call site had to write min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing.
-
-Declared in `index.css`.
-
-```css
-@utility min-w-icon {
-	min-width: var(--era-h-icon);
-}
-@utility min-w-pill {
-	min-width: var(--era-h-pill);
-}
-@utility min-w-chip {
-	min-width: var(--era-h-chip);
-}
-@utility min-w-control {
-	min-width: var(--era-h-control);
-}
-@utility min-w-bar {
-	min-width: var(--era-h-bar);
-}
-```
-
-## size-icon · size-pill · size-chip · size-control · size-bar
-
-**Use it for:** a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.
-
-Declared in `index.css`.
-
-```css
-@utility size-icon {
-	width: var(--era-h-icon);
-	height: var(--era-h-icon);
-}
-@utility size-pill {
-	width: var(--era-h-pill);
-	height: var(--era-h-pill);
-}
-@utility size-chip {
-	width: var(--era-h-chip);
-	height: var(--era-h-chip);
-}
-@utility size-control {
-	width: var(--era-h-control);
-	height: var(--era-h-control);
-}
-@utility size-bar {
-	width: var(--era-h-bar);
-	height: var(--era-h-bar);
-}
-```
-
-## px-pill · px-chip · pl-pill · pr-pill · pl-chip · pr-chip
-
-**Use it for:** pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
-
-Declared in `index.css`.
-
-```css
-@utility px-pill {
-	padding-inline: var(--era-pill-px);
-}
-@utility px-chip {
-	padding-inline: var(--era-chip-px);
-}
-@utility pl-pill {
-	padding-left: var(--era-pill-px);
-}
-@utility pr-pill {
-	padding-right: var(--era-pill-px);
-}
-@utility pl-chip {
-	padding-left: var(--era-chip-px);
-}
-@utility pr-chip {
-	padding-right: var(--era-chip-px);
-}
-```
-
-## p-section
-
-**Use it for:** padding for a content panel that sits UNDER a section header row — the even-padding exception, and the reason it is not called p-section: it deliberately under-pays the block start. For an evenly padded content panel use p-section, which is the plain token.
-
-A content panel always follows a section header ROW, and that row already
-contributes its own slack: the heading's text sits in an h-bar bar, so there
-is (h-bar − text)/2 of empty bar under its glyphs before the panel even
-starts. Padding the panel evenly on top of that spends the space twice — the
-header ends up floating between the section above and the paragraph it
-introduces rather than binding to it.
-
-So the block-start pays only the REMAINDER. The target is the indent: the
-space under a heading should measure the same as the space beside the text,
-which is --era-pad-content. The header row already supplies (h-bar − text)/2 of
-it, so the panel adds what's left, and heading-to-paragraph reads equal to
-the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
-the header's slack unaccounted for and the heading still detached.
-
-Both terms are density-derived, so the equality holds at every mode; the
-max() is the floor for a hypothetical mode where the row's slack would
-exceed the inset outright.
-
-Declared in `index.css`.
-
-```css
-@utility p-section {
-	padding: var(--era-pad-content);
-	padding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));
-}
-```
-
-## duration-base
-
-**Use it for:** the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion="instant", longer at "extra".
-
-Declared in `index.css`.
-
-```css
-@utility duration-base {
-	transition-duration: var(--era-duration);
-}
-```
-
-## text-micro · text-lede · text-heading · text-title · text-display
-
-**Use it for:** the type ladder — micro (eyebrow/legend) < body (controls) < lede (the paragraph under a title) < heading < title < display. Derived from --era-text, so the ratio between any two rungs holds at every density; leading and tracking ride with the size, so a rung is one class.
-
-THE TYPE LADDER — the one axis that was not on the density system.
-
-era had exactly one size, `text-body`, so a heading had nowhere to go and
-consumers reached for Tailwind's fixed `text-2xl` or a bare <h1>. Both are
-rem-fixed while `--era-text` re-tiers, so heading prominence DEGRADED as
-density increased: measured in a consumer app, an <h1> against body text
-was 1.33x at dense and 1.14x at touch. The page title gets quieter the
-tighter you set the page, which is backwards, and it is the only place in
-era where a size relationship does not hold across the axis.
-
-Named by ROLE, like the tier ladder and for the same reason: size names
-invert (this library already shipped an `xxs` bigger than its `xs`), and a
-role tells you where the rung belongs. Ratios are simple fractions of the
-atom rather than a geometric scale — again like the tier ladder, whose
-rungs are sp+6, 2sp+6, 3sp, 4sp rather than a constant multiplier. They
-land on whole pixels at dense and hold their ratio at every mode.
-
-  micro    5/6   10 / 11.7 / 11.7 / 11.7   an eyebrow, a legend, a tag
-  body      1    12 / 14 / 14 / 14         control and UI text
-  lede     5/4   15 / 17.5                 the paragraph under a title
-  heading  3/2   18 / 21                   a section heading
-  title     2    24 / 28                   a page or card title
-  display   3    36 / 42                   a hero
-
-`micro` is not invented: the library hand-writes text-[0.625rem] ten times
-for exactly this role, and 5/6 of dense's 12px is that value.
-
-Leading and tracking ride with the size, so a rung is one class. Both
-tighten as the rung grows, which is ordinary optical setting and matters
-more here than usual — era's default stack is monospace, whose display
-sizes read loose without it.
-
-
-body and micro deliberately carry NO line-height: `text-body` is worn by
-every control in the library, where leading is owned by era-text-trim and
-leading-none. Giving it a default would re-space every control in era.
-Use `leading-body` for running text, as before.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--text-micro: calc(var(--era-text) * 5 / 6);
-	--text-micro--letter-spacing: 0.04em;
-	--text-lede: calc(var(--era-text) * 5 / 4);
-	--text-lede--line-height: 1.5;
-	--text-heading: calc(var(--era-text) * 3 / 2);
-	--text-heading--line-height: 1.3;
-	--text-heading--letter-spacing: -0.01em;
-	--text-title: calc(var(--era-text) * 2);
-	--text-title--line-height: 1.15;
-	--text-title--letter-spacing: -0.02em;
-	--text-display: calc(var(--era-text) * 3);
-	--text-display--line-height: 1.05;
-	--text-display--letter-spacing: -0.03em;
-}
-```
-
-## text-body
-
-Density-derived body size: `text-body` replaces text-[length:var(--era-text)]
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--text-body: var(--era-text);
-}
-```
-
-## leading-body
-
-Prose leading — `leading-body` is the pair to `text-body`, and every piece
-of text in the library that can wrap to a second line carries it. Enforced
-at runtime by typography/prose-leading.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--leading-body: var(--era-leading);
-}
-```
-
-## rounded-icon · rounded-pill · rounded-chip · rounded-control · rounded-bar · rounded-menu-item
-
-Radius ladder — Tailwind's own rounded-* names now walk era's concentric
-ladder (rd-T = rd-xs + (h-T − h-icon)/2), ride the corners toggle, and
-collapse to 0 on square. rounded-menu-item is the menu-row radius
-(rd-md − panel-inset) that keeps rows concentric inside a rounded-control
-panel on every surface.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--radius-icon: var(--era-rd-icon);
-	--radius-pill: var(--era-rd-pill);
-	--radius-chip: var(--era-rd-chip);
-	--radius-control: var(--era-rd-control);
-	--radius-bar: var(--era-rd-bar);
-	--radius-menu-item: var(--era-item-rd);
-}
-```
-
-## shadow
-
-Surface chrome — bare `shadow` is the resting control edge, shadow-lg the
-floating panel, shadow-well the recessed container, shadow-pressed the
-active/latched face, shadow-highlight the material half of hover feedback.
-Flat renders them as none, bevel as chisels, glass as frosted rims — the
-class stays the same.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--shadow: var(--era-shadow);
-}
-```
-
-## shadow-sm · shadow-lg · shadow-well · shadow-pressed · shadow-highlight
-
-v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints
-auto-fix one to the other — alias both to the control edge so either
-spelling renders era chrome.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--shadow-sm: var(--era-shadow);
-	--shadow-lg: var(--era-shadow-lg);
-	--shadow-well: var(--era-shadow-well);
-	--shadow-pressed: var(--era-shadow-pressed);
-	--shadow-highlight: var(--era-highlight-shadow);
-}
-```
-
-## bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)
-
-Surface fills — bg-well is the surface's own resting fill (pairs with
-shadow-well for recessed chrome), bg-elevated the raised tier,
-bg-highlight the transient
-hover/focus/keyboard wash (pairs with shadow-highlight; latched states
-stay on opaque bg-hover), bg-overlay the modal scrim.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--color-well: var(--era-surface-bg);
-	--color-elevated: var(--era-surface-bg-elevated);
-	--color-highlight: var(--era-highlight);
-	--color-overlay: var(--era-overlay-bg);
-}
-```
-
-## p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)
-
-THE SPACING SCALE — one entry per token, from which Tailwind derives the
-WHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and
-gap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.
-
-These were hand-written `@utility` blocks, which could only ever cover the
-spellings someone remembered to write: `px-gutter` existed and `mt-gutter`
-did not, `p-inset-control` existed and `pl-inset-control` did not, so the
-library fell back to `mt-(--era-gap)` in exactly the places the named API
-was supposed to cover. One line here replaces twenty blocks and leaves no
-spelling missing.
-
-ONLY genuine spacing belongs here. The namespace is shared across
-h/w/p/m/gap, so a name registered here means the same length in ALL of
-them — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay
-hand-written per prefix below, and the two vocabularies deliberately share
-no word: icon/pill/chip/control/bar are heights; gutter, card, panel,
-content, menu, field and the inset-* names are spacing. Registering a tier
-name here would silently make `px-control` mean 24px of side padding.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--spacing-gutter: var(--era-gap);
-	--spacing-panel: var(--era-pad-panel);
-	--spacing-card: var(--era-pad-card);
-	--spacing-content: var(--era-pad-content);
-	--spacing-menu: var(--era-panel-inset);
-	--spacing-field: var(--era-field-px);
-}
-```
-
-## p-inset-pill · px-inset-pill · py-inset-pill · gap-inset-pill · p-inset-chip · px-inset-chip · py-inset-chip · gap-inset-chip · … (12 in all)
-
-**Use it for:** text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--spacing-inset-pill: var(--era-inset-pill);
-	--spacing-inset-chip: var(--era-inset-chip);
-	--spacing-inset-control: var(--era-inset-control);
-}
-```
-
-## p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (40 in all)
-
-**Use it for:** the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--spacing-icon-inset-pill: var(--era-icon-inset-pill);
-	--spacing-icon-inset-chip: var(--era-icon-inset-chip);
-	--spacing-icon-inset-control: var(--era-icon-inset-control);
-	--spacing-icon-inset-bar: var(--era-icon-inset-bar);
-	--spacing-pill-inset-chip: var(--era-pill-inset-chip);
-	--spacing-pill-inset-control: var(--era-pill-inset-control);
-	--spacing-pill-inset-bar: var(--era-pill-inset-bar);
-	--spacing-chip-inset-control: var(--era-chip-inset-control);
-	--spacing-chip-inset-bar: var(--era-chip-inset-bar);
-	--spacing-control-inset-bar: var(--era-control-inset-bar);
-}
-```
-
-## p-glyph-icon · px-glyph-icon · py-glyph-icon · gap-glyph-icon · p-glyph-pill · px-glyph-pill · py-glyph-pill · gap-glyph-pill
-
-**Use it for:** the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill).
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--spacing-glyph-icon: var(--era-glyph-icon);
-	--spacing-glyph-pill: var(--era-glyph-pill);
-}
-```
-
-## bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight
-
-**Use it for:** the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--color-field: var(--era-field-bg);
-	--color-field-highlight: var(--era-field-highlight);
-}
-```
-
-## ease-base
-
-Motion — bare transition utilities default to the motion axis, so
-`transition-colors` alone is on-design (0s at instant, longer at extra).
-ease-base/duration-base name the axis explicitly for overrides.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--default-transition-duration: var(--era-duration);
-	--default-transition-timing-function: var(--era-ease);
-	--ease-base: var(--era-ease);
-}
-```
-
-## bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)
-
-Surface divider colors: border-divider, bg-divider-faded, …
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--color-divider: var(--era-divider-color);
-	--color-divider-faded: var(--era-divider-faded);
-	--color-background: var(--color-1);
-	--color-foreground: var(--color-fg);
-	--color-1: var(--color-1);
-	--color-2: var(--color-2);
-	--color-3: var(--color-3);
-	--color-4: var(--color-4);
-	--color-5: var(--color-5);
-	--color-6: var(--color-6);
-	--color-7: var(--color-7);
-	--color-8: var(--color-8);
-	--color-9: var(--color-9);
-	--color-10: var(--color-10);
-	--color-11: var(--color-11);
-	--color-12: var(--color-12);
-	--color-border: var(--color-border);
-	--color-surface: var(--color-surface);
-	--color-hover: var(--color-hover);
-	--color-fg: var(--color-fg);
-	--color-bright: var(--color-bright);
-	--color-muted: var(--color-muted);
-}
-```
-
-## bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (39 in all)
-
-The standing pill fill — --era-fill, the latched counterpart of the
-transient highlight. Surface-owned: a composing wash on flat/bevel, the
-opaque swatch on glass.
-
-Declared in `index.css`.
-
-```css
-@theme inline {
-	--color-fill: var(--era-fill);
-	--color-link: var(--color-link);
-	--color-primary: var(--color-primary);
-	--color-primary-fg: var(--color-primary-fg);
-	--color-primary-hover: var(--color-primary-hover);
-	--color-destructive: var(--color-destructive);
-	--color-destructive-fg: var(--color-destructive-fg);
-	--color-success: var(--color-success);
-	--color-success-fg: var(--color-success-fg);
-	--color-warning: var(--color-warning);
-	--color-warning-fg: var(--color-warning-fg);
-	--color-info: var(--color-info);
-	--color-info-fg: var(--color-info-fg);
-}
-```