@signal9/era-ui 32.0.0 → 33.0.0

package/dist/styles/utilities/public.css

@@ -0,0 +1,391 @@
+/* ------------------------------------------------------------------ */
+/* THE PUBLIC CLASS API                                               */
+/*                                                                    */
+/* Era's consumer-facing styling surface is NAMED utilities — a user  */
+/* of the library writes `tier-control px-gutter shadow`, never        */
+/* `h-(--era-h-control)`-style var classes. Where Tailwind already has a   */
+/* name for the concept (rounded-control, shadow, ease) era OVERLOADS it   */
+/* so stock-looking markup renders on-design; where it doesn't, era   */
+/* registers its own (h-control, px-gutter, gap-gutter, p-card).               */
+/*                                                                    */
+/* The --era-* custom properties remain the internal contract (and    */
+/* the escape hatch for anything without a name — e.g. min-w-* tier   */
+/* names are NOT registered because Tailwind's container scale        */
+/* already owns min-w-md/lg; use min-w-(--era-h-control) there).           */
+/*                                                                    */
+/* Everything here is a thin name over a token, so the full axis      */
+/* system — density, surface, corners, motion — flows through         */
+/* untouched. @theme inline is load-bearing: it inlines the var()     */
+/* reference instead of snapshotting a value, so each USE re-resolves */
+/* against the element's own inherited axes.                         */
+/* ------------------------------------------------------------------ */
+@theme inline {
+	/* THE TYPE LADDER — the one axis that was not on the density system.
+	 *
+	 * era had exactly one size, `text-body`, so a heading had nowhere to go and
+	 * consumers reached for Tailwind's fixed `text-2xl` or a bare <h1>. Both are
+	 * rem-fixed while `--era-text` re-tiers, so heading prominence DEGRADED as
+	 * density increased: measured in a consumer app, an <h1> against body text
+	 * was 1.33x at dense and 1.14x at touch. The page title gets quieter the
+	 * tighter you set the page, which is backwards, and it is the only place in
+	 * era where a size relationship does not hold across the axis.
+	 *
+	 * Named by ROLE, like the tier ladder and for the same reason: size names
+	 * invert (this library already shipped an `xxs` bigger than its `xs`), and a
+	 * role tells you where the rung belongs. Ratios are simple fractions of the
+	 * atom rather than a geometric scale — again like the tier ladder, whose
+	 * rungs are sp+6, 2sp+6, 3sp, 4sp rather than a constant multiplier. They
+	 * land on whole pixels at dense and hold their ratio at every mode.
+	 *
+	 *   micro    5/6   10 / 11.7 / 11.7 / 11.7   an eyebrow, a legend, a tag
+	 *   body      1    12 / 14 / 14 / 14         control and UI text
+	 *   lede     5/4   15 / 17.5                 the paragraph under a title
+	 *   heading  3/2   18 / 21                   a section heading
+	 *   title     2    24 / 28                   a page or card title
+	 *   display   3    36 / 42                   a hero
+	 *
+	 * `micro` is not invented: the library hand-writes text-[0.625rem] ten times
+	 * for exactly this role, and 5/6 of dense's 12px is that value.
+	 *
+	 * Leading and tracking ride with the size, so a rung is one class. Both
+	 * tighten as the rung grows, which is ordinary optical setting and matters
+	 * more here than usual — era's default stack is monospace, whose display
+	 * sizes read loose without it.
+	 *
+	 * @use the type ladder — micro (eyebrow/legend) < body (controls) < lede
+	 * (the paragraph under a title) < heading < title < display. Derived from
+	 * --era-text, so the ratio between any two rungs holds at every density;
+	 * leading and tracking ride with the size, so a rung is one class.
+	 *
+	 * body and micro deliberately carry NO line-height: `text-body` is worn by
+	 * every control in the library, where leading is owned by era-text-trim and
+	 * leading-none. Giving it a default would re-space every control in era.
+	 * Use `leading-body` for running text, as before. */
+	--text-micro: calc(var(--era-text) * 5 / 6);
+	--text-micro--letter-spacing: 0.04em;
+	--text-lede: calc(var(--era-text) * 5 / 4);
+	--text-lede--line-height: 1.5;
+	--text-heading: calc(var(--era-text) * 3 / 2);
+	--text-heading--line-height: 1.3;
+	--text-heading--letter-spacing: -0.01em;
+	--text-title: calc(var(--era-text) * 2);
+	--text-title--line-height: 1.15;
+	--text-title--letter-spacing: -0.02em;
+	--text-display: calc(var(--era-text) * 3);
+	--text-display--line-height: 1.05;
+	--text-display--letter-spacing: -0.03em;
+	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */
+	--text-body: var(--era-text);
+	/* Prose leading — `leading-body` is the pair to `text-body`, and every piece
+	 * of text in the library that can wrap to a second line carries it. Enforced
+	 * at runtime by typography/prose-leading. */
+	--leading-body: var(--era-leading);
+	/* Radius ladder — Tailwind's own rounded-* names now walk era's concentric
+	 * ladder (rd-T = rd-xs + (h-T − h-icon)/2), ride the corners toggle, and
+	 * collapse to 0 on square. rounded-menu-item is the menu-row radius
+	 * (rd-md − panel-inset) that keeps rows concentric inside a rounded-control
+	 * panel on every surface. */
+	--radius-icon: var(--era-rd-icon);
+	--radius-pill: var(--era-rd-pill);
+	--radius-chip: var(--era-rd-chip);
+	--radius-control: var(--era-rd-control);
+	--radius-bar: var(--era-rd-bar);
+	--radius-menu-item: var(--era-item-rd);
+	/* Surface chrome — bare `shadow` is the resting control edge, shadow-lg the
+	 * floating panel, shadow-well the recessed container, shadow-pressed the
+	 * active/latched face, shadow-highlight the material half of hover feedback.
+	 * Flat renders them as none, bevel as chisels, glass as frosted rims — the
+	 * class stays the same. */
+	--shadow: var(--era-shadow);
+	/* v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints
+	 * auto-fix one to the other — alias both to the control edge so either
+	 * spelling renders era chrome. */
+	--shadow-sm: var(--era-shadow);
+	--shadow-lg: var(--era-shadow-lg);
+	--shadow-well: var(--era-shadow-well);
+	--shadow-pressed: var(--era-shadow-pressed);
+	--shadow-highlight: var(--era-highlight-shadow);
+	/* Surface fills — bg-well is the surface's own resting fill (pairs with
+	 * shadow-well for recessed chrome), bg-elevated the raised tier,
+	 * bg-highlight the transient
+	 * hover/focus/keyboard wash (pairs with shadow-highlight; latched states
+	 * stay on opaque bg-hover), bg-overlay the modal scrim. */
+	--color-well: var(--era-surface-bg);
+	--color-elevated: var(--era-surface-bg-elevated);
+	--color-highlight: var(--era-highlight);
+	--color-overlay: var(--era-overlay-bg);
+	/* THE SPACING SCALE — one entry per token, from which Tailwind derives the
+	 * WHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and
+	 * gap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.
+	 *
+	 * These were hand-written `@utility` blocks, which could only ever cover the
+	 * spellings someone remembered to write: `px-gutter` existed and `mt-gutter`
+	 * did not, `p-inset-control` existed and `pl-inset-control` did not, so the
+	 * library fell back to `mt-(--era-gap)` in exactly the places the named API
+	 * was supposed to cover. One line here replaces twenty blocks and leaves no
+	 * spelling missing.
+	 *
+	 * ONLY genuine spacing belongs here. The namespace is shared across
+	 * h/w/p/m/gap, so a name registered here means the same length in ALL of
+	 * them — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay
+	 * hand-written per prefix below, and the two vocabularies deliberately share
+	 * no word: icon/pill/chip/control/bar are heights; gutter, card, panel,
+	 * content, menu, field and the inset-* names are spacing. Registering a tier
+	 * name here would silently make `px-control` mean 24px of side padding. */
+	--spacing-gutter: var(--era-gap);
+	--spacing-panel: var(--era-pad-panel);
+	--spacing-card: var(--era-pad-card);
+	--spacing-content: var(--era-pad-content);
+	--spacing-menu: var(--era-panel-inset);
+	--spacing-field: var(--era-field-px);
+	/* @use text-symmetric content padding — (tier − text)/2, the inset that
+	 * vertically centres body text in its tier; px-inset-control is a text
+	 * button's side padding, p-inset-control a code block's. */
+	--spacing-inset-pill: var(--era-inset-pill);
+	--spacing-inset-chip: var(--era-inset-chip);
+	--spacing-inset-control: var(--era-inset-control);
+	/* @use the concentric inset for a nested pair — (h-container − h-child)/2,
+	 * the gap that makes a child control sit evenly inside its container, and
+	 * the radius step that keeps their corners concentric. Named for the pair it
+	 * joins: gap-icon-inset-control seats an icon in a control. */
+	--spacing-icon-inset-pill: var(--era-icon-inset-pill);
+	--spacing-icon-inset-chip: var(--era-icon-inset-chip);
+	--spacing-icon-inset-control: var(--era-icon-inset-control);
+	--spacing-icon-inset-bar: var(--era-icon-inset-bar);
+	--spacing-pill-inset-chip: var(--era-pill-inset-chip);
+	--spacing-pill-inset-control: var(--era-pill-inset-control);
+	--spacing-pill-inset-bar: var(--era-pill-inset-bar);
+	--spacing-chip-inset-control: var(--era-chip-inset-control);
+	--spacing-chip-inset-bar: var(--era-chip-inset-bar);
+	--spacing-control-inset-bar: var(--era-control-inset-bar);
+	/* @use the glyph size for a tier — the INK inside the box, not the box
+	 * (size-glyph-pill is the dismiss × in a pill, size-pill is the pill). */
+	--spacing-glyph-icon: var(--era-glyph-icon);
+	--spacing-glyph-pill: var(--era-glyph-pill);
+	/* @use the recessed field fill — bg-field is a text input's resting well,
+	 * bg-field-highlight its focused/hovered face. */
+	--color-field: var(--era-field-bg);
+	--color-field-highlight: var(--era-field-highlight);
+	/* @use the stacking tier for chrome that renders at the document root —
+	 * z-chrome (taskbar) < z-drawer (slide-over) < z-overlay (every dialog,
+	 * menu, popover and scrim) < z-toast < z-debug. A component ordering its
+	 * OWN parts inside an isolated context keeps small integers instead; see
+	 * styles/layers.css for why the two are different things. */
+	--z-index-chrome: var(--era-z-chrome);
+	--z-index-drawer: var(--era-z-drawer);
+	--z-index-overlay: var(--era-z-overlay);
+	--z-index-toast: var(--era-z-toast);
+	--z-index-debug: var(--era-z-debug);
+	/* Motion — bare transition utilities default to the motion axis, so
+	 * `transition-colors` alone is on-design (0s at instant, longer at extra).
+	 * ease-base/duration-base name the axis explicitly for overrides. */
+	--default-transition-duration: var(--era-duration);
+	--default-transition-timing-function: var(--era-ease);
+	--ease-base: var(--era-ease);
+	/* Surface divider colors: border-divider, bg-divider-faded, … */
+	--color-divider: var(--era-divider-color);
+	--color-divider-faded: var(--era-divider-faded);
+	--color-background: var(--color-1);
+	--color-foreground: var(--color-fg);
+	--color-1: var(--color-1);
+	--color-2: var(--color-2);
+	--color-3: var(--color-3);
+	--color-4: var(--color-4);
+	--color-5: var(--color-5);
+	--color-6: var(--color-6);
+	--color-7: var(--color-7);
+	--color-8: var(--color-8);
+	--color-9: var(--color-9);
+	--color-10: var(--color-10);
+	--color-11: var(--color-11);
+	--color-12: var(--color-12);
+	--color-border: var(--color-border);
+	--color-surface: var(--color-surface);
+	--color-hover: var(--color-hover);
+	--color-fg: var(--color-fg);
+	--color-bright: var(--color-bright);
+	--color-muted: var(--color-muted);
+	/* The standing pill fill — --era-fill, the latched counterpart of the
+	 * transient highlight. Surface-owned: a composing wash on flat/bevel, the
+	 * opaque swatch on glass. */
+	--color-fill: var(--era-fill);
+	--color-link: var(--color-link);
+	--color-primary: var(--color-primary);
+	--color-primary-fg: var(--color-primary-fg);
+	--color-primary-hover: var(--color-primary-hover);
+	--color-destructive: var(--color-destructive);
+	--color-destructive-fg: var(--color-destructive-fg);
+	--color-success: var(--color-success);
+	--color-success-fg: var(--color-success-fg);
+	--color-warning: var(--color-warning);
+	--color-warning-fg: var(--color-warning-fg);
+	--color-info: var(--color-info);
+	--color-info-fg: var(--color-info-fg);
+}
+
+/* ------------------------------------------------------------------ */
+/* Named tier + spacing utilities                                     */
+/*                                                                    */
+/* What is left here is what the SPACING SCALE above cannot express: */
+/* a tier is a HEIGHT, and the spacing namespace is shared across     */
+/* h/w/p/m/gap, so registering `control` there would silently make    */
+/* px-control mean 24px of side padding. Tier names therefore get one */
+/* hand-written block per prefix that needs them, and the two         */
+/* vocabularies share no word. Kept terse; the ladder itself is       */
+/* documented in density.css and on the /spacing page.                */
+/* ------------------------------------------------------------------ */
+
+/* @use the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip
+ * (standalone pill) · h-control (control) · h-bar (bar); the named form of
+ * h-(--era-h-*). */
+@utility h-icon {
+	height: var(--era-h-icon);
+}
+@utility h-pill {
+	height: var(--era-h-pill);
+}
+@utility h-chip {
+	height: var(--era-h-chip);
+}
+@utility h-control {
+	height: var(--era-h-control);
+}
+@utility h-bar {
+	height: var(--era-h-bar);
+}
+
+/* @use minimum tier height for containers that may grow — a bar that is at
+ * least lg-tier but can wrap (min-h-bar). */
+@utility min-h-icon {
+	min-height: var(--era-h-icon);
+}
+@utility min-h-pill {
+	min-height: var(--era-h-pill);
+}
+@utility min-h-chip {
+	min-height: var(--era-h-chip);
+}
+@utility min-h-control {
+	min-height: var(--era-h-control);
+}
+@utility min-h-bar {
+	min-height: var(--era-h-bar);
+}
+
+/* @use a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or
+ * a column measured in tiers rather than in content. */
+@utility w-icon {
+	width: var(--era-h-icon);
+}
+@utility w-pill {
+	width: var(--era-h-pill);
+}
+@utility w-chip {
+	width: var(--era-h-chip);
+}
+@utility w-control {
+	width: var(--era-h-control);
+}
+@utility w-bar {
+	width: var(--era-h-bar);
+}
+
+/* @use a minimum tier WIDTH — the floor that makes a single-glyph control render
+ * as a square rather than a skinny pill (min-w-control on an icon button,
+ * min-w-pill on a badge). These could not exist before the ladder was renamed:
+ * the old rungs were sm/md/lg, and Tailwind's container scale already owns
+ * min-w-md and min-w-lg, so the names collided and every call site had to write
+ * min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing. */
+@utility min-w-icon {
+	min-width: var(--era-h-icon);
+}
+@utility min-w-pill {
+	min-width: var(--era-h-pill);
+}
+@utility min-w-chip {
+	min-width: var(--era-h-chip);
+}
+@utility min-w-control {
+	min-width: var(--era-h-control);
+}
+@utility min-w-bar {
+	min-width: var(--era-h-bar);
+}
+
+/* @use a tier-sized square — size-icon is THE icon size (a Lucide glyph beside
+ * body text), size-control a square control face. */
+@utility size-icon {
+	width: var(--era-h-icon);
+	height: var(--era-h-icon);
+}
+@utility size-pill {
+	width: var(--era-h-pill);
+	height: var(--era-h-pill);
+}
+@utility size-chip {
+	width: var(--era-h-chip);
+	height: var(--era-h-chip);
+}
+@utility size-control {
+	width: var(--era-h-control);
+	height: var(--era-h-control);
+}
+@utility size-bar {
+	width: var(--era-h-bar);
+	height: var(--era-h-bar);
+}
+
+/* @use pill side padding — the wider-than-vertical horizontal breathing room
+ * badge/chip text wants (glyph-advance derived, ~2× the vertical inset). */
+@utility px-pill {
+	padding-inline: var(--era-pill-px);
+}
+@utility px-chip {
+	padding-inline: var(--era-chip-px);
+}
+@utility pl-pill {
+	padding-left: var(--era-pill-px);
+}
+@utility pr-pill {
+	padding-right: var(--era-pill-px);
+}
+@utility pl-chip {
+	padding-left: var(--era-chip-px);
+}
+@utility pr-chip {
+	padding-right: var(--era-chip-px);
+}
+
+/* @use padding for a content panel that sits UNDER a section header row — the
+ * even-padding exception, and the reason it is not called p-section: it
+ * deliberately under-pays the block start. For an evenly padded content panel
+ * use p-section, which is the plain token.
+ *
+ * A content panel always follows a section header ROW, and that row already
+ * contributes its own slack: the heading's text sits in an h-bar bar, so there
+ * is (h-bar − text)/2 of empty bar under its glyphs before the panel even
+ * starts. Padding the panel evenly on top of that spends the space twice — the
+ * header ends up floating between the section above and the paragraph it
+ * introduces rather than binding to it.
+ *
+ * So the block-start pays only the REMAINDER. The target is the indent: the
+ * space under a heading should measure the same as the space beside the text,
+ * which is --era-pad-content. The header row already supplies (h-bar − text)/2 of
+ * it, so the panel adds what's left, and heading-to-paragraph reads equal to
+ * the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
+ * the header's slack unaccounted for and the heading still detached.
+ *
+ * Both terms are density-derived, so the equality holds at every mode; the
+ * max() is the floor for a hypothetical mode where the row's slack would
+ * exceed the inset outright. */
+@utility p-section {
+	padding: var(--era-pad-content);
+	padding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));
+}
+
+/* @use the motion axis as an explicit transition-duration — for the rare case
+ * a utility (not the transition-* default) needs to name it; 0s at
+ * data-motion="instant", longer at "extra". */
+@utility duration-base {
+	transition-duration: var(--era-duration);
+}

package/dist/styles/utilities.css

@@ -0,0 +1,5 @@
+/* Internal utility modules. Consumers continue to import the stable styles entrypoint. */
+@import './utilities/interaction.css';
+@import './utilities/materials.css';
+@import './utilities/geometry.css';
+@import './utilities/public.css';

package/dist/ui/card/card.svelte

@@ -1,58 +1,8 @@
-<script lang="ts" module>
-	import { cn, tv } from '../../utils/index.js';
-
-	export const cardVariants = tv({
-		base: 'block w-full rounded-bar text-left text-fg',
-		variants: {
-			tone: {
-				elevated: 'bg-elevated shadow-sm',
-				surface: 'bg-well',
-				// The recessed tier, the container-level twin of --era-field-bg. The
-				// other two tones are RAISED (elevated) and level (surface); there was
-				// no way to say "sunken", so anything wanting one — a tool's output
-				// pane, an expanded chip body — hand-rolled the fill and shadow-well
-				// pair instead of importing this.
-				well: 'bg-field shadow-well',
-				flat: ''
-			},
-			// Sectioned layout (header / body / footer with dividers) omits the
-			// outer padding — each section pads itself so dividers run edge-to-edge.
-			// `p-0` (not just "no class") so a <button> card drops the browser's
-			// default button padding and lines up with the <div>/<a> variants.
-			//
-			// EVEN on all four sides. This carried a half-height top padding
-			// (pt-gutter against pb-pad-md) borrowed from `p-section`, whose
-			// asymmetry is earned: a content panel always follows a section heading
-			// ROW, and that row's own bar already contributes slack above the text,
-			// so padding evenly on top of it spends the space twice. A card has no
-			// row above it — its own top edge IS the boundary — so the borrowed
-			// rule had nothing to subtract and simply made every card top-heavy
-			// (4px above the content against 8px below it, at dense). A consumer
-			// reported it as "cards aren't evenly spaced", which is exactly what it
-			// 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. 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. 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: '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 }
-	});
-</script>
-
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+	import { cardVariants } from './variants.js';
 
 	type CardElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;
 

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

@@ -1,46 +1,3 @@
-export declare const cardVariants: import("tailwind-variants").TVReturnType<{
-    tone: {
-        elevated: "bg-elevated shadow-sm";
-        surface: "bg-well";
-        well: "bg-field shadow-well";
-        flat: "";
-    };
-    sectioned: {
-        true: "p-0";
-        false: "p-card";
-    };
-    interactive: {
-        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: {
-        elevated: "bg-elevated shadow-sm";
-        surface: "bg-well";
-        well: "bg-field shadow-well";
-        flat: "";
-    };
-    sectioned: {
-        true: "p-0";
-        false: "p-card";
-    };
-    interactive: {
-        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: {
-        elevated: "bg-elevated shadow-sm";
-        surface: "bg-well";
-        well: "bg-field shadow-well";
-        flat: "";
-    };
-    sectioned: {
-        true: "p-0";
-        false: "p-card";
-    };
-    interactive: {
-        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';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 type CardElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;

package/dist/ui/card/variants.d.ts

@@ -0,0 +1,44 @@
+/** Card layout and interaction semantics. Surface implementations paint them. */
+export declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
+        flat: "";
+    };
+    sectioned: {
+        true: "p-0";
+        false: "p-card";
+    };
+    interactive: {
+        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: {
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
+        flat: "";
+    };
+    sectioned: {
+        true: "p-0";
+        false: "p-card";
+    };
+    interactive: {
+        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: {
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
+        flat: "";
+    };
+    sectioned: {
+        true: "p-0";
+        false: "p-card";
+    };
+    interactive: {
+        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>>;

package/dist/ui/card/variants.js

@@ -0,0 +1,20 @@
+import { tv } from '../../utils/index.js';
+/** Card layout and interaction semantics. Surface implementations paint them. */
+export const cardVariants = tv({
+    base: 'block w-full rounded-bar text-left text-fg',
+    variants: {
+        tone: {
+            elevated: 'bg-elevated shadow-sm',
+            surface: 'bg-well',
+            well: 'bg-field shadow-well',
+            flat: ''
+        },
+        // Section padding is owned per section so dividers can run edge-to-edge.
+        sectioned: { true: 'p-0', false: 'p-card' },
+        // `pressable` moves the single data-era-press-content plane on bevel.
+        interactive: {
+            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 }
+});

package/dist/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { menuChoiceItem } from '../menu-recipes.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,9 +14,6 @@
 <ContextMenu.CheckboxItem
 	bind:ref
 	bind:checked
-	class={cn(
-		'flex h-control cursor-pointer items-center rounded-menu-item px-inset-control text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
-		className
-	)}
+	class={cn(menuChoiceItem, className)}
 	{...restProps}
 />

package/dist/ui/context-menu/context-menu-group-heading.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { menuGroupHeading } from '../menu-recipes.js';
 
 	let {
 		ref = $bindable(null),
@@ -9,8 +10,4 @@
 	}: ContextMenu.GroupHeadingProps = $props();
 </script>
 
-<ContextMenu.GroupHeading
-	bind:ref
-	class={cn('flex h-control items-center px-inset-control text-body text-muted', className)}
-	{...restProps}
-/>
+<ContextMenu.GroupHeading bind:ref class={cn(menuGroupHeading, className)} {...restProps} />

package/dist/ui/context-menu/context-menu-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import { cn, type PartProps } from '../../utils/index.js';
+	import { menuItem } from '../menu-recipes.js';
 
 	let {
 		ref = $bindable(null),
@@ -10,13 +11,6 @@
 	}: PartProps<ContextMenu.ItemProps> = $props();
 </script>
 
-<ContextMenu.Item
-	bind:ref
-	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
-		className
-	)}
-	{...restProps}
->
+<ContextMenu.Item bind:ref class={cn(menuItem, className)} {...restProps}>
 	{@render children?.()}
 </ContextMenu.Item>

package/dist/ui/context-menu/context-menu-radio-item.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { menuChoiceItem } from '../menu-recipes.js';
 
 	let {
 		ref = $bindable(null),
@@ -9,11 +10,4 @@
 	}: ContextMenu.RadioItemProps = $props();
 </script>
 
-<ContextMenu.RadioItem
-	bind:ref
-	class={cn(
-		'flex h-control cursor-pointer items-center rounded-menu-item px-inset-control text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
-		className
-	)}
-	{...restProps}
-/>
+<ContextMenu.RadioItem bind:ref class={cn(menuChoiceItem, className)} {...restProps} />

package/dist/ui/context-menu/context-menu-separator.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { ContextMenu } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { menuSeparator } from '../menu-recipes.js';
 
 	let {
 		ref = $bindable(null),
@@ -9,8 +10,4 @@
 	}: ContextMenu.SeparatorProps = $props();
 </script>
 
-<ContextMenu.Separator
-	bind:ref
-	class={cn('my-[calc(var(--era-gap)/2)] h-px bg-divider-faded', className)}
-	{...restProps}
-/>
+<ContextMenu.Separator bind:ref class={cn(menuSeparator, className)} {...restProps} />