@signal9/era-ui 30.8.0 → 31.0.0

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

@@ -1,8 +1,21 @@
+export type BarSize = 'chip' | 'control' | 'bar';
+export type BarContent = 'icon' | 'pill' | 'chip' | 'control';
+export type BarGeometry = {
+    size: 'chip';
+    content?: 'icon' | 'pill';
+} | {
+    size: 'control';
+    content?: 'icon' | 'pill' | 'chip';
+} | {
+    size?: 'bar';
+    content?: BarContent;
+};
+export declare function resolveBarContent(size: BarSize, content?: BarContent): BarContent;
 export declare const barVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-chip rounded-chip";
-        control: "h-control rounded-control";
-        bar: "h-bar rounded-bar";
+        chip: "tier-chip";
+        control: "tier-control";
+        bar: "tier-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -12,11 +25,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
-     *   its OWN token, from the compounds below.
-     * - `pill` — the compact pairing: pills and fields (a filter beside a
-     *   pill-tier icon button, a title bar). Two tiers down, so the inset
-     *   differs per size and also comes from the compounds.
+     * Name the ACTUAL tier inside. Omitting it means the next canonical rung:
+     * chip⊃icon, control⊃chip, bar⊃control. There is deliberately no `tier`
+     * shorthand in the public API: it hid which pair supplied the inset and
+     * taught the false claim that every adjacent pair had the same value.
      *
      * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
      * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
@@ -39,8 +51,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "";
+        icon: "";
         pill: "";
+        chip: "";
+        control: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -66,9 +80,9 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "flex items-center leading-none", {
     size: {
-        chip: "h-chip rounded-chip";
-        control: "h-control rounded-control";
-        bar: "h-bar rounded-bar";
+        chip: "tier-chip";
+        control: "tier-control";
+        bar: "tier-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -78,11 +92,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
-     *   its OWN token, from the compounds below.
-     * - `pill` — the compact pairing: pills and fields (a filter beside a
-     *   pill-tier icon button, a title bar). Two tiers down, so the inset
-     *   differs per size and also comes from the compounds.
+     * Name the ACTUAL tier inside. Omitting it means the next canonical rung:
+     * chip⊃icon, control⊃chip, bar⊃control. There is deliberately no `tier`
+     * shorthand in the public API: it hid which pair supplied the inset and
+     * taught the false claim that every adjacent pair had the same value.
      *
      * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
      * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
@@ -105,8 +118,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "";
+        icon: "";
         pill: "";
+        chip: "";
+        control: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -132,9 +147,9 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-chip rounded-chip";
-        control: "h-control rounded-control";
-        bar: "h-bar rounded-bar";
+        chip: "tier-chip";
+        control: "tier-control";
+        bar: "tier-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -144,11 +159,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
-     *   its OWN token, from the compounds below.
-     * - `pill` — the compact pairing: pills and fields (a filter beside a
-     *   pill-tier icon button, a title bar). Two tiers down, so the inset
-     *   differs per size and also comes from the compounds.
+     * Name the ACTUAL tier inside. Omitting it means the next canonical rung:
+     * chip⊃icon, control⊃chip, bar⊃control. There is deliberately no `tier`
+     * shorthand in the public API: it hid which pair supplied the inset and
+     * taught the false claim that every adjacent pair had the same value.
      *
      * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
      * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
@@ -171,8 +185,10 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "";
+        icon: "";
         pill: "";
+        chip: "";
+        control: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -205,12 +221,36 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     size?: 'chip' | 'control' | 'bar';
     /**
      * Tier of the controls inside — drives the bar's padding and gap so they
-     * stay concentric to them. `tier` (default) is one tier smaller; `pill` is
-     * the compact pairing (pills/fields in an sm or md bar).
+     * stay concentric to them. Omit this for the next canonical rung, or name
+     * the actual tier when the contents are smaller.
+     */
+    content?: BarContent;
+    /**
+     * The flush cap-a-panel chrome: an outset rule below, and a rounded
+     * BOTTOM only — the top defers to the panel's own radius.
+     *
+     * THE BOTTOM RADIUS IS LOAD-BEARING FOR THE RULE. The divider is an
+     * outset `box-shadow`, so it follows the box's corners: the rounded
+     * bottom is what curves the line up at the ends and makes the bar read
+     * as a long pill. Overriding the radius therefore changes the RULE, not
+     * just the corners. Measured against `cn`:
+     *
+     * - `rounded-none` drops both — a square bar with a dead-straight rule.
+     *   That is the intended square mode (an in-app Notes bar passes it).
+     * - `rounded-b-*` or `rounded-b-none` replaces the curve — this is the
+     *   one that surprises, because the rule changes shape when the caller
+     *   thought they were only squaring a corner.
+     * - `rounded-t-*` is SAFE: it wins against `rounded-t-none` and leaves
+     *   `rounded-b-control` standing, so the curve survives.
+     *
+     * A consumer lost the curve this way. The coupling was already written
+     * down — on the variant, inside `<script module>`, where someone
+     * hovering this prop never reaches it. Docs are only as good as the
+     * place the reader is standing.
      */
-    content?: 'tier' | 'pill';
-    /** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
     divider?: boolean;
+    /** `docked` removes one or more exposed curves; strict radius nesting does not apply. */
+    topology?: 'nested' | 'docked';
     children?: Snippet;
 };
 declare const Bar: import("svelte").Component<$$ComponentProps, {}, "ref">;

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

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.js

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

@@ -39,10 +39,11 @@
 			// 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: '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'
 			}
 		},
 		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>{@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>{@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: "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";
     };
 }, 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: "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";
     };
 }, 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: "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";
     };
 }, 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-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

@@ -24,13 +24,11 @@
 		// glass-blur, like every other floating panel (menus, dialogs, pickers):
 		// inert on opaque surfaces, blurs the backdrop when the palette floats.
 		!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 bg-well p-gutter shadow-lg glass-blur',
 		className
 	)}
 	{...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-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-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. -->

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}