@signal9/era-ui 31.0.0 → 32.0.0

package/dist/styles/surfaces/contract.css

@@ -0,0 +1,50 @@
+/*
+ * Era UI — material contract
+ *
+ * Components choose a MATERIAL ROLE; surface implementations provide values.
+ * This file contains only relationships shared by every implementation and the
+ * global consumers of those values. It deliberately contains no flat, glass,
+ * or bevel palette and no component selector.
+ *
+ * Required primitives (enforced by check:surfaces):
+ *   paint       --era-surface-bg, --era-surface-bg-elevated, --era-field-bg
+ *   relief      --era-shadow, --era-shadow-lg
+ *   interaction --era-highlight, --era-fill, full/compact press travel
+ *   frame       --era-divider-color, --era-panel-inset, --era-backdrop-filter
+ *   environment --era-border-color, --era-overlay-bg
+ *   selection   --era-selection-bg/fg/shadow
+ *
+ * Derived values remain live var() expressions so a nested surface re-resolves
+ * them from its own primitives. A surface overrides a derived value only when
+ * its material genuinely needs a different treatment.
+ */
+:root,
+[data-surface] {
+	--era-divider-faded: color-mix(in oklch, var(--era-divider-color) 40%, transparent);
+	--era-field-highlight: color-mix(in oklch, var(--era-field-bg) 96%, var(--color-bright));
+	--era-shadow-well: var(--era-shadow);
+	--era-shadow-pressed: var(--era-shadow);
+	--era-highlight-shadow: var(--era-shadow);
+}
+
+/* Radius re-derives per element because density/corners may change without a
+ * new surface boundary. No surface-specific derived shadow belongs here. */
+* {
+	--era-item-rd: max(0px, calc(var(--era-rd-control) - var(--era-panel-inset)));
+}
+
+::selection {
+	background-color: var(--era-selection-bg);
+	color: var(--era-selection-fg);
+	text-shadow: var(--era-selection-shadow);
+}
+
+/* Translucent materials become opaque without changing component markup. */
+@media (prefers-reduced-transparency: reduce) {
+	:root,
+	[data-surface] {
+		--era-highlight: var(--color-hover);
+		--era-fill: var(--color-hover);
+		--era-backdrop-filter: none;
+	}
+}

package/dist/styles/surfaces/flat.css

@@ -0,0 +1,27 @@
+/* Flat — solid tone steps with no relief chrome. */
+:root,
+[data-surface='flat'] {
+	--era-border-color: transparent;
+	--era-divider-color: var(--color-border);
+	--era-surface-bg: var(--color-2);
+	/* A symmetric tone step separates floating content without drawing an edge. */
+	--era-surface-bg-elevated: color-mix(in oklch, var(--era-surface-bg) 94%, var(--color-bright));
+	--era-field-bg: var(--color-hover);
+	--era-shadow: none;
+	--era-shadow-lg: none;
+	--era-highlight: light-dark(
+		color-mix(in oklch, var(--color-bright) 9%, transparent),
+		color-mix(in oklch, var(--color-bright) 8%, transparent)
+	);
+	--era-fill: var(--era-highlight);
+	--era-press-sink-x: 0px;
+	--era-press-sink-y: 0px;
+	--era-press-sink-compact-x: 0px;
+	--era-press-sink-compact-y: 0px;
+	--era-panel-inset: 0px;
+	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
+	--era-backdrop-filter: none;
+	--era-selection-bg: var(--color-bright);
+	--era-selection-fg: var(--color-1);
+	--era-selection-shadow: none;
+}

package/dist/styles/surfaces/glass.css

@@ -16,6 +16,7 @@
  * treatment (macOS-style) so row highlights never touch the rim or arcs.
  */
 [data-surface='glass'] {
+	--era-border-color: transparent;
 	--era-divider-color: light-dark(
 		color-mix(in oklch, var(--color-bright) 12%, transparent),
 		color-mix(in oklch, var(--color-bright) 8%, transparent)
@@ -33,13 +34,13 @@
 		color-mix(in oklch, var(--color-3) 85%, transparent)
 	);
 
-	/* The same tone the base defines, held at 72% so the frost still reads
+	/* The same tone the flat implementation defines, held at 72% so the frost still reads
 	 * through it — the material is the point. Restated rather than inherited
 	 * because a surface cannot reference the token it is overriding.
 	 * Light mode is why a field needs its own value here at all: at the panel's
 	 * own opacity it measured 1.00:1 against its backdrop, i.e. exactly nothing.
 	 *
-	 * --era-field-highlight is NOT restated: the base expresses it against
+	 * --era-field-highlight is NOT restated: the contract derives it against
 	 * --era-field-bg, so it picks this value up and stays translucent. */
 	--era-field-bg: color-mix(in oklch, var(--color-hover) 72%, transparent);
 
@@ -89,6 +90,10 @@
 	 * surface invented). Its highlight was always a wash, so pills inside lit
 	 * containers were never at risk here. */
 	--era-fill: var(--color-hover);
+	--era-press-sink-x: 0px;
+	--era-press-sink-y: 0px;
+	--era-press-sink-compact-x: 0px;
+	--era-press-sink-compact-y: 0px;
 	--era-highlight-shadow:
 		inset 1.5px 1.5px 0 -1px
 			light-dark(
@@ -127,10 +132,9 @@
 		);
 
 	--era-panel-inset: 2px;
-	--era-blur: 20px;
-	/* Blur alone reads muddy/gray; saturation restores the backdrop's color
-	 * the way Apple's vibrancy does. */
-	--era-saturate: 180%;
+	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
+	/* Blur alone reads muddy/gray; saturation restores the backdrop's color. */
+	--era-backdrop-filter: blur(20px) saturate(180%);
 }
 
 /* Accessibility — honor reduced-transparency: solid fills, no filter,
@@ -139,8 +143,7 @@
 	[data-surface='glass'] {
 		--era-surface-bg: var(--color-2);
 		--era-surface-bg-elevated: var(--color-3);
-		--era-blur: 0px;
-		--era-saturate: 100%;
+		--era-backdrop-filter: none;
 		/* The field goes solid with everything else — it was left translucent
 		 * here, so a field kept frosting over its backdrop on the one setting
 		 * that asks for no frost. */

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

@@ -32,7 +32,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'fixed top-1/2 left-1/2 z-overlay flex max-h-[85dvh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter overflow-y-auto rounded-bar bg-well p-card shadow-lg glass-blur',
+			'fixed top-1/2 left-1/2 z-overlay flex max-h-[85dvh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-gutter overflow-y-auto rounded-bar material-panel p-card',
 			className
 		)}
 		{...restProps}

package/dist/ui/button/button.svelte

@@ -200,6 +200,7 @@
 	-->
 	<span
 		data-button-content
+		data-era-press-content
 		class={cn(
 			'inline-flex items-center justify-center [gap:inherit]',
 			// THE LABEL KEEPS ITS BOX AND LOSES ITS INK. opacity, not `hidden` or

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

@@ -1,6 +1,6 @@
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "pressable flex justify-center shadow-sm hover:shadow-highlight";
         link: "inline era-link [line-height:inherit]";
     };
     tone: {
@@ -25,7 +25,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "items-center gap-gutter text-body era-interactive leading-none", {
     variant: {
-        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "pressable flex justify-center shadow-sm hover:shadow-highlight";
         link: "inline era-link [line-height:inherit]";
     };
     tone: {
@@ -50,7 +50,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "pressable flex justify-center shadow-sm hover:shadow-highlight";
         link: "inline era-link [line-height:inherit]";
     };
     tone: {

package/dist/ui/button/variants.js

@@ -9,10 +9,10 @@ export const buttonVariants = tv({
             // The active: press treatment is inert outside the bevel surface —
             // flat/glass define --era-shadow-pressed as the resting shadow and 0px
             // sinks. Bevel inverts the chisel and sinks the CONTENT straight down
-            // (press-sink, `[&:active>*]` — the one content-wrapper span from
+            // (`pressable` targets the one content-wrapper span from
             // button.svelte) so the icon AND label depress together like a keycap
             // while the frame holds still.
-            filled: 'flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)',
+            filled: 'pressable flex justify-center shadow-sm hover:shadow-highlight',
             // THE LINK VARIANT IS era-link, not a second implementation of it.
             // It used to hand-roll `underline-offset-2 hover:underline`, which is a
             // different link from the one `era-link` defines for prose: no underline
@@ -55,7 +55,7 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             size: 'icon',
-            class: 'min-w-icon tier-icon'
+            class: 'min-w-icon tier-icon [--era-press-effective-x:var(--era-press-sink-compact-x)] [--era-press-effective-y:var(--era-press-sink-compact-y)]'
         },
         // filled insets; icon buttons go square instead. When an icon is present,
         // gap widens to match the wall inset so the icon sits in rhythm with it.

package/dist/ui/card/card.svelte

@@ -32,7 +32,7 @@
 			// was: the even-gap law, broken by default, in the component that
 			// bounds more consumer content than any other.
 			sectioned: { true: 'p-0', false: 'p-card' },
-			// A CARD YOU CAN PRESS DEPRESSES. `active:shadow-pressed` is on every
+			// A CARD YOU CAN PRESS DEPRESSES. The pressed material is on every
 			// other era control and was missing here, so a pressable card was the
 			// one thing in the library that lit up on hover and then did nothing
 			// under the finger — on bevel, where the pressed face is an inverted
@@ -43,7 +43,7 @@
 			// consumer children separately would pull a card's sections apart, while no
 			// wrapper leaves the frame depressed around stationary ink.
 			interactive: {
-				true: 'cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
+				true: 'pressable cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
 			}
 		},
 		defaultVariants: { tone: 'elevated', sectioned: false, interactive: false }
@@ -191,7 +191,7 @@
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
-		<div data-card-content>{@render body()}</div>
+		<div data-card-content data-era-press-content>{@render body()}</div>
 	</a>
 	<!-- eslint-enable svelte/no-navigation-without-resolve -->
 {:else if onclick != null}
@@ -211,7 +211,7 @@
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
-		<div data-card-content>{@render body()}</div>
+		<div data-card-content data-era-press-content>{@render body()}</div>
 	</button>
 {:else}
 	<div

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

@@ -10,7 +10,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "pressable cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, "block w-full rounded-bar text-left text-fg", {
     tone: {
@@ -24,7 +24,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "pressable cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
@@ -38,7 +38,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "pressable cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

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

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-overlay w-max min-w-(--bits-combobox-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-combobox-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/command/command-root.svelte

@@ -21,14 +21,14 @@
 	bind:value
 	class={cn(
 		'flex flex-col gap-gutter',
-		// glass-blur, like every other floating panel (menus, dialogs, pickers):
-		// inert on opaque surfaces, blurs the backdrop when the palette floats.
+		// material-panel, like every persistent floating surface: opaque on flat/
+		// bevel and frosted on glass without naming an implementation here.
 		!bare &&
 			// The panel is unbounded chrome; its bounded command rows carry their own
 			// control tier rather than inheriting geometry from this ancestor.
 			// No border: --era-shadow-lg is the edge on every surface, and a border
 			// alongside it draws two hairlines of the same colour on flat.
-			'overflow-hidden rounded-bar bg-well p-gutter shadow-lg glass-blur',
+			'overflow-hidden rounded-bar material-panel p-gutter',
 		className
 	)}
 	{...restProps}

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

@@ -186,8 +186,8 @@
 
 <!-- The terminal command bar: a bare prompt line, not a floating palette. The
      dropdown anchors under it with no radius (a full-width sheet, like the shell
-     it mirrors), but its chrome is surface-adaptive via --era-shadow-lg +
-     glass-blur: a 1px hairline at the divider colour on flat, the chisel frame
+     it mirrors), but its chrome is surface-adaptive via material-popover:
+     a tone step on flat, the chisel frame
      on bevel, frost on glass — so it reads as "dedicated" on every surface, not
      an undifferentiated rectangle.
 
@@ -273,7 +273,7 @@
 			role="listbox"
 			tabindex="-1"
 			aria-label="Commands"
-			class="absolute top-full left-0 z-overlay max-h-64 w-full overflow-x-hidden overflow-y-auto bg-elevated shadow-lg glass-blur"
+			class="absolute top-full left-0 z-overlay max-h-64 w-full overflow-x-hidden overflow-y-auto material-popover"
 			onmousedown={(e) => e.preventDefault()}
 		>
 			{#if !filtered.length}

package/dist/ui/context-menu/context-menu-content.svelte

@@ -24,10 +24,7 @@
 		// anchor bar (the reference terminal look) — while glass and bevel keep the
 		// 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 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/context-menu/context-menu-sub-content.svelte

@@ -18,10 +18,7 @@
 	<ContextMenu.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/date-picker/date-picker-content.svelte

@@ -14,7 +14,7 @@
 <DatePicker.Content
 	bind:ref
 	align="start"
-	class={cn('z-overlay rounded-bar bg-elevated p-content shadow-lg glass-blur', className)}
+	class={cn('z-overlay rounded-bar material-popover p-content', className)}
 	{sideOffset}
 	{...restProps}
 >

package/dist/ui/date-range-picker/date-range-picker-content.svelte

@@ -14,7 +14,7 @@
 <DateRangePicker.Content
 	bind:ref
 	align="start"
-	class={cn('z-overlay rounded-bar bg-elevated p-content shadow-lg glass-blur', className)}
+	class={cn('z-overlay rounded-bar material-popover p-content', className)}
 	{sideOffset}
 	{...restProps}
 >

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

@@ -75,7 +75,7 @@
 		{...relay?.attrs}
 		class={cn(
 			relay?.schemeClass,
-			'fixed top-1/2 left-1/2 z-overlay flex max-h-[85dvh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col bg-well shadow-lg glass-blur',
+			'fixed top-1/2 left-1/2 z-overlay flex max-h-[85dvh] w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col material-panel',
 			// No header: the panel itself is the body, so the panel scrolls.
 			header ? 'rounded-control' : 'gap-gutter overflow-y-auto rounded-bar p-card',
 			className

package/dist/ui/dropdown-menu/dropdown-menu-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-dropdown-menu-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
+			'z-overlay w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-control material-popover p-menu',
 			className
 		)}
 		{sideOffset}

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -18,10 +18,7 @@
 	<DropdownMenu.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/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-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/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-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

@@ -532,7 +532,7 @@
 		// outward, and paint containment clips them).
 		// 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 bg-elevated shadow-lg glass-blur [contain:layout_style]',
+		'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/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/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/switch/switch.svelte

@@ -41,7 +41,7 @@
 	     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 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"
 	/>

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

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

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

@@ -1,16 +1,16 @@
 export declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        plain: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        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: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        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: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        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>>;

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

@@ -19,7 +19,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'z-overlay inline-flex tier-pill items-center gap-gutter 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/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 tier-pill -translate-x-1/2 items-center gap-gutter 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

@@ -8,7 +8,9 @@ export declare const twMergeConfig: {
             'era-tier': {
                 tier: string[];
             }[];
-            'backdrop-blur': string[];
+            'material-role': {
+                material: string[];
+            }[];
             'font-size': {
                 text: string[];
             }[];

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

@@ -126,8 +126,8 @@ export const twMergeConfig = {
             // 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 }],
-            // glass-blur sets backdrop-filter, so it conflicts with backdrop-blur.
-            'backdrop-blur': ['glass-blur'],
+            // 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'] }],