@signal9/era-ui 30.8.0 → 32.0.0

package/dist/ui/button/button.svelte

@@ -19,6 +19,7 @@
 		lead,
 		trail,
 		caps = false,
+		topology = 'bounded',
 		children,
 		class: className,
 		...restProps
@@ -126,6 +127,8 @@
 		 * which is the whole reason those snippets exist.
 		 */
 		caps?: boolean;
+		/** `docked` joins this control to a neighbour and removes one or more curves. */
+		topology?: 'bounded' | 'docked';
 		children?: Snippet;
 	} = $props();
 
@@ -156,6 +159,8 @@
 	aria-busy={inFlight || undefined}
 	data-state={active ? 'on' : undefined}
 	data-size={size}
+	data-era-geometry={variant === 'filled' ? topology : undefined}
+	data-era-tier={variant === 'filled' ? size : undefined}
 	class={cn(
 		buttonVariants({ variant, tone, size, icon, active }),
 		// Positioned only while loading — the spinner overlay below needs a
@@ -195,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/button.svelte.d.ts

@@ -104,6 +104,8 @@ type $$ComponentProps = Button.RootProps & {
      * which is the whole reason those snippets exist.
      */
     caps?: boolean;
+    /** `docked` joins this control to a neighbour and removes one or more curves. */
+    topology?: 'bounded' | 'docked';
     children?: Snippet;
 };
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "ref">;

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
@@ -40,27 +40,22 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             size: 'control',
-            class: 'h-control min-w-control rounded-control'
+            class: 'min-w-control tier-control'
         },
         {
             variant: 'filled',
             size: 'chip',
-            class: 'h-chip min-w-chip rounded-chip'
+            class: 'min-w-chip tier-chip'
         },
         {
             variant: 'filled',
             size: 'pill',
-            class: 'h-pill min-w-pill rounded-pill'
+            class: 'min-w-pill tier-pill'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-icon min-w-icon rounded-icon'
-        },
-        {
-            variant: 'filled',
-            size: 'icon',
-            class: 'h-icon min-w-icon rounded-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/calendar/calendar-day.svelte

@@ -15,7 +15,7 @@
 <Calendar.Day
 	bind:ref
 	class={cn(
-		'era-token-ink size-control cursor-default rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'era-token-ink tier-control w-control cursor-default text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/card/card.svelte

@@ -32,17 +32,18 @@
 			// 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
 			// chisel, that is the difference between a control and a picture of
 			// one. Inert on flat (the token is `none`) and on glass (it resolves
 			// to the resting shadow), so only the surface that has a pressed face
-			// shows it. No content sink to go with it: the sink moves a control's
-			// single content wrapper, and a card's children are the consumer's.
+			// shows it. Move one library-owned content layer with the face: transforming
+			// 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 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 }
@@ -124,10 +125,22 @@
 			 * A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
 			 * or `onclick` turns on the interactive face — hover, focus, press — but
 			 * it deliberately does NOT override the tier you asked for, so a
-			 * `surface` link card has no resting lift and reads flatter than the
-			 * static cards around it. That combination was reported as a bug and it
-			 * is a choice: a tone that silently changed under an event handler would
-			 * be a worse one.
+			 * `surface` link card does not get the raised tier's separation and can
+			 * read flatter than the static cards around it. That combination was
+			 * reported as a bug and it is a choice: a tone that silently changed
+			 * under an event handler would be a worse one.
+			 *
+			 * HOW THE TIERS DIFFER IS SURFACE-DEPENDENT, so do not go looking for a
+			 * fill difference on every surface. `base` mixes the elevated fill 6%
+			 * toward `--color-bright` and adds a resting shadow, so there the tiers
+			 * differ in COLOUR. `bevel` sets `--era-surface-bg-elevated` to
+			 * `--era-surface-bg` outright — elevation is a chisel, not a tone, which
+			 * is bevel's whole premise — so `surface` and `elevated` paint the
+			 * IDENTICAL fill there and differ only in relief. A consumer measured
+			 * exactly that on 30.8.0 bevel: both tones `oklch(0.195 0 none)` in dark,
+			 * `0.863` in light, one variable, side by side. `glass` splits the tiers
+			 * its own way again. So the tier is real on every surface; the thing
+			 * carrying it is not always the fill.
 			 */
 			tone?: 'elevated' | 'surface' | 'well' | 'flat';
 			/** Rendered above the body with a subtle divider. */
@@ -178,7 +191,7 @@
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
-		{@render body()}
+		<div data-card-content data-era-press-content>{@render body()}</div>
 	</a>
 	<!-- eslint-enable svelte/no-navigation-without-resolve -->
 {:else if onclick != null}
@@ -198,7 +211,7 @@
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
-		{@render body()}
+		<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 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 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 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';
@@ -72,10 +72,22 @@ type $$ComponentProps = HTMLAttributes<HTMLElement> & AnchorBits & ButtonBits &
      * A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
      * or `onclick` turns on the interactive face — hover, focus, press — but
      * it deliberately does NOT override the tier you asked for, so a
-     * `surface` link card has no resting lift and reads flatter than the
-     * static cards around it. That combination was reported as a bug and it
-     * is a choice: a tone that silently changed under an event handler would
-     * be a worse one.
+     * `surface` link card does not get the raised tier's separation and can
+     * read flatter than the static cards around it. That combination was
+     * reported as a bug and it is a choice: a tone that silently changed
+     * under an event handler would be a worse one.
+     *
+     * HOW THE TIERS DIFFER IS SURFACE-DEPENDENT, so do not go looking for a
+     * fill difference on every surface. `base` mixes the elevated fill 6%
+     * toward `--color-bright` and adds a resting shadow, so there the tiers
+     * differ in COLOUR. `bevel` sets `--era-surface-bg-elevated` to
+     * `--era-surface-bg` outright — elevation is a chisel, not a tone, which
+     * is bevel's whole premise — so `surface` and `elevated` paint the
+     * IDENTICAL fill there and differ only in relief. A consumer measured
+     * exactly that on 30.8.0 bevel: both tones `oklch(0.195 0 none)` in dark,
+     * `0.863` in light, one variable, side by side. `glass` splits the tiers
+     * its own way again. So the tier is real on every surface; the thing
+     * carrying it is not always the fill.
      */
     tone?: 'elevated' | 'surface' | 'well' | 'flat';
     /** Rendered above the body with a subtle divider. */

package/dist/ui/chip/chip.svelte

@@ -16,8 +16,8 @@
 		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm',
 		variants: {
 			size: {
-				chip: 'h-chip min-w-chip rounded-chip pl-chip',
-				pill: 'h-pill min-w-pill rounded-pill pl-pill'
+				chip: 'min-w-chip tier-chip pl-chip',
+				pill: 'min-w-pill tier-pill pl-pill'
 			},
 			dismissible: { true: '', false: '' }
 		},
@@ -110,6 +110,8 @@
 
 <div
 	bind:this={ref}
+	data-era-geometry="bounded"
+	data-era-tier={size}
 	class={cn(chipVariants({ size, dismissible: !!ondismiss }), className)}
 	{...restProps}
 >
@@ -156,6 +158,7 @@
 			<Button
 				icon
 				size="pill"
+				topology={size === 'pill' ? 'docked' : 'bounded'}
 				tone="destructive"
 				class={size === 'pill' ? 'rounded-l-none' : undefined}
 				onclick={ondismiss}

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

@@ -1,7 +1,7 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";
@@ -9,8 +9,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm", {
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";

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

@@ -13,7 +13,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full items-center rounded-control px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50',
+		'flex tier-control w-full items-center px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}

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/combobox/combobox-trigger.svelte

@@ -14,7 +14,7 @@
 <Combobox.Trigger
 	bind:ref
 	class={cn(
-		'flex size-control shrink-0 items-center justify-center rounded-control text-muted focus:outline-none',
+		'flex tier-control w-control shrink-0 items-center justify-center text-muted focus:outline-none',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex tier-control cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-link-item.svelte

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex tier-control cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

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

@@ -21,16 +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 &&
-			// [--era-container-rd:…] publishes this panel's own radius, so the rows
-			// inside re-derive against rd-bar rather than the rd-control default.
-			// rd-bar − gutter IS rd-control, so the palette renders unchanged; what
-			// changes is that the rows now say WHY they are that radius.
+			// 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 [--era-container-rd:var(--era-rd-bar)]',
+			'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-field/date-field-segment.svelte

@@ -18,7 +18,7 @@
 <DateField.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/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-picker/date-picker-day.svelte

@@ -8,7 +8,7 @@
 <DatePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-control cursor-default items-center justify-center rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex tier-control w-control cursor-default items-center justify-center text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-segment.svelte

@@ -18,7 +18,7 @@
 <DatePicker.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/date-picker/date-picker-trigger.svelte

@@ -14,7 +14,7 @@
 <DatePicker.Trigger
 	bind:ref
 	class={cn(
-		'ml-auto flex size-chip shrink-0 items-center justify-center rounded-chip text-muted hover:bg-highlight hover:text-fg focus:outline-none',
+		'ml-auto flex tier-chip w-chip shrink-0 items-center justify-center text-muted hover:bg-highlight hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}

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

@@ -22,7 +22,7 @@
 <DateRangeField.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/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/date-range-picker/date-range-picker-day.svelte

@@ -12,7 +12,7 @@
 <DateRangePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-control cursor-default items-center justify-center rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[range-end]:bg-primary data-[range-end]:text-primary-fg data-[range-start]:bg-primary data-[range-start]:text-primary-fg data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex tier-control w-control cursor-default items-center justify-center text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[range-end]:bg-primary data-[range-end]:text-primary-fg data-[range-start]:bg-primary data-[range-start]:text-primary-fg data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

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

@@ -22,7 +22,7 @@
 <DateRangePicker.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/date-range-picker/date-range-picker-trigger.svelte

@@ -14,7 +14,7 @@
 <DateRangePicker.Trigger
 	bind:ref
 	class={cn(
-		'ml-auto flex size-chip shrink-0 items-center justify-center rounded-chip text-muted hover:bg-highlight hover:text-fg focus:outline-none',
+		'ml-auto flex tier-chip w-chip shrink-0 items-center justify-center text-muted hover:bg-highlight hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}

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

@@ -48,7 +48,25 @@
 
 	     Sheet.Content already had this exact treatment; Dialog and AlertDialog
 	     never got it. 85dvh matches Sheet's, deliberately — one ceiling for every
-	     floating panel, not three opinions.
+	     MODAL panel, not three opinions.
+
+	     SCOPE, and read this before you delete a max-height of your own: this
+	     covers Dialog, AlertDialog and Sheet. It does NOT cover the anchored
+	     surfaces — Popover, DropdownMenu, Select, Combobox, Menubar,
+	     ContextMenu and Tooltip have no ceiling at all today. If you keep a
+	     local max-height on one of those, KEEP IT; it is load-bearing, not
+	     vestigial.
+
+	     This paragraph exists because the sentence above it used to read "every
+	     floating panel", and a consumer reasoned correctly from it: floating
+	     panels have ceilings, therefore my Popover's max-height is a redundant
+	     workaround, therefore delete it. Right there, in the exact place you
+	     come to decide whether a workaround is still needed, and wrong one
+	     component over. A principle the library does not implement is worse
+	     than silence — silence sends you to measure. Carrying the ceiling to
+	     the anchored surfaces (anchor-aware, via bits-ui's
+	     --bits-*-content-available-height rather than viewport dvh) is the
+	     actual fix; until it lands, this says what is true instead.
 
 	     The BODY scrolls, not the panel, so a long form's footer stays put
 	     instead of scrolling away with the fields. -->
@@ -57,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/dropdown-menu/dropdown-menu-trigger.svelte

@@ -22,7 +22,7 @@
 <DropdownMenu.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 text-fg shadow-sm 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 text-fg shadow-sm 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/file-upload/file-upload.svelte

@@ -74,7 +74,7 @@
 	data-dragging={dragging || undefined}
 	data-disabled={disabled || undefined}
 	class={cn(
-		'flex h-control w-full items-center gap-gutter rounded-control bg-elevated px-inset-control font-mono text-body leading-none text-fg shadow-well transition-colors duration-base focus-within:bg-highlight hover:bg-highlight data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-highlight data-[dragging]:text-bright',
+		'flex tier-control w-full items-center gap-gutter bg-elevated px-inset-control font-mono text-body leading-none text-fg shadow-well transition-colors duration-base focus-within:bg-highlight hover:bg-highlight data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-highlight data-[dragging]:text-bright',
 		className
 	)}
 	ondragenter={onDragEnter}