@stealthscale/component-a11y 0.1.0 → 0.1.3

package/dist/pages/roving-focus/roving-focus.js

@@ -0,0 +1,359 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { c as Item, s as Root } from "../../shared-UZQEmdYt.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Board, Focused, Room, Sample, specimen, useWords } from "@stealthscale/specimen";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { Group, Stack } from "@stealthscale/component-layout";
+//#region src/roving-focus/examples/filters.example.tsx
+var filters_example_exports = /* @__PURE__ */ __exportAll({
+	Filters: () => Filters,
+	source: () => source$2
+});
+const SMALL = {
+	size: "sm",
+	variant: "outline"
+};
+const STATUSES = [
+	"paid",
+	"pending",
+	"overdue",
+	"refunded",
+	"disputed",
+	"draft",
+	"scheduled",
+	"void"
+];
+function Filters() {
+	const $ = c(9);
+	const { t } = useWords("roving-focus");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("filters");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = STATUSES.map((status) => /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t(`statuses.${status}`)
+		}, status));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: SMALL,
+			children: /* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				gap: "sm",
+				wrap: true,
+				children: t1
+			})
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			orientation: "both",
+			role: "toolbar",
+			children: t2
+		});
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RovingFocus } from \"@stealthscale/component-a11y\";\n\nconst SMALL = { size: \"sm\", variant: \"outline\" } as const;\n\nconst STATUSES = [\n  \"paid\",\n  \"pending\",\n  \"overdue\",\n  \"refunded\",\n  \"disputed\",\n  \"draft\",\n  \"scheduled\",\n  \"void\",\n] as const;\n\nexport function Filters(): ReactElement {\n  const { t } = useWords(\"roving-focus\");\n\n  return (\n    <RovingFocus.Root aria-label={t(\"filters\")} orientation=\"both\" role=\"toolbar\">\n      <ButtonPropsProvider value={SMALL}>\n        <Stack direction=\"row\" gap=\"sm\" wrap>\n          {STATUSES.map((status) => (\n            <RovingFocus.Item as={Button} key={status}>\n              {t(`statuses.${status}`)}\n            </RovingFocus.Item>\n          ))}\n        </Stack>\n      </ButtonPropsProvider>\n    </RovingFocus.Root>\n  );\n}\n";
+//#endregion
+//#region src/roving-focus/examples/formatting.example.tsx
+var formatting_example_exports = /* @__PURE__ */ __exportAll({
+	Formatting: () => Formatting,
+	source: () => source$1
+});
+const OUTLINE$1 = { variant: "outline" };
+function Formatting() {
+	const $ = c(21);
+	const { t } = useWords("roving-focus");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("formatting");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("bold");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("italic");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("underline");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t5
+		});
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: OUTLINE$1,
+			children: /* @__PURE__ */ jsxs(Group, {
+				attached: true,
+				children: [
+					t2,
+					t4,
+					t6
+				]
+			})
+		});
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t0 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			role: "toolbar",
+			wrap: true,
+			children: t7
+		});
+		$[18] = t0;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Group } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RovingFocus } from \"@stealthscale/component-a11y\";\n\nconst OUTLINE = { variant: \"outline\" } as const;\n\nexport function Formatting(): ReactElement {\n  const { t } = useWords(\"roving-focus\");\n\n  return (\n    <RovingFocus.Root aria-label={t(\"formatting\")} role=\"toolbar\" wrap>\n      <ButtonPropsProvider value={OUTLINE}>\n        <Group attached>\n          <RovingFocus.Item as={Button}>{t(\"bold\")}</RovingFocus.Item>\n          <RovingFocus.Item as={Button}>{t(\"italic\")}</RovingFocus.Item>\n          <RovingFocus.Item as={Button}>{t(\"underline\")}</RovingFocus.Item>\n        </Group>\n      </ButtonPropsProvider>\n    </RovingFocus.Root>\n  );\n}\n";
+//#endregion
+//#region src/roving-focus/examples/tools.example.tsx
+var tools_example_exports = /* @__PURE__ */ __exportAll({
+	Tools: () => Tools,
+	source: () => source
+});
+const OUTLINE = { variant: "outline" };
+function Tools() {
+	const $ = c(21);
+	const { t } = useWords("roving-focus");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("tools");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("select");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t1
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("draw");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("erase");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Item, {
+			as: Button,
+			children: t5
+		});
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: OUTLINE,
+			children: /* @__PURE__ */ jsxs(Group, {
+				attached: true,
+				orientation: "vertical",
+				children: [
+					t2,
+					t4,
+					t6
+				]
+			})
+		});
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t0 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Root, {
+			"aria-label": t0,
+			orientation: "vertical",
+			role: "toolbar",
+			children: t7
+		});
+		$[18] = t0;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Group } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { RovingFocus } from \"@stealthscale/component-a11y\";\n\nconst OUTLINE = { variant: \"outline\" } as const;\n\nexport function Tools(): ReactElement {\n  const { t } = useWords(\"roving-focus\");\n\n  return (\n    <RovingFocus.Root aria-label={t(\"tools\")} orientation=\"vertical\" role=\"toolbar\">\n      <ButtonPropsProvider value={OUTLINE}>\n        <Group attached orientation=\"vertical\">\n          <RovingFocus.Item as={Button}>{t(\"select\")}</RovingFocus.Item>\n          <RovingFocus.Item as={Button}>{t(\"draw\")}</RovingFocus.Item>\n          <RovingFocus.Item as={Button}>{t(\"erase\")}</RovingFocus.Item>\n        </Group>\n      </ButtonPropsProvider>\n    </RovingFocus.Root>\n  );\n}\n";
+//#endregion
+//#region src/roving-focus/roving-focus.specimen.tsx
+/**
+* Renders the formatting toolbar at rest and in the keyboard-focus state.
+*/
+function Toolbar() {
+	const $ = c(2);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Sample, {
+			knob: "state",
+			of: "rest",
+			children: /* @__PURE__ */ jsx(Formatting, {})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Board, { children: [t0, /* @__PURE__ */ jsx(Sample, {
+			knob: "state",
+			of: "focus",
+			children: /* @__PURE__ */ jsx(Focused, { children: /* @__PURE__ */ jsx(Formatting, {}) })
+		})] });
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Renders the vertical toolbar at its own width in a sample.
+*/
+function Vertical() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Sample, { children: /* @__PURE__ */ jsx(Tools, {}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Renders the filters in a 320px room, where they wrap onto three lines.
+*/
+function Both() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Filters, {})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Hand-written scene for a horizontal group that wraps at its ends.
+*/
+const toolbar = {
+	about: "roving-focus.toolbar.about",
+	axes: ["orientation"],
+	draw: Toolbar,
+	example: formatting_example_exports,
+	title: "roving-focus.toolbar.title"
+};
+/**
+* Hand-written scene for a vertical group.
+*/
+const vertical = {
+	about: "roving-focus.vertical.about",
+	axes: ["orientation"],
+	draw: Vertical,
+	example: tools_example_exports,
+	title: "roving-focus.vertical.title"
+};
+/**
+* Hand-written scene for a group that responds to both arrow axes.
+*/
+const both = {
+	about: "roving-focus.both.about",
+	axes: ["orientation"],
+	draw: Both,
+	example: filters_example_exports,
+	title: "roving-focus.both.title"
+};
+var roving_focus_specimen_default = specimen({
+	about: "roving-focus.about",
+	id: "components/a11y/roving-focus",
+	imports: "import { RovingFocus } from \"@stealthscale/component-a11y\";",
+	scenes: [
+		toolbar,
+		vertical,
+		both
+	],
+	title: "roving-focus.title"
+});
+//#endregion
+export { both, roving_focus_specimen_default as default, toolbar, vertical };

package/dist/pages/roving-focus/roving-focus.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"ItemProps": {"conditions": 284, "foreign": 1039}, "RootProps": {"conditions": 284, "foreign": 1040}};
+export const parts = {"ItemProps": [{"accepts": "boolean", "fallback": "", "kind": "option", "name": "disabled", "refers": [], "required": false, "says": "Whether the arrows step past the item."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "id", "refers": [], "required": false, "says": "Identifier the group registers the item under. The item generates one when the caller omits it, and writes the DOM attribute only when the caller passes it."}, {"accepts": "Ref<HTMLElement>", "fallback": "", "kind": "option", "name": "ref", "refers": ["react.RefObject", "react.bivarianceHack"], "required": false, "says": "Ref that receives the item's element."}], "RootProps": [{"accepts": "string", "fallback": "", "kind": "option", "name": "activeId", "refers": [], "required": false, "says": "Item with the tab stop when the caller controls the group."}, {"accepts": "ReactNode", "fallback": "", "kind": "option", "name": "children", "refers": ["react.ReactElement", "react.ReactPortal"], "required": false, "says": "Items of the group."}, {"accepts": "string", "fallback": "", "kind": "option", "name": "defaultActiveId", "refers": [], "required": false, "says": "Item that Tab enters first when the group controls itself."}, {"accepts": "((activeId: string) => void)", "fallback": "", "kind": "option", "name": "onActiveIdChange", "refers": [], "required": false, "says": "Called after the tab stop moves to another item."}, {"accepts": "Orientation", "fallback": "", "kind": "option", "name": "orientation", "refers": ["kit.Orientation"], "required": false, "says": "Axes whose arrows move focus. Defaults to `horizontal`."}, {"accepts": "boolean", "fallback": "", "kind": "option", "name": "wrap", "refers": [], "required": false, "says": "Whether a step past one end continues at the other."}]};
+export const shapes = {"react.RefObject": [{"accepts": "HTMLElement | null", "name": "current", "says": "The current value of the ref."}], "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.Orientation": [{"accepts": "", "name": "\"both\"", "says": ""}, {"accepts": "", "name": "\"horizontal\"", "says": ""}, {"accepts": "", "name": "\"vertical\"", "says": ""}]};

package/dist/pages/skip-nav/skip-nav.js

@@ -0,0 +1,181 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as Link, i as Target } from "../../shared-UZQEmdYt.js";
+import { c } from "react/compiler-runtime";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Contained, Room, specimen, useWords } from "@stealthscale/specimen";
+import { Button } from "@stealthscale/component-actions";
+import { Group, Stack } from "@stealthscale/component-layout";
+import { Text } from "@stealthscale/component-typography";
+//#region src/skip-nav/examples/invoices.example.tsx
+var invoices_example_exports = /* @__PURE__ */ __exportAll({
+	Invoices: () => Invoices,
+	source: () => source
+});
+function Invoices() {
+	const $ = c(35);
+	const { t } = useWords("skip-nav");
+	const results = useId();
+	const t0 = `#${results}`;
+	let t1;
+	if ($[0] !== t) {
+		t1 = t("skip");
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t0 || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Link, {
+			href: t0,
+			children: t1
+		});
+		$[2] = t0;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("filters");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("all");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("paid");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t6
+		});
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("overdue");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "outline",
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t3 || $[20] !== t5 || $[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Group, {
+			"aria-label": t3,
+			as: "fieldset",
+			children: [
+				t5,
+				t7,
+				t9
+			]
+		});
+		$[19] = t3;
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t) {
+		t11 = t("results");
+		$[24] = t;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Text, { children: t11 });
+		$[26] = t11;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== results || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Target, {
+			id: results,
+			children: t12
+		});
+		$[28] = results;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== t10 || $[32] !== t13 || $[33] !== t2) {
+		t14 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [
+				t2,
+				t10,
+				t13
+			]
+		});
+		$[31] = t10;
+		$[32] = t13;
+		$[33] = t2;
+		$[34] = t14;
+	} else t14 = $[34];
+	return t14;
+}
+const source = "import { type ReactElement, useId } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Group, Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SkipNav } from \"@stealthscale/component-a11y\";\n\nexport function Invoices(): ReactElement {\n  const { t } = useWords(\"skip-nav\");\n  const results = useId();\n\n  return (\n    <Stack gap=\"md\">\n      <SkipNav.Link href={`#${results}`}>{t(\"skip\")}</SkipNav.Link>\n      <Group aria-label={t(\"filters\")} as=\"fieldset\">\n        <Button size=\"sm\" variant=\"outline\">\n          {t(\"all\")}\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          {t(\"paid\")}\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          {t(\"overdue\")}\n        </Button>\n      </Group>\n      <SkipNav.Target id={results}>\n        <Text>{t(\"results\")}</Text>\n      </SkipNav.Target>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/skip-nav/skip-nav.specimen.tsx
+/**
+* Renders the invoice list in a 512px room that contains its fixed link.
+*/
+function Pair() {
+	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(Invoices, {}) })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* Hand-written scene for the link and the target.
+*/
+const pair = {
+	about: "skip-nav.pair.about",
+	draw: Pair,
+	example: invoices_example_exports,
+	title: "skip-nav.pair.title"
+};
+var skip_nav_specimen_default = specimen({
+	about: "skip-nav.about",
+	id: "components/a11y/skip-nav",
+	imports: "import { SkipNav } from \"@stealthscale/component-a11y\";",
+	scenes: [pair],
+	title: "skip-nav.title"
+});
+//#endregion
+export { skip_nav_specimen_default as default, pair };

package/dist/pages/skip-nav/skip-nav.props.js

@@ -0,0 +1,3 @@
+export const dropped = {"LinkProps": {"conditions": 284, "foreign": 1049}, "TargetProps": {"conditions": 284, "foreign": 1041}};
+export const parts = {"LinkProps": [], "TargetProps": []};
+export const shapes = {};