@stealthscale/component-screen 0.0.1 → 0.2.1

package/dist/recipe-DRMsitrw.js

@@ -0,0 +1,283 @@
+import { below, defineSlotRecipe, dense, interactive, lookVariants, onSlot, onSlots, paletteVariants, sizeVariants, truncate } from "@stealthscale/theme/authoring";
+//#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$1 = "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 = "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$1}]`]: {
+		"& > :not(svg)": { srOnly: true },
+		aspectRatio: "square",
+		justifyContent: "center",
+		paddingInline: "0"
+	} },
+	whiteSpace: "nowrap"
+};
+//#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 = 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
+export { PRIORITY as a, NARROW$1 as i, FOLDING as n, FOLDS as r, recipe as t };