@signal9/era-ui 30.7.0 → 31.0.0

package/dist/ui/bar/bar.svelte

@@ -1,6 +1,28 @@
 <script lang="ts" module>
 	import { cn, tv } from '../../utils/index.js';
 
+	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 };
+
+	const defaultContent: Record<BarSize, BarContent> = {
+		chip: 'icon',
+		control: 'chip',
+		bar: 'control'
+	};
+
+	export function resolveBarContent(size: BarSize, content?: BarContent): BarContent {
+		const resolved = content ?? defaultContent[size];
+		const order = ['icon', 'pill', 'chip', 'control', 'bar'];
+		if (order.indexOf(resolved) >= order.indexOf(size)) {
+			throw new Error(`Bar size="${size}" cannot contain tier "${resolved}"`);
+		}
+		return resolved;
+	}
+
 	// A Bar is a flex container sized to a tier height, holding smaller controls
 	// at the even concentric gap. The height scales with density; pick the tier
 	// that fits the content:
@@ -14,9 +36,9 @@
 		base: 'flex items-center leading-none',
 		variants: {
 			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
@@ -26,11 +48,10 @@
 			 * 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
@@ -53,8 +74,10 @@
 			 * compared ACROSS the axes. layout/wall-is-isotropic now does.
 			 */
 			content: {
-				tier: '',
-				pill: ''
+				icon: '',
+				pill: '',
+				chip: '',
+				control: ''
 			},
 			/**
 			 * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -80,27 +103,34 @@
 			}
 		},
 		compoundVariants: [
-			// content="tier" — one tier down, each pairing named for itself.
 			// chip ⊃ icon = sp/2.
 			{
 				size: 'chip',
-				content: 'tier',
+				content: 'icon',
 				class: 'gap-icon-inset-chip px-icon-inset-chip'
 			},
 			// control ⊃ chip = (sp−6)/2 — the tight-but-present rung, 1/2/3.
 			{
 				size: 'control',
-				content: 'tier',
+				content: 'chip',
 				class: 'gap-chip-inset-control px-chip-inset-control'
 			},
-			// bar ⊃ control = sp/2, which is exactly --era-gap. era already calls
-			// this pairing "the gutter" (see the rounded-row derivation in
-			// styles/index.css), so it takes that name rather than borrowing
-			// icon-inset-chip's — same number, but a reader can tell why.
+			// bar ⊃ control happens to equal the gutter, but it keeps a pair-specific
+			// name so geometry never borrows a layout token by numerical coincidence.
 			{
 				size: 'bar',
-				content: 'tier',
-				class: 'gap-gutter px-gutter'
+				content: 'control',
+				class: 'gap-control-inset-bar px-control-inset-bar'
+			},
+			{
+				size: 'control',
+				content: 'icon',
+				class: 'gap-icon-inset-control px-icon-inset-control'
+			},
+			{
+				size: 'bar',
+				content: 'icon',
+				class: 'gap-icon-inset-bar px-icon-inset-bar'
 			},
 			// control ⊃ pill = (3sp − sp − 10)/2 — the named token.
 			{
@@ -115,6 +145,11 @@
 				content: 'pill',
 				class: 'gap-pill-inset-bar px-pill-inset-bar'
 			},
+			{
+				size: 'bar',
+				content: 'chip',
+				class: 'gap-chip-inset-bar px-chip-inset-bar'
+			},
 			// chip ⊃ pill — its own token, not the text inset it used to borrow. The two
 			// were the same number only while type was 14px at every density; dense's
 			// 12px broke the tie and left this pairing a pixel wide.
@@ -124,7 +159,7 @@
 				class: 'gap-pill-inset-chip px-pill-inset-chip'
 			}
 		],
-		defaultVariants: { size: 'bar', content: 'tier', divider: false }
+		defaultVariants: { size: 'bar', content: 'control', divider: false }
 	});
 </script>
 
@@ -135,8 +170,9 @@
 	let {
 		ref = $bindable(null),
 		size = 'bar',
-		content = 'tier',
+		content,
 		divider = false,
+		topology = 'nested',
 		children,
 		class: className,
 		...restProps
@@ -146,16 +182,49 @@
 		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;
 	} = $props();
+
+	const resolvedContent = $derived(resolveBarContent(size, content));
 </script>
 
-<div bind:this={ref} class={cn(barVariants({ size, content, divider }), className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-era-geometry={divider ? 'docked' : topology}
+	data-era-tier={size}
+	data-era-contains={resolvedContent}
+	class={cn(barVariants({ size, content: resolvedContent, divider }), className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -13,11 +13,13 @@
 		active = false,
 		icon = false,
 		loading = false,
+		busy = false,
 		loadingLabel,
 		disabled,
 		lead,
 		trail,
 		caps = false,
+		topology = 'bounded',
 		children,
 		class: className,
 		...restProps
@@ -47,8 +49,35 @@
 		 *
 		 * The visible label is therefore HIDDEN in flight — the one thing this
 		 * trades away, and the reason `loadingLabel` exists.
+		 *
+		 * IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
+		 * supported posture, not a legacy one — see that prop.
 		 */
 		loading?: boolean;
+		/**
+		 * In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
+		 * and changes nothing else. The label stays visible and legible.
+		 *
+		 * This exists because "show a spinner" is a taste, not a requirement,
+		 * and era had only one answer. A consumer whose house style is that
+		 * spinners should not appear had to spell the posture out themselves —
+		 * `disabled` plus a restated `aria-busy` — and rely on knowing that
+		 * `restProps` spreads last, which is a real fact about this component
+		 * that no reader should have to depend on. Two words for two postures
+		 * is clearer than one word plus a workaround.
+		 *
+		 * `loading` implies this: it is `busy` plus the spinner and the hidden
+		 * label. What you get from `busy` alone is a control that is visibly
+		 * disabled (the era-interactive opacity) and announced as busy, with
+		 * its geometry and its ink untouched — which is also why it needs no
+		 * `loadingLabel`: nothing about the button changed except that you
+		 * cannot press it.
+		 *
+		 * Reported by a consumer whose user asked for no spinners anywhere.
+		 * They were right that a fix for the width shift did not answer it: a
+		 * spinner that no longer moves its neighbours is still a spinner.
+		 */
+		busy?: boolean;
 		/** Screen-reader-only label announced while `loading` is true. */
 		loadingLabel?: string;
 		/** Icon rendered BEFORE the label, outside it. Use this rather than putting
@@ -98,10 +127,15 @@
 		 * 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();
 
-	const effectiveDisabled = $derived(disabled || loading);
+	// `loading` is `busy` plus a spinner, so everything that is true of busy is
+	// true of loading. Only the spinner and the hidden label read `loading`.
+	const inFlight = $derived(loading || busy);
+	const effectiveDisabled = $derived(disabled || inFlight);
 </script>
 
 <!--
@@ -122,9 +156,11 @@
 <Button.Root
 	bind:ref
 	disabled={effectiveDisabled}
-	aria-busy={loading || undefined}
+	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

@@ -26,8 +26,35 @@ type $$ComponentProps = Button.RootProps & {
      *
      * The visible label is therefore HIDDEN in flight — the one thing this
      * trades away, and the reason `loadingLabel` exists.
+     *
+     * IF YOU DO NOT WANT A SPINNER, use `busy`. Not showing one is a
+     * supported posture, not a legacy one — see that prop.
      */
     loading?: boolean;
+    /**
+     * In flight, WITHOUT a spinner: disables the button and sets `aria-busy`,
+     * and changes nothing else. The label stays visible and legible.
+     *
+     * This exists because "show a spinner" is a taste, not a requirement,
+     * and era had only one answer. A consumer whose house style is that
+     * spinners should not appear had to spell the posture out themselves —
+     * `disabled` plus a restated `aria-busy` — and rely on knowing that
+     * `restProps` spreads last, which is a real fact about this component
+     * that no reader should have to depend on. Two words for two postures
+     * is clearer than one word plus a workaround.
+     *
+     * `loading` implies this: it is `busy` plus the spinner and the hidden
+     * label. What you get from `busy` alone is a control that is visibly
+     * disabled (the era-interactive opacity) and announced as busy, with
+     * its geometry and its ink untouched — which is also why it needs no
+     * `loadingLabel`: nothing about the button changed except that you
+     * cannot press it.
+     *
+     * Reported by a consumer whose user asked for no spinners anywhere.
+     * They were right that a fix for the width shift did not answer it: a
+     * spinner that no longer moves its neighbours is still a spinner.
+     */
+    busy?: boolean;
     /** Screen-reader-only label announced while `loading` is true. */
     loadingLabel?: string;
     /** Icon rendered BEFORE the label, outside it. Use this rather than putting
@@ -77,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/index.d.ts

@@ -8,5 +8,7 @@ export interface ButtonVariants {
     icon?: boolean;
     active?: boolean;
     loading?: boolean;
+    /** In flight without a spinner — see button.svelte. */
+    busy?: boolean;
     loadingLabel?: string;
 }

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