@signal9/era-ui 31.0.0 → 32.0.1

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/dialog/dialog-header.svelte

@@ -24,7 +24,7 @@
        · the leading side at --era-inset-control: a title has no corner to nest, so
          it takes the text inset, the same asymmetry the pane and the
          Conversations row document
-       · the × is the dismiss family's: an xxs `Dialog.Close` whose tier
+       · the × is the dismiss family's: a pill-tier `Dialog.Close` whose tier
          default IS the 12px ink, destructive like Pane.Close
 
      Rendered flush by Dialog.Content / Sheet.Content when passed as their

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-close.svelte

@@ -2,7 +2,6 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { Button } from '../button';
 	import X from '@lucide/svelte/icons/x';
-	import { cn } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,42 +12,24 @@
 	} = $props();
 </script>
 
-<!-- A raw icon Button (size="pill" = h-pill, rd-xxs), a tight SQUARE. No
+<!-- A raw icon Button (size="pill" = h-pill), a tight SQUARE. No
      data-pane-control: it stays in the drag zone, so a press-and-drag moves the
      pane while a clean click still closes (neodrag starts a drag only on
      movement and suppresses the trailing click after a real drag). Its natural
-     rd-xxs is what the PANE's corner radius conforms to (rd-md — see Pane.Root),
+     pill radius is what the PANE's corner radius conforms to (see Pane.Root),
      not the other way round.
 
-     xxs rather than the tighter `icon` size, which is what the handle's tier
-     asks for. The GLYPH is deliberately OFF the sub-tier ladder: sp+5, where the
-     ladder offers sp+4 (12px at dense, the xxs sub-tier) and the h-icon floor
-     (14px). Both were tried and both are wrong here by a pixel — 12 reads
-     visibly lighter than the reference terminal app's close button, 14 reads
-     heavier — and a close button is the one control in the chrome you must be
-     able to hit and read at a glance, so a pixel of it is worth an exception.
-
-     sp+5 is 13/15/17/21, matching that app's 13px at dense, and the pad it
-     leaves is a constant 2.5px at EVERY mode, so the exception is uniform rather
-     than one hand-picked number.
-
-     The pad being fractional costs nothing for this glyph in particular: an ×
-     is two DIAGONAL strokes, which the rasteriser antialiases wherever the box
-     lands, so pixel alignment buys no crispness (it would for the minimize −,
-     which is axis-aligned — that one stays on the ladder). If a second component
-     ever wants this size, it graduates from a calc here to a token in
-     density.css.
-
-     Written as [&_svg]: because that is the selector Button's icon variant uses —
-     a bare size-* on the <X> loses to it, which is why an earlier class there had
-     no effect at all. -->
+     The Button's pill glyph tier is exactly 6px smaller than its pill box:
+     18px around 12px at dense, and the same difference at every density. That
+     leaves a whole-pixel 3px inset on all four sides without a pane-specific
+     size exception. -->
 <Button
 	bind:ref
 	icon
 	size="pill"
 	tone="destructive"
 	aria-label="Close"
-	class={cn('[&_svg]:size-[calc(var(--era-sp)+0.3125rem)]', className)}
+	class={className}
 	{...restProps}
 >
 	<X />

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'
 			}
 		},