@signal9/era-ui 30.8.0 → 32.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
@@ -69,9 +73,13 @@ source uses it where a name exists.
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
 | `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
-| `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. |
+| `surface-backdrop` | the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface. |
+| `material-popover` | a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically. |
+| `material-panel` | a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically. |
+| `pressable` | the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale. |
+| `tier-icon` `tier-pill` `tier-chip` `tier-control` `tier-bar` | — |
 | `h-line` | the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box. |
+| `era-track-well` | instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right. |
 | `era-skeleton-pulse` | — |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
@@ -92,12 +100,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
 
@@ -450,64 +458,104 @@ Declared in `index.css`.
 }
 ```
 
-## glass-blur
+## surface-backdrop
 
-**Use it for:** 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.
+**Use it for:** the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
 
-Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
-is a registered utility, gated to glass subtrees.
+Declared in `index.css`.
 
-It lives HERE rather than in surfaces/glass.css, where a surface's own
-chrome would naturally sit, because glass.css is imported into a cascade
-layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
-in their surface file; surface-scoped UTILITIES have to come out.
+```css
+@utility surface-backdrop {
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
+
+## material-popover
+
+**Use it for:** a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
 
 Declared in `index.css`.
 
 ```css
-@utility` cannot be nested inside one. Surface-scoped RULES stay
- * in their surface file; surface-scoped UTILITIES have to come out.
- *
- * @use 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. */
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-	}
+@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);
 }
 ```
 
-## rounded-row
+## material-panel
 
-**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.
+**Use it for:** a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
 
-THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.
+Declared in `index.css`.
 
-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.
+```css
+@utility material-panel {
+	background-color: var(--era-surface-bg);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
 
-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.
+## pressable
 
-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 it for:** the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
 
 Declared in `index.css`.
 
 ```css
-@utility rounded-row {
-	border-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));
+@utility pressable {
+	&:active {
+		box-shadow: var(--era-shadow-pressed);
+	}
+
+	&:active > [data-era-press-content] {
+		translate: var(--era-press-effective-x, var(--era-press-sink-x))
+			var(--era-press-effective-y, var(--era-press-sink-y));
+	}
+}
+```
+
+## tier-icon · tier-pill · tier-chip · tier-control · tier-bar
+
+BOUNDED GEOMETRY — height and radius are one decision.
+
+A tier is a geometric type, not two classes a caller must remember to keep in
+sync. `tier-control` establishes h-control AND rd-control; the radius ladder
+then guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.
+Width remains the component's decision: a row stretches, a button adds
+min-w-control, and a square control adds w-control.
+
+Declared in `index.css`.
+
+```css
+@utility tier-icon {
+	height: var(--era-h-icon);
+	border-radius: var(--era-rd-icon);
+}
+
+@utility tier-pill {
+	height: var(--era-h-pill);
+	border-radius: var(--era-rd-pill);
+}
+
+@utility tier-chip {
+	height: var(--era-h-chip);
+	border-radius: var(--era-rd-chip);
+}
+
+@utility tier-control {
+	height: var(--era-h-control);
+	border-radius: var(--era-rd-control);
+}
+
+@utility tier-bar {
+	height: var(--era-h-bar);
+	border-radius: var(--era-rd-bar);
 }
 ```
 
@@ -532,6 +580,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.
@@ -957,8 +1049,8 @@ Declared in `index.css`.
 ## bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)
 
 Surface fills — bg-well is the surface's own resting fill (pairs with
-shadow-well for recessed chrome), bg-elevated the raised tier (pairs with
-shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+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.
 
@@ -1021,7 +1113,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 +1130,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 +1209,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 +1230,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/os/notification-center.svelte

@@ -51,7 +51,7 @@
 			transition:eraFly={{ x: 320, duration: 200 }}
 			style:top="{pm.insets.top}px"
 			style:bottom="{pm.insets.bottom}px"
-			class="absolute right-0 flex w-80 flex-col bg-well shadow-lg glass-blur"
+			class="absolute right-0 flex w-80 flex-col material-panel"
 		>
 			<header
 				class="flex shrink-0 items-center gap-gutter border-b border-divider-faded px-card py-inset-chip"

package/dist/os/taskbar.svelte

@@ -210,7 +210,7 @@
 		// shadow-lg only when FLOATING. Flush, the bar's edge is its own
 		// border-b/border-t against the content it docks beside, and the ring would
 		// double it on exactly that side — the one edge a flush bar exposes.
-		'absolute flex h-bar items-center gap-gutter bg-elevated px-gutter glass-blur',
+		'absolute flex h-bar items-center gap-gutter bg-elevated px-gutter surface-backdrop',
 		floating && 'shadow-lg',
 		floating
 			? cn('inset-x-gutter rounded-bar', position === 'top' ? 'top-gutter' : 'bottom-gutter')

package/dist/os/toast.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div
-	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar bg-elevated p-card shadow-lg glass-blur"
+	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar material-popover p-card"
 >
 	<span class={cn('absolute inset-y-menu left-menu w-1 rounded-full', accent[n.tone])}></span>
 	{#if n.icon}

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

@@ -36,10 +36,9 @@
  * surfaces so a [data-surface] block can override --era-ease as a delta.
  * UNLAYERED: carries the prefers-reduced-motion !important — see above. */
 @import './motion.css';
-/* Surfaces: base contract first, then each surface's deltas. Order matters —
- * the base block and a surface's block target the same element, and the
- * surface's declarations must win. Same layer, so source order still decides. */
-@import './surfaces/base.css' layer(era.tokens);
+/* Material contract first, then complete surface implementations. */
+@import './surfaces/contract.css' layer(era.tokens);
+@import './surfaces/flat.css' layer(era.tokens);
 @import './surfaces/glass.css' layer(era.tokens);
 @import './surfaces/bevel.css' layer(era.tokens);
 /* UNLAYERED: carries the font-axis !important — see above. */
@@ -443,50 +442,76 @@
 	text-box: trim-both ex alphabetic;
 }
 
-/* Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
- * is a registered utility, gated to glass subtrees.
- *
- * It lives HERE rather than in surfaces/glass.css, where a surface's own
- * chrome would naturally sit, because glass.css is imported into a cascade
- * layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
- * in their surface file; surface-scoped UTILITIES have to come out.
- *
- * @use 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. */
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+/* 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));
 	}
 }
 
-/* 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 +675,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   */
@@ -754,8 +779,8 @@
 	--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 (pairs with
-	 * shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+	 * 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);
@@ -805,6 +830,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/styles/motion.css

@@ -22,7 +22,7 @@
  *
  * Surfaces may override --era-ease (or a component-scoped ease token) as a
  * delta — motion.css is imported BEFORE surfaces/, so a [data-surface] block
- * wins. See surfaces/base.css for the surface-animation recipe.
+ * wins. Surface implementations may override only the easing primitive.
  */
 
 /* Named easing curves — design constants, referenced by the levels below. */

package/dist/styles/prose.css

@@ -372,7 +372,7 @@
 /* NO ::selection rule here, deliberately.
  *
  * era owns text selection as a surface token contract — --era-selection-bg /
- * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
+ * -fg / -shadow (surfaces/contract.css), which is how flat gets inverse video,
  * glass a glowing wash, and bevel an opaque accent bar. This file used to
  * override it with `background: var(--color-4)` and no `color`, which threw
  * all of that away AND left body text on a mid-scale grey: the band barely