@signal9/era-ui 30.8.0 → 32.0.0

package/dist/ui/input/variants.d.ts

@@ -60,8 +60,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -128,8 +128,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -196,8 +196,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No

package/dist/ui/input/variants.js

@@ -63,8 +63,8 @@ export const inputVariants = tv({
          *   on this tier read as one family.
          */
         size: {
-            control: 'h-control rounded-control px-field',
-            pill: 'h-pill rounded-pill px-pill'
+            control: 'tier-control px-field',
+            pill: 'tier-pill px-pill'
         },
         /**
          * Height OVERRIDES, for the fields that are not their tier's height. No

package/dist/ui/kv/kv.svelte

@@ -24,7 +24,7 @@
 		// shrink-0 + nowrap like Badge/Chip: the overflow-hidden here is for the
 		// key cell's squared corners, not a licence to crush — squeezed, this pill
 		// clipped its value instead of bleeding it, which is quieter but no truer.
-		'inline-flex h-pill shrink-0 items-center overflow-hidden rounded-pill bg-fill font-mono text-body leading-none whitespace-nowrap shadow-sm',
+		'inline-flex tier-pill shrink-0 items-center overflow-hidden bg-fill font-mono text-body leading-none whitespace-nowrap shadow-sm',
 		className
 	)}
 	{...restProps}

package/dist/ui/link-preview/link-preview-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'z-overlay max-w-xs rounded-control bg-elevated p-inset-control text-body shadow-lg glass-blur',
+			'z-overlay max-w-xs rounded-control material-popover p-inset-control text-body',
 			className
 		)}
 		{sideOffset}

package/dist/ui/menubar/menubar-content.svelte

@@ -33,7 +33,7 @@
 		// floating menu, like the context menu it should match: full radius, a
 		// gutter of air, shadow doing the separating.
 		class={cn(
-			'z-overlay w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
+			'z-overlay w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-control material-popover p-menu',
 			className
 		)}
 		{sideOffset}

package/dist/ui/menubar/menubar-root.svelte

@@ -32,6 +32,6 @@
 <Menubar.Root
 	bind:ref
 	bind:value
-	class={cn('flex h-bar items-center rounded-bar bg-well px-gutter shadow-sm', className)}
+	class={cn('flex tier-bar items-center bg-well px-gutter shadow-sm', className)}
 	{...restProps}
 />

package/dist/ui/menubar/menubar-sub-content.svelte

@@ -18,10 +18,7 @@
 	<Menubar.SubContent
 		bind:ref
 		{...relay?.attrs}
-		class={cn(
-			'z-overlay w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
-			className
-		)}
+		class={cn('z-overlay w-max overflow-hidden rounded-control material-popover p-menu', className)}
 		{sideOffset}
 		{...restProps}
 	>

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

@@ -13,7 +13,7 @@
 <Menubar.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control items-center gap-gutter rounded-control px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50 has-[svg]:gap-inset-control data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
+		'flex tier-control items-center gap-gutter px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50 has-[svg]:gap-inset-control data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}

package/dist/ui/meter/meter.svelte

@@ -239,8 +239,7 @@
 			THE ORDER IS CURRENTLY UNOBSERVABLE, and that is worth knowing rather
 			than discovering. Swapping these two changes no pixel: the buffer is
 			the fill's OWN paint at 30%, and the same colour composited over
-			itself is that colour. Checked by swapping them and re-running
-			meter-buffer.spec.ts, which stayed green. So the order is kept for
+			itself is that colour. A control swap was pixel-identical. So the order is kept for
 			correctness — it is what makes the contract true for any future paint
 			that is not derived from the fill — and not because a test can see it.
 			Do not read the passing spec as covering it.

package/dist/ui/nav/nav-bar.svelte

@@ -5,12 +5,12 @@
 	// Bar's geometry, imported rather than restated. A re-export here would be a
 	// second name for one thing; anyone who wants the variants imports them from
 	// Bar, which is where they are defined.
-	import { barVariants } from '../bar/bar.svelte';
+	import { barVariants, resolveBarContent, type BarContent, type BarSize } from '../bar/bar.svelte';
 
 	let {
 		ref = $bindable(null),
 		size = 'bar',
-		content = 'tier',
+		content,
 		divider = false,
 		label = 'Main',
 		children,
@@ -21,7 +21,7 @@
 		/** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
 		size?: 'chip' | 'control' | 'bar';
 		/** Tier of the items inside, so the wall stays concentric to them. */
-		content?: 'tier' | 'pill';
+		content?: BarContent;
 		/**
 		 * Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
 		 * because a nav that sits in a page already has whatever separation the
@@ -40,6 +40,8 @@
 		label?: string;
 		children?: Snippet;
 	} = $props();
+
+	const resolvedContent = $derived(resolveBarContent(size as BarSize, content));
 </script>
 
 <!--
@@ -53,7 +55,10 @@
 <nav
 	bind:this={ref}
 	aria-label={label}
-	class={cn(barVariants({ size, content, divider }), className)}
+	data-era-geometry={divider ? 'docked' : 'nested'}
+	data-era-tier={size}
+	data-era-contains={resolvedContent}
+	class={cn(barVariants({ size, content: resolvedContent, divider }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/ui/nav/nav-bar.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type BarContent } from '../bar/bar.svelte';
 type $$ComponentProps = HTMLAttributes<HTMLElement> & {
     ref?: HTMLElement | null;
     /** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
     size?: 'chip' | 'control' | 'bar';
     /** Tier of the items inside, so the wall stays concentric to them. */
-    content?: 'tier' | 'pill';
+    content?: BarContent;
     /**
      * Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
      * because a nav that sits in a page already has whatever separation the

package/dist/ui/nav/nav-item.svelte

@@ -214,6 +214,7 @@
 >
 	<span
 		data-button-content
+		data-era-press-content
 		class={cn(
 			'inline-flex items-center justify-center [gap:inherit]',
 			// Same reason Button gives: era-label-ink blockifies the box and trims

package/dist/ui/pane/pane-root.svelte

@@ -530,18 +530,9 @@
 		// content until the grip sets a size, and size containment would collapse
 		// that to zero) and NOT `paint` (the resize handles deliberately bleed
 		// outward, and paint containment clips them).
-		// --era-container-rd publishes this pane's ACTUAL radius, so any
-		// `rounded-row` descendant derives from the pane instead of from the
-		// utility's fallback. It used to be unset, and that fallback was silently
-		// deciding the geometry of every list in the app.
-		//
-		// The radius is rd-control and stays there. It was briefly raised to rd-bar
-		// to make `rounded-row` produce rd-control for the nav rows — which worked,
-		// and broke the corner it is measured against: the close button sits 4px
-		// from this corner, so at rd-bar it needed a 8.056 radius and had a pill's
-		// 5.056. Chasing the container was the wrong end. A row should carry the
-		// radius of its OWN tier, which is what the command items do now.
-		'group/pane absolute isolate flex flex-col rounded-control border border-divider bg-elevated shadow-lg glass-blur [contain:layout_style] [--era-container-rd:var(--era-rd-control)]',
+		// The pane is unbounded chrome. Bounded descendants carry their own tier;
+		// no inherited radius is allowed to rewrite a row from the outside in.
+		'group/pane absolute isolate flex flex-col rounded-control border border-divider material-popover [contain:layout_style]',
 		// Auto-size to content until an explicit size is set (by the grip or a preset).
 		size ? '' : 'w-max',
 		// While Ctrl is held the whole pane is grabbable: a grab cursor hints it, and

package/dist/ui/pane/pane-tab.svelte

@@ -23,7 +23,7 @@
 		// trim pulls the box up to the alphabetic baseline, so the clip then slices
 		// every descender (the "logs" g, the "history" y). [text-box:normal] cancels
 		// it; leading-none + the strip's items-center still centre the label.
-		'flex h-pill cursor-pointer items-center gap-gutter rounded-pill px-pill text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-highlight data-[state=active]:bg-hover data-[state=active]:text-bright',
+		'flex tier-pill cursor-pointer items-center gap-gutter px-pill text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-highlight data-[state=active]:bg-hover data-[state=active]:text-bright',
 		className
 	)}
 	{...restProps}

package/dist/ui/popover/popover-content.svelte

@@ -22,7 +22,7 @@
 	// floating menu, like the context menu it should match: full radius, a
 	// gutter of air, shadow doing the separating.
 	class={cn(
-		'z-overlay w-max min-w-(--bits-popover-anchor-width) overflow-hidden rounded-control bg-elevated p-card shadow-lg glass-blur',
+		'z-overlay w-max min-w-(--bits-popover-anchor-width) overflow-hidden rounded-control material-popover p-card',
 		className
 	)}
 	{sideOffset}

package/dist/ui/provider/surfaces.d.ts

@@ -22,7 +22,7 @@ export declare const surfaceRegistry: {
     readonly flat: {
         readonly label: "Flat";
         readonly description: "Solid fills, no chrome — the quiet default.";
-        readonly css: "base.css";
+        readonly css: "flat.css";
     };
     readonly glass: {
         readonly label: "Glass";

package/dist/ui/provider/surfaces.js

@@ -2,7 +2,7 @@ export const surfaceRegistry = {
     flat: {
         label: 'Flat',
         description: 'Solid fills, no chrome — the quiet default.',
-        css: 'base.css'
+        css: 'flat.css'
     },
     glass: {
         label: 'Glass',

package/dist/ui/select/select-content.svelte

@@ -29,7 +29,7 @@
 	// 2px frame that stops a full-width highlight from breaking their chrome.
 	// A fixed gutter was tried here and rejected: it padded flat menus too.
 	class={cn(
-		'z-overlay w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		'z-overlay w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-control material-popover p-menu data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 		className
 	)}
 	{sideOffset}

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

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

package/dist/ui/sheet/sheet-content.svelte

@@ -11,7 +11,7 @@
 	// the viewport boundary, so only the open edge is visible and it was the
 	// thick one.
 	export const sheetVariants = tv({
-		base: 'fixed z-overlay flex flex-col bg-well shadow-lg glass-blur',
+		base: 'fixed z-overlay material-panel flex flex-col',
 		variants: {
 			// The two axes meet at the corners: the SIDE picks which corners are
 			// detached from the screen edge, the HEADER picks their radius. Stated

package/dist/ui/sheet/sheet-content.svelte.d.ts

@@ -17,7 +17,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
         true: "[--sheet-rd:var(--era-rd-control)]";
         false: "[--sheet-rd:var(--era-rd-bar)] gap-gutter overflow-y-auto p-card";
     };
-}, undefined, "fixed z-overlay flex flex-col bg-well shadow-lg glass-blur", {
+}, undefined, "fixed z-overlay material-panel flex flex-col", {
     side: {
         top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
         bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)";

package/dist/ui/slider/slider-thumb.svelte

@@ -8,7 +8,7 @@
 <Slider.Thumb
 	bind:ref
 	class={cn(
-		"relative block size-icon cursor-pointer rounded-icon bg-fg shadow-sm transition-transform duration-base will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
+		"relative block tier-icon w-icon cursor-pointer bg-fg shadow-sm transition-transform duration-base will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
 		className
 	)}
 	{...restProps}

package/dist/ui/step/step-summary.svelte

@@ -26,7 +26,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full min-w-0 era-interactive cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-muted transition-colors duration-base ease-base hover:text-fg',
+		'flex tier-control w-full min-w-0 era-interactive cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-muted transition-colors duration-base ease-base hover:text-fg',
 		className
 	)}
 	{...restProps}

package/dist/ui/switch/switch.svelte

@@ -32,7 +32,7 @@
 		// component that had worked around it with the border below rather than
 		// moving tier. This moves tier; the border stays, since a track needs a
 		// closed shape at chip size on every surface, not just the flat one.
-		'inline-flex h-chip w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center rounded-chip border border-divider bg-field shadow-well hover:bg-highlight data-[state=checked]:bg-fg',
+		'inline-flex tier-chip w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center border border-divider bg-field shadow-well hover:bg-highlight data-[state=checked]:bg-fg',
 		className
 	)}
 	{...restProps}
@@ -41,8 +41,8 @@
 	     may retune the feel by overriding --era-ease in its [data-surface]
 	     block; a surface wanting a different STRATEGY (e.g. glass crossfade
 	     vs bevel track-slide) scopes a rule to its own surface — see the
-	     surface-animation recipe in surfaces/base.css. -->
+	     material contract in surfaces/contract.css. -->
 	<Switch.Thumb
-		class="pointer-events-none block size-icon -translate-x-[calc(var(--era-h-icon)/2)] rounded-icon bg-fg transition-transform duration-base ease-base data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
+		class="pointer-events-none block tier-icon w-icon -translate-x-[calc(var(--era-h-icon)/2)] bg-fg transition-transform duration-base ease-base data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
 	/>
 </Switch.Root>

package/dist/ui/time-field/time-field-segment.svelte

@@ -18,7 +18,7 @@
 <TimeField.Segment
 	bind:ref
 	class={cn(
-		'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'era-token-ink tier-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-segment.svelte

@@ -22,7 +22,7 @@
 <TimeRangeField.Segment
 	bind:ref
 	class={cn(
-		'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'era-token-ink tier-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/timeline/timeline-step.svelte

@@ -73,7 +73,7 @@
 
 	<div
 		class={cn(
-			'flex h-control items-center justify-end gap-inset-control rounded-control px-inset-control shadow-sm outline outline-divider',
+			'flex tier-control items-center justify-end gap-inset-control px-inset-control shadow-sm outline outline-divider',
 			tone.bar,
 			className
 		)}

package/dist/ui/toggle-group/toggle-group-item.svelte

@@ -14,8 +14,8 @@
 		variants: {
 			variant: {
 				plain:
-					'h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed',
-				segmented: 'h-chip min-w-chip rounded-chip px-inset-chip'
+					'pressable min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight',
+				segmented: 'min-w-chip tier-chip px-inset-chip'
 			}
 		},
 		defaultVariants: { variant: 'plain' }

package/dist/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,17 +1,17 @@
 export declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "pressable min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined, "inline-flex items-center justify-center text-body text-fg era-interactive not-has-[svg]:era-label-ink not-has-[svg]:text-center hover:bg-highlight focus:outline-none disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed data-[state=on]:hover:shadow-pressed", {
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "pressable min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "pressable min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined>>;
 import { ToggleGroup } from 'bits-ui';

package/dist/ui/toggle-group/toggle-group-root.svelte

@@ -10,8 +10,7 @@
 		variants: {
 			variant: {
 				plain: 'gap-gutter',
-				segmented:
-					'h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well'
+				segmented: 'gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well'
 			}
 		},
 		defaultVariants: { variant: 'plain' }

package/dist/ui/toggle-group/toggle-group-root.svelte.d.ts

@@ -1,17 +1,17 @@
 export declare const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, "inline-flex items-center", {
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined>>;
 import { ToggleGroup } from 'bits-ui';

package/dist/ui/tooltip/tooltip-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'z-overlay inline-flex h-pill items-center gap-gutter rounded-pill bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
+			'z-overlay inline-flex tier-pill items-center gap-gutter material-popover px-inset-pill text-body leading-none whitespace-nowrap text-fg has-[svg]:gap-inset-pill',
 			className
 		)}
 		{sideOffset}

package/dist/ui/tree/tree-item.svelte

@@ -54,7 +54,7 @@
 	data-depth={item.depth}
 	style="padding-left: calc(var(--spacing-gutter) + {item.depth} * var(--era-h-control) / 2)"
 	class={cn(
-		'flex h-control era-interactive cursor-default items-center gap-gutter rounded-control pr-icon-inset-control text-body',
+		'flex tier-control era-interactive cursor-default items-center gap-gutter pr-icon-inset-control text-body',
 		'hover:bg-highlight focus:outline-none focus-visible:bg-highlight',
 		selected ? 'bg-fill text-bright' : 'text-fg',
 		item.node.disabled && 'pointer-events-none opacity-50',

package/dist/ui/video-player/video-player.svelte

@@ -828,7 +828,7 @@
 	// against the mute button below. Visibility is in the scoped style block.
 	const volumeSleeveClass = $derived(
 		resolvedVolumeOrientation === 'vertical'
-			? 'absolute bottom-full left-1/2 z-20 h-[calc(var(--era-h-bar)*3)] w-control -translate-x-1/2 rounded-t-control bg-hover shadow-sm glass-blur'
+			? 'surface-backdrop absolute bottom-full left-1/2 z-20 h-[calc(var(--era-h-bar)*3)] w-control -translate-x-1/2 rounded-t-control bg-hover shadow-sm'
 			: 'relative h-chip w-[calc(var(--era-h-control)*3)]'
 	);
 	// Slider IS the visible track. Range and Thumb (both bg-fg) live inside
@@ -1058,7 +1058,7 @@
 						-->
 						<span
 							aria-hidden="true"
-							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-pill -translate-x-1/2 items-center gap-gutter rounded-pill bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
+							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex tier-pill -translate-x-1/2 items-center gap-gutter material-popover px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg"
 						>
 							<span class="tabular-nums">{hoverTimeLabel}</span>
 							{#if hoverChapter}

package/dist/utils/tw-merge-config.d.ts

@@ -5,7 +5,12 @@ export declare const SPACING: string[];
 export declare const twMergeConfig: {
     extend: {
         classGroups: {
-            'backdrop-blur': string[];
+            'era-tier': {
+                tier: string[];
+            }[];
+            'material-role': {
+                material: string[];
+            }[];
             'font-size': {
                 text: string[];
             }[];

package/dist/utils/tw-merge-config.js

@@ -42,6 +42,7 @@ export const SPACING = [
     'pill-inset-bar',
     'chip-inset-control',
     'chip-inset-bar',
+    'control-inset-bar',
     'glyph-icon',
     'glyph-pill'
 ];
@@ -122,8 +123,11 @@ export const twMergeConfig = {
         classGroups: {
             ...spacingGroups,
             ...radiusGroups,
-            // glass-blur sets backdrop-filter, so it conflicts with backdrop-blur.
-            'backdrop-blur': ['glass-blur'],
+            // A tier utility owns height and radius as one indivisible geometry choice.
+            // The last tier-* supplied by a consumer must replace the component default.
+            'era-tier': [{ tier: TIERS }],
+            // A component has one complete floating material role at a time.
+            'material-role': [{ material: ['popover', 'panel'] }],
             // Registered font sizes — without this they read as colours.
             'font-size': [{ text: ['body', 'micro', 'lede', 'heading', 'title', 'display'] }],
             leading: [{ leading: ['body'] }],

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "30.8.0",
+	"version": "32.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
 		"test:visual": "playwright test",
+		"test:visual:deep": "ERA_TEST_DEPTH=deep playwright test",
 		"deploy": "npm run build && npx --yes wrangler@latest deploy",
 		"preview": "wrangler dev .svelte-kit/cloudflare/_worker.js --port 4173",
 		"prepare": "git config core.hooksPath .githooks 2>/dev/null || true; svelte-kit sync || echo ''",
@@ -25,8 +26,8 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry",
 		"test": "npm run test:visual",
 		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
 		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
@@ -35,6 +36,7 @@
 		"check:install": "node --experimental-strip-types scripts/check-install.ts",
 		"check:reachable": "node --experimental-strip-types scripts/check-reachable.ts",
 		"check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts",
+		"check:geometry": "node --experimental-strip-types scripts/check-geometry.ts",
 		"verify:published": "node scripts/verify-published.mjs"
 	},
 	"files": [