@stealthscale/component-a11y 0.1.0 → 0.1.3

package/dist/index.js

@@ -1,598 +1,2 @@
-import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { n as recipe$1, r as recipe, t as recipe$2 } from "./recipe-BKojQp6r.js";
-import { c } from "react/compiler-runtime";
-import { createContext, use, useEffect, useId, useRef, useState } from "react";
-import { useCallbackRef, useControllableState } from "@stealthscale/hooks";
-import { createRecipeContext, createSlotRecipeContext } from "@stealthscale/theme";
-import { jsx } from "react/jsx-runtime";
-//#region src/roving-focus/context.ts
-/**
-* Binds the group's recipe to the parts that draw it.
-*
-* @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. The root carries the orientation, and every item below it reads
-*   its classes from the root through a context.
-*/
-/**
-* Binds the recipe once: the root takes the orientation, and each item draws its slot in it.
-*/
-const { withContext: withContext$1, withProvider: withProvider$1 } = createSlotRecipeContext(recipe);
-//#endregion
-//#region src/roving-focus/use-roving-focus.ts
-/**
-* Moves one tab stop through a set of controls, so a reader reaches the set with Tab and moves
-* inside it with the arrows.
-*
-* @remarks
-*   A toolbar, a row of tabs and a menu bar are all one stop in the tab order, and the arrows move
-*   which control that stop is on. The items register themselves rather than being counted by the
-*   root, because a root cannot see through whatever composes its children. Registration order is
-*   the order the effects ran, which is source order until something is conditional, so the list
-*   is sorted by where the items sit in the document: what the arrows follow is what the reader
-*   sees.
-*/
-/**
-* Maps the arrows that run down the page to the step each takes.
-*/
-const DOWN_THE_PAGE = {
-	ArrowDown: 1,
-	ArrowUp: -1
-};
-/**
-* Maps the arrows that run along a line to the step each takes.
-*/
-const ALONG_THE_LINE = {
-	ArrowLeft: -1,
-	ArrowRight: 1
-};
-/**
-* Carries the group down to its items.
-*/
-const RovingFocusContext = createContext(void 0);
-/**
-* Orders two items by where they sit in the document.
-*/
-function byDocumentPosition(first, second) {
-	return (first.element.compareDocumentPosition(second.element) & Node.DOCUMENT_POSITION_FOLLOWING) === 0 ? 1 : -1;
-}
-/**
-* Reads what a key asks for, given the arrows the group binds and which way the line runs.
-*
-* @param key - The key pressed.
-* @param orientation - Which arrows the group moves on.
-* @param forward - One where the line runs left to right, minus one where it runs the other way.
-* @returns The step or the edge to move to, or nothing where the group does not claim the key.
-*/
-function intentOf(key, orientation, forward) {
-	if (key === "Home") return "start";
-	if (key === "End") return "end";
-	const block = DOWN_THE_PAGE[key];
-	if (block !== void 0) return orientation === "horizontal" ? void 0 : block;
-	const inline = ALONG_THE_LINE[key];
-	if (inline !== void 0) return orientation === "vertical" ? void 0 : inline * forward;
-}
-/**
-* Marks out the one item the group moves to, as a slice of the list it is in.
-*
-* @remarks
-*   A slice rather than an index, because the list is read at an index that is always inside it
-*   and a lookup would still be typed as possibly absent. A slice of one is the item, and a slice
-*   of an empty list is empty, so the caller writes no test for a case that cannot arise.
-* @param list - The items, in the order the reader sees them.
-* @param intent - The edge or the step the key asked for.
-* @param from - The item that holds the tab stop.
-* @param wrap - Whether the ends join up.
-* @returns The first and last index of the slice holding the item to move to.
-*/
-function spanOf(list, intent, from, wrap) {
-	const last = list.length - 1;
-	const at = list.findIndex((item) => item.id === from);
-	const here = at === -1 ? 0 : at;
-	const to = intent === "start" ? 0 : intent === "end" ? last : wrap ? (here + intent + list.length) % list.length : Math.min(last, Math.max(0, here + intent));
-	return [to, to + 1];
-}
-/**
-* Keeps the items in a ref rather than in state.
-*
-* @remarks
-*   Nothing drawn depends on the list, only on which item holds the stop, so putting it in state
-*   would draw the whole group again every time one item mounted, for a change nobody could see.
-*/
-function useRegistry() {
-	const $ = c(6);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 6; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
-	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = [];
-		$[1] = t0;
-	} else t0 = $[1];
-	const items = useRef(t0);
-	let t1;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = (registration) => {
-			items.current = [...items.current, registration];
-		};
-		$[2] = t1;
-	} else t1 = $[2];
-	const add = t1;
-	let t2;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = (node) => items.current.some((item) => item.element.contains(node));
-		$[3] = t2;
-	} else t2 = $[3];
-	const holds = t2;
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = () => items.current.toSorted(byDocumentPosition);
-		$[4] = t3;
-	} else t3 = $[4];
-	const ordered = t3;
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		const remove = (id) => {
-			items.current = items.current.filter((item_0) => item_0.id !== id);
-		};
-		t4 = {
-			add,
-			holds,
-			ordered,
-			remove
-		};
-		$[5] = t4;
-	} else t4 = $[5];
-	return t4;
-}
-/**
-* Keeps which item holds the tab stop, driven from above where a caller drives it.
-*/
-function useTabStop(props) {
-	const $ = c(13);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
-	const { activeId: driven, defaultActiveId, onActiveIdChange } = props;
-	let t0;
-	if ($[1] !== defaultActiveId || $[2] !== driven || $[3] !== onActiveIdChange) {
-		t0 = {
-			defaultValue: defaultActiveId,
-			onChange: onActiveIdChange,
-			value: driven
-		};
-		$[1] = defaultActiveId;
-		$[2] = driven;
-		$[3] = onActiveIdChange;
-		$[4] = t0;
-	} else t0 = $[4];
-	const [activeId, setActiveId] = useControllableState(t0);
-	const stop = useRef(activeId);
-	let t1;
-	let t2;
-	if ($[5] !== activeId) {
-		t1 = () => {
-			stop.current = activeId;
-		};
-		t2 = [activeId];
-		$[5] = activeId;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t1 = $[6];
-		t2 = $[7];
-	}
-	useEffect(t1, t2);
-	let t3;
-	if ($[8] !== setActiveId) {
-		t3 = (next) => {
-			stop.current = next;
-			setActiveId(next);
-		};
-		$[8] = setActiveId;
-		$[9] = t3;
-	} else t3 = $[9];
-	const claim = useCallbackRef(t3);
-	let t4;
-	if ($[10] !== activeId || $[11] !== claim) {
-		t4 = {
-			activeId,
-			claim,
-			stop
-		};
-		$[10] = activeId;
-		$[11] = claim;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
-}
-/**
-* Moves one tab stop through the items that register with it.
-*
-* @remarks
-*   The first item to register takes the stop, so a group is reachable by Tab from its first
-*   render. An item that leaves while it holds the stop hands it to whatever is first, so the
-*   group never drops out of the tab order.
-* @returns The group the items read, and the handler the root binds.
-*/
-function useRovingFocus(props) {
-	const $ = c(23);
-	if ($[0] !== "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d") {
-		for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6879b11696c2d2a5e563183941bb99f80ab3ad4b04bbc8a7ef4c43a80f829e8d";
-	}
-	const { orientation, wrap } = props;
-	const { add, holds, ordered, remove } = useRegistry();
-	const { activeId, claim, stop } = useTabStop(props);
-	let t0;
-	if ($[1] !== add || $[2] !== claim || $[3] !== ordered || $[4] !== remove || $[5] !== stop.current) {
-		t0 = (registration) => {
-			add(registration);
-			if (stop.current === void 0) claim(registration.id);
-			return () => {
-				remove(registration.id);
-				if (stop.current === registration.id) claim(ordered()[0]?.id);
-			};
-		};
-		$[1] = add;
-		$[2] = claim;
-		$[3] = ordered;
-		$[4] = remove;
-		$[5] = stop.current;
-		$[6] = t0;
-	} else t0 = $[6];
-	const register = useCallbackRef(t0);
-	let t1;
-	if ($[7] !== claim || $[8] !== holds || $[9] !== ordered || $[10] !== orientation || $[11] !== stop.current || $[12] !== wrap) {
-		t1 = (event) => {
-			if (event.ctrlKey || event.metaKey || event.altKey) return;
-			const { target } = event;
-			if (!(target instanceof Node) || !holds(target)) return;
-			const rightToLeft = globalThis.getComputedStyle(event.currentTarget).direction === "rtl";
-			const intent = intentOf(event.key, orientation, rightToLeft ? -1 : 1);
-			if (intent === void 0) return;
-			for (const moving of ordered().slice(...spanOf(ordered(), intent, stop.current, wrap))) {
-				claim(moving.id);
-				moving.element.focus();
-			}
-			event.preventDefault();
-		};
-		$[7] = claim;
-		$[8] = holds;
-		$[9] = ordered;
-		$[10] = orientation;
-		$[11] = stop.current;
-		$[12] = wrap;
-		$[13] = t1;
-	} else t1 = $[13];
-	const onKeyDown = useCallbackRef(t1);
-	let t2;
-	if ($[14] !== claim) {
-		t2 = (id) => {
-			claim(id);
-		};
-		$[14] = claim;
-		$[15] = t2;
-	} else t2 = $[15];
-	const onFocus = useCallbackRef(t2);
-	let t3;
-	if ($[16] !== activeId || $[17] !== onFocus || $[18] !== register) {
-		t3 = {
-			activeId,
-			onFocus,
-			register
-		};
-		$[16] = activeId;
-		$[17] = onFocus;
-		$[18] = register;
-		$[19] = t3;
-	} else t3 = $[19];
-	const t4 = t3;
-	let t5;
-	if ($[20] !== onKeyDown || $[21] !== t4) {
-		t5 = {
-			group: t4,
-			onKeyDown
-		};
-		$[20] = onKeyDown;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
-	return t5;
-}
-//#endregion
-//#region src/roving-focus/item.tsx
-/**
-* Draws one item of the group, which holds the tab stop when the arrows reach it.
-*
-* @remarks
-*   Exactly one item is reachable by Tab and every other is at minus one, which is what makes the
-*   whole group one stop in the tab order. A disabled item registers with nothing, so the arrows
-*   pass over it, and it does not claim the stop when a pointer focuses it: an item that claimed
-*   the stop without registering would leave the stop pointing at nothing and take the group out
-*   of the tab order. The element is kept in state rather than in a ref, because the effect that
-*   registers it has to run again once the element is there, and a ref changing starts no effect.
-*/
-/**
-* Draws the element an item is laid out on.
-*/
-const Shell$1 = withContext$1("div", "item");
-/**
-* Takes the tab stop when the arrows reach it, and leaves the tab order otherwise.
-*
-* @throws {@link Error} When it is drawn outside a group.
-*/
-function Item(props) {
-	const $ = c(27);
-	if ($[0] !== "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "906ba9f383c3499089f80a6d094880677f9a2e49a204ba65b1f93dfa19d6065b";
-	}
-	let handed;
-	let named;
-	let rest;
-	let t0;
-	if ($[1] !== props) {
-		({disabled: t0, id: named, ref: handed, ...rest} = props);
-		$[1] = props;
-		$[2] = handed;
-		$[3] = named;
-		$[4] = rest;
-		$[5] = t0;
-	} else {
-		handed = $[2];
-		named = $[3];
-		rest = $[4];
-		t0 = $[5];
-	}
-	const disabled = t0 === void 0 ? false : t0;
-	const group = use(RovingFocusContext);
-	if (group === void 0) throw new Error("RovingFocus.Item is drawn inside RovingFocus.Root and nowhere else.");
-	const generated = useId();
-	const id = named ?? generated;
-	const { activeId, onFocus, register } = group;
-	const [element, setElement] = useState(null);
-	let t1;
-	if ($[6] !== handed) {
-		t1 = (node) => {
-			setElement(node);
-			if (typeof handed === "function") handed(node);
-			else if (handed !== null && handed !== void 0) handed.current = node;
-		};
-		$[6] = handed;
-		$[7] = t1;
-	} else t1 = $[7];
-	const attach = useCallbackRef(t1);
-	let t2;
-	if ($[8] !== disabled || $[9] !== id || $[10] !== onFocus) {
-		t2 = () => {
-			if (!disabled) onFocus(id);
-		};
-		$[8] = disabled;
-		$[9] = id;
-		$[10] = onFocus;
-		$[11] = t2;
-	} else t2 = $[11];
-	const claim = useCallbackRef(t2);
-	let t3;
-	let t4;
-	if ($[12] !== disabled || $[13] !== element || $[14] !== id || $[15] !== register) {
-		t3 = () => {
-			if (element === null || disabled) return;
-			return register({
-				element,
-				id
-			});
-		};
-		t4 = [
-			disabled,
-			element,
-			id,
-			register
-		];
-		$[12] = disabled;
-		$[13] = element;
-		$[14] = id;
-		$[15] = register;
-		$[16] = t3;
-		$[17] = t4;
-	} else {
-		t3 = $[16];
-		t4 = $[17];
-	}
-	useEffect(t3, t4);
-	const t5 = disabled || void 0;
-	const t6 = activeId === id ? "" : void 0;
-	const t7 = disabled ? "" : void 0;
-	const t8 = !disabled && activeId === id ? 0 : -1;
-	let t9;
-	if ($[18] !== attach || $[19] !== claim || $[20] !== id || $[21] !== rest || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Shell$1, {
-			"aria-disabled": t5,
-			"data-active": t6,
-			"data-disabled": t7,
-			id,
-			onFocus: claim,
-			ref: attach,
-			tabIndex: t8,
-			...rest
-		});
-		$[18] = attach;
-		$[19] = claim;
-		$[20] = id;
-		$[21] = rest;
-		$[22] = t5;
-		$[23] = t6;
-		$[24] = t7;
-		$[25] = t8;
-		$[26] = t9;
-	} else t9 = $[26];
-	return t9;
-}
-//#endregion
-//#region src/roving-focus/root.tsx
-/**
-* Draws the element the group is laid out on.
-*/
-const Shell = withProvider$1("div", "root");
-/**
-* Keeps one tab stop for the items inside it, and moves it under the arrow keys.
-*/
-function Root(props) {
-	const $ = c(27);
-	if ($[0] !== "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7") {
-		for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "16a674b835753bf9fd806b5c17b8426cf42995a3c3e2732778987a1e4a0700e7";
-	}
-	let activeId;
-	let children;
-	let defaultActiveId;
-	let onActiveIdChange;
-	let rest;
-	let t0;
-	let t1;
-	if ($[1] !== props) {
-		({activeId, children, defaultActiveId, onActiveIdChange, orientation: t0, wrap: t1, ...rest} = props);
-		$[1] = props;
-		$[2] = activeId;
-		$[3] = children;
-		$[4] = defaultActiveId;
-		$[5] = onActiveIdChange;
-		$[6] = rest;
-		$[7] = t0;
-		$[8] = t1;
-	} else {
-		activeId = $[2];
-		children = $[3];
-		defaultActiveId = $[4];
-		onActiveIdChange = $[5];
-		rest = $[6];
-		t0 = $[7];
-		t1 = $[8];
-	}
-	const orientation = t0 === void 0 ? "horizontal" : t0;
-	const wrap = t1 === void 0 ? false : t1;
-	let t2;
-	if ($[9] !== activeId || $[10] !== defaultActiveId || $[11] !== onActiveIdChange || $[12] !== orientation || $[13] !== wrap) {
-		t2 = {
-			activeId,
-			defaultActiveId,
-			onActiveIdChange,
-			orientation,
-			wrap
-		};
-		$[9] = activeId;
-		$[10] = defaultActiveId;
-		$[11] = onActiveIdChange;
-		$[12] = orientation;
-		$[13] = wrap;
-		$[14] = t2;
-	} else t2 = $[14];
-	const { group, onKeyDown } = useRovingFocus(t2);
-	let t3;
-	if ($[15] !== orientation || $[16] !== rest.role) {
-		t3 = rest.role !== void 0 && orientation !== "both" ? { "aria-orientation": orientation } : void 0;
-		$[15] = orientation;
-		$[16] = rest.role;
-		$[17] = t3;
-	} else t3 = $[17];
-	const told = t3;
-	let t4;
-	if ($[18] !== children || $[19] !== onKeyDown || $[20] !== orientation || $[21] !== rest || $[22] !== told) {
-		t4 = /* @__PURE__ */ jsx(Shell, {
-			onKeyDown,
-			orientation,
-			...told,
-			...rest,
-			children
-		});
-		$[18] = children;
-		$[19] = onKeyDown;
-		$[20] = orientation;
-		$[21] = rest;
-		$[22] = told;
-		$[23] = t4;
-	} else t4 = $[23];
-	let t5;
-	if ($[24] !== group || $[25] !== t4) {
-		t5 = /* @__PURE__ */ jsx(RovingFocusContext, {
-			value: group,
-			children: t4
-		});
-		$[24] = group;
-		$[25] = t4;
-		$[26] = t5;
-	} else t5 = $[26];
-	return t5;
-}
-//#endregion
-//#region src/roving-focus/index.ts
-var roving_focus_exports = /* @__PURE__ */ __exportAll({
-	Item: () => Item,
-	Root: () => Root
-});
-//#endregion
-//#region src/skip-nav/context.ts
-/**
-* Binds the skip link's recipe to the parts that draw it.
-*
-* @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. Neither part takes a variant, so each is bound on its own
-*   rather than one providing for the other: a page puts the link at the top and the target
-*   further down, and the two are never nested.
-*/
-/**
-* Binds the recipe once, for the link and for the target it jumps to.
-*/
-const { withProvider } = createSlotRecipeContext(recipe$1);
-//#endregion
-//#region src/skip-nav/link.ts
-/**
-* The fragment the link points at and the target answers to, where neither states one.
-*/
-const SKIP_NAV_TARGET = "content";
-/**
-* Jumps a keyboard past the navigation to the page's content.
-*/
-const Link = withProvider("a", "link", { defaultProps: { href: `#${SKIP_NAV_TARGET}` } });
-//#endregion
-//#region src/skip-nav/target.ts
-/**
-* Takes the focus the skip link sends, and draws nothing.
-*/
-const Target = withProvider("div", "target", { defaultProps: {
-	id: SKIP_NAV_TARGET,
-	tabIndex: -1
-} });
-//#endregion
-//#region src/skip-nav/index.ts
-var skip_nav_exports = /* @__PURE__ */ __exportAll({
-	Link: () => Link,
-	SKIP_NAV_TARGET: () => SKIP_NAV_TARGET,
-	Target: () => Target
-});
-//#endregion
-//#region src/visually-hidden/context.ts
-/**
-* Binds the hidden text's recipe to the element that draws it.
-*
-* @remarks
-*   Apart from the recipe, because an application's compiler reads the recipe at build time and
-*   the binding needs the runtime. A recipe file that also bound one would put the runtime behind
-*   every compiler configuration that reads it.
-*/
-/**
-* Binds the recipe once, for the hidden text and for whatever sets its variants from above.
-*/
-const { PropsProvider, withContext } = createRecipeContext(recipe$2);
-//#endregion
-//#region src/visually-hidden/visually-hidden.ts
-/**
-* Reads its words to a screen reader and draws them nowhere.
-*/
-const VisuallyHidden = withContext("span");
-//#endregion
+import { n as PropsProvider, o as roving_focus_exports, r as skip_nav_exports, t as VisuallyHidden } from "./shared-UZQEmdYt.js";
 export { roving_focus_exports as RovingFocus, skip_nav_exports as SkipNav, VisuallyHidden, PropsProvider as VisuallyHiddenPropsProvider };

package/dist/pages/pages.json

@@ -0,0 +1,42 @@
+{
+  "format": 1,
+  "pages": [
+    {
+      "about": "roving-focus.about",
+      "group": "",
+      "id": "components/a11y/roving-focus",
+      "module": "roving-focus/roving-focus.js",
+      "namespace": "",
+      "props": "roving-focus/roving-focus.props.js",
+      "specimen": "src/roving-focus/roving-focus.specimen.tsx",
+      "title": "roving-focus.title"
+    },
+    {
+      "about": "skip-nav.about",
+      "group": "",
+      "id": "components/a11y/skip-nav",
+      "module": "skip-nav/skip-nav.js",
+      "namespace": "",
+      "props": "skip-nav/skip-nav.props.js",
+      "specimen": "src/skip-nav/skip-nav.specimen.tsx",
+      "title": "skip-nav.title"
+    },
+    {
+      "about": "visually-hidden.about",
+      "group": "",
+      "id": "components/a11y/visually-hidden",
+      "module": "visually-hidden/visually-hidden.js",
+      "namespace": "",
+      "props": "visually-hidden/visually-hidden.props.js",
+      "specimen": "src/visually-hidden/visually-hidden.specimen.tsx",
+      "title": "visually-hidden.title"
+    }
+  ],
+  "requires": {
+    "@stealthscale/component-actions": "^0.2.0",
+    "@stealthscale/component-layout": "^0.2.0",
+    "@stealthscale/component-typography": "^0.3.0",
+    "@stealthscale/specimen": "^0.3.0",
+    "lucide-react": "^1.52.0"
+  }
+}