@stealthscale/component-a11y 0.1.0 → 0.1.3

package/dist/pages/visually-hidden/visually-hidden.js

@@ -0,0 +1,203 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { t as VisuallyHidden } from "../../shared-UZQEmdYt.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Contained, Room, Sample, specimen, useWords } from "@stealthscale/specimen";
+import { Button } from "@stealthscale/component-actions";
+import { Spacer, Stack } from "@stealthscale/component-layout";
+import { Heading, Text } from "@stealthscale/component-typography";
+import { XIcon } from "lucide-react";
+//#region src/visually-hidden/examples/close.example.tsx
+var close_example_exports = /* @__PURE__ */ __exportAll({
+	Close: () => Close,
+	source: () => source$1
+});
+function Close() {
+	const $ = c(5);
+	const { t } = useWords("visually-hidden");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(XIcon, {
+			"aria-hidden": true,
+			size: "1em"
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("close");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(Button, {
+			shape: "square",
+			variant: "outline",
+			children: [t0, /* @__PURE__ */ jsx(VisuallyHidden, { children: t1 })]
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { VisuallyHidden } from \"@stealthscale/component-a11y\";\n\nexport function Close(): ReactElement {\n  const { t } = useWords(\"visually-hidden\");\n\n  return (\n    <Button shape=\"square\" variant=\"outline\">\n      <XIcon aria-hidden size=\"1em\" />\n      <VisuallyHidden>{t(\"close\")}</VisuallyHidden>\n    </Button>\n  );\n}\n";
+//#endregion
+//#region src/visually-hidden/examples/shortcuts.example.tsx
+var shortcuts_example_exports = /* @__PURE__ */ __exportAll({
+	Shortcuts: () => Shortcuts,
+	source: () => source
+});
+function Shortcuts() {
+	const $ = c(24);
+	const { t } = useWords("visually-hidden");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("shortcuts");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(VisuallyHidden, {
+			as: Button,
+			focusable: true,
+			children: t0
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("invoices");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Heading, {
+			as: "h3",
+			size: "sm",
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Spacer, {});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("create");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t1 || $[14] !== t3 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			children: [
+				t1,
+				t3,
+				t4,
+				t6
+			]
+		});
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t) {
+		t8 = t("summary");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Text, { children: t8 });
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t7, t9]
+		});
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Spacer, Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { VisuallyHidden } from \"@stealthscale/component-a11y\";\n\nexport function Shortcuts(): ReactElement {\n  const { t } = useWords(\"visually-hidden\");\n\n  return (\n    <Stack gap=\"md\">\n      <Stack direction=\"row\">\n        <VisuallyHidden as={Button} focusable>\n          {t(\"shortcuts\")}\n        </VisuallyHidden>\n        <Heading as=\"h3\" size=\"sm\">\n          {t(\"invoices\")}\n        </Heading>\n        <Spacer />\n        <Button size=\"sm\">{t(\"create\")}</Button>\n      </Stack>\n      <Text>{t(\"summary\")}</Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/visually-hidden/visually-hidden.specimen.tsx
+/**
+* Renders the close button at its own width in a sample.
+*/
+function Named() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Close, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Renders the page section in a 512px room that contains its fixed control.
+*/
+function Focusable() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Room, {
+			size: "lg",
+			children: /* @__PURE__ */ jsx(Contained, { children: /* @__PURE__ */ jsx(Shortcuts, {}) })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Hand-written scene for hidden text that names an icon-only button.
+*/
+const named = {
+	about: "visually-hidden.name.about",
+	draw: Named,
+	example: close_example_exports,
+	title: "visually-hidden.name.title"
+};
+/**
+* Hand-written scene for a hidden control that appears under keyboard focus.
+*/
+const focusable = {
+	about: "visually-hidden.focusable.about",
+	axes: ["focusable"],
+	draw: Focusable,
+	example: shortcuts_example_exports,
+	title: "visually-hidden.focusable.title"
+};
+var visually_hidden_specimen_default = specimen({
+	about: "visually-hidden.about",
+	id: "components/a11y/visually-hidden",
+	imports: "import { VisuallyHidden } from \"@stealthscale/component-a11y\";",
+	scenes: [named, focusable],
+	title: "visually-hidden.title"
+});
+//#endregion
+export { visually_hidden_specimen_default as default, focusable, named };

package/dist/pages/visually-hidden/visually-hidden.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"VisuallyHiddenProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"VisuallyHiddenProps": [{"accepts": "boolean", "fallback": "", "kind": "variant", "name": "focusable", "refers": [], "required": false, "says": "Reveals the element under keyboard focus, on the `fill.surface` layer style at the window's start corner."}]};
+export const shapes = {};

package/dist/recipes-BM8WGKWH.js

@@ -0,0 +1,127 @@
+import { defineRecipe, defineSlotRecipe, dense } from "@stealthscale/theme/authoring";
+//#region src/roving-focus/recipe.ts
+/**
+* Styles a roving focus group as a flex row or column in the direction its arrow keys move.
+*
+* @remarks
+*   One `orientation` axis sets both the layout and the arrow keys, so a column never responds to
+*   the left and right arrows. `both` wraps the row, because a group navigable on both axes runs
+*   onto more lines. The recipe has no `palette` or `effect` axis, because the group renders no
+*   box of its own.
+*/
+/**
+* Defaults to a horizontal group.
+*/
+const recipe$2 = defineSlotRecipe({
+	base: {
+		item: { minInlineSize: "0" },
+		root: { display: "flex" }
+	},
+	className: "roving-focus",
+	defaultVariants: { orientation: "horizontal" },
+	jsx: [/^RovingFocus(\.\w+)?$/u],
+	slots: ["root", "item"],
+	variants: { 
+	/**
+	* Flex direction of the root, matching the arrow keys the group handles.
+	*/
+orientation: {
+		both: { root: {
+			flexDirection: "row",
+			flexWrap: "wrap"
+		} },
+		horizontal: { root: { flexDirection: "row" } },
+		vertical: { root: { flexDirection: "column" } }
+	} }
+});
+//#endregion
+//#region src/skip-nav/recipe.ts
+/**
+* Styles a skip link that is clipped until keyboard focus, and the target it moves focus to.
+*
+* @remarks
+*   The link applies the `srOnly` utility at rest. Under `:focus-visible` it resets each property
+*   the clipping sets and fixes itself to the window's start corner on the `fill.surface` layer
+*   style. It does not use `srOnly: false`, which expands to `position: static` and `padding: 0`
+*   and conflicts with the fixed position and the padding. The target sets a scroll margin, so a
+*   sticky header does not cover it. The recipe has no axis, because the link has one look and the
+*   target renders nothing.
+*/
+/**
+* Clips the link at rest and offsets the target from the top of the scroll container.
+*/
+const recipe$1 = defineSlotRecipe({
+	base: {
+		link: {
+			_focusVisible: {
+				layerStyle: "fill.surface",
+				textStyle: "label.md",
+				blockSize: "auto",
+				borderRadius: "l2",
+				clip: "auto",
+				inlineSize: "auto",
+				insetBlockStart: dense("{spacing.inset.md}"),
+				insetInlineStart: dense("{spacing.inset.md}"),
+				margin: "0",
+				overflow: "visible",
+				paddingBlock: dense("{spacing.inset.sm}"),
+				paddingInline: dense("{spacing.inset.md}"),
+				position: "fixed",
+				zIndex: "skipNav"
+			},
+			srOnly: true
+		},
+		target: { scrollMarginBlockStart: dense("{spacing.inset.lg}") }
+	},
+	className: "skip-nav",
+	jsx: [/^SkipNav(\.\w+)?$/u],
+	slots: ["link", "target"]
+});
+//#endregion
+//#region src/visually-hidden/recipe.ts
+/**
+* Styles content that a screen reader announces and the browser does not paint.
+*
+* @remarks
+*   The base applies the `srOnly` utility, which clips the element to 1px and keeps it in the
+*   accessibility tree. `display: none` and `visibility: hidden` remove it from the tree. The
+*   `focusable` value cancels the clipping under `:focus-visible` and fixes the element to the
+*   window's start corner, so a keyboard user sees the control that holds focus. The recipe has no
+*   `palette` or `effect` axis, because the element renders nothing at rest.
+*/
+/**
+* Clips the element at rest.
+*/
+const recipe = defineRecipe({
+	base: { srOnly: true },
+	className: "visually-hidden",
+	jsx: [/^VisuallyHidden$/u],
+	variants: { 
+	/**
+	* Reveals the element under keyboard focus, on the `fill.surface` layer style at the window's
+	* start corner.
+	*
+	* @remarks
+	*   The value resets each property the clipping sets. It does not use `srOnly: false`, which
+	*   expands to `position: static` and `padding: 0` and conflicts with the fixed position and
+	*   the padding.
+	*/
+focusable: { true: { _focusVisible: {
+		layerStyle: "fill.surface",
+		textStyle: "label.md",
+		blockSize: "auto",
+		borderRadius: "l1",
+		clip: "auto",
+		inlineSize: "auto",
+		insetBlockStart: dense("{spacing.inset.md}"),
+		insetInlineStart: dense("{spacing.inset.md}"),
+		margin: "0",
+		overflow: "visible",
+		paddingBlock: dense("{spacing.inset.sm}"),
+		paddingInline: dense("{spacing.inset.md}"),
+		position: "fixed",
+		zIndex: "skipNav"
+	} } } }
+});
+//#endregion
+export { recipe$1 as n, recipe$2 as r, recipe as t };