@signal9/era-ui 30.7.0 → 31.0.0

package/dist/generated-docs/utilities.md

@@ -4,7 +4,7 @@ The CSS classes era ships alongside the components — links, ink-centred text,
 
 ## Overview
 
-era's styling API is pure class names — write `h-control rounded-control px-gutter shadow`,
+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:
 
@@ -13,7 +13,7 @@ import "@signal9/era-ui/css";
 ```
 
 ```svelte
-<button class="h-control rounded-control px-inset-control shadow text-body">era styled</button>
+<button class="tier-control px-inset-control shadow text-body">era styled</button>
 ```
 
 Alongside the `@utility` classes referenced below, era registers named theme
@@ -23,6 +23,7 @@ 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 |
@@ -48,10 +49,13 @@ 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 heights, not spacing, so
+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
@@ -70,8 +74,9 @@ source uses it where a name exists.
 | `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). |
 | `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
-| `rounded-row` | the radius for a row inside a container that pads it by the gutter — a nav rail, a command list, any scrolling list of controls. For a row in a menu PANEL, whose inset is the surface-owned frame rather than the gutter, use rounded-menu-item. |
+| `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). |
@@ -92,12 +97,12 @@ source uses it where a name exists.
 | `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` | 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-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-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
 
@@ -479,35 +484,42 @@ Declared in `index.css`.
 }
 ```
 
-## rounded-row
+## tier-icon · tier-pill · tier-chip · tier-control · tier-bar
 
-**Use it for:** the radius for a row inside a container that pads it by the gutter — a nav rail, a command list, any scrolling list of controls. For a row in a menu PANEL, whose inset is the surface-owned frame rather than the gutter, use rounded-menu-item.
+BOUNDED GEOMETRY — height and radius are one decision.
 
-THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.
+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.
 
-The law is rd_outer − rd_inner = gap. A row inside a container that pads it by
-the gutter therefore takes the container's radius MINUS the gutter — and no
-tier radius equals that at more than one density, which is why reaching for
-`rounded-control` and hoping looks wrong: in a control-radius pane the row and
-the pane end up with identical curvature separated by 5px of gap, two arcs at
-one corner with no relationship.
+Declared in `index.css`.
 
-The alternative — deleting the gap so equal radii become legal — is the wrong
-trade and was briefly shipped. The ladder exists so a gap and concentric
-corners COEXIST; spending one to buy the other gives up the thing it is for.
+```css
+@utility tier-icon {
+	height: var(--era-h-icon);
+	border-radius: var(--era-rd-icon);
+}
 
-The calc runs on the ROW, not on the container, which is what makes it
-automatic: `--era-container-rd` is inherited, so a container that is not
-control-radius publishes its own and every row inside re-derives. era's
-command palette does exactly that — it is rd-bar, so its rows resolve to
-rd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the
-palette's geometry is unchanged by this.
+@utility tier-pill {
+	height: var(--era-h-pill);
+	border-radius: var(--era-rd-pill);
+}
 
-Declared in `index.css`.
+@utility tier-chip {
+	height: var(--era-h-chip);
+	border-radius: var(--era-rd-chip);
+}
 
-```css
-@utility rounded-row {
-	border-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));
+@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);
 }
 ```
 
@@ -532,6 +544,50 @@ Declared in `index.css`.
 }
 ```
 
+## 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.
@@ -1021,7 +1077,7 @@ Declared in `index.css`.
 }
 ```
 
-## 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 · … (36 in all)
+## 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.
 
@@ -1038,6 +1094,7 @@ Declared in `index.css`.
 	--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);
 }
 ```
 
@@ -1116,7 +1173,7 @@ Declared in `index.css`.
 }
 ```
 
-## bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)
+## 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
@@ -1137,5 +1194,7 @@ Declared in `index.css`.
 	--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);
 }
 ```

package/dist/styles/density.css

@@ -89,10 +89,10 @@
  *   rd-T = scale · (R + (h-T − h-icon) / 2)     where R = sp / φ²
  *
  * Both R and the per-tier concentric term are multiplied by scale. The corners
- * toggle flips scale 1 ↔ 0 so every rd collapses together. Because scale is
- * declared via @property as <number>, a transition on :root animates it when
- * the toggle fires — sp changes don't trigger the transition, so scrubbing
- * stays snappy while the corners flip is smooth.
+ * toggle flips scale discretely between 1 and 0 so every radius collapses
+ * together. Intermediate scale values are forbidden: they make the radius step
+ * `scale × gap` while the physical gap stays fixed, breaking concentricity for
+ * the duration of the morph.
  *
  * SUBTREE OVERRIDES
  * =================
@@ -110,13 +110,6 @@
  * 2rem and no subtree override of --era-sp could retroactively change it.
  */
 
-/* Typed custom property so the corners toggle animates smoothly. */
-@property --era-roundness-scale {
-	syntax: '<number>';
-	inherits: true;
-	initial-value: 1;
-}
-
 /* -------------------------------------------------- */
 /* Derivation — one formula per token, re-evaluated   */
 /* per element so data-mode / data-corners overrides  */
@@ -263,6 +256,10 @@
 		(var(--era-h-bar) - var(--era-h-chip)) / 2
 	); /* 5/7/9 = sp − 3 — inset a chip panel (drag bar) concentrically in a bar-tier
 	   pane (= rd-bar − rd-chip) */
+	--era-control-inset-bar: calc(
+		(var(--era-h-bar) - var(--era-h-control)) / 2
+	); /* 4/5/6/8 — centre a control inside a bar. This happens to equal --era-gap,
+	   but names the geometry pair instead of borrowing a layout concept. */
 
 	/* Roundness ladder — golden base + concentric progression, both gated by scale. */
 	/* rd-T = scale · (R + (h-T − h-icon) / 2). R = sp / φ². max(0px, …) clamps tier
@@ -275,12 +272,10 @@
 	   center children with the U-inset-T tokens above — nested corners then share
 	   a center of curvature with zero arithmetic.
 
-	   The one trap: a CONTAINER's radius follows its corner REGION's tier, never
-	   its overall bulk. A pane capped by a chip-tier handle bar (icon controls at
-	   icon-inset-chip) is a chip corner region → rd-chip, however large the pane.
-	   Choosing rd by visual importance is how concentricity breaks. Precedents:
-	   Chip (chip shell + icon dismiss), Bar (h-T ↔ rd-T), Pane.Root (rd-chip), menu
-	   panels (rd-control, items at era-item-rd = rd-control − panel-inset). */
+	   Unbounded surfaces do not acquire a tier from their bulk. Their exposed
+	   corner is either optical (independent of bounded nesting) or declared by a
+	   corner-bearing child and derived OUTWARD from that child's fixed tier. Never
+	   derive a bounded child's radius inward from an ancestor. */
 	--era-roundness: calc(var(--era-roundness-scale) * var(--era-sp) / 2.618);
 	--era-rd-icon: max(0px, var(--era-roundness));
 	--era-rd-pill: max(
@@ -433,11 +428,6 @@
 	--era-mask-glyph: disc;
 }
 
-/* Animate the roundness scale itself — not border-radius. sp changes snap
-   instantly (responsive scrub); the corners toggle animates scale 1 ↔ 0,
-   which cascades through the rd-* calc chain to every element at 60 fps.
-   Timed by the motion axis, so instant motion (or reduced-motion) snaps the
-   corners flip too. */
-:root {
-	transition: --era-roundness-scale var(--era-duration) var(--era-ease);
-}
+/* Rounded and square are different corner topologies, so the axis snaps. A
+   numeric interpolation would be visibly smooth but mathematically false at
+   every intermediate frame. */

package/dist/styles/index.css

@@ -461,32 +461,36 @@
 	}
 }
 
-/* THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.
- *
- * The law is rd_outer − rd_inner = gap. A row inside a container that pads it by
- * the gutter therefore takes the container's radius MINUS the gutter — and no
- * tier radius equals that at more than one density, which is why reaching for
- * `rounded-control` and hoping looks wrong: in a control-radius pane the row and
- * the pane end up with identical curvature separated by 5px of gap, two arcs at
- * one corner with no relationship.
- *
- * The alternative — deleting the gap so equal radii become legal — is the wrong
- * trade and was briefly shipped. The ladder exists so a gap and concentric
- * corners COEXIST; spending one to buy the other gives up the thing it is for.
- *
- * The calc runs on the ROW, not on the container, which is what makes it
- * automatic: `--era-container-rd` is inherited, so a container that is not
- * control-radius publishes its own and every row inside re-derives. era's
- * command palette does exactly that — it is rd-bar, so its rows resolve to
- * rd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the
- * palette's geometry is unchanged by this.
- *
- * @use the radius for a row inside a container that pads it by the gutter — a
- * nav rail, a command list, any scrolling list of controls. For a row in a menu
- * PANEL, whose inset is the surface-owned frame rather than the gutter, use
- * rounded-menu-item. */
-@utility rounded-row {
-	border-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));
+/* 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.
@@ -650,7 +654,7 @@
 /* THE PUBLIC CLASS API                                               */
 /*                                                                    */
 /* Era's consumer-facing styling surface is NAMED utilities — a user  */
-/* of the library writes `h-control rounded-control px-gutter shadow`, never        */
+/* 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   */
@@ -805,6 +809,7 @@
 	--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);

package/dist/ui/accordion/accordion-trigger.svelte

@@ -14,7 +14,7 @@
 <Accordion.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full items-center justify-between gap-icon-inset-chip rounded-control px-inset-control text-body text-fg hover:bg-highlight hover:shadow-highlight focus:outline-none disabled:opacity-50',
+		'flex tier-control w-full items-center justify-between gap-icon-inset-chip px-inset-control text-body text-fg hover:bg-highlight hover:shadow-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}

package/dist/ui/alert-dialog/alert-dialog-action.svelte

@@ -12,6 +12,7 @@
 		variant,
 		icon,
 		loading,
+		busy,
 		loadingLabel,
 		children,
 		class: className,
@@ -32,6 +33,7 @@
 			{variant}
 			{icon}
 			{loading}
+			{busy}
 			{loadingLabel}
 			class={className}
 		>

package/dist/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -10,6 +10,7 @@
 		variant,
 		icon,
 		loading,
+		busy,
 		loadingLabel,
 		children,
 		class: className,
@@ -30,6 +31,7 @@
 			{variant}
 			{icon}
 			{loading}
+			{busy}
 			{loadingLabel}
 			class={className}
 		>

package/dist/ui/badge/badge.svelte

@@ -19,7 +19,7 @@
 		// that cost. A badge holding an icon must stay flex to lay the icon out
 		// beside the text, and keeps the general trim — its line-height:1 plus
 		// flex centring, which is the best available when the text is anonymous.
-		base: 'inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink',
+		base: 'inline-flex min-w-pill shrink-0 items-center justify-center gap-gutter tier-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink',
 		variants: {
 			tone: {
 				default: 'bg-fill text-fg',
@@ -56,7 +56,13 @@
 	} = $props();
 </script>
 
-<span bind:this={ref} class={cn(badgeVariants({ tone }), className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-era-geometry="bounded"
+	data-era-tier="pill"
+	class={cn(badgeVariants({ tone }), className)}
+	{...restProps}
+>
 	{#if lead}
 		{@render lead()}
 	{/if}

package/dist/ui/badge/badge.svelte.d.ts

@@ -7,7 +7,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         warning: "bg-warning text-warning-fg";
         info: "bg-info text-info-fg";
     };
-}, undefined, "inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink", {
+}, undefined, "inline-flex min-w-pill shrink-0 items-center justify-center gap-gutter tier-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink", {
     tone: {
         default: "bg-fill text-fg";
         accent: "bg-primary text-primary-fg";