@bysages/core 0.0.1 → 0.1.0

package/dist/index.mjs

@@ -7,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;
@@ -16,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)";
@@ -206,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
@@ -226,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;
@@ -237,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;
 }
@@ -266,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. */
@@ -288,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;
   }
 }
@@ -349,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;
@@ -471,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
@@ -752,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;
@@ -762,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);
@@ -781,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;
@@ -809,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,
@@ -1162,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"] {
@@ -1176,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);
@@ -1226,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
@@ -1481,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
@@ -1491,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;
@@ -1502,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;
@@ -1554,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);
 }
@@ -1574,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. */
@@ -1582,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);
 }
 
@@ -1665,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
@@ -1973,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);
@@ -2001,20 +2394,174 @@ 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"] {
-  display: flex;
+[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);
 }
@@ -2030,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);
@@ -2091,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]) {
@@ -2104,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
@@ -2314,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;
@@ -2453,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] {
@@ -2522,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);
 }
 
@@ -2532,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
@@ -2567,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:
@@ -2599,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:
@@ -3061,107 +3626,358 @@ 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;
+/* 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;
@@ -3431,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;
@@ -3541,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"] {
@@ -3809,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"] {
@@ -3949,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;
@@ -4102,12 +5037,37 @@ const editableCss = labelCss("editable") + `
 }
 `;
 //#endregion
-//#region src/styles/components/empty.ts
+//#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;
@@ -4154,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"] {
@@ -4188,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);
@@ -4228,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"] {
@@ -4251,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
@@ -4313,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
@@ -4556,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"] {
@@ -4809,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
@@ -4865,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"] {
@@ -5028,36 +6343,228 @@ 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);
+  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%;
@@ -5291,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
@@ -5327,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"] {
@@ -5595,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"] {
@@ -5796,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
@@ -5839,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
@@ -6581,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"] {
@@ -6736,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"] {
@@ -6810,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"] {
@@ -6839,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"] {
@@ -6960,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);
@@ -6990,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);
 }
@@ -7020,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:
@@ -7333,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);
@@ -7715,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"] {
@@ -7881,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);
@@ -7971,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
@@ -8121,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"] {
@@ -8192,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);
@@ -8364,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;
@@ -9821,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`. */
@@ -9836,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,
@@ -9846,6 +12037,7 @@ const componentStyles = {
 	combobox: comboboxCss,
 	"date-input": dateInputCss,
 	"date-picker": datePickerCss,
+	descriptions: descriptionsCss,
 	dialog: dialogCss,
 	drawer: drawerCss,
 	editable: editableCss,
@@ -9854,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,
@@ -9864,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,
@@ -9891,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,
@@ -9898,9 +12093,104 @@ 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