@signal9/era-ui 30.8.0 → 32.0.0

package/dist/styles/surfaces/bevel.css

@@ -23,6 +23,10 @@
  * shading reads as lighting, not tilt. Do not remove it.
  */
 [data-surface='bevel'] {
+	--era-border-color: transparent;
+	--era-divider-color: var(--color-border);
+	--era-surface-bg: var(--color-2);
+	--era-field-bg: var(--color-hover);
 	/* Horizontal cast ratio — the light-direction knob (see header). Below 1
 	 * rotates the light toward the top; the vertical cast stays a full pixel. */
 	--era-bevel-side: 0.6;
@@ -46,7 +50,7 @@
 			),
 		var(--era-bevel-rim);
 	/* ELEVATION IS A CHISEL, NOT A TONE — bevel's whole premise, and the reason
-	 * it opts out of the raised tier's tone step. base now mixes the elevated
+	 * it opts out of the flat implementation's raised-tier tone step. Flat mixes the elevated
 	 * fill 6% toward --color-bright so flat can separate a floating panel
 	 * without drawing an edge; bevel already separates one with the slab below,
 	 * and a panel that was ALSO a lighter grey would read as two mechanisms
@@ -93,19 +97,28 @@
 			),
 		var(--era-bevel-rim);
 	--era-shadow-pressed: var(--era-shadow-well);
+	--era-highlight: light-dark(
+		color-mix(in oklch, var(--color-bright) 9%, transparent),
+		color-mix(in oklch, var(--color-bright) 8%, transparent)
+	);
+	--era-fill: var(--era-highlight);
 	/* The BOX never moves on press, so releasing doesn't pop the button up.
 	 * Instead the CONTENT sinks straight DOWN 1px while
 	 * the frame holds still, so the icon/label depresses like a Win95 keycap
 	 * travelling into its socket. An earlier version also nudged it 1px RIGHT (into
 	 * the sunken bottom-right corner) but the sideways drift read as the glyph
 	 * sliding off rather than pressing in — vertical-only is the truer key press.
-	 * The smallest icon buttons override this to half — see below the block. */
+	 * Compact controls select the half-step travel from the same contract. */
 	--era-press-sink-x: 0px;
 	--era-press-sink-y: 1px;
+	--era-press-sink-compact-x: 0px;
+	--era-press-sink-compact-y: 0.5px;
 	/* Floating panels wear a 2-layer chisel frame; row highlights inset past
 	 * it with a concentric radius (square under data-corners="square", as
 	 * the era had it — Win95 drew its selection bar inside the border). */
 	--era-panel-inset: 2px;
+	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
+	--era-backdrop-filter: none;
 	/* Text selection is the period highlight bar: hard, fully opaque, in the
 	 * ACCENT — Win95 painted selections with the system highlight color, not
 	 * inverse video. Under the neutral theme primary is the fg step, so it
@@ -113,21 +126,5 @@
 	 * colored selection. Crisp by definition: no glow, no shadow. */
 	--era-selection-bg: var(--color-primary);
 	--era-selection-fg: var(--color-primary-fg);
-}
-
-/*
- * SMALL-BUTTON SINK — the depression, scaled to the keycap.
- *
- * The 1px content sink is tuned for a default (h-control) button, where it is ~4% of
- * the box. On the h-icon tier — size="xs" and size="icon", the 14px squares a
- * pane's close X is built from — that same 1px is ~7% of the box and the glyph,
- * which fills the button, visibly drops too far on press. Half the sink
- * (proportional: 14/24 ≈ 0.58, rounded to 0.5) puts the small keycap's travel
- * back in step with the large one. Overriding the token (not the transform)
- * means the existing `[&:active>*]` rule keeps applying it; the content wrapper
- * inherits the value.
- */
-[data-surface='bevel'] button[data-size='xs'],
-[data-surface='bevel'] button[data-size='icon'] {
-	--era-press-sink-y: 0.5px;
+	--era-selection-shadow: none;
 }

package/dist/styles/surfaces/contract.css

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

package/dist/styles/surfaces/flat.css

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

package/dist/styles/surfaces/glass.css

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

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

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

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

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

package/dist/ui/badge/badge.svelte

@@ -19,7 +19,7 @@
 		// that cost. A badge holding an icon must stay flex to lay the icon out
 		// beside the text, and keeps the general trim — its line-height:1 plus
 		// flex centring, which is the best available when the text is anonymous.
-		base: 'inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink',
+		base: 'inline-flex min-w-pill shrink-0 items-center justify-center gap-gutter tier-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink',
 		variants: {
 			tone: {
 				default: 'bg-fill text-fg',
@@ -56,7 +56,13 @@
 	} = $props();
 </script>
 
-<span bind:this={ref} class={cn(badgeVariants({ tone }), className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-era-geometry="bounded"
+	data-era-tier="pill"
+	class={cn(badgeVariants({ tone }), className)}
+	{...restProps}
+>
 	{#if lead}
 		{@render lead()}
 	{/if}

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

@@ -7,7 +7,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         warning: "bg-warning text-warning-fg";
         info: "bg-info text-info-fg";
     };
-}, undefined, "inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink", {
+}, undefined, "inline-flex min-w-pill shrink-0 items-center justify-center gap-gutter tier-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink", {
     tone: {
         default: "bg-fill text-fg";
         accent: "bg-primary text-primary-fg";

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">;