@stealthscale/component-screen 0.2.2 → 0.2.3

package/dist/pages/toolbar/toolbar.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ActionProps": {"conditions": 284, "foreign": 1049}, "CenterProps": {"conditions": 284, "foreign": 1041}, "EndProps": {"conditions": 284, "foreign": 1041}, "GroupProps": {"conditions": 284, "foreign": 1040}, "ItemProps": {"conditions": 284, "foreign": 1040}, "LinkProps": {"conditions": 284, "foreign": 1049}, "RootProps": {"conditions": 284, "foreign": 1045}, "SearchProps": {"conditions": 284, "foreign": 1071}, "SeparatorProps": {"conditions": 284, "foreign": 1042}, "StartProps": {"conditions": 284, "foreign": 1041}, "TitleProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"ActionProps": [{"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "icon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Icon before the words, which a narrow row shows alone."}, {"accepts": "((event: MouseEvent<HTMLElement, MouseEvent>) => void)", "fallback": "", "kind": "option", "name": "onClick", "refers": ["react.MouseEvent"], "required": false, "says": "Handler the button or the menu row calls when a reader presses it."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "primary", "refers": [], "required": false, "says": "Whether the action is the row's primary action, which renders solid and keeps its words."}, {"accepts": "Priority", "fallback": "", "kind": "option", "name": "priority", "refers": ["kit.Priority"], "required": false, "says": "Priority that decides how a narrow row folds the action, in place of the one `icon` and `primary` imply."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "CenterProps": [], "EndProps": [], "GroupProps": [{"accepts": "Align", "fallback": "", "kind": "variant", "name": "align", "refers": ["kit.Align"], "required": false, "says": "Cross-axis alignment of the children."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "attached", "refers": [], "required": false, "says": "Joins the children into one control."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "dim", "refers": [], "required": false, "says": "Dims every child except a hovered, keyboard-focused or pressed one."}, {"accepts": "ConditionalValue<number | \"-0.5\" | \"-1\" | \"-1.5\" | \"-10\" | \"-11\" | \"-12\" | \"-14\" | \"-16\" | \"-2\" | \"-2.5\" | \"-20\" | \"-24\" | \"-28\" | \"-3\" | \"-3.5\" | \"-32\" | \"-36\" | \"-4\" | \"-4.5\" | \"-40\" | \"-44\" | \"-48\" | ... 105 more ... | (string & {})>", "fallback": "", "kind": "variant", "name": "gap", "refers": [], "required": false, "says": "Gap token between the children, from `xs` to `xl`."}, {"accepts": "boolean", "fallback": "", "kind": "variant", "name": "grow", "refers": [], "required": false, "says": "Makes the group full width and gives every child an equal share of it."}, {"accepts": "Justify", "fallback": "", "kind": "variant", "name": "justify", "refers": ["kit.Justify"], "required": false, "says": "Distribution of the space left over along the main axis."}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "", "kind": "variant", "name": "orientation", "refers": [], "required": false, "says": "Direction the children run in."}], "ItemProps": [{"accepts": "Drawn", "fallback": "", "kind": "option", "name": "as", "refers": ["kit.Drawn"], "required": false, "says": "The element or component the control renders as: a `button`, or an `a` when `href` is set."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "href", "refers": [], "required": false, "says": "The link's target, which renders the control as an `a`."}], "LinkProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "current", "refers": [], "required": false, "says": "Whether the link is the reader's current page."}, {"accepts": "\"glow\" | \"pulse\"", "fallback": "", "kind": "variant", "name": "effect", "refers": [], "required": false, "says": "The halo around the button, in the palette's solid at half opacity."}, {"accepts": "Lift", "fallback": "", "kind": "variant", "name": "elevation", "refers": ["kit.Lift"], "required": false, "says": ""}, {"accepts": "string", "fallback": "", "kind": "option", "name": "href", "refers": [], "required": true, "says": "Target of the link."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "icon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Icon before the words, which a narrow row shows alone."}, {"accepts": "MouseEventHandler<HTMLElement>", "fallback": "", "kind": "option", "name": "onClick", "refers": ["react.MouseEvent", "react.MouseEventHandler"], "required": false, "says": "Handler the link or the menu row calls when a reader presses it. React's handler type accepts a router's anchor handler."}, {"accepts": "\"accent\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "palette", "refers": [], "required": false, "says": "Palette of every look. The base sets `primary`."}, {"accepts": "Priority", "fallback": "", "kind": "option", "name": "priority", "refers": ["kit.Priority"], "required": false, "says": "Priority that decides how a narrow row folds the link, in place of the one `icon` implies."}, {"accepts": "\"square\"", "fallback": "", "kind": "variant", "name": "shape", "refers": [], "required": false, "says": ""}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": ""}, {"accepts": "\"ghost\" | \"glass\" | \"outline\" | \"plain\" | \"solid\" | \"subtle\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": ""}], "RootProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "aria-label", "refers": [], "required": true, "says": "The accessible name of the row."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "more", "refers": [], "required": false, "says": "Words that name the menu of folded actions. Defaults to `More actions`."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "moreIcon", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Mark the menu's trigger shows in place of its words."}, {"accepts": "\"l1\" | \"l2\" | \"l3\"", "fallback": "", "kind": "variant", "name": "radius", "refers": [], "required": false, "says": "Corner radius of an outlined or surface row."}, {"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Size of the gap and of the separator's block margin."}, {"accepts": "\"outline\" | \"plain\" | \"surface\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Look of the row."}], "SearchProps": [{"accepts": "Scale", "fallback": "", "kind": "variant", "name": "size", "refers": ["kit.Scale"], "required": false, "says": "Row height, text size and inline inset. The height reads the control scale, the text the label role at the normal weight, and the inset the inset scale one size smaller."}, {"accepts": "\"error\" | \"info\" | \"success\" | \"warning\"", "fallback": "", "kind": "variant", "name": "status", "refers": [], "required": false, "says": "Status the group reports. Each value sets the edge and the focus ring from that status's palette."}, {"accepts": "\"flushed\" | \"outline\" | \"subtle\"", "fallback": "", "kind": "variant", "name": "variant", "refers": [], "required": false, "says": "Edges and surface of the box, and the fill of a filled addon."}], "SeparatorProps": [{"accepts": "Placement", "fallback": "", "kind": "variant", "name": "labelPlacement", "refers": ["kit.Placement"], "required": false, "says": "Place of a label between its lines. `start` and `end` follow the writing direction and drop the line on their side. A divider without a label renders no line for it to drop."}, {"accepts": "\"horizontal\" | \"vertical\"", "fallback": "", "kind": "variant", "name": "orientation", "refers": [], "required": false, "says": "Direction of the line. `vertical` stretches to the height of a row and renders no label."}], "StartProps": [], "TitleProps": []};
+export const shapes = {"react.ReactElement": [{"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "react.ReactPortal": [{"accepts": "ReactNode", "name": "children", "says": ""}, {"accepts": "string | JSXElementConstructor<any>", "name": "type", "says": ""}, {"accepts": "unknown", "name": "props", "says": ""}, {"accepts": "string | null", "name": "key", "says": ""}], "kit.Priority": [{"accepts": "", "name": "\"primary\"", "says": ""}, {"accepts": "", "name": "\"secondary\"", "says": ""}, {"accepts": "", "name": "\"tertiary\"", "says": ""}], "kit.Lift": [{"accepts": "", "name": "\"floating\"", "says": ""}, {"accepts": "", "name": "\"raised\"", "says": ""}], "kit.Scale": [{"accepts": "", "name": "\"2xl\"", "says": ""}, {"accepts": "", "name": "\"3xl\"", "says": ""}, {"accepts": "", "name": "\"4xl\"", "says": ""}, {"accepts": "", "name": "\"lg\"", "says": ""}, {"accepts": "", "name": "\"md\"", "says": ""}, {"accepts": "", "name": "\"sm\"", "says": ""}, {"accepts": "", "name": "\"xl\"", "says": ""}, {"accepts": "", "name": "\"xs\"", "says": ""}], "kit.Align": [{"accepts": "", "name": "\"baseline\"", "says": ""}, {"accepts": "", "name": "\"flex-end\"", "says": ""}, {"accepts": "", "name": "\"flex-start\"", "says": ""}, {"accepts": "", "name": "\"stretch\"", "says": ""}], "kit.Justify": [{"accepts": "", "name": "\"around\"", "says": ""}, {"accepts": "", "name": "\"between\"", "says": ""}, {"accepts": "", "name": "\"center\"", "says": ""}, {"accepts": "", "name": "\"end\"", "says": ""}, {"accepts": "", "name": "\"evenly\"", "says": ""}, {"accepts": "", "name": "\"start\"", "says": ""}], "kit.Drawn": [{"accepts": "(() => string) | (() => string)", "name": "toString", "says": "Returns a string representation of a string. Returns a string representation of a function."}, {"accepts": "number", "name": "length", "says": "Returns the length of a String object."}, {"accepts": "(() => Object) | (() => string)", "name": "valueOf", "says": "Returns the primitive value of the specified object."}], "kit.Placement": [{"accepts": "", "name": "\"center\"", "says": ""}, {"accepts": "", "name": "\"end\"", "says": ""}, {"accepts": "", "name": "\"start\"", "says": ""}]};

package/dist/{recipe-BWmweBfv.js → recipes-Cmy1leBm.js}

@@ -1,5 +1,4 @@
-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";
+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";
 //#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
@@ -39,7 +38,7 @@ const ALIGNED = {
 /**
 * Defines the action bar recipe, which places the bar in the middle of the bottom edge by default.
 */
-const recipe$7 = defineSlotRecipe({
+const recipe$8 = defineSlotRecipe({
 	base: {
 		closeTrigger: { flexShrink: "0" },
 		content: {
@@ -452,7 +451,7 @@ const RAIL = {
 *   `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$6 = defineSlotRecipe({
+const recipe$7 = defineSlotRecipe({
 	base: {
 		aside: {
 			...PANEL,
@@ -756,7 +755,7 @@ const RING_OFFSET = "--scroll-area-ring-offset";
 /**
 * Defines the floating panel recipe.
 */
-const recipe$5 = defineSlotRecipe({
+const recipe$6 = defineSlotRecipe({
 	base: {
 		body: {
 			textStyle: "body.sm",
@@ -869,6 +868,63 @@ const recipe$5 = 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 a toolbar control sets to the id it registers its menu row under, while a narrow row
+* can move it into the row's menu.
+*
+* @remarks
+*   The row reads the attribute in document order. It moves the control nearest its end first, and
+*   its menu lists the moved controls in the row's order.
+*/
+const FOLDS$1 = "data-folds";
+/**
+* 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 at each of its sizes: the padding and gaps of the
@@ -1162,7 +1218,7 @@ const CAPPED_COLUMN = {
 /**
 * Styles a row that centres its items, wraps and shrinks.
 */
-const ROW$1 = {
+const ROW$2 = {
 	alignItems: "center",
 	display: "flex",
 	flexWrap: "wrap",
@@ -1224,14 +1280,14 @@ const SIDEBAR_AND_ASIDE = {
 /**
 * Defines the page recipe: a full-width page at size `md` by default.
 */
-const recipe$4 = defineSlotRecipe({
+const recipe$5 = defineSlotRecipe({
 	base: {
 		action: {
 			...FOLDING,
 			flexShrink: "0"
 		},
 		actions: {
-			...ROW$1,
+			...ROW$2,
 			flexWrap: "nowrap",
 			gridArea: "actions",
 			justifySelf: "end",
@@ -1279,7 +1335,7 @@ const recipe$4 = defineSlotRecipe({
 			minBlockSize: "0"
 		},
 		context: {
-			...ROW$1,
+			...ROW$2,
 			gridArea: "context",
 			minInlineSize: "0"
 		},
@@ -1297,7 +1353,7 @@ const recipe$4 = defineSlotRecipe({
 		*/
 		footer: {
 			...BAND$1,
-			...ROW$1,
+			...ROW$2,
 			"&[data-sticky]": {
 				...STUCK,
 				insetBlockEnd: "0",
@@ -1329,7 +1385,7 @@ const recipe$4 = defineSlotRecipe({
 			marginInlineEnd: dense("{spacing.gap.lg}")
 		},
 		meta: {
-			...ROW$1,
+			...ROW$2,
 			gridArea: "meta"
 		},
 		nav: {
@@ -1427,7 +1483,7 @@ const recipe$4 = defineSlotRecipe({
 		},
 		toolbar: {
 			...BAND$1,
-			...ROW$1,
+			...ROW$2,
 			"&[data-sticky]": STUCK,
 			gridArea: "toolbar"
 		},
@@ -1616,7 +1672,7 @@ const AFTER = `.${CLASS$2}__root + &`;
 /**
 * Selects a band of a narrow section.
 */
-const NARROW = `.${CLASS$2}__root[data-narrow] > &`;
+const NARROW$1 = `.${CLASS$2}__root[data-narrow] > &`;
 /**
 * Selects the actions of a narrow section.
 */
@@ -1660,7 +1716,7 @@ const SPACED = {
 /**
 * Styles a row that centres its items, wraps and shrinks.
 */
-const ROW = {
+const ROW$1 = {
 	alignItems: "center",
 	display: "flex",
 	flexWrap: "wrap",
@@ -1669,14 +1725,14 @@ const ROW = {
 /**
 * Defines the section recipe: a plain section at size `md` by default.
 */
-const recipe$3 = defineSlotRecipe({
+const recipe$4 = defineSlotRecipe({
 	base: {
 		action: {
 			...FOLDING,
 			flexShrink: "0"
 		},
 		actions: {
-			...ROW,
+			...ROW$1,
 			flexWrap: "nowrap",
 			gridArea: "actions",
 			justifySelf: "end",
@@ -1691,7 +1747,7 @@ const recipe$3 = defineSlotRecipe({
 			minInlineSize: "0"
 		},
 		footer: {
-			...ROW,
+			...ROW$1,
 			"& > :last-child:not(:first-child)": { marginInlineStart: "auto" },
 			justifyContent: "space-between"
 		},
@@ -1802,7 +1858,7 @@ const recipe$3 = defineSlotRecipe({
 					}
 				},
 				header: {
-					[NARROW]: { marginBlockEnd: `var(${BANDS})` },
+					[NARROW$1]: { marginBlockEnd: `var(${BANDS})` },
 					padding: "0"
 				},
 				root: {
@@ -1925,7 +1981,7 @@ const recipe$3 = defineSlotRecipe({
 /**
 * Selects a part inside a sidebar collapsed to a rail.
 */
-const ICONIC = "[data-iconic] &";
+const ICONIC$1 = "[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.
@@ -1953,7 +2009,7 @@ const BANDED = {
 	display: "flex",
 	flexDirection: "column",
 	flexShrink: "0",
-	[ICONIC]: {
+	[ICONIC$1]: {
 		alignItems: "center",
 		[WORDS]: { srOnly: true }
 	},
@@ -2027,7 +2083,7 @@ function banded(size) {
 *   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$2 = defineSlotRecipe({
+const recipe$3 = defineSlotRecipe({
 	base: {
 		content: {
 			display: "flex",
@@ -2035,7 +2091,7 @@ const recipe$2 = defineSlotRecipe({
 		},
 		empty: {
 			color: "fg.muted",
-			[ICONIC]: { display: "none" },
+			[ICONIC$1]: { display: "none" },
 			textAlign: "center"
 		},
 		footer: BANDED,
@@ -2063,7 +2119,7 @@ const recipe$2 = defineSlotRecipe({
 			display: "flex",
 			flexShrink: "0",
 			gridColumn: "2 / 3",
-			[ICONIC]: { display: "none" },
+			[ICONIC$1]: { display: "none" },
 			justifyContent: "center",
 			padding: "0"
 		},
@@ -2074,7 +2130,7 @@ const recipe$2 = defineSlotRecipe({
 			display: "flex",
 			fontWeight: "medium",
 			gridColumn: "1 / 2",
-			[ICONIC]: { srOnly: true },
+			[ICONIC$1]: { srOnly: true },
 			textTransform: "uppercase"
 		},
 		navLabel: {
@@ -2085,7 +2141,7 @@ const recipe$2 = defineSlotRecipe({
 			display: "flex",
 			fontWeight: "medium",
 			gridColumn: "1 / 2",
-			[ICONIC]: { srOnly: true },
+			[ICONIC$1]: { srOnly: true },
 			textTransform: "uppercase"
 		},
 		root: {
@@ -2100,7 +2156,7 @@ const recipe$2 = defineSlotRecipe({
 			minBlockSize: "0"
 		},
 		search: {
-			[ICONIC]: {
+			[ICONIC$1]: {
 				display: "flex",
 				justifyContent: "center"
 			},
@@ -2316,7 +2372,7 @@ const PILLED = `&:has(> .${CLASS$1}__resizeTriggerIndicator)`;
 /**
 * Defines the splitter recipe, in the primary palette by default.
 */
-const recipe$1 = defineSlotRecipe({
+const recipe$2 = defineSlotRecipe({
 	base: {
 		panel: {
 			display: "flex",
@@ -2449,6 +2505,230 @@ const recipe$1 = 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 renders an initial, an icon or an avatar in the palette's ink, without a fill. 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, and in a narrow toolbar for a switcher with a mark, the control is
+*   its mark alone, square. 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`. In a narrow toolbar a control with a mark is a square of that height
+*   around the mark, as an action with an icon is.
+*/
+const INLINE = {
+	detail: { display: "none" },
+	root: {
+		"&[data-narrow]:has(.switcher__mark)": {
+			aspectRatio: "square",
+			inlineSize: "auto",
+			justifyContent: "center",
+			paddingInline: "0"
+		},
+		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(),
+			textStyle: "caption",
+			color: "fg.subtle"
+		},
+		indicator: {
+			_open: { rotate: "0deg" },
+			alignItems: "center",
+			color: "fg.subtle",
+			display: "inline-flex",
+			flexShrink: "0",
+			[ICONIC]: { display: "none" },
+			justifyContent: "center",
+			marginInlineStart: "auto",
+			[NARROW]: { display: "none" },
+			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",
+			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) => ({
+				textStyle: `body.${below(size)}`,
+				borderRadius: "l2",
+				gap: dense(`{spacing.gap.${size}}`),
+				[HEIGHT]: dense(`{sizes.control.${size}}`),
+				paddingBlock: dense(`{spacing.gap.${below(size)}}`),
+				paddingInline: dense(`{spacing.gap.${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.
@@ -2556,7 +2836,7 @@ const recipe = defineSlotRecipe({
 		},
 		title: {
 			...BAND,
-			[`&[${NARROW$1}]`]: { marginInlineEnd: "0" },
+			[`&[${NARROW$2}]`]: { marginInlineEnd: "0" },
 			flexShrink: "0",
 			fontWeight: "semibold",
 			marginInlineEnd: `calc(var(${GAP}) * 2)`
@@ -2622,4 +2902,4 @@ const recipe = defineSlotRecipe({
 	}
 });
 //#endregion
-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 };
+export { RESIZING as C, lengthOf as D, keyedWidth as E, recipe$8 as O, WINDOW_HEIGHT as S, growthOf as T, PANEL_SIZE as _, recipe$4 as a, SETTLED as b, STICKY_OFFSET as c, FOLDS$1 as d, NARROW$2 as f, PANEL_RAIL as g, recipe$7 as h, recipe$3 as i, STICKY_TOP as l, recipe$6 as m, recipe$1 as n, SCROLLPORT as o, PRIORITY as p, recipe$2 as r, SIDEBAR_SIZE as s, recipe as t, recipe$5 as u, PANEL_TOP as v, clamped as w, STICKY_OFFSET$1 as x, PANE_TOP as y };