@signal9/era-ui 8.0.0 → 9.0.0

package/dist/generated-docs/llms-full.txt

@@ -61,17 +61,16 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
 - `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-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
-- `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
-- `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
-- `px-sm · px-md · px-lg` — tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
+- `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).
+- `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.
 - `gap-gutter · p-gutter · px-gutter · py-gutter` — the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).
-- `p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
-- `px-pill-xxs · px-pill-sm` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
-- `px-field` — text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+- `p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.
+- `px-pill · px-chip` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
+- `px-field` — text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).
 - `p-panel · p-card` — optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.
 - `p-content` — A content panel always follows a section header ROW, and that row already
-- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.
 - `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".
 - `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.
 
@@ -127,8 +126,8 @@ The CSS classes era ships alongside the components — links, ink-centred text,
 
 ## Overview
 
-era's styling API is pure class names — write `h-md rounded-md px-md shadow`,
-never the `h-(--era-h-md)` var-class spelling. Everything below rides along
+era's styling API is pure class names — write `h-control rounded-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
@@ -136,7 +135,7 @@ import "@sig-nine/era-ui/css";
 ```
 
 ```svelte
-<button class="h-md rounded-md px-inset-md shadow text-body">era styled</button>
+<button class="h-control rounded-control px-inset-control shadow text-body">era styled</button>
 ```
 
 Alongside the `@utility` classes referenced below, era registers named theme
@@ -146,8 +145,8 @@ motion):
 
 | Stock-looking class | What it resolves to |
 |---|---|
-| `rounded-xs/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |
-| `rounded-item` | menu-row radius, concentric inside a `rounded-md` panel |
+| `rounded-icon/xxs/sm/md/lg` | 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 |
@@ -157,7 +156,7 @@ motion):
 
 Deliberate gaps: `w-*`/`min-w-*` tier names would shadow Tailwind's container
 scale (`min-w-md` stays 28rem), and the concentric-inset tokens are advanced
-enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
+enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hatch.
 
 | Utility | Use it for |
 |---|---|
@@ -170,17 +169,16 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `era-token-ink` `era-ink-center` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies). |
 | `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-xs` `h-xxs` `h-sm` `h-md` `h-lg` | the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*). |
-| `min-h-xs` `min-h-xxs` `min-h-sm` `min-h-md` `min-h-lg` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg). |
-| `size-xs` `size-xxs` `size-sm` `size-md` `size-lg` | a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face. |
-| `px-sm` `px-md` `px-lg` | tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*). |
+| `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). |
+| `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. |
 | `gap-gutter` `p-gutter` `px-gutter` `py-gutter` | the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows). |
-| `p-inset-xxs` `p-inset-sm` `p-inset-md` `px-inset-xxs` `px-inset-sm` `px-inset-md` `py-inset-xxs` `py-inset-sm` `py-inset-md` | text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's. |
-| `px-pill-xxs` `px-pill-sm` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
-| `px-field` | text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px). |
+| `p-inset-pill` `p-inset-chip` `p-inset-control` `px-inset-pill` `px-inset-chip` `px-inset-control` `py-inset-pill` `py-inset-chip` `py-inset-control` | text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's. |
+| `px-pill` `px-chip` | pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset). |
+| `px-field` | text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px). |
 | `p-panel` `p-card` | optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen. |
 | `p-content` | — |
-| `p-menu` | menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows. |
+| `p-menu` | menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows. |
 | `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". |
 | `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. |
 
@@ -468,98 +466,80 @@ Declared in `index.css`.
 }
 ```
 
-## h-xs · h-xxs · h-sm · h-md · h-lg
+## h-icon · h-pill · h-chip · h-control · h-bar
 
-**Use it for:** the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
+**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-xs {
-	height: var(--era-h-xs);
+@utility h-icon {
+	height: var(--era-h-icon);
 }
-@utility h-xxs {
-	height: var(--era-h-xxs);
+@utility h-pill {
+	height: var(--era-h-pill);
 }
-@utility h-sm {
-	height: var(--era-h-sm);
+@utility h-chip {
+	height: var(--era-h-chip);
 }
-@utility h-md {
-	height: var(--era-h-md);
+@utility h-control {
+	height: var(--era-h-control);
 }
-@utility h-lg {
-	height: var(--era-h-lg);
+@utility h-bar {
+	height: var(--era-h-bar);
 }
 ```
 
-## min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg
+## 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-lg).
+**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-xs {
-	min-height: var(--era-h-xs);
+@utility min-h-icon {
+	min-height: var(--era-h-icon);
 }
-@utility min-h-xxs {
-	min-height: var(--era-h-xxs);
+@utility min-h-pill {
+	min-height: var(--era-h-pill);
 }
-@utility min-h-sm {
-	min-height: var(--era-h-sm);
+@utility min-h-chip {
+	min-height: var(--era-h-chip);
 }
-@utility min-h-md {
-	min-height: var(--era-h-md);
+@utility min-h-control {
+	min-height: var(--era-h-control);
 }
-@utility min-h-lg {
-	min-height: var(--era-h-lg);
+@utility min-h-bar {
+	min-height: var(--era-h-bar);
 }
 ```
 
-## size-xs · size-xxs · size-sm · size-md · size-lg
+## size-icon · size-pill · size-chip · size-control · size-bar
 
-**Use it for:** a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
+**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-xs {
-	width: var(--era-h-xs);
-	height: var(--era-h-xs);
+@utility size-icon {
+	width: var(--era-h-icon);
+	height: var(--era-h-icon);
 }
-@utility size-xxs {
-	width: var(--era-h-xxs);
-	height: var(--era-h-xxs);
+@utility size-pill {
+	width: var(--era-h-pill);
+	height: var(--era-h-pill);
 }
-@utility size-sm {
-	width: var(--era-h-sm);
-	height: var(--era-h-sm);
+@utility size-chip {
+	width: var(--era-h-chip);
+	height: var(--era-h-chip);
 }
-@utility size-md {
-	width: var(--era-h-md);
-	height: var(--era-h-md);
+@utility size-control {
+	width: var(--era-h-control);
+	height: var(--era-h-control);
 }
-@utility size-lg {
-	width: var(--era-h-lg);
-	height: var(--era-h-lg);
-}
-```
-
-## px-sm · px-md · px-lg
-
-**Use it for:** tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
-
-Declared in `index.css`.
-
-```css
-@utility px-sm {
-	padding-inline: var(--era-px-sm);
-}
-@utility px-md {
-	padding-inline: var(--era-px-md);
-}
-@utility px-lg {
-	padding-inline: var(--era-px-lg);
+@utility size-bar {
+	width: var(--era-h-bar);
+	height: var(--era-h-bar);
 }
 ```
 
@@ -584,60 +564,60 @@ Declared in `index.css`.
 }
 ```
 
-## p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md
+## p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control
 
-**Use it for:** text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
+**Use it for:** text-symmetric content padding — (tier − text)/2, the inset that vertically centers 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
-@utility p-inset-xxs {
-	padding: var(--era-inset-xxs);
+@utility p-inset-pill {
+	padding: var(--era-inset-pill);
 }
-@utility p-inset-sm {
-	padding: var(--era-inset-sm);
+@utility p-inset-chip {
+	padding: var(--era-inset-chip);
 }
-@utility p-inset-md {
-	padding: var(--era-inset-md);
+@utility p-inset-control {
+	padding: var(--era-inset-control);
 }
-@utility px-inset-xxs {
-	padding-inline: var(--era-inset-xxs);
+@utility px-inset-pill {
+	padding-inline: var(--era-inset-pill);
 }
-@utility px-inset-sm {
-	padding-inline: var(--era-inset-sm);
+@utility px-inset-chip {
+	padding-inline: var(--era-inset-chip);
 }
-@utility px-inset-md {
-	padding-inline: var(--era-inset-md);
+@utility px-inset-control {
+	padding-inline: var(--era-inset-control);
 }
-@utility py-inset-xxs {
-	padding-block: var(--era-inset-xxs);
+@utility py-inset-pill {
+	padding-block: var(--era-inset-pill);
 }
-@utility py-inset-sm {
-	padding-block: var(--era-inset-sm);
+@utility py-inset-chip {
+	padding-block: var(--era-inset-chip);
 }
-@utility py-inset-md {
-	padding-block: var(--era-inset-md);
+@utility py-inset-control {
+	padding-block: var(--era-inset-control);
 }
 ```
 
-## px-pill-xxs · px-pill-sm
+## px-pill · px-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-xxs {
-	padding-inline: var(--era-pill-xxs);
+@utility px-pill {
+	padding-inline: var(--era-pill-px);
 }
-@utility px-pill-sm {
-	padding-inline: var(--era-pill-sm);
+@utility px-chip {
+	padding-inline: var(--era-chip-px);
 }
 ```
 
 ## px-field
 
-**Use it for:** text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+**Use it for:** text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).
 
 Declared in `index.css`.
 
@@ -655,25 +635,25 @@ Declared in `index.css`.
 
 ```css
 @utility p-panel {
-	padding: var(--era-pad-sm);
+	padding: var(--era-pad-panel);
 }
 @utility p-card {
-	padding: var(--era-pad-md);
+	padding: var(--era-pad-card);
 }
 ```
 
 ## p-content
 
 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-lg bar, so there
-is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+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-content-p. The header row already supplies (h-lg − text)/2 of
+which is --era-content-p. 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.
@@ -687,13 +667,13 @@ Declared in `index.css`.
 ```css
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));
 }
 ```
 
 ## p-menu
 
-**Use it for:** menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+**Use it for:** menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.
 
 Declared in `index.css`.
 
@@ -919,7 +899,7 @@ Inherits all props from `HTMLAttributes<HTMLSpanElement>`.
 
 - Non-interactive. For dismissible tokens use `Chip`. For labelled pairs use `KV`.
 - Uses the `xxs` tier tokens (height, radius, inset).
-- Inter-icon gap tightens to `--era-inset-xxs` when an SVG is present.
+- Inter-icon gap tightens to `--era-inset-pill` when an SVG is present.
 
 <!-- end: badge -->
 
@@ -988,8 +968,8 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
 | `content?` | `'tier' \| 'xxs'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
-stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
-the compact pairing (xxs pills/fields in an sm or md bar). |
+stay concentric to them. `tier` (default) is one tier smaller; `pill` is
+the compact pairing (pills/fields in an sm or md bar). |
 | `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: outset divider below, bottom rd-md. |
 | `children?` | `Snippet` | — | — |
 
@@ -1162,7 +1142,7 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'xxs'` | `'sm'` | `sm` (default) is the standalone free chip; `xxs` is the smaller pill
+| `size?` | `'sm' \| 'xxs'` | `'sm'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
 | `children?` | `Snippet` | — | — |
@@ -2953,7 +2933,7 @@ Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
-| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `xxs` is badge height — for compact chrome where the field
+| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `pill` is badge height — for compact chrome where the field
 sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |

package/dist/generated-docs/llms.txt

@@ -7,17 +7,17 @@
 Every measurement in era derives from one atom (`--era-sp`) through a fixed ladder. You never pick a number; you pick a TIER, and the number follows from the density axis. Markup that hardcodes `h-[34px]`, `text-[13px]`, `p-2` or `gap-1.5` is wrong even when it looks right at the default density — it stops tracking the axis the moment a subtree re-tiers.
 
 **1. Height comes from the tier ladder, never from a pixel value.**
-`h-xs` (icon, 14px @dense) · `h-xxs` (nested pill, 18) · `h-sm` (standalone pill, 22) · `h-md` (control/row, 24) · `h-lg` (bar/header, 32). A square is `size-*` on the same ladder; `size-xs` IS the icon size beside body text.
+`h-icon` (icon, 14px @dense) · `h-pill` (nested pill, 18) · `h-chip` (standalone pill, 22) · `h-control` (control/row, 24) · `h-bar` (bar/header, 32). A square is `size-*` on the same ladder; `size-icon` IS the icon size beside body text.
 
 **2. Padding is geometric or optical — the container tells you which.**
-A container with a BOUNDED tier height (bar, row, trigger, pill) takes geometric padding: `px-inset-md` / `px-sm` / `px-pill-sm`, all derived from `(tier − text)/2`. A container with UNBOUNDED height (card, dialog, panel, page section) takes optical padding: `p-panel` · `p-card` · `p-content`, which grow super-linearly so whitespace keeps pace as controls loosen. Never pad a card with a tier inset, and never pad a row with `p-card`.
+A container with a BOUNDED tier height (bar, row, trigger, pill) takes geometric padding: `px-inset-control` / `px-gutter` / `px-chip`, all derived from `(tier − text)/2`. A container with UNBOUNDED height (card, dialog, panel, page section) takes optical padding: `p-panel` · `p-card` · `p-content`, which grow super-linearly so whitespace keeps pace as controls loosen. Never pad a card with a tier inset, and never pad a row with `p-card`.
 
-**3. The even-gap law.** Inside any container, `(container_height − child_height) / 2` must equal the gap on ALL four sides. A `h-xxs` control in a `h-md` bar sits on a 3px wall at dense — so the bar's padding AND the gap between its children are that same value. `gap-gutter` / `p-gutter` is the standard inter-element gap (sp/2); the concentric insets (`p-inset-*`) are the text-symmetric ones.
+**3. The even-gap law.** Inside any container, `(container_height − child_height) / 2` must equal the gap on ALL four sides. A `h-pill` control in a `h-control` bar sits on a 3px wall at dense — so the bar's padding AND the gap between its children are that same value. `gap-gutter` / `p-gutter` is the standard inter-element gap (sp/2); the concentric insets (`p-inset-*`) are the text-symmetric ones.
 
 The same law in its simplest form, for containers with no tier: **a box pads its content equally at top and bottom.** Horizontal asymmetry is often deliberate (a bar's leading side sits at the text inset while its trailing side keeps the concentric wall); vertical asymmetry is a bug — nothing should sit closer to its top edge than its bottom, and era audits for it.
 
 **4. Radius follows the corner REGION's tier, not the box's size.**
-`rounded-xs · xxs · sm · md · lg` walk the same ladder as the heights, and the ladder is built so that `rd_outer − rd_inner` equals the concentric gap — nested corners then share a centre of curvature automatically. A big panel whose corner is formed by an `h-md` bar takes `rounded-md`, not `rounded-lg`. Never hardcode a radius: `data-corners="square"` collapses the tokens to 0 and a literal value would survive it.
+`rounded-icon · rounded-pill · rounded-chip · rounded-control · rounded-bar` walk the same ladder as the heights, and the ladder is built so that `rd_outer − rd_inner` equals the concentric gap — nested corners then share a centre of curvature automatically. A big panel whose corner is formed by an `h-control` bar takes `rounded-control`, not `rounded-bar`. Never hardcode a radius: `data-corners="square"` collapses the tokens to 0 and a literal value would survive it.
 
 **5. Single-line control text carries `era-text-trim`; wrapping text carries `leading-body`.**
 Flexbox centres the LINE BOX, not the ink, and misses by up to ~2px. `era-text-trim` fixes it — on FIXED-HEIGHT, NON-EDITABLE elements only. Two hard prohibitions, both of which produce silently chopped or mis-centred glyphs:
@@ -99,17 +99,16 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
 - `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-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
-- `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
-- `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
-- `px-sm · px-md · px-lg` — tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).
+- `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).
+- `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.
 - `gap-gutter · p-gutter · px-gutter · py-gutter` — the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).
-- `p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.
-- `px-pill-xxs · px-pill-sm` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
-- `px-field` — text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).
+- `p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control` — text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.
+- `px-pill · px-chip` — pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).
+- `px-field` — text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).
 - `p-panel · p-card` — optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.
 - `p-content` — A content panel always follows a section header ROW, and that row already
-- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.
+- `p-menu` — menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.
 - `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".
 - `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.