@stealthscale/component-screen 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-screen",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Lays an application out on whatever screen it is opened on: the shell, the page, the toolbar and the sidebar, each folding on its own as the screen narrows.",
   "keywords": [
     "components",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "LICENSE",
+    "locales",
     "README.md"
   ],
   "type": "module",
@@ -44,16 +45,16 @@
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18",
-    "@stealthscale/component-a11y": "^0.1.2",
-    "@stealthscale/component-actions": "^0.2.1",
-    "@stealthscale/component-data": "^0.2.1",
-    "@stealthscale/component-disclosure": "^0.2.2",
-    "@stealthscale/component-forms": "^0.3.0",
-    "@stealthscale/component-layout": "^0.2.1",
-    "@stealthscale/component-modals": "^0.2.1",
-    "@stealthscale/component-navigation": "^0.3.0",
-    "@stealthscale/component-primitives": "^0.3.0",
-    "@stealthscale/component-typography": "^0.3.0",
+    "@stealthscale/component-a11y": "^0.1.3",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-data": "^0.2.2",
+    "@stealthscale/component-disclosure": "^0.2.4",
+    "@stealthscale/component-forms": "^0.3.2",
+    "@stealthscale/component-layout": "^0.2.2",
+    "@stealthscale/component-modals": "^0.2.2",
+    "@stealthscale/component-navigation": "^0.3.2",
+    "@stealthscale/component-primitives": "^0.3.1",
+    "@stealthscale/component-typography": "^0.3.2",
     "@stealthscale/hooks": "^0.3.0",
     "@stealthscale/provider-color-mode": "^0.2.2",
     "@stealthscale/provider-locale": "^0.1.1",
@@ -62,10 +63,10 @@
     "@stealthscale/settings": "^0.2.0",
     "@stealthscale/theme": "^0.5.0",
     "@stealthscale/vite-config": "^0.8.0",
-    "@stealthscale/vite-config-i18n": "^0.2.1",
+    "@stealthscale/vite-config-i18n": "^0.2.2",
     "@stealthscale/vite-config-react": "^0.9.1",
-    "@stealthscale/vite-config-specimen": "^0.2.1",
-    "@stealthscale/vite-config-theme": "^0.2.1",
+    "@stealthscale/vite-config-specimen": "^0.3.0",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
     "@testing-library/react": "^16.3",
     "@types/react": "^19.3",
@@ -80,16 +81,16 @@
     "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/component-a11y": "^0.1.2",
-    "@stealthscale/component-actions": "^0.2.1",
-    "@stealthscale/component-data": "^0.2.1",
-    "@stealthscale/component-disclosure": "^0.2.2",
-    "@stealthscale/component-forms": "^0.3.0",
-    "@stealthscale/component-layout": "^0.2.1",
-    "@stealthscale/component-modals": "^0.2.1",
-    "@stealthscale/component-navigation": "^0.3.0",
-    "@stealthscale/component-primitives": "^0.3.0",
-    "@stealthscale/component-typography": "^0.3.0",
+    "@stealthscale/component-a11y": "^0.1.3",
+    "@stealthscale/component-actions": "^0.2.3",
+    "@stealthscale/component-data": "^0.2.2",
+    "@stealthscale/component-disclosure": "^0.2.4",
+    "@stealthscale/component-forms": "^0.3.2",
+    "@stealthscale/component-layout": "^0.2.2",
+    "@stealthscale/component-modals": "^0.2.2",
+    "@stealthscale/component-navigation": "^0.3.2",
+    "@stealthscale/component-primitives": "^0.3.1",
+    "@stealthscale/component-typography": "^0.3.2",
     "@stealthscale/hooks": "^0.3.0",
     "@stealthscale/provider-locale": "^0.1.1",
     "@stealthscale/provider-shell": "^0.2.2",

package/dist/recipe-DRMsitrw.js

@@ -1,283 +0,0 @@
-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 };