@signal9/era-ui 32.0.0 → 33.0.0

package/dist/styles/index.css

@@ -43,6 +43,8 @@
 @import './surfaces/bevel.css' layer(era.tokens);
 /* UNLAYERED: carries the font-axis !important — see above. */
 @import './typography.css';
+/* Semantic utilities and the public Tailwind vocabulary. */
+@import './utilities.css';
 
 /* WHAT IS NOT HERE: vidstack's stylesheets, which the VideoPlayer needs and
  * nothing else does. They were imported right here, so every consumer of this
@@ -106,959 +108,3 @@
 		-webkit-text-security: var(--era-mask-glyph, disc);
 	}
 }
-
-/* Shared interactive-state recipe: quiet focus, disabled affordance.
- * Equivalent to `focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`.
- *
- * @use the focus/disabled recipe every era control carries — put it on a custom
- * interactive element instead of hand-writing focus/disabled variants. */
-@utility era-interactive {
-	&:focus {
-		outline: none;
-	}
-	&:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-}
-
-/* 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.
- *
- * @use 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). */
-@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;
-	}
-}
-
-/* Scrollable but chromeless — hides the scrollbar while keeping wheel / touch /
- * drag scrolling (e.g. an overflowing tab strip in a small pane handle).
- *
- * @use hide the scrollbar on an overflowing strip or rail while keeping it
- * scrollable — for a scroll region that should show its bar, use ScrollArea. */
-@utility scrollbar-none {
-	scrollbar-width: none;
-	&::-webkit-scrollbar {
-		display: none;
-	}
-}
-
-/* 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.
- *
- * @use 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.
- */
-@utility era-text-trim {
-	line-height: 1;
-	text-box: trim-both ex alphabetic;
-}
-
-/* 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.
- *
- * @use 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. */
-@utility truncate {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	line-height: normal;
-	text-box: normal;
-}
-
-/* THE COLLISION GUARD — `truncate` and `era-text-trim` on the SAME element.
- *
- * Two utilities, same specificity, opposite intents: the trim collapses the box
- * to the x-height band, and truncate clips to whatever box it lands on. Class
- * ORDER in the attribute cannot break the tie — CSS resolves same-specificity
- * conflicts by stylesheet order, and Tailwind emits era-text-trim last, so the
- * trim silently won and the clip chopped the glyphs into a middle stripe
- * (measured: an 8.58px box holding 16px of ink). Writing the classes the other
- * way round changed nothing, which is what made it so hard to see.
- *
- * A real consumer hit exactly this. So the pairing is now DEFINED rather than
- * accidental, with a compound selector that outranks both single-class
- * utilities: truncate wins the vertical, the glyphs stay whole, and the
- * element centres the way the docs say it should anyway — via its
- * fixed-height parent's items-center.
- *
- * This is a safety net, not a blessing: the correct authoring is still trim on
- * the ROW, truncate on the CHILD (typography/collapsed-text-trim still reports
- * the pair so the runtime audit can point at it). It exists so the failure mode
- * is a no-op instead of unreadable text. */
-.era-text-trim.truncate,
-.era-text-trim-caps.truncate,
-.era-label-ink.truncate,
-.era-token-ink.truncate {
-	line-height: normal;
-	text-box: normal;
-}
-
-/* ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band
- * misjudges caps-only strings — cap/alphabetic edges are the right box.
- *
- * @use 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`. */
-@utility era-text-trim-caps {
-	line-height: 1;
-	text-box: trim-both cap alphabetic;
-}
-
-/* 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.
- *
- * @use on a native single-line <input> (or the text layer that must mirror
- * one) inside a fixed-height field — never alongside era-text-trim. */
-@utility era-ink-center {
-	padding-bottom: 0.08em;
-}
-
-/* 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.
- *
- * @use 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. */
-@utility era-token-ink {
-	display: block;
-	align-content: center;
-	text-align: center;
-	line-height: 1;
-	text-box: trim-both cap alphabetic;
-}
-
-/* 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.
- *
- * @use 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). */
-@utility era-label-ink {
-	display: block;
-	align-content: center;
-	line-height: 1;
-	text-box: trim-both ex alphabetic;
-}
-
-/* MATERIAL ROLES — components choose meaning; surfaces choose appearance. */
-/* @use the surface-aware backdrop treatment without choosing a fill or relief.
- * Prefer material-popover/material-panel when the element is a complete surface. */
-@utility surface-backdrop {
-	backdrop-filter: var(--era-backdrop-filter);
-	-webkit-backdrop-filter: var(--era-backdrop-filter);
-}
-
-/* @use a floating transient surface: menus, popovers, tooltips, pickers, toasts.
- * Binds its raised fill, floating relief, and backdrop treatment atomically. */
-@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);
-}
-
-/* @use a floating persistent surface: dialogs, sheets, panes, inspectors.
- * Binds its resting fill, floating relief, and backdrop treatment atomically. */
-@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);
-}
-
-/* @use the physical press contract on a control whose direct content plane is
- * marked data-era-press-content. The surface owns relief/travel; compact
- * components select the compact travel primitives as their effective values. */
-@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));
-	}
-}
-
-/* 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. */
-@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);
-}
-
-/* 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.
- *
- * @use 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. */
-@utility h-line {
-	height: 1lh;
-}
-
-/* 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.
- *
- * @use 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. */
-@utility era-track-well {
-	position: relative;
-	&::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		box-shadow: var(--era-shadow-well);
-		pointer-events: none;
-	}
-}
-
-/* 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. */
-@utility era-skeleton-pulse {
-	animation: era-skeleton-pulse calc(var(--era-duration) * 10) var(--era-ease) infinite;
-}
-
-@keyframes era-skeleton-pulse {
-	0%,
-	100% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.4;
-	}
-}
-
-/* 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.
- *
- * @use the in-progress text treatment — put it on a "working…" / "thinking…"
- * label while a task streams, instead of a spinner beside the text. */
-@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;
-}
-@keyframes era-shimmer {
-	0% {
-		background-position: 100% 0;
-	}
-	100% {
-		background-position: -100% 0;
-	}
-}
-
-/* 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.
- *
- * @use the height sweep for a bits-ui Collapsible.Content — put it on the
- * Content element itself (it carries its own overflow: hidden). */
-@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);
-	}
-}
-@keyframes era-collapse-open {
-	from {
-		height: 0;
-		opacity: 0;
-	}
-	to {
-		height: var(--bits-collapsible-content-height);
-		opacity: 1;
-	}
-}
-@keyframes era-collapse-close {
-	from {
-		height: var(--bits-collapsible-content-height);
-		opacity: 1;
-	}
-	to {
-		height: 0;
-		opacity: 0;
-	}
-}
-
-/* ------------------------------------------------------------------ */
-/* THE PUBLIC CLASS API                                               */
-/*                                                                    */
-/* Era's consumer-facing styling surface is NAMED utilities — a user  */
-/* of the library writes `tier-control px-gutter shadow`, never        */
-/* `h-(--era-h-control)`-style var classes. Where Tailwind already has a   */
-/* name for the concept (rounded-control, shadow, ease) era OVERLOADS it   */
-/* so stock-looking markup renders on-design; where it doesn't, era   */
-/* registers its own (h-control, px-gutter, gap-gutter, p-card).               */
-/*                                                                    */
-/* The --era-* custom properties remain the internal contract (and    */
-/* the escape hatch for anything without a name — e.g. min-w-* tier   */
-/* names are NOT registered because Tailwind's container scale        */
-/* already owns min-w-md/lg; use min-w-(--era-h-control) there).           */
-/*                                                                    */
-/* Everything here is a thin name over a token, so the full axis      */
-/* system — density, surface, corners, motion — flows through         */
-/* untouched. @theme inline is load-bearing: it inlines the var()     */
-/* reference instead of snapshotting a value, so each USE re-resolves */
-/* against the element's own inherited axes.                         */
-/* ------------------------------------------------------------------ */
-@theme inline {
-	/* 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.
-	 *
-	 * @use 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.
-	 *
-	 * 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. */
-	--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;
-	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
-	--text-body: var(--era-text);
-	/* 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. */
-	--leading-body: var(--era-leading);
-	/* 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. */
-	--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);
-	/* 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. */
-	--shadow: var(--era-shadow);
-	/* 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. */
-	--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);
-	/* 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. */
-	--color-well: var(--era-surface-bg);
-	--color-elevated: var(--era-surface-bg-elevated);
-	--color-highlight: var(--era-highlight);
-	--color-overlay: var(--era-overlay-bg);
-	/* 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. */
-	--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);
-	/* @use 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. */
-	--spacing-inset-pill: var(--era-inset-pill);
-	--spacing-inset-chip: var(--era-inset-chip);
-	--spacing-inset-control: var(--era-inset-control);
-	/* @use 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. */
-	--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);
-	/* @use 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). */
-	--spacing-glyph-icon: var(--era-glyph-icon);
-	--spacing-glyph-pill: var(--era-glyph-pill);
-	/* @use the recessed field fill — bg-field is a text input's resting well,
-	 * bg-field-highlight its focused/hovered face. */
-	--color-field: var(--era-field-bg);
-	--color-field-highlight: var(--era-field-highlight);
-	/* @use the stacking tier for chrome that renders at the document root —
-	 * z-chrome (taskbar) < z-drawer (slide-over) < z-overlay (every dialog,
-	 * menu, popover and scrim) < z-toast < z-debug. A component ordering its
-	 * OWN parts inside an isolated context keeps small integers instead; see
-	 * styles/layers.css for why the two are different things. */
-	--z-index-chrome: var(--era-z-chrome);
-	--z-index-drawer: var(--era-z-drawer);
-	--z-index-overlay: var(--era-z-overlay);
-	--z-index-toast: var(--era-z-toast);
-	--z-index-debug: var(--era-z-debug);
-	/* 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. */
-	--default-transition-duration: var(--era-duration);
-	--default-transition-timing-function: var(--era-ease);
-	--ease-base: var(--era-ease);
-	/* Surface divider colors: border-divider, bg-divider-faded, … */
-	--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);
-	/* 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. */
-	--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);
-}
-
-/* ------------------------------------------------------------------ */
-/* Named tier + spacing utilities                                     */
-/*                                                                    */
-/* What is left here is what the SPACING SCALE above cannot express: */
-/* a tier is a HEIGHT, and the spacing namespace is shared across     */
-/* h/w/p/m/gap, so registering `control` there would silently make    */
-/* px-control mean 24px of side padding. Tier names therefore get one */
-/* hand-written block per prefix that needs them, and the two         */
-/* vocabularies share no word. Kept terse; the ladder itself is       */
-/* documented in density.css and on the /spacing page.                */
-/* ------------------------------------------------------------------ */
-
-/* @use 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-*). */
-@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);
-}
-
-/* @use minimum tier height for containers that may grow — a bar that is at
- * least lg-tier but can wrap (min-h-bar). */
-@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);
-}
-
-/* @use a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or
- * a column measured in tiers rather than in content. */
-@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);
-}
-
-/* @use 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. */
-@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);
-}
-
-/* @use a tier-sized square — size-icon is THE icon size (a Lucide glyph beside
- * body text), size-control a square control face. */
-@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);
-}
-
-/* @use pill side padding — the wider-than-vertical horizontal breathing room
- * badge/chip text wants (glyph-advance derived, ~2× the vertical inset). */
-@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);
-}
-
-/* @use 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. */
-@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));
-}
-
-/* @use 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". */
-@utility duration-base {
-	transition-duration: var(--era-duration);
-}