@sableui/react 0.9.0 → 0.10.0

package/dist/styles.css

@@ -35,6 +35,11 @@
    to check. */
 @import "./themes/sable/sable.css";
 
+/* The palette: nine colour families and a scale under every tone, generated
+   from whatever theme is painting (bg-blue-500, text-tone-1-700,
+   border-neutral-200). Generated; see src/lib/palette.ts. */
+@import "./palette.css";
+
 /* Scan the package for utility classes (path is relative to THIS file). Covers
    both workspace source (.ts/.tsx next to this file in src/) and the compiled
    dist (.js next to the copied styles.css), so the same file works in both. */
@@ -95,18 +100,18 @@
 	--color-sidebar-ring: var(--sidebar-ring);
 
 	/* Post-type tones + highlight (semantic — carry meaning) */
-	--color-tone-standard: var(--tone-standard);
-	--color-tone-collectible: var(--tone-collectible);
-	--color-tone-edition: var(--tone-edition);
+	--color-tone-3: var(--tone-3);
+	--color-tone-2: var(--tone-2);
+	--color-tone-1: var(--tone-1);
 	--color-tone-warning: var(--tone-warning);
 	--color-tone-info: var(--tone-info);
 	--color-highlight: var(--highlight);
 
 	/* Tone ink — theme-adaptive legible text/icon color ON a tone fill, so a
-	   component writes `text-tone-edition-foreground` (no palette name, no dark:). */
-	--color-tone-standard-foreground: var(--tone-standard-foreground);
-	--color-tone-collectible-foreground: var(--tone-collectible-foreground);
-	--color-tone-edition-foreground: var(--tone-edition-foreground);
+	   component writes `text-tone-1-foreground` (no palette name, no dark:). */
+	--color-tone-3-foreground: var(--tone-3-foreground);
+	--color-tone-2-foreground: var(--tone-2-foreground);
+	--color-tone-1-foreground: var(--tone-1-foreground);
 	--color-tone-warning-foreground: var(--tone-warning-foreground);
 	--color-tone-info-foreground: var(--tone-info-foreground);
 	/* Status text: a status colour drawn on a surface. Tailwind resolves each
@@ -404,9 +409,9 @@
    neutral (black/white buttons): then the art must keep the brand, or Ember's
    embers go grey. Set the hook to the brand wherever --primary stops being it. */
 	--art-1: var(--theme-art-1, oklch(from var(--tone-info) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
-	--art-2: var(--theme-art-2, oklch(from var(--tone-collectible) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
-	--art-3: var(--theme-art-3, oklch(from var(--tone-edition) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
-	--art-4: var(--theme-art-4, oklch(from var(--tone-standard) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-2: var(--theme-art-2, oklch(from var(--tone-2) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-3: var(--theme-art-3, oklch(from var(--tone-1) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
+	--art-4: var(--theme-art-4, oklch(from var(--tone-3) clamp(0.5, calc(l + 0.16), 0.9) max(calc(c * 1.25), 0.1) h));
 	--art-5: var(--theme-art-5, transparent);
 	--art-6: var(--theme-art-6, transparent);
 	--art-ground: var(--theme-art-ground, color-mix(in oklab, var(--theme-art-brand, var(--primary)) 55%, oklch(from var(--tone-info) 0.3 c h)));
@@ -415,54 +420,111 @@
 	--art-grain: var(--theme-art-grain, 0);
 }
 
+/* ==========================================================================
+   Vertical rhythm — the baseline is DERIVED from the body text, the way a
+   page is set in print: one line of body copy (size × leading) is the unit,
+   divided into a few equal steps that everything else lands on. See
+   DESIGN.md → Vertical rhythm.
+
+   --baseline        one line of body text, rounded so it divides evenly
+   --baseline-split  how many steps a line divides into. A theme picks it with
+                     --theme-baseline-split; thirds (8px at 15/24) by default.
+                     Halves read calmer and more editorial; finer than thirds
+                     stops giving structure unless every value is chosen by eye.
+   --baseline-step   the step: line heights round to it, and the spacing scale
+                     is half of it (so `p-4` is two steps)
+   --leading-scale   how open the reading text is set. This is what makes a
+                     look Airy or Compact: more leading is a longer line, so a
+                     bigger step, so every gap grows with the text it spaces.
+                     A theme sets --theme-leading-scale; the customizer sets it.
+
+   The step is whole px (rounded with `round(…, 1px)`), so a rule on the step
+   is never a fraction that drifts. --spacing derives from it — at Sable's
+   defaults that is exactly Tailwind's 0.25rem at any root size, so nothing
+   moves until the type does.
+
+   Declared on every element that can re-declare the type tokens, not just
+   :root: a custom property resolves where it is declared, so a preset-scoped
+   preview would otherwise keep the page's step.
+   ========================================================================== */
+
+:root,
+[data-sable-theme] {
+	--leading-scale: var(--theme-leading-scale, 1);
+	--baseline-split: var(--theme-baseline-split, 3);
+	--baseline-step: max(
+		2px,
+		round(
+			nearest,
+			calc(var(--type-body-md-size, 0.9375rem) * var(--type-body-md-leading, 1.55) * var(--leading-scale) / var(--baseline-split)),
+			1px
+		)
+	);
+	--baseline: calc(var(--baseline-step) * var(--baseline-split));
+	--spacing: calc(var(--baseline-step) / 2);
+	/* Every Stack/Row/Grid gap number is in steps. */
+	--rhythm-unit: calc(var(--spacing) * 2);
+	/* Gutters are in steps too: a Grid's row gap is vertical space. 2 steps on
+	   phones, 3 on desktop, snapped in between rather than fluid. */
+	--grid-gutter: round(
+		nearest,
+		clamp(calc(var(--rhythm-unit) * 2), calc(var(--rhythm-unit) * 1.6 + 1vw), calc(var(--rhythm-unit) * 3)),
+		var(--rhythm-unit)
+	);
+}
+
 /* ==========================================================================
    Typography — six tiers. Each utility bundles size + weight + line-height +
    tracking. Compose with color/margin only; never override the four paired
    properties individually. Mono uses the theme's --font-mono.
 
    Leading is authored as a RATIO (the `--type-*-leading` hooks every theme
-   tunes) and rendered on the 0.25rem grid: `round(nearest, ratio × 1em,
-   0.25rem)`. Ratios alone landed almost nowhere on the grid DESIGN.md
-   promises (15px body at 1.55 = 23.25px, a 36px h1 at 1.15 = 41.4px), so
-   stacked text drifted off the vertical rhythm a fraction of a pixel per
-   line. Rounding keeps each tier's (and each theme's) intended proportion and
-   snaps the result — 24px and 40px there — at any root size, because the grid
-   step is in rem too. The `ui-*` tier is already whole px on the grid.
+   tunes) and rendered on the baseline step: `round(nearest, ratio × 1em,
+   var(--baseline-step))`. Ratios alone landed almost nowhere on a grid (15px
+   body at 1.55 = 23.25px, a 36px h1 at 1.15 = 41.4px), so stacked text
+   drifted off the rhythm a fraction of a pixel per line. Rounding keeps each
+   tier's (and each theme's) intended proportion and snaps the result — 24px
+   and 40px there at the default 8px step.
+
+   The reading tiers (body, title, caption, mono-md) also take
+   --leading-scale, so Airy opens the text itself; display, heading and label
+   leading is a shape the theme chose and only snaps. The `ui-*` tier is
+   already whole px on its own 4px grid (the workspace register).
    ========================================================================== */
 
 @utility text-display-4xl {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-display-4xl-size, clamp(4.5rem, 12vw, 12rem));
 	font-weight: var(--type-display-4xl-weight, 800);
-	line-height: round(nearest, calc(var(--type-display-4xl-leading, 0.9) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-display-4xl-leading, 0.9) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-display-4xl-tracking, -0.05em);
 }
 @utility text-display-3xl {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-display-3xl-size, 6rem);
 	font-weight: var(--type-display-3xl-weight, 700);
-	line-height: round(nearest, calc(var(--type-display-3xl-leading, 0.95) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-display-3xl-leading, 0.95) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-display-3xl-tracking, -0.045em);
 }
 @utility text-display-2xl {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-display-2xl-size, 4.5rem);
 	font-weight: var(--type-display-2xl-weight, 700);
-	line-height: round(nearest, calc(var(--type-display-2xl-leading, 1) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-display-2xl-leading, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-display-2xl-tracking, -0.04em);
 }
 @utility text-display-xl {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-display-xl-size, 3.75rem);
 	font-weight: var(--type-display-xl-weight, 700);
-	line-height: round(nearest, calc(var(--type-display-xl-leading, 1.05) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-display-xl-leading, 1.05) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-display-xl-tracking, -0.035em);
 }
 @utility text-display-lg {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-display-lg-size, 3rem);
 	font-weight: var(--type-display-lg-weight, 700);
-	line-height: round(nearest, calc(var(--type-display-lg-leading, 1.1) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-display-lg-leading, 1.1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-display-lg-tracking, -0.03em);
 }
 
@@ -470,28 +532,28 @@
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-heading-1-size, 2.25rem);
 	font-weight: var(--type-heading-weight, 600);
-	line-height: round(nearest, calc(var(--type-heading-1-leading, 1.15) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-heading-1-leading, 1.15) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-heading-1-tracking, -0.025em);
 }
 @utility text-heading-2 {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-heading-2-size, 1.75rem);
 	font-weight: var(--type-heading-weight, 600);
-	line-height: round(nearest, calc(var(--type-heading-2-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-heading-2-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-heading-2-tracking, -0.02em);
 }
 @utility text-heading-3 {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-heading-3-size, 1.375rem);
 	font-weight: var(--type-heading-weight, 600);
-	line-height: round(nearest, calc(var(--type-heading-3-leading, 1.25) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-heading-3-leading, 1.25) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-heading-3-tracking, -0.015em);
 }
 @utility text-heading-4 {
 	font-family: var(--font-display, var(--font-sans));
 	font-size: var(--type-heading-4-size, 1.125rem);
 	font-weight: var(--type-heading-weight, 600);
-	line-height: round(nearest, calc(var(--type-heading-4-leading, 1.3) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-heading-4-leading, 1.3) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-heading-4-tracking, -0.01em);
 }
 
@@ -506,13 +568,13 @@
 @utility text-title-lg {
 	font-size: var(--type-title-lg-size, 1rem);
 	font-weight: var(--type-title-weight, 600);
-	line-height: round(nearest, calc(var(--type-title-leading, 1.4) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-title-leading, 1.4) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-title-tracking, -0.01em);
 }
 @utility text-title-sm {
 	font-size: var(--type-title-sm-size, 0.875rem);
 	font-weight: var(--type-title-weight, 600);
-	line-height: round(nearest, calc(var(--type-title-leading, 1.4) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-title-leading, 1.4) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-title-sm-tracking, -0.005em);
 }
 
@@ -531,20 +593,20 @@
 @utility text-body-lg {
 	font-size: var(--type-body-lg-size, 1.0625rem);
 	font-weight: var(--type-body-lg-weight, 400);
-	line-height: round(nearest, calc(var(--type-body-lg-leading, 1.6) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-lg-leading, 1.6) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-body-lg-tracking, -0.005em);
 	text-wrap: pretty;
 }
 @utility text-body-md {
 	font-size: var(--type-body-md-size, 0.9375rem);
 	font-weight: var(--type-body-md-weight, 400);
-	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-body-md-tracking, -0.005em);
 }
 @utility text-body-sm {
 	font-size: var(--type-body-sm-size, 0.8125rem);
 	font-weight: var(--type-body-sm-weight, 400);
-	line-height: round(nearest, calc(var(--type-body-sm-leading, 1.5) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-sm-leading, 1.5) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-body-sm-tracking, 0);
 }
 /* The dense floor of the body ramp — running text in operator consoles,
@@ -553,7 +615,7 @@
 @utility text-body-xs {
 	font-size: var(--type-body-xs-size, 0.75rem);
 	font-weight: var(--type-body-xs-weight, 400);
-	line-height: round(nearest, calc(var(--type-body-xs-leading, 1.5) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-xs-leading, 1.5) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-body-xs-tracking, 0);
 }
 
@@ -580,10 +642,11 @@
 	list-style: disc;
 	padding-inline-start: 1.25em;
 	font-size: var(--type-body-md-size, 0.9375rem);
-	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	color: var(--foreground);
 	& > li + li {
-		margin-block-start: --spacing(1.5);
+		/* One baseline step: items stay on the rhythm. */
+		margin-block-start: --spacing(2);
 	}
 	& > li::marker {
 		color: var(--muted-foreground);
@@ -593,10 +656,11 @@
 	list-style: decimal;
 	padding-inline-start: 1.5em;
 	font-size: var(--type-body-md-size, 0.9375rem);
-	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	color: var(--foreground);
 	& > li + li {
-		margin-block-start: --spacing(1.5);
+		/* One baseline step: items stay on the rhythm. */
+		margin-block-start: --spacing(2);
 	}
 	& > li::marker {
 		color: var(--muted-foreground);
@@ -608,18 +672,19 @@
 	grid-template-columns: max-content minmax(0, 1fr);
 	align-items: baseline;
 	column-gap: --spacing(6);
-	row-gap: --spacing(3);
+	/* Two baseline steps between pairs, so each row starts on the rhythm. */
+	row-gap: --spacing(4);
 	/* The values' type and ink live on the list and the <dd>s inherit them, so a
 	   text-* utility on a <dd> (text-success, text-mono-md) simply wins. The term
 	   and the wrapping rules sit in :where(), which adds no specificity. */
 	font-size: var(--type-body-md-size, 0.9375rem);
-	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-body-md-leading, 1.55) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-body-md-tracking, -0.005em);
 	color: var(--foreground);
 	& > :where(dt) {
 		font-size: var(--type-label-md-size, 0.75rem);
 		font-weight: var(--type-label-md-weight, 600);
-		line-height: round(nearest, calc(var(--type-label-md-leading, 1.2) * 1em), 0.25rem);
+		line-height: round(nearest, calc(var(--type-label-md-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 		letter-spacing: var(--type-label-md-tracking, 0);
 		color: var(--muted-foreground);
 	}
@@ -638,19 +703,19 @@
 @utility text-label-lg {
 	font-size: var(--type-label-lg-size, 0.875rem);
 	font-weight: var(--type-label-lg-weight, 600);
-	line-height: round(nearest, calc(var(--type-label-lg-leading, 1.25) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-label-lg-leading, 1.25) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-label-lg-tracking, -0.005em);
 }
 @utility text-label-md {
 	font-size: var(--type-label-md-size, 0.75rem);
 	font-weight: var(--type-label-md-weight, 600);
-	line-height: round(nearest, calc(var(--type-label-md-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-label-md-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-label-md-tracking, 0);
 }
 @utility text-label-sm {
 	font-size: var(--type-label-sm-size, 0.6875rem);
 	font-weight: var(--type-label-sm-weight, 600);
-	line-height: round(nearest, calc(var(--type-label-sm-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-label-sm-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-label-sm-tracking, 0);
 }
 /* Sentence case like every other label (UI text is sentence case). The
@@ -660,14 +725,14 @@
 @utility text-label-xs {
 	font-size: var(--type-label-xs-size, 0.6875rem);
 	font-weight: var(--type-label-xs-weight, 600);
-	line-height: round(nearest, calc(var(--type-label-xs-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-label-xs-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-label-xs-tracking, 0.01em);
 	text-transform: var(--type-label-xs-transform, none);
 }
 @utility text-caption {
 	font-size: var(--type-caption-size, 0.75rem);
 	font-weight: var(--type-caption-weight, 400);
-	line-height: round(nearest, calc(var(--type-caption-leading, 1.4) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-caption-leading, 1.4) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-caption-tracking, 0);
 }
 
@@ -678,7 +743,7 @@
 @utility text-overline {
 	font-size: var(--type-overline-size, 0.75rem);
 	font-weight: var(--type-overline-weight, 600);
-	line-height: round(nearest, calc(var(--type-overline-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-overline-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-overline-tracking, 0.08em);
 	text-transform: var(--type-overline-transform, uppercase);
 }
@@ -690,7 +755,7 @@
 	font-family: var(--font-mono);
 	font-size: var(--type-mono-xl-size, 1.75rem);
 	font-weight: var(--type-mono-xl-weight, 500);
-	line-height: round(nearest, calc(var(--type-mono-xl-leading, 1.15) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-mono-xl-leading, 1.15) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-mono-xl-tracking, -0.01em);
 	font-variant-numeric: tabular-nums;
 }
@@ -698,7 +763,7 @@
 	font-family: var(--font-mono);
 	font-size: var(--type-mono-lg-size, 1.25rem);
 	font-weight: var(--type-mono-lg-weight, 500);
-	line-height: round(nearest, calc(var(--type-mono-lg-leading, 1.25) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-mono-lg-leading, 1.25) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-mono-lg-tracking, 0);
 	font-variant-numeric: tabular-nums;
 }
@@ -706,7 +771,7 @@
 	font-family: var(--font-mono);
 	font-size: var(--type-mono-md-size, 0.8125rem);
 	font-weight: var(--type-mono-md-weight, 400);
-	line-height: round(nearest, calc(var(--type-mono-md-leading, 1.5) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-mono-md-leading, 1.5) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-mono-md-tracking, 0);
 	font-variant-numeric: tabular-nums;
 }
@@ -717,7 +782,7 @@
 	font-family: var(--font-mono);
 	font-size: var(--type-mono-caption-size, 0.75rem);
 	font-weight: var(--type-mono-caption-weight, 400);
-	line-height: round(nearest, calc(var(--type-mono-caption-leading, 1.4) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-mono-caption-leading, 1.4) * var(--leading-scale, 1) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-mono-caption-tracking, 0);
 	font-variant-numeric: tabular-nums;
 }
@@ -725,7 +790,7 @@
 	font-family: var(--font-mono);
 	font-size: var(--type-mono-sm-size, 0.6875rem);
 	font-weight: var(--type-mono-sm-weight, 500);
-	line-height: round(nearest, calc(var(--type-mono-sm-leading, 1.2) * 1em), 0.25rem);
+	line-height: round(nearest, calc(var(--type-mono-sm-leading, 1.2) * 1em), var(--baseline-step, 0.25rem));
 	letter-spacing: var(--type-mono-sm-tracking, 0.02em);
 	font-variant-numeric: tabular-nums;
 }
@@ -1549,15 +1614,23 @@
 
 /* Toasts keep clear of an open Sheet's actions. A right sheet's pinned footer
    (Check out) sat under a bottom-right toast, and its close button under a
-   top-right one. Where there is room, the stack moves beside the sheet (both are
-   w-95); on a narrower screen a bottom stack moves to the top, away from the
-   footer. A bottom sheet sends a bottom stack to the top at any width. */
+   top-right one.
+   - Where there is room, a stack on the sheet's side moves beside it. The sheet
+     publishes its real width (--sable-sheet-right-w / -left-w) while mounted.
+   - On a narrower screen the sheet leaves no room beside it. A bottom stack
+     moves to the top, off the footer's actions; a top stack stays, over the
+     header.
+   - A bottom sheet sends a bottom stack to the top, a top sheet sends a top
+     stack to the bottom, at any width.
+   A stack that moves to the other edge re-anchors its stacked toasts too: they
+   hang from the viewport's edge and grow away from it, so a bottom-anchored
+   deck at the top would grow off the screen. */
 @media (width >= 52rem) {
 	:root:has([data-sable-sheet="right"][data-open]) [data-sable-toast-viewport][data-position$="right"] {
-		right: calc(min(var(--spacing) * 95, 90vw) + var(--spacing) * 4);
+		right: calc(var(--sable-sheet-right-w, min(var(--spacing) * 95, 90vw)) + var(--spacing) * 4);
 	}
 	:root:has([data-sable-sheet="left"][data-open]) [data-sable-toast-viewport][data-position$="left"] {
-		left: calc(min(var(--spacing) * 95, 90vw) + var(--spacing) * 4);
+		left: calc(var(--sable-sheet-left-w, min(var(--spacing) * 95, 90vw)) + var(--spacing) * 4);
 	}
 }
 @media (width < 52rem) {
@@ -1566,10 +1639,45 @@
 		top: calc(var(--spacing) * 4);
 		bottom: auto;
 	}
+	:root:has([data-sable-sheet="right"][data-open]) [data-sable-toast-viewport][data-position="bottom-right"] [data-sable-toast-stacked],
+	:root:has([data-sable-sheet="left"][data-open]) [data-sable-toast-viewport][data-position="bottom-left"] [data-sable-toast-stacked] {
+		top: 0;
+		bottom: auto;
+		transform-origin: top;
+		--toast-dir: 1;
+		&::after {
+			top: 100%;
+			bottom: auto;
+		}
+	}
 }
 :root:has([data-sable-sheet="bottom"][data-open]) [data-sable-toast-viewport][data-position^="bottom"] {
 	top: calc(var(--spacing) * 4);
 	bottom: auto;
+	& [data-sable-toast-stacked] {
+		top: 0;
+		bottom: auto;
+		transform-origin: top;
+		--toast-dir: 1;
+		&::after {
+			top: 100%;
+			bottom: auto;
+		}
+	}
+}
+:root:has([data-sable-sheet="top"][data-open]) [data-sable-toast-viewport][data-position^="top"] {
+	top: auto;
+	bottom: calc(var(--spacing) * 4);
+	& [data-sable-toast-stacked] {
+		top: auto;
+		bottom: 0;
+		transform-origin: bottom;
+		--toast-dir: -1;
+		&::after {
+			top: auto;
+			bottom: 100%;
+		}
+	}
 }
 
 /* `Col span={{ base, md, lg }}` / `start={…}` — each breakpoint resolves to the

package/dist/{theme-provider-S0NVJs2Y.d.ts → theme-provider-CdSicAad.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as ThemeManifest } from './_contract-C2M1SjBf.js';
+import { T as ThemeManifest } from './_contract-CkqXDVww.js';
 
 declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
 declare const DEFAULT_THEME_ID: string;

package/dist/themes/_contract.js

@@ -32,25 +32,25 @@ var SEMANTIC_TOKENS = [
   "destructive",
   "destructive-foreground",
   // Success — the positive-state counterpart to destructive (mirrors it 1:1).
-  // Backed by caribbean-green; a SEPARATE token from the `tone-standard`
+  // Backed by caribbean-green; a SEPARATE token from the `tone-3`
   // post-type so success-as-state can be retuned without moving the post tone.
   "success",
   "success-foreground",
   // Tones (semantic — carry meaning, not decoration)
-  "tone-standard",
-  "tone-collectible",
-  "tone-edition",
+  "tone-3",
+  "tone-2",
+  "tone-1",
   "tone-info",
   "tone-warning",
   "highlight",
   // Tone ink — the legible text/icon color ON a tone fill. Theme-adaptive:
   // because a tone fill flips lightness with the mode (dark 600/700 in light
   // mode, lighter dark-tuned values in dark mode), its ink must flip too. These
-  // let a component write `text-tone-edition-foreground` — an intent token with
+  // let a component write `text-tone-1-foreground` — an intent token with
   // no palette name and no `dark:` variant — instead of naming palette steps.
-  "tone-standard-foreground",
-  "tone-collectible-foreground",
-  "tone-edition-foreground",
+  "tone-3-foreground",
+  "tone-2-foreground",
+  "tone-1-foreground",
   "tone-info-foreground",
   "tone-warning-foreground",
   "highlight-foreground",
@@ -218,6 +218,7 @@ var TYPE_OVERLINE_TOKENS = [
   "type-overline-tracking",
   "type-overline-transform"
 ];
+var RHYTHM_TOKENS = ["theme-leading-scale", "theme-baseline-split"];
 var DENSITY_TOKENS = [
   "control-xs",
   "control-sm",
@@ -300,6 +301,16 @@ var ART_TOKENS = [
   "art-softness",
   "art-grain"
 ];
+var PALETTE_TOKENS = ["palette-harmony"];
+var PALETTE_SLOT_TOKENS = [
+  "palette-wash",
+  "palette-wash-strong",
+  "palette-edge",
+  "palette-dot",
+  "palette-solid",
+  "palette-text",
+  "palette-solid-ink"
+];
 var DERIVED_EDGE_TOKENS = ["border-floating"];
 var TYPE_UI_TOKENS = [
   "type-ui-md-size",
@@ -317,7 +328,10 @@ export {
   DERIVED_EDGE_TOKENS,
   LAYERING_TOKENS,
   MOTION_TOKENS,
+  PALETTE_SLOT_TOKENS,
+  PALETTE_TOKENS,
   RADIUS_TOKENS,
+  RHYTHM_TOKENS,
   SEMANTIC_TOKENS,
   TYPE_OVERLINE_TOKENS,
   TYPE_REFINEMENT_TOKENS,

package/dist/themes/atelier/atelier.css

@@ -2,7 +2,7 @@
    Mono Editorial — a Sable theme, developed from reference analysis.
 
    Components must reference the SEMANTIC tokens (--background, --primary,
-   --tone-edition, …), never any palette ramp directly. See themes/_contract.ts.
+   --tone-1, …), never any palette ramp directly. See themes/_contract.ts.
    ========================================================================== */
 
 [data-sable-theme="atelier"] {
@@ -115,17 +115,17 @@
 	--success: oklch(50% 0.10 173);
 	--success-text: oklch(50% 0.10 173);
 	--success-foreground: #ffffff;
-	--tone-standard: oklch(45% 0 0);
-	--tone-collectible: oklch(46% 0.11 300);
-	--tone-edition: oklch(46% 0.09 173);
+	--tone-3: oklch(45% 0 0);
+	--tone-2: oklch(46% 0.11 300);
+	--tone-1: oklch(46% 0.09 173);
 	--tone-info: oklch(47% 0.10 250);
 	--tone-info-text: oklch(47% 0.10 250);
 	--tone-warning: oklch(52% 0.12 52);
 	--tone-warning-text: oklch(52% 0.12 52);
 	--highlight: oklch(93% 0 0);
-	--tone-standard-foreground: #ffffff;
-	--tone-collectible-foreground: #ffffff;
-	--tone-edition-foreground: #ffffff;
+	--tone-3-foreground: #ffffff;
+	--tone-2-foreground: #ffffff;
+	--tone-1-foreground: #ffffff;
 	--tone-info-foreground: #ffffff;
 	--tone-warning-foreground: #ffffff;
 	--highlight-foreground: #000000;
@@ -198,17 +198,17 @@
 	--success: oklch(74% 0.12 173);
 	--success-text: oklch(74% 0.12 173);
 	--success-foreground: oklch(13% 0 0);
-	--tone-standard: oklch(80% 0 0);
-	--tone-collectible: oklch(76% 0.12 300);
-	--tone-edition: oklch(76% 0.10 173);
+	--tone-3: oklch(80% 0 0);
+	--tone-2: oklch(76% 0.12 300);
+	--tone-1: oklch(76% 0.10 173);
 	--tone-info: oklch(76% 0.10 250);
 	--tone-info-text: oklch(76% 0.10 250);
 	--tone-warning: oklch(80% 0.13 52);
 	--tone-warning-text: oklch(80% 0.13 52);
 	--highlight: oklch(26% 0 0);
-	--tone-standard-foreground: oklch(13% 0 0);
-	--tone-collectible-foreground: oklch(13% 0 0);
-	--tone-edition-foreground: oklch(13% 0 0);
+	--tone-3-foreground: oklch(13% 0 0);
+	--tone-2-foreground: oklch(13% 0 0);
+	--tone-1-foreground: oklch(13% 0 0);
 	--tone-info-foreground: oklch(13% 0 0);
 	--tone-warning-foreground: oklch(13% 0 0);
 	--highlight-foreground: #ffffff;

package/dist/themes/atelier/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-C2M1SjBf.js';
+import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
 
 /**
  * Mono Editorial — a Sable theme. Concrete token values live in