@bysages/core 0.0.0 → 0.1.0

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import tokensStyles from "@bysages/tokens/styles";
 //#region src/theme.ts
 /** Each scene pairs with a default accent — the pigment that carries its
 * context (civic identity is zhusha, never an error color; tech stays
@@ -6,7 +7,12 @@ const SCENE_DEFAULT_ACCENT = {
 	civic: "zhusha",
 	enterprise: "qinghua",
 	studio: "celadon",
-	tech: "ink"
+	tech: "ink",
+	cupertino: "ink",
+	expressive: "zhusha",
+	fluent: "qinghua",
+	material: "celadon",
+	sketch: "zhusha"
 };
 /** Each scene also pairs with a contrast tier — civic serves elders, so it
 * speaks at the loud tier by default. "auto" contrast resolves here;
@@ -15,7 +21,12 @@ const SCENE_DEFAULT_CONTRAST = {
 	civic: "high",
 	enterprise: "normal",
 	studio: "normal",
-	tech: "normal"
+	tech: "normal",
+	cupertino: "normal",
+	expressive: "normal",
+	fluent: "normal",
+	material: "normal",
+	sketch: "normal"
 };
 const STORAGE_KEY = "bs-theme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
@@ -205,19 +216,25 @@ function detachDynamicLight() {
 //#endregion
 //#region src/ink-ripple.ts
 /**
-* Ink ripple — the press feedback of the paper-and-ink register. Where
-* Material spreads a hard circle, ink bleeds: a soft wash of the element's
-* own pigment diluting outward from the press point, gone before it draws
-* attention to itself.
+* Ink ripple — the press feedback of the paper-and-ink register: a wash of
+* the element's own pigment bleeding outward from the press point. The
+* bleed is two-phase, answering the hand rather than the click — it spreads
+* while the pointer holds (`data-ripple="press"`) and dissolves when it
+* lifts (`data-ripple="release"`). A scene retunes the wash through the
+* `--bs-ripple-*` tokens; a register that presses without a wash silences
+* it with a zero opacity.
 *
 * The bleed's CSS lives in the base stylesheet, keyed on
-* `data-motion~="ink-ripple"`; this module watches presses and marks the
-* press point. Reduced motion collapses the bleed to a state change, as
+* `data-motion~="ink-ripple"`; this module watches pointers and marks the
+* phase. Reduced motion collapses the bleed to a state change, as
 * everywhere else in the system.
 *
 * @module
 */
 const RIPPLE_SELECTOR = "[data-motion~='ink-ripple']";
+/** A wash released before this long still plays out to here before it
+* dissolves — a quick tap earns a visible wave, not a flicker. */
+const MIN_PRESS_MS = 225;
 let detachPress;
 /** Watch for presses anywhere inside `root` (default: the document) and
 * bleed ink from the press point of the nearest opt-in element. Safe to
@@ -225,9 +242,7 @@ let detachPress;
 function attachInkRipple(root) {
 	detachInkRipple();
 	if (typeof document === "undefined") return () => {};
-	const onEnd = (event) => {
-		if (event.target instanceof HTMLElement) delete event.target.dataset.ripple;
-	};
+	const held = /* @__PURE__ */ new Map();
 	const onDown = (event) => {
 		if (!(event instanceof PointerEvent)) return;
 		if (event.pointerType !== "touch" && event.button !== 0) return;
@@ -236,18 +251,44 @@ function attachInkRipple(root) {
 		const host = target.closest(RIPPLE_SELECTOR);
 		if (!(host instanceof HTMLElement)) return;
 		const rect = host.getBoundingClientRect();
-		host.style.setProperty("--bs-ripple-x", `${(event.clientX - rect.left).toFixed(1)}px`);
-		host.style.setProperty("--bs-ripple-y", `${(event.clientY - rect.top).toFixed(1)}px`);
+		const px = event.clientX - rect.left;
+		const py = event.clientY - rect.top;
+		host.style.setProperty("--bs-ripple-x", `${px.toFixed(1)}px`);
+		host.style.setProperty("--bs-ripple-y", `${py.toFixed(1)}px`);
+		host.style.setProperty("--bs-ripple-dx", `${(rect.width / 2 - px).toFixed(1)}px`);
+		host.style.setProperty("--bs-ripple-dy", `${(rect.height / 2 - py).toFixed(1)}px`);
 		delete host.dataset.ripple;
 		host.offsetWidth;
-		host.dataset.ripple = "run";
+		host.dataset.ripple = "press";
+		held.set(event.pointerId, {
+			host,
+			at: performance.now()
+		});
+	};
+	const onUp = (event) => {
+		if (!(event instanceof PointerEvent)) return;
+		const press = held.get(event.pointerId);
+		if (!press) return;
+		held.delete(event.pointerId);
+		const remain = MIN_PRESS_MS - (performance.now() - press.at);
+		if (remain > 0) setTimeout(() => {
+			if (press.host.dataset.ripple === "press") press.host.dataset.ripple = "release";
+		}, remain);
+		else press.host.dataset.ripple = "release";
+	};
+	const onAnimationEnd = (event) => {
+		if (event.target instanceof HTMLElement && event.target.dataset.ripple === "release") delete event.target.dataset.ripple;
 	};
 	const scope = root ?? document;
 	scope.addEventListener("pointerdown", onDown, { passive: true });
-	scope.addEventListener("animationend", onEnd, true);
+	scope.addEventListener("pointerup", onUp, { passive: true });
+	scope.addEventListener("pointercancel", onUp, { passive: true });
+	scope.addEventListener("animationend", onAnimationEnd, true);
 	detachPress = () => {
 		scope.removeEventListener("pointerdown", onDown);
-		scope.removeEventListener("animationend", onEnd, true);
+		scope.removeEventListener("pointerup", onUp);
+		scope.removeEventListener("pointercancel", onUp);
+		scope.removeEventListener("animationend", onAnimationEnd, true);
 	};
 	return detachPress;
 }
@@ -257,10 +298,6 @@ function detachInkRipple() {
 	detachPress = void 0;
 }
 //#endregion
-//#region ../tokens/dist/js/styles.mjs
-/** Stylesheet for the full token layer, generated from dist/css/index.css. */
-var styles_default = "@layer bs.tokens;\n\n@layer bs.tokens {\n  /**\n   * Do not edit directly, this file was auto-generated.\n   */\n\n  :root, :host {\n    --bs-color-gray-25: oklch(0.985 0.003 92);\n    --bs-color-gray-50: oklch(0.968 0.005 90);\n    --bs-color-gray-100: oklch(0.928 0.007 88);\n    --bs-color-gray-200: oklch(0.872 0.009 86);\n    --bs-color-gray-300: oklch(0.795 0.011 84);\n    --bs-color-gray-400: oklch(0.665 0.013 82);\n    --bs-color-gray-500: oklch(0.568 0.014 80);\n    --bs-color-gray-600: oklch(0.482 0.014 78);\n    --bs-color-gray-700: oklch(0.405 0.013 76);\n    --bs-color-gray-800: oklch(0.318 0.011 76);\n    --bs-color-gray-850: oklch(0.272 0.01 76);\n    --bs-color-gray-900: oklch(0.23 0.009 76);\n    --bs-color-gray-925: oklch(0.188 0.008 76);\n    --bs-color-gray-950: oklch(0.15 0.007 76);\n    --bs-color-gray-975: oklch(0.118 0.006 76);\n    --bs-color-brand-50: oklch(0.962 0.014 255);\n    --bs-color-brand-100: oklch(0.93 0.031 255);\n    --bs-color-brand-200: oklch(0.885 0.056 255);\n    --bs-color-brand-300: oklch(0.815 0.09 255);\n    --bs-color-brand-400: oklch(0.72 0.122 255);\n    --bs-color-brand-500: oklch(0.6 0.15 255);\n    --bs-color-brand-600: oklch(0.53 0.155 255);\n    --bs-color-brand-700: oklch(0.46 0.15 255);\n    --bs-color-brand-800: oklch(0.395 0.13 255);\n    --bs-color-brand-900: oklch(0.33 0.105 255);\n    --bs-color-brand-950: oklch(0.26 0.08 255);\n    --bs-color-celadon-50: oklch(0.962 0.014 205);\n    --bs-color-celadon-100: oklch(0.928 0.028 205);\n    --bs-color-celadon-200: oklch(0.88 0.05 205);\n    --bs-color-celadon-300: oklch(0.81 0.072 205);\n    --bs-color-celadon-400: oklch(0.715 0.082 205);\n    --bs-color-celadon-500: oklch(0.63 0.085 205);\n    --bs-color-celadon-600: oklch(0.56 0.085 205);\n    --bs-color-celadon-700: oklch(0.485 0.08 205);\n    --bs-color-celadon-800: oklch(0.41 0.068 205);\n    --bs-color-celadon-900: oklch(0.34 0.054 205);\n    --bs-color-celadon-950: oklch(0.265 0.04 205);\n    --bs-color-zhusha-50: oklch(0.964 0.016 28);\n    --bs-color-zhusha-100: oklch(0.926 0.036 28);\n    --bs-color-zhusha-200: oklch(0.874 0.066 28);\n    --bs-color-zhusha-300: oklch(0.806 0.098 28);\n    --bs-color-zhusha-400: oklch(0.716 0.13 28);\n    --bs-color-zhusha-500: oklch(0.625 0.15 28);\n    --bs-color-zhusha-600: oklch(0.55 0.16 28);\n    --bs-color-zhusha-700: oklch(0.472 0.148 28);\n    --bs-color-zhusha-800: oklch(0.398 0.125 28);\n    --bs-color-zhusha-900: oklch(0.328 0.098 28);\n    --bs-color-zhusha-950: oklch(0.254 0.072 28);\n    --bs-color-success-50: oklch(0.962 0.024 155);\n    --bs-color-success-100: oklch(0.922 0.048 155);\n    --bs-color-success-200: oklch(0.868 0.082 155);\n    --bs-color-success-300: oklch(0.794 0.108 155);\n    --bs-color-success-400: oklch(0.71 0.122 155);\n    --bs-color-success-500: oklch(0.6 0.112 155);\n    --bs-color-success-600: oklch(0.52 0.1 155);\n    --bs-color-success-700: oklch(0.445 0.088 155);\n    --bs-color-success-800: oklch(0.375 0.072 155);\n    --bs-color-success-900: oklch(0.31 0.056 155);\n    --bs-color-success-950: oklch(0.24 0.04 155);\n    --bs-color-warning-50: oklch(0.968 0.028 78);\n    --bs-color-warning-100: oklch(0.934 0.056 74);\n    --bs-color-warning-200: oklch(0.892 0.086 70);\n    --bs-color-warning-300: oklch(0.836 0.112 67);\n    --bs-color-warning-400: oklch(0.76 0.126 66);\n    --bs-color-warning-500: oklch(0.665 0.125 65);\n    --bs-color-warning-600: oklch(0.55 0.122 65);\n    --bs-color-warning-700: oklch(0.495 0.11 63);\n    --bs-color-warning-800: oklch(0.415 0.092 62);\n    --bs-color-warning-900: oklch(0.34 0.074 62);\n    --bs-color-warning-950: oklch(0.262 0.054 62);\n    --bs-color-danger-50: oklch(0.964 0.018 25);\n    --bs-color-danger-100: oklch(0.924 0.04 25);\n    --bs-color-danger-200: oklch(0.87 0.07 25);\n    --bs-color-danger-300: oklch(0.798 0.106 25);\n    --bs-color-danger-400: oklch(0.712 0.138 25);\n    --bs-color-danger-500: oklch(0.6 0.15 25);\n    --bs-color-danger-600: oklch(0.51 0.15 25);\n    --bs-color-danger-700: oklch(0.44 0.135 25);\n    --bs-color-danger-800: oklch(0.372 0.112 25);\n    --bs-color-danger-900: oklch(0.306 0.088 25);\n    --bs-color-danger-950: oklch(0.236 0.064 25);\n    --bs-color-info-50: oklch(0.962 0.014 250);\n    --bs-color-info-100: oklch(0.924 0.03 250);\n    --bs-color-info-200: oklch(0.872 0.054 250);\n    --bs-color-info-300: oklch(0.802 0.082 250);\n    --bs-color-info-400: oklch(0.718 0.11 250);\n    --bs-color-info-500: oklch(0.6 0.125 250);\n    --bs-color-info-600: oklch(0.505 0.125 250);\n    --bs-color-info-700: oklch(0.432 0.112 250);\n    --bs-color-info-800: oklch(0.364 0.092 250);\n    --bs-color-info-900: oklch(0.3 0.072 250);\n    --bs-color-info-950: oklch(0.232 0.052 250);\n    --bs-space-1: 0.25rem;\n    --bs-space-2: 0.5rem;\n    --bs-space-3: 0.75rem;\n    --bs-space-4: 1rem;\n    --bs-space-5: 1.25rem;\n    --bs-space-6: 1.5rem;\n    --bs-space-7: 1.75rem;\n    --bs-space-8: 2rem;\n    --bs-space-10: 2.5rem;\n    --bs-space-12: 3rem;\n    --bs-space-16: 4rem;\n    --bs-space-20: 5rem;\n    --bs-space-24: 6rem;\n    --bs-radius-none: 0rem;\n    --bs-radius-xs: 0.25rem;\n    --bs-radius-sm: 0.375rem;\n    --bs-radius-md: 0.5rem;\n    --bs-radius-lg: 0.75rem;\n    --bs-radius-xl: 1rem;\n    --bs-radius-2xl: 1.5rem;\n    --bs-radius-full: 9999px;\n  }\n\n\n  /* Light theme — light as shadow, the paper-and-ink register: hierarchy reads through\n     the paper ladder (the ground sits in ambient shade, raised surfaces catch\n     the light), hairline borders, and restrained cast shadows in warm ink.\n     Controls stay crisp — a paper-white surface, one hairline, and shadow-xs.\n     Primary defaults to ink so the interface stays monochrome and solemn; the\n     pigment accents (qinghua, celadon, zhusha) live in accent.css. */\n\n  :root,\n  :host,\n  [data-theme=\"light\"],\n  :host([data-theme=\"light\"]) {\n    color-scheme: light;\n\n    /* Surfaces: the ground rests in ambient shade; raised surfaces catch the\n       light. Warm paper whites throughout — pure #ffffff never appears, it\n       would read clinical against the ink. */\n    --bs-color-surface-0: var(--bs-color-gray-50);\n    --bs-color-surface-1: var(--bs-color-gray-25);\n    --bs-color-surface-2: oklch(0.988 0.004 95);\n    --bs-color-surface-3: oklch(0.988 0.004 95);\n    --bs-color-surface-4: oklch(0.988 0.004 95);\n    --bs-color-surface-5: oklch(0.988 0.004 95);\n    --bs-color-surface-inset: var(--bs-color-gray-100);\n    /* The inverted surface — ink on paper — hosts floating labels like\n       tooltips that must read against the page, never blend into it. */\n    --bs-color-surface-inverse: var(--bs-color-gray-800);\n    --bs-color-scrim: oklch(0.15 0.007 76 / 0.4);\n\n    --bs-color-text-primary: var(--bs-color-gray-900);\n    --bs-color-text-secondary: var(--bs-color-gray-600);\n    --bs-color-text-tertiary: var(--bs-color-gray-500);\n    --bs-color-text-disabled: var(--bs-color-gray-400);\n    --bs-color-text-inverse: var(--bs-color-surface-2);\n    /* Ink on a solid pigment fill: paper under daylight, kneaded bright\n       under lacquer night (see the dark theme). */\n    --bs-color-ink-on-fill: var(--bs-color-surface-2);\n    --bs-ink-knead: 0%;\n\n    --bs-color-border: var(--bs-color-gray-200);\n    --bs-color-border-strong: var(--bs-color-gray-300);\n\n    /* Focus is a halo of light: a crisp inner line inside a soft, wide glow.\n       The inset variant serves parts flush against a container edge (steppers),\n       where an outer halo would spill past it. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 16%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary is ink by default — solemn, unhurried, industry-neutral. The\n       hover deepens the ink into the paper; the pigment accents override the\n       whole block (see accent.css). */\n    --bs-color-primary: var(--bs-color-gray-800);\n    --bs-color-primary-hover: var(--bs-color-gray-900);\n    --bs-color-primary-active: var(--bs-color-gray-925);\n    --bs-color-primary-text: var(--bs-color-surface-2);\n    /* The solid-fill body: pigments rest at full strength on paper — night\n       kneads them (see the dark theme), daylight does not. */\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: var(--bs-color-gray-100);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-800);\n    --bs-color-primary-border: var(--bs-color-gray-300);\n\n    /* Fixed semantic pigments — bamboo, ochre, cinnabar, ultramarine. They do\n       not follow the accent theme: an error is always cinnabar-red, a warning\n       always ochre, whatever pigment the brand rides. */\n    --bs-color-success: var(--bs-color-success-600);\n    --bs-color-success-hover: var(--bs-color-success-700);\n    --bs-color-success-subtle: var(--bs-color-success-100);\n    --bs-color-success-subtle-text: var(--bs-color-success-800);\n\n    --bs-color-warning: var(--bs-color-warning-600);\n    --bs-color-warning-hover: var(--bs-color-warning-700);\n    --bs-color-warning-subtle: var(--bs-color-warning-100);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-800);\n\n    --bs-color-danger: var(--bs-color-danger-600);\n    --bs-color-danger-hover: var(--bs-color-danger-700);\n    --bs-color-danger-subtle: var(--bs-color-danger-100);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-800);\n\n    --bs-color-info: var(--bs-color-info-600);\n    --bs-color-info-hover: var(--bs-color-info-700);\n    --bs-color-info-subtle: var(--bs-color-info-100);\n    --bs-color-info-subtle-text: var(--bs-color-info-800);\n\n    /* Lighting — elevation shadows are computed, never copy-pasted. Every\n       shadow draws its ink from --bs-shadow-ink, this theme's warm shadow hue,\n       shifts with --bs-light-x/-y (where the key light stands), and spreads\n       with --bs-light-reach (how high the surface floats). Custom properties\n       resolve their own var() references at the declaring element, so these\n       composite tokens always carry theme ink; a colored surface that casts in\n       its own color composes its shadow inline from these parts mixed with its\n       tint — see the dialog trigger. Restraint ladder: controls carry only\n       shadow-xs; cards rise on elevation-1/2; menus and popovers separate on\n       elevation-3; dialogs own elevation-4/5. */\n    --bs-shadow-ink: oklch(0.3 0.02 80);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    /* Weighted hairlines: the 1px edge everything rides, and the 3px\n       status edge an alert earns. */\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 5%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent);\n    --bs-elevation-2:\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 6%, transparent),\n      var(--bs-light-x) calc(3px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 9%, transparent);\n    --bs-elevation-3:\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 7%, transparent),\n      var(--bs-light-x) calc(5px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent);\n    --bs-elevation-4:\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 8%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(28px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent),\n      var(--bs-light-x) calc(28px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(56px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 12%, transparent);\n    --bs-elevation-5:\n      var(--bs-light-x) calc(6px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 10%, transparent),\n      var(--bs-light-x) calc(16px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(40px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-16px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 14%, transparent);\n  }\n\n\n  /* Dark theme — lacquer night: the room dims into warm lacquer black,\n     and text turns to paper. Surfaces still brighten as they rise (e0 darkest\n     → e5 lightest) — at night the ladder of light, not the cast shadow, does\n     the separating. Primary inverts: paper-white buttons set ink on fire\n     gently against the dark. */\n\n  [data-theme=\"dark\"],\n  :host([data-theme=\"dark\"]) {\n    color-scheme: dark;\n\n    /* Lacquer surfaces: warm black at every step, never pure #000. */\n    --bs-color-surface-0: oklch(0.165 0.008 75);\n    --bs-color-surface-1: oklch(0.205 0.009 75);\n    --bs-color-surface-2: oklch(0.245 0.01 76);\n    --bs-color-surface-3: oklch(0.272 0.01 76);\n    --bs-color-surface-4: oklch(0.29 0.01 76);\n    --bs-color-surface-5: oklch(0.31 0.01 76);\n    --bs-color-surface-inset: oklch(0.135 0.007 75);\n    /* The inverted surface — paper on lacquer — hosts floating labels like\n       tooltips; at night the inversion reads as a slip of bright paper. */\n    --bs-color-surface-inverse: var(--bs-color-gray-100);\n    --bs-color-scrim: oklch(0.05 0.01 75 / 0.6);\n\n    --bs-color-text-primary: oklch(0.925 0.006 90);\n    --bs-color-text-secondary: var(--bs-color-gray-300);\n    --bs-color-text-tertiary: var(--bs-color-gray-400);\n    --bs-color-text-disabled: var(--bs-color-gray-500);\n    --bs-color-text-inverse: var(--bs-color-gray-900);\n    /* Ink on a solid pigment fill: pigments knead a fifth of ink into their\n       bodies at night (a mid-tone fill carries neither deep nor pale text\n       past 4.5:1), so the ink turns bright paper. */\n    --bs-color-ink-on-fill: var(--bs-color-gray-25);\n    --bs-ink-knead: 20%;\n\n    --bs-color-border: oklch(0.31 0.01 78);\n    --bs-color-border-strong: oklch(0.4 0.012 78);\n\n    /* The halo reads brighter at night, like any light source does. */\n    --bs-color-focus: var(--bs-color-primary);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 22%, transparent);\n    --bs-focus-ring-width: 8px;\n    --bs-focus-ring:\n      0 0 0 1px var(--bs-color-focus), 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);\n    --bs-focus-ring-inset:\n      inset 0 0 0 1px var(--bs-color-focus), inset 0 0 0 4px var(--bs-focus-ring-color);\n\n    /* Primary inverts to paper — ink set down on lacquer. */\n    --bs-color-primary: oklch(0.93 0.007 90);\n    --bs-color-primary-hover: var(--bs-color-gray-200);\n    --bs-color-primary-active: var(--bs-color-gray-300);\n    --bs-color-primary-text: var(--bs-color-gray-900);\n    --bs-color-primary-fill: var(--bs-color-primary);\n    --bs-color-primary-fill-hover: var(--bs-color-primary-hover);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 10%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-gray-200);\n    --bs-color-primary-border: var(--bs-color-gray-700);\n\n    /* Semantic pigments lift to their lighter steps at night; the fixed hue\n       relationships (bamboo / ochre / cinnabar / ultramarine) never change. */\n    --bs-color-success: var(--bs-color-success-500);\n    --bs-color-success-hover: var(--bs-color-success-400);\n    --bs-color-success-subtle: color-mix(in oklab, var(--bs-color-success) 16%, transparent);\n    --bs-color-success-subtle-text: var(--bs-color-success-300);\n\n    --bs-color-warning: var(--bs-color-warning-500);\n    --bs-color-warning-hover: var(--bs-color-warning-400);\n    --bs-color-warning-subtle: color-mix(in oklab, var(--bs-color-warning) 16%, transparent);\n    --bs-color-warning-subtle-text: var(--bs-color-warning-300);\n\n    --bs-color-danger: var(--bs-color-danger-500);\n    --bs-color-danger-hover: var(--bs-color-danger-400);\n    --bs-color-danger-subtle: color-mix(in oklab, var(--bs-color-danger) 16%, transparent);\n    --bs-color-danger-subtle-text: var(--bs-color-danger-300);\n\n    --bs-color-info: var(--bs-color-info-500);\n    --bs-color-info-hover: var(--bs-color-info-400);\n    --bs-color-info-subtle: color-mix(in oklab, var(--bs-color-info) 16%, transparent);\n    --bs-color-info-subtle-text: var(--bs-color-info-300);\n\n    /* Elevation in the dark: cast shadows need far more opacity to read against\n       a dark ground, so every level carries a faint warm hairline of light to\n       cut the raised surface out of the one below it. Same lighting parts as\n       light — ink from --bs-shadow-ink, shifted by --bs-light-x/-y, spread by\n       --bs-light-reach; colored surfaces compose their tint inline. */\n    --bs-shadow-ink: oklch(0.04 0.01 75);\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 1;\n    --bs-hairline: 1px;\n    --bs-hairline-strong: 3px;\n    --bs-shadow-xs: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n      calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 35%, transparent);\n    --bs-elevation-0: none;\n    --bs-elevation-1:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.04),\n      var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(2px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--bs-shadow-ink) 32%, transparent);\n    --bs-elevation-2:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.05),\n      var(--bs-light-x) calc(2px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(4px * var(--bs-light-reach)) calc(-1px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(12px * var(--bs-light-reach)) calc(-2px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 36%, transparent);\n    --bs-elevation-3:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.06),\n      var(--bs-light-x) calc(4px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(8px * var(--bs-light-reach)) calc(-3px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent),\n      var(--bs-light-x) calc(10px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-4px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 40%, transparent);\n    --bs-elevation-4:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.07),\n      var(--bs-light-x) calc(8px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(16px * var(--bs-light-reach)) calc(-6px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent),\n      var(--bs-light-x) calc(24px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(48px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 44%, transparent);\n    --bs-elevation-5:\n      0 0 0 1px oklch(0.95 0.01 90 / 0.08),\n      var(--bs-light-x) calc(12px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(24px * var(--bs-light-reach)) calc(-8px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 52%, transparent),\n      var(--bs-light-x) calc(40px * var(--bs-light-reach) + var(--bs-light-y))\n        calc(80px * var(--bs-light-reach)) calc(-12px * var(--bs-light-reach))\n        color-mix(in oklab, var(--bs-shadow-ink) 48%, transparent);\n  }\n\n\n  /* Accent themes — the pigments. Primary is ink by default (theme-light/dark);\n     switching [data-accent] lays a different mineral pigment under the same\n     interface: qinghua (cobalt, the blue of blue-and-white porcelain), celadon\n     (aquatic green-blue), zhusha (cinnabar, the seal-paste red used sparingly\n     by civic sites for identity — never for errors; danger stays cinnabar-red\n     by way of --bs-color-danger, a separate token). Each accent redefines the\n     primary block and the focus hue; the fixed semantic pigments never follow. */\n\n  [data-accent=\"qinghua\"] {\n    --bs-color-primary: var(--bs-color-brand-600);\n    --bs-color-primary-hover: var(--bs-color-brand-700);\n    --bs-color-primary-active: var(--bs-color-brand-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-brand-100);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-800);\n    --bs-color-primary-border: var(--bs-color-brand-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"qinghua\"],\n  [data-theme=\"dark\"][data-accent=\"qinghua\"],\n  :host([data-theme=\"dark\"][data-accent=\"qinghua\"]) {\n    --bs-color-primary: var(--bs-color-brand-500);\n    --bs-color-primary-hover: var(--bs-color-brand-600);\n    --bs-color-primary-active: var(--bs-color-brand-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-brand-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-brand-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-brand-300);\n    --bs-color-primary-border: var(--bs-color-brand-700);\n  }\n\n  [data-accent=\"celadon\"] {\n    --bs-color-primary: var(--bs-color-celadon-600);\n    --bs-color-primary-hover: var(--bs-color-celadon-700);\n    --bs-color-primary-active: var(--bs-color-celadon-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-celadon-100);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-800);\n    --bs-color-primary-border: var(--bs-color-celadon-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"celadon\"],\n  [data-theme=\"dark\"][data-accent=\"celadon\"],\n  :host([data-theme=\"dark\"][data-accent=\"celadon\"]) {\n    --bs-color-primary: var(--bs-color-celadon-500);\n    --bs-color-primary-hover: var(--bs-color-celadon-600);\n    --bs-color-primary-active: var(--bs-color-celadon-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-celadon-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-celadon-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-celadon-300);\n    --bs-color-primary-border: var(--bs-color-celadon-700);\n  }\n\n  [data-accent=\"zhusha\"] {\n    --bs-color-primary: var(--bs-color-zhusha-600);\n    --bs-color-primary-hover: var(--bs-color-zhusha-700);\n    --bs-color-primary-active: var(--bs-color-zhusha-800);\n    --bs-color-primary-text: oklch(0.988 0.004 95);\n    --bs-color-primary-subtle: var(--bs-color-zhusha-100);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-800);\n    --bs-color-primary-border: var(--bs-color-zhusha-300);\n    --bs-color-focus: var(--bs-color-primary);\n  }\n\n  [data-theme=\"dark\"] [data-accent=\"zhusha\"],\n  [data-theme=\"dark\"][data-accent=\"zhusha\"],\n  :host([data-theme=\"dark\"][data-accent=\"zhusha\"]) {\n    --bs-color-primary: var(--bs-color-zhusha-500);\n    --bs-color-primary-hover: var(--bs-color-zhusha-600);\n    --bs-color-primary-active: var(--bs-color-zhusha-700);\n    /* A mid-tone pigment body carries neither deep nor pale text past\n       4.5:1, so the solid fill kneads toward black and reads with bright\n       paper ink. */\n    --bs-color-primary-fill: color-mix(in oklab, var(--bs-color-zhusha-500) 80%, black);\n    --bs-color-primary-fill-hover: color-mix(in oklab, var(--bs-color-zhusha-500) 70%, black);\n    --bs-color-primary-text: var(--bs-color-gray-25);\n    --bs-color-primary-subtle: color-mix(in oklab, var(--bs-color-primary) 16%, transparent);\n    --bs-color-primary-subtle-text: var(--bs-color-zhusha-300);\n    --bs-color-primary-border: var(--bs-color-zhusha-700);\n  }\n\n\n  /* Scene presets — one attribute that retunes the temperament of the whole\n     interface for its audience: civic serves elders and civic desks (square\n     seal-cut geometry, generous targets, loud contrast, an unhurried pace),\n     tech serves modern efficiency products (sharp, dense, quick), enterprise\n     is the quiet commercial baseline, studio the literati gathering for\n     design and editorial work.\n\n     A scene moves only what the paper allows: shape (radius), density, motion\n     pace, where the key light stands, and how far it reaches — never\n     interaction, never the semantic pigments. Each scene pairs with a default\n     accent and (for civic) the high-contrast tier; those pairings are applied\n     by the theme engine as plain data attributes, so the accent and contrast\n     rules — including their dark variants — carry them unchanged.\n\n     Explicit attributes always outrank the scene's bundled defaults: a\n     `[data-accent]`, `[data-contrast]`, or `[data-density]` set alongside\n     `[data-scene]` wins by cascade order. Note `:root` ties `[data-scene]` in\n     specificity (both 0,1,0), so this file must sit after every stylesheet\n     that declares these variables on `:root` (themes, primitives via accent's\n     placement) and before density.css, whose explicit tiers must win over\n     scene defaults. */\n\n  [data-scene=\"civic\"] {\n    /* 典章 — for elders and civic desks: the square-cut register of official\n       documents. Corners go true square (a seal is not round), targets grow\n       to the spacious ladder (48px controls), the pace slows so states are\n       never missed, and the light stays flat so nothing hides in a shadow. */\n    --bs-radius-sm: 0rem;\n    --bs-radius-md: 0.125rem;\n    --bs-radius-lg: 0.25rem;\n    --bs-radius-xl: 0.375rem;\n    --bs-radius-2xl: 0.5rem;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n    --bs-density-scale: 1.5;\n    --bs-motion-scale: 1.25;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.7;\n  }\n\n  [data-scene=\"enterprise\"] {\n    /* 信笺 — the measured commercial baseline: default geometry at a calmer\n       light, so long working sessions read quiet and the hairlines do the\n       talking. */\n    --bs-density-scale: 1;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.85;\n  }\n\n  [data-scene=\"studio\"] {\n    /* 雅集 — the literati gathering for design and editorial work: controls\n       keep the 6px seal edge, vessels round out generously, whitespace\n       breathes, and the light comes from the upper left, casting each\n       element's shadow gently toward the lower right. */\n    --bs-radius-md: 0.625rem;\n    --bs-radius-lg: 0.875rem;\n    --bs-radius-xl: 1.25rem;\n    --bs-radius-2xl: 1.75rem;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n    --bs-density-scale: 1.25;\n    --bs-motion-scale: 1;\n    --bs-light-x: 0.125rem;\n    --bs-light-y: 0.125rem;\n    --bs-light-reach: 1.25;\n  }\n\n  [data-scene=\"tech\"] {\n    /* 司南 — the modern precision instrument: near-square corners, dense\n       rows, a snappy pace, and a flat restrained light where hairlines carry\n       all the hierarchy. */\n    --bs-radius-sm: 0.125rem;\n    --bs-radius-md: 0.25rem;\n    --bs-radius-lg: 0.5rem;\n    --bs-radius-xl: 0.75rem;\n    --bs-radius-2xl: 1rem;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n    --bs-density-scale: 0.75;\n    --bs-motion-scale: 0.85;\n    --bs-light-x: 0px;\n    --bs-light-y: 0px;\n    --bs-light-reach: 0.5;\n  }\n\n\n  /* Density — decoration compresses, information never does: density scales whitespace and decoration\n     only. Type sizes and contrast stay fixed so compact can never trade away\n     readability. Control heights ride the density directly — a compact\n     workbench and an elder-friendly spacious screen are different products,\n     not the same one nudged by two pixels. */\n\n  /* The default scale sits behind :where() so a scene preset (an attribute,\n     same 0,1,0 as :root) can override it by cascade order, while the explicit\n     [data-density] tiers below still outrank scenes that come before them. */\n  :where(:root),\n  :where(:host) {\n    --bs-density-scale: 1;\n  }\n\n  :root,\n  :host {\n    /* Interior control parts (thumbs, knobs, check boxes, close buttons) are\n       decoration riding a control, not the control itself: they scale with\n       density and keep no readable floor, so a compact density actually\n       makes them smaller. */\n    --bs-part-size-sm: calc(1rem * var(--bs-density-scale));\n    --bs-part-size-md: calc(1.25rem * var(--bs-density-scale));\n    --bs-part-size-lg: calc(1.75rem * var(--bs-density-scale));\n\n    /* Density-scaled whitespace. */\n    --bs-padding-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-padding-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-padding-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-padding-lg: calc(var(--bs-space-4) * var(--bs-density-scale));\n    --bs-padding-xl: calc(var(--bs-space-6) * var(--bs-density-scale));\n    --bs-gap-xs: calc(var(--bs-space-1) * var(--bs-density-scale));\n    --bs-gap-sm: calc(var(--bs-space-2) * var(--bs-density-scale));\n    --bs-gap-md: calc(var(--bs-space-3) * var(--bs-density-scale));\n    --bs-gap-lg: calc(var(--bs-space-5) * var(--bs-density-scale));\n    --bs-gap-xl: calc(var(--bs-space-8) * var(--bs-density-scale));\n  }\n\n  /* Control heights per tier — the cross-system ladders (28/32/40 sits at\n     default; compact matches the Fiori/Ant workbench register; spacious\n     reaches the 48px targets elderly-vision research asks for). The base\n     tier sits behind :where() like the scale above, so a scene's bundled\n     ladder overrides it by cascade order while the explicit [data-density]\n     tiers below still outrank both. */\n  :where(:root),\n  :where(:host) {\n    --bs-control-height-sm: 1.75rem;\n    --bs-control-height-md: 2rem;\n    --bs-control-height-lg: 2.5rem;\n  }\n\n  [data-density=\"compact\"],\n  :host([data-density=\"compact\"]) {\n    --bs-density-scale: 0.75;\n    --bs-control-height-sm: 1.5rem;\n    --bs-control-height-md: 1.75rem;\n    --bs-control-height-lg: 2rem;\n  }\n\n  [data-density=\"comfortable\"],\n  :host([data-density=\"comfortable\"]) {\n    --bs-density-scale: 1.25;\n    --bs-control-height-sm: 2rem;\n    --bs-control-height-md: 2.25rem;\n    --bs-control-height-lg: 2.75rem;\n  }\n\n  [data-density=\"spacious\"],\n  :host([data-density=\"spacious\"]) {\n    --bs-density-scale: 1.5;\n    --bs-control-height-sm: 2.25rem;\n    --bs-control-height-md: 2.625rem;\n    --bs-control-height-lg: 3rem;\n  }\n\n\n  /* Contrast tier — softness comes from light and shadow, never from low contrast: the aesthetic softens through\n     light, never through gray-on-gray. The high tier pulls secondary text and\n     borders up to primary strength and widens the focus halo; it exists so\n     older and low-vision users get the same design, just louder. Surface\n     steps stay untouched — rows signal hover by one step of shade, and\n     flattening the ladder would silence every hover in the system. */\n\n  [data-contrast=\"high\"],\n  :host([data-contrast=\"high\"]) {\n    --bs-color-text-secondary: var(--bs-color-text-primary);\n    --bs-color-text-tertiary: var(--bs-color-text-secondary);\n    --bs-color-border: var(--bs-color-border-strong);\n    --bs-focus-ring-color: color-mix(in oklab, var(--bs-color-focus) 30%, transparent);\n  }\n\n  [data-theme=\"light\"][data-contrast=\"high\"],\n  :host([data-theme=\"light\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-400);\n  }\n\n  [data-theme=\"dark\"][data-contrast=\"high\"],\n  :host([data-theme=\"dark\"][data-contrast=\"high\"]) {\n    --bs-color-border-strong: var(--bs-color-gray-500);\n  }\n\n\n  /* Typography — two tracks: the voice and the chrome. The voice is the song\n     stack (upright, structured strokes — Noto Serif SC falling back through the\n     platform faces); headings and editorial narrative ride it, the way Western\n     systems let a serif carry voice. The chrome is the modern hei stack — MiSans\n     and HarmonyOS Sans lead, falling back into PingFang / YaHei so mixed CJK-Latin lines stay\n     on one rhythm. Sizes are fixed rem values outside the density scale; compact\n     UI may choose --bs-font-size-sm but never below it. */\n\n  :root,\n  :host {\n    --bs-font-sans:\n      MiSans, \"HarmonyOS Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, -apple-system,\n      \"Segoe UI\", Roboto, \"Noto Sans CJK SC\", sans-serif;\n    --bs-font-serif:\n      \"Noto Serif SC\", \"Source Han Serif SC\", \"Songti SC\", SimSun, \"Times New Roman\", Georgia, serif;\n    --bs-font-mono:\n      ui-monospace, \"Cascadia Code\", \"JetBrains Mono\", Consolas, \"PingFang SC\", \"Microsoft YaHei\",\n      monospace;\n\n    --bs-font-size-xs: 0.75rem;\n    --bs-font-size-sm: 0.8125rem;\n    --bs-font-size-md: 0.875rem;\n    --bs-font-size-base: 0.9375rem;\n    --bs-font-size-lg: 1.0625rem;\n    --bs-font-size-xl: 1.25rem;\n    --bs-font-size-2xl: 1.5rem;\n    --bs-font-size-3xl: 1.875rem;\n    --bs-font-size-4xl: 2.25rem;\n\n    --bs-line-height-tight: 1.25;\n    --bs-line-height-snug: 1.375;\n    --bs-line-height-normal: 1.5;\n    --bs-line-height-relaxed: 1.625;\n\n    /* Control labels carry a whisper of tracking — upright and unhurried is a\n       property of CJK typesetting, not of any single typeface. */\n    --bs-tracking-label: 0.02em;\n\n    --bs-font-weight-regular: 400;\n    --bs-font-weight-medium: 500;\n    --bs-font-weight-semibold: 600;\n    --bs-font-weight-bold: 700;\n  }\n\n\n  /* Motion — the ink-and-light grammar. Three rules and a floor:\n     Light needs time — shadows transition about 1.5x slower than the property\n     that raised them, so a shadow reads as cast light, not a sticker.\n     Ink bleeds — surfaces enter by fading AND dissolving (blur to sharp),\n     never popping. Puppets have strings — moving parts overshoot on the spring\n     curve, and lists follow one another with a small stagger.\n     Tokens drive all transitions; the reduced-motion block retunes them instead\n     of removing states, so opacity still communicates elevation changes. */\n\n  :root,\n  :host {\n    /* Durations ride --bs-motion-scale so a scene preset can tune the pace\n       (a snappier instrument, an unhurried civic register) without touching\n       the reduced-motion floor below, which declares 1ms directly. */\n    --bs-duration-instant: calc(80ms * var(--bs-motion-scale, 1));\n    --bs-duration-fast: calc(140ms * var(--bs-motion-scale, 1));\n    --bs-duration-base: calc(200ms * var(--bs-motion-scale, 1));\n    --bs-duration-slow: calc(320ms * var(--bs-motion-scale, 1));\n\n    --bs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n    --bs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);\n    --bs-ease-in: cubic-bezier(0.7, 0, 0.84, 0);\n    --bs-ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);\n\n    /* Stagger step for lists and menus — each follower comes up 24ms after\n       the one before it, like puppets lifted in sequence. */\n    --bs-stagger-step: 24ms;\n  }\n\n  /* Surfaces dissolve in like ink settling into paper: a fade, a soft focus\n     pulling sharp, and a one-percent settle. Panels and menus apply it on\n     their open state; exits stay plain opacity fades — faster, unobtrusive. */\n  @keyframes bs-ink-in {\n    from {\n      opacity: 0;\n      filter: blur(3px);\n      scale: 1.01;\n    }\n    to {\n      opacity: 1;\n      filter: blur(0);\n      scale: 1;\n    }\n  }\n\n  /* Followers rise into place on the string — a short lift with the spring\n     curve. Combine with per-item `animation-delay: calc(var(--bs-i) * var(--bs-stagger-step))`. */\n  @keyframes bs-item-in {\n    from {\n      opacity: 0;\n      translate: 0 4px;\n    }\n    to {\n      opacity: 1;\n      translate: 0 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root,\n    :host {\n      --bs-duration-instant: 1ms;\n      --bs-duration-fast: 1ms;\n      --bs-duration-base: 1ms;\n      --bs-duration-slow: 1ms;\n      --bs-stagger-step: 0ms;\n    }\n  }\n\n\n  /* Overlay stacking — one shared base for every dismissible layer (dialog,\n     popover, menu, select, …), ordered by zag's --layer-index offset so any\n     nesting combination stacks correctly. Per-component bases are forbidden. */\n  :root,\n  :host {\n    --bs-z-overlay: 1000;\n  }\n}\n";
-//#endregion
 //#region src/styles/base.ts
 /** Document-level guard rules. The machines drive visibility with the
 * `hidden` attribute (select/combobox item indicators), which any author
@@ -269,6 +306,21 @@ const baseCss = `
 [hidden] {
   display: none !important;
 }
+
+/* The field baseline: containers that hold text or choices fill their
+   container — width is the layout's decision, never the component's.
+   Zero specificity (:where), so a family's own declaration always wins
+   without a fight; intrinsic controls (buttons, chips, markers) are
+   simply not on the list. */
+:where([data-scope="select"], [data-scope="combobox"], [data-scope="listbox"],
+  [data-scope="cascade-select"], [data-scope="tree-select"],
+  [data-scope="number-input"], [data-scope="password-input"],
+  [data-scope="date-input"], [data-scope="date-picker"],
+  [data-scope="color-picker"], [data-scope="tags-input"],
+  [data-scope="fieldset"], [data-scope="file-upload"],
+  [data-scope="signature-pad"])[data-part="root"] {
+  inline-size: 100%;
+}
 `;
 /** Press feedback that rides the motion attribute, not any one component —
 * anything with `data-motion~="ink-ripple"` bleeds from its press point. */
@@ -291,38 +343,60 @@ const inkRippleCss = `
   border-radius: 100%;
   background: radial-gradient(
     circle closest-side,
-    var(--_ripple-pigment, color-mix(in oklab, var(--bs-color-primary) 30%, transparent)),
-    transparent 80%
+    var(--bs-ripple-pigment) var(--bs-ripple-core, 0%),
+    transparent var(--bs-ripple-fade, 80%)
   );
   scale: 0;
   opacity: 0;
   pointer-events: none;
 }
 
-[data-motion~="ink-ripple"][data-ripple="run"]::after {
-  animation: bs-ink-ripple calc(650ms * var(--bs-motion-scale, 1)) var(--bs-ease-out);
+[data-motion~="ink-ripple"][data-ripple="press"]::after {
+  animation: bs-ripple-press var(--bs-ripple-duration, calc(650ms * var(--bs-motion-scale, 1)))
+    var(--bs-ripple-ease, var(--bs-ease-out)) forwards;
 }
 
-/* Ink into water: the wash sweeps across the whole surface at full
-   strength first, and only once it has covered the body does it start
-   dissolving — never fading while it still has ground to cover. */
-@keyframes bs-ink-ripple {
-  0% {
-    scale: 0.15;
-    opacity: 0.9;
+/* On release the press phase keeps running to full cover — re-declaring
+   the same-name animation carries it over instead of restarting — while
+   the dissolve fades on top of it. */
+[data-motion~="ink-ripple"][data-ripple="release"]::after {
+  animation: bs-ripple-press var(--bs-ripple-duration, calc(650ms * var(--bs-motion-scale, 1)))
+      var(--bs-ripple-ease, var(--bs-ease-out)) forwards,
+    bs-ripple-fade var(--bs-ripple-release, calc(320ms * var(--bs-motion-scale, 1))) ease-out
+      forwards;
+}
+
+/* Ink wells up from the fingertip: the wash starts small at the press
+   point and grows while drifting toward the element's center (--bs-ripple-dx/dy,
+   set by the press watcher), staying at full strength while the pointer
+   holds — the paper is wet until the hand lifts. Peak opacity rides
+   --bs-ripple-opacity so a scene can quiet the wash or silence it
+   entirely; --bs-ripple-spread caps how far it reaches. */
+@keyframes bs-ripple-press {
+  from {
+    translate: -50% -50%;
+    scale: 0.2;
+    opacity: var(--bs-ripple-opacity, 0.9);
   }
-  45% {
-    scale: 1;
-    opacity: 0.9;
+  to {
+    translate: calc(-50% + var(--bs-ripple-dx, 0px)) calc(-50% + var(--bs-ripple-dy, 0px));
+    scale: var(--bs-ripple-spread, 1);
+    opacity: var(--bs-ripple-opacity, 0.9);
   }
-  100% {
-    scale: 1;
+}
+
+@keyframes bs-ripple-fade {
+  from {
+    opacity: var(--bs-ripple-opacity, 0.9);
+  }
+  to {
     opacity: 0;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-motion~="ink-ripple"][data-ripple="run"]::after {
+  [data-motion~="ink-ripple"][data-ripple="press"]::after,
+  [data-motion~="ink-ripple"][data-ripple="release"]::after {
     animation-duration: 1ms;
   }
 }
@@ -352,6 +426,7 @@ const accordionCss = `
 /* Triggers are quiet rows on the paper — no chrome of their own; the
    hairline rule carries the structure instead. */
 [data-scope="accordion"][data-part="item-trigger"] {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -474,6 +549,15 @@ const accordionCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/affix.ts
+const affixCss = `
+/* The nail draws nothing of its own: it is one sticky instruction on a
+   carrier the caller sizes and surfaces. */
+[data-scope="affix"][data-part="root"] {
+  position: sticky;
+}
+`;
+//#endregion
 //#region src/styles/components/ai.ts
 const aiCss = `
 /* The conversation column: messages stack with section-band air, the
@@ -505,7 +589,11 @@ const aiCss = `
   border-radius: var(--bs-radius-lg);
   background: var(--bs-color-surface-1);
   inline-size: fit-content;
-  max-inline-size: min(75%, 30rem);
+  /* A fixed ceiling, not a percentage: the percentage feeds the
+     fit-content resolution a reference it cannot satisfy (the parent's
+     own width is being fit-content from this very box), and short
+     messages then collapse toward min-content — one glyph per line. */
+  max-inline-size: 30rem;
 }
 
 /* Markdown response: the ink is set with relaxed leading, code rides
@@ -751,6 +839,78 @@ const aiCss = `
   text-decoration-color: var(--bs-color-border-strong);
 }
 
+/* Attachments: the files riding the prompt's header — paper chips on
+   the recessed vessel, square-cut like every control. Uploading is a
+   dashed ghost, error speaks in danger ink; no chip casts a shadow. */
+[data-scope="ai"][data-part="attachments"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-1);
+}
+
+[data-scope="ai"][data-part="attachment"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-1);
+  max-inline-size: 100%;
+  padding-block: calc(var(--bs-space-1) / 2);
+  padding-inline: var(--bs-space-2);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface);
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="ai"][data-part="attachment"]:hover {
+  border-color: var(--bs-color-border-strong);
+}
+
+[data-scope="ai"][data-part="attachment"] svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  flex: none;
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="ai"][data-part="attachment"][data-status="uploading"] {
+  border-style: dashed;
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="ai"][data-part="attachment"][data-status="error"] {
+  border-color: var(--bs-color-danger);
+  color: var(--bs-color-danger);
+}
+
+[data-scope="ai"][data-part="attachment"] > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-scope="ai"][data-part="attachment"] [data-remove] {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+[data-scope="ai"][data-part="attachment"] [data-remove]:hover {
+  color: var(--bs-color-text-primary);
+}
+
+[data-scope="ai"][data-part="attachment"] [data-remove]:focus-visible {
+  outline: none;
+  border-radius: var(--bs-radius-sm);
+  box-shadow: var(--bs-focus-ring);
+}
+
 /* Actions row: a quiet line of shared ghost buttons. */
 [data-scope="ai"][data-part="actions"] {
   display: flex;
@@ -761,10 +921,13 @@ const aiCss = `
 /* The prompt: one vessel — the shared field bared to the paper and
    self-growing on the machine's autoresize. It starts a single line tall,
    the submit seal riding that line; as the text grows the seal settles
-   onto the last line. The halo answers the vessel, not the control. */
+   onto the last line. The rows above and below (attachments, the model
+   and its switches) are slots — absent when empty, so the bare vessel
+   stays one quiet line. The halo answers the vessel, not the control. */
 [data-scope="ai"][data-part="prompt"] {
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
+  align-items: stretch;
   gap: var(--bs-space-2);
   padding: var(--bs-space-2);
   border: 1px solid var(--bs-color-border);
@@ -780,6 +943,30 @@ const aiCss = `
   box-shadow: var(--bs-focus-ring);
 }
 
+/* The writing row: the field between its optional shoulders, the seal
+   and the tools riding the text's last line. */
+[data-scope="ai"][data-part="prompt-main"] {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--bs-space-2);
+  min-inline-size: 0;
+}
+
+[data-scope="ai"][data-part="prompt-header"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bs-space-1);
+}
+
+[data-scope="ai"][data-part="prompt-leading"],
+[data-scope="ai"][data-part="prompt-trailing"] {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--bs-space-1);
+  flex: none;
+}
+
 [data-scope="ai"][data-part="prompt"] [data-scope="field"][data-part="root"] {
   flex: 1;
   min-inline-size: 0;
@@ -808,10 +995,31 @@ const aiCss = `
   resize: none;
 }
 
+/* The tool row beneath the writing: the model and its switches — the
+   seal closes the row at its far end. */
 [data-scope="ai"][data-part="prompt-footer"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bs-space-1);
+  flex: none;
+}
+
+/* The send-side group: it drifts to the row's far end and keeps the
+   model picker and the seal shoulder to shoulder. */
+[data-scope="ai"][data-part="prompt-end"] {
   display: flex;
   align-items: center;
+  gap: var(--bs-space-2);
   flex: none;
+  margin-inline-start: auto;
+}
+
+/* The tool row holds fixed-width chrome: a field family dropped in
+   here keeps its natural width, not the form-field full-bleed
+   baseline. */
+[data-scope="ai"][data-part="prompt-footer"] [data-part="root"] {
+  inline-size: auto;
 }
 
 [data-scope="ai"][data-part="prompt"] [data-scope="field"][data-part="textarea"]:focus,
@@ -1161,6 +1369,25 @@ const angleSliderCss = labelCss("angle-slider") + `
 }
 `;
 //#endregion
+//#region src/styles/components/aspect-ratio.ts
+const aspectRatioCss = `
+/* The frame that keeps its shape: the box holds the ratio the wrapper
+   hands over, whatever width it is dealt. */
+[data-scope="aspect-ratio"][data-part="root"] {
+  position: relative;
+  inline-size: 100%;
+  aspect-ratio: var(--bs-aspect-ratio, 1 / 1);
+}
+
+/* The child owns the frame's face: it fills the box the ratio draws. */
+[data-scope="aspect-ratio"][data-part="root"] > * {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+`;
+//#endregion
 //#region src/styles/components/avatar.ts
 const avatarCss = `
 [data-scope="avatar"][data-part="root"] {
@@ -1175,7 +1402,7 @@ const avatarCss = `
   justify-content: center;
   inline-size: var(--bs-avatar-size);
   block-size: var(--bs-avatar-size);
-  border-radius: calc(var(--bs-radius-lg) * 100);
+  border-radius: var(--bs-radius-full);
   background: var(--bs-color-surface-inset);
   color: var(--bs-color-text-secondary);
   font-size: calc(var(--bs-font-size-sm) * 1.125);
@@ -1225,6 +1452,57 @@ const avatarGroupCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/back-top.ts
+const backTopCss = `
+/* A way-home control: a small floating tile at the page's corner. The
+   paper, hairline and halo are the button's; this family owns the
+   mooring and the entrance. It floats, so it casts — one rung of
+   elevation, recomposed from the lighting parts. */
+[data-scope="back-top"][data-part="root"] {
+  position: fixed;
+  inset-inline-end: var(--bs-space-6);
+  inset-block-end: var(--bs-space-6);
+  z-index: var(--bs-z-overlay);
+  transition:
+    opacity var(--bs-duration-base) var(--bs-ease-out),
+    translate var(--bs-duration-base) var(--bs-ease-spring);
+}
+
+/* Hidden sinks below the page and steps out of the reading order —
+   states remain, animation does not. */
+[data-scope="back-top"][data-part="root"][data-state="hidden"] {
+  opacity: 0;
+  translate: 0 var(--bs-space-2);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* The floating tile rises a rung; hovering lifts one more on the same
+   slow shadow clock the lighting engine keeps. */
+[data-scope="back-top"][data-part="root"][data-state="shown"] [data-scope="button"][data-part="root"],
+[data-scope="back-top"][data-part="root"][data-state="shown"]:hover [data-scope="button"][data-part="root"] {
+  --bs-shadow-color: color-mix(in oklab, var(--bs-shadow-ink) 30%, transparent);
+  box-shadow: var(--bs-elevation-2);
+  transition: box-shadow 220ms var(--bs-ease-out);
+}
+
+[data-scope="back-top"][data-part="root"][data-state="shown"]:hover [data-scope="button"][data-part="root"] {
+  box-shadow: var(--bs-elevation-3);
+}
+
+[data-scope="back-top"][data-part="root"][data-state="shown"]:active [data-scope="button"][data-part="root"] {
+  box-shadow: none;
+}
+
+/* The return trip rides the page's own scroll container, offered only
+   while the reader allows motion. */
+@media (prefers-reduced-motion: no-preference) {
+  html:has([data-scope="back-top"][data-part="root"][data-state="shown"]) {
+    scroll-behavior: smooth;
+  }
+}
+`;
+//#endregion
 //#region src/styles/components/badge.ts
 const badgeCss = `
 /* A small seal of state: flat pigment fill, tracked caps-height ink. The
@@ -1480,7 +1758,7 @@ const buttonCss = `
    the pigment it carries. Each variant declares its fill/ink defaults,
    semantic tones re-point the pigment, and hover/focus ride the same
    variables. Ink is the solemn default. */
-[data-scope="button"][data-part="root"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant]) {
   --_pigment: var(--bs-color-primary);
   /* The deep register of the pigment for the subtle wash — the 600-step
      tone itself fails 4.5:1 on its own wash, so washed fills read from
@@ -1490,6 +1768,10 @@ const buttonCss = `
   --_fill-hover: transparent;
   --_ink: var(--bs-color-text-secondary);
   --_edge: transparent;
+}
+
+/* The recipe's own body: the layout and states of the button proper. */
+[data-scope="button"][data-part="root"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1501,7 +1783,7 @@ const buttonCss = `
      systems use 15-16px at this height, 24px at large). */
   padding: 0 var(--bs-padding-lg);
   border: 1px solid var(--_edge);
-  border-radius: var(--bs-radius-sm);
+  border-radius: var(--bs-radius-control, var(--bs-radius-sm));
   background: var(--_fill);
   color: var(--_ink);
   font: inherit;
@@ -1553,19 +1835,19 @@ const buttonCss = `
   block-size: 1rem;
 }
 
-[data-scope="button"][data-part="root"][data-tone="danger"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-tone="danger"] {
   --_pigment: var(--bs-color-danger);
   --_ink-strong: var(--bs-color-danger-subtle-text);
 }
-[data-scope="button"][data-part="root"][data-tone="success"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-tone="success"] {
   --_pigment: var(--bs-color-success);
   --_ink-strong: var(--bs-color-success-subtle-text);
 }
-[data-scope="button"][data-part="root"][data-tone="warning"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-tone="warning"] {
   --_pigment: var(--bs-color-warning);
   --_ink-strong: var(--bs-color-warning-subtle-text);
 }
-[data-scope="button"][data-part="root"][data-tone="info"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-tone="info"] {
   --_pigment: var(--bs-color-info);
   --_ink-strong: var(--bs-color-info-subtle-text);
 }
@@ -1573,7 +1855,7 @@ const buttonCss = `
 /* Solid: the flat pigment fill, no lit edge at rest. On hover the ink
    bleeds — the pigment casts a small shadow of its own color, on a slower
    transition than the fill (light needs time). */
-[data-scope="button"][data-part="root"][data-variant="solid"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"] {
   /* The solid body follows --bs-color-primary-fill: full pigment on
      paper, kneaded toward black at night, and the theme keeps the ink
      on it legible in both registers. */
@@ -1581,63 +1863,64 @@ const buttonCss = `
   --_fill-hover: var(--bs-color-primary-fill-hover);
   --_ink: var(--bs-color-primary-text);
   /* On a filled body the wash must read against the fill, not sink into
-     it — the ink that blooms on a fill is the fill's own ink. */
-  --_ripple-pigment: color-mix(in oklab, var(--_ink) 30%, transparent);
+     it — the ink that blooms on a fill is the fill's own ink (opaque; the
+     wash's concentration lives in --bs-ripple-opacity alone). */
+  --bs-ripple-pigment: var(--_ink);
   box-shadow: none;
 }
 
 /* The fixed pigments knead by the theme's measure — a mid-tone body at
    night carries neither deep nor pale text past 4.5:1, so its ink turns
    bright paper. */
-[data-scope="button"][data-part="root"][data-variant="solid"][data-tone="danger"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"][data-tone="danger"] {
   --_fill: color-mix(in oklab, var(--_pigment) calc(100% - var(--bs-ink-knead, 0%)), black);
   --_fill-hover: color-mix(in oklab, var(--_pigment) calc(85% - var(--bs-ink-knead, 0%)), black);
   --_ink: var(--bs-color-ink-on-fill);
 }
-[data-scope="button"][data-part="root"][data-variant="solid"][data-tone="success"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"][data-tone="success"] {
   --_fill: color-mix(in oklab, var(--_pigment) calc(100% - var(--bs-ink-knead, 0%)), black);
   --_fill-hover: color-mix(in oklab, var(--_pigment) calc(85% - var(--bs-ink-knead, 0%)), black);
   --_ink: var(--bs-color-ink-on-fill);
 }
-[data-scope="button"][data-part="root"][data-variant="solid"][data-tone="warning"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"][data-tone="warning"] {
   --_fill: color-mix(in oklab, var(--_pigment) calc(100% - var(--bs-ink-knead, 0%)), black);
   --_fill-hover: color-mix(in oklab, var(--_pigment) calc(85% - var(--bs-ink-knead, 0%)), black);
   --_ink: var(--bs-color-ink-on-fill);
 }
-[data-scope="button"][data-part="root"][data-variant="solid"][data-tone="info"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"][data-tone="info"] {
   --_fill: color-mix(in oklab, var(--_pigment) calc(100% - var(--bs-ink-knead, 0%)), black);
   --_fill-hover: color-mix(in oklab, var(--_pigment) calc(85% - var(--bs-ink-knead, 0%)), black);
   --_ink: var(--bs-color-ink-on-fill);
 }
 
-[data-scope="button"][data-part="root"][data-variant="solid"]:hover:not(:disabled) {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="solid"]:hover:not(:disabled) {
   box-shadow: var(--bs-light-x) calc(1px * var(--bs-light-reach) + var(--bs-light-y))
     calc(3px * var(--bs-light-reach)) 0 color-mix(in oklab, var(--_pigment) 28%, transparent);
 }
 
 /* Outline: paper on a hairline, the hairline deepening on hover. */
-[data-scope="button"][data-part="root"][data-variant="outline"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="outline"] {
   --_fill: var(--bs-color-surface-2);
   --_ink: var(--bs-color-text-primary);
   --_edge: var(--bs-color-border);
 }
 
 /* Ghost: bare ink that borrows the subtle surface under the cursor. */
-[data-scope="button"][data-part="root"][data-variant="ghost"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="ghost"] {
   --_fill-hover: var(--bs-color-surface-0);
   box-shadow: none;
 }
 
 /* Subtle: a wash of the pigment with its deep register on top. */
-[data-scope="button"][data-part="root"][data-variant="subtle"] {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="subtle"] {
   --_fill: color-mix(in oklab, var(--_pigment) 12%, transparent);
   --_fill-hover: color-mix(in oklab, var(--_pigment) 20%, transparent);
   --_ink: var(--_ink-strong);
   box-shadow: none;
 }
 
-[data-scope="button"][data-part="root"][data-variant="outline"]:hover:not(:disabled),
-[data-scope="button"][data-part="root"][data-variant="outline"]:focus-visible {
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="outline"]:hover:not(:disabled),
+:is([data-scope="button"][data-part="root"], [data-scope][data-part="trigger"][data-variant])[data-variant="outline"]:focus-visible {
   --_edge: var(--bs-color-border-strong);
 }
 
@@ -1664,67 +1947,178 @@ const buttonCss = `
   box-shadow: none;
 }
 
-/* As-child hosting: an overlay trigger that hosts a Button overwrites the
-   button's anatomy (data-scope reads the overlay family, not "button"),
-   so the rules above never match. The variant seals survive, though —
-   the ghost register re-asserts itself here for every overlay trigger at
-   once. The bare [data-scope] keeps specificity above any family's base,
-   and the state branches above its open/focus/disabled rules. */
-[data-scope][data-part="trigger"][data-variant="ghost"] {
+/* As-child hosting: an overlay trigger that hosts a Button overwrites
+   the button's anatomy (data-scope reads the overlay family, not
+   "button"), so the body rules never match. The variant, tone and size
+   seals survive, though — and the variable rules above match them
+   through the bare [data-scope], so this layout block only has to ride
+   the same variables. The bare [data-scope] keeps specificity above any
+   family's base, and the state branches above its open/focus/disabled
+   rules. */
+[data-scope][data-part="trigger"][data-variant] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--bs-space-2);
   flex: none;
-  block-size: var(--bs-control-height-sm);
-  padding: 0 var(--bs-padding-md);
-  border: none;
-  border-radius: var(--bs-radius-sm);
-  background: transparent;
-  color: var(--bs-color-text-secondary);
+  block-size: var(--bs-control-height-md);
+  /* One step wider than the shell register, like the body above. */
+  padding: 0 var(--bs-padding-lg);
+  border: 1px solid var(--_edge);
+  border-radius: var(--bs-radius-control, var(--bs-radius-sm));
+  background: var(--_fill);
+  color: var(--_ink);
   font: inherit;
-  font-size: var(--bs-font-size-sm);
+  font-size: var(--bs-font-size-md);
   font-weight: var(--bs-font-weight-medium);
   letter-spacing: var(--bs-tracking-label);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  box-shadow: none;
+  box-shadow: var(--bs-shadow-xs);
   transition:
     background-color var(--bs-duration-fast) var(--bs-ease-out),
+    border-color var(--bs-duration-fast) var(--bs-ease-out),
     color var(--bs-duration-fast) var(--bs-ease-out),
     box-shadow calc(var(--bs-duration-fast) * 1.5) var(--bs-ease-out);
 }
 
+[data-scope][data-part="trigger"][data-variant][data-size="sm"] {
+  block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-padding-md);
+  font-size: var(--bs-font-size-sm);
+}
+
+[data-scope][data-part="trigger"][data-variant][data-size="lg"] {
+  block-size: var(--bs-control-height-lg);
+  padding: 0 var(--bs-padding-xl);
+}
+
 /* Icon-only: the silhouette is the seal — width equals height. */
-[data-scope][data-part="trigger"][data-variant="ghost"][data-square="true"] {
+[data-scope][data-part="trigger"][data-variant][data-square="true"] {
   inline-size: var(--bs-control-height-sm);
   padding-inline: 0;
 }
 
-[data-scope][data-part="trigger"][data-variant="ghost"]:hover {
-  background: var(--bs-color-surface-0);
+[data-scope][data-part="trigger"][data-variant][data-size="md"][data-square="true"] {
+  inline-size: var(--bs-control-height-md);
+}
+
+[data-scope][data-part="trigger"][data-variant][data-size="lg"][data-square="true"] {
+  inline-size: var(--bs-control-height-lg);
+}
+
+[data-scope][data-part="trigger"][data-variant]:hover:not(:disabled) {
+  background: var(--_fill-hover);
 }
 
 /* Open keeps the focus look: Zag hands focus to the overlay itself, so
    :focus-visible alone would drop the halo the moment it opens. */
-[data-scope][data-part="trigger"][data-variant="ghost"]:focus-visible,
-[data-scope][data-part="trigger"][data-variant="ghost"][data-state="open"] {
+[data-scope][data-part="trigger"][data-variant]:focus-visible,
+[data-scope][data-part="trigger"][data-variant][data-state="open"] {
   outline: none;
+  border-color: var(--bs-color-primary);
   box-shadow: var(--bs-focus-ring);
 }
 
-[data-scope][data-part="trigger"][data-variant="ghost"]:active {
+[data-scope][data-part="trigger"][data-variant]:active:not(:disabled) {
   box-shadow: none;
 }
 
-[data-scope][data-part="trigger"][data-variant="ghost"][data-disabled] {
-  background: var(--bs-color-surface-inset);
-  color: var(--bs-color-text-disabled);
-  box-shadow: none;
+[data-scope][data-part="trigger"][data-variant]:disabled,
+[data-scope][data-part="trigger"][data-variant][data-disabled] {
+  --_fill: var(--bs-color-surface-inset);
+  --_fill-hover: var(--bs-color-surface-inset);
+  --_ink: var(--bs-color-text-disabled);
+  --_edge: transparent;
   cursor: not-allowed;
+  box-shadow: none;
+}
+`;
+//#endregion
+//#region src/styles/components/button-group.ts
+const buttonGroupCss = `
+/* Buttons fused into one control: the group owns only the joinery. Corners
+   trim where the members meet, a shared hairline merges through a 1px
+   overlap, and the hovered or focused member steps above the pile so its
+   deepened edge and halo are not painted over by the neighbor. Selection
+   is not this family's business — each button keeps the variant it was
+   given, solid beside outline beside ghost. */
+[data-scope="button-group"][data-part="root"] {
+  display: inline-flex;
+}
+
+[data-scope="button-group"][data-part="root"][data-orientation="vertical"] {
+  flex-direction: column;
+  /* The column reads as one slab: members fill to the widest. */
+  align-items: stretch;
+}
+
+/* One register for the whole group: the group's size retunes every
+   member's height the way a control register should — one knob, not one
+   per button. */
+[data-scope="button-group"][data-part="root"][data-size="sm"] > [data-scope="button"][data-part="root"] {
+  block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-padding-md);
+  font-size: var(--bs-font-size-sm);
+}
+
+[data-scope="button-group"][data-part="root"][data-size="lg"] > [data-scope="button"][data-part="root"] {
+  block-size: var(--bs-control-height-lg);
+  padding: 0 var(--bs-padding-xl);
+}
+
+/* The seam: each member after the first slides one pixel over its
+   predecessor's trailing hairline, so two borders read as one. */
+[data-scope="button-group"][data-part="root"] > [data-scope="button"][data-part="root"] + [data-scope="button"][data-part="root"] {
+  margin-inline-start: -1px;
+}
+
+[data-scope="button-group"][data-part="root"][data-orientation="vertical"] > [data-scope="button"][data-part="root"] + [data-scope="button"][data-part="root"] {
+  margin-inline-start: 0;
+  margin-block-start: -1px;
+}
+
+/* 方寸为章, trimmed where the seals meet: interior corners square off,
+   the first keeps its start side and the last its end side. */
+[data-scope="button-group"][data-part="root"][data-orientation="horizontal"] > [data-scope="button"][data-part="root"]:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+[data-scope="button-group"][data-part="root"][data-orientation="horizontal"] > [data-scope="button"][data-part="root"]:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+[data-scope="button-group"][data-part="root"][data-orientation="vertical"] > [data-scope="button"][data-part="root"]:not(:first-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+[data-scope="button-group"][data-part="root"][data-orientation="vertical"] > [data-scope="button"][data-part="root"]:not(:last-child) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* Raised while hovered or focused: the deepened hairline and the focus
+   halo paint above the neighbors instead of vanishing under them. */
+[data-scope="button-group"][data-part="root"] > [data-scope="button"][data-part="root"]:hover,
+[data-scope="button-group"][data-part="root"] > [data-scope="button"][data-part="root"]:focus-visible {
+  z-index: 1;
 }
+
+/* The group may set the members' corner register: data-radius retunes
+   --bs-radius-control, which every member's border-radius consumes, so
+   the fused whole — first edge, last edge, and the trimmed seams —
+   keeps one corner story. */
+[data-scope="button-group"][data-part="root"][data-radius="sm"] { --bs-radius-control: var(--bs-radius-sm); }
+[data-scope="button-group"][data-part="root"][data-radius="md"] { --bs-radius-control: var(--bs-radius-md); }
+[data-scope="button-group"][data-part="root"][data-radius="lg"] { --bs-radius-control: var(--bs-radius-lg); }
+[data-scope="button-group"][data-part="root"][data-radius="xl"] { --bs-radius-control: var(--bs-radius-xl); }
+[data-scope="button-group"][data-part="root"][data-radius="2xl"] { --bs-radius-control: var(--bs-radius-2xl); }
+[data-scope="button-group"][data-part="root"][data-radius="full"] { --bs-radius-control: var(--bs-radius-full); }
 `;
 //#endregion
 //#region src/styles/components/calendar.ts
@@ -1972,7 +2366,7 @@ const carouselCss = `
   block-size: calc(var(--bs-space-2) + 2px);
   padding: 0;
   border: none;
-  border-radius: calc(var(--bs-radius-lg) * 100);
+  border-radius: var(--bs-radius-full);
   background: var(--bs-color-border-strong);
   cursor: pointer;
   transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
@@ -2000,19 +2394,173 @@ const carouselCss = `
 }
 `;
 //#endregion
-//#region src/styles/components/checkbox.ts
-const checkboxCss = labelCss("checkbox") + `
-[data-scope="checkbox"][data-part="root"] {
-  display: inline-flex;
+//#region src/styles/components/cascade-select.ts
+const cascadeSelectCss = positionerCss("cascade-select") + popupContentCss("cascade-select", "0rem") + `
+/* The trigger reads as a field — the input recipe — with the joined
+   labels as its ink and a quiet chevron at the inline end. */
+[data-scope="cascade-select"][data-part="control"] {
+  display: flex;
+  inline-size: 100%;
+}
+
+[data-scope="cascade-select"][data-part="trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
   align-items: center;
+  justify-content: space-between;
   gap: var(--bs-space-2);
+  inline-size: 100%;
+  block-size: var(--bs-control-height-md);
+  padding-inline: var(--bs-padding-md);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
   color: var(--bs-color-text-primary);
-  font-size: var(--bs-font-size-sm);
+  font: inherit;
+  font-size: var(--bs-font-size-md);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
 }
 
-/* A group of checkboxes is one field: the rows stack, and the invalid
- * pigment bleeds onto every row inside. */
-[data-scope="checkbox"][data-part="group"] {
+[data-scope="cascade-select"][data-part="trigger"][data-placeholder-shown]
+  [data-part="value-text"] {
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="cascade-select"][data-part="trigger"]:hover:not(:focus):not(:disabled) {
+  border-color: var(--bs-color-border-strong);
+}
+
+[data-scope="cascade-select"][data-part="trigger"]:focus-visible {
+  outline: none;
+  border-color: var(--bs-color-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+[data-scope="cascade-select"][data-part="trigger"][data-invalid] {
+  border-color: var(--bs-color-danger);
+}
+
+[data-scope="cascade-select"][data-part="trigger"]:disabled {
+  border-color: var(--bs-color-border);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope="cascade-select"][data-part="indicator"] {
+  display: grid;
+  place-items: center;
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="cascade-select"][data-part="indicator"] svg {
+  inline-size: var(--bs-space-4);
+  block-size: var(--bs-space-4);
+  transition: transform var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="cascade-select"][data-part="trigger"][data-state="open"]
+  [data-part="indicator"]
+  svg {
+  transform: rotate(180deg);
+}
+
+/* The vessel is a corridor: one column per walked level, a hairline
+   between neighbours, each column scrolling past its own grove. */
+[data-scope="cascade-select"][data-part="content"] {
+  display: flex;
+}
+
+[data-scope="cascade-select"][data-part="list"] {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  min-inline-size: 11rem;
+  max-block-size: 16rem;
+  margin: 0;
+  padding: var(--bs-space-1);
+  list-style: none;
+  overflow-block: auto;
+}
+
+[data-scope="cascade-select"][data-part="list"] + [data-part="list"] {
+  border-inline-start: 1px solid var(--bs-color-border);
+}
+
+[data-scope="cascade-select"][data-part="item"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  min-block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-space-2);
+  border-radius: var(--bs-radius-sm);
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-sm);
+  cursor: pointer;
+}
+
+[data-scope="cascade-select"][data-part="item"]:hover:not([data-state="checked"], [data-disabled]),
+[data-scope="cascade-select"][data-part="item"][data-highlighted]:not([data-state="checked"]) {
+  background: var(--bs-color-surface-0);
+}
+
+[data-scope="cascade-select"][data-part="item"]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-inset);
+}
+
+[data-scope="cascade-select"][data-part="item"][data-state="checked"] {
+  background: var(--bs-color-primary);
+  color: var(--bs-color-primary-text);
+  font-weight: var(--bs-font-weight-medium);
+}
+
+[data-scope="cascade-select"][data-part="item"][data-disabled] {
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope="cascade-select"][data-part="item-text"] {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-scope="cascade-select"][data-part="branch-indicator"],
+[data-scope="cascade-select"][data-part="item-indicator"] {
+  display: grid;
+  place-items: center;
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="cascade-select"][data-part="branch-indicator"] svg,
+[data-scope="cascade-select"][data-part="item-indicator"] svg {
+  inline-size: var(--bs-space-4);
+  block-size: var(--bs-space-4);
+}
+
+[data-scope="cascade-select"][data-part="item"][data-state="checked"] [data-part="item-indicator"],
+[data-scope="cascade-select"][data-part="item"][data-highlighted] [data-part="branch-indicator"] {
+  color: currentColor;
+}
+`;
+//#endregion
+//#region src/styles/components/checkbox.ts
+const checkboxCss = labelCss("checkbox") + `
+[data-scope="checkbox"][data-part="root"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-sm);
+}
+
+/* A group of checkboxes is one field: the rows stack, and the invalid
+ * pigment bleeds onto every row inside. */
+[data-scope="checkbox"][data-part="group"] {
   display: flex;
   flex-direction: column;
   gap: var(--bs-space-2);
@@ -2029,8 +2577,8 @@ const checkboxCss = labelCss("checkbox") + `
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  inline-size: var(--bs-part-size-md);
-  block-size: var(--bs-part-size-md);
+  inline-size: var(--bs-part-size-sm);
+  block-size: var(--bs-part-size-sm);
   border: 1px solid var(--bs-color-border);
   border-radius: var(--bs-radius-sm);
   background: var(--bs-color-surface-2);
@@ -2090,8 +2638,8 @@ const checkboxCss = labelCss("checkbox") + `
 }
 
 [data-scope="checkbox"][data-part="indicator"] svg {
-  inline-size: calc(var(--bs-part-size-md) * 0.7);
-  block-size: calc(var(--bs-part-size-md) * 0.7);
+  inline-size: calc(var(--bs-part-size-sm) * 0.7);
+  block-size: calc(var(--bs-part-size-sm) * 0.7);
 }
 
 [data-scope="checkbox"][data-part="root"]:has([data-disabled]) {
@@ -2103,6 +2651,24 @@ const checkboxCss = labelCss("checkbox") + `
 }
 `;
 //#endregion
+//#region src/styles/components/checkbox-group.ts
+const checkboxGroupCss = `
+/* The group stacks its seals by default; the horizontal layout keeps the
+   natural reading order and wraps when the container narrows. */
+[data-scope="checkbox-group"][data-part="root"] {
+  display: grid;
+  gap: var(--bs-space-3);
+  max-inline-size: 20rem;
+}
+
+[data-scope="checkbox-group"][data-part="root"][data-layout="horizontal"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-2) var(--bs-space-4);
+  max-inline-size: none;
+}
+`;
+//#endregion
 //#region src/styles/components/chip.ts
 const chipCss = `
 /* A counting coin: one small number, round as a seal impression. It sits
@@ -2313,6 +2879,7 @@ const collapsibleCss = `
 /* A collapsible stands alone, so its trigger is a full control: paper
    surface, one hairline, resting on xs. */
 [data-scope="collapsible"][data-part="trigger"] {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2452,7 +3019,6 @@ const colorPickerCss = labelCss("color-picker") + positionerCss("color-picker")
   display: flex;
   flex-direction: column;
   gap: var(--bs-space-2);
-  max-inline-size: 17rem;
 }
 
 [data-scope="color-picker"][data-part="root"][data-disabled] {
@@ -2521,7 +3087,7 @@ const colorPickerCss = labelCss("color-picker") + positionerCss("color-picker")
 [data-scope="color-picker"][data-part="swatch"] {
   position: absolute;
   inset: var(--bs-space-1);
-  border-radius: calc(var(--bs-radius-sm) - 2px);
+  border-radius: var(--bs-radius-xs);
   box-shadow: inset 0 0 0 1px var(--bs-color-border);
 }
 
@@ -2531,7 +3097,7 @@ const colorPickerCss = labelCss("color-picker") + positionerCss("color-picker")
 [data-scope="color-picker"][data-part="transparency-grid"] {
   position: absolute;
   inset: var(--bs-space-1);
-  border-radius: calc(var(--bs-radius-sm) - 2px);
+  border-radius: var(--bs-radius-xs);
 }
 
 /* The geometry vars live on the content: the popup teleports to body, out
@@ -2566,7 +3132,7 @@ const colorPickerCss = labelCss("color-picker") + positionerCss("color-picker")
   position: absolute;
   inline-size: var(--bs-color-picker-thumb);
   block-size: var(--bs-color-picker-thumb);
-  border-radius: 9999px;
+  border-radius: var(--bs-radius-full);
   outline: none;
   transform: translate(-50%, -50%);
   box-shadow:
@@ -2598,7 +3164,7 @@ const colorPickerCss = labelCss("color-picker") + positionerCss("color-picker")
   position: absolute;
   inline-size: var(--bs-color-picker-thumb);
   block-size: var(--bs-color-picker-thumb);
-  border-radius: 9999px;
+  border-radius: var(--bs-radius-full);
   outline: none;
   transform: translate(-50%, -50%);
   box-shadow:
@@ -3060,108 +3626,359 @@ const comboboxCss = labelCss("combobox") + positionerCss("combobox") + popupCont
 }
 `;
 //#endregion
-//#region src/styles/components/date-input.ts
-const dateInputCss = labelCss("date-input") + `
-[data-scope="date-input"][data-part="root"] {
+//#region src/styles/components/command.ts
+const commandCss = `
+/* The palette's footing: full-viewport, the sheet docked a fifth of the
+   way down (structural placement, not a spacing value). */
+[data-scope="command"][data-part="positioner"] {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--bs-z-overlay) + var(--layer-index, 0));
   display: flex;
-  flex-direction: column;
-  gap: var(--bs-space-2);
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20dvh var(--bs-padding-lg) var(--bs-padding-lg);
 }
 
-[data-scope="date-input"][data-part="control"] {
+/* The sheet: a wide vessel at the top of the elevation ladder, entering
+   as ink dissolving into paper. */
+[data-scope="command"][data-part="content"] {
+  position: relative;
+  box-sizing: border-box;
+  inline-size: min(36rem, 100%);
   display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
+  flex-direction: column;
+  padding: var(--bs-padding-md);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-lg);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-primary);
+  box-shadow: var(--bs-elevation-4);
+  transition:
+    opacity var(--bs-duration-base) var(--bs-ease-out),
+    translate var(--bs-duration-base) var(--bs-ease-spring);
 }
 
-/* The segment group IS the field — the same border + surface + focus halo
-   recipe as every input, no shadow. */
-[data-scope="date-input"][data-part="segment-group"] {
+[data-scope="command"][data-state="open"][data-part="content"] {
+  box-shadow: var(--bs-elevation-5);
+  animation: bs-ink-in var(--bs-duration-slow) var(--bs-ease-out);
+}
+
+/* The search field carries the same recipe as every input: border +
+   surface + focus halo, never a shadow lift. */
+[data-scope="command"][data-part="input"] {
   box-sizing: border-box;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  block-size: var(--bs-control-height-md);
+  inline-size: 100%;
+  block-size: var(--bs-control-height-lg);
   padding: 0 var(--bs-padding-md);
-  border: 1px solid var(--bs-color-border);
-  border-radius: var(--bs-radius-sm);
-  background: var(--bs-color-surface-2);
+  border: none;
+  border-block-end: 1px solid var(--bs-color-border);
+  border-radius: 0;
+  background: transparent;
   color: var(--bs-color-text-primary);
   font: inherit;
   font-size: var(--bs-font-size-md);
-  cursor: text;
-  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
 }
 
-[data-scope="date-input"][data-part="segment-group"]:hover:not([data-disabled], [data-readonly]) {
-  border-color: var(--bs-color-border-strong);
+[data-scope="command"][data-part="input"]::placeholder {
+  color: var(--bs-color-text-tertiary);
 }
 
-[data-scope="date-input"][data-part="segment-group"][data-focus] {
-  border-color: var(--bs-color-primary);
-  box-shadow: var(--bs-focus-ring);
+[data-scope="command"][data-part="input"]:focus,
+[data-scope="command"][data-part="input"]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-inset);
 }
 
-[data-scope="date-input"][data-part="segment-group"][data-invalid] {
-  border-color: var(--bs-color-danger);
+/* The ledger: the machine's content grafts onto this list, so the
+   vessel stays inside the sheet instead of floating a second popup. */
+[data-scope="command"][data-part="list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-1);
+  margin-block-start: var(--bs-space-2);
+  max-block-size: min(50dvh, 24rem);
+  padding: var(--bs-space-1);
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
-[data-scope="date-input"][data-part="segment-group"][data-invalid][data-focus] {
-  box-shadow: var(--bs-focus-ring);
+[data-scope="command"][data-part="list"][hidden] {
+  display: none;
 }
 
-[data-scope="date-input"][data-part="segment-group"][data-disabled] {
-  border-color: var(--bs-color-border);
-  background: var(--bs-color-surface-inset);
-  color: var(--bs-color-text-disabled);
-  cursor: not-allowed;
+[data-scope="command"][data-part="group"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-1);
 }
 
-[data-scope="date-input"][data-part="segment-group"][data-readonly] {
-  background: var(--bs-color-surface-inset);
+[data-scope="command"][data-part="group"] + [data-scope="command"][data-part="group"] {
+  margin-block-start: var(--bs-space-2);
 }
 
-[data-scope="date-input"][data-part="segment"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2ch;
-  padding: 0 2px;
-  border-radius: var(--bs-radius-xs);
-  font-variant-numeric: tabular-nums;
-  caret-color: transparent;
-  outline: none;
+/* Group headings whisper: small, tracked, never competing with rows. */
+[data-scope="command"][data-part="group-label"] {
+  padding: var(--bs-space-1) var(--bs-space-2);
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-xs);
+  font-weight: var(--bs-font-weight-medium);
+  letter-spacing: var(--bs-tracking-label);
+  text-transform: uppercase;
+  user-select: none;
 }
 
-/* The focused segment takes the flat primary fill — ink where the eye is. */
-[data-scope="date-input"][data-part="segment"]:focus {
-  background: var(--bs-color-primary);
-  color: var(--bs-color-primary-text);
+/* Rows are quiet ink: the highlight is light on the row, not a fill. */
+[data-scope="command"][data-part="item"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-space-2);
+  min-block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-space-2);
+  border-radius: var(--bs-radius-sm);
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
 }
 
-[data-scope="date-input"][data-part="segment"][data-placeholder-shown] {
-  color: var(--bs-color-text-tertiary);
+[data-scope="command"][data-part="item"][data-highlighted] {
+  background: var(--bs-color-surface-0);
 }
 
-[data-scope="date-input"][data-part="segment"]:focus[data-placeholder-shown] {
-  color: var(--bs-color-primary-text);
+[data-scope="command"][data-part="item"][data-disabled] {
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
 }
 
-/* Separators are type, not controls — never take the ink. */
-[data-scope="date-input"][data-part="segment"][data-type="literal"] {
-  min-width: 0;
-  padding: 0;
-  color: var(--bs-color-text-tertiary);
-  user-select: none;
+[data-scope="command"][data-part="item-label"] {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* The hidden input still hosts form autofill — visually gone, structurally
-   present. */
-[data-scope="date-input"][data-part="hidden-input"] {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
+/* The hint is a keycap in miniature — the kbd recipe, riding the row. */
+[data-scope="command"][data-part="item-hint"] {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 1.75em;
+  padding: 0.125em 0.375em;
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  box-shadow: 0 1px 0 var(--bs-color-border);
+  color: var(--bs-color-text-secondary);
+  font-size: max(var(--bs-font-size-xs), 0.8125em);
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+[data-scope="command"][data-part="item"][data-highlighted] [data-scope="command"][data-part="item-hint"] {
+  background: var(--bs-color-surface-1);
+}
+
+[data-scope="command"][data-part="empty"] {
+  padding: var(--bs-space-4);
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  text-align: center;
+}
+`;
+//#endregion
+//#region src/styles/components/comment.ts
+const commentCss = `
+/* A voice on the record: the portrait hangs left, the body carries the
+   byline, the ink, and the row of answers — each in its own register,
+   so the thread reads at a scan. */
+[data-scope="comment"][data-part="root"] {
+  display: flex;
+  gap: var(--bs-gap-md);
+  padding-block: var(--bs-padding-sm);
+}
+
+[data-scope="comment"][data-part="avatar"] {
+  display: flex;
+  flex: none;
+}
+
+[data-scope="comment"][data-part="body"] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--bs-space-1);
+  min-inline-size: 0;
+}
+
+[data-scope="comment"][data-part="header"] {
+  display: flex;
+  align-items: baseline;
+  gap: var(--bs-space-2);
+}
+
+[data-scope="comment"][data-part="author"] {
+  color: var(--bs-color-text-primary);
+  font-weight: var(--bs-font-weight-medium);
+}
+
+[data-scope="comment"][data-part="datetime"] {
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-xs);
+}
+
+[data-scope="comment"][data-part="content"] {
+  color: var(--bs-color-text-primary);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+[data-scope="comment"][data-part="actions"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-4);
+  margin-block-start: var(--bs-space-1);
+  font-size: var(--bs-font-size-sm);
+}
+`;
+//#endregion
+//#region src/styles/components/container.ts
+const containerCss = `
+/* The reading frame. The measures are set in ch — the rendered width of
+   the zero glyph — so the clamp tracks the typeset text itself instead
+   of a fixed visual value: the same measure holds fewer Latin
+   characters than CJK ones, and both keep the line short enough to
+   cross without losing its head. Padding keeps the ink off the page
+   edges when the viewport runs narrower than the measure. */
+[data-scope="container"][data-part="root"] {
+  inline-size: 100%;
+  margin-inline: auto;
+}
+
+[data-scope="container"][data-part="root"][data-size="narrow"] {
+  max-inline-size: 48ch;
+}
+[data-scope="container"][data-part="root"][data-size="readable"] {
+  max-inline-size: 72ch;
+}
+[data-scope="container"][data-part="root"][data-size="wide"] {
+  max-inline-size: 96ch;
+}
+
+/* Full leaves the measure to the page — the clamp simply lifts. */
+[data-scope="container"][data-part="root"][data-size="full"] {
+  max-inline-size: none;
+}
+
+[data-scope="container"][data-part="root"][data-padding] {
+  padding-inline: var(--bs-padding-lg);
+}
+`;
+//#endregion
+//#region src/styles/components/date-input.ts
+const dateInputCss = labelCss("date-input") + `
+[data-scope="date-input"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-2);
+}
+
+[data-scope="date-input"][data-part="control"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+}
+
+/* The segment group IS the field — the same border + surface + focus halo
+   recipe as every input, no shadow. */
+[data-scope="date-input"][data-part="segment-group"] {
+  box-sizing: border-box;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  block-size: var(--bs-control-height-md);
+  padding: 0 var(--bs-padding-md);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-primary);
+  font: inherit;
+  font-size: var(--bs-font-size-md);
+  cursor: text;
+  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="date-input"][data-part="segment-group"]:hover:not([data-disabled], [data-readonly]) {
+  border-color: var(--bs-color-border-strong);
+}
+
+[data-scope="date-input"][data-part="segment-group"][data-focus] {
+  border-color: var(--bs-color-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+[data-scope="date-input"][data-part="segment-group"][data-invalid] {
+  border-color: var(--bs-color-danger);
+}
+
+[data-scope="date-input"][data-part="segment-group"][data-invalid][data-focus] {
+  box-shadow: var(--bs-focus-ring);
+}
+
+[data-scope="date-input"][data-part="segment-group"][data-disabled] {
+  border-color: var(--bs-color-border);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope="date-input"][data-part="segment-group"][data-readonly] {
+  background: var(--bs-color-surface-inset);
+}
+
+[data-scope="date-input"][data-part="segment"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2ch;
+  padding: 0 2px;
+  border-radius: var(--bs-radius-xs);
+  font-variant-numeric: tabular-nums;
+  caret-color: transparent;
+  outline: none;
+}
+
+/* The focused segment takes the flat primary fill — ink where the eye is. */
+[data-scope="date-input"][data-part="segment"]:focus {
+  background: var(--bs-color-primary);
+  color: var(--bs-color-primary-text);
+}
+
+[data-scope="date-input"][data-part="segment"][data-placeholder-shown] {
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="date-input"][data-part="segment"]:focus[data-placeholder-shown] {
+  color: var(--bs-color-primary-text);
+}
+
+/* Separators are type, not controls — never take the ink. */
+[data-scope="date-input"][data-part="segment"][data-type="literal"] {
+  min-width: 0;
+  padding: 0;
+  color: var(--bs-color-text-tertiary);
+  user-select: none;
+}
+
+/* The hidden input still hosts form autofill — visually gone, structurally
+   present. */
+[data-scope="date-input"][data-part="hidden-input"] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
   opacity: 0;
   pointer-events: none;
 }
@@ -3430,6 +4247,10 @@ const datePickerCss = labelCss("date-picker") + positionerCss("date-picker") + p
 }
 
 [data-scope="date-picker"][data-part="table"] {
+  /* Table layout is the geometry here — the columns must share the
+     panel — so a host's prose reset that blockifies tables (docs sites
+     do this for their markdown tables) must not reach inside. */
+  display: table;
   inline-size: 100%;
   border-collapse: separate;
   border-spacing: 0;
@@ -3540,6 +4361,52 @@ const datePickerCss = labelCss("date-picker") + positionerCss("date-picker") + p
 }
 `;
 //#endregion
+//#region src/styles/components/descriptions.ts
+const descriptionsCss = `
+/* The horizontal ledger: term column, detail column, one hairline
+   between rows — a table that never becomes one. */
+[data-scope="descriptions"][data-part="root"] {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-2);
+  font-size: var(--bs-font-size-md);
+}
+
+[data-scope="descriptions"][data-part="item"] {
+  display: grid;
+  grid-template-columns: minmax(6em, max-content) 1fr;
+  gap: var(--bs-space-4);
+  padding-block: var(--bs-space-2);
+  border-block-end: 1px solid var(--bs-color-border);
+}
+
+[data-scope="descriptions"][data-part="item"]:last-child {
+  border-block-end: none;
+}
+
+[data-scope="descriptions"][data-part="term"] {
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  letter-spacing: var(--bs-tracking-label);
+}
+
+[data-scope="descriptions"][data-part="detail"] {
+  margin: 0;
+  color: var(--bs-color-text-primary);
+}
+
+/* The vertical ledger: each pair stacked, for narrow measures. */
+[data-scope="descriptions"][data-part="root"][data-layout="vertical"] [data-part="item"] {
+  grid-template-columns: 1fr;
+  gap: var(--bs-space-1);
+}
+
+[data-scope="descriptions"][data-layout="vertical"] [data-part="detail"] {
+  color: var(--bs-color-text-secondary);
+}
+`;
+//#endregion
 //#region src/styles/components/dialog.ts
 const dialogCss = `
 [data-scope="dialog"][data-part="trigger"] {
@@ -3808,6 +4675,31 @@ const drawerCss = positionerCss("drawer") + `
   background: var(--bs-color-text-tertiary);
 }
 
+/* A side sheet's handle turns on its side and rides the leading edge:
+   the hand drags along the same axis it dismisses, so the bar reads as
+   a rail, not a lid. */
+[data-scope="drawer"][data-part="content"][data-swipe-direction="left"] [data-scope="drawer"][data-part="grabber"],
+[data-scope="drawer"][data-part="content"][data-swipe-direction="right"] [data-scope="drawer"][data-part="grabber"] {
+  position: absolute;
+  inset-block: 0;
+  inline-size: auto;
+  padding-inline: var(--bs-space-2);
+}
+
+[data-scope="drawer"][data-part="content"][data-swipe-direction="left"] [data-scope="drawer"][data-part="grabber"] {
+  inset-inline-start: 0;
+}
+
+[data-scope="drawer"][data-part="content"][data-swipe-direction="right"] [data-scope="drawer"][data-part="grabber"] {
+  inset-inline-end: 0;
+}
+
+[data-scope="drawer"][data-part="content"][data-swipe-direction="left"] [data-scope="drawer"][data-part="grabber-indicator"],
+[data-scope="drawer"][data-part="content"][data-swipe-direction="right"] [data-scope="drawer"][data-part="grabber-indicator"] {
+  inline-size: var(--bs-space-1);
+  block-size: var(--bs-space-8);
+}
+
 /* The trigger is a seal-cut control: paper on a hairline, deepening on
    hover, the shadow letting go under the press. */
 [data-scope="drawer"][data-part="trigger"] {
@@ -3948,23 +4840,67 @@ const drawerCss = positionerCss("drawer") + `
 }
 `;
 //#endregion
+//#region src/styles/components/dynamic-input.ts
+const dynamicInputCss = `
+/* A column of entry rows: the rows keep their rhythm on the density gap,
+   the group itself stays frameless — the inputs carry the recipe. */
+[data-scope="dynamic-input"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-gap-sm);
+  inline-size: 100%;
+}
+
+[data-scope="dynamic-input"][data-part="row"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-gap-xs);
+}
+
+/* The entry stretches to the row; the remove seal keeps its own width. */
+[data-scope="dynamic-input"][data-part="row"] [data-scope="input"][data-part="root"] {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+[data-scope="dynamic-input"][data-part="add"] {
+  display: flex;
+}
+`;
+//#endregion
 //#region src/styles/components/editable.ts
 const editableCss = labelCss("editable") + `
 [data-scope="editable"][data-part="root"] {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    "label label"
+    "area control";
   gap: var(--bs-space-2);
+  align-items: center;
   inline-size: 100%;
 }
 
+[data-scope="editable"][data-part="label"] {
+  grid-area: label;
+}
+
 [data-scope="editable"][data-part="root"][data-disabled] {
   color: var(--bs-color-text-disabled);
 }
 
+/* The text and its triggers share one row: the field stretches, the
+   seals sit at its right shoulder. */
 [data-scope="editable"][data-part="area"] {
+  grid-area: area;
   position: relative;
   display: flex;
   align-items: center;
+  min-inline-size: 0;
+}
+
+[data-scope="editable"][data-part="control"] {
+  grid-area: control;
 }
 
 /* Preview and input share one geometry so the swap never shifts the page;
@@ -4101,12 +5037,37 @@ const editableCss = labelCss("editable") + `
 }
 `;
 //#endregion
+//#region src/styles/components/ellipsis.ts
+const ellipsisCss = `
+/* One line, cut: the overflow knife draws the ellipsis at the box edge.
+   The element is a span, stood up as a block — the cut only works on a
+   block-level box. */
+[data-scope="ellipsis"][data-part="root"] {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* N lines, clamped: the box-line algorithm counts the lines the
+   wrapper hands over in --bs-ellipsis-lines. Word wrapping stays on —
+   a long word must never force the clamp to cut mid-glyph. */
+[data-scope="ellipsis"][data-part="root"][data-multiline] {
+  display: -webkit-box;
+  overflow-wrap: break-word;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--bs-ellipsis-lines);
+}
+`;
+//#endregion
 //#region src/styles/components/empty.ts
 const emptyCss = `
 /* An empty state: the page holds its breath — a quiet mark, one line of
    ink, and room for the next action. Centered, generous with whitespace. */
 [data-scope="empty"][data-part="root"] {
   /* Full width is the component's own property, not the stage's stretch. */
+  box-sizing: border-box;
   inline-size: 100%;
   display: flex;
   flex-direction: column;
@@ -4153,17 +5114,10 @@ const emptyCss = `
 `;
 //#endregion
 //#region src/styles/components/field.ts
-const fieldCss = labelCss("field") + `
-[data-scope="field"][data-part="root"] {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: var(--bs-space-2);
-  inline-size: 100%;
-}
-
-/* The control itself: inputs rely on border + surface + focus halo, never
-   a shadow — a field sits on the paper, it does not float above it. */
+/** The control recipe alone: border + surface + focus halo, the register
+* every text entry rides. The bare Input and Textarea families re-scope
+* this to their own anatomy instead of copying it. */
+const fieldControlCss = `
 [data-scope="field"][data-part="input"],
 [data-scope="field"][data-part="textarea"],
 [data-scope="field"][data-part="select"] {
@@ -4187,6 +5141,20 @@ const fieldCss = labelCss("field") + `
   block-size: var(--bs-control-height-md);
 }
 
+/* Size tiers ride the control-height ladder, as anywhere. */
+[data-scope="field"][data-part="input"][data-size="sm"],
+[data-scope="field"][data-part="select"][data-size="sm"] {
+  block-size: var(--bs-control-height-sm);
+  padding-inline: var(--bs-padding-sm);
+  font-size: var(--bs-font-size-sm);
+}
+
+[data-scope="field"][data-part="input"][data-size="lg"],
+[data-scope="field"][data-part="select"][data-size="lg"] {
+  block-size: var(--bs-control-height-lg);
+  padding-inline: var(--bs-padding-lg);
+}
+
 [data-scope="field"][data-part="textarea"] {
   min-block-size: calc(var(--bs-control-height-md) * 2 + var(--bs-space-2));
   padding-block: var(--bs-space-2);
@@ -4227,7 +5195,16 @@ const fieldCss = labelCss("field") + `
   color: var(--bs-color-text-disabled);
   cursor: not-allowed;
 }
-
+`;
+const fieldCss = labelCss("field") + `
+[data-scope="field"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: var(--bs-space-2);
+  inline-size: 100%;
+}
+` + fieldControlCss + `
 /* The required mark whispers, never shouts: a quiet pigment point after
    the label. */
 [data-scope="field"][data-part="required-indicator"] {
@@ -4250,6 +5227,49 @@ const fieldCss = labelCss("field") + `
 [data-scope="field"][data-part="root"][data-disabled] {
   color: var(--bs-color-text-disabled);
 }
+
+/* The floating-label variant, opted in per field with [data-float]. The
+   label starts riding the control at placeholder height and floats to
+   the control's top edge once the reader focuses or types. :has() reads
+   the real input element so the pairing survives whatever part marks the
+   machine writes; the empty-looking space placeholder keeps
+   :placeholder-shown honest for an untouched field. */
+[data-scope="field"][data-float][data-part="root"] {
+  position: relative;
+  /* Room above the control edge for the label once it is afloat. */
+  margin-block-start: var(--bs-space-4);
+}
+
+[data-scope="field"][data-float][data-part="root"] [data-part="label"] {
+  position: absolute;
+  inset-inline-start: var(--bs-padding-md);
+  inset-block-start: calc(var(--bs-control-height-md) / 2);
+  translate: 0 -50%;
+  color: var(--bs-color-text-tertiary);
+  pointer-events: none;
+  /* The control's own paper under the label cuts the hairline it rides,
+     the way a legend cuts a fieldset border. */
+  padding: 0 var(--bs-space-1);
+  background: var(--bs-color-surface-2);
+  transition:
+    inset-block-start var(--bs-duration-fast) var(--bs-ease-out),
+    color var(--bs-duration-fast) var(--bs-ease-out),
+    font-size var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="field"][data-float][data-part="root"]:has(input:focus) [data-part="label"],
+[data-scope="field"][data-float][data-part="root"]:has(input:not(:placeholder-shown)) [data-part="label"],
+[data-scope="field"][data-float][data-part="root"]:has(textarea:not(:placeholder-shown)) [data-part="label"] {
+  inset-block-start: 0;
+  font-size: var(--bs-font-size-xs);
+  color: var(--bs-color-text-secondary);
+}
+
+/* While the reader is in the field, the afloat label carries the same
+   pigment as the haloed hairline. */
+[data-scope="field"][data-float][data-part="root"]:has(input:focus) [data-part="label"] {
+  color: var(--bs-color-primary);
+}
 `;
 //#endregion
 //#region src/styles/components/fieldset.ts
@@ -4312,7 +5332,6 @@ const fileUploadCss = labelCss("file-upload") + `
   align-items: flex-start;
   gap: var(--bs-space-3);
   inline-size: 100%;
-  max-inline-size: 24rem;
 }
 
 /* The choose-files button rides the control recipe: paper fill, one
@@ -4555,6 +5574,136 @@ const fileUploadCss = labelCss("file-upload") + `
 }
 `;
 //#endregion
+//#region src/styles/components/float-button.ts
+const floatButtonCss = `
+/* A float: the trigger moors at the page corner and the actions fan out
+   from it. It floats, so it casts — and vessels are round: the trigger
+   and every action take the vessel radius, one rung of elevation at
+   rest, lifting another under the pointer on the slow shadow clock. */
+[data-scope="float-button"][data-part="root"] {
+  position: fixed;
+  display: flex;
+  /* The fan grows away from the mooring: first in the DOM sits nearest
+     the corner, the actions rise (or hang) beyond it. */
+  flex-direction: column-reverse;
+  gap: var(--bs-space-2);
+  z-index: calc(var(--bs-z-overlay) + var(--layer-index, 0));
+}
+
+/* Top moorings hang the actions below the trigger instead. */
+[data-scope="float-button"][data-part="root"][data-placement^="top"] {
+  flex-direction: column;
+}
+
+/* The stack hugs its corner: start moorings align inward from the
+   start edge, end moorings from the end edge. */
+[data-scope="float-button"][data-part="root"][data-placement$="-start"] {
+  align-items: flex-start;
+}
+
+[data-scope="float-button"][data-part="root"][data-placement$="-end"] {
+  align-items: flex-end;
+}
+
+[data-scope="float-button"][data-part="root"][data-placement="bottom-end"] {
+  inset-block-end: var(--bs-space-6);
+  inset-inline-end: var(--bs-space-6);
+}
+
+[data-scope="float-button"][data-part="root"][data-placement="bottom-start"] {
+  inset-block-end: var(--bs-space-6);
+  inset-inline-start: var(--bs-space-6);
+}
+
+[data-scope="float-button"][data-part="root"][data-placement="top-end"] {
+  inset-block-start: var(--bs-space-6);
+  inset-inline-end: var(--bs-space-6);
+}
+
+[data-scope="float-button"][data-part="root"][data-placement="top-start"] {
+  inset-block-start: var(--bs-space-6);
+  inset-inline-start: var(--bs-space-6);
+}
+
+/* The vessel register for both the trigger and the actions — above the
+   recipe's own variant and active rules, so a solid trigger still casts
+   at rest and everything settles back into the page when pressed. */
+[data-scope="float-button"][data-part="root"] [data-scope="button"][data-part="root"] {
+  border-radius: var(--bs-radius-lg);
+  --bs-shadow-color: color-mix(in oklab, var(--bs-shadow-ink) 30%, transparent);
+  box-shadow: var(--bs-elevation-2);
+}
+
+[data-scope="float-button"][data-part="root"] [data-scope="button"][data-part="root"]:hover:not(:disabled) {
+  box-shadow: var(--bs-elevation-3);
+}
+
+[data-scope="float-button"][data-part="root"] [data-scope="button"][data-part="root"]:active:not(:disabled) {
+  box-shadow: none;
+}
+
+/* Each action rides a row: the round button, and a small annotation
+   surfaced beside it toward the page center while the group is open.
+   The label is prose, not a control — the pointer passes through to
+   the button. */
+[data-scope="float-button"][data-part="item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  flex-direction: row-reverse;
+}
+
+[data-scope="float-button"][data-part="root"][data-placement$="-start"] [data-scope="float-button"][data-part="item"] {
+  flex-direction: row;
+}
+
+[data-scope="float-button"][data-part="item-label"] {
+  padding: var(--bs-space-1) var(--bs-space-2);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-xs);
+  letter-spacing: var(--bs-tracking-label);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* The fan folds, it never pops: actions fade and drift toward the
+   trigger, and only once the fold has finished do they leave the
+   reading order — visibility rounds the transition off, so a closed
+   group is unfocusable without a bounce. States remain; animation does
+   not. */
+[data-scope="float-button"][data-part="item"] {
+  transition:
+    opacity var(--bs-duration-base) var(--bs-ease-out),
+    translate var(--bs-duration-base) var(--bs-ease-spring),
+    visibility var(--bs-duration-base);
+}
+
+[data-scope="float-button"][data-part="item-label"] {
+  transition: opacity var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="float-button"][data-part="root"][data-state="closed"] [data-scope="float-button"][data-part="item"] {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-scope="float-button"][data-part="root"][data-placement^="bottom"][data-state="closed"] [data-scope="float-button"][data-part="item"] {
+  translate: 0 var(--bs-space-2);
+}
+
+[data-scope="float-button"][data-part="root"][data-placement^="top"][data-state="closed"] [data-scope="float-button"][data-part="item"] {
+  translate: 0 calc(var(--bs-space-2) * -1);
+}
+
+[data-scope="float-button"][data-part="root"][data-state="closed"] [data-scope="float-button"][data-part="item-label"] {
+  opacity: 0;
+}
+`;
+//#endregion
 //#region src/styles/components/floating-panel.ts
 const floatingPanelCss = positionerCss("floating-panel") + popupContentCss("floating-panel", "20rem") + `
 [data-scope="floating-panel"][data-part="positioner"] {
@@ -4808,6 +5957,43 @@ const floatingPanelCss = positionerCss("floating-panel") + popupContentCss("floa
 }
 `;
 //#endregion
+//#region src/styles/components/form.ts
+const formCss = `
+/* The form is a quiet container — fields stack in one column and the
+   spacing belongs to the grid, not to each field's margins. */
+[data-scope="form"][data-part="root"] {
+  display: grid;
+  gap: var(--bs-space-4);
+  max-inline-size: 34rem;
+}
+
+/* The FormField's wrapper keeps the field from stretching its own
+   content wider than the grid column. */
+[data-form-field] {
+  min-inline-size: 0;
+}
+`;
+//#endregion
+//#region src/styles/components/grid.ts
+const gridCss = `
+/* The alignment lattice. minmax(0, 1fr) — not a bare 1fr: a long word
+   or a wide child would otherwise stretch its track past the lattice
+   and shove every sibling aside. The column count and the gap ride CSS
+   variables the wrapper points at their tokens. */
+[data-scope="grid"][data-part="root"] {
+  display: grid;
+  grid-template-columns: repeat(var(--bs-grid-columns, 12), minmax(0, 1fr));
+  gap: var(--bs-grid-gap, var(--bs-space-3));
+}
+
+/* The auto-fill lattice: as many tracks as the container fits, each at
+   least --bs-grid-min-child-width. The wrapper sets the variable and
+   this attribute together — one never arrives without the other. */
+[data-scope="grid"][data-part="root"][data-autofill] {
+  grid-template-columns: repeat(auto-fill, minmax(var(--bs-grid-min-child-width), 1fr));
+}
+`;
+//#endregion
 //#region src/styles/components/highlight.ts
 const highlightCss = `
 /* Search hits are strokes of pigment on the page, not neon. The highlight
@@ -4864,6 +6050,136 @@ const hoverCardCss = popupContentCss("hover-card") + positionerCss("hover-card")
 }
 `;
 //#endregion
+//#region src/styles/components/icon.ts
+const iconCss = `
+/* The inkwell: one box at the glyph's optical measure, riding the
+   text's own color — the fill comes from currentColor, so the icon
+   carries no pigment of its own. The size steps follow the surrounding
+   font size, so an icon sits in a line of any size with no breakpoint
+   of its own; inherit is that same one-em default, named. */
+[data-scope="icon"][data-part="root"] {
+  --_size: 1em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: var(--_size);
+  block-size: var(--_size);
+  font-size: var(--_size);
+  fill: currentColor;
+}
+
+[data-scope="icon"][data-part="root"][data-size="sm"] {
+  --_size: 0.75em;
+}
+[data-scope="icon"][data-part="root"][data-size="md"] {
+  --_size: 1em;
+}
+[data-scope="icon"][data-part="root"][data-size="lg"] {
+  --_size: 1.25em;
+}
+
+/* The glyph fills the box it is given — a standard measure is the
+   whole point of the well. */
+[data-scope="icon"][data-part="root"] > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+`;
+//#endregion
+//#region src/styles/components/image.ts
+const imageCss = `
+/* A framed picture that announces its own arrival: while the source
+   loads, the frame keeps the skeleton's breath; the picture dissolves
+   in when it lands; a broken source leaves the fallback. The frame's
+   size belongs to the consumer, like the skeleton's. */
+[data-scope="image"][data-part="root"] {
+  --_fit: cover;
+  position: relative;
+  display: block;
+  margin: 0;
+  overflow: hidden;
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-inset);
+}
+
+[data-scope="image"][data-part="root"][data-fit="contain"] {
+  --_fit: contain;
+}
+
+[data-scope="image"][data-part="root"][data-fit="fill"] {
+  --_fit: fill;
+}
+
+[data-scope="image"][data-part="root"][data-fit="none"] {
+  --_fit: none;
+}
+
+/* Waiting is the skeleton's breath — same wash, same pace. */
+[data-scope="image"][data-part="root"][data-state="loading"] {
+  animation: bs-image-breathe 1600ms var(--bs-ease-in-out) infinite;
+}
+
+[data-scope="image"][data-part="img"] {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: var(--_fit);
+  /* The picture arrives unseen and dissolves in — ink settling, never
+     a flash of half-drawn pixels. */
+  opacity: 0;
+  transition: opacity var(--bs-duration-slow) var(--bs-ease-out);
+}
+
+[data-scope="image"][data-part="root"][data-state="loaded"] [data-scope="image"][data-part="img"] {
+  opacity: 1;
+}
+
+/* A broken source leaves nothing but the fallback: the browser's own
+   broken-image mark would argue with the page. */
+[data-scope="image"][data-part="root"][data-state="error"] [data-scope="image"][data-part="img"] {
+  display: none;
+}
+
+[data-scope="image"][data-part="fallback"] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="image"][data-part="fallback"] svg {
+  inline-size: var(--bs-space-8);
+  block-size: var(--bs-space-8);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-scope="image"][data-part="root"][data-state="loading"] {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+@keyframes bs-image-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.55;
+  }
+}
+`;
+//#endregion
 //#region src/styles/components/image-cropper.ts
 const imageCropperCss = labelCss("image-cropper") + `
 [data-scope="image-cropper"][data-part="root"] {
@@ -5027,37 +6343,229 @@ const imageCropperCss = labelCss("image-cropper") + `
 }
 `;
 //#endregion
-//#region src/styles/components/tree-view.ts
-const treeViewCss = labelCss("tree-view") + `
-[data-scope="tree-view"][data-part="root"] {
-  /* The indent system: depth comes from the machine as --depth per node;
-     every offset below derives from these three knobs. */
-  --bs-tree-indent: 1rem;
-  --bs-tree-icon: 1rem;
-  --bs-tree-row-block: var(--bs-space-2);
-  /* Full width is the component's own property, not the stage's stretch. */
-  inline-size: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--bs-space-2);
+//#region src/styles/components/image-viewer.ts
+const imageViewerCss = `
+/* The lightbox rides the dialog machine for scrim, stacking, focus and
+   Escape, but it owns the whole screen: the extra class out-specifies
+   the sheet chrome — no paper vessel, just the picture floating over
+   the dimmed page. The layer math repeats the dialog's on purpose: the
+   viewer must stand correct even where the dialog's own sheet is
+   never styled. */
+[data-scope="dialog"][data-part="backdrop"].bs-image-viewer-backdrop {
+  position: fixed;
+  inset: 0;
+  /* One below its positioner, from the same shared base. */
+  z-index: calc(var(--bs-z-overlay) + var(--layer-index, 0) - 1);
+  background: var(--bs-color-scrim);
+  transition: opacity var(--bs-duration-slow) var(--bs-ease-out);
 }
 
-[data-scope="tree-view"][data-part="tree"] {
-  display: flex;
-  flex-direction: column;
-  color: var(--bs-color-text-primary);
-  font-size: var(--bs-font-size-sm);
+[data-scope="dialog"][data-part="positioner"].bs-image-viewer-positioner {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--bs-z-overlay) + var(--layer-index, 0));
+  display: grid;
+  /* One row capped at the viewport: an auto row would let the picture's
+     intrinsic height stretch the content past the screen, carrying the
+     toolbar out of reach below the fold. */
+  grid-template-rows: minmax(0, 1fr);
+  padding: 0;
 }
 
-/* Rows are quiet: no hairlines, no shadows — selection and hover are pure
-   light on the paper. */
-[data-scope="tree-view"][data-part="branch-control"],
-[data-scope="tree-view"][data-part="item"] {
+[data-scope="dialog"][data-part="content"].bs-image-viewer-content {
   position: relative;
   display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  /* No page reset may be assumed: 100% must count the row's own padding. */
+  flex-direction: column;
+  gap: var(--bs-space-4);
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  max-block-size: none;
+  overflow: visible;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+[data-scope="dialog"][data-part="content"].bs-image-viewer-content:focus,
+[data-scope="dialog"][data-part="content"].bs-image-viewer-content:focus-visible {
+  outline: none;
+}
+
+/* The panel grammar still holds: the lightbox dissolves in — the room
+   darkening, never a flash. */
+[data-scope="dialog"][data-part="content"].bs-image-viewer-content[data-state="open"] {
+  animation: bs-ink-in var(--bs-duration-slow) var(--bs-ease-out);
+}
+
+/* The picture takes the row the toolbar leaves and keeps its shape
+   inside it — contain centers whatever the frame cannot hold. The
+   minimum height must be let go of explicitly, or the picture's own
+   height would pin the row and push the tools off the screen. The
+   hand's zoom and quarter-turns compose on one transform, which never
+   animates into place on open — zoom is the reader's hand, not the
+   ink's. */
+[data-scope="image-viewer"][data-part="viewport"] {
+  display: block;
+  flex: 1 1 auto;
+  min-block-size: 0;
+  min-inline-size: 0;
+  inline-size: 100%;
+  object-fit: contain;
+  user-select: none;
+  transition: transform var(--bs-duration-base) var(--bs-ease-out);
+}
+
+[data-scope="image-viewer"][data-part="toolbar"] {
+  display: flex;
+  flex: none;
+  justify-content: center;
+  gap: var(--bs-space-2);
+  /* The tools ride a small lacquer tray: a translucent ink that keeps
+     the room dark in either register, held clear of the picture above
+     and of the page's edge below. The group inside carries the joinery;
+     its corners stay at the control register. */
+  inline-size: max-content;
+  margin-inline: auto;
+  margin-block-end: var(--bs-space-6);
+  padding: var(--bs-space-1);
+  border-radius: var(--bs-radius-control, var(--bs-radius-sm));
+  background: color-mix(in oklab, var(--bs-color-gray-900) 72%, transparent);
+}
+
+/* Ghost ink over the dark scrim must be the paper-bright ink that never
+   flips with the theme, and the hover wash follows as a pale breath. */
+[data-scope="image-viewer"][data-part="toolbar"] [data-scope="button"][data-part="root"] {
+  --_ink: var(--bs-color-text-on-scrim);
+  --_fill-hover: color-mix(in oklab, var(--bs-color-surface-2) 16%, transparent);
+}
+`;
+//#endregion
+//#region src/styles/components/input-group.ts
+const inputGroupCss = `
+/* The merged control: one hairline and one halo for the whole family.
+   The input inside surrenders its own frame so attachments read as parts
+   of the same seal, not buttons bolted onto a field. */
+[data-scope="input-group"][data-part="root"] {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  /* The attachments are square-cut cells; the seal's rounding clips
+     them, so the corners read as one shape instead of a field with
+     blocks bolted on. */
+  overflow: hidden;
+  transition:
+    border-color var(--bs-duration-fast) var(--bs-ease-out),
+    box-shadow var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="input-group"][data-part="root"]:hover {
+  border-color: var(--bs-color-border-strong);
+}
+
+/* Focus is light arriving at the group: one halo, however many controls
+   sit inside. */
+[data-scope="input-group"][data-part="root"]:focus-within {
+  border-color: var(--bs-color-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+/* The entry wears no frame of its own — it stretches to fill what is
+   left of the seal, its own halo silenced in favor of the group's. The
+   compound selectors outrank the field recipe's focus and disabled
+   branches without touching the shared stylesheet. */
+[data-scope="input-group"][data-part="root"] [data-scope="input"][data-part="root"],
+[data-scope="input-group"][data-part="root"] [data-scope="textarea"][data-part="root"] {
+  flex: 1;
+  inline-size: auto;
+  min-inline-size: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+[data-scope="input-group"][data-part="root"] [data-scope="input"][data-part="root"]:focus,
+[data-scope="input-group"][data-part="root"] [data-scope="input"][data-part="root"]:focus-visible,
+[data-scope="input-group"][data-part="root"] [data-scope="textarea"][data-part="root"]:focus,
+[data-scope="input-group"][data-part="root"] [data-scope="textarea"][data-part="root"]:focus-visible {
+  border: none;
+  box-shadow: none;
+}
+
+/* Disabled keeps the group's paper too — only the ink steps back. */
+[data-scope="input-group"][data-part="root"] [data-scope="input"][data-part="root"]:disabled,
+[data-scope="input-group"][data-part="root"] [data-scope="textarea"][data-part="root"]:disabled {
+  background: transparent;
+}
+
+/* A button living in an attachment focuses inside the clipped seal, so
+   its halo wears the inset variant — the outward glow would be cut to
+   ugly half-corners by the group's rounding. */
+[data-scope="input-group"][data-part="root"] [data-scope="button"][data-part="root"]:focus-visible {
+  box-shadow: var(--bs-focus-ring-inset);
+}
+
+/* An attachment cell: a recessed face between the reader's fixed words
+   and the ink they type. Hairlines do the separating — leading cells
+   part from the entry on the inline end, trailing on the inline start,
+   so any root/addon order divides correctly. */
+[data-scope="input-group"][data-part="addon"] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--bs-gap-xs);
+  padding: 0 var(--bs-padding-md);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  white-space: nowrap;
+}
+
+[data-scope="input-group"][data-part="addon"]:not(:first-child) {
+  border-inline-start: 1px solid var(--bs-color-border);
+}
+
+[data-scope="input-group"][data-part="addon"]:not(:last-child) {
+  border-inline-end: 1px solid var(--bs-color-border);
+}
+`;
+//#endregion
+//#region src/styles/components/tree-view.ts
+const treeViewCss = labelCss("tree-view") + `
+[data-scope="tree-view"][data-part="root"] {
+  /* The indent system: depth comes from the machine as --depth per node;
+     every offset below derives from these three knobs. */
+  --bs-tree-indent: 1rem;
+  --bs-tree-icon: 1rem;
+  --bs-tree-row-block: var(--bs-space-2);
+  /* Full width is the component's own property, not the stage's stretch. */
+  inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-2);
+}
+
+[data-scope="tree-view"][data-part="tree"] {
+  display: flex;
+  flex-direction: column;
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-sm);
+}
+
+/* Rows are quiet: no hairlines, no shadows — selection and hover are pure
+   light on the paper. */
+[data-scope="tree-view"][data-part="branch-control"],
+[data-scope="tree-view"][data-part="item"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  /* No page reset may be assumed: 100% must count the row's own padding. */
   box-sizing: border-box;
   inline-size: 100%;
   padding-block: var(--bs-tree-row-block);
@@ -5290,6 +6798,154 @@ const kbdCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/layout.ts
+const layoutCss = `
+/* The application skeleton: a full-height grid that holds the header on
+   top, the footer at the foot, and the flow between them. When a sider
+   is declared a fixed rail joins the columns; the minmax(0, 1fr) — not
+   a bare 1fr — keeps a wide child from stretching its track and
+   shoving every sibling aside. */
+[data-scope="layout"][data-part="root"] {
+  display: grid;
+  min-block-size: 100dvh;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+}
+
+/* With a sider the rail owns one whole row span, so the header and the
+   footer reach it only on the flow side. */
+[data-scope="layout"][data-part="root"][data-sider="start"] {
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas:
+    "sider header"
+    "sider content"
+    "sider footer";
+}
+
+[data-scope="layout"][data-part="root"][data-sider="end"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "header sider"
+    "content sider"
+    "footer sider";
+}
+
+[data-scope="layout"][data-part="header"] {
+  grid-area: header;
+  padding: var(--bs-padding-md) var(--bs-padding-xl);
+  border-block-end: 1px solid var(--bs-color-border);
+}
+
+[data-scope="layout"][data-part="footer"] {
+  grid-area: footer;
+  padding: var(--bs-padding-md) var(--bs-padding-xl);
+  border-block-start: 1px solid var(--bs-color-border);
+}
+
+/* The rail: a panel on the first surface, separated from the flow by
+   one hairline. The inline size rides the variable the wrapper writes —
+   a layout parameter, not a visual token — so the collapse animates by
+   re-pointing it, and the resizable rail's floor and ceiling clamp it
+   between the caller's bounds. */
+[data-scope="layout"][data-part="sider"] {
+  position: relative;
+  grid-area: sider;
+  inline-size: clamp(
+    var(--bs-layout-sider-min, 12rem),
+    var(--bs-layout-sider-width, 16rem),
+    var(--bs-layout-sider-max, 24rem)
+  );
+  overflow: hidden;
+  background: var(--bs-color-surface-1);
+  border-inline-end: 1px solid var(--bs-color-border);
+  transition: inline-size var(--bs-duration-slow) var(--bs-ease-out);
+}
+
+/* The hand leads: while dragging, the rail follows the pointer without
+   the easing catching up behind it. */
+[data-scope="layout"][data-part="sider"][data-dragging] {
+  transition: none;
+}
+
+/* The resize hairline: a generous hit strip at the flow edge whose ink
+   answers to the hand — quiet until hovered, primary while gripped or
+   keyed. It stays inside the rail, whose overflow clips anything that
+   pokes out — the strip and its ink both live inboard of the border. */
+[data-scope="layout"][data-part="sider-resize"] {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--bs-space-2);
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+[data-scope="layout"][data-part="sider-resize"]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: calc(var(--bs-space-2) / 2);
+  inline-size: 1px;
+  background: var(--bs-color-border);
+  transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="layout"][data-part="sider-resize"]:hover::before,
+[data-scope="layout"][data-part="sider-resize"]:focus-visible::before,
+[data-scope="layout"][data-part="sider-resize"][data-dragging]::before {
+  background: var(--bs-color-primary);
+}
+
+[data-scope="layout"][data-part="sider-resize"]:focus-visible {
+  outline: none;
+}
+
+/* An end-side rail wears its handle on the other edge, and the pull
+   toward the flow points the other way — the wrapper already mirrors
+   the arithmetic. */
+[data-scope="layout"][data-part="root"][data-sider="end"]
+  [data-scope="layout"][data-part="sider-resize"] {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+[data-scope="layout"][data-part="root"][data-sider="end"]
+  [data-scope="layout"][data-part="sider-resize"]::before {
+  inset-inline-end: auto;
+  inset-inline-start: calc(var(--bs-space-2) / 2);
+}
+
+/* The hairline always faces the flow, so an end sider wears it on its
+   other edge. */
+[data-scope="layout"][data-part="root"][data-sider="end"]
+  [data-scope="layout"][data-part="sider"] {
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--bs-color-border);
+}
+
+/* A resizable rail retires its own border: the resize hairline that
+   rides the flow edge is the one line — the border would draw a second
+   one beside it. */
+[data-scope="layout"][data-part="root"][data-sider="start"]
+  [data-scope="layout"][data-part="sider"][data-resizable] {
+  border-inline-end: none;
+}
+
+[data-scope="layout"][data-part="root"][data-sider="end"]
+  [data-scope="layout"][data-part="sider"][data-resizable] {
+  border-inline-start: none;
+}
+
+[data-scope="layout"][data-part="content"] {
+  grid-area: content;
+  padding: var(--bs-padding-xl);
+}
+`;
+//#endregion
 //#region src/styles/components/link.ts
 const linkCss = `
 /* A link is ink in the accent's voice: quiet at rest, deepening under
@@ -5326,6 +6982,87 @@ const linkCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/list.ts
+const listCss = `
+/* A ledger of rows: Leading carries the mark, Content the title and
+   its quiet echo, Actions the way out. The hairline between rows is
+   the bordered variant's; the hover wash belongs to the interactive
+   registers — a row that reads as clickable must answer the pointer. */
+[data-scope="list"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-scope="list"][data-part="item"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-gap-sm);
+  padding: var(--bs-padding-sm) var(--bs-padding-md);
+  transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+/* The bordered variant draws one hairline between rows — never before
+   the first, so the ledger starts clean. */
+[data-scope="list"][data-part="root"][data-bordered]
+  [data-scope="list"][data-part="item"]
+  + [data-scope="list"][data-part="item"] {
+  border-block-start: 1px solid var(--bs-color-border);
+}
+
+/* A row the caller made clickable (role="button") owns the pointer and
+   the hover wash; focus rides the inset halo, since the row is the
+   full bleed of its container. */
+[data-scope="list"][data-part="item"][role="button"] {
+  cursor: pointer;
+}
+
+[data-scope="list"][data-part="root"][data-hoverable] [data-scope="list"][data-part="item"]:hover,
+[data-scope="list"][data-part="item"][role="button"]:hover {
+  background: var(--bs-color-surface-0);
+}
+
+[data-scope="list"][data-part="item"]:focus-visible {
+  outline: none;
+  box-shadow: var(--bs-focus-ring-inset);
+}
+
+[data-scope="list"][data-part="leading"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+[data-scope="list"][data-part="content"] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--bs-space-1);
+  min-inline-size: 0;
+}
+
+[data-scope="list"][data-part="title"] {
+  color: var(--bs-color-text-primary);
+  font-weight: var(--bs-font-weight-medium);
+}
+
+[data-scope="list"][data-part="description"] {
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+[data-scope="list"][data-part="actions"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--bs-space-2);
+  margin-inline-start: auto;
+}
+`;
+//#endregion
 //#region src/styles/components/listbox.ts
 const listboxCss = labelCss("listbox") + popupContentCss("listbox", "16rem") + `
 [data-scope="listbox"][data-part="root"] {
@@ -5594,6 +7331,116 @@ const marqueeCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/masonry.ts
+const masonryCss = `
+/* The wall of uneven heights, cut by the browser's multi-column
+   layout. Filling runs down each column before crossing to the next —
+   the order is column-first; a row-flow wall needs grid masonry, which
+   browsers do not ship yet. */
+[data-scope="masonry"][data-part="root"] {
+  column-count: var(--bs-masonry-columns, 3);
+  column-gap: var(--bs-masonry-gap, var(--bs-space-3));
+}
+
+/* Each stone stays whole — never split across two columns — and the
+   gap below it holds the next stone of the column at the named
+   distance. */
+[data-scope="masonry"][data-part="root"] > * {
+  break-inside: avoid;
+  margin-block-end: var(--bs-masonry-gap, var(--bs-space-3));
+}
+`;
+//#endregion
+//#region src/styles/components/mentions.ts
+const mentionsCss = `
+/* The field: a textarea in the standard field recipe — border + surface
+   + focus halo, never a shadow lift. */
+[data-scope="mentions"][data-part="root"] {
+  display: flex;
+}
+
+[data-scope="mentions"][data-part="textarea"] {
+  box-sizing: border-box;
+  flex: 1;
+  min-inline-size: 0;
+  min-block-size: calc(var(--bs-control-height-md) + var(--bs-space-4));
+  padding: var(--bs-space-2) var(--bs-padding-md);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-primary);
+  font: inherit;
+  font-size: var(--bs-font-size-md);
+  line-height: var(--bs-line-height-relaxed);
+  resize: vertical;
+  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="mentions"][data-part="textarea"]::placeholder {
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="mentions"][data-part="textarea"]:hover:not([disabled], [readonly]) {
+  border-color: var(--bs-color-border-strong);
+}
+
+[data-scope="mentions"][data-part="textarea"]:focus,
+[data-scope="mentions"][data-part="textarea"]:focus-visible {
+  outline: none;
+  border-color: var(--bs-color-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+[data-scope="mentions"][data-part="textarea"][disabled] {
+  border-color: var(--bs-color-border);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* The candidate vessel: the popup recipe — paper, one hairline,
+   elevation 3 — riding the popover positioner's shared ladder. */
+[data-scope="mentions"][data-part="popup"] {
+  box-sizing: border-box;
+  min-inline-size: 10rem;
+  max-block-size: 14rem;
+  display: flex;
+  flex-direction: column;
+  padding: var(--bs-space-1);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-lg);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-primary);
+  box-shadow: var(--bs-elevation-3);
+  overflow-y: auto;
+  outline: none;
+}
+
+[data-scope="mentions"][data-state="open"][data-part="popup"] {
+  animation: bs-ink-in var(--bs-duration-base) var(--bs-ease-out);
+}
+
+/* Options are rows of light like every list: hover is the machine's
+   highlight, the keyboard's row is the active one — and the two are the
+   same stroke, so pointer and arrows never disagree. */
+[data-scope="mentions"][data-part="option"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+  min-block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-padding-sm);
+  border-radius: var(--bs-radius-sm);
+  font-size: var(--bs-font-size-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="mentions"][data-part="option"][data-active] {
+  background: var(--bs-color-surface-0);
+}
+`;
+//#endregion
 //#region src/styles/components/menu.ts
 const menuCss = positionerCss("menu") + popupContentCss("menu", "12rem") + `
 [data-scope="menu"][data-part="content"] {
@@ -5795,6 +7642,66 @@ const menuCss = positionerCss("menu") + popupContentCss("menu", "12rem") + `
 }
 `;
 //#endregion
+//#region src/styles/components/menubar.ts
+const menubarCss = `
+/* The bar: one hairline of rest under a row of quiet triggers. */
+[data-scope="menubar"][data-part="root"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-1);
+  padding: var(--bs-space-1) 0;
+  border-block-end: 1px solid var(--bs-color-border);
+}
+
+/* The triggers are ghost buttons — terrain, not controls: no fill, no
+   hairline of their own, the bar's hairline doing the framing. */
+[data-scope="menubar"][data-part="trigger"] {
+  display: inline-flex;
+  align-items: center;
+  block-size: var(--bs-control-height-sm);
+  padding: 0 var(--bs-padding-sm);
+  border: none;
+  border-radius: var(--bs-radius-sm);
+  background: transparent;
+  color: var(--bs-color-text-secondary);
+  font: inherit;
+  font-size: var(--bs-font-size-sm);
+  letter-spacing: var(--bs-tracking-label);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--bs-duration-fast) var(--bs-ease-out),
+    color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="menubar"][data-part="trigger"]:hover {
+  background: var(--bs-color-surface-0);
+  color: var(--bs-color-text-primary);
+}
+
+/* Open keeps the focus look: the machine hands focus into the menu, so
+   :focus-visible alone would drop the halo the moment it opens. */
+[data-scope="menubar"][data-part="trigger"]:focus-visible,
+[data-scope="menubar"][data-part="trigger"][data-state="open"] {
+  outline: none;
+  background: var(--bs-color-surface-0);
+  color: var(--bs-color-text-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+/* The popup keeps the menu parts and the menu stylesheet; only the
+   danger rows ride this scope's knowledge of the bar's callers. */
+[data-scope="menu"][data-part="item"][data-danger] {
+  color: var(--bs-color-danger);
+}
+
+[data-scope="menu"][data-part="item"][data-danger][data-state="checked"] {
+  background: var(--bs-color-danger);
+  color: var(--bs-color-ink-on-fill);
+}
+`;
+//#endregion
 //#region src/styles/components/meter.ts
 const meterCss = `
 /* A measure in the world, not a task in flight: how much of the toner
@@ -5838,70 +7745,17 @@ const meterCss = `
   overflow: hidden;
   block-size: var(--bs-space-1);
   border-radius: var(--bs-radius-sm);
-  background: var(--bs-color-surface-0);
-}
-
-[data-scope="meter"][data-part="range"] {
-  /* The fill reads the root's declared share of the scale. */
-  display: block;
-  inline-size: var(--_percent, 0%);
-  block-size: 100%;
-  border-radius: inherit;
-  background: var(--_pigment);
-  transition: inline-size var(--bs-duration-slow) var(--bs-ease-out);
-}
-`;
-//#endregion
-//#region src/styles/components/typography.ts
-const typographyCss = `
-/* The typographic voices, named so prose can ask for one: display and
-   heading ride the song-serif, the rest ride the hei. Nothing here is
-   decorative — hierarchy is size, weight, and space. */
-[data-scope="typography"][data-part="display"] {
-  margin: 0;
-  color: var(--bs-color-text-primary);
-  font-family: var(--bs-font-serif);
-  font-size: var(--bs-font-size-4xl);
-  font-weight: var(--bs-font-weight-semibold);
-  line-height: var(--bs-line-height-tight);
-}
-
-[data-scope="typography"][data-part="heading"] {
-  margin: 0;
-  color: var(--bs-color-text-primary);
-  font-family: var(--bs-font-serif);
-  font-size: var(--bs-font-size-2xl);
-  font-weight: var(--bs-font-weight-semibold);
-  line-height: var(--bs-line-height-snug);
-}
-
-[data-scope="typography"][data-part="lead"] {
-  margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-lg);
-  line-height: var(--bs-line-height-relaxed);
-}
-
-[data-scope="typography"][data-part="body"] {
-  margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-base);
-  line-height: var(--bs-line-height-relaxed);
-}
-
-[data-scope="typography"][data-part="muted"] {
-  margin: 0;
-  color: var(--bs-color-text-tertiary);
-  font-size: var(--bs-font-size-sm);
-  line-height: var(--bs-line-height-relaxed);
+  background: var(--bs-color-surface-0);
 }
 
-[data-scope="typography"][data-part="label"] {
-  margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-sm);
-  font-weight: var(--bs-font-weight-medium);
-  letter-spacing: var(--bs-tracking-label);
+[data-scope="meter"][data-part="range"] {
+  /* The fill reads the root's declared share of the scale. */
+  display: block;
+  inline-size: var(--_percent, 0%);
+  block-size: 100%;
+  border-radius: inherit;
+  background: var(--_pigment);
+  transition: inline-size var(--bs-duration-slow) var(--bs-ease-out);
 }
 `;
 //#endregion
@@ -6580,6 +8434,31 @@ const pinInputCss = labelCss("pin-input") + `
 }
 `;
 //#endregion
+//#region src/styles/components/popconfirm.ts
+const popconfirmCss = `
+/* The popconfirm rides the popover vessel for its paper, hairline and
+   elevation; these rules only lay out the question and its answers.
+   The extra class out-specifies any part-level popover padding so the
+   panel reads as one tight question, not a floating card. */
+.bs-popconfirm {
+  max-inline-size: 18rem;
+  padding: var(--bs-padding-md);
+}
+
+.bs-popconfirm [data-part="message"] {
+  margin: 0 0 var(--bs-space-3);
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+.bs-popconfirm [data-part="actions"] {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--bs-space-2);
+}
+`;
+//#endregion
 //#region src/styles/components/popover.ts
 const popoverCss = positionerCss("popover") + popupContentCss("popover", "20rem") + `
 [data-scope="popover"][data-part="content"] {
@@ -6735,14 +8614,16 @@ const progressCss = labelCss("progress") + `
   text-align: end;
 }
 
-/* The track is a hairline groove pressed into the paper — ink will run
-   through it, so it stays quiet until the fill arrives. */
+/* The track is a groove pressed into the paper — ink will run through it,
+   so it stays quiet until the fill arrives. It sits one mix-step below the
+   ground it is drawn on (the ground itself), or the groove reads as
+   nothing; the pressed depth keeps it visible like M3's tone-based track. */
 [data-scope="progress"][data-part="track"] {
   grid-column: 1 / -1;
   overflow: hidden;
   block-size: var(--bs-space-1);
   border-radius: var(--bs-radius-sm);
-  background: var(--bs-color-surface-0);
+  background: color-mix(in oklab, var(--bs-color-surface-0) 96%, black);
 }
 
 [data-scope="progress"][data-part="track"][data-orientation="vertical"] {
@@ -6809,7 +8690,7 @@ const progressCss = labelCss("progress") + `
 }
 
 [data-scope="progress"][data-part="circle-track"] {
-  stroke: var(--bs-color-surface-0);
+  stroke: color-mix(in oklab, var(--bs-color-surface-0) 92%, black);
 }
 
 [data-scope="progress"][data-part="circle-range"] {
@@ -6838,6 +8719,83 @@ const progressCss = labelCss("progress") + `
 }
 `;
 //#endregion
+//#region src/styles/components/progress-group.ts
+const progressGroupCss = `
+/* One bar, several verdicts: the track lays the segments shoulder to
+   shoulder, each speaking its own pigment (the badge's --_pigment
+   mode), and the legend reads them back beneath. */
+[data-scope="progress-group"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-2);
+  inline-size: 100%;
+  font-size: var(--bs-font-size-sm);
+}
+
+[data-scope="progress-group"][data-part="track"] {
+  display: flex;
+  overflow: hidden;
+  block-size: var(--bs-space-2);
+  border-radius: var(--bs-radius-xs);
+  background: var(--bs-color-surface-inset);
+}
+
+:is([data-scope="progress-group"][data-part="segment"], [data-scope="progress-group"][data-part="legend-item"]) {
+  --_pigment: var(--bs-color-primary);
+}
+
+:is([data-scope="progress-group"][data-part="segment"], [data-scope="progress-group"][data-part="legend-item"])[data-pigment="success"] {
+  --_pigment: var(--bs-color-success);
+}
+
+:is([data-scope="progress-group"][data-part="segment"], [data-scope="progress-group"][data-part="legend-item"])[data-pigment="warning"] {
+  --_pigment: var(--bs-color-warning);
+}
+
+:is([data-scope="progress-group"][data-part="segment"], [data-scope="progress-group"][data-part="legend-item"])[data-pigment="danger"] {
+  --_pigment: var(--bs-color-danger);
+}
+
+:is([data-scope="progress-group"][data-part="segment"], [data-scope="progress-group"][data-part="legend-item"])[data-pigment="info"] {
+  --_pigment: var(--bs-color-info);
+}
+
+[data-scope="progress-group"][data-part="segment"] {
+  overflow: hidden;
+  background: var(--_pigment);
+  /* The fill flows at the measure's pace — width trails the data like
+     the single bar's does. The track's rounded mask rounds the ends;
+     the segments themselves stay square so the bar reads as one. */
+  transition: inline-size var(--bs-duration-slow) var(--bs-ease-out);
+}
+
+[data-scope="progress-group"][data-part="legend"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-2) var(--bs-gap-md);
+  color: var(--bs-color-text-secondary);
+}
+
+[data-scope="progress-group"][data-part="legend-item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-2);
+}
+
+[data-scope="progress-group"][data-part="swatch"] {
+  flex: none;
+  inline-size: var(--bs-space-2);
+  block-size: var(--bs-space-2);
+  border-radius: var(--bs-radius-xs);
+  background: var(--_pigment);
+}
+
+[data-scope="progress-group"][data-part="legend-value"] {
+  color: var(--bs-color-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+`;
+//#endregion
 //#region src/styles/components/qr-code.ts
 const qrCodeCss = `
 [data-scope="qr-code"][data-part="root"] {
@@ -6959,8 +8917,8 @@ const radioGroupCss = labelCss("radio-group") + `
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  inline-size: var(--bs-part-size-md);
-  block-size: var(--bs-part-size-md);
+  inline-size: var(--bs-part-size-sm);
+  block-size: var(--bs-part-size-sm);
   border: 1px solid var(--bs-color-border);
   border-radius: var(--bs-radius-full);
   background: var(--bs-color-surface-2);
@@ -6989,8 +8947,8 @@ const radioGroupCss = labelCss("radio-group") + `
 
 [data-scope="radio-group"][data-part="item-control"][data-state="checked"]::before {
   content: "";
-  inline-size: calc(var(--bs-part-size-md) * 0.3);
-  block-size: calc(var(--bs-part-size-md) * 0.3);
+  inline-size: calc(var(--bs-part-size-sm) * 0.5);
+  block-size: calc(var(--bs-part-size-sm) * 0.5);
   border-radius: var(--bs-radius-full);
   background: var(--bs-color-primary-text);
 }
@@ -7019,8 +8977,8 @@ const radioGroupCss = labelCss("radio-group") + `
    the spring — position comes from the machine. */
 [data-scope="radio-group"][data-part="indicator"] {
   position: absolute;
-  inline-size: var(--bs-part-size-md);
-  block-size: var(--bs-part-size-md);
+  inline-size: var(--bs-part-size-sm);
+  block-size: var(--bs-part-size-sm);
   border-radius: var(--bs-radius-full);
   background: var(--bs-color-primary);
   transition:
@@ -7332,6 +9290,7 @@ const selectCss = labelCss("select") + positionerCss("select") + popupContentCss
 /* The control is the field: the recipe's border, surface and focus halo
    ride on it, with the trigger and its passengers sitting inside. */
 [data-scope="select"][data-part="control"] {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--bs-space-1);
@@ -7714,104 +9673,6 @@ const skeletonCss = `
 }
 `;
 //#endregion
-//#region src/styles/components/spinner.ts
-const spinnerCss = `
-/* A wheel of waiting: one arc of ink turning about its center. Quiet by
-   default — it reports progress without claiming attention. */
-[data-scope="spinner"][data-part="root"] {
-  display: inline-flex;
-  flex: none;
-  color: var(--bs-color-text-tertiary);
-  animation: bs-spinner-turn 0.9s linear infinite;
-}
-
-[data-scope="spinner"][data-part="root"][data-size="sm"] {
-  inline-size: var(--bs-part-size-sm);
-  block-size: var(--bs-part-size-sm);
-}
-[data-scope="spinner"][data-part="root"][data-size="md"] {
-  inline-size: var(--bs-part-size-md);
-  block-size: var(--bs-part-size-md);
-}
-[data-scope="spinner"][data-part="root"][data-size="lg"] {
-  inline-size: var(--bs-part-size-lg);
-  block-size: var(--bs-part-size-lg);
-}
-
-[data-scope="spinner"][data-part="root"] svg {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-@keyframes bs-spinner-turn {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-scope="spinner"][data-part="root"] {
-    animation-duration: 1ms;
-    animation-iteration-count: 1;
-  }
-}
-`;
-//#endregion
-//#region src/styles/components/stat.ts
-const statCss = `
-/* One figure on the page: the label whispers what it is, the value
-   states it plainly in tabular figures, the delta reads the direction
-   in the fixed semantic pigments. */
-[data-scope="stat"][data-part="root"] {
-  display: flex;
-  flex-direction: column;
-  gap: var(--bs-space-1);
-}
-
-[data-scope="stat"][data-part="label"] {
-  margin: 0;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-sm);
-  font-weight: var(--bs-font-weight-medium);
-  letter-spacing: var(--bs-tracking-label);
-}
-
-/* The value carries the ink: large, semibold, tabular so figures
-   align across a row of stats. */
-[data-scope="stat"][data-part="value"] {
-  color: var(--bs-color-text-primary);
-  font-size: var(--bs-font-size-3xl);
-  font-weight: var(--bs-font-weight-semibold);
-  font-variant-numeric: tabular-nums;
-  line-height: var(--bs-line-height-tight);
-}
-
-[data-scope="stat"][data-part="delta"] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bs-space-1);
-  color: var(--bs-color-text-tertiary);
-  font-size: var(--bs-font-size-sm);
-  font-weight: var(--bs-font-weight-medium);
-  font-variant-numeric: tabular-nums;
-}
-
-[data-scope="stat"][data-part="delta"][data-direction="up"] {
-  color: var(--bs-color-success);
-}
-
-[data-scope="stat"][data-part="delta"][data-direction="down"] {
-  color: var(--bs-color-danger);
-}
-
-[data-scope="stat"][data-part="description"] {
-  margin: 0;
-  color: var(--bs-color-text-tertiary);
-  font-size: var(--bs-font-size-sm);
-  line-height: var(--bs-line-height-relaxed);
-}
-`;
-//#endregion
 //#region src/styles/components/slider.ts
 const sliderCss = labelCss("slider") + `
 [data-scope="slider"][data-part="root"] {
@@ -7880,15 +9741,17 @@ const sliderCss = labelCss("slider") + `
 }
 
 /* The thumb is a paper seal riding the ink: surface fill, primary hairline,
-   focus turns the ring primary — never a background change. Its size is a
-   part size, not a control height, so density and scene actually shrink it. */
+   focus turns the ring primary — never a background change. Its size rides
+   the control height at a fixed share (five eighths), not the density
+   scale — scenes that grow the targets grow the thumb with them, never
+   past the track it sits on. */
 [data-scope="slider"][data-part="thumb"] {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  inline-size: var(--bs-part-size-md);
-  block-size: var(--bs-part-size-md);
+  inline-size: calc(var(--bs-control-height-md) * 0.625);
+  block-size: calc(var(--bs-control-height-md) * 0.625);
   border: 1px solid var(--bs-color-primary);
   border-radius: var(--bs-radius-full);
   background: var(--bs-color-surface-2);
@@ -7970,18 +9833,107 @@ const sliderCss = labelCss("slider") + `
   translate: -50% 0;
 }
 
-[data-scope="slider"][data-part="marker"][data-state="at-value"],
-[data-scope="slider"][data-part="marker"][data-state="under-value"] {
-  color: var(--bs-color-primary);
+[data-scope="slider"][data-part="marker"][data-state="at-value"],
+[data-scope="slider"][data-part="marker"][data-state="under-value"] {
+  color: var(--bs-color-primary);
+}
+
+[data-scope="slider"][data-part="marker"][data-state="at-value"]::before,
+[data-scope="slider"][data-part="marker"][data-state="under-value"]::before {
+  background: var(--bs-color-primary);
+}
+
+[data-scope="slider"][data-part="marker"][data-disabled] {
+  color: var(--bs-color-text-disabled);
+}
+`;
+//#endregion
+//#region src/styles/components/spinner.ts
+const spinnerCss = `
+/* A wheel of waiting: one arc of ink turning about its center. Quiet by
+   default — it reports progress without claiming attention. */
+[data-scope="spinner"][data-part="root"] {
+  display: inline-flex;
+  flex: none;
+  color: var(--bs-color-text-tertiary);
+  animation: bs-spinner-turn 0.9s linear infinite;
+}
+
+[data-scope="spinner"][data-part="root"][data-size="sm"] {
+  inline-size: var(--bs-part-size-sm);
+  block-size: var(--bs-part-size-sm);
+}
+[data-scope="spinner"][data-part="root"][data-size="md"] {
+  inline-size: var(--bs-part-size-md);
+  block-size: var(--bs-part-size-md);
+}
+[data-scope="spinner"][data-part="root"][data-size="lg"] {
+  inline-size: var(--bs-part-size-lg);
+  block-size: var(--bs-part-size-lg);
+}
+
+[data-scope="spinner"][data-part="root"] svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+@keyframes bs-spinner-turn {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-scope="spinner"][data-part="root"] {
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+  }
+}
+`;
+//#endregion
+//#region src/styles/components/split-button.ts
+const splitButtonCss = `
+/* The split: a primary action and its dropdown arrow seam-fused into one
+   control — the button group's joinery closed to two members. The main
+   button gives up its end corners; the arrow gives up its start corners
+   and slides one pixel over the trailing hairline, redrawing the seam as
+   a single line of border color (a cut of paper through a solid fill). */
+[data-scope="split-button"][data-part="root"] {
+  display: inline-flex;
+}
+
+[data-scope="split-button"][data-part="root"] > [data-scope="button"][data-part="root"] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
-[data-scope="slider"][data-part="marker"][data-state="at-value"]::before,
-[data-scope="slider"][data-part="marker"][data-state="under-value"]::before {
-  background: var(--bs-color-primary);
+/* The arrow rides the menu machine's trigger anatomy (as-child hosting
+   reads data-scope="menu"), dressed as a button by the button
+   stylesheet's trigger register — hence the variant seal here, keeping
+   these joins above that register regardless of stylesheet order. */
+[data-scope="split-button"][data-part="root"] > [data-scope="menu"][data-part="trigger"][data-variant] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: -1px;
+  border-inline-start: 1px solid var(--bs-color-border);
 }
 
-[data-scope="slider"][data-part="marker"][data-disabled] {
-  color: var(--bs-color-text-disabled);
+/* Focus fuses like the border: a raised member keeps its halo and its
+   deepened edge clear of the neighbor, and an open menu reads as one
+   control at rest. */
+[data-scope="split-button"][data-part="root"] > [data-scope="button"][data-part="root"]:hover,
+[data-scope="split-button"][data-part="root"] > [data-scope="button"][data-part="root"]:focus-visible,
+[data-scope="split-button"][data-part="root"] > [data-scope="menu"][data-part="trigger"][data-variant]:hover,
+[data-scope="split-button"][data-part="root"] > [data-scope="menu"][data-part="trigger"][data-variant]:focus-visible,
+[data-scope="split-button"][data-part="root"] > [data-scope="menu"][data-part="trigger"][data-variant][data-state="open"] {
+  z-index: 1;
+}
+
+/* The popup keeps the menu parts and the menu stylesheet; only the
+   danger rows ride this scope's knowledge of the callers — the
+   menubar's register, restated so this family stands alone. */
+[data-scope="menu"][data-part="item"][data-danger] {
+  color: var(--bs-color-danger);
 }
 `;
 //#endregion
@@ -8120,6 +10072,77 @@ const splitterCss = `
 }
 `;
 //#endregion
+//#region src/styles/components/stack.ts
+const stackCss = `
+/* The spacing primitive: the wrapper points --bs-stack-gap at a step of
+   the space ramp, and the flex gap carries it — the distance is one
+   named token, never an ad-hoc margin between siblings. */
+[data-scope="stack"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-stack-gap, var(--bs-space-3));
+}
+
+[data-scope="stack"][data-part="root"][data-direction="row"] {
+  flex-direction: row;
+}
+`;
+//#endregion
+//#region src/styles/components/stat.ts
+const statCss = `
+/* One figure on the page: the label whispers what it is, the value
+   states it plainly in tabular figures, the delta reads the direction
+   in the fixed semantic pigments. */
+[data-scope="stat"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-1);
+}
+
+[data-scope="stat"][data-part="label"] {
+  margin: 0;
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  letter-spacing: var(--bs-tracking-label);
+}
+
+/* The value carries the ink: large, semibold, tabular so figures
+   align across a row of stats. */
+[data-scope="stat"][data-part="value"] {
+  color: var(--bs-color-text-primary);
+  font-size: var(--bs-font-size-3xl);
+  font-weight: var(--bs-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--bs-line-height-tight);
+}
+
+[data-scope="stat"][data-part="delta"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-space-1);
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-scope="stat"][data-part="delta"][data-direction="up"] {
+  color: var(--bs-color-success);
+}
+
+[data-scope="stat"][data-part="delta"][data-direction="down"] {
+  color: var(--bs-color-danger);
+}
+
+[data-scope="stat"][data-part="description"] {
+  margin: 0;
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-relaxed);
+}
+`;
+//#endregion
 //#region src/styles/components/steps.ts
 const stepsCss = `
 [data-scope="steps"][data-part="root"] {
@@ -8191,7 +10214,7 @@ const stepsCss = `
   place-items: center;
   inline-size: var(--bs-control-height-sm);
   block-size: var(--bs-control-height-sm);
-  border-radius: calc(var(--bs-radius-lg) * 100);
+  border-radius: var(--bs-radius-full);
   background: var(--bs-color-surface-2);
   box-shadow: inset 0 0 0 1px var(--bs-color-border);
   color: var(--bs-color-text-secondary);
@@ -8363,10 +10386,12 @@ const switchCss = labelCss("switch") + `
 }
 
 /* The track geometry: thumb travel is derived here so the knob lands
-   flush against the far edge instead of drifting off-token. */
+   flush against the far edge instead of drifting off-token. The thumb
+   rides the small part size — a switch sits beside controls, not
+   among them, and 24px of track reads quiet at every density. */
 [data-scope="switch"][data-part="control"] {
   --bs-switch-track: calc(var(--bs-switch-thumb) * 2 + var(--bs-switch-inset) * 2);
-  --bs-switch-thumb: var(--bs-part-size-md);
+  --bs-switch-thumb: var(--bs-part-size-sm);
   --bs-switch-inset: var(--bs-space-1);
   display: inline-flex;
   align-items: center;
@@ -9820,6 +11845,171 @@ const tourCss = popupContentCss("tour", "0") + `
 }
 `;
 //#endregion
+//#region src/styles/components/transfer.ts
+const transferCss = `
+/* Two ledgers and a crossing: the panels carry the popup chrome's
+   paper-and-hairline at rest weight, the buttons column rides between. */
+[data-scope="transfer"][data-part="root"] {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-space-3);
+}
+
+[data-scope="transfer"][data-part="panel"] {
+  display: flex;
+  flex-direction: column;
+  inline-size: 14rem;
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-md);
+  background: var(--bs-color-surface-1);
+}
+
+[data-scope="transfer"][data-part="head"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-space-2);
+  padding: var(--bs-space-2) var(--bs-space-3);
+  border-block-end: 1px solid var(--bs-color-border);
+}
+
+[data-scope="transfer"][data-part="title"] {
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  letter-spacing: var(--bs-tracking-label);
+}
+
+[data-scope="transfer"][data-part="count"] {
+  min-inline-size: var(--bs-control-height-sm);
+  padding-inline: var(--bs-space-1);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-xs, 0.75rem);
+  line-height: var(--bs-control-height-sm);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-scope="transfer"][data-part="search"] {
+  padding: var(--bs-space-2);
+  border-block-end: 1px solid var(--bs-color-border);
+}
+
+[data-scope="transfer"][data-part="list"] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--bs-space-1);
+  max-block-size: 16rem;
+  overflow-block: auto;
+}
+
+/* Rows are the checkbox's own seal and label — the panel only gives
+   them a clickable span and a hover wash. */
+[data-scope="transfer"] [data-scope="checkbox"][data-part="root"] {
+  flex: 1;
+  gap: var(--bs-space-2);
+  padding: var(--bs-space-1) var(--bs-space-2);
+  border-radius: var(--bs-radius-sm);
+  transition: background-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="transfer"] [data-scope="checkbox"][data-part="root"]:hover {
+  background: var(--bs-color-surface-inset);
+}
+
+[data-scope="transfer"] [data-part="label"] {
+  flex: 1;
+  font-size: var(--bs-font-size-sm);
+  color: var(--bs-color-text-primary);
+  cursor: inherit;
+}
+
+[data-scope="transfer"][data-part="empty"] {
+  padding: var(--bs-space-4);
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  text-align: center;
+}
+
+[data-scope="transfer"][data-part="operations"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-space-2);
+}
+`;
+//#endregion
+//#region src/styles/components/tree-select.ts
+const treeSelectCss = positionerCss("tree-select") + popupContentCss("tree-select", "0rem") + `
+/* The control reads as a field — the input recipe, with the chosen
+   label as its ink and a quiet chevron at the inline end. */
+[data-scope="tree-select"][data-part="control"] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-space-2);
+  inline-size: 100%;
+  block-size: var(--bs-control-height-md);
+  padding-inline: var(--bs-padding-md);
+  border: 1px solid var(--bs-color-border);
+  border-radius: var(--bs-radius-sm);
+  background: var(--bs-color-surface-2);
+  color: var(--bs-color-text-primary);
+  font: inherit;
+  font-size: var(--bs-font-size-md);
+  text-align: start;
+  cursor: pointer;
+  transition: border-color var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="tree-select"][data-part="control"][data-placeholder] {
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="tree-select"][data-part="control"]:hover:not(:focus):not(:disabled) {
+  border-color: var(--bs-color-border-strong);
+}
+
+[data-scope="tree-select"][data-part="control"]:focus-visible {
+  outline: none;
+  border-color: var(--bs-color-primary);
+  box-shadow: var(--bs-focus-ring);
+}
+
+[data-scope="tree-select"][data-part="control"]:disabled {
+  border-color: var(--bs-color-border);
+  background: var(--bs-color-surface-inset);
+  color: var(--bs-color-text-disabled);
+  cursor: not-allowed;
+}
+
+[data-scope="tree-select"][data-part="chevron"] {
+  display: grid;
+  place-items: center;
+  color: var(--bs-color-text-tertiary);
+}
+
+[data-scope="tree-select"][data-part="chevron"] svg {
+  inline-size: var(--bs-space-4);
+  block-size: var(--bs-space-4);
+  transition: transform var(--bs-duration-fast) var(--bs-ease-out);
+}
+
+[data-scope="tree-select"][data-part="control"][data-open] [data-part="chevron"] svg {
+  transform: rotate(90deg);
+}
+
+/* Inside the shared popup vessel, the tree keeps its own height and
+   scrolls past a small grove. */
+[data-scope="tree-select"][data-part="content"] {
+  max-block-size: 16rem;
+  overflow-block: auto;
+  padding: var(--bs-space-2);
+}
+`;
+//#endregion
 //#region src/styles/components/index.ts
 /** Component style registry — every component contributes its stylesheet
 * here, keyed by the name wrappers pass to `injectComponentStyle`. */
@@ -9835,9 +12025,11 @@ const componentStyles = {
 	breadcrumb: breadcrumbCss,
 	button: buttonCss,
 	calendar: calendarCss + datePickerCss.replaceAll("data-scope=\"date-picker\"", "data-scope=\"calendar\""),
+	"cascade-select": cascadeSelectCss,
 	card: cardCss,
 	carousel: carouselCss,
 	checkbox: checkboxCss,
+	"checkbox-group": checkboxGroupCss,
 	chip: chipCss,
 	clipboard: clipboardCss,
 	collapsible: collapsibleCss,
@@ -9845,6 +12037,7 @@ const componentStyles = {
 	combobox: comboboxCss,
 	"date-input": dateInputCss,
 	"date-picker": datePickerCss,
+	descriptions: descriptionsCss,
 	dialog: dialogCss,
 	drawer: drawerCss,
 	editable: editableCss,
@@ -9853,9 +12046,11 @@ const componentStyles = {
 	fieldset: fieldsetCss,
 	"file-upload": fileUploadCss,
 	"floating-panel": floatingPanelCss,
+	form: formCss,
 	highlight: highlightCss,
 	"hover-card": hoverCardCss,
 	"image-cropper": imageCropperCss,
+	input: fieldControlCss.replaceAll("data-scope=\"field\"", "data-scope=\"input\"").replaceAll("data-part=\"input\"", "data-part=\"root\""),
 	"json-tree-view": jsonTreeViewCss,
 	kbd: kbdCss,
 	link: linkCss,
@@ -9863,13 +12058,13 @@ const componentStyles = {
 	marquee: marqueeCss,
 	menu: menuCss,
 	meter: meterCss,
-	typography: typographyCss,
 	"navigation-menu": navigationMenuCss,
 	"number-input": numberInputCss,
 	"page-header": pageHeaderCss,
 	pagination: paginationCss,
 	"password-input": passwordInputCss,
 	"pin-input": pinInputCss,
+	popconfirm: popconfirmCss,
 	popover: popoverCss,
 	progress: progressCss,
 	"qr-code": qrCodeCss,
@@ -9890,6 +12085,7 @@ const componentStyles = {
 	switch: switchCss,
 	tabs: tabsCss,
 	"tags-input": tagsInputCss,
+	textarea: fieldControlCss.replaceAll("data-scope=\"field\"", "data-scope=\"textarea\"").replaceAll("data-part=\"textarea\"", "data-part=\"root\""),
 	timeline: timelineCss,
 	timer: timerCss,
 	table: tableCss,
@@ -9897,16 +12093,111 @@ const componentStyles = {
 	toc: tocCss,
 	toggle: toggleCss,
 	"toggle-group": toggleGroupCss,
+	transfer: transferCss,
 	tooltip: tooltipCss,
 	tour: tourCss,
-	"tree-view": treeViewCss
+	"tree-select": treeSelectCss,
+	"tree-view": treeViewCss,
+	typography: `
+/* The typographic voices, named so prose can ask for one: display and
+   heading ride the song-serif, the rest ride the hei. Nothing here is
+   decorative — hierarchy is size, weight, and space. */
+[data-scope="typography"][data-part="display"] {
+  margin: 0;
+  color: var(--bs-color-text-primary);
+  font-family: var(--bs-font-serif);
+  font-size: var(--bs-font-size-4xl);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: var(--bs-line-height-tight);
+}
+
+[data-scope="typography"][data-part="heading"] {
+  margin: 0;
+  color: var(--bs-color-text-primary);
+  font-family: var(--bs-font-serif);
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: var(--bs-line-height-snug);
+}
+
+[data-scope="typography"][data-part="lead"] {
+  margin: 0;
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-lg);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+[data-scope="typography"][data-part="body"] {
+  margin: 0;
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-base);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+[data-scope="typography"][data-part="muted"] {
+  margin: 0;
+  color: var(--bs-color-text-tertiary);
+  font-size: var(--bs-font-size-sm);
+  line-height: var(--bs-line-height-relaxed);
+}
+
+[data-scope="typography"][data-part="label"] {
+  margin: 0;
+  color: var(--bs-color-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  letter-spacing: var(--bs-tracking-label);
+}
+`,
+	container: containerCss,
+	stack: stackCss,
+	grid: gridCss,
+	"aspect-ratio": aspectRatioCss,
+	masonry: masonryCss,
+	icon: iconCss,
+	ellipsis: ellipsisCss,
+	image: imageCss,
+	"image-viewer": imageViewerCss,
+	list: listCss,
+	comment: commentCss,
+	watermark: `
+/* The paper bears its seal beneath the content: the wrapper holds the
+   flow, the marks repeat their tile across the whole sheet and never
+   take a pointer — the page beneath stays live. */
+[data-scope="watermark"][data-part="root"] {
+  position: relative;
+}
+
+[data-scope="watermark"][data-part="content"] {
+  position: relative;
+}
+
+[data-scope="watermark"][data-part="marks"] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+}
+`,
+	"progress-group": progressGroupCss,
+	"back-top": backTopCss,
+	affix: affixCss,
+	command: commandCss,
+	mentions: mentionsCss,
+	menubar: menubarCss,
+	"input-group": inputGroupCss,
+	"dynamic-input": dynamicInputCss,
+	"button-group": buttonGroupCss,
+	"split-button": splitButtonCss,
+	"float-button": floatButtonCss,
+	layout: layoutCss
 };
 //#endregion
 //#region src/styles.ts
 /** The complete token layer (`@layer bs.tokens`): themes, density, contrast,
 * typography, motion, z-index, plus the document-level base guard and the
 * ink-ripple motion grammar. */
-const tokensCss = styles_default + baseCss + inkRippleCss;
+const tokensCss = tokensStyles + baseCss + inkRippleCss;
 let injected = false;
 /** True when an SSR integration already delivered the whole layer (the
 * Nuxt module ships it as one build-time stylesheet and plants this