@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/dist/_chunk/createLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLabel.js","names":[],"sources":["../../src/label/createLabel.ts"],"sourcesContent":["/**\n * Label hook for Solidaria\n *\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n *\n * This is a 1:1 port of @react-aria/label's useLabel hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport { createLabels } from \"./createLabels\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\n\nexport interface AriaLabelingProps {\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n}\n\nexport interface LabelableProps {\n  /** The content to display as the label. */\n  label?: JSX.Element;\n}\n\nexport interface DOMProps {\n  /** The element's unique identifier. */\n  id?: string;\n}\n\nexport interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: \"label\" | \"span\" | \"div\";\n}\n\nexport interface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement> | JSX.HTMLAttributes<HTMLSpanElement>;\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: AriaLabelingProps & DOMProps;\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n *\n * @param props - The props for labels and fields.\n */\nexport function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {\n  const getProps = () => access(props);\n\n  const id = createId(getProps().id);\n  const labelId = createId();\n\n  const getLabelProps = (): LabelAria[\"labelProps\"] => {\n    const { label, labelElementType = \"label\" } = getProps();\n\n    if (!label) {\n      return {};\n    }\n\n    return {\n      id: labelId,\n      ...(labelElementType === \"label\" ? { for: id } : {}),\n    };\n  };\n\n  const getFieldProps = (): LabelAria[\"fieldProps\"] => {\n    const { label, \"aria-labelledby\": ariaLabelledby, \"aria-label\": ariaLabel } = getProps();\n\n    let labelledBy = ariaLabelledby;\n\n    if (label) {\n      labelledBy = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n    } else if (!ariaLabelledby && !ariaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n      );\n    }\n\n    return createLabels({\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": labelledBy,\n    });\n  };\n\n  return {\n    get labelProps() {\n      return getLabelProps();\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;AAyDA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,KAAK,SAAS,SAAS,CAAC,CAAC,EAAE;CACjC,MAAM,UAAU,SAAS;CAEzB,MAAM,sBAA+C;EACnD,MAAM,EAAE,OAAO,mBAAmB,YAAY,SAAS;EAEvD,IAAI,CAAC,OACH,OAAO,CAAC;EAGV,OAAO;GACL,IAAI;GACJ,GAAI,qBAAqB,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC;EACpD;CACF;CAEA,MAAM,sBAA+C;EACnD,MAAM,EAAE,OAAO,mBAAmB,gBAAgB,cAAc,cAAc,SAAS;EAEvF,IAAI,aAAa;EAEjB,IAAI,OACF,aAAa,iBAAiB,GAAG,QAAQ,GAAG,mBAAmB;OAC1D,IAAI,CAAC,kBAAkB,CAAC,aAAa,SAAS,GACnD,QAAQ,KACN,sHACF;EAGF,OAAO,aAAa;GAClB;GACA,cAAc;GACd,mBAAmB;EACrB,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;CACF;AACF"}

package/dist/_chunk/createLabel.jsx

@@ -0,0 +1,46 @@
+import { i as access, t as isDevEnv } from "./env.jsx";
+import { createId } from "../ssr/index.jsx";
+import { t as createLabels } from "./createLabels.jsx";
+//#region src/label/createLabel.ts
+/**
+* Provides the accessibility implementation for labels and their associated elements.
+* Labels provide context for user inputs.
+*
+* @param props - The props for labels and fields.
+*/
+function createLabel(props) {
+	const getProps = () => access(props);
+	const id = createId(getProps().id);
+	const labelId = createId();
+	const getLabelProps = () => {
+		const { label, labelElementType = "label" } = getProps();
+		if (!label) return {};
+		return {
+			id: labelId,
+			...labelElementType === "label" ? { for: id } : {}
+		};
+	};
+	const getFieldProps = () => {
+		const { label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel } = getProps();
+		let labelledBy = ariaLabelledby;
+		if (label) labelledBy = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+		else if (!ariaLabelledby && !ariaLabel && isDevEnv()) console.warn("If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility");
+		return createLabels({
+			id,
+			"aria-label": ariaLabel,
+			"aria-labelledby": labelledBy
+		});
+	};
+	return {
+		get labelProps() {
+			return getLabelProps();
+		},
+		get fieldProps() {
+			return getFieldProps();
+		}
+	};
+}
+//#endregion
+export { createLabel as t };
+
+//# sourceMappingURL=createLabel.jsx.map

package/dist/_chunk/createLabel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLabel.jsx","names":[],"sources":["../../src/label/createLabel.ts"],"sourcesContent":["/**\n * Label hook for Solidaria\n *\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n *\n * This is a 1:1 port of @react-aria/label's useLabel hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport { createLabels } from \"./createLabels\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\n\nexport interface AriaLabelingProps {\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n}\n\nexport interface LabelableProps {\n  /** The content to display as the label. */\n  label?: JSX.Element;\n}\n\nexport interface DOMProps {\n  /** The element's unique identifier. */\n  id?: string;\n}\n\nexport interface LabelAriaProps extends LabelableProps, DOMProps, AriaLabelingProps {\n  /**\n   * The HTML element used to render the label, e.g. 'label', or 'span'.\n   * @default 'label'\n   */\n  labelElementType?: \"label\" | \"span\" | \"div\";\n}\n\nexport interface LabelAria {\n  /** Props to apply to the label container element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement> | JSX.HTMLAttributes<HTMLSpanElement>;\n  /** Props to apply to the field container element being labeled. */\n  fieldProps: AriaLabelingProps & DOMProps;\n}\n\n/**\n * Provides the accessibility implementation for labels and their associated elements.\n * Labels provide context for user inputs.\n *\n * @param props - The props for labels and fields.\n */\nexport function createLabel(props: MaybeAccessor<LabelAriaProps>): LabelAria {\n  const getProps = () => access(props);\n\n  const id = createId(getProps().id);\n  const labelId = createId();\n\n  const getLabelProps = (): LabelAria[\"labelProps\"] => {\n    const { label, labelElementType = \"label\" } = getProps();\n\n    if (!label) {\n      return {};\n    }\n\n    return {\n      id: labelId,\n      ...(labelElementType === \"label\" ? { for: id } : {}),\n    };\n  };\n\n  const getFieldProps = (): LabelAria[\"fieldProps\"] => {\n    const { label, \"aria-labelledby\": ariaLabelledby, \"aria-label\": ariaLabel } = getProps();\n\n    let labelledBy = ariaLabelledby;\n\n    if (label) {\n      labelledBy = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n    } else if (!ariaLabelledby && !ariaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n      );\n    }\n\n    return createLabels({\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": labelledBy,\n    });\n  };\n\n  return {\n    get labelProps() {\n      return getLabelProps();\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;AAyDA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,KAAK,SAAS,SAAS,CAAC,CAAC,EAAE;CACjC,MAAM,UAAU,SAAS;CAEzB,MAAM,sBAA+C;EACnD,MAAM,EAAE,OAAO,mBAAmB,YAAY,SAAS;EAEvD,IAAI,CAAC,OACH,OAAO,CAAC;EAGV,OAAO;GACL,IAAI;GACJ,GAAI,qBAAqB,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC;EACpD;CACF;CAEA,MAAM,sBAA+C;EACnD,MAAM,EAAE,OAAO,mBAAmB,gBAAgB,cAAc,cAAc,SAAS;EAEvF,IAAI,aAAa;EAEjB,IAAI,OACF,aAAa,iBAAiB,GAAG,QAAQ,GAAG,mBAAmB;OAC1D,IAAI,CAAC,kBAAkB,CAAC,aAAa,SAAS,GACnD,QAAQ,KACN,sHACF;EAGF,OAAO,aAAa;GAClB;GACA,cAAc;GACd,mBAAmB;EACrB,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;CACF;AACF"}

package/dist/_chunk/createLabels.js

@@ -0,0 +1,31 @@
+import { createId } from "../ssr/index.js";
+//#region src/label/createLabels.ts
+/**
+* Labels utility for Solidaria
+*
+* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+*
+* This is a 1:1 port of @react-aria/utils's useLabels hook.
+*/
+/**
+* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+*
+* @param props - Aria label props.
+* @param defaultLabel - Default value for aria-label when not present.
+*/
+function createLabels(props, defaultLabel) {
+	let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
+	id = createId(id);
+	if (labelledBy && label) labelledBy = [...new Set([id, ...labelledBy.trim().split(/\s+/)])].join(" ");
+	else if (labelledBy) labelledBy = labelledBy.trim().split(/\s+/).join(" ");
+	if (!label && !labelledBy && defaultLabel) label = defaultLabel;
+	return {
+		id,
+		"aria-label": label,
+		"aria-labelledby": labelledBy
+	};
+}
+//#endregion
+export { createLabels as t };
+
+//# sourceMappingURL=createLabels.js.map

package/dist/_chunk/createLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLabels.js","names":[],"sources":["../../src/label/createLabels.ts"],"sourcesContent":["/**\n * Labels utility for Solidaria\n *\n * Merges aria-label and aria-labelledby into aria-labelledby when both exist.\n *\n * This is a 1:1 port of @react-aria/utils's useLabels hook.\n */\n\nimport { createId } from \"../ssr\";\nimport type { AriaLabelingProps, DOMProps } from \"./createLabel\";\n\n/**\n * Merges aria-label and aria-labelledby into aria-labelledby when both exist.\n *\n * @param props - Aria label props.\n * @param defaultLabel - Default value for aria-label when not present.\n */\nexport function createLabels(\n  props: DOMProps & AriaLabelingProps,\n  defaultLabel?: string,\n): DOMProps & AriaLabelingProps {\n  let { id, \"aria-label\": label, \"aria-labelledby\": labelledBy } = props;\n\n  // Generate an ID if not provided\n  id = createId(id);\n\n  // If there is both an aria-label and aria-labelledby,\n  // combine them by pointing to the element itself.\n  if (labelledBy && label) {\n    const ids = new Set([id, ...labelledBy.trim().split(/\\s+/)]);\n    labelledBy = [...ids].join(\" \");\n  } else if (labelledBy) {\n    labelledBy = labelledBy.trim().split(/\\s+/).join(\" \");\n  }\n\n  // If no labels are provided, use the default\n  if (!label && !labelledBy && defaultLabel) {\n    label = defaultLabel;\n  }\n\n  return {\n    id,\n    \"aria-label\": label,\n    \"aria-labelledby\": labelledBy,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,aACd,OACA,cAC8B;CAC9B,IAAI,EAAE,IAAI,cAAc,OAAO,mBAAmB,eAAe;CAGjE,KAAK,SAAS,EAAE;CAIhB,IAAI,cAAc,OAEhB,aAAa,CAAC,GAAG,IADD,IAAI,CAAC,IAAI,GAAG,WAAW,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CACvC,CAAC,CAAC,CAAC,KAAK,GAAG;MACzB,IAAI,YACT,aAAa,WAAW,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG;CAItD,IAAI,CAAC,SAAS,CAAC,cAAc,cAC3B,QAAQ;CAGV,OAAO;EACL;EACA,cAAc;EACd,mBAAmB;CACrB;AACF"}

package/dist/_chunk/createLabels.jsx

@@ -0,0 +1,31 @@
+import { createId } from "../ssr/index.jsx";
+//#region src/label/createLabels.ts
+/**
+* Labels utility for Solidaria
+*
+* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+*
+* This is a 1:1 port of @react-aria/utils's useLabels hook.
+*/
+/**
+* Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+*
+* @param props - Aria label props.
+* @param defaultLabel - Default value for aria-label when not present.
+*/
+function createLabels(props, defaultLabel) {
+	let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
+	id = createId(id);
+	if (labelledBy && label) labelledBy = [...new Set([id, ...labelledBy.trim().split(/\s+/)])].join(" ");
+	else if (labelledBy) labelledBy = labelledBy.trim().split(/\s+/).join(" ");
+	if (!label && !labelledBy && defaultLabel) label = defaultLabel;
+	return {
+		id,
+		"aria-label": label,
+		"aria-labelledby": labelledBy
+	};
+}
+//#endregion
+export { createLabels as t };
+
+//# sourceMappingURL=createLabels.jsx.map

package/dist/_chunk/createLabels.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLabels.jsx","names":[],"sources":["../../src/label/createLabels.ts"],"sourcesContent":["/**\n * Labels utility for Solidaria\n *\n * Merges aria-label and aria-labelledby into aria-labelledby when both exist.\n *\n * This is a 1:1 port of @react-aria/utils's useLabels hook.\n */\n\nimport { createId } from \"../ssr\";\nimport type { AriaLabelingProps, DOMProps } from \"./createLabel\";\n\n/**\n * Merges aria-label and aria-labelledby into aria-labelledby when both exist.\n *\n * @param props - Aria label props.\n * @param defaultLabel - Default value for aria-label when not present.\n */\nexport function createLabels(\n  props: DOMProps & AriaLabelingProps,\n  defaultLabel?: string,\n): DOMProps & AriaLabelingProps {\n  let { id, \"aria-label\": label, \"aria-labelledby\": labelledBy } = props;\n\n  // Generate an ID if not provided\n  id = createId(id);\n\n  // If there is both an aria-label and aria-labelledby,\n  // combine them by pointing to the element itself.\n  if (labelledBy && label) {\n    const ids = new Set([id, ...labelledBy.trim().split(/\\s+/)]);\n    labelledBy = [...ids].join(\" \");\n  } else if (labelledBy) {\n    labelledBy = labelledBy.trim().split(/\\s+/).join(\" \");\n  }\n\n  // If no labels are provided, use the default\n  if (!label && !labelledBy && defaultLabel) {\n    label = defaultLabel;\n  }\n\n  return {\n    id,\n    \"aria-label\": label,\n    \"aria-labelledby\": labelledBy,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,aACd,OACA,cAC8B;CAC9B,IAAI,EAAE,IAAI,cAAc,OAAO,mBAAmB,eAAe;CAGjE,KAAK,SAAS,EAAE;CAIhB,IAAI,cAAc,OAEhB,aAAa,CAAC,GAAG,IADD,IAAI,CAAC,IAAI,GAAG,WAAW,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CACvC,CAAC,CAAC,CAAC,KAAK,GAAG;MACzB,IAAI,YACT,aAAa,WAAW,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG;CAItD,IAAI,CAAC,SAAS,CAAC,cAAc,cAC3B,QAAQ;CAGV,OAAO;EACL;EACA,cAAc;EACd,mBAAmB;CACrB;AACF"}

package/dist/_chunk/createLandmark.js

@@ -0,0 +1,198 @@
+import { i as access } from "./env.js";
+import { t as filterDOMProps } from "./filterDOMProps.js";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/landmark/createLandmark.ts
+/**
+* Manages all registered landmarks and handles F6 keyboard navigation.
+*/
+var LandmarkManager = class {
+	landmarks = [];
+	currentIndex = -1;
+	listening = false;
+	constructor() {
+		if (typeof window !== "undefined") this.startListening();
+	}
+	startListening() {
+		if (this.listening) return;
+		this.listening = true;
+		window.addEventListener("keydown", this.handleKeyDown.bind(this), true);
+	}
+	handleKeyDown(event) {
+		if (event.key === "F6") {
+			event.preventDefault();
+			if (event.shiftKey) this.focusPrevious();
+			else this.focusNext();
+		}
+	}
+	register(entry) {
+		const index = this.findInsertionIndex(entry.ref);
+		this.landmarks.splice(index, 0, entry);
+		this.validateLabels();
+	}
+	unregister(ref) {
+		const index = this.landmarks.findIndex((l) => l.ref === ref);
+		if (index !== -1) {
+			this.landmarks.splice(index, 1);
+			if (this.currentIndex >= this.landmarks.length) this.currentIndex = this.landmarks.length - 1;
+		}
+	}
+	findInsertionIndex(ref) {
+		let low = 0;
+		let high = this.landmarks.length;
+		while (low < high) {
+			const mid = Math.floor((low + high) / 2);
+			if (this.landmarks[mid].ref.compareDocumentPosition(ref) & Node.DOCUMENT_POSITION_FOLLOWING) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	}
+	validateLabels() {
+		const roleGroups = /* @__PURE__ */ new Map();
+		for (const landmark of this.landmarks) {
+			const group = roleGroups.get(landmark.role) || [];
+			group.push(landmark);
+			roleGroups.set(landmark.role, group);
+		}
+		for (const [role, group] of roleGroups) if (group.length > 1) {
+			const labels = group.map((l) => l.label);
+			if (new Set(labels.filter(Boolean)).size < group.length) console.warn(`Multiple landmarks with role "${role}" exist. Each should have a unique aria-label or aria-labelledby.`);
+		}
+	}
+	focusNext() {
+		if (this.landmarks.length === 0) return;
+		const activeElement = document.activeElement;
+		this.currentIndex = this.findCurrentLandmarkIndex(activeElement);
+		this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;
+		this.focusLandmark(this.landmarks[this.currentIndex]);
+	}
+	focusPrevious() {
+		if (this.landmarks.length === 0) return;
+		const activeElement = document.activeElement;
+		this.currentIndex = this.findCurrentLandmarkIndex(activeElement);
+		this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;
+		this.focusLandmark(this.landmarks[this.currentIndex]);
+	}
+	focusMain() {
+		const main = this.landmarks.find((l) => l.role === "main");
+		if (main) this.focusLandmark(main);
+	}
+	navigate(role) {
+		const landmark = this.landmarks.find((l) => l.role === role);
+		if (landmark) this.focusLandmark(landmark);
+	}
+	findCurrentLandmarkIndex(activeElement) {
+		if (!activeElement) return -1;
+		for (let i = 0; i < this.landmarks.length; i++) if (this.landmarks[i].ref.contains(activeElement)) {
+			if (activeElement instanceof HTMLElement) this.landmarks[i].lastFocused = activeElement;
+			return i;
+		}
+		return -1;
+	}
+	focusLandmark(landmark) {
+		if (landmark.focus) {
+			landmark.focus();
+			return;
+		}
+		if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {
+			landmark.lastFocused.focus();
+			return;
+		}
+		const focusable = this.findFirstFocusable(landmark.ref);
+		if (focusable) {
+			focusable.focus();
+			return;
+		}
+		if (!landmark.ref.hasAttribute("tabindex")) landmark.ref.setAttribute("tabindex", "-1");
+		landmark.ref.focus();
+	}
+	findFirstFocusable(container) {
+		const focusableSelectors = [
+			"a[href]",
+			"button:not([disabled])",
+			"input:not([disabled])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"[tabindex]:not([tabindex=\"-1\"])"
+		].join(", ");
+		return container.querySelector(focusableSelectors);
+	}
+	getController() {
+		return {
+			focusNext: () => this.focusNext(),
+			focusPrevious: () => this.focusPrevious(),
+			focusMain: () => this.focusMain(),
+			navigate: (role) => this.navigate(role)
+		};
+	}
+};
+let landmarkManager = null;
+function getLandmarkManager() {
+	if (!landmarkManager) landmarkManager = new LandmarkManager();
+	return landmarkManager;
+}
+/**
+* Provides landmark navigation in an application.
+* Call this with a role and label to register a landmark navigable with F6.
+*
+* @example
+* ```tsx
+* function Navigation(props) {
+*   let ref: HTMLElement;
+*   const { landmarkProps } = createLandmark({
+*     role: 'navigation',
+*     'aria-label': 'Main navigation'
+*   });
+*
+*   return (
+*     <nav {...landmarkProps} ref={ref}>
+*       {props.children}
+*     </nav>
+*   );
+* }
+* ```
+*/
+function createLandmark(props, ref) {
+	createEffect(() => {
+		const element = ref();
+		if (!element) return;
+		const p = access(props);
+		const entry = {
+			ref: element,
+			role: p.role,
+			label: p["aria-label"],
+			focus: p.focus
+		};
+		const manager = getLandmarkManager();
+		manager.register(entry);
+		onCleanup(() => {
+			manager.unregister(element);
+		});
+	});
+	const getLandmarkProps = () => {
+		const p = access(props);
+		return {
+			...filterDOMProps(p, { labelable: true }),
+			role: p.role
+		};
+	};
+	return { get landmarkProps() {
+		return getLandmarkProps();
+	} };
+}
+/**
+* Returns a controller for programmatic landmark navigation.
+*
+* @example
+* ```tsx
+* const controller = getLandmarkController();
+* controller.focusMain(); // Focus the main landmark
+* controller.focusNext(); // Focus the next landmark
+* ```
+*/
+function getLandmarkController() {
+	return getLandmarkManager().getController();
+}
+//#endregion
+export { getLandmarkController as n, createLandmark as t };
+
+//# sourceMappingURL=createLandmark.js.map

package/dist/_chunk/createLandmark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLandmark.js","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n */\n\nimport type { JSX, Accessor } from \"solid-js\";\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createEffect(() => {\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    onCleanup(() => {\n      manager.unregister(element);\n    });\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":";;;;;;;AAwEA,IAAM,kBAAN,MAAsB;CACpB,YAAqC,CAAC;CACtC,eAAuB;CACvB,YAAoB;CAEpB,cAAc;EACZ,IAAI,OAAO,WAAW,aACpB,KAAK,eAAe;CAExB;CAEA,iBAAyB;EACvB,IAAI,KAAK,WAAW;EACpB,KAAK,YAAY;EAEjB,OAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,GAAG,IAAI;CACxE;CAEA,cAAsB,OAAsB;EAE1C,IAAI,MAAM,QAAQ,MAAM;GACtB,MAAM,eAAe;GACrB,IAAI,MAAM,UACR,KAAK,cAAc;QAEnB,KAAK,UAAU;EAEnB;CACF;CAEA,SAAS,OAA4B;EAEnC,MAAM,QAAQ,KAAK,mBAAmB,MAAM,GAAG;EAC/C,KAAK,UAAU,OAAO,OAAO,GAAG,KAAK;EAGrC,KAAK,eAAe;CACtB;CAEA,WAAW,KAAwB;EACjC,MAAM,QAAQ,KAAK,UAAU,WAAW,MAAM,EAAE,QAAQ,GAAG;EAC3D,IAAI,UAAU,IAAI;GAChB,KAAK,UAAU,OAAO,OAAO,CAAC;GAE9B,IAAI,KAAK,gBAAgB,KAAK,UAAU,QACtC,KAAK,eAAe,KAAK,UAAU,SAAS;EAEhD;CACF;CAEA,mBAA2B,KAA0B;EAEnD,IAAI,MAAM;EACV,IAAI,OAAO,KAAK,UAAU;EAE1B,OAAO,MAAM,MAAM;GACjB,MAAM,MAAM,KAAK,OAAO,MAAM,QAAQ,CAAC;GAIvC,IAHmB,KAAK,UAAU,IAAI,CAAC,IAAI,wBAAwB,GAGtD,IAAI,KAAK,6BACpB,MAAM,MAAM;QAEZ,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,iBAA+B;EAE7B,MAAM,6BAAa,IAAI,IAAuC;EAC9D,KAAK,MAAM,YAAY,KAAK,WAAW;GACrC,MAAM,QAAQ,WAAW,IAAI,SAAS,IAAI,KAAK,CAAC;GAChD,MAAM,KAAK,QAAQ;GACnB,WAAW,IAAI,SAAS,MAAM,KAAK;EACrC;EAGA,KAAK,MAAM,CAAC,MAAM,UAAU,YAC1B,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,SAAS,MAAM,KAAK,MAAM,EAAE,KAAK;GAEvC,IAAI,IADqB,IAAI,OAAO,OAAO,OAAO,CACnC,CAAC,CAAC,OAAO,MAAM,QAC5B,QAAQ,KACN,iCAAiC,KAAK,kEACxC;EAEJ;CAEJ;CAEA,YAAkB;EAChB,IAAI,KAAK,UAAU,WAAW,GAAG;EAGjC,MAAM,gBAAgB,SAAS;EAC/B,KAAK,eAAe,KAAK,yBAAyB,aAAa;EAG/D,KAAK,gBAAgB,KAAK,eAAe,KAAK,KAAK,UAAU;EAC7D,KAAK,cAAc,KAAK,UAAU,KAAK,aAAa;CACtD;CAEA,gBAAsB;EACpB,IAAI,KAAK,UAAU,WAAW,GAAG;EAGjC,MAAM,gBAAgB,SAAS;EAC/B,KAAK,eAAe,KAAK,yBAAyB,aAAa;EAG/D,KAAK,gBAAgB,KAAK,eAAe,IAAI,KAAK,UAAU,UAAU,KAAK,UAAU;EACrF,KAAK,cAAc,KAAK,UAAU,KAAK,aAAa;CACtD;CAEA,YAAkB;EAChB,MAAM,OAAO,KAAK,UAAU,MAAM,MAAM,EAAE,SAAS,MAAM;EACzD,IAAI,MACF,KAAK,cAAc,IAAI;CAE3B;CAEA,SAAS,MAA8B;EACrC,MAAM,WAAW,KAAK,UAAU,MAAM,MAAM,EAAE,SAAS,IAAI;EAC3D,IAAI,UACF,KAAK,cAAc,QAAQ;CAE/B;CAEA,yBAAiC,eAAuC;EACtE,IAAI,CAAC,eAAe,OAAO;EAG3B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,UAAU,QAAQ,KACzC,IAAI,KAAK,UAAU,EAAE,CAAC,IAAI,SAAS,aAAa,GAAG;GAEjD,IAAI,yBAAyB,aAC3B,KAAK,UAAU,EAAE,CAAC,cAAc;GAElC,OAAO;EACT;EAGF,OAAO;CACT;CAEA,cAAsB,UAA+B;EAEnD,IAAI,SAAS,OAAO;GAClB,SAAS,MAAM;GACf;EACF;EAGA,IAAI,SAAS,eAAe,SAAS,IAAI,SAAS,SAAS,WAAW,GAAG;GACvE,SAAS,YAAY,MAAM;GAC3B;EACF;EAGA,MAAM,YAAY,KAAK,mBAAmB,SAAS,GAAG;EACtD,IAAI,WAAW;GACb,UAAU,MAAM;GAChB;EACF;EAGA,IAAI,CAAC,SAAS,IAAI,aAAa,UAAU,GACvC,SAAS,IAAI,aAAa,YAAY,IAAI;EAE5C,SAAS,IAAI,MAAM;CACrB;CAEA,mBAA2B,WAA4C;EACrE,MAAM,qBAAqB;GACzB;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,IAAI;EAEX,OAAO,UAAU,cAA2B,kBAAkB;CAChE;CAEA,gBAAoC;EAClC,OAAO;GACL,iBAAiB,KAAK,UAAU;GAChC,qBAAqB,KAAK,cAAc;GACxC,iBAAiB,KAAK,UAAU;GAChC,WAAW,SAAS,KAAK,SAAS,IAAI;EACxC;CACF;AACF;AAGA,IAAI,kBAA0C;AAE9C,SAAS,qBAAsC;CAC7C,IAAI,CAAC,iBACH,kBAAkB,IAAI,gBAAgB;CAExC,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,eACd,OACA,KACiB;CAEjB,mBAAmB;EACjB,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,IAAI,OAAO,KAAK;EACtB,MAAM,QAAuB;GAC3B,KAAK;GACL,MAAM,EAAE;GACR,OAAO,EAAE;GACT,OAAO,EAAE;EACX;EAEA,MAAM,UAAU,mBAAmB;EACnC,QAAQ,SAAS,KAAK;EAEtB,gBAAgB;GACd,QAAQ,WAAW,OAAO;EAC5B,CAAC;CACH,CAAC;CAED,MAAM,yBAAgD;EACpD,MAAM,IAAI,OAAO,KAAK;EAGtB,OAAO;GACL,GAHe,eAAe,GAAyC,EAAE,WAAW,KAAK,CAG/E;GACV,MAAM,EAAE;EACV;CACF;CAEA,OAAO,EACL,IAAI,gBAAgB;EAClB,OAAO,iBAAiB;CAC1B,EACF;AACF;;;;;;;;;;;AAYA,SAAgB,wBAA4C;CAC1D,OAAO,mBAAmB,CAAC,CAAC,cAAc;AAC5C"}

package/dist/_chunk/createLandmark.jsx

@@ -0,0 +1,198 @@
+import { i as access } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { createEffect, onCleanup } from "solid-js";
+//#region src/landmark/createLandmark.ts
+/**
+* Manages all registered landmarks and handles F6 keyboard navigation.
+*/
+var LandmarkManager = class {
+	landmarks = [];
+	currentIndex = -1;
+	listening = false;
+	constructor() {
+		if (typeof window !== "undefined") this.startListening();
+	}
+	startListening() {
+		if (this.listening) return;
+		this.listening = true;
+		window.addEventListener("keydown", this.handleKeyDown.bind(this), true);
+	}
+	handleKeyDown(event) {
+		if (event.key === "F6") {
+			event.preventDefault();
+			if (event.shiftKey) this.focusPrevious();
+			else this.focusNext();
+		}
+	}
+	register(entry) {
+		const index = this.findInsertionIndex(entry.ref);
+		this.landmarks.splice(index, 0, entry);
+		this.validateLabels();
+	}
+	unregister(ref) {
+		const index = this.landmarks.findIndex((l) => l.ref === ref);
+		if (index !== -1) {
+			this.landmarks.splice(index, 1);
+			if (this.currentIndex >= this.landmarks.length) this.currentIndex = this.landmarks.length - 1;
+		}
+	}
+	findInsertionIndex(ref) {
+		let low = 0;
+		let high = this.landmarks.length;
+		while (low < high) {
+			const mid = Math.floor((low + high) / 2);
+			if (this.landmarks[mid].ref.compareDocumentPosition(ref) & Node.DOCUMENT_POSITION_FOLLOWING) low = mid + 1;
+			else high = mid;
+		}
+		return low;
+	}
+	validateLabels() {
+		const roleGroups = /* @__PURE__ */ new Map();
+		for (const landmark of this.landmarks) {
+			const group = roleGroups.get(landmark.role) || [];
+			group.push(landmark);
+			roleGroups.set(landmark.role, group);
+		}
+		for (const [role, group] of roleGroups) if (group.length > 1) {
+			const labels = group.map((l) => l.label);
+			if (new Set(labels.filter(Boolean)).size < group.length) console.warn(`Multiple landmarks with role "${role}" exist. Each should have a unique aria-label or aria-labelledby.`);
+		}
+	}
+	focusNext() {
+		if (this.landmarks.length === 0) return;
+		const activeElement = document.activeElement;
+		this.currentIndex = this.findCurrentLandmarkIndex(activeElement);
+		this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;
+		this.focusLandmark(this.landmarks[this.currentIndex]);
+	}
+	focusPrevious() {
+		if (this.landmarks.length === 0) return;
+		const activeElement = document.activeElement;
+		this.currentIndex = this.findCurrentLandmarkIndex(activeElement);
+		this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;
+		this.focusLandmark(this.landmarks[this.currentIndex]);
+	}
+	focusMain() {
+		const main = this.landmarks.find((l) => l.role === "main");
+		if (main) this.focusLandmark(main);
+	}
+	navigate(role) {
+		const landmark = this.landmarks.find((l) => l.role === role);
+		if (landmark) this.focusLandmark(landmark);
+	}
+	findCurrentLandmarkIndex(activeElement) {
+		if (!activeElement) return -1;
+		for (let i = 0; i < this.landmarks.length; i++) if (this.landmarks[i].ref.contains(activeElement)) {
+			if (activeElement instanceof HTMLElement) this.landmarks[i].lastFocused = activeElement;
+			return i;
+		}
+		return -1;
+	}
+	focusLandmark(landmark) {
+		if (landmark.focus) {
+			landmark.focus();
+			return;
+		}
+		if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {
+			landmark.lastFocused.focus();
+			return;
+		}
+		const focusable = this.findFirstFocusable(landmark.ref);
+		if (focusable) {
+			focusable.focus();
+			return;
+		}
+		if (!landmark.ref.hasAttribute("tabindex")) landmark.ref.setAttribute("tabindex", "-1");
+		landmark.ref.focus();
+	}
+	findFirstFocusable(container) {
+		const focusableSelectors = [
+			"a[href]",
+			"button:not([disabled])",
+			"input:not([disabled])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"[tabindex]:not([tabindex=\"-1\"])"
+		].join(", ");
+		return container.querySelector(focusableSelectors);
+	}
+	getController() {
+		return {
+			focusNext: () => this.focusNext(),
+			focusPrevious: () => this.focusPrevious(),
+			focusMain: () => this.focusMain(),
+			navigate: (role) => this.navigate(role)
+		};
+	}
+};
+let landmarkManager = null;
+function getLandmarkManager() {
+	if (!landmarkManager) landmarkManager = new LandmarkManager();
+	return landmarkManager;
+}
+/**
+* Provides landmark navigation in an application.
+* Call this with a role and label to register a landmark navigable with F6.
+*
+* @example
+* ```tsx
+* function Navigation(props) {
+*   let ref: HTMLElement;
+*   const { landmarkProps } = createLandmark({
+*     role: 'navigation',
+*     'aria-label': 'Main navigation'
+*   });
+*
+*   return (
+*     <nav {...landmarkProps} ref={ref}>
+*       {props.children}
+*     </nav>
+*   );
+* }
+* ```
+*/
+function createLandmark(props, ref) {
+	createEffect(() => {
+		const element = ref();
+		if (!element) return;
+		const p = access(props);
+		const entry = {
+			ref: element,
+			role: p.role,
+			label: p["aria-label"],
+			focus: p.focus
+		};
+		const manager = getLandmarkManager();
+		manager.register(entry);
+		onCleanup(() => {
+			manager.unregister(element);
+		});
+	});
+	const getLandmarkProps = () => {
+		const p = access(props);
+		return {
+			...filterDOMProps(p, { labelable: true }),
+			role: p.role
+		};
+	};
+	return { get landmarkProps() {
+		return getLandmarkProps();
+	} };
+}
+/**
+* Returns a controller for programmatic landmark navigation.
+*
+* @example
+* ```tsx
+* const controller = getLandmarkController();
+* controller.focusMain(); // Focus the main landmark
+* controller.focusNext(); // Focus the next landmark
+* ```
+*/
+function getLandmarkController() {
+	return getLandmarkManager().getController();
+}
+//#endregion
+export { getLandmarkController as n, createLandmark as t };
+
+//# sourceMappingURL=createLandmark.jsx.map

package/dist/_chunk/createLandmark.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLandmark.jsx","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n */\n\nimport type { JSX, Accessor } from \"solid-js\";\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createEffect(() => {\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    onCleanup(() => {\n      manager.unregister(element);\n    });\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":"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"}