@stealthscale/component-screen 0.0.1 → 0.2.1

package/dist/{recipe-CRJrRAI8.js → recipe-sZAQY6Kq.js}

@@ -1,4 +1,5 @@
-import { CONTROL_INSET_END, CONTROL_INSET_START, axis, below, cornerVariants, defineSlotRecipe, dense, divider, interactive, lookVariants, motion, onSlot, onSlots, paletteVariants, sizeVariants, surface, truncate } from "@stealthscale/theme/authoring";
+import { i as NARROW$1, n as FOLDING } from "./recipe-DRMsitrw.js";
+import { CONTROL_INSET_END, CONTROL_INSET_START, axis, below, cornerVariants, defineSlotRecipe, dense, divider, interactive, motion, onSlot, onSlots, paletteVariants, sizeVariants, surface, truncate } from "@stealthscale/theme/authoring";
 //#region src/action-bar/recipe.ts
 /**
 * Styles the action bar, a panel fixed to the bottom of the window with the actions for what a
@@ -9,8 +10,9 @@ import { CONTROL_INSET_END, CONTROL_INSET_START, axis, below, cornerVariants, de
 *   recipe passes its variants from an ancestor. The positioner spans the window inside the inset
 *   and takes no pointer events, so the page around the bar remains pressable. The toolbar inside
 *   the bar is as wide as the bar, which is at least `sizes.2xl`, 672px. The toolbar folds when it
-*   is narrower than the `sm` breakpoint, 640px. The minimum width makes it fold on the width of
-*   the window and not on the width of its folded content. The recipe has no `palette` axis,
+*   is narrower than the `sm` breakpoint, 640px, and while its controls need more room than the
+*   window leaves the bar. The minimum width makes it fold on the width of the window and not on
+*   the width of its folded content. The recipe has no `palette` axis,
 *   because the bar reads the neutral `bg.panel`, and no `effect` axis, because the bar is not a
 *   control.
 */
@@ -37,7 +39,7 @@ const ALIGNED = {
 /**
 * Defines the action bar recipe, which places the bar in the middle of the bottom edge by default.
 */
-const recipe$8 = defineSlotRecipe({
+const recipe$7 = defineSlotRecipe({
 	base: {
 		closeTrigger: { flexShrink: "0" },
 		content: {
@@ -85,6 +87,98 @@ const recipe$8 = defineSlotRecipe({
 placement: onSlot("positioner", axis(PLACEMENTS, (placement) => ({ justifyContent: ALIGNED[placement] }))()) }
 });
 //#endregion
+//#region src/resize/widths.ts
+/**
+* Attribute an element has while a drag inside it resizes a panel or a column.
+*/
+const RESIZING = "data-resizing";
+/**
+* Returns the CSS length of a width a person resized an element to: the width, and never wider than
+* its limit, so a width stored on a wide screen fits a narrow one.
+*
+* @param width - The width, in pixels.
+* @param max - The widest width, in pixels. Half the window where left out.
+* @returns The length, such as `min(320px, 50vw)`.
+*/
+function lengthOf(width, max) {
+	const limit = max === void 0 ? "50vw" : `${String(max)}px`;
+	return `min(${String(width)}px, ${limit})`;
+}
+/**
+* Returns a width held between the bounds.
+*
+* @param width - The width asked for.
+* @param bounds - The narrowest and the widest width.
+* @returns The width, raised to the narrowest or lowered to the widest.
+*/
+function clamped(width, { max, min }) {
+	return Math.min(Math.max(width, min), max);
+}
+/**
+* Returns 1 where the pointer moving to the physical right widens the element, and -1 where it
+* narrows it.
+*
+* @param edge - Side of the page the element is on.
+* @param rtl - Whether the page reads right to left.
+*/
+function growthOf(edge, rtl) {
+	return edge === "start" === !rtl ? 1 : -1;
+}
+/**
+* Returns the width a key moves the element to.
+*
+* @param key - The key pressed, as `KeyboardEvent.key` spells it.
+* @param shift - Whether Shift is held.
+* @param width - The element's width now.
+* @param scale - The narrowest and the widest width, and the direction the width grows in.
+* @returns The new width, or undefined for a key that resizes nothing.
+*/
+function keyedWidth(key, shift, width, scale) {
+	const step = (shift ? 50 : 10) * scale.growth;
+	if (key === "ArrowRight") return clamped(width + step, scale);
+	if (key === "ArrowLeft") return clamped(width - step, scale);
+	if (key === "Home") return scale.min;
+	if (key === "End") return scale.max;
+}
+//#endregion
+//#region src/resize/strip.ts
+/**
+* Styles the strip on the edge of a panel or a column that a person presses, drags or focuses.
+*
+* @remarks
+*   The strip is 24px wide and transparent, with a line down its middle under the pointer, on
+*   keyboard focus and while a drag inside its holder runs. A separator, the strip of an element a
+*   person resizes, takes the column resize cursor. The strip is hidden under a coarse pointer,
+*   where a finger presses the menu button instead. The module imports no React, because the theme
+*   plugin evaluates the recipes that read it in Node.
+*/
+/**
+* Styles the strip, with its placement left to the recipe that reads it.
+*/
+const STRIP$3 = {
+	...interactive(),
+	_after: {
+		background: "transparent",
+		content: "\"\"",
+		inlineSize: "{borderWidths.indicator}",
+		insetBlock: "0",
+		insetInlineStart: "calc(50% - {borderWidths.indicator} / 2)",
+		position: "absolute"
+	},
+	_focusVisible: { _after: { background: "colorPalette.focusRing" } },
+	_hover: { _after: { background: "border.emphasized" } },
+	_touch: { display: "none" },
+	"&[role=separator]": { cursor: "resizeColumn" },
+	[`[${RESIZING}] &`]: { _after: { background: "border.emphasized" } },
+	appearance: "none",
+	background: "transparent",
+	borderWidth: "0",
+	colorPalette: "neutral",
+	inlineSize: "6",
+	padding: "0",
+	zIndex: "docked"
+};
+//#endregion
 //#region src/app-shell/metrics.ts
 /**
 * Names the custom properties and attributes the app shell reads, and defines the style objects
@@ -115,10 +209,24 @@ const PANEL_RAIL = "--app-shell-panel-rail";
 */
 const STICKY_OFFSET$1 = "--app-shell-sticky-offset";
 /**
-* Custom property on the root with the height of every pinned bar.
+* Custom property on the root with the height of every pinned bar, the bars in a pane included,
+* which a page's sticky bands stick under.
 */
 const STICKY_TOP$1 = "--app-shell-sticky-top";
 /**
+* Custom property on the root with the height of the pinned bars above the body, which a panel
+* that sticks under them reads.
+*
+* @remarks
+*   A bar in a pane is beside the panels and not above them, so a panel sticks under the root's
+*   own bars alone.
+*/
+const PANEL_TOP = "--app-shell-panel-top";
+/**
+* Custom property on the root with the height of the pinned bars in a pane.
+*/
+const PANE_TOP = "--app-shell-pane-top";
+/**
 * Custom property an ancestor sets to the height of the shell's window.
 *
 * @remarks
@@ -140,14 +248,15 @@ const WINDOW = `var(${WINDOW_HEIGHT}, 100dvh)`;
 */
 const SETTLED = "data-settled";
 /**
-* Styles the transition of a moving part, with no motion under reduced motion or before the root
-* has settled.
+* Styles the transition of a moving part, with no motion under reduced motion, before the root has
+* settled, or while a person drags a panel's width.
 */
 const MOVING = {
 	_motionReduce: { transitionDuration: "0s" },
 	transitionDuration: "move",
 	transitionTimingFunction: "move",
-	[`.${CLASS$5}__root:not([${SETTLED}]) &`]: { transitionDuration: "0s" }
+	[`.${CLASS$5}__root:not([${SETTLED}]) &`]: { transitionDuration: "0s" },
+	[`.${CLASS$5}__root[${RESIZING}] &`]: { transitionDuration: "0s" }
 };
 /**
 * Width of a panel over the page: its open width, and never closer than a rail's width to the far
@@ -236,16 +345,16 @@ const PINNED = {
 	zIndex: "sticky"
 };
 /**
-* Styles a panel in the body while the window scrolls: stuck under the pinned bars and as tall as
-* the height they leave.
+* Styles a panel in the body while the window scrolls: stuck under the root's pinned bars and as
+* tall as the height they leave.
 *
 * @remarks
 *   The rule selects a panel beside the page only, because the window-scroll look is a variant and
 *   applies over the base, where a sheet is fixed and a panel under the page is static.
 */
 const STUCK$1 = { ["&:not([data-overlaid], [data-stacked])"]: {
-	blockSize: `calc(${WINDOW} - var(${STICKY_TOP$1}, 0px))`,
-	insetBlockStart: `var(${STICKY_TOP$1}, 0px)`,
+	blockSize: `calc(${WINDOW} - var(${PANEL_TOP}, 0px))`,
+	insetBlockStart: `var(${PANEL_TOP}, 0px)`,
 	position: "sticky"
 } };
 /**
@@ -294,38 +403,18 @@ const COLUMN = {
 	}
 };
 /**
-* Styles the rail: a 24px strip centred on the edge between a panel and the page, with a line down
-* its middle under the pointer and on keyboard focus.
+* Styles the rail: the 24px strip centred on the edge between a panel and the page.
 *
 * @remarks
 *   The negative margins take the strip's width back from the row, so the strip overlaps the panel
-*   and the page by 12px each and moves neither. The strip is hidden under a coarse pointer, where
-*   a finger presses the menu button instead.
+*   and the page by 12px each and moves neither.
 */
 const RAIL = {
-	...interactive(),
-	_after: {
-		background: "transparent",
-		content: "\"\"",
-		inlineSize: "{borderWidths.indicator}",
-		insetBlock: "0",
-		insetInlineStart: "calc(50% - {borderWidths.indicator} / 2)",
-		position: "absolute"
-	},
-	_focusVisible: { _after: { background: "colorPalette.focusRing" } },
-	_hover: { _after: { background: "border.emphasized" } },
-	_touch: { display: "none" },
+	...STRIP$3,
 	alignSelf: "stretch",
-	appearance: "none",
-	background: "transparent",
-	borderWidth: "0",
-	colorPalette: "neutral",
 	flexShrink: "0",
-	inlineSize: "6",
 	marginInline: "calc({sizes.6} / -2)",
-	padding: "0",
-	position: "relative",
-	zIndex: "docked"
+	position: "relative"
 };
 //#endregion
 //#region src/app-shell/recipe.ts
@@ -334,29 +423,36 @@ const RAIL = {
 * and a panel on either side of the page in the body.
 *
 * @remarks
-*   The recipe has eighteen slots. The body, the main region, a panel's content and a band that
+*   The recipe has nineteen slots. The body, the main region, a panel's content and a band that
 *   scrolls are the primitives package's scroll areas, so every bar in the shell is the theme's:
 *   `bodyViewport` and `row` are the body's viewport and content, `mainViewport` is the `main`
 *   element, `column` is the content of the main region and of a panel, and `scroller` is the root
-*   of a band that scrolls. A part that is left out takes no room. Every part is a container: the
-*   recipe sets the layout, the scrolling, the motion, the hairlines between regions and the
-*   grounds, and the application styles the rest through a theme. The plain look fills no region,
-*   so the shell shows the ground it is placed on. The backdrop, a sheet and a pinned bar are
-*   filled, because the page is visible under each. A sheet is raised by a shadow. A panel in the
-*   body is a track whose width moves between its open and closed widths, and its content keeps the
-*   open width, so the track clips the content instead of reflowing it. A panel over the page is
-*   fixed to the window with a backdrop behind it. The open and closed widths are the theme's
-*   `sizes.sidebar`, `sizes.aside` and `sizes.rail` unless a panel states its own. The window's
-*   height is `100dvh` unless an ancestor sets `WINDOW_HEIGHT`, so a shell staged in a box of a
-*   fixed height fills the box. The header and the footer pad their content by the middle gap, the
-*   status bar pads its row of entries by the smallest gap above and below and the middle gap at
-*   the sides, and a section pads by the large gap. The recipe has no `palette` and no `effect`
-*   axis, because the parts are containers and the components inside them offer their own.
+*   of a band that scrolls. A pane is a column in the row between the panels, with bars above and
+*   below the main region, so the panels run the full height beside the bars. A part that is left
+*   out takes no room. Every part is a container: the recipe sets the layout, the scrolling, the
+*   motion, the hairlines between regions and the grounds, and the application styles the rest
+*   through a theme. The plain look fills no region, so the shell shows the ground it is placed
+*   on. The backdrop, a sheet and a pinned bar are filled, because the page is visible under each.
+*   A sheet is raised by a shadow. A panel in the body is a track whose width moves between its
+*   open and closed widths, and its content keeps the open width, so the track clips the content
+*   instead of reflowing it. A panel over the page is fixed to the window with a backdrop behind
+*   it. The open and closed widths are the theme's `sizes.sidebar`, `sizes.aside` and `sizes.rail`
+*   unless a panel states its own. The window's height is `100dvh` unless an ancestor sets
+*   `WINDOW_HEIGHT`, so a shell staged in a box of a fixed height fills the box. The header and
+*   the footer pad their content by the middle gap, the status bar pads its row of entries by the
+*   smallest gap above and below and the middle gap at the sides, and takes no room while every
+*   entry renders nothing. A section pads by the large gap. The recipe has no `palette` and no
+*   `effect` axis, because the parts are containers and the components inside them offer their
+*   own.
 */
 /**
 * Styles a plain, divided shell that scrolls its page.
+*
+* @remarks
+*   `staticCss` lists every value of `content`, `scroll` and `variant`. A product's frame states
+*   them as data, and the compiler emits a variant only where a source states it as a literal.
 */
-const recipe$7 = defineSlotRecipe({
+const recipe$6 = defineSlotRecipe({
 	base: {
 		aside: {
 			...PANEL,
@@ -412,10 +508,12 @@ const recipe$7 = defineSlotRecipe({
 			"&[data-sticky]": {
 				...PINNED,
 				insetBlockStart: `var(${STICKY_OFFSET$1}, 0px)`
-			}
+			},
+			[`.${CLASS$5}__pane > &`]: { "&[data-sticky]": { insetBlockStart: `calc(var(${PANEL_TOP}, 0px) + var(${STICKY_OFFSET$1}, 0px))` } }
 		},
 		main: {
 			flex: "1",
+			minBlockSize: "0",
 			minInlineSize: "0"
 		},
 		navbar: {
@@ -431,16 +529,28 @@ const recipe$7 = defineSlotRecipe({
 				insetInlineStart: "0"
 			}
 		},
+		pane: {
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			minBlockSize: "0",
+			minInlineSize: "0"
+		},
 		rail: RAIL,
 		root: {
 			display: "flex",
 			flexDirection: "column",
-			inlineSize: "100%"
+			inlineSize: "100%",
+			[STICKY_TOP$1]: `calc(var(${PANEL_TOP}, 0px) + var(${PANE_TOP}, 0px))`,
+			[`&[${RESIZING}]`]: {
+				cursor: "resizeColumn",
+				userSelect: "none"
+			}
 		},
 		row: {
 			display: "flex",
 			"&:has(> [data-stacked])": { flexWrap: "wrap" },
-			[`&:has(> [data-stacked]) > .${CLASS$5}__main`]: { flexBasis: "100%" }
+			[`&:has(> [data-stacked]) > :is(.${CLASS$5}__main, .${CLASS$5}__pane)`]: { flexBasis: "100%" }
 		},
 		scroller: SCROLLER,
 		section: SECTION,
@@ -452,12 +562,14 @@ const recipe$7 = defineSlotRecipe({
 			flexWrap: "wrap",
 			paddingBlock: dense("{spacing.gap.xs}"),
 			paddingInline: dense("{spacing.gap.md}"),
-			rowGap: dense("{spacing.gap.xs}")
+			rowGap: dense("{spacing.gap.xs}"),
+			"&:empty": { display: "none" }
 		},
 		trigger: { flexShrink: "0" }
 	},
 	className: CLASS$5,
 	defaultVariants: {
+		content: "fluid",
 		divided: true,
 		scroll: "page",
 		variant: "plain"
@@ -470,6 +582,7 @@ const recipe$7 = defineSlotRecipe({
 		"bodyViewport",
 		"row",
 		"navbar",
+		"pane",
 		"main",
 		"mainViewport",
 		"aside",
@@ -483,7 +596,27 @@ const recipe$7 = defineSlotRecipe({
 		"rail",
 		"backdrop"
 	],
+	staticCss: [{
+		content: ["constrained", "fluid"],
+		scroll: ["page", "window"],
+		variant: [
+			"floating",
+			"inset",
+			"plain"
+		]
+	}],
 	variants: {
+		/**
+		* Width of the page in the main region: the whole region, or at most the theme's wide page
+		* measure, centred in the region.
+		*/
+		content: {
+			constrained: { column: { [`.${CLASS$5}__mainViewport > &`]: {
+				marginInline: "auto",
+				maxInlineSize: "{sizes.page.wide}"
+			} } },
+			fluid: { column: { [`.${CLASS$5}__mainViewport > &`]: { maxInlineSize: "none" } } }
+		},
 		/**
 		* Whether a hairline separates each bar and each panel from the page.
 		*
@@ -529,7 +662,7 @@ const recipe$7 = defineSlotRecipe({
 					[`&:has(> .${CLASS$5}__row > [data-stacked])`]: { overflow: "auto" },
 					overflow: "visible"
 				},
-				mainViewport: { [`.${CLASS$5}__row:has(> [data-stacked]) > .${CLASS$5}__main > &`]: { overflow: "visible" } },
+				mainViewport: { [`.${CLASS$5}__row:has(> [data-stacked]) > :is(.${CLASS$5}__main, .${CLASS$5}__pane > .${CLASS$5}__main) > &`]: { overflow: "visible" } },
 				root: { blockSize: WINDOW },
 				row: {
 					"&:has(> [data-stacked])": { blockSize: "auto" },
@@ -552,7 +685,9 @@ const recipe$7 = defineSlotRecipe({
 		*   `plain` fills nothing, so every region shows the ground the shell is placed on: the page's
 		*   `bg` in an application, or a staging box's own fill. A sidebar in a panel paints its own
 		*   ground. `inset` gives the main region `surface()`, the panel ground with a hairline and a
-		*   shadow, over a `bg.subtle` root. `floating` gives each panel's content `surface()` instead.
+		*   shadow, over a `bg.subtle` root, and gives it to the pane instead where the main region is
+		*   in one, so the bars in the pane are on the card too. `floating` gives each panel's content
+		*   `surface()` instead.
 		*/
 		variant: {
 			floating: {
@@ -565,7 +700,11 @@ const recipe$7 = defineSlotRecipe({
 				root: { background: "bg.subtle" }
 			},
 			inset: {
-				main: {
+				main: { [`&:not(.${CLASS$5}__pane > *)`]: {
+					...surface(),
+					margin: dense("{spacing.gap.xs}")
+				} },
+				pane: {
 					...surface(),
 					margin: dense("{spacing.gap.xs}")
 				},
@@ -604,7 +743,7 @@ const CLASS$4 = "floating-panel";
 /**
 * Width of a resize trigger's strip, and the side of a corner's square.
 */
-const STRIP$1 = "{sizes.2}";
+const STRIP$2 = "{sizes.2}";
 /**
 * Stacking level of the positioner: the banner level of the z-index scale plus the panel's place in
 * the stack of open panels, which the machine writes as `--z-index`.
@@ -617,15 +756,16 @@ const RING_OFFSET = "--scroll-area-ring-offset";
 /**
 * Defines the floating panel recipe.
 */
-const recipe$6 = defineSlotRecipe({
+const recipe$5 = defineSlotRecipe({
 	base: {
 		body: {
-			padding: dense("{spacing.inset.sm}"),
-			textStyle: "body.sm"
+			textStyle: "body.sm",
+			padding: dense("{spacing.inset.sm}")
 		},
 		closeTrigger: { flexShrink: "0" },
 		content: {
 			...motion("scale-fade.in", "scale-fade.out"),
+			focusVisibleRing: "outside",
 			background: "bg.panel",
 			borderColor: "transparent",
 			borderRadius: "l3",
@@ -636,7 +776,6 @@ const recipe$6 = defineSlotRecipe({
 			display: "flex",
 			flexDirection: "column",
 			focusRingColor: "colorPalette.focusRing",
-			focusVisibleRing: "outside",
 			position: "relative"
 		},
 		control: {
@@ -677,11 +816,11 @@ const recipe$6 = defineSlotRecipe({
 		},
 		positioner: { zIndex: LAYERED },
 		resizeTrigger: {
-			"&:is([data-axis=e], [data-axis=w])": { inlineSize: STRIP$1 },
-			"&:is([data-axis=n], [data-axis=s])": { blockSize: STRIP$1 },
+			"&:is([data-axis=e], [data-axis=w])": { inlineSize: STRIP$2 },
+			"&:is([data-axis=n], [data-axis=s])": { blockSize: STRIP$2 },
 			"&:is([data-axis=ne], [data-axis=nw], [data-axis=se], [data-axis=sw])": {
-				blockSize: STRIP$1,
-				inlineSize: STRIP$1
+				blockSize: STRIP$2,
+				inlineSize: STRIP$2
 			},
 			"&[data-disabled]": { display: "none" },
 			zIndex: "docked"
@@ -690,8 +829,8 @@ const recipe$6 = defineSlotRecipe({
 		scroller: {
 			"&[hidden]": { display: "none" },
 			flex: "1",
-			marginBlockEnd: STRIP$1,
-			marginInlineEnd: STRIP$1,
+			marginBlockEnd: STRIP$2,
+			marginInlineEnd: STRIP$2,
 			minBlockSize: "0",
 			[RING_OFFSET]: "calc({borderWidths.ring} * -1)"
 		},
@@ -701,8 +840,8 @@ const recipe$6 = defineSlotRecipe({
 		},
 		title: {
 			...truncate(),
-			fontWeight: "semibold",
-			textStyle: "label.md"
+			textStyle: "label.md",
+			fontWeight: "semibold"
 		},
 		trigger: {
 			...interactive(),
@@ -730,58 +869,11 @@ const recipe$6 = defineSlotRecipe({
 	]
 });
 //#endregion
-//#region src/folding/folding.ts
-/**
-* Styles an action that folds to its icon while its row is narrow, for the page, the toolbar and
-* the section.
-*
-* @remarks
-*   A secondary action shows its icon alone, and its words remain for a screen reader. A tertiary
-*   action renders nothing on a narrow row and runs from the row's menu, which the action registers
-*   with. The row measures its own width, so a row beside an open sidebar folds on its own width
-*   and the caller does not write a breakpoint.
-*/
-/**
-* Attribute an action sets on itself while its own row is narrow.
-*
-* @remarks
-*   The action reads the state from its row's context, so a narrow ancestor folds no action of a
-*   wider row inside it. A bar fixed to the window is wider than the page around it in the
-*   document.
-*/
-const NARROW$2 = "data-narrow";
-/**
-* Attribute an action sets to its priority.
-*
-* @remarks
-*   The priority is an attribute and not an axis, because a slot recipe resolves its variants once,
-*   at the root, and each action in a row folds on its own priority.
-*/
-const PRIORITY = "data-priority";
-/**
-* Styles an action by its priority while its row is narrow.
-*
-* @remarks
-*   Every action keeps its words on one line at every width, because a wrapped control would make
-*   the row taller. A secondary action hides its element children other than its icon with
-*   `srOnly`, so it keeps its accessible name, and renders as a square around its icon. Its words
-*   must be in an element, because a CSS selector cannot select a bare text node. A primary action
-*   is unchanged.
-*/
-const FOLDING = {
-	[`&[${PRIORITY}=secondary]`]: { [`&[${NARROW$2}]`]: {
-		"& > :not(svg)": { srOnly: true },
-		aspectRatio: "square",
-		justifyContent: "center",
-		paddingInline: "0"
-	} },
-	whiteSpace: "nowrap"
-};
-//#endregion
 //#region src/page/metrics.ts
 /**
-* Computes the rules the page recipe writes for the tabs in the navigation band, the panel the tab
-* picker opens and the title's heading role.
+* Computes the rules the page recipe writes at each of its sizes: the padding and gaps of the
+* bands, the tabs in the navigation band, the panel the tab picker opens and the title's heading
+* role.
 *
 * @remarks
 *   The module is separate from the recipe so the recipe is under the 300-line limit. It imports no
@@ -804,14 +896,35 @@ const TABS = "tabs";
 */
 const COMMAND = "command";
 /**
-* Selects the root of the tabs in the navigation band.
+* Selects the strip of tabs in the navigation band: the tabs' root, or the `Page.Tabs` slot where
+* the tabs' root contains the panels too and the band contains the list alone.
 */
-const TABS_IN_NAV = `& > .${TABS}__root`;
+const STRIP$1 = `:is(.${TABS}__root, .${CLASS$3}__tabs)`;
+/**
+* Selects the strip of tabs as a child of the navigation band.
+*/
+const TABS_IN_NAV = `& > ${STRIP$1}`;
 /**
 * Selects every tab of a strip in the navigation band.
 */
 const TAB_IN_NAV = `& .${TABS}__trigger`;
 /**
+* Sizes the page offers, which a section in the page reads too.
+*/
+const STEPS = [
+	"sm",
+	"md",
+	"lg"
+];
+/**
+* Selects a band followed by the navigation, which then has the hairline.
+*/
+const BEFORE_NAV = `&:has(+ .${CLASS$3}__nav)`;
+/**
+* Selects a navigation band with a strip of tabs, which is flush with the band's hairline.
+*/
+const WITH_TABS = `&:has(> ${STRIP$1})`;
+/**
 * Tab height and inline inset per page size: a medium or large page's tabs are 48px tall and inset
 * by the `md` inset, a small page's 44px and the `sm` inset.
 */
@@ -877,18 +990,65 @@ const NARROW_TITLE = `.${CLASS$3}__root[data-narrow] > .${CLASS$3}__header > &`;
 */
 const TITLES = {
 	lg: {
-		[NARROW_TITLE]: { textStyle: "heading.lg" },
-		textStyle: "heading.xl"
+		textStyle: "heading.xl",
+		[NARROW_TITLE]: { textStyle: "heading.lg" }
 	},
 	md: {
-		[NARROW_TITLE]: { textStyle: "heading.md" },
-		textStyle: "heading.lg"
+		textStyle: "heading.lg",
+		[NARROW_TITLE]: { textStyle: "heading.md" }
 	},
 	sm: {
-		[NARROW_TITLE]: { textStyle: "heading.sm" },
-		textStyle: "heading.md"
+		textStyle: "heading.md",
+		[NARROW_TITLE]: { textStyle: "heading.sm" }
 	}
 };
+/**
+* Rules the recipe's `size` axis writes on each slot it sizes, at the page's three sizes.
+*/
+const SIZES = onSlots({
+	actions: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), STEPS),
+	aside: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	banner: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	body: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	context: sizeVariants((size) => ({
+		textStyle: `body.${below(size)}`,
+		gap: dense(`{spacing.gap.${size}}`),
+		marginBlockEnd: size === "lg" ? "{spacing.1}" : "{spacing.0.5}"
+	}), STEPS),
+	description: {
+		lg: { textStyle: "body.md" },
+		md: { textStyle: "body.md" },
+		sm: { textStyle: "body.sm" }
+	},
+	footer: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.inset.${size}}`)
+	}), STEPS),
+	header: sizeVariants((size) => ({
+		[BEFORE_NAV]: { paddingBlockEnd: dense(`{spacing.gap.${size}}`) },
+		paddingBlock: dense(`{spacing.inset.${size}}`)
+	}), STEPS),
+	meta: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		marginInlineStart: dense(`{spacing.gap.${size}}`)
+	}), STEPS),
+	nav: sizeVariants((size) => ({
+		...tabbed(size),
+		paddingBlock: dense(`{spacing.gap.${size}}`),
+		[WITH_TABS]: { paddingBlock: "0" }
+	}), STEPS),
+	palette: sizeVariants(() => FLAT_PALETTE, STEPS),
+	sidebar: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
+	title: TITLES,
+	toolbar: sizeVariants((size) => ({
+		gap: dense(`{spacing.gap.${size}}`),
+		paddingBlock: dense(`{spacing.gap.${size}}`)
+	}), STEPS),
+	trail: sizeVariants((size) => ({
+		textStyle: `body.${below(size)}`,
+		gap: dense(`{spacing.gap.${below(size)}}`)
+	}), STEPS)
+});
 //#endregion
 //#region src/page/recipe.ts
 /**
@@ -906,9 +1066,12 @@ const TITLES = {
 *   `folded` below the `sm` breakpoint. From the `lg` breakpoint of the window, a page with an
 *   aside becomes a grid with the aside beside the body, because a rail beside the text needs the
 *   window's width. Below it the aside stacks under the body, or leaves the page with
-*   `folds="hide"`. A sticky aside keeps to the top of its row, under the shell's sticky bars. The
-*   recipe has no `palette` axis, because a page is layout on the page's surface, and no `effect`
-*   axis, because a page is not a control.
+*   `folds="hide"`. A page at least as wide as the `md` breakpoint, by its own measurement, becomes
+*   a grid with its sidebar at the start of the body's row, and a narrower page renders the
+*   sidebar's picker as a band above the body. A sticky aside keeps to the top of its row, under
+*   the shell's sticky bars, and so does a sticky sidebar. The recipe has no `palette` axis,
+*   because a page is layout on the page's surface, and no `effect` axis, because a page is not a
+*   control.
 */
 /**
 * Custom property the root sets to the room at the page's inline edges.
@@ -949,10 +1112,15 @@ const STICKY_OFFSET = "--page-sticky-offset";
 */
 const STICKY_TOP = "--page-sticky-top";
 /**
-* Custom property a sticky aside takes, set to the height of the area that scrolls the page.
+* Custom property a sticky aside or sidebar takes, set to the height of the area that scrolls the
+* page.
 */
 const SCROLLPORT = "--page-scrollport";
 /**
+* Custom property the sidebar sets to the width a person resized it to.
+*/
+const SIDEBAR_SIZE = "--page-sidebar-size";
+/**
 * Room a focus ring takes outside an element: its offset and its width.
 */
 const RING_ROOM = "calc(var(--focus-ring-offset, 0px) + var(--focus-ring-width, 0px))";
@@ -973,23 +1141,41 @@ const STUCK = {
 	zIndex: "sticky"
 };
 /**
+* Styles a column that sticks to the top of its row, under the shell's sticky bars and the page's
+* sticky bands, a gap below them.
+*/
+const STICKY_COLUMN = {
+	alignSelf: "start",
+	insetBlockStart: `calc(var(${SHELL_TOP}, 0px) + var(${STICKY_TOP}, 0px) + {spacing.gap.xl})`,
+	position: "sticky"
+};
+/**
+* Caps a sticky column at the height of the area that scrolls the page, less the sticky bars and
+* bands above it and a gap at each end, as a flex column that its scroll area fills.
+*/
+const CAPPED_COLUMN = {
+	display: "flex",
+	flexDirection: "column",
+	maxBlockSize: `calc(var(${SCROLLPORT}, 100dvh) - var(${SHELL_TOP}, 0px) - var(${STICKY_TOP}, 0px) - {spacing.gap.xl} * 2)`
+};
+/**
 * Styles a row that centres its items, wraps and shrinks.
 */
-const ROW$2 = {
+const ROW$1 = {
 	alignItems: "center",
 	display: "flex",
 	flexWrap: "wrap",
 	minInlineSize: "0"
 };
 /**
-* Selects a band followed by the navigation, which then has the hairline.
-*/
-const BEFORE_NAV = `&:has(+ .${CLASS$3}__nav)`;
-/**
 * Selects a root with an aside, which lays its bands out as a grid from the `lg` breakpoint.
 */
 const WITH_ASIDE = `&:has(> .${CLASS$3}__aside)`;
 /**
+* Selects a root with a sidebar beside its body, which lays its bands out as a grid.
+*/
+const WITH_SIDEBAR = `&:has(> .${CLASS$3}__sidebar[data-beside])`;
+/**
 * Selects a toolbar in the navigation band.
 */
 const TOOLBAR_IN_NAV = `& > .toolbar__root`;
@@ -1004,38 +1190,47 @@ const STRIP_IN_NAV = `& .${CLASS$3}__tabs[data-orientation]`;
 * @remarks
 *   The body's row takes the remaining height and every other row takes its content's height,
 *   because the root is at least as tall as the shell's main region and a grid shares spare height
-*   between its `auto` rows.
+*   between its `auto` rows. The sidebar's row holds the picker a narrow page renders in the
+*   sidebar's place, and takes no height without one.
 */
 const BESIDE = {
 	columnGap: dense("{spacing.gap.xl}"),
 	display: "grid",
-	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"body aside\" \"footer footer\"",
+	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"sidebar sidebar\" \"body aside\" \"footer footer\"",
 	gridTemplateColumns: "minmax(0, 1fr) auto",
-	gridTemplateRows: "auto auto auto auto 1fr auto"
+	gridTemplateRows: "auto auto auto auto auto 1fr auto"
 };
 /**
-* Sizes the page offers, which a section in the page reads too.
+* Styles the grid of a page with a sidebar beside its body: every band across, the sidebar at the
+* start, and an aside under the body.
 */
-const STEPS = [
-	"sm",
-	"md",
-	"lg"
-];
+const SIDEBAR_BESIDE = {
+	columnGap: dense("{spacing.gap.xl}"),
+	display: "grid",
+	gridTemplateAreas: "\"banner banner\" \"header header\" \"nav nav\" \"toolbar toolbar\" \"sidebar body\" \"sidebar aside\" \"footer footer\"",
+	gridTemplateColumns: "auto minmax(0, 1fr)",
+	gridTemplateRows: "auto auto auto auto 1fr auto auto"
+};
 /**
-* Selects a navigation band with a strip of tabs, which is flush with the band's hairline.
+* Styles the grid of a page with a sidebar beside its body and an aside beside it from the `lg`
+* breakpoint: the sidebar, the body and the aside in one row.
 */
-const WITH_TABS = `&:has(> .${TABS}__root)`;
+const SIDEBAR_AND_ASIDE = {
+	gridTemplateAreas: "\"banner banner banner\" \"header header header\" \"nav nav nav\" \"toolbar toolbar toolbar\" \"sidebar body aside\" \"footer footer footer\"",
+	gridTemplateColumns: "auto minmax(0, 1fr) auto",
+	gridTemplateRows: "auto auto auto auto 1fr auto"
+};
 /**
 * Defines the page recipe: a full-width page at size `md` by default.
 */
-const recipe$5 = defineSlotRecipe({
+const recipe$4 = defineSlotRecipe({
 	base: {
 		action: {
 			...FOLDING,
 			flexShrink: "0"
 		},
 		actions: {
-			...ROW$2,
+			...ROW$1,
 			flexWrap: "nowrap",
 			gridArea: "actions",
 			justifySelf: "end",
@@ -1052,14 +1247,8 @@ const recipe$5 = defineSlotRecipe({
 		aside: {
 			"&[data-folds=hide]": { lgDown: { display: "none" } },
 			"&[data-sticky]": {
-				alignSelf: "start",
-				insetBlockStart: `calc(var(${SHELL_TOP}, 0px) + var(${STICKY_TOP}, 0px) + {spacing.gap.xl})`,
-				lg: {
-					display: "flex",
-					flexDirection: "column",
-					maxBlockSize: `calc(var(${SCROLLPORT}, 100dvh) - var(${SHELL_TOP}, 0px) - var(${STICKY_TOP}, 0px) - {spacing.gap.xl} * 2)`
-				},
-				position: "sticky"
+				...STICKY_COLUMN,
+				lg: CAPPED_COLUMN
 			},
 			gridArea: "aside",
 			lg: { paddingInlineStart: "0" },
@@ -1089,7 +1278,7 @@ const recipe$5 = defineSlotRecipe({
 			minBlockSize: "0"
 		},
 		context: {
-			...ROW$2,
+			...ROW$1,
 			gridArea: "context",
 			minInlineSize: "0"
 		},
@@ -1107,7 +1296,7 @@ const recipe$5 = defineSlotRecipe({
 		*/
 		footer: {
 			...BAND$1,
-			...ROW$2,
+			...ROW$1,
 			"&[data-sticky]": {
 				...STUCK,
 				insetBlockEnd: "0",
@@ -1139,7 +1328,7 @@ const recipe$5 = defineSlotRecipe({
 			marginInlineEnd: dense("{spacing.gap.lg}")
 		},
 		meta: {
-			...ROW$2,
+			...ROW$1,
 			gridArea: "meta"
 		},
 		nav: {
@@ -1172,14 +1361,64 @@ const recipe$5 = defineSlotRecipe({
 			minInlineSize: "0"
 		},
 		root: {
+			[`&[${RESIZING}]`]: {
+				cursor: "resizeColumn",
+				userSelect: "none"
+			},
 			display: "flex",
 			flexDirection: "column",
 			flexGrow: "1",
 			inlineSize: "100%",
 			minBlockSize: "100%",
 			minInlineSize: "0",
-			[WITH_ASIDE]: { lg: BESIDE }
+			[WITH_ASIDE]: { lg: BESIDE },
+			[WITH_SIDEBAR]: {
+				...SIDEBAR_BESIDE,
+				[WITH_ASIDE]: { lg: SIDEBAR_AND_ASIDE }
+			}
+		},
+		/**
+		* The sidebar: a column beside the body on a page as wide as the `md` breakpoint, and a band
+		* with the picker on a narrower page.
+		*
+		* @remarks
+		*   Beside the body the column starts at the gutter, so the fills of its rows start where the
+		*   title starts. The column is as wide as the theme's sidebar unless a person resized it. A
+		*   sticky sidebar keeps to the top of its row and is at most as tall as the room under the
+		*   sticky bands, as a sticky aside is. The handle is centred on the column's end edge, in the
+		*   gap before the body.
+		*/
+		sidebar: {
+			...BAND$1,
+			"&[data-beside]": {
+				"&[data-sticky]": {
+					...STICKY_COLUMN,
+					...CAPPED_COLUMN
+				},
+				inlineSize: `var(${SIDEBAR_SIZE}, {sizes.sidebar})`,
+				paddingInlineEnd: "0",
+				position: "relative"
+			},
+			gridArea: "sidebar"
+		},
+		/**
+		* The padding of a sticky sidebar's scroll area, the room a focus ring takes at its edges.
+		*/
+		sidebarContent: { padding: RING_ROOM },
+		/**
+		* The strip on a resizable sidebar's end edge, centred on the edge.
+		*/
+		sidebarHandle: {
+			...STRIP$3,
+			insetBlock: "0",
+			insetInlineEnd: "calc({sizes.6} / -2)",
+			position: "absolute"
 		},
+		/**
+		* A sticky sidebar's scroll area, pulled out on every side by the room its content's padding
+		* takes, so the content keeps its place.
+		*/
+		sidebarScroller: { margin: `calc(${RING_ROOM} * -1)` },
 		title: {
 			gridArea: "title",
 			minInlineSize: "0",
@@ -1187,7 +1426,7 @@ const recipe$5 = defineSlotRecipe({
 		},
 		toolbar: {
 			...BAND$1,
-			...ROW$2,
+			...ROW$1,
 			"&[data-sticky]": STUCK,
 			gridArea: "toolbar"
 		},
@@ -1250,6 +1489,10 @@ const recipe$5 = defineSlotRecipe({
 		"picker",
 		"palette",
 		"toolbar",
+		"sidebar",
+		"sidebarScroller",
+		"sidebarContent",
+		"sidebarHandle",
 		"body",
 		"aside",
 		"asideScroller",
@@ -1333,49 +1576,7 @@ const recipe$5 = defineSlotRecipe({
 		*   The page offers three sizes, because larger steps belong to a display heading. A section in
 		*   the page reads this size too.
 		*/
-		size: onSlots({
-			actions: sizeVariants((size) => ({ gap: dense(`{spacing.gap.${size}}`) }), STEPS),
-			aside: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
-			banner: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
-			body: sizeVariants((size) => ({ paddingBlock: dense(`{spacing.inset.${size}}`) }), STEPS),
-			context: sizeVariants((size) => ({
-				gap: dense(`{spacing.gap.${size}}`),
-				marginBlockEnd: size === "lg" ? "{spacing.1}" : "{spacing.0.5}",
-				textStyle: `body.${below(size)}`
-			}), STEPS),
-			description: {
-				lg: { textStyle: "body.md" },
-				md: { textStyle: "body.md" },
-				sm: { textStyle: "body.sm" }
-			},
-			footer: sizeVariants((size) => ({
-				gap: dense(`{spacing.gap.${size}}`),
-				paddingBlock: dense(`{spacing.inset.${size}}`)
-			}), STEPS),
-			header: sizeVariants((size) => ({
-				[BEFORE_NAV]: { paddingBlockEnd: dense(`{spacing.gap.${size}}`) },
-				paddingBlock: dense(`{spacing.inset.${size}}`)
-			}), STEPS),
-			meta: sizeVariants((size) => ({
-				gap: dense(`{spacing.gap.${size}}`),
-				marginInlineStart: dense(`{spacing.gap.${size}}`)
-			}), STEPS),
-			nav: sizeVariants((size) => ({
-				...tabbed(size),
-				paddingBlock: dense(`{spacing.gap.${size}}`),
-				[WITH_TABS]: { paddingBlock: "0" }
-			}), STEPS),
-			palette: sizeVariants(() => FLAT_PALETTE, STEPS),
-			title: TITLES,
-			toolbar: sizeVariants((size) => ({
-				gap: dense(`{spacing.gap.${size}}`),
-				paddingBlock: dense(`{spacing.gap.${size}}`)
-			}), STEPS),
-			trail: sizeVariants((size) => ({
-				gap: dense(`{spacing.gap.${below(size)}}`),
-				textStyle: `body.${below(size)}`
-			}), STEPS)
-		})
+		size: SIZES
 	}
 });
 //#endregion
@@ -1413,7 +1614,7 @@ const AFTER = `.${CLASS$2}__root + &`;
 /**
 * Selects a band of a narrow section.
 */
-const NARROW$1 = `.${CLASS$2}__root[data-narrow] > &`;
+const NARROW = `.${CLASS$2}__root[data-narrow] > &`;
 /**
 * Selects the actions of a narrow section.
 */
@@ -1457,7 +1658,7 @@ const SPACED = {
 /**
 * Styles a row that centres its items, wraps and shrinks.
 */
-const ROW$1 = {
+const ROW = {
 	alignItems: "center",
 	display: "flex",
 	flexWrap: "wrap",
@@ -1466,14 +1667,14 @@ const ROW$1 = {
 /**
 * Defines the section recipe: a plain section at size `md` by default.
 */
-const recipe$4 = defineSlotRecipe({
+const recipe$3 = defineSlotRecipe({
 	base: {
 		action: {
 			...FOLDING,
 			flexShrink: "0"
 		},
 		actions: {
-			...ROW$1,
+			...ROW,
 			flexWrap: "nowrap",
 			gridArea: "actions",
 			justifySelf: "end",
@@ -1488,7 +1689,7 @@ const recipe$4 = defineSlotRecipe({
 			minInlineSize: "0"
 		},
 		footer: {
-			...ROW$1,
+			...ROW,
 			"& > :last-child:not(:first-child)": { marginInlineStart: "auto" },
 			justifyContent: "space-between"
 		},
@@ -1599,7 +1800,7 @@ const recipe$4 = defineSlotRecipe({
 					}
 				},
 				header: {
-					[NARROW$1]: { marginBlockEnd: `var(${BANDS})` },
+					[NARROW]: { marginBlockEnd: `var(${BANDS})` },
 					padding: "0"
 				},
 				root: {
@@ -1644,8 +1845,8 @@ const recipe$4 = defineSlotRecipe({
 				"lg"
 			]),
 			description: sizeVariants((size) => ({
-				marginBlockStart: size === "lg" ? "{spacing.1}" : "{spacing.0.5}",
-				textStyle: `body.${below(size)}`
+				textStyle: `body.${below(size)}`,
+				marginBlockStart: size === "lg" ? "{spacing.1}" : "{spacing.0.5}"
 			}), [
 				"sm",
 				"md",
@@ -1722,7 +1923,7 @@ const recipe$4 = defineSlotRecipe({
 /**
 * Selects a part inside a sidebar collapsed to a rail.
 */
-const ICONIC$1 = "[data-iconic] &";
+const ICONIC = "[data-iconic] &";
 /**
 * Selects the children of a band that fold to an icon by themselves: a search, a nav block, a
 * navigation list and a switcher.
@@ -1750,7 +1951,7 @@ const BANDED = {
 	display: "flex",
 	flexDirection: "column",
 	flexShrink: "0",
-	[ICONIC$1]: {
+	[ICONIC]: {
 		alignItems: "center",
 		[WORDS]: { srOnly: true }
 	},
@@ -1810,16 +2011,21 @@ function squared(size) {
 */
 function banded(size) {
 	return {
+		textStyle: `label.${below(size)}`,
 		gap: dense(`{spacing.gap.${below(size)}}`),
 		[LINES]: { marginInline: marked(size) },
-		padding: dense(`{spacing.gap.${size}}`),
-		textStyle: `label.${below(size)}`
+		padding: dense(`{spacing.gap.${size}}`)
 	};
 }
 /**
 * Styles a plain sidebar at the middle size.
+*
+* @remarks
+*   `staticCss` lists every size and every look. A sidebar in a panel over the page renders at `lg`
+*   whatever its `size`, a product's frame states the size and the look as data, and the compiler
+*   emits a variant only where a source states it as a literal.
 */
-const recipe$3 = defineSlotRecipe({
+const recipe$2 = defineSlotRecipe({
 	base: {
 		content: {
 			display: "flex",
@@ -1827,7 +2033,7 @@ const recipe$3 = defineSlotRecipe({
 		},
 		empty: {
 			color: "fg.muted",
-			[ICONIC$1]: { display: "none" },
+			[ICONIC]: { display: "none" },
 			textAlign: "center"
 		},
 		footer: BANDED,
@@ -1855,7 +2061,7 @@ const recipe$3 = defineSlotRecipe({
 			display: "flex",
 			flexShrink: "0",
 			gridColumn: "2 / 3",
-			[ICONIC$1]: { display: "none" },
+			[ICONIC]: { display: "none" },
 			justifyContent: "center",
 			padding: "0"
 		},
@@ -1866,18 +2072,18 @@ const recipe$3 = defineSlotRecipe({
 			display: "flex",
 			fontWeight: "medium",
 			gridColumn: "1 / 2",
-			[ICONIC$1]: { srOnly: true },
+			[ICONIC]: { srOnly: true },
 			textTransform: "uppercase"
 		},
 		navLabel: {
 			...truncate(),
+			textStyle: "label.xs",
 			alignItems: "center",
 			color: "fg.subtle",
 			display: "flex",
 			fontWeight: "medium",
 			gridColumn: "1 / 2",
-			[ICONIC$1]: { srOnly: true },
-			textStyle: "label.xs",
+			[ICONIC]: { srOnly: true },
 			textTransform: "uppercase"
 		},
 		root: {
@@ -1892,7 +2098,7 @@ const recipe$3 = defineSlotRecipe({
 			minBlockSize: "0"
 		},
 		search: {
-			[ICONIC$1]: {
+			[ICONIC]: {
 				display: "flex",
 				justifyContent: "center"
 			},
@@ -1921,6 +2127,19 @@ const recipe$3 = defineSlotRecipe({
 		"empty",
 		"separator"
 	],
+	staticCss: [{
+		size: [
+			"sm",
+			"md",
+			"lg"
+		],
+		variant: [
+			"outline",
+			"plain",
+			"subtle",
+			"surface"
+		]
+	}],
 	variants: {
 		size: onSlots({
 			/**
@@ -1938,8 +2157,8 @@ const recipe$3 = defineSlotRecipe({
 				"lg"
 			]),
 			empty: sizeVariants((size) => ({
-				padding: dense(`{spacing.inset.${size}}`),
-				textStyle: `body.${size}`
+				textStyle: `body.${size}`,
+				padding: dense(`{spacing.inset.${size}}`)
 			}), [
 				"sm",
 				"md",
@@ -1978,10 +2197,10 @@ const recipe$3 = defineSlotRecipe({
 				"lg"
 			]),
 			navHeading: sizeVariants((size) => ({
+				textStyle: "label.xs",
 				marginBlockEnd: `calc(${dense(`{spacing.gap.${size}}`)} * -0.5)`,
 				paddingBlock: dense("{spacing.gap.xs}"),
-				paddingInline: marked(size),
-				textStyle: "label.xs"
+				paddingInline: marked(size)
 			}), [
 				"sm",
 				"md",
@@ -2095,7 +2314,7 @@ const PILLED = `&:has(> .${CLASS$1}__resizeTriggerIndicator)`;
 /**
 * Defines the splitter recipe, in the primary palette by default.
 */
-const recipe$2 = defineSlotRecipe({
+const recipe$1 = defineSlotRecipe({
 	base: {
 		panel: {
 			display: "flex",
@@ -2104,6 +2323,7 @@ const recipe$2 = defineSlotRecipe({
 			minInlineSize: "0"
 		},
 		resizeTrigger: {
+			focusVisibleRing: "outside",
 			_touch: {
 				_before: {
 					content: "\"\"",
@@ -2129,7 +2349,6 @@ const recipe$2 = defineSlotRecipe({
 				marginBlock: `calc(${STRIP} * -0.5)`
 			},
 			focusRingColor: "colorPalette.focusRing",
-			focusVisibleRing: "outside",
 			justifyItems: "center",
 			[PILLED]: { _focusVisible: { outlineStyle: "none" } },
 			position: "relative",
@@ -2228,224 +2447,6 @@ const recipe$2 = defineSlotRecipe({
 palette: onSlot("root", paletteVariants()) }
 });
 //#endregion
-//#region src/switcher/recipe.ts
-/**
-* Declares the switcher's slot recipe, which styles the control that shows the current workspace,
-* project or environment and opens the menu of the others.
-*
-* @remarks
-*   The recipe has six slots. The root slot is the trigger, and the mark, the label, the name, the
-*   detail and the indicator are inside it. `Switcher.Root` is the disclosure package's menu, so
-*   the menu's recipe styles the panel and its rows. The trigger takes the button's looks and
-*   palettes from the same layer styles, so an outlined switcher has the button's light edge. The
-*   mark is a square in the palette's muted fill for an initial, an icon or an avatar. The name and
-*   the detail truncate to keep the control at one height. A pair of chevrons marks a control that
-*   switches and not a direction, so the indicator does not rotate while the menu is open. In a
-*   sidebar closed to icons the control is its mark alone, square, and in a narrow toolbar a
-*   switcher with a mark hides its name. The words remain in the accessible name in both.
-*/
-/**
-* Selects a part of a switcher drawn as its mark alone, in a sidebar closed to icons.
-*/
-const ICONIC = ".switcher__root[data-iconic] &";
-/**
-* Selects a part of a switcher with a mark in a toolbar too narrow for the name. A switcher
-* without a mark keeps its name, because the name is the only content that identifies it.
-*/
-const NARROW = ".switcher__root[data-narrow]:has(.switcher__mark) &";
-/**
-* Custom property the size axis sets to the height of a button at the switcher's size.
-*/
-const HEIGHT = "--switcher-height";
-/**
-* Styles a control that is one line as wide as its words: in a toolbar and on its own.
-*
-* @remarks
-*   `inlineSize: fit` keeps the control as wide as its words, because a flex container fills its
-*   line otherwise. The detail is hidden, because the control is one line tall. The control is at
-*   least as tall as a button of its size, so it lines up with the buttons in a toolbar: 36px at
-*   `sm` and 40px at `md`.
-*/
-const INLINE = {
-	detail: { display: "none" },
-	root: {
-		inlineSize: "fit",
-		minBlockSize: `var(${HEIGHT})`
-	}
-};
-/**
-* Styles the control in a sidebar: a row as wide as the column, and the mark alone on a rail.
-*
-* @remarks
-*   On a rail the control has no padding and no edge, so it is the mark's square, as tall as the
-*   rows under it: 32px at `md`.
-*/
-const ROW = { root: {
-	"&[data-iconic]": {
-		alignSelf: "center",
-		aspectRatio: "square",
-		borderWidth: "0",
-		inlineSize: "auto",
-		justifyContent: "center",
-		padding: "0"
-	},
-	inlineSize: "full"
-} };
-/**
-* Styles a ghost switcher at the middle size, alone.
-*/
-const recipe$1 = defineSlotRecipe({
-	base: {
-		detail: {
-			...truncate(),
-			color: "fg.subtle",
-			textStyle: "caption"
-		},
-		indicator: {
-			_open: { rotate: "0deg" },
-			alignItems: "center",
-			color: "fg.subtle",
-			display: "inline-flex",
-			flexShrink: "0",
-			[ICONIC]: { display: "none" },
-			justifyContent: "center",
-			marginInlineStart: "auto",
-			transitionDuration: "press",
-			transitionProperty: "common",
-			transitionTimingFunction: "press"
-		},
-		label: {
-			display: "flex",
-			flex: "1",
-			flexDirection: "column",
-			[ICONIC]: { srOnly: true },
-			minInlineSize: "0",
-			[NARROW]: { srOnly: true },
-			textAlign: "start"
-		},
-		mark: {
-			alignItems: "center",
-			background: "colorPalette.muted",
-			borderRadius: "l1",
-			color: "colorPalette.fg",
-			display: "inline-flex",
-			flexShrink: "0",
-			fontWeight: "semibold",
-			justifyContent: "center",
-			lineHeight: "tight",
-			overflow: "clip"
-		},
-		name: {
-			...truncate(),
-			fontWeight: "medium"
-		},
-		root: {
-			...interactive(),
-			alignItems: "center",
-			appearance: "none",
-			borderColor: "transparent",
-			borderWidth: "control",
-			colorPalette: "neutral",
-			display: "flex",
-			minInlineSize: "0"
-		}
-	},
-	className: "switcher",
-	compoundVariants: [{
-		css: { mark: {
-			boxSize: dense("{sizes.icon.lg}"),
-			fontSize: "xs"
-		} },
-		name: "marked",
-		placement: ["alone", "toolbar"]
-	}, (
-	/**
-	* Sets the detail and the indicator in the trigger's own ink on the solid look, where the
-	* page's subtle ink is not read against the fill.
-	*/
-	{
-		css: {
-			detail: { color: "inherit" },
-			indicator: { color: "inherit" }
-		},
-		name: "inked",
-		variant: "solid"
-	})],
-	defaultVariants: {
-		placement: "alone",
-		size: "md",
-		variant: "ghost"
-	},
-	jsx: [/^Switcher(\.\w+)?$/u],
-	slots: [
-		"root",
-		"mark",
-		"label",
-		"name",
-		"detail",
-		"indicator"
-	],
-	variants: {
-		/**
-		* The palette of the look and the mark.
-		*/
-		palette: onSlot("root", paletteVariants()),
-		/**
-		* Where the control is placed, which sets its width and its lines.
-		*
-		* @remarks
-		*   `Switcher.Root` reads the placement from the sidebar or the toolbar around it unless a
-		*   caller states one. The `marked` compound sizes the mark to `icon.lg` on one line, because
-		*   the size axis sizes it for a sidebar and a compound applies over an axis.
-		*/
-		placement: {
-			alone: INLINE,
-			sidebar: ROW,
-			toolbar: INLINE
-		},
-		size: onSlots({
-			indicator: sizeVariants((size) => ({ boxSize: dense(`{sizes.icon.${below(size)}}`) }), [
-				"sm",
-				"md",
-				"lg"
-			]),
-			mark: sizeVariants((size) => ({
-				boxSize: dense(`{sizes.control.${below(below(size))}}`),
-				fontSize: below(size)
-			}), [
-				"sm",
-				"md",
-				"lg"
-			]),
-			name: sizeVariants((size) => ({ textStyle: `body.${below(size)}` }), [
-				"sm",
-				"md",
-				"lg"
-			]),
-			root: sizeVariants((size) => ({
-				borderRadius: "l2",
-				gap: dense(`{spacing.gap.${size}}`),
-				[HEIGHT]: dense(`{sizes.control.${size}}`),
-				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
-				paddingInline: dense(`{spacing.gap.${size}}`),
-				textStyle: `body.${below(size)}`
-			}), [
-				"sm",
-				"md",
-				"lg"
-			])
-		}),
-		/**
-		* The button's six looks, each one of the theme's layer styles.
-		*
-		* @remarks
-		*   `ghost`, the default, has no fill at rest, so a switcher at the head of a sidebar shows the
-		*   sidebar's own ground and fills under a pointer.
-		*/
-		variant: onSlot("root", lookVariants())
-	}
-});
-//#endregion
 //#region src/toolbar/recipe.ts
 /**
 * Recipe for a toolbar: a row of controls with a start, a centre and an end band, and a search.
@@ -2460,9 +2461,11 @@ const recipe$1 = defineSlotRecipe({
 *   percentage width gives a band no content width, so the search states an inline size. An opened
 *   search covers the whole row, the padding and the edge of an outline or surface row included,
 *   and the root hides its other children while it is open, so the row needs no fill of its own on
-*   any surface. The recipe has no `palette`
-*   axis, because the controls in the row set their own palettes, and no `effect` axis, because the
-*   row is not a control.
+*   any surface. The title is semibold and leaves twice the gap after it, so the control after it
+*   reads as the first of the row's controls and not as part of the title. A narrow row folds
+*   those controls, and its title leaves the row's gap alone. The recipe has no
+*   `palette` axis, because the controls in the row set their own palettes, and no `effect` axis,
+*   because the row is not a control.
 */
 /**
 * Custom property the root sets to the gap between controls, which every band reads.
@@ -2548,6 +2551,13 @@ const recipe = defineSlotRecipe({
 		start: {
 			...BAND,
 			flexShrink: "0"
+		},
+		title: {
+			...BAND,
+			[`&[${NARROW$1}]`]: { marginInlineEnd: "0" },
+			flexShrink: "0",
+			fontWeight: "semibold",
+			marginInlineEnd: `calc(var(${GAP}) * 2)`
 		}
 	},
 	className: CLASS,
@@ -2565,7 +2575,8 @@ const recipe = defineSlotRecipe({
 		"action",
 		"group",
 		"separator",
-		"search"
+		"search",
+		"title"
 	],
 	variants: {
 		/**
@@ -2609,4 +2620,4 @@ const recipe = defineSlotRecipe({
 	}
 });
 //#endregion
-export { STICKY_OFFSET$1 as _, recipe$4 as a, recipe$8 as b, STICKY_TOP as c, PRIORITY as d, recipe$6 as f, SETTLED as g, PANEL_SIZE as h, recipe$3 as i, recipe$5 as l, PANEL_RAIL as m, recipe$1 as n, SCROLLPORT as o, recipe$7 as p, recipe$2 as r, STICKY_OFFSET as s, recipe as t, NARROW$2 as u, STICKY_TOP$1 as v, WINDOW_HEIGHT as y };
+export { lengthOf as C, keyedWidth as S, STICKY_OFFSET$1 as _, SCROLLPORT as a, clamped as b, STICKY_TOP as c, recipe$6 as d, PANEL_RAIL as f, SETTLED as g, PANE_TOP as h, recipe$3 as i, recipe$4 as l, PANEL_TOP as m, recipe$1 as n, SIDEBAR_SIZE as o, PANEL_SIZE as p, recipe$2 as r, STICKY_OFFSET as s, recipe as t, recipe$5 as u, WINDOW_HEIGHT as v, recipe$7 as w, growthOf as x, RESIZING as y };