@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/dist/_chunk/actiongroup.jsx

@@ -1,8 +1,8 @@
-import { o as mergeProps } from "./env.jsx";
+import { i as mergeProps$1 } from "./env.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { a as getEventTarget, p as isFocusable, t as focusSafely, y as nodeContains } from "./focus.jsx";
 import { i as createButton } from "./button.jsx";
-import { a as useLocale } from "./createCollator.jsx";
+import { i as useLocale } from "./locale.jsx";
 import { onCleanup } from "solid-js";
 //#region src/actiongroup/createActionGroup.ts
 const actionGroupData = /* @__PURE__ */ new WeakMap();
@@ -47,85 +47,36 @@ function createActionGroup(props, state, _ref) {
 	const focusRelative = (root, direction) => {
 		const focusables = getFocusableItems(root);
 		if (focusables.length === 0) return null;
-		if (direction === "first") {
-			const first = focusables[0];
-			focusSafely(first);
-			return first;
-		}
-		if (direction === "last") {
-			const last = focusables[focusables.length - 1];
-			focusSafely(last);
-			return last;
-		}
 		const active = root.ownerDocument.activeElement;
 		const currentIndex = active ? focusables.indexOf(active) : -1;
 		const next = focusables[currentIndex === -1 ? direction === "next" ? 0 : focusables.length - 1 : (currentIndex + (direction === "next" ? 1 : -1) + focusables.length) % focusables.length];
 		focusSafely(next);
 		return next;
 	};
-	const resolveKeyFromElement = (element) => {
-		if (!element) return null;
-		const keyedElement = element.closest("[data-key]");
-		if (!(keyedElement instanceof HTMLElement)) return null;
-		const rawKey = keyedElement.getAttribute("data-key");
-		if (!rawKey) return null;
-		for (const item of state.collection()) if (String(item.key) === rawKey) return item.key;
-		return null;
-	};
-	const handleFocusMove = (movedTo) => {
-		const key = resolveKeyFromElement(movedTo);
-		if (key == null) return;
-		state.setFocusedKey(key);
-		if (state.selectionMode() === "single") state.replaceSelection(key);
-	};
 	const onKeyDown = (e) => {
 		const root = groupRef;
 		if (!root || isActionGroupDisabled(props, state)) return;
 		if (!nodeContains(e.currentTarget, getEventTarget(e))) return;
-		const isHorizontal = (props.orientation ?? "horizontal") === "horizontal";
-		const isRTL = locale().direction === "rtl" && isHorizontal;
+		const orientation = props.orientation ?? "horizontal";
+		const flipDirection = locale().direction === "rtl" && orientation === "horizontal";
 		switch (e.key) {
 			case "ArrowRight":
 			case "ArrowDown":
-				if (e.key === "ArrowRight" && isHorizontal && isRTL) {
-					e.preventDefault();
-					e.stopPropagation();
-					handleFocusMove(focusRelative(root, "previous"));
-					return;
-				}
-				if (e.key === "ArrowRight" && isHorizontal || e.key === "ArrowDown" && !isHorizontal) {
-					e.preventDefault();
-					e.stopPropagation();
-					handleFocusMove(focusRelative(root, "next"));
-				}
-				return;
-			case "ArrowLeft":
-			case "ArrowUp":
-				if (e.key === "ArrowLeft" && isHorizontal && isRTL) {
-					e.preventDefault();
-					e.stopPropagation();
-					handleFocusMove(focusRelative(root, "next"));
-					return;
-				}
-				if (e.key === "ArrowLeft" && isHorizontal || e.key === "ArrowUp" && !isHorizontal) {
-					e.preventDefault();
-					e.stopPropagation();
-					handleFocusMove(focusRelative(root, "previous"));
-				}
-				return;
-			case "Home":
 				e.preventDefault();
 				e.stopPropagation();
-				handleFocusMove(focusRelative(root, "first"));
+				if (e.key === "ArrowRight" && flipDirection) focusRelative(root, "previous");
+				else focusRelative(root, "next");
 				return;
-			case "End":
+			case "ArrowLeft":
+			case "ArrowUp":
 				e.preventDefault();
 				e.stopPropagation();
-				handleFocusMove(focusRelative(root, "last"));
+				if (e.key === "ArrowLeft" && flipDirection) focusRelative(root, "next");
+				else focusRelative(root, "previous");
 				return;
 		}
 	};
-	const actionGroupProps = mergeProps(filterDOMProps(props, { labelable: true }), {
+	const actionGroupProps = mergeProps$1(filterDOMProps(props, { labelable: true }), {
 		ref: (el) => {
 			groupRef = el;
 			applyRoleAttributes();
@@ -164,24 +115,10 @@ function createActionGroupItem(props, state) {
 		}
 	});
 	const isFocused = () => props.key === state.focusedKey();
-	const getFirstEnabledKey = () => {
-		const collection = state.collection();
-		let key = collection.getFirstKey();
-		while (key != null && state.isDisabled(key)) key = collection.getKeyAfter(key);
-		return key;
-	};
-	const getDefaultTabStopKey = () => {
-		if (state.selectionMode() !== "none") {
-			const selectedKeys = state.selectedKeys();
-			if (selectedKeys === "all") return getFirstEnabledKey();
-			for (const item of state.collection()) if (!state.isDisabled(item.key) && selectedKeys.has(item.key)) return item.key;
-		}
-		return getFirstEnabledKey();
-	};
 	onCleanup(() => {
 		if (isFocused()) state.setFocusedKey(null);
 	});
-	return { buttonProps: mergeProps(button.buttonProps, {
+	return { buttonProps: mergeProps$1(button.buttonProps, {
 		get role() {
 			return ITEM_ROLE_BY_MODE[state.selectionMode()];
 		},
@@ -190,10 +127,7 @@ function createActionGroupItem(props, state) {
 			return state.isSelected(props.key);
 		},
 		get tabIndex() {
-			if (state.isDisabled(props.key)) return -1;
-			if (isFocused()) return 0;
-			if (state.focusedKey() != null) return -1;
-			return getDefaultTabStopKey() === props.key ? 0 : -1;
+			return isFocused() || state.focusedKey() == null ? 0 : -1;
 		},
 		"data-key": String(props.key),
 		onFocus: () => {

package/dist/_chunk/actiongroup.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"actiongroup.jsx","names":[],"sources":["../../src/actiongroup/createActionGroup.ts"],"sourcesContent":["import { onCleanup, type JSX, type Accessor } from \"solid-js\";\nimport { createButton } from \"../button\";\nimport {\n  filterDOMProps,\n  getEventTarget,\n  mergeProps,\n  nodeContains,\n  isFocusable,\n  focusSafely,\n} from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport type { Orientation } from \"../toolbar\";\nimport type { Key, ListState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaActionGroupProps<T = unknown> {\n  /** List items (optional, parity with React Aria prop shape). */\n  items?: T[];\n  /** Whether the whole action group is disabled. */\n  isDisabled?: boolean;\n  /** Group orientation. */\n  orientation?: Orientation;\n  /** Accessible label. */\n  \"aria-label\"?: string;\n  /** Labelled-by id. */\n  \"aria-labelledby\"?: string;\n  /** Handler called when an item action is triggered. */\n  onAction?: (key: Key) => void;\n}\n\nexport interface ActionGroupAria {\n  actionGroupProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nexport interface AriaActionGroupItemProps {\n  key: Key;\n}\n\nexport interface ActionGroupItemAria {\n  buttonProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\ninterface ActionGroupData {\n  onAction?: (key: Key) => void;\n}\n\nconst actionGroupData = new WeakMap<object, ActionGroupData>();\n\nconst GROUP_ROLE_BY_MODE = {\n  none: \"toolbar\",\n  single: \"radiogroup\",\n  multiple: \"toolbar\",\n} as const;\n\nconst ITEM_ROLE_BY_MODE = {\n  none: undefined,\n  single: \"radio\",\n  multiple: \"checkbox\",\n} as const;\n\nfunction isActionGroupDisabled<T>(props: AriaActionGroupProps<T>, state: ListState<T>): boolean {\n  if (props.isDisabled) return true;\n  const keys = [...state.collection().getKeys()];\n  if (keys.length === 0) return true;\n  return !keys.some((key) => !state.isDisabled(key));\n}\n\nexport function createActionGroup<T>(\n  props: AriaActionGroupProps<T>,\n  state: ListState<T>,\n  _ref?: Accessor<HTMLElement | null>,\n): ActionGroupAria {\n  const locale = useLocale();\n  let groupRef: HTMLElement | undefined;\n  const applyRoleAttributes = (): void => {\n    if (!groupRef) return;\n    const selectionMode = state.selectionMode();\n    const mappedRole = GROUP_ROLE_BY_MODE[selectionMode];\n    const nestedToolbar = Boolean(groupRef.parentElement?.closest('[role=\"toolbar\"]'));\n    const role = mappedRole === \"toolbar\" && nestedToolbar ? \"group\" : mappedRole;\n    groupRef.setAttribute(\"role\", role);\n    if (mappedRole === \"toolbar\" && !nestedToolbar) {\n      groupRef.setAttribute(\"aria-orientation\", props.orientation ?? \"horizontal\");\n    } else {\n      groupRef.removeAttribute(\"aria-orientation\");\n    }\n  };\n\n  const getFocusableItems = (root: HTMLElement): HTMLElement[] => {\n    const out: HTMLElement[] = [];\n    const pushIfFocusable = (el: Element | null | undefined): void => {\n      if (!el || !(el instanceof HTMLElement)) return;\n      if (isFocusable(el) && el.getAttribute(\"aria-disabled\") !== \"true\") {\n        out.push(el);\n      }\n    };\n\n    pushIfFocusable(root);\n    for (const node of root.querySelectorAll(\"*\")) {\n      pushIfFocusable(node);\n    }\n    return out;\n  };\n\n  const focusRelative = (\n    root: HTMLElement,\n    direction: \"next\" | \"previous\" | \"first\" | \"last\",\n  ): HTMLElement | null => {\n    const focusables = getFocusableItems(root);\n    if (focusables.length === 0) return null;\n\n    if (direction === \"first\") {\n      const first = focusables[0];\n      focusSafely(first);\n      return first;\n    }\n\n    if (direction === \"last\") {\n      const last = focusables[focusables.length - 1];\n      focusSafely(last);\n      return last;\n    }\n\n    const active = root.ownerDocument.activeElement as HTMLElement | null;\n    const currentIndex = active ? focusables.indexOf(active) : -1;\n    const delta = direction === \"next\" ? 1 : -1;\n    const nextIndex =\n      currentIndex === -1\n        ? direction === \"next\"\n          ? 0\n          : focusables.length - 1\n        : (currentIndex + delta + focusables.length) % focusables.length;\n    const next = focusables[nextIndex];\n    focusSafely(next);\n    return next;\n  };\n\n  const resolveKeyFromElement = (element: HTMLElement | null): Key | null => {\n    if (!element) return null;\n    const keyedElement = element.closest(\"[data-key]\");\n    if (!(keyedElement instanceof HTMLElement)) return null;\n    const rawKey = keyedElement.getAttribute(\"data-key\");\n    if (!rawKey) return null;\n    for (const item of state.collection()) {\n      if (String(item.key) === rawKey) {\n        return item.key;\n      }\n    }\n    return null;\n  };\n\n  const handleFocusMove = (movedTo: HTMLElement | null): void => {\n    const key = resolveKeyFromElement(movedTo);\n    if (key == null) return;\n    state.setFocusedKey(key);\n    if (state.selectionMode() === \"single\") {\n      state.replaceSelection(key);\n    }\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    const root = groupRef;\n    if (!root || isActionGroupDisabled(props, state)) return;\n    if (!nodeContains(e.currentTarget, getEventTarget(e))) return;\n\n    const orientation = props.orientation ?? \"horizontal\";\n    const isHorizontal = orientation === \"horizontal\";\n    const isRTL = locale().direction === \"rtl\" && isHorizontal;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\": {\n        if (e.key === \"ArrowRight\" && isHorizontal && isRTL) {\n          e.preventDefault();\n          e.stopPropagation();\n          handleFocusMove(focusRelative(root, \"previous\"));\n          return;\n        }\n        if ((e.key === \"ArrowRight\" && isHorizontal) || (e.key === \"ArrowDown\" && !isHorizontal)) {\n          e.preventDefault();\n          e.stopPropagation();\n          handleFocusMove(focusRelative(root, \"next\"));\n        }\n        return;\n      }\n      case \"ArrowLeft\":\n      case \"ArrowUp\": {\n        if (e.key === \"ArrowLeft\" && isHorizontal && isRTL) {\n          e.preventDefault();\n          e.stopPropagation();\n          handleFocusMove(focusRelative(root, \"next\"));\n          return;\n        }\n        if ((e.key === \"ArrowLeft\" && isHorizontal) || (e.key === \"ArrowUp\" && !isHorizontal)) {\n          e.preventDefault();\n          e.stopPropagation();\n          handleFocusMove(focusRelative(root, \"previous\"));\n        }\n        return;\n      }\n      case \"Home\": {\n        e.preventDefault();\n        e.stopPropagation();\n        handleFocusMove(focusRelative(root, \"first\"));\n        return;\n      }\n      case \"End\": {\n        e.preventDefault();\n        e.stopPropagation();\n        handleFocusMove(focusRelative(root, \"last\"));\n        return;\n      }\n    }\n  };\n\n  const actionGroupProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(\n    filterDOMProps(props as Record<string, unknown>, { labelable: true }),\n    {\n      ref: (el: HTMLElement) => {\n        groupRef = el;\n        applyRoleAttributes();\n        queueMicrotask(() => {\n          if (!groupRef) return;\n          applyRoleAttributes();\n        });\n      },\n      onKeyDown,\n      get \"aria-label\"() {\n        return props[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return props[\"aria-label\"] ? undefined : props[\"aria-labelledby\"];\n      },\n      get \"aria-disabled\"() {\n        return isActionGroupDisabled(props, state) || undefined;\n      },\n    },\n  );\n\n  actionGroupData.set(state, {\n    get onAction() {\n      return props.onAction;\n    },\n  });\n\n  onCleanup(() => {\n    actionGroupData.delete(state);\n  });\n\n  return { actionGroupProps };\n}\n\nexport function createActionGroupItem<T>(\n  props: AriaActionGroupItemProps,\n  state: ListState<T>,\n): ActionGroupItemAria {\n  const button = createButton({\n    elementType: \"button\",\n    isDisabled: state.isDisabled(props.key),\n    onPress: () => {\n      state.setFocusedKey(props.key);\n      actionGroupData.get(state)?.onAction?.(props.key);\n      if (state.selectionMode() !== \"none\") {\n        state.select(props.key);\n      }\n    },\n  });\n\n  const isFocused = () => props.key === state.focusedKey();\n  const getFirstEnabledKey = (): Key | null => {\n    const collection = state.collection();\n    let key = collection.getFirstKey();\n    while (key != null && state.isDisabled(key)) {\n      key = collection.getKeyAfter(key);\n    }\n    return key;\n  };\n\n  const getDefaultTabStopKey = (): Key | null => {\n    const selectionMode = state.selectionMode();\n    if (selectionMode !== \"none\") {\n      const selectedKeys = state.selectedKeys();\n      if (selectedKeys === \"all\") {\n        return getFirstEnabledKey();\n      }\n\n      for (const item of state.collection()) {\n        if (!state.isDisabled(item.key) && selectedKeys.has(item.key)) {\n          return item.key;\n        }\n      }\n    }\n\n    return getFirstEnabledKey();\n  };\n\n  onCleanup(() => {\n    if (isFocused()) {\n      state.setFocusedKey(null);\n    }\n  });\n\n  const buttonProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(button.buttonProps, {\n    get role() {\n      return ITEM_ROLE_BY_MODE[state.selectionMode()];\n    },\n    get \"aria-checked\"() {\n      const mode = state.selectionMode();\n      if (mode === \"none\") return undefined;\n      return state.isSelected(props.key);\n    },\n    get tabIndex() {\n      if (state.isDisabled(props.key)) {\n        return -1;\n      }\n\n      if (isFocused()) {\n        return 0;\n      }\n\n      if (state.focusedKey() != null) {\n        return -1;\n      }\n\n      const defaultTabStopKey = getDefaultTabStopKey();\n      return defaultTabStopKey === props.key ? 0 : -1;\n    },\n    \"data-key\": String(props.key),\n    onFocus: () => {\n      state.setFocusedKey(props.key);\n    },\n  });\n\n  return { buttonProps };\n}\n"],"mappings":";;;;;;;AA6CA,MAAM,kCAAkB,IAAI,QAAiC;AAE7D,MAAM,qBAAqB;CACzB,MAAM;CACN,QAAQ;CACR,UAAU;AACZ;AAEA,MAAM,oBAAoB;CACxB,MAAM,KAAA;CACN,QAAQ;CACR,UAAU;AACZ;AAEA,SAAS,sBAAyB,OAAgC,OAA8B;CAC9F,IAAI,MAAM,YAAY,OAAO;CAC7B,MAAM,OAAO,CAAC,GAAG,MAAM,WAAW,CAAC,CAAC,QAAQ,CAAC;CAC7C,IAAI,KAAK,WAAW,GAAG,OAAO;CAC9B,OAAO,CAAC,KAAK,MAAM,QAAQ,CAAC,MAAM,WAAW,GAAG,CAAC;AACnD;AAEA,SAAgB,kBACd,OACA,OACA,MACiB;CACjB,MAAM,SAAS,UAAU;CACzB,IAAI;CACJ,MAAM,4BAAkC;EACtC,IAAI,CAAC,UAAU;EAEf,MAAM,aAAa,mBADG,MAAM,cACsB;EAClD,MAAM,gBAAgB,QAAQ,SAAS,eAAe,QAAQ,oBAAkB,CAAC;EACjF,MAAM,OAAO,eAAe,aAAa,gBAAgB,UAAU;EACnE,SAAS,aAAa,QAAQ,IAAI;EAClC,IAAI,eAAe,aAAa,CAAC,eAC/B,SAAS,aAAa,oBAAoB,MAAM,eAAe,YAAY;OAE3E,SAAS,gBAAgB,kBAAkB;CAE/C;CAEA,MAAM,qBAAqB,SAAqC;EAC9D,MAAM,MAAqB,CAAC;EAC5B,MAAM,mBAAmB,OAAyC;GAChE,IAAI,CAAC,MAAM,EAAE,cAAc,cAAc;GACzC,IAAI,YAAY,EAAE,KAAK,GAAG,aAAa,eAAe,MAAM,QAC1D,IAAI,KAAK,EAAE;EAEf;EAEA,gBAAgB,IAAI;EACpB,KAAK,MAAM,QAAQ,KAAK,iBAAiB,GAAG,GAC1C,gBAAgB,IAAI;EAEtB,OAAO;CACT;CAEA,MAAM,iBACJ,MACA,cACuB;EACvB,MAAM,aAAa,kBAAkB,IAAI;EACzC,IAAI,WAAW,WAAW,GAAG,OAAO;EAEpC,IAAI,cAAc,SAAS;GACzB,MAAM,QAAQ,WAAW;GACzB,YAAY,KAAK;GACjB,OAAO;EACT;EAEA,IAAI,cAAc,QAAQ;GACxB,MAAM,OAAO,WAAW,WAAW,SAAS;GAC5C,YAAY,IAAI;GAChB,OAAO;EACT;EAEA,MAAM,SAAS,KAAK,cAAc;EAClC,MAAM,eAAe,SAAS,WAAW,QAAQ,MAAM,IAAI;EAQ3D,MAAM,OAAO,WALX,iBAAiB,KACb,cAAc,SACZ,IACA,WAAW,SAAS,KACrB,gBANO,cAAc,SAAS,IAAI,MAMX,WAAW,UAAU,WAAW;EAE9D,YAAY,IAAI;EAChB,OAAO;CACT;CAEA,MAAM,yBAAyB,YAA4C;EACzE,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,eAAe,QAAQ,QAAQ,YAAY;EACjD,IAAI,EAAE,wBAAwB,cAAc,OAAO;EACnD,MAAM,SAAS,aAAa,aAAa,UAAU;EACnD,IAAI,CAAC,QAAQ,OAAO;EACpB,KAAK,MAAM,QAAQ,MAAM,WAAW,GAClC,IAAI,OAAO,KAAK,GAAG,MAAM,QACvB,OAAO,KAAK;EAGhB,OAAO;CACT;CAEA,MAAM,mBAAmB,YAAsC;EAC7D,MAAM,MAAM,sBAAsB,OAAO;EACzC,IAAI,OAAO,MAAM;EACjB,MAAM,cAAc,GAAG;EACvB,IAAI,MAAM,cAAc,MAAM,UAC5B,MAAM,iBAAiB,GAAG;CAE9B;CAEA,MAAM,aAA2D,MAAM;EACrE,MAAM,OAAO;EACb,IAAI,CAAC,QAAQ,sBAAsB,OAAO,KAAK,GAAG;EAClD,IAAI,CAAC,aAAa,EAAE,eAAe,eAAe,CAAC,CAAC,GAAG;EAGvD,MAAM,gBADc,MAAM,eAAe,kBACJ;EACrC,MAAM,QAAQ,OAAO,CAAC,CAAC,cAAc,SAAS;EAE9C,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,IAAI,EAAE,QAAQ,gBAAgB,gBAAgB,OAAO;KACnD,EAAE,eAAe;KACjB,EAAE,gBAAgB;KAClB,gBAAgB,cAAc,MAAM,UAAU,CAAC;KAC/C;IACF;IACA,IAAK,EAAE,QAAQ,gBAAgB,gBAAkB,EAAE,QAAQ,eAAe,CAAC,cAAe;KACxF,EAAE,eAAe;KACjB,EAAE,gBAAgB;KAClB,gBAAgB,cAAc,MAAM,MAAM,CAAC;IAC7C;IACA;GAEF,KAAK;GACL,KAAK;IACH,IAAI,EAAE,QAAQ,eAAe,gBAAgB,OAAO;KAClD,EAAE,eAAe;KACjB,EAAE,gBAAgB;KAClB,gBAAgB,cAAc,MAAM,MAAM,CAAC;KAC3C;IACF;IACA,IAAK,EAAE,QAAQ,eAAe,gBAAkB,EAAE,QAAQ,aAAa,CAAC,cAAe;KACrF,EAAE,eAAe;KACjB,EAAE,gBAAgB;KAClB,gBAAgB,cAAc,MAAM,UAAU,CAAC;IACjD;IACA;GAEF,KAAK;IACH,EAAE,eAAe;IACjB,EAAE,gBAAgB;IAClB,gBAAgB,cAAc,MAAM,OAAO,CAAC;IAC5C;GAEF,KAAK;IACH,EAAE,eAAe;IACjB,EAAE,gBAAgB;IAClB,gBAAgB,cAAc,MAAM,MAAM,CAAC;IAC3C;EAEJ;CACF;CAEA,MAAM,mBAAoD,WACxD,eAAe,OAAkC,EAAE,WAAW,KAAK,CAAC,GACpE;EACE,MAAM,OAAoB;GACxB,WAAW;GACX,oBAAoB;GACpB,qBAAqB;IACnB,IAAI,CAAC,UAAU;IACf,oBAAoB;GACtB,CAAC;EACH;EACA;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM,gBAAgB,KAAA,IAAY,MAAM;EACjD;EACA,IAAI,kBAAkB;GACpB,OAAO,sBAAsB,OAAO,KAAK,KAAK,KAAA;EAChD;CACF,CACF;CAEA,gBAAgB,IAAI,OAAO,EACzB,IAAI,WAAW;EACb,OAAO,MAAM;CACf,EACF,CAAC;CAED,gBAAgB;EACd,gBAAgB,OAAO,KAAK;CAC9B,CAAC;CAED,OAAO,EAAE,iBAAiB;AAC5B;AAEA,SAAgB,sBACd,OACA,OACqB;CACrB,MAAM,SAAS,aAAa;EAC1B,aAAa;EACb,YAAY,MAAM,WAAW,MAAM,GAAG;EACtC,eAAe;GACb,MAAM,cAAc,MAAM,GAAG;GAC7B,gBAAgB,IAAI,KAAK,CAAC,EAAE,WAAW,MAAM,GAAG;GAChD,IAAI,MAAM,cAAc,MAAM,QAC5B,MAAM,OAAO,MAAM,GAAG;EAE1B;CACF,CAAC;CAED,MAAM,kBAAkB,MAAM,QAAQ,MAAM,WAAW;CACvD,MAAM,2BAAuC;EAC3C,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,MAAM,WAAW,YAAY;EACjC,OAAO,OAAO,QAAQ,MAAM,WAAW,GAAG,GACxC,MAAM,WAAW,YAAY,GAAG;EAElC,OAAO;CACT;CAEA,MAAM,6BAAyC;EAE7C,IADsB,MAAM,cACZ,MAAM,QAAQ;GAC5B,MAAM,eAAe,MAAM,aAAa;GACxC,IAAI,iBAAiB,OACnB,OAAO,mBAAmB;GAG5B,KAAK,MAAM,QAAQ,MAAM,WAAW,GAClC,IAAI,CAAC,MAAM,WAAW,KAAK,GAAG,KAAK,aAAa,IAAI,KAAK,GAAG,GAC1D,OAAO,KAAK;EAGlB;EAEA,OAAO,mBAAmB;CAC5B;CAEA,gBAAgB;EACd,IAAI,UAAU,GACZ,MAAM,cAAc,IAAI;CAE5B,CAAC;CAiCD,OAAO,EAAE,aA/B4C,WAAW,OAAO,aAAa;EAClF,IAAI,OAAO;GACT,OAAO,kBAAkB,MAAM,cAAc;EAC/C;EACA,IAAI,iBAAiB;GAEnB,IADa,MAAM,cACZ,MAAM,QAAQ,OAAO,KAAA;GAC5B,OAAO,MAAM,WAAW,MAAM,GAAG;EACnC;EACA,IAAI,WAAW;GACb,IAAI,MAAM,WAAW,MAAM,GAAG,GAC5B,OAAO;GAGT,IAAI,UAAU,GACZ,OAAO;GAGT,IAAI,MAAM,WAAW,KAAK,MACxB,OAAO;GAIT,OAD0B,qBACH,MAAM,MAAM,MAAM,IAAI;EAC/C;EACA,YAAY,OAAO,MAAM,GAAG;EAC5B,eAAe;GACb,MAAM,cAAc,MAAM,GAAG;EAC/B;CACF,CAEmB,EAAE;AACvB"}
+{"version":3,"file":"actiongroup.jsx","names":["mergeProps"],"sources":["../../src/actiongroup/createActionGroup.ts"],"sourcesContent":["import { onCleanup, type JSX, type Accessor } from \"solid-js\";\nimport { createButton } from \"../button\";\nimport {\n  filterDOMProps,\n  getEventTarget,\n  mergeProps,\n  nodeContains,\n  isFocusable,\n  focusSafely,\n} from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport type { Orientation } from \"../toolbar\";\nimport type { Key, ListState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaActionGroupProps<T = unknown> {\n  /** List items (optional, parity with React Aria prop shape). */\n  items?: T[];\n  /** Whether the whole action group is disabled. */\n  isDisabled?: boolean;\n  /** Group orientation. */\n  orientation?: Orientation;\n  /** Accessible label. */\n  \"aria-label\"?: string;\n  /** Labelled-by id. */\n  \"aria-labelledby\"?: string;\n  /** Handler called when an item action is triggered. */\n  onAction?: (key: Key) => void;\n}\n\nexport interface ActionGroupAria {\n  actionGroupProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nexport interface AriaActionGroupItemProps {\n  key: Key;\n}\n\nexport interface ActionGroupItemAria {\n  buttonProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\ninterface ActionGroupData {\n  onAction?: (key: Key) => void;\n}\n\nconst actionGroupData = new WeakMap<object, ActionGroupData>();\n\nconst GROUP_ROLE_BY_MODE = {\n  none: \"toolbar\",\n  single: \"radiogroup\",\n  multiple: \"toolbar\",\n} as const;\n\nconst ITEM_ROLE_BY_MODE = {\n  none: undefined,\n  single: \"radio\",\n  multiple: \"checkbox\",\n} as const;\n\nfunction isActionGroupDisabled<T>(props: AriaActionGroupProps<T>, state: ListState<T>): boolean {\n  if (props.isDisabled) return true;\n  const keys = [...state.collection().getKeys()];\n  if (keys.length === 0) return true;\n  return !keys.some((key) => !state.isDisabled(key));\n}\n\nexport function createActionGroup<T>(\n  props: AriaActionGroupProps<T>,\n  state: ListState<T>,\n  _ref?: Accessor<HTMLElement | null>,\n): ActionGroupAria {\n  const locale = useLocale();\n  let groupRef: HTMLElement | undefined;\n  const applyRoleAttributes = (): void => {\n    if (!groupRef) return;\n    const selectionMode = state.selectionMode();\n    const mappedRole = GROUP_ROLE_BY_MODE[selectionMode];\n    const nestedToolbar = Boolean(groupRef.parentElement?.closest('[role=\"toolbar\"]'));\n    const role = mappedRole === \"toolbar\" && nestedToolbar ? \"group\" : mappedRole;\n    groupRef.setAttribute(\"role\", role);\n    if (mappedRole === \"toolbar\" && !nestedToolbar) {\n      groupRef.setAttribute(\"aria-orientation\", props.orientation ?? \"horizontal\");\n    } else {\n      groupRef.removeAttribute(\"aria-orientation\");\n    }\n  };\n\n  const getFocusableItems = (root: HTMLElement): HTMLElement[] => {\n    const out: HTMLElement[] = [];\n    const pushIfFocusable = (el: Element | null | undefined): void => {\n      if (!el || !(el instanceof HTMLElement)) return;\n      if (isFocusable(el) && el.getAttribute(\"aria-disabled\") !== \"true\") {\n        out.push(el);\n      }\n    };\n\n    pushIfFocusable(root);\n    for (const node of root.querySelectorAll(\"*\")) {\n      pushIfFocusable(node);\n    }\n    return out;\n  };\n\n  const focusRelative = (\n    root: HTMLElement,\n    direction: \"next\" | \"previous\",\n  ): HTMLElement | null => {\n    const focusables = getFocusableItems(root);\n    if (focusables.length === 0) return null;\n\n    const active = root.ownerDocument.activeElement as HTMLElement | null;\n    const currentIndex = active ? focusables.indexOf(active) : -1;\n    const delta = direction === \"next\" ? 1 : -1;\n    const nextIndex =\n      currentIndex === -1\n        ? direction === \"next\"\n          ? 0\n          : focusables.length - 1\n        : (currentIndex + delta + focusables.length) % focusables.length;\n    const next = focusables[nextIndex];\n    focusSafely(next);\n    return next;\n  };\n\n  // Mirrors react-aria `useActionGroup.onKeyDown` (3.50.0): only the four arrows\n  // are handled and they are ORIENTATION-AGNOSTIC — ArrowRight/ArrowDown always\n  // move next, ArrowLeft/ArrowUp always move previous (orientation only drives\n  // `aria-orientation`). `flipDirection` swaps ArrowRight/ArrowLeft under RTL for\n  // horizontal groups. No Home/End (they fall through to the browser). Focus\n  // moves via `focusRelative` → `focusSafely` → the item's own `onFocus`, which\n  // sets the focused key — so there is no selection-follows-focus here.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    const root = groupRef;\n    if (!root || isActionGroupDisabled(props, state)) return;\n    if (!nodeContains(e.currentTarget, getEventTarget(e))) return;\n\n    const orientation = props.orientation ?? \"horizontal\";\n    const flipDirection = locale().direction === \"rtl\" && orientation === \"horizontal\";\n\n    switch (e.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\": {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.key === \"ArrowRight\" && flipDirection) {\n          focusRelative(root, \"previous\");\n        } else {\n          focusRelative(root, \"next\");\n        }\n        return;\n      }\n      case \"ArrowLeft\":\n      case \"ArrowUp\": {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.key === \"ArrowLeft\" && flipDirection) {\n          focusRelative(root, \"next\");\n        } else {\n          focusRelative(root, \"previous\");\n        }\n        return;\n      }\n    }\n  };\n\n  const actionGroupProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(\n    filterDOMProps(props as Record<string, unknown>, { labelable: true }),\n    {\n      ref: (el: HTMLElement) => {\n        groupRef = el;\n        applyRoleAttributes();\n        queueMicrotask(() => {\n          if (!groupRef) return;\n          applyRoleAttributes();\n        });\n      },\n      onKeyDown,\n      get \"aria-label\"() {\n        return props[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return props[\"aria-label\"] ? undefined : props[\"aria-labelledby\"];\n      },\n      get \"aria-disabled\"() {\n        return isActionGroupDisabled(props, state) || undefined;\n      },\n    },\n  );\n\n  actionGroupData.set(state, {\n    get onAction() {\n      return props.onAction;\n    },\n  });\n\n  onCleanup(() => {\n    actionGroupData.delete(state);\n  });\n\n  return { actionGroupProps };\n}\n\nexport function createActionGroupItem<T>(\n  props: AriaActionGroupItemProps,\n  state: ListState<T>,\n): ActionGroupItemAria {\n  const button = createButton({\n    elementType: \"button\",\n    isDisabled: state.isDisabled(props.key),\n    onPress: () => {\n      state.setFocusedKey(props.key);\n      actionGroupData.get(state)?.onAction?.(props.key);\n      if (state.selectionMode() !== \"none\") {\n        state.select(props.key);\n      }\n    },\n  });\n\n  const isFocused = () => props.key === state.focusedKey();\n\n  onCleanup(() => {\n    if (isFocused()) {\n      state.setFocusedKey(null);\n    }\n  });\n\n  const buttonProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(button.buttonProps, {\n    get role() {\n      return ITEM_ROLE_BY_MODE[state.selectionMode()];\n    },\n    get \"aria-checked\"() {\n      const mode = state.selectionMode();\n      if (mode === \"none\") return undefined;\n      return state.isSelected(props.key);\n    },\n    // Mirrors react-aria `useActionGroupItem` (3.50.0): every enabled item is\n    // tabbable until focus engages the group, then the roving stop follows the\n    // focused key. There is NO single default tab stop and NO selection bias —\n    // disabled items are made non-tabbable by their native `disabled` attribute\n    // (via createButton), not by this getter.\n    get tabIndex() {\n      return isFocused() || state.focusedKey() == null ? 0 : -1;\n    },\n    \"data-key\": String(props.key),\n    onFocus: () => {\n      state.setFocusedKey(props.key);\n    },\n  });\n\n  return { buttonProps };\n}\n"],"mappings":"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"}

package/dist/_chunk/{live-announcer.js → announce.js}

@@ -204,4 +204,4 @@ function useAnnouncer() {
 //#endregion
 export { useAnnouncer as i, clearAnnouncer as n, destroyAnnouncer as r, announce as t };
 
-//# sourceMappingURL=live-announcer.js.map
+//# sourceMappingURL=announce.js.map

package/dist/_chunk/announce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announce.js","names":[],"sources":["../../src/live-announcer/announce.ts"],"sourcesContent":["/**\n * Live announcer for solidaria\n *\n * Provides functions to make announcements to screen readers using\n * ARIA live regions. Useful for announcing dynamic content changes.\n *\n * Port of react-aria's @react-aria/live-announcer.\n *\n * SSR Safety: All functions are safe to call during SSR. The announcer\n * will only be created when running in the browser.\n */\n\nimport { onCleanup, createEffect } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\n\nexport type Assertiveness = \"assertive\" | \"polite\";\n\nexport type Message = string | { \"aria-labelledby\": string };\n\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\n/**\n * Singleton class that manages live region announcements.\n * Implemented using vanilla DOM for simplicity and framework independence.\n */\nclass LiveAnnouncer {\n  node: HTMLElement | null = null;\n  assertiveLog: HTMLElement | null = null;\n  politeLog: HTMLElement | null = null;\n\n  constructor() {\n    if (typeof document !== \"undefined\") {\n      this.node = document.createElement(\"div\");\n      this.node.dataset.liveAnnouncer = \"true\";\n      // Visually hidden styles\n      Object.assign(this.node.style, {\n        border: \"0\",\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0\",\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      });\n\n      this.assertiveLog = this.createLog(\"assertive\");\n      this.node.appendChild(this.assertiveLog);\n\n      this.politeLog = this.createLog(\"polite\");\n      this.node.appendChild(this.politeLog);\n\n      document.body.prepend(this.node);\n    }\n  }\n\n  isAttached(): boolean {\n    return this.node?.isConnected ?? false;\n  }\n\n  createLog(ariaLive: string): HTMLElement {\n    const node = document.createElement(\"div\");\n    node.setAttribute(\"role\", \"log\");\n    node.setAttribute(\"aria-live\", ariaLive);\n    node.setAttribute(\"aria-relevant\", \"additions\");\n    return node;\n  }\n\n  destroy(): void {\n    if (!this.node) {\n      return;\n    }\n\n    document.body.removeChild(this.node);\n    this.node = null;\n  }\n\n  announce(\n    message: Message,\n    assertiveness: Assertiveness = \"assertive\",\n    timeout: number = LIVEREGION_TIMEOUT_DELAY,\n  ): void {\n    if (!this.node) {\n      return;\n    }\n\n    const node = document.createElement(\"div\");\n    if (typeof message === \"object\") {\n      // To read an aria-labelledby, the element must have an appropriate role, such as img.\n      node.setAttribute(\"role\", \"img\");\n      node.setAttribute(\"aria-labelledby\", message[\"aria-labelledby\"]);\n    } else {\n      node.textContent = message;\n    }\n\n    if (assertiveness === \"assertive\") {\n      this.assertiveLog?.appendChild(node);\n    } else {\n      this.politeLog?.appendChild(node);\n    }\n\n    if (message !== \"\") {\n      setTimeout(() => {\n        node.remove();\n      }, timeout);\n    }\n  }\n\n  clear(assertiveness?: Assertiveness): void {\n    if (!this.node) {\n      return;\n    }\n\n    if ((!assertiveness || assertiveness === \"assertive\") && this.assertiveLog) {\n      this.assertiveLog.innerHTML = \"\";\n    }\n\n    if ((!assertiveness || assertiveness === \"polite\") && this.politeLog) {\n      this.politeLog.innerHTML = \"\";\n    }\n  }\n}\n\nlet liveAnnouncer: LiveAnnouncer | null = null;\n\n/**\n * Announces a message to screen readers using ARIA live regions.\n *\n * @param message - The message to announce, or an object with aria-labelledby\n * @param assertiveness - 'assertive' interrupts, 'polite' waits for a pause\n * @param timeout - How long to keep the message in the DOM (default 7000ms)\n *\n * @example\n * ```tsx\n * // Simple announcement\n * announce('Item added to cart');\n *\n * // Polite announcement (won't interrupt)\n * announce('3 results found', 'polite');\n *\n * // Using aria-labelledby for complex content\n * announce({ 'aria-labelledby': 'my-element-id' });\n * ```\n */\nexport function announce(\n  message: Message,\n  assertiveness: Assertiveness = \"assertive\",\n  timeout: number = LIVEREGION_TIMEOUT_DELAY,\n): void {\n  if (!liveAnnouncer) {\n    liveAnnouncer = new LiveAnnouncer();\n    // Wait for the live announcer regions to be added to the DOM, then announce.\n    // Otherwise Safari won't announce the message if it's added too quickly.\n    // Found most times less than 100ms were not consistent when announcing with Safari.\n\n    // Check for test environment\n    const isTestEnv =\n      typeof (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST === \"boolean\"\n        ? (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST\n        : typeof (globalThis as Record<string, unknown>).vitest !== \"undefined\";\n\n    if (!isTestEnv) {\n      setTimeout(() => {\n        if (liveAnnouncer?.isAttached()) {\n          liveAnnouncer?.announce(message, assertiveness, timeout);\n        }\n      }, 100);\n    } else {\n      liveAnnouncer.announce(message, assertiveness, timeout);\n    }\n  } else {\n    liveAnnouncer.announce(message, assertiveness, timeout);\n  }\n}\n\n/**\n * Clears all queued announcements for the given assertiveness level.\n *\n * @param assertiveness - Which log to clear ('assertive' or 'polite')\n *\n * @example\n * ```tsx\n * // Clear assertive announcements\n * clearAnnouncer('assertive');\n *\n * // Clear polite announcements\n * clearAnnouncer('polite');\n * ```\n */\nexport function clearAnnouncer(assertiveness?: Assertiveness): void {\n  if (liveAnnouncer) {\n    liveAnnouncer.clear(assertiveness);\n  }\n}\n\n/**\n * Removes the live announcer from the DOM entirely.\n * Call this when unmounting your app or when announcements are no longer needed.\n *\n * @example\n * ```tsx\n * // Clean up on app unmount\n * onCleanup(() => {\n *   destroyAnnouncer();\n * });\n * ```\n */\nexport function destroyAnnouncer(): void {\n  if (liveAnnouncer) {\n    liveAnnouncer.destroy();\n    liveAnnouncer = null;\n  }\n}\n\nexport interface UseAnnouncerResult {\n  /** Announce a message to screen readers. */\n  announce: (message: Message, assertiveness?: Assertiveness, timeout?: number) => void;\n  /** Clear announcements for the given assertiveness level. */\n  clear: (assertiveness?: Assertiveness) => void;\n}\n\n/**\n * Hook that provides access to the live announcer with automatic cleanup.\n *\n * This is the recommended way to use the announcer in SolidJS components.\n * It ensures the announcer is created only on the client and provides\n * type-safe methods for announcing and clearing messages.\n *\n * SSR Safety: Returns no-op functions during SSR. The announcer is only\n * created when the component mounts on the client.\n *\n * @example\n * ```tsx\n * function SearchResults(props) {\n *   const announcer = useAnnouncer();\n *\n *   createEffect(() => {\n *     const count = props.results.length;\n *     announcer.announce(`${count} results found`, 'polite');\n *   });\n *\n *   return <ul>...</ul>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Form() {\n *   const announcer = useAnnouncer();\n *\n *   const onSubmit = async () => {\n *     try {\n *       await submitForm();\n *       announcer.announce('Form submitted successfully');\n *     } catch (error) {\n *       announcer.announce('Error submitting form', 'assertive');\n *     }\n *   };\n *\n *   return <form onSubmit={onSubmit}>...</form>;\n * }\n * ```\n */\nexport function useAnnouncer(): UseAnnouncerResult {\n  // During SSR, return no-op functions\n  if (isServer) {\n    return {\n      announce: () => {},\n      clear: () => {},\n    };\n  }\n\n  // Ensure the announcer is initialized\n  createEffect(() => {\n    // Initialize on first use\n    if (!liveAnnouncer) {\n      liveAnnouncer = new LiveAnnouncer();\n    }\n  });\n\n  return {\n    announce: (\n      message: Message,\n      assertiveness: Assertiveness = \"assertive\",\n      timeout: number = LIVEREGION_TIMEOUT_DELAY,\n    ) => {\n      announce(message, assertiveness, timeout);\n    },\n    clear: (assertiveness?: Assertiveness) => {\n      clearAnnouncer(assertiveness);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/{live-announcer.jsx → announce.jsx}

@@ -204,4 +204,4 @@ function useAnnouncer() {
 //#endregion
 export { useAnnouncer as i, clearAnnouncer as n, destroyAnnouncer as r, announce as t };
 
-//# sourceMappingURL=live-announcer.jsx.map
+//# sourceMappingURL=announce.jsx.map

package/dist/_chunk/announce.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"announce.jsx","names":[],"sources":["../../src/live-announcer/announce.ts"],"sourcesContent":["/**\n * Live announcer for solidaria\n *\n * Provides functions to make announcements to screen readers using\n * ARIA live regions. Useful for announcing dynamic content changes.\n *\n * Port of react-aria's @react-aria/live-announcer.\n *\n * SSR Safety: All functions are safe to call during SSR. The announcer\n * will only be created when running in the browser.\n */\n\nimport { onCleanup, createEffect } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\n\nexport type Assertiveness = \"assertive\" | \"polite\";\n\nexport type Message = string | { \"aria-labelledby\": string };\n\nconst LIVEREGION_TIMEOUT_DELAY = 7000;\n\n/**\n * Singleton class that manages live region announcements.\n * Implemented using vanilla DOM for simplicity and framework independence.\n */\nclass LiveAnnouncer {\n  node: HTMLElement | null = null;\n  assertiveLog: HTMLElement | null = null;\n  politeLog: HTMLElement | null = null;\n\n  constructor() {\n    if (typeof document !== \"undefined\") {\n      this.node = document.createElement(\"div\");\n      this.node.dataset.liveAnnouncer = \"true\";\n      // Visually hidden styles\n      Object.assign(this.node.style, {\n        border: \"0\",\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0\",\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      });\n\n      this.assertiveLog = this.createLog(\"assertive\");\n      this.node.appendChild(this.assertiveLog);\n\n      this.politeLog = this.createLog(\"polite\");\n      this.node.appendChild(this.politeLog);\n\n      document.body.prepend(this.node);\n    }\n  }\n\n  isAttached(): boolean {\n    return this.node?.isConnected ?? false;\n  }\n\n  createLog(ariaLive: string): HTMLElement {\n    const node = document.createElement(\"div\");\n    node.setAttribute(\"role\", \"log\");\n    node.setAttribute(\"aria-live\", ariaLive);\n    node.setAttribute(\"aria-relevant\", \"additions\");\n    return node;\n  }\n\n  destroy(): void {\n    if (!this.node) {\n      return;\n    }\n\n    document.body.removeChild(this.node);\n    this.node = null;\n  }\n\n  announce(\n    message: Message,\n    assertiveness: Assertiveness = \"assertive\",\n    timeout: number = LIVEREGION_TIMEOUT_DELAY,\n  ): void {\n    if (!this.node) {\n      return;\n    }\n\n    const node = document.createElement(\"div\");\n    if (typeof message === \"object\") {\n      // To read an aria-labelledby, the element must have an appropriate role, such as img.\n      node.setAttribute(\"role\", \"img\");\n      node.setAttribute(\"aria-labelledby\", message[\"aria-labelledby\"]);\n    } else {\n      node.textContent = message;\n    }\n\n    if (assertiveness === \"assertive\") {\n      this.assertiveLog?.appendChild(node);\n    } else {\n      this.politeLog?.appendChild(node);\n    }\n\n    if (message !== \"\") {\n      setTimeout(() => {\n        node.remove();\n      }, timeout);\n    }\n  }\n\n  clear(assertiveness?: Assertiveness): void {\n    if (!this.node) {\n      return;\n    }\n\n    if ((!assertiveness || assertiveness === \"assertive\") && this.assertiveLog) {\n      this.assertiveLog.innerHTML = \"\";\n    }\n\n    if ((!assertiveness || assertiveness === \"polite\") && this.politeLog) {\n      this.politeLog.innerHTML = \"\";\n    }\n  }\n}\n\nlet liveAnnouncer: LiveAnnouncer | null = null;\n\n/**\n * Announces a message to screen readers using ARIA live regions.\n *\n * @param message - The message to announce, or an object with aria-labelledby\n * @param assertiveness - 'assertive' interrupts, 'polite' waits for a pause\n * @param timeout - How long to keep the message in the DOM (default 7000ms)\n *\n * @example\n * ```tsx\n * // Simple announcement\n * announce('Item added to cart');\n *\n * // Polite announcement (won't interrupt)\n * announce('3 results found', 'polite');\n *\n * // Using aria-labelledby for complex content\n * announce({ 'aria-labelledby': 'my-element-id' });\n * ```\n */\nexport function announce(\n  message: Message,\n  assertiveness: Assertiveness = \"assertive\",\n  timeout: number = LIVEREGION_TIMEOUT_DELAY,\n): void {\n  if (!liveAnnouncer) {\n    liveAnnouncer = new LiveAnnouncer();\n    // Wait for the live announcer regions to be added to the DOM, then announce.\n    // Otherwise Safari won't announce the message if it's added too quickly.\n    // Found most times less than 100ms were not consistent when announcing with Safari.\n\n    // Check for test environment\n    const isTestEnv =\n      typeof (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST === \"boolean\"\n        ? (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST\n        : typeof (globalThis as Record<string, unknown>).vitest !== \"undefined\";\n\n    if (!isTestEnv) {\n      setTimeout(() => {\n        if (liveAnnouncer?.isAttached()) {\n          liveAnnouncer?.announce(message, assertiveness, timeout);\n        }\n      }, 100);\n    } else {\n      liveAnnouncer.announce(message, assertiveness, timeout);\n    }\n  } else {\n    liveAnnouncer.announce(message, assertiveness, timeout);\n  }\n}\n\n/**\n * Clears all queued announcements for the given assertiveness level.\n *\n * @param assertiveness - Which log to clear ('assertive' or 'polite')\n *\n * @example\n * ```tsx\n * // Clear assertive announcements\n * clearAnnouncer('assertive');\n *\n * // Clear polite announcements\n * clearAnnouncer('polite');\n * ```\n */\nexport function clearAnnouncer(assertiveness?: Assertiveness): void {\n  if (liveAnnouncer) {\n    liveAnnouncer.clear(assertiveness);\n  }\n}\n\n/**\n * Removes the live announcer from the DOM entirely.\n * Call this when unmounting your app or when announcements are no longer needed.\n *\n * @example\n * ```tsx\n * // Clean up on app unmount\n * onCleanup(() => {\n *   destroyAnnouncer();\n * });\n * ```\n */\nexport function destroyAnnouncer(): void {\n  if (liveAnnouncer) {\n    liveAnnouncer.destroy();\n    liveAnnouncer = null;\n  }\n}\n\nexport interface UseAnnouncerResult {\n  /** Announce a message to screen readers. */\n  announce: (message: Message, assertiveness?: Assertiveness, timeout?: number) => void;\n  /** Clear announcements for the given assertiveness level. */\n  clear: (assertiveness?: Assertiveness) => void;\n}\n\n/**\n * Hook that provides access to the live announcer with automatic cleanup.\n *\n * This is the recommended way to use the announcer in SolidJS components.\n * It ensures the announcer is created only on the client and provides\n * type-safe methods for announcing and clearing messages.\n *\n * SSR Safety: Returns no-op functions during SSR. The announcer is only\n * created when the component mounts on the client.\n *\n * @example\n * ```tsx\n * function SearchResults(props) {\n *   const announcer = useAnnouncer();\n *\n *   createEffect(() => {\n *     const count = props.results.length;\n *     announcer.announce(`${count} results found`, 'polite');\n *   });\n *\n *   return <ul>...</ul>;\n * }\n * ```\n *\n * @example\n * ```tsx\n * function Form() {\n *   const announcer = useAnnouncer();\n *\n *   const onSubmit = async () => {\n *     try {\n *       await submitForm();\n *       announcer.announce('Form submitted successfully');\n *     } catch (error) {\n *       announcer.announce('Error submitting form', 'assertive');\n *     }\n *   };\n *\n *   return <form onSubmit={onSubmit}>...</form>;\n * }\n * ```\n */\nexport function useAnnouncer(): UseAnnouncerResult {\n  // During SSR, return no-op functions\n  if (isServer) {\n    return {\n      announce: () => {},\n      clear: () => {},\n    };\n  }\n\n  // Ensure the announcer is initialized\n  createEffect(() => {\n    // Initialize on first use\n    if (!liveAnnouncer) {\n      liveAnnouncer = new LiveAnnouncer();\n    }\n  });\n\n  return {\n    announce: (\n      message: Message,\n      assertiveness: Assertiveness = \"assertive\",\n      timeout: number = LIVEREGION_TIMEOUT_DELAY,\n    ) => {\n      announce(message, assertiveness, timeout);\n    },\n    clear: (assertiveness?: Assertiveness) => {\n      clearAnnouncer(assertiveness);\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/autocomplete.js

@@ -1,4 +1,7 @@
+import { a as getEventTarget, i as getActiveElement } from "./focus.js";
+import { s as getPointerType } from "./createInteractionModality.js";
 import { createId, getOwnerDocument } from "../ssr/index.js";
+import { n as FOCUS_EVENT, t as CLEAR_FOCUS_EVENT } from "./constants.js";
 import { createEffect, createSignal, onCleanup } from "solid-js";
 //#region src/autocomplete/createAutocomplete.ts
 /**
@@ -24,8 +27,10 @@ function toKeyboardEventInit(e) {
 		cancelable: e.cancelable
 	};
 }
-const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
-const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
+/** @deprecated Use {@link FOCUS_EVENT} from the selection layer. */
+const AUTOCOMPLETE_FOCUS_EVENT = FOCUS_EVENT;
+/** @deprecated Use {@link CLEAR_FOCUS_EVENT} from the selection layer. */
+const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = CLEAR_FOCUS_EVENT;
 /**
 * Provides the behavior and accessibility implementation for an autocomplete component.
 * An autocomplete combines a text input with a collection, allowing users to filter
@@ -61,6 +66,10 @@ function createAutocomplete(props, state) {
 	const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);
 	const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);
 	let lastInputType = "";
+	let queuedActiveDescendant = null;
+	let delayNextActiveDescendant = false;
+	let activeDescendantTimeout;
+	const ACTIVE_DESCENDANT_DELAY = 500;
 	const handleBeforeInput = (e) => {
 		lastInputType = e.inputType || "";
 	};
@@ -74,12 +83,13 @@ function createAutocomplete(props, state) {
 		}
 	});
 	const focusFirstItem = () => {
+		delayNextActiveDescendant = true;
 		const collection = collectionRef();
 		if (!collection) {
 			setAutoFocusOnMount(true);
 			return;
 		}
-		collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+		collection.dispatchEvent(new CustomEvent(FOCUS_EVENT, {
 			cancelable: true,
 			bubbles: true,
 			detail: { focusStrategy: "first" }
@@ -87,9 +97,12 @@ function createAutocomplete(props, state) {
 	};
 	const clearVirtualFocus = (clearFocusKey = false) => {
 		setAutoFocusOnMount(false);
+		clearTimeout(activeDescendantTimeout);
+		queuedActiveDescendant = null;
+		delayNextActiveDescendant = false;
 		state.setFocusedNodeId(null);
 		const collection = collectionRef();
-		if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
+		if (collection) collection.dispatchEvent(new CustomEvent(CLEAR_FOCUS_EVENT, {
 			cancelable: true,
 			bubbles: true,
 			detail: { clearFocusKey }
@@ -102,7 +115,7 @@ function createAutocomplete(props, state) {
 	};
 	const onKeyDown = (e) => {
 		if ("isComposing" in e && e.isComposing) return;
-		const focusedNodeId = state.focusedNodeId();
+		const focusedNodeId = queuedActiveDescendant;
 		const collection = collectionRef();
 		const ownerDocument = getOwnerDocument(inputRef() ?? collection);
 		switch (e.key) {
@@ -118,7 +131,7 @@ function createAutocomplete(props, state) {
 			case "PageUp":
 			case "PageDown":
 				e.preventDefault();
-				if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+				if (collection) collection.dispatchEvent(new CustomEvent(FOCUS_EVENT, {
 					cancelable: true,
 					bubbles: true
 				}));
@@ -140,7 +153,7 @@ function createAutocomplete(props, state) {
 				}
 				return;
 		}
-		if (!e.defaultPrevented && collection) {
+		if (collection) {
 			e.stopPropagation();
 			let shouldPerformDefaultAction = true;
 			if (focusedNodeId) {
@@ -160,7 +173,42 @@ function createAutocomplete(props, state) {
 	const onBlur = (e) => {
 		if (!e.isTrusted) return;
 	};
-	const filterFn = filter ? (textValue) => filter(textValue, state.inputValue()) : void 0;
+	const updateActiveDescendant = (e) => {
+		const input = inputRef();
+		if (!e.isTrusted && shouldUseVirtualFocus() && input && getActiveElement(getOwnerDocument(input)) !== input && getPointerType() !== "touch") input.focus();
+		const target = getEventTarget(e);
+		if (e.isTrusted || !target || queuedActiveDescendant === target.id) return;
+		const collection = collectionRef();
+		clearTimeout(activeDescendantTimeout);
+		if (target !== collection) {
+			const targetId = target.id;
+			if (delayNextActiveDescendant) {
+				queuedActiveDescendant = targetId;
+				activeDescendantTimeout = setTimeout(() => {
+					state.setFocusedNodeId(targetId);
+				}, ACTIVE_DESCENDANT_DELAY);
+			} else {
+				queuedActiveDescendant = targetId;
+				state.setFocusedNodeId(targetId);
+			}
+		} else if (queuedActiveDescendant && !getOwnerDocument(collection)?.getElementById(queuedActiveDescendant)) {
+			queuedActiveDescendant = null;
+			state.setFocusedNodeId(null);
+		}
+		delayNextActiveDescendant = false;
+	};
+	createEffect(() => {
+		if (!shouldUseVirtualFocus()) return;
+		const collection = collectionRef();
+		if (collection) {
+			collection.addEventListener("focusin", updateActiveDescendant);
+			onCleanup(() => {
+				collection.removeEventListener("focusin", updateActiveDescendant);
+				clearTimeout(activeDescendantTimeout);
+			});
+		}
+	});
+	const filterFn = filter ? (nodeTextValue, node) => filter(nodeTextValue, state.inputValue(), node) : void 0;
 	return {
 		inputProps: {
 			value: state.inputValue,

package/dist/_chunk/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":["inputEvent"],"sources":["../../src/autocomplete/createAutocomplete.ts"],"sourcesContent":["/**\n * createAutocomplete - Accessibility hook for autocomplete components\n *\n * Provides keyboard navigation, virtual focus via aria-activedescendant,\n * and filtering capabilities for autocomplete inputs.\n *\n * Based on @react-aria/autocomplete useAutocomplete.\n */\n\nimport { createSignal, createEffect, onCleanup, type Accessor } from \"solid-js\";\nimport { createId, getOwnerDocument } from \"../ssr\";\nimport { type AutocompleteState } from \"@proyecto-viviana/solid-stately\";\n\nexport interface CollectionOptions {\n  /** The id of the collection element. */\n  id?: string;\n  /** Accessible label for the collection. */\n  \"aria-label\"?: string;\n  /** Whether the collection items should use virtual focus instead of being focused directly. */\n  shouldUseVirtualFocus: boolean;\n  /** Whether typeahead is disabled. */\n  disallowTypeAhead: boolean;\n  /** Whether and where to focus an item when the collection mounts. */\n  autoFocus?: boolean | \"first\" | \"last\";\n}\n\nexport interface AutocompleteInputProps {\n  /** Current input value. */\n  value: Accessor<string>;\n  /** Handler for input value changes. */\n  onChange: (value: string) => void;\n  /** Handler for key events. */\n  onKeyDown: (e: KeyboardEvent) => void;\n  /** Handler for focus events. */\n  onFocus: (e: FocusEvent) => void;\n  /** Handler for blur events. */\n  onBlur: (e: FocusEvent) => void;\n  /** The id of the currently focused item for aria-activedescendant. */\n  \"aria-activedescendant\": Accessor<string | undefined>;\n  /** The id of the controlled collection. */\n  \"aria-controls\": string;\n  /** Autocomplete type. */\n  \"aria-autocomplete\": \"list\" | \"none\" | \"inline\" | \"both\";\n  /** Enter key hint for mobile keyboards. */\n  enterKeyHint: \"go\";\n  /** Disable autocorrect. */\n  autoCorrect: \"off\";\n  /** Disable spell check. */\n  spellCheck: \"false\";\n  /** Disable browser autocomplete. */\n  autoComplete: \"off\";\n}\n\nexport interface AriaAutocompleteOptions<_T = unknown> {\n  /** Ref accessor for the input element. */\n  inputRef: Accessor<HTMLInputElement | undefined>;\n  /** Ref accessor for the collection element. */\n  collectionRef: Accessor<HTMLElement | undefined>;\n  /** Optional id override for the controlled collection element. */\n  collectionId?: string;\n  /** Optional accessible name for the controlled collection element. */\n  collectionAriaLabel?: string;\n  /**\n   * An optional filter function used to determine if an option should be included.\n   * @param textValue - The text value of the item\n   * @param inputValue - The current input value\n   */\n  filter?: (textValue: string, inputValue: string) => boolean;\n  /**\n   * Whether to focus the first item after filtering.\n   * @default false\n   */\n  disableAutoFocusFirst?: boolean;\n  /**\n   * Whether to disable virtual focus (aria-activedescendant).\n   * @default false\n   */\n  disableVirtualFocus?: boolean;\n}\n\nexport interface AutocompleteAria<_T = unknown> {\n  /** Props for the autocomplete input element. */\n  inputProps: AutocompleteInputProps;\n  /** Props for the collection (ListBox/Menu). */\n  collectionProps: CollectionOptions;\n  /** A filter function that returns if the item should be shown. */\n  filter?: (textValue: string) => boolean;\n}\n\nfunction toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {\n  return {\n    key: e.key,\n    code: e.code,\n    location: e.location,\n    repeat: e.repeat,\n    isComposing: e.isComposing,\n    ctrlKey: e.ctrlKey,\n    shiftKey: e.shiftKey,\n    altKey: e.altKey,\n    metaKey: e.metaKey,\n    bubbles: e.bubbles,\n    cancelable: e.cancelable,\n  };\n}\n\n// Custom event names for collection communication\nexport const AUTOCOMPLETE_FOCUS_EVENT = \"autocomplete:focus\";\nexport const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = \"autocomplete:clearfocus\";\n\n/**\n * Provides the behavior and accessibility implementation for an autocomplete component.\n * An autocomplete combines a text input with a collection, allowing users to filter\n * the collection's contents to match a query.\n *\n * @example\n * ```tsx\n * const state = createAutocompleteState({ defaultInputValue: '' });\n * let inputRef, collectionRef;\n *\n * const { inputProps, collectionProps, filter } = createAutocomplete({\n *   inputRef: () => inputRef,\n *   collectionRef: () => collectionRef,\n *   filter: (textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase()),\n * }, state);\n *\n * return (\n *   <div>\n *     <input ref={inputRef} {...inputProps} />\n *     <ul ref={collectionRef} {...collectionProps}>\n *       {items.filter(item => filter?.(item.name) ?? true).map(item => (\n *         <li key={item.id}>{item.name}</li>\n *       ))}\n *     </ul>\n *   </div>\n * );\n * ```\n */\nexport function createAutocomplete<T = unknown>(\n  props: AriaAutocompleteOptions<T>,\n  state: AutocompleteState,\n): AutocompleteAria<T> {\n  const {\n    inputRef,\n    collectionRef,\n    filter,\n    collectionId: collectionIdProp,\n    collectionAriaLabel,\n    disableAutoFocusFirst = false,\n    disableVirtualFocus = false,\n  } = props;\n\n  const collectionId = collectionIdProp ?? createId();\n  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);\n  // When the first item should be focused but the collection hasn't mounted yet,\n  // defer it by threading autoFocus through collectionProps so the collection\n  // focuses on mount (mirrors upstream's autoFocusOnMount state).\n  const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);\n  let lastInputType = \"\";\n\n  // Track the input type for determining focus behavior. We listen to\n  // `beforeinput` (not `input`) so `lastInputType` is set before the input's\n  // `onChange` runs, mirroring @react-aria/autocomplete.\n  const handleBeforeInput = (e: Event) => {\n    const inputEvent = e as InputEvent;\n    lastInputType = inputEvent.inputType || \"\";\n  };\n\n  // Set up beforeinput event listener\n  createEffect(() => {\n    const input = inputRef();\n    if (input) {\n      input.addEventListener(\"beforeinput\", handleBeforeInput);\n      onCleanup(() => {\n        input.removeEventListener(\"beforeinput\", handleBeforeInput);\n      });\n    }\n  });\n\n  // Focus first item in collection\n  const focusFirstItem = () => {\n    const collection = collectionRef();\n    if (!collection) {\n      // Collection isn't mounted yet — defer focusing the first item to mount\n      // time via collectionProps.autoFocus instead of firing a focus event into\n      // a not-yet-rendered collection.\n      setAutoFocusOnMount(true);\n      return;\n    }\n    collection.dispatchEvent(\n      new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n        cancelable: true,\n        bubbles: true,\n        detail: { focusStrategy: \"first\" },\n      }),\n    );\n  };\n\n  // Clear virtual focus\n  const clearVirtualFocus = (clearFocusKey = false) => {\n    setAutoFocusOnMount(false);\n    state.setFocusedNodeId(null);\n    const collection = collectionRef();\n    if (collection) {\n      collection.dispatchEvent(\n        new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {\n          cancelable: true,\n          bubbles: true,\n          detail: { clearFocusKey },\n        }),\n      );\n    }\n  };\n\n  // Handle input value changes\n  const onChange = (value: string) => {\n    // Focus first item when typing forward, clear when backspacing/pasting.\n    // IME composition (e.g. CJK input) reports 'insertCompositionText'/\n    // 'insertFromComposition' instead of 'insertText'; treat those as forward\n    // typing so the first item still gets virtual focus.\n    if (\n      (lastInputType === \"insertText\" ||\n        lastInputType === \"insertCompositionText\" ||\n        lastInputType === \"insertFromComposition\") &&\n      !disableAutoFocusFirst\n    ) {\n      focusFirstItem();\n    } else if (\n      lastInputType &&\n      (lastInputType.includes(\"insert\") ||\n        lastInputType.includes(\"delete\") ||\n        lastInputType.includes(\"history\"))\n    ) {\n      clearVirtualFocus(true);\n    }\n\n    state.setInputValue(value);\n  };\n\n  // Handle keyboard navigation\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (\"isComposing\" in e && e.isComposing) {\n      return;\n    }\n\n    const focusedNodeId = state.focusedNodeId();\n    const collection = collectionRef();\n    const ownerDocument = getOwnerDocument(inputRef() ?? collection);\n\n    switch (e.key) {\n      case \"Escape\":\n        // Let the input handle Escape (e.g., clear value)\n        if (e.defaultPrevented) {\n          return;\n        }\n        break;\n\n      case \" \":\n        // Space shouldn't trigger item action\n        return;\n\n      case \"Tab\":\n        // Let Tab propagate normally for focus management\n        return;\n\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n      case \"PageUp\":\n      case \"PageDown\": {\n        // Prevent cursor movement in input\n        e.preventDefault();\n\n        // Dispatch focus event to collection\n        if (collection) {\n          collection.dispatchEvent(\n            new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {\n              cancelable: true,\n              bubbles: true,\n            }),\n          );\n        }\n        break;\n      }\n\n      case \"ArrowLeft\":\n      case \"ArrowRight\":\n        // With no virtual focus, just let the arrow move the text cursor; stop\n        // propagation so it doesn't leak into the collection. With virtual focus,\n        // fall through to dispatch the key to the focused item below, then clear\n        // the active descendant only after the item has seen it.\n        if (!focusedNodeId) {\n          e.stopPropagation();\n          return;\n        }\n        break;\n\n      case \"Enter\":\n        // Trigger click on focused item\n        if (focusedNodeId) {\n          const item = ownerDocument?.getElementById(focusedNodeId);\n          if (item) {\n            item.click();\n            e.preventDefault();\n          }\n        }\n        return;\n    }\n\n    // Forward keyboard events to the focused item (or the collection when there\n    // is no virtual focus) so the collection can act on them, e.g. onAction.\n    if (!e.defaultPrevented && collection) {\n      e.stopPropagation();\n\n      let shouldPerformDefaultAction = true;\n      if (focusedNodeId) {\n        const item = ownerDocument?.getElementById(focusedNodeId);\n        if (item) {\n          shouldPerformDefaultAction = item.dispatchEvent(\n            new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n          );\n        }\n      } else {\n        shouldPerformDefaultAction = collection.dispatchEvent(\n          new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n        );\n      }\n\n      // After the focused item has seen ArrowLeft/ArrowRight, clear the active\n      // descendant so SR announcements aren't interrupted, but retain the\n      // collection's focused key so navigation restarts where it left off. If\n      // the item consumed the key (e.g. an expandable row collapsing), it\n      // cancels the event and we keep virtual focus.\n      if (shouldPerformDefaultAction && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) {\n        clearVirtualFocus();\n      }\n    }\n  };\n\n  // Handle focus events\n  const onFocus = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n\n    // Restore virtual focus when refocusing input\n    const focusedNodeId = state.focusedNodeId();\n    if (focusedNodeId) {\n      const item = document.getElementById(focusedNodeId);\n      if (item) {\n        // Item still exists, keep focus on it\n      }\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n    // Virtual focus blur handling would go here\n  };\n\n  // Create filter function\n  const filterFn = filter\n    ? (textValue: string) => filter(textValue, state.inputValue())\n    : undefined;\n\n  return {\n    inputProps: {\n      value: state.inputValue,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      get \"aria-activedescendant\"() {\n        return () => (shouldUseVirtualFocus() ? (state.focusedNodeId() ?? undefined) : undefined);\n      },\n      \"aria-controls\": collectionId,\n      \"aria-autocomplete\": \"list\",\n      enterKeyHint: \"go\",\n      autoCorrect: \"off\",\n      spellCheck: \"false\",\n      autoComplete: \"off\",\n    },\n    collectionProps: {\n      id: collectionId,\n      \"aria-label\": collectionAriaLabel,\n      shouldUseVirtualFocus: shouldUseVirtualFocus(),\n      disallowTypeAhead: shouldUseVirtualFocus(),\n      get autoFocus() {\n        return autoFocusOnMount() ? \"first\" : false;\n      },\n    },\n    filter: filterFn,\n  };\n}\n"],"mappings":";;;;;;;;;;;AAyFA,SAAS,oBAAoB,GAAqC;CAChE,OAAO;EACL,KAAK,EAAE;EACP,MAAM,EAAE;EACR,UAAU,EAAE;EACZ,QAAQ,EAAE;EACV,aAAa,EAAE;EACf,SAAS,EAAE;EACX,UAAU,EAAE;EACZ,QAAQ,EAAE;EACV,SAAS,EAAE;EACX,SAAS,EAAE;EACX,YAAY,EAAE;CAChB;AACF;AAGA,MAAa,2BAA2B;AACxC,MAAa,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+B9C,SAAgB,mBACd,OACA,OACqB;CACrB,MAAM,EACJ,UACA,eACA,QACA,cAAc,kBACd,qBACA,wBAAwB,OACxB,sBAAsB,UACpB;CAEJ,MAAM,eAAe,oBAAoB,SAAS;CAClD,MAAM,CAAC,yBAAyB,aAAa,CAAC,mBAAmB;CAIjE,MAAM,CAAC,kBAAkB,uBAAuB,aAAa,KAAK;CAClE,IAAI,gBAAgB;CAKpB,MAAM,qBAAqB,MAAa;EAEtC,gBAAgBA,EAAW,aAAa;CAC1C;CAGA,mBAAmB;EACjB,MAAM,QAAQ,SAAS;EACvB,IAAI,OAAO;GACT,MAAM,iBAAiB,eAAe,iBAAiB;GACvD,gBAAgB;IACd,MAAM,oBAAoB,eAAe,iBAAiB;GAC5D,CAAC;EACH;CACF,CAAC;CAGD,MAAM,uBAAuB;EAC3B,MAAM,aAAa,cAAc;EACjC,IAAI,CAAC,YAAY;GAIf,oBAAoB,IAAI;GACxB;EACF;EACA,WAAW,cACT,IAAI,YAAY,0BAA0B;GACxC,YAAY;GACZ,SAAS;GACT,QAAQ,EAAE,eAAe,QAAQ;EACnC,CAAC,CACH;CACF;CAGA,MAAM,qBAAqB,gBAAgB,UAAU;EACnD,oBAAoB,KAAK;EACzB,MAAM,iBAAiB,IAAI;EAC3B,MAAM,aAAa,cAAc;EACjC,IAAI,YACF,WAAW,cACT,IAAI,YAAY,gCAAgC;GAC9C,YAAY;GACZ,SAAS;GACT,QAAQ,EAAE,cAAc;EAC1B,CAAC,CACH;CAEJ;CAGA,MAAM,YAAY,UAAkB;EAKlC,KACG,kBAAkB,gBACjB,kBAAkB,2BAClB,kBAAkB,4BACpB,CAAC,uBAED,eAAe;OACV,IACL,kBACC,cAAc,SAAS,QAAQ,KAC9B,cAAc,SAAS,QAAQ,KAC/B,cAAc,SAAS,SAAS,IAElC,kBAAkB,IAAI;EAGxB,MAAM,cAAc,KAAK;CAC3B;CAGA,MAAM,aAAa,MAAqB;EACtC,IAAI,iBAAiB,KAAK,EAAE,aAC1B;EAGF,MAAM,gBAAgB,MAAM,cAAc;EAC1C,MAAM,aAAa,cAAc;EACjC,MAAM,gBAAgB,iBAAiB,SAAS,KAAK,UAAU;EAE/D,QAAQ,EAAE,KAAV;GACE,KAAK;IAEH,IAAI,EAAE,kBACJ;IAEF;GAEF,KAAK,KAEH;GAEF,KAAK,OAEH;GAEF,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;IAEH,EAAE,eAAe;IAGjB,IAAI,YACF,WAAW,cACT,IAAI,YAAY,0BAA0B;KACxC,YAAY;KACZ,SAAS;IACX,CAAC,CACH;IAEF;GAGF,KAAK;GACL,KAAK;IAKH,IAAI,CAAC,eAAe;KAClB,EAAE,gBAAgB;KAClB;IACF;IACA;GAEF,KAAK;IAEH,IAAI,eAAe;KACjB,MAAM,OAAO,eAAe,eAAe,aAAa;KACxD,IAAI,MAAM;MACR,KAAK,MAAM;MACX,EAAE,eAAe;KACnB;IACF;IACA;EACJ;EAIA,IAAI,CAAC,EAAE,oBAAoB,YAAY;GACrC,EAAE,gBAAgB;GAElB,IAAI,6BAA6B;GACjC,IAAI,eAAe;IACjB,MAAM,OAAO,eAAe,eAAe,aAAa;IACxD,IAAI,MACF,6BAA6B,KAAK,cAChC,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC,CAAC,CAClD;GAEJ,OACE,6BAA6B,WAAW,cACtC,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC,CAAC,CAClD;GAQF,IAAI,+BAA+B,EAAE,QAAQ,eAAe,EAAE,QAAQ,eACpE,kBAAkB;EAEtB;CACF;CAGA,MAAM,WAAW,MAAkB;EACjC,IAAI,CAAC,EAAE,WAAW;EAGlB,MAAM,gBAAgB,MAAM,cAAc;EAC1C,IAAI;OACW,SAAS,eAAe,aAC9B,GAAG,CAEV;;CAEJ;CAEA,MAAM,UAAU,MAAkB;EAChC,IAAI,CAAC,EAAE,WAAW;CAEpB;CAGA,MAAM,WAAW,UACZ,cAAsB,OAAO,WAAW,MAAM,WAAW,CAAC,IAC3D,KAAA;CAEJ,OAAO;EACL,YAAY;GACV,OAAO,MAAM;GACb;GACA;GACA;GACA;GACA,IAAI,0BAA0B;IAC5B,aAAc,sBAAsB,IAAK,MAAM,cAAc,KAAK,KAAA,IAAa,KAAA;GACjF;GACA,iBAAiB;GACjB,qBAAqB;GACrB,cAAc;GACd,aAAa;GACb,YAAY;GACZ,cAAc;EAChB;EACA,iBAAiB;GACf,IAAI;GACJ,cAAc;GACd,uBAAuB,sBAAsB;GAC7C,mBAAmB,sBAAsB;GACzC,IAAI,YAAY;IACd,OAAO,iBAAiB,IAAI,UAAU;GACxC;EACF;EACA,QAAQ;CACV;AACF"}
+{"version":3,"file":"autocomplete.js","names":["inputEvent"],"sources":["../../src/autocomplete/createAutocomplete.ts"],"sourcesContent":["/**\n * createAutocomplete - Accessibility hook for autocomplete components\n *\n * Provides keyboard navigation, virtual focus via aria-activedescendant,\n * and filtering capabilities for autocomplete inputs.\n *\n * Based on @react-aria/autocomplete useAutocomplete.\n */\n\nimport { createSignal, createEffect, onCleanup, type Accessor } from \"solid-js\";\nimport { createId, getOwnerDocument } from \"../ssr\";\nimport { type AutocompleteState, type CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { FOCUS_EVENT, CLEAR_FOCUS_EVENT } from \"../selection/constants\";\nimport { getActiveElement, getEventTarget } from \"../utils/dom\";\nimport { getPointerType } from \"../interactions\";\n\nexport interface CollectionOptions {\n  /** The id of the collection element. */\n  id?: string;\n  /** Accessible label for the collection. */\n  \"aria-label\"?: string;\n  /** Whether the collection items should use virtual focus instead of being focused directly. */\n  shouldUseVirtualFocus: boolean;\n  /** Whether typeahead is disabled. */\n  disallowTypeAhead: boolean;\n  /** Whether and where to focus an item when the collection mounts. */\n  autoFocus?: boolean | \"first\" | \"last\";\n}\n\nexport interface AutocompleteInputProps {\n  /** Current input value. */\n  value: Accessor<string>;\n  /** Handler for input value changes. */\n  onChange: (value: string) => void;\n  /** Handler for key events. */\n  onKeyDown: (e: KeyboardEvent) => void;\n  /** Handler for focus events. */\n  onFocus: (e: FocusEvent) => void;\n  /** Handler for blur events. */\n  onBlur: (e: FocusEvent) => void;\n  /** The id of the currently focused item for aria-activedescendant. */\n  \"aria-activedescendant\": Accessor<string | undefined>;\n  /** The id of the controlled collection. */\n  \"aria-controls\": string;\n  /** Autocomplete type. */\n  \"aria-autocomplete\": \"list\" | \"none\" | \"inline\" | \"both\";\n  /** Enter key hint for mobile keyboards. */\n  enterKeyHint: \"go\";\n  /** Disable autocorrect. */\n  autoCorrect: \"off\";\n  /** Disable spell check. */\n  spellCheck: \"false\";\n  /** Disable browser autocomplete. */\n  autoComplete: \"off\";\n}\n\nexport interface AriaAutocompleteOptions<T = unknown> {\n  /** Ref accessor for the input element. */\n  inputRef: Accessor<HTMLInputElement | undefined>;\n  /** Ref accessor for the collection element. */\n  collectionRef: Accessor<HTMLElement | undefined>;\n  /** Optional id override for the controlled collection element. */\n  collectionId?: string;\n  /** Optional accessible name for the controlled collection element. */\n  collectionAriaLabel?: string;\n  /**\n   * An optional filter function used to determine if an option should be included.\n   * @param textValue - The text value of the item\n   * @param inputValue - The current input value\n   * @param node - The collection node being filtered\n   */\n  filter?: (textValue: string, inputValue: string, node: CollectionNode<T>) => boolean;\n  /**\n   * Whether to focus the first item after filtering.\n   * @default false\n   */\n  disableAutoFocusFirst?: boolean;\n  /**\n   * Whether to disable virtual focus (aria-activedescendant).\n   * @default false\n   */\n  disableVirtualFocus?: boolean;\n}\n\nexport interface AutocompleteAria<T = unknown> {\n  /** Props for the autocomplete input element. */\n  inputProps: AutocompleteInputProps;\n  /** Props for the collection (ListBox/Menu). */\n  collectionProps: CollectionOptions;\n  /** A filter function that returns if the item should be shown. */\n  filter?: (nodeTextValue: string, node: CollectionNode<T>) => boolean;\n}\n\nfunction toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {\n  return {\n    key: e.key,\n    code: e.code,\n    location: e.location,\n    repeat: e.repeat,\n    isComposing: e.isComposing,\n    ctrlKey: e.ctrlKey,\n    shiftKey: e.shiftKey,\n    altKey: e.altKey,\n    metaKey: e.metaKey,\n    bubbles: e.bubbles,\n    cancelable: e.cancelable,\n  };\n}\n\n// Custom event names for collection communication.\n// These are the shared @react-aria/selection constants the collection's\n// createSelectableCollection listens for (FOCUS_EVENT / CLEAR_FOCUS_EVENT);\n// the aliases below are retained for backwards-compatible re-exports.\n/** @deprecated Use {@link FOCUS_EVENT} from the selection layer. */\nexport const AUTOCOMPLETE_FOCUS_EVENT = FOCUS_EVENT;\n/** @deprecated Use {@link CLEAR_FOCUS_EVENT} from the selection layer. */\nexport const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = CLEAR_FOCUS_EVENT;\n\n/**\n * Provides the behavior and accessibility implementation for an autocomplete component.\n * An autocomplete combines a text input with a collection, allowing users to filter\n * the collection's contents to match a query.\n *\n * @example\n * ```tsx\n * const state = createAutocompleteState({ defaultInputValue: '' });\n * let inputRef, collectionRef;\n *\n * const { inputProps, collectionProps, filter } = createAutocomplete({\n *   inputRef: () => inputRef,\n *   collectionRef: () => collectionRef,\n *   filter: (textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase()),\n * }, state);\n *\n * return (\n *   <div>\n *     <input ref={inputRef} {...inputProps} />\n *     <ul ref={collectionRef} {...collectionProps}>\n *       {items.filter(item => filter?.(item.name) ?? true).map(item => (\n *         <li key={item.id}>{item.name}</li>\n *       ))}\n *     </ul>\n *   </div>\n * );\n * ```\n */\nexport function createAutocomplete<T = unknown>(\n  props: AriaAutocompleteOptions<T>,\n  state: AutocompleteState,\n): AutocompleteAria<T> {\n  const {\n    inputRef,\n    collectionRef,\n    filter,\n    collectionId: collectionIdProp,\n    collectionAriaLabel,\n    disableAutoFocusFirst = false,\n    disableVirtualFocus = false,\n  } = props;\n\n  const collectionId = collectionIdProp ?? createId();\n  const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);\n  // When the first item should be focused but the collection hasn't mounted yet,\n  // defer it by threading autoFocus through collectionProps so the collection\n  // focuses on mount (mirrors upstream's autoFocusOnMount state).\n  const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);\n  let lastInputType = \"\";\n\n  // Reverse-focus (collection → input aria-activedescendant) bookkeeping, mirroring\n  // useAutocomplete's queuedActiveDescendant / delayNextActiveDescendant / timeout\n  // refs. `queuedActiveDescendant` is the id of the option the collection has\n  // virtually focused — tracked synchronously on every collection `focusin`, even\n  // while the visible aria-activedescendant reflection is deferred, so key\n  // navigation always dispatches to the right item. When typing forward,\n  // `delayNextActiveDescendant` defers the next reflection behind a 500ms timeout so\n  // a screen reader finishes announcing the just-typed letter before naming the\n  // active option; every new focusin (and teardown) clears the pending timeout.\n  let queuedActiveDescendant: string | null = null;\n  let delayNextActiveDescendant = false;\n  let activeDescendantTimeout: ReturnType<typeof setTimeout> | undefined;\n  const ACTIVE_DESCENDANT_DELAY = 500;\n\n  // Track the input type for determining focus behavior. We listen to\n  // `beforeinput` (not `input`) so `lastInputType` is set before the input's\n  // `onChange` runs, mirroring @react-aria/autocomplete.\n  const handleBeforeInput = (e: Event) => {\n    const inputEvent = e as InputEvent;\n    lastInputType = inputEvent.inputType || \"\";\n  };\n\n  // Set up beforeinput event listener\n  createEffect(() => {\n    const input = inputRef();\n    if (input) {\n      input.addEventListener(\"beforeinput\", handleBeforeInput);\n      onCleanup(() => {\n        input.removeEventListener(\"beforeinput\", handleBeforeInput);\n      });\n    }\n  });\n\n  // Focus first item in collection\n  const focusFirstItem = () => {\n    // Typing forward focuses the first filtered row, but the resulting\n    // aria-activedescendant reflection must wait so the SR announces the typed\n    // letter first (see updateActiveDescendant). Mirrors useAutocomplete\n    // setting delayNextActiveDescendant.current = true before the focus event.\n    delayNextActiveDescendant = true;\n    const collection = collectionRef();\n    if (!collection) {\n      // Collection isn't mounted yet — defer focusing the first item to mount\n      // time via collectionProps.autoFocus instead of firing a focus event into\n      // a not-yet-rendered collection.\n      setAutoFocusOnMount(true);\n      return;\n    }\n    collection.dispatchEvent(\n      new CustomEvent(FOCUS_EVENT, {\n        cancelable: true,\n        bubbles: true,\n        detail: { focusStrategy: \"first\" },\n      }),\n    );\n  };\n\n  // Clear virtual focus\n  const clearVirtualFocus = (clearFocusKey = false) => {\n    setAutoFocusOnMount(false);\n    // Drop any pending delayed reflection and the tracked item alongside the\n    // active descendant so a subsequent focusin can't resurrect a stale id\n    // (mirrors useAutocomplete clearing queuedActiveDescendant / the timeout /\n    // delayNextActiveDescendant in clearVirtualFocus).\n    clearTimeout(activeDescendantTimeout);\n    queuedActiveDescendant = null;\n    delayNextActiveDescendant = false;\n    state.setFocusedNodeId(null);\n    const collection = collectionRef();\n    if (collection) {\n      collection.dispatchEvent(\n        new CustomEvent(CLEAR_FOCUS_EVENT, {\n          cancelable: true,\n          bubbles: true,\n          detail: { clearFocusKey },\n        }),\n      );\n    }\n  };\n\n  // Handle input value changes\n  const onChange = (value: string) => {\n    // Focus first item when typing forward, clear when backspacing/pasting.\n    // IME composition (e.g. CJK input) reports 'insertCompositionText'/\n    // 'insertFromComposition' instead of 'insertText'; treat those as forward\n    // typing so the first item still gets virtual focus.\n    if (\n      (lastInputType === \"insertText\" ||\n        lastInputType === \"insertCompositionText\" ||\n        lastInputType === \"insertFromComposition\") &&\n      !disableAutoFocusFirst\n    ) {\n      focusFirstItem();\n    } else if (\n      lastInputType &&\n      (lastInputType.includes(\"insert\") ||\n        lastInputType.includes(\"delete\") ||\n        lastInputType.includes(\"history\"))\n    ) {\n      clearVirtualFocus(true);\n    }\n\n    state.setInputValue(value);\n  };\n\n  // Handle keyboard navigation\n  const onKeyDown = (e: KeyboardEvent) => {\n    if (\"isComposing\" in e && e.isComposing) {\n      return;\n    }\n\n    // Navigate against the id the collection has virtually focused, tracked\n    // synchronously on every focusin, NOT the (possibly still-delayed)\n    // aria-activedescendant reflection in state — mirrors useAutocomplete\n    // reading queuedActiveDescendant.current here. Reading state.focusedNodeId()\n    // would be null during the post-type reflection delay, so arrows would\n    // re-focus the first row instead of advancing.\n    const focusedNodeId = queuedActiveDescendant;\n    const collection = collectionRef();\n    const ownerDocument = getOwnerDocument(inputRef() ?? collection);\n\n    switch (e.key) {\n      case \"Escape\":\n        // Let the input handle Escape (e.g., clear value)\n        if (e.defaultPrevented) {\n          return;\n        }\n        break;\n\n      case \" \":\n        // Space shouldn't trigger item action\n        return;\n\n      case \"Tab\":\n        // Let Tab propagate normally for focus management\n        return;\n\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n      case \"Home\":\n      case \"End\":\n      case \"PageUp\":\n      case \"PageDown\": {\n        // Prevent cursor movement in input\n        e.preventDefault();\n\n        // Dispatch focus event to collection\n        if (collection) {\n          collection.dispatchEvent(\n            new CustomEvent(FOCUS_EVENT, {\n              cancelable: true,\n              bubbles: true,\n            }),\n          );\n        }\n        break;\n      }\n\n      case \"ArrowLeft\":\n      case \"ArrowRight\":\n        // With no virtual focus, just let the arrow move the text cursor; stop\n        // propagation so it doesn't leak into the collection. With virtual focus,\n        // fall through to dispatch the key to the focused item below, then clear\n        // the active descendant only after the item has seen it.\n        if (!focusedNodeId) {\n          e.stopPropagation();\n          return;\n        }\n        break;\n\n      case \"Enter\":\n        // Trigger click on focused item\n        if (focusedNodeId) {\n          const item = ownerDocument?.getElementById(focusedNodeId);\n          if (item) {\n            item.click();\n            e.preventDefault();\n          }\n        }\n        return;\n    }\n\n    // Forward keyboard events to the focused item (or the collection when there\n    // is no virtual focus) so the collection can act on them, e.g. onAction.\n    // Gated only on the collection existing — NOT on e.defaultPrevented: arrows\n    // call preventDefault above to stop the input's text cursor moving, but the\n    // key must still be re-dispatched to the row so navigation advances (mirrors\n    // useAutocomplete forwarding whenever collectionRef.current !== null).\n    if (collection) {\n      e.stopPropagation();\n\n      let shouldPerformDefaultAction = true;\n      if (focusedNodeId) {\n        const item = ownerDocument?.getElementById(focusedNodeId);\n        if (item) {\n          shouldPerformDefaultAction = item.dispatchEvent(\n            new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n          );\n        }\n      } else {\n        shouldPerformDefaultAction = collection.dispatchEvent(\n          new KeyboardEvent(e.type, toKeyboardEventInit(e)),\n        );\n      }\n\n      // After the focused item has seen ArrowLeft/ArrowRight, clear the active\n      // descendant so SR announcements aren't interrupted, but retain the\n      // collection's focused key so navigation restarts where it left off. If\n      // the item consumed the key (e.g. an expandable row collapsing), it\n      // cancels the event and we keep virtual focus.\n      if (shouldPerformDefaultAction && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) {\n        clearVirtualFocus();\n      }\n    }\n  };\n\n  // Handle focus events\n  const onFocus = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n\n    // Restore virtual focus when refocusing input\n    const focusedNodeId = state.focusedNodeId();\n    if (focusedNodeId) {\n      const item = document.getElementById(focusedNodeId);\n      if (item) {\n        // Item still exists, keep focus on it\n      }\n    }\n  };\n\n  const onBlur = (e: FocusEvent) => {\n    if (!e.isTrusted) return;\n    // Virtual focus blur handling would go here\n  };\n\n  // Reverse path: mirror the collection's virtually-focused option into the\n  // input's aria-activedescendant. The collection dispatches a synthetic,\n  // bubbling `focusin` (via moveVirtualFocus) on its focused option; we read the\n  // target id, track it in `queuedActiveDescendant` synchronously (so key nav\n  // always dispatches to the right item), and reflect it into AutocompleteState\n  // — immediately, or, when `delayNextActiveDescendant` was set by forward\n  // typing, behind a 500ms timeout so the SR finishes announcing the typed\n  // letter before naming the active option. Faithful port of useAutocomplete's\n  // updateActiveDescendantEvent.\n  const updateActiveDescendant = (e: Event) => {\n    const input = inputRef();\n    // If the user clicks/taps an option directly (non-touch), pull real focus\n    // back to the input so typing keeps working.\n    if (\n      !e.isTrusted &&\n      shouldUseVirtualFocus() &&\n      input &&\n      getActiveElement(getOwnerDocument(input)) !== input &&\n      getPointerType() !== \"touch\"\n    ) {\n      input.focus();\n    }\n\n    const target = getEventTarget<Element>(e);\n    if (e.isTrusted || !target || queuedActiveDescendant === target.id) {\n      return;\n    }\n\n    const collection = collectionRef();\n    // A new focusin supersedes any pending delayed reflection.\n    clearTimeout(activeDescendantTimeout);\n    if (target !== collection) {\n      const targetId = target.id;\n      if (delayNextActiveDescendant) {\n        // Forward typing just focused the first row: track it now, but defer the\n        // aria-activedescendant reflection so the just-typed letter is announced\n        // before the active option.\n        queuedActiveDescendant = targetId;\n        activeDescendantTimeout = setTimeout(() => {\n          state.setFocusedNodeId(targetId);\n        }, ACTIVE_DESCENDANT_DELAY);\n      } else {\n        queuedActiveDescendant = targetId;\n        state.setFocusedNodeId(targetId);\n      }\n    } else if (\n      queuedActiveDescendant &&\n      !getOwnerDocument(collection)?.getElementById(queuedActiveDescendant)\n    ) {\n      // Refocus of the collection itself while the previously focused node no\n      // longer exists (filtered away, or the input was refocused): clear the\n      // tracked item and the active descendant.\n      queuedActiveDescendant = null;\n      state.setFocusedNodeId(null);\n    }\n    // Reflection delay is a one-shot; the next focusin reflects immediately\n    // unless forward typing sets the flag again.\n    delayNextActiveDescendant = false;\n  };\n\n  createEffect(() => {\n    if (!shouldUseVirtualFocus()) return;\n    const collection = collectionRef();\n    if (collection) {\n      collection.addEventListener(\"focusin\", updateActiveDescendant);\n      onCleanup(() => {\n        collection.removeEventListener(\"focusin\", updateActiveDescendant);\n        clearTimeout(activeDescendantTimeout);\n      });\n    }\n  });\n\n  // Create filter function. The user's 3-arg predicate (textValue, inputValue,\n  // node) is closed over the current input value and exposed to the collection\n  // as the 2-arg (nodeTextValue, node) shape that UNSTABLE_useFilteredListState\n  // (createFilteredListState) expects.\n  const filterFn = filter\n    ? (nodeTextValue: string, node: CollectionNode<T>) =>\n        filter(nodeTextValue, state.inputValue(), node)\n    : undefined;\n\n  return {\n    inputProps: {\n      value: state.inputValue,\n      onChange,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      get \"aria-activedescendant\"() {\n        return () => (shouldUseVirtualFocus() ? (state.focusedNodeId() ?? undefined) : undefined);\n      },\n      \"aria-controls\": collectionId,\n      \"aria-autocomplete\": \"list\",\n      enterKeyHint: \"go\",\n      autoCorrect: \"off\",\n      spellCheck: \"false\",\n      autoComplete: \"off\",\n    },\n    collectionProps: {\n      id: collectionId,\n      \"aria-label\": collectionAriaLabel,\n      shouldUseVirtualFocus: shouldUseVirtualFocus(),\n      disallowTypeAhead: shouldUseVirtualFocus(),\n      get autoFocus() {\n        return autoFocusOnMount() ? \"first\" : false;\n      },\n    },\n    filter: filterFn,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/autocomplete.jsx

@@ -1,4 +1,7 @@
+import { a as getEventTarget, i as getActiveElement } from "./focus.jsx";
+import { s as getPointerType } from "./createInteractionModality.jsx";
 import { createId, getOwnerDocument } from "../ssr/index.jsx";
+import { n as FOCUS_EVENT, t as CLEAR_FOCUS_EVENT } from "./constants.jsx";
 import { createEffect, createSignal, onCleanup } from "solid-js";
 //#region src/autocomplete/createAutocomplete.ts
 /**
@@ -24,8 +27,10 @@ function toKeyboardEventInit(e) {
 		cancelable: e.cancelable
 	};
 }
-const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
-const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
+/** @deprecated Use {@link FOCUS_EVENT} from the selection layer. */
+const AUTOCOMPLETE_FOCUS_EVENT = FOCUS_EVENT;
+/** @deprecated Use {@link CLEAR_FOCUS_EVENT} from the selection layer. */
+const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = CLEAR_FOCUS_EVENT;
 /**
 * Provides the behavior and accessibility implementation for an autocomplete component.
 * An autocomplete combines a text input with a collection, allowing users to filter
@@ -61,6 +66,10 @@ function createAutocomplete(props, state) {
 	const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus);
 	const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);
 	let lastInputType = "";
+	let queuedActiveDescendant = null;
+	let delayNextActiveDescendant = false;
+	let activeDescendantTimeout;
+	const ACTIVE_DESCENDANT_DELAY = 500;
 	const handleBeforeInput = (e) => {
 		lastInputType = e.inputType || "";
 	};
@@ -74,12 +83,13 @@ function createAutocomplete(props, state) {
 		}
 	});
 	const focusFirstItem = () => {
+		delayNextActiveDescendant = true;
 		const collection = collectionRef();
 		if (!collection) {
 			setAutoFocusOnMount(true);
 			return;
 		}
-		collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+		collection.dispatchEvent(new CustomEvent(FOCUS_EVENT, {
 			cancelable: true,
 			bubbles: true,
 			detail: { focusStrategy: "first" }
@@ -87,9 +97,12 @@ function createAutocomplete(props, state) {
 	};
 	const clearVirtualFocus = (clearFocusKey = false) => {
 		setAutoFocusOnMount(false);
+		clearTimeout(activeDescendantTimeout);
+		queuedActiveDescendant = null;
+		delayNextActiveDescendant = false;
 		state.setFocusedNodeId(null);
 		const collection = collectionRef();
-		if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
+		if (collection) collection.dispatchEvent(new CustomEvent(CLEAR_FOCUS_EVENT, {
 			cancelable: true,
 			bubbles: true,
 			detail: { clearFocusKey }
@@ -102,7 +115,7 @@ function createAutocomplete(props, state) {
 	};
 	const onKeyDown = (e) => {
 		if ("isComposing" in e && e.isComposing) return;
-		const focusedNodeId = state.focusedNodeId();
+		const focusedNodeId = queuedActiveDescendant;
 		const collection = collectionRef();
 		const ownerDocument = getOwnerDocument(inputRef() ?? collection);
 		switch (e.key) {
@@ -118,7 +131,7 @@ function createAutocomplete(props, state) {
 			case "PageUp":
 			case "PageDown":
 				e.preventDefault();
-				if (collection) collection.dispatchEvent(new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+				if (collection) collection.dispatchEvent(new CustomEvent(FOCUS_EVENT, {
 					cancelable: true,
 					bubbles: true
 				}));
@@ -140,7 +153,7 @@ function createAutocomplete(props, state) {
 				}
 				return;
 		}
-		if (!e.defaultPrevented && collection) {
+		if (collection) {
 			e.stopPropagation();
 			let shouldPerformDefaultAction = true;
 			if (focusedNodeId) {
@@ -160,7 +173,42 @@ function createAutocomplete(props, state) {
 	const onBlur = (e) => {
 		if (!e.isTrusted) return;
 	};
-	const filterFn = filter ? (textValue) => filter(textValue, state.inputValue()) : void 0;
+	const updateActiveDescendant = (e) => {
+		const input = inputRef();
+		if (!e.isTrusted && shouldUseVirtualFocus() && input && getActiveElement(getOwnerDocument(input)) !== input && getPointerType() !== "touch") input.focus();
+		const target = getEventTarget(e);
+		if (e.isTrusted || !target || queuedActiveDescendant === target.id) return;
+		const collection = collectionRef();
+		clearTimeout(activeDescendantTimeout);
+		if (target !== collection) {
+			const targetId = target.id;
+			if (delayNextActiveDescendant) {
+				queuedActiveDescendant = targetId;
+				activeDescendantTimeout = setTimeout(() => {
+					state.setFocusedNodeId(targetId);
+				}, ACTIVE_DESCENDANT_DELAY);
+			} else {
+				queuedActiveDescendant = targetId;
+				state.setFocusedNodeId(targetId);
+			}
+		} else if (queuedActiveDescendant && !getOwnerDocument(collection)?.getElementById(queuedActiveDescendant)) {
+			queuedActiveDescendant = null;
+			state.setFocusedNodeId(null);
+		}
+		delayNextActiveDescendant = false;
+	};
+	createEffect(() => {
+		if (!shouldUseVirtualFocus()) return;
+		const collection = collectionRef();
+		if (collection) {
+			collection.addEventListener("focusin", updateActiveDescendant);
+			onCleanup(() => {
+				collection.removeEventListener("focusin", updateActiveDescendant);
+				clearTimeout(activeDescendantTimeout);
+			});
+		}
+	});
+	const filterFn = filter ? (nodeTextValue, node) => filter(nodeTextValue, state.inputValue(), node) : void 0;
 	return {
 		inputProps: {
 			value: state.inputValue,