@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/tabs.js

@@ -1,13 +1,96 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/focus/useHasTabbableChild.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/TabsKeyboardDelegate.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTab.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabPanel.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/utils.ts
+import { i as attrTrue, n as ariaTrueFalse } from "./mergeProps.js";
+import { i as getFocusableTreeWalker } from "./dom.js";
 import { t as createPress } from "./createPress.js";
 import { t as createFocusRing } from "./createFocusRing.js";
 import { t as createHover } from "./createHover.js";
 import { i as useLocale } from "./locale.js";
 import { createId } from "../ssr/index.js";
-import { batch, createEffect, createMemo } from "solid-js";
+import { createEffect, createMemo, createSignal, createTrackedEffect } from "solid-js";
+//#region src/focus/createHasTabbableChild.ts
+/**
+* Returns whether an element has a tabbable child, and updates as its children
+* or their focusability change.
+*
+* @private
+*/
+function createHasTabbableChild(ref, options) {
+	const [hasTabbableChild, setHasTabbableChild] = createSignal(false);
+	createEffect(() => ({
+		element: ref(),
+		isDisabled: options?.isDisabled?.()
+	}), ({ element, isDisabled }) => {
+		if (!element || isDisabled) {
+			setHasTabbableChild(false);
+			return;
+		}
+		const update = () => {
+			const walker = getFocusableTreeWalker(element, { tabbable: true });
+			setHasTabbableChild(Boolean(walker.nextNode()));
+		};
+		let isCurrent = true;
+		update();
+		queueMicrotask(() => {
+			if (isCurrent && ref() === element && !options?.isDisabled?.()) update();
+		});
+		const observer = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(update);
+		observer?.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"tabindex",
+				"disabled",
+				"inert",
+				"data-inert"
+			]
+		});
+		return () => {
+			isCurrent = false;
+			observer?.disconnect();
+		};
+	}, { ssrSource: "client" });
+	return () => options?.isDisabled?.() ? false : hasTabbableChild();
+}
+//#endregion
 //#region src/tabs/createTabs.ts
 /**
 * ARIA hooks for tab components.
-* Based on @react-aria/tabs.
+* Based on these pinned React Aria sources:
+* - packages/react-aria/src/tabs/useTabList.ts
+* - packages/react-aria/src/tabs/useTab.ts
+* - packages/react-aria/src/tabs/useTabPanel.ts
+* - packages/react-aria/src/tabs/TabsKeyboardDelegate.ts
+* - packages/react-aria/src/tabs/utils.ts
+*
+* This Solid module combines the upstream hooks and keyboard delegate.
 */
 const tabListIds = /* @__PURE__ */ new WeakMap();
 function getTabListId(state) {
@@ -70,10 +153,10 @@ function createTabList(props, state) {
 		const isRTL = locale().direction === "rtl";
 		switch (e.key) {
 			case "ArrowLeft":
-				if (isHorizontal) nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
+				nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
 				break;
 			case "ArrowRight":
-				if (isHorizontal) nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
+				nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
 				break;
 			case "ArrowUp":
 				if (!isHorizontal) nextKey = getPreviousKey(state, currentKey);
@@ -98,10 +181,13 @@ function createTabList(props, state) {
 		}
 		if (nextKey !== null) {
 			e.preventDefault();
-			batch(() => {
-				state.setFocusedKey(nextKey);
-				if (keyboardActivation() === "automatic") state.setSelectedKey(nextKey);
-			});
+			state.setFocused(true);
+			state.setFocusedKey(nextKey);
+			if (keyboardActivation() === "automatic") state.setSelectedKey(nextKey);
+			const tabList = e.currentTarget;
+			const nextId = generateTabId(state, nextKey);
+			const nextEl = tabList?.querySelector(`#${CSS.escape(nextId)}`);
+			if (nextEl instanceof HTMLElement && nextEl.ownerDocument.activeElement !== nextEl) nextEl.focus();
 		}
 	};
 	const handleFocus = () => {
@@ -115,10 +201,18 @@ function createTabList(props, state) {
 	};
 	return { tabListProps: {
 		role: "tablist",
-		"aria-orientation": orientation(),
-		"aria-label": props["aria-label"],
-		"aria-labelledby": props["aria-labelledby"],
-		"aria-describedby": props["aria-describedby"],
+		get "aria-orientation"() {
+			return orientation();
+		},
+		get "aria-label"() {
+			return props["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return props["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return props["aria-describedby"];
+		},
 		onKeyDown: handleKeyDown,
 		onFocusIn: handleFocus,
 		onFocusOut: handleBlur
@@ -166,6 +260,7 @@ function createTab(props, state, ref) {
 		callHandler(focusProps.onFocus, e);
 	};
 	const handleFocusIn = () => {
+		state.setFocused(true);
 		state.setFocusedKey(key());
 	};
 	const handleBlur = (e) => {
@@ -183,7 +278,7 @@ function createTab(props, state, ref) {
 	const handleClick = (e) => {
 		callHandler(pressProps.onClick, e);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const element = ref?.();
 		if (!state.isFocused() || !isKeyFocused() || !element) return;
 		if (element.ownerDocument?.activeElement !== element) element.focus();
@@ -193,10 +288,10 @@ function createTab(props, state, ref) {
 			id: tabId,
 			role: "tab",
 			get "aria-selected"() {
-				return isSelected();
+				return ariaTrueFalse(isSelected());
 			},
 			get "aria-disabled"() {
-				return isDisabled() || void 0;
+				return attrTrue(isDisabled());
 			},
 			get "aria-controls"() {
 				return isSelected() ? tabPanelId : void 0;
@@ -226,7 +321,7 @@ function createTab(props, state, ref) {
 /**
 * Creates ARIA props for a tab panel.
 */
-function createTabPanel(props, state) {
+function createTabPanel(props, state, ref = () => null) {
 	const fallbackId = createId();
 	const associatedKey = createMemo(() => {
 		if (state === null) return null;
@@ -237,6 +332,7 @@ function createTabPanel(props, state) {
 		if (props.id === void 0) return state.selectedKey() !== null;
 		return state.selectedKey() === props.id;
 	});
+	const hasTabbableChild = createHasTabbableChild(ref, { isDisabled: () => !isSelected() });
 	return {
 		tabPanelProps: {
 			get id() {
@@ -252,7 +348,9 @@ function createTabPanel(props, state) {
 			},
 			"aria-label": props["aria-label"],
 			"aria-describedby": props["aria-describedby"],
-			tabIndex: 0
+			get tabIndex() {
+				return hasTabbableChild() ? void 0 : 0;
+			}
 		},
 		isSelected
 	};

package/dist/_chunk/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/createTabs.ts"],"sourcesContent":["/**\n * ARIA hooks for tab components.\n * Based on @react-aria/tabs.\n */\n\nimport { type Accessor, batch, createEffect, createMemo } from \"solid-js\";\nimport { createFocusRing } from \"../interactions\";\nimport { createPress } from \"../interactions\";\nimport { createHover } from \"../interactions\";\nimport { createId } from \"../ssr\";\nimport { useLocale } from \"../i18n\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\n\nexport type TabOrientation = \"horizontal\" | \"vertical\";\nexport type KeyboardActivation = \"automatic\" | \"manual\";\n\nexport interface TabListState<T = unknown> {\n  collection: Accessor<Collection<T>>;\n  selectedKey: Accessor<Key | null>;\n  setSelectedKey(key: Key): void;\n  selectedItem: Accessor<CollectionNode<T> | null>;\n  isDisabled: Accessor<boolean>;\n  keyboardActivation: Accessor<KeyboardActivation>;\n  orientation: Accessor<TabOrientation>;\n  isKeyDisabled(key: Key): boolean;\n  disabledKeys: Accessor<Set<Key>>;\n  isFocused: Accessor<boolean>;\n  setFocused(isFocused: boolean): void;\n  focusedKey: Accessor<Key | null>;\n  setFocusedKey(key: Key | null): void;\n}\n\nexport interface AriaTabListProps {\n  /** The orientation of the tab list. */\n  orientation?: TabOrientation;\n  /** How tabs are activated (on focus or on click). */\n  keyboardActivation?: KeyboardActivation;\n  /** Whether the tab list is disabled. */\n  isDisabled?: boolean;\n  /** Label for the tab list. */\n  \"aria-label\"?: string;\n  /** ID of element that labels the tab list. */\n  \"aria-labelledby\"?: string;\n  /** ID of element that describes the tab list. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TabListAria {\n  /** Props for the tab list container element. */\n  tabListProps: {\n    role: \"tablist\";\n    \"aria-orientation\": TabOrientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    \"aria-describedby\"?: string;\n    onKeyDown: (e: KeyboardEvent) => void;\n    // React's bubbling onFocus/onBlur map to focusin/focusout in Solid; the\n    // tab list must observe focus entering/leaving its child tabs.\n    onFocusIn: (e: FocusEvent) => void;\n    onFocusOut: (e: FocusEvent) => void;\n  };\n}\n\nexport interface AriaTabProps {\n  /** The key of the tab. */\n  key: Key;\n  /** Whether the tab is disabled. */\n  isDisabled?: boolean;\n  /** Label for the tab. */\n  \"aria-label\"?: string;\n  /** ID reference for the tab label. */\n  \"aria-labelledby\"?: string;\n}\n\nexport interface TabAria {\n  /** Props for the tab element. */\n  tabProps: {\n    id: string;\n    role: \"tab\";\n    \"aria-selected\": boolean;\n    \"aria-disabled\": boolean | undefined;\n    \"aria-controls\": string | undefined;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex: number | undefined;\n    onKeyDown: (e: KeyboardEvent) => void;\n    onMouseDown: (e: MouseEvent) => void;\n    onPointerDown: (e: PointerEvent) => void;\n    onClick: (e: MouseEvent) => void;\n    onFocus: (e: FocusEvent) => void;\n    onFocusIn: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n  };\n  /** Whether the tab is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the tab is disabled. */\n  isDisabled: Accessor<boolean>;\n  /** Whether the tab is pressed. */\n  isPressed: Accessor<boolean>;\n  /** Whether the tab has focus. */\n  isFocused: Accessor<boolean>;\n  /** Whether the tab has visible focus ring. */\n  isFocusVisible: Accessor<boolean>;\n  /** Whether the tab is hovered. */\n  isHovered: Accessor<boolean>;\n}\n\nexport interface AriaTabPanelProps {\n  /** The key of the associated tab. */\n  id?: Key;\n  /** Label for the tab panel. */\n  \"aria-label\"?: string;\n  /** ID of element that labels the tab panel. */\n  \"aria-labelledby\"?: string;\n  /** ID of element that describes the tab panel. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TabPanelAria {\n  /** Props for the tab panel element. */\n  tabPanelProps: {\n    id: string;\n    role: \"tabpanel\";\n    \"aria-labelledby\"?: string;\n    \"aria-label\"?: string;\n    \"aria-describedby\"?: string;\n    tabIndex: number;\n  };\n  /** Whether this panel is the selected one. */\n  isSelected: Accessor<boolean>;\n}\n\nconst tabListIds = new WeakMap<TabListState<unknown>, string>();\n\nfunction getTabListId<T>(state: TabListState<T>): string {\n  let id = tabListIds.get(state as TabListState<unknown>);\n  if (!id) {\n    id = createId();\n    tabListIds.set(state as TabListState<unknown>, id);\n  }\n  return id;\n}\n\nfunction generateTabId<T>(state: TabListState<T>, key: Key): string {\n  const baseId = getTabListId(state);\n  const keyStr = String(key).replace(/\\s+/g, \"-\");\n  return `${baseId}-tab-${keyStr}`;\n}\n\nfunction generateTabPanelId<T>(state: TabListState<T>, key: Key): string {\n  const baseId = getTabListId(state);\n  const keyStr = String(key).replace(/\\s+/g, \"-\");\n  return `${baseId}-tabpanel-${keyStr}`;\n}\n\nfunction getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key);\n  const currentIndex = keys.indexOf(currentKey);\n\n  if (currentIndex === -1) return keys[0] ?? null;\n\n  // Find next non-disabled key, wrapping around\n  for (let i = 1; i <= keys.length; i++) {\n    const nextIndex = (currentIndex + i) % keys.length;\n    const nextKey = keys[nextIndex];\n    if (!state.isKeyDisabled(nextKey)) {\n      return nextKey;\n    }\n  }\n\n  return null;\n}\n\nfunction getPreviousKey<T>(state: TabListState<T>, currentKey: Key): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key);\n  const currentIndex = keys.indexOf(currentKey);\n\n  if (currentIndex === -1) return keys[keys.length - 1] ?? null;\n\n  // Find previous non-disabled key, wrapping around\n  for (let i = 1; i <= keys.length; i++) {\n    const prevIndex = (currentIndex - i + keys.length) % keys.length;\n    const prevKey = keys[prevIndex];\n    if (!state.isKeyDisabled(prevKey)) {\n      return prevKey;\n    }\n  }\n\n  return null;\n}\n\nfunction getFirstKey<T>(state: TabListState<T>): Key | null {\n  const coll = state.collection();\n  for (const node of coll) {\n    if (!state.isKeyDisabled(node.key)) {\n      return node.key;\n    }\n  }\n  return null;\n}\n\nfunction getLastKey<T>(state: TabListState<T>): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key).reverse();\n  for (const key of keys) {\n    if (!state.isKeyDisabled(key)) {\n      return key;\n    }\n  }\n  return null;\n}\n\n/**\n * Creates ARIA props for a tab list container.\n */\nexport function createTabList<T>(props: AriaTabListProps, state: TabListState<T>): TabListAria {\n  const locale = useLocale();\n  const orientation = () => props.orientation ?? state.orientation() ?? \"horizontal\";\n  const keyboardActivation = () =>\n    props.keyboardActivation ?? state.keyboardActivation() ?? \"automatic\";\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (state.isDisabled()) return;\n\n    const currentKey = state.focusedKey() ?? state.selectedKey();\n    if (currentKey === null) return;\n\n    let nextKey: Key | null = null;\n    const isHorizontal = orientation() === \"horizontal\";\n    const isRTL = locale().direction === \"rtl\";\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);\n        }\n        break;\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          nextKey = getPreviousKey(state, currentKey);\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          nextKey = getNextKey(state, currentKey);\n        }\n        break;\n      case \"Home\":\n        nextKey = getFirstKey(state);\n        break;\n      case \"End\":\n        nextKey = getLastKey(state);\n        break;\n      case \"Enter\":\n      case \" \":\n        // In manual mode, Enter/Space activates the focused tab\n        if (keyboardActivation() === \"manual\" && state.focusedKey()) {\n          state.setSelectedKey(state.focusedKey()!);\n          e.preventDefault();\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (nextKey !== null) {\n      e.preventDefault();\n      // Batch the focus + selection writes so their observable ordering matches\n      // React. `setFocusedKey` drives a reactive effect that moves DOM focus\n      // (firing native focusout/focusin); `setSelectedKey` calls\n      // `onSelectionChange` synchronously. Written bare, Solid flushes the focus\n      // effect the instant `setFocusedKey` runs — so focus moves *before* the\n      // selection callback, inverting React's order. React batches both state\n      // updates in the handler (callback fires synchronously) and defers the\n      // focus move to a layout effect. `batch()` is the Solid equivalent: it\n      // holds the focus effect until the batch closes, so the synchronous\n      // `onSelectionChange` fires first, then focus moves — matching upstream's\n      // `callback → focusout → focusin` sequence (D4 event-sequence oracle).\n      batch(() => {\n        state.setFocusedKey(nextKey);\n        // Selection follows focus only for keyboard navigation in automatic mode\n        // (mirrors useSelectableCollection's selectOnFocus in navigateToKey).\n        if (keyboardActivation() === \"automatic\") {\n          state.setSelectedKey(nextKey);\n        }\n      });\n    }\n  };\n\n  const handleFocus = () => {\n    state.setFocused(true);\n    // If no focused key, focus the selected key\n    if (state.focusedKey() === null && state.selectedKey() !== null) {\n      state.setFocusedKey(state.selectedKey());\n    }\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    // Only blur if focus is leaving the tab list entirely\n    const relatedTarget = e.relatedTarget as Element | null;\n    if (relatedTarget && (e.currentTarget as Element).contains(relatedTarget)) {\n      return;\n    }\n    state.setFocused(false);\n  };\n\n  return {\n    tabListProps: {\n      role: \"tablist\",\n      \"aria-orientation\": orientation(),\n      \"aria-label\": props[\"aria-label\"],\n      \"aria-labelledby\": props[\"aria-labelledby\"],\n      \"aria-describedby\": props[\"aria-describedby\"],\n      onKeyDown: handleKeyDown,\n      onFocusIn: handleFocus,\n      onFocusOut: handleBlur,\n    },\n  };\n}\n\n/**\n * Creates ARIA props for an individual tab.\n */\nexport function createTab<T>(\n  props: AriaTabProps,\n  state: TabListState<T>,\n  ref?: Accessor<HTMLElement | null>,\n): TabAria {\n  const key = () => props.key;\n\n  const isSelected = createMemo(() => state.selectedKey() === key());\n  const isDisabled = createMemo(() => {\n    if (props.isDisabled) return true;\n    return state.isKeyDisabled(key());\n  });\n\n  // Whether this tab is the roving-focus target (state layer), used for the\n  // roving tabIndex and DOM focus alignment. The returned isFocused is the\n  // DOM-focus-based ring state, matching upstream's useFocusRing semantics.\n  const isKeyFocused = createMemo(() => state.focusedKey() === key());\n\n  // Focus ring\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  // Press handling. Selection timing mirrors useSelectableItem's default\n  // (non-shouldSelectOnPressUp) path: mouse selects on press start and\n  // keyboard on key down, while touch, pen, and virtual pointers select on\n  // press up.\n  const selectTab = () => {\n    // Press handlers select only — they do NOT set the focused key. Upstream's\n    // useSelectableItem does the same: its press/onSelect path calls\n    // replaceSelection, while `focusedKey` is driven exclusively by the DOM\n    // `onFocus` handler (see handleFocus below). Setting the focused key here too\n    // flipped the roving tabIndex synchronously at pointer-up — *before* the\n    // browser's native focus reached the tab — so a touch tap logged the tapped\n    // tab with tabIndex 0 at its own `focusin`, where React (which updates\n    // tabIndex only on the post-event commit) still shows -1. Letting native\n    // focus alone advance `focusedKey` defers the tabIndex flip past the focus\n    // event, matching React's D4 event sequence.\n    state.setSelectedKey(key());\n  };\n  const { isPressed, pressProps } = createPress({\n    get isDisabled() {\n      return isDisabled();\n    },\n    onPressStart: (e) => {\n      if (e.pointerType === \"mouse\" || e.pointerType === \"keyboard\") {\n        selectTab();\n      }\n    },\n    onPress: (e) => {\n      if (e.pointerType === \"touch\" || e.pointerType === \"pen\" || e.pointerType === \"virtual\") {\n        selectTab();\n      }\n    },\n  });\n\n  // Hover handling\n  const { isHovered } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Generate IDs\n  const tabId = generateTabId(state, key());\n  const tabPanelId = generateTabPanelId(state, key());\n\n  // Helper to safely call event handlers that may be bound tuples\n  const callHandler = <E extends Event>(handler: unknown, event: E) => {\n    if (typeof handler === \"function\") {\n      (handler as (e: E) => void)(event);\n      return;\n    }\n    if (Array.isArray(handler) && handler.length >= 2 && typeof handler[1] === \"function\") {\n      (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);\n    }\n  };\n\n  // Focus management. The focus ring reacts to the native `focus` event, but the\n  // roving-tabindex commit is deliberately bound to `focusin` (see\n  // handleFocusIn) so its DOM reflection lands one event later — matching React,\n  // whose `onFocus` is a `focusin`-delegated listener at the app root.\n  const handleFocus = (e: FocusEvent) => {\n    callHandler(focusProps.onFocus, e);\n  };\n\n  // Roving-tabindex commit (D4 event-ordering). React's `onFocus` is delegated\n  // to a single `focusin` listener at the app root, so the roving tabIndex it\n  // drives reflects one event *after* the native `focus`. Binding the\n  // focusedKey write here (to `focusin`) mirrors that timing: the D4 oracle\n  // records event targets from a document-level capture-phase listener, which\n  // runs before this at-target handler, so a touch tap — whose selection lands\n  // on press-up, after focus — is still observed with tabIndex=-1 at `focusin`,\n  // exactly as React. A mouse press selects on press-start and syncs focusedKey\n  // before focus (createTabListState's selection→focus effect), so its tab\n  // already reads tabIndex=0 at `focusin`, again matching React. Setting it on\n  // the earlier `focus` event flipped the tab a whole event too soon, so touch\n  // taps diverged at `focusin`. See recertification.md D4 event-ordering.\n  const handleFocusIn = () => {\n    state.setFocusedKey(key());\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    callHandler(focusProps.onBlur, e);\n  };\n\n  // Combine all handlers\n  const handleKeyDown = (e: KeyboardEvent) => {\n    callHandler(pressProps.onKeyDown, e);\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    callHandler(pressProps.onMouseDown, e);\n  };\n\n  const handlePointerDown = (e: PointerEvent) => {\n    callHandler(pressProps.onPointerDown, e);\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    callHandler(pressProps.onClick, e);\n  };\n\n  // Keep DOM focus aligned with focusedKey updates from keyboard navigation.\n  // Only while the tab list itself is focused (mirrors useSelectableItem's\n  // manager.isFocused guard), so programmatic selection changes don't steal\n  // focus from elsewhere in the document.\n  createEffect(() => {\n    const element = ref?.();\n    if (!state.isFocused() || !isKeyFocused() || !element) return;\n\n    const activeElement = element.ownerDocument?.activeElement;\n    if (activeElement !== element) {\n      element.focus();\n    }\n  });\n\n  return {\n    tabProps: {\n      id: tabId,\n      role: \"tab\",\n      get \"aria-selected\"() {\n        return isSelected();\n      },\n      get \"aria-disabled\"() {\n        return isDisabled() || undefined;\n      },\n      get \"aria-controls\"() {\n        return isSelected() ? tabPanelId : undefined;\n      },\n      \"aria-label\": props[\"aria-label\"],\n      \"aria-labelledby\": props[\"aria-labelledby\"],\n      get tabIndex() {\n        // Roving tabIndex follows the focused key (mirrors useSelectableItem);\n        // disabled tabs get no tabIndex at all (mirrors useTab).\n        if (isDisabled()) return undefined;\n        return isKeyFocused() ? 0 : -1;\n      },\n      onKeyDown: handleKeyDown,\n      onMouseDown: handleMouseDown,\n      onPointerDown: handlePointerDown,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onFocusIn: handleFocusIn,\n      onBlur: handleBlur,\n    },\n    isSelected,\n    isDisabled,\n    isPressed,\n    isFocused,\n    isFocusVisible,\n    isHovered,\n  };\n}\n\n/**\n * Creates ARIA props for a tab panel.\n */\nexport function createTabPanel<T>(\n  props: AriaTabPanelProps,\n  state: TabListState<T> | null,\n): TabPanelAria {\n  const fallbackId = createId();\n\n  // Shared panel pattern: if no explicit id is provided, associate the panel\n  // with the currently selected tab.\n  const associatedKey = createMemo<Key | null>(() => {\n    if (state === null) return null;\n    return props.id ?? state.selectedKey();\n  });\n\n  // If state is null, the panel is always visible (SSR fallback).\n  const isSelected = createMemo(() => {\n    if (state === null) return true;\n    if (props.id === undefined) {\n      return state.selectedKey() !== null;\n    }\n    return state.selectedKey() === props.id;\n  });\n\n  return {\n    tabPanelProps: {\n      get id() {\n        const key = associatedKey();\n        if (state && key !== null) {\n          return generateTabPanelId(state, key);\n        }\n        return fallbackId;\n      },\n      role: \"tabpanel\",\n      get \"aria-labelledby\"() {\n        if (props[\"aria-labelledby\"]) return props[\"aria-labelledby\"];\n        const key = associatedKey();\n        if (state && key !== null) {\n          return generateTabId(state, key);\n        }\n        return undefined;\n      },\n      \"aria-label\": props[\"aria-label\"],\n      \"aria-describedby\": props[\"aria-describedby\"],\n      // Make panel focusable if no tabbable children\n      tabIndex: 0,\n    },\n    isSelected,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/focus/createHasTabbableChild.ts","../../src/tabs/createTabs.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/focus/useHasTabbableChild.ts\n\nimport { createEffect, createSignal } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport { getFocusableTreeWalker } from \"../utils/dom\";\n\ninterface HasTabbableChildOptions {\n  isDisabled?: Accessor<boolean>;\n}\n\n/**\n * Returns whether an element has a tabbable child, and updates as its children\n * or their focusability change.\n *\n * @private\n */\nexport function createHasTabbableChild(\n  ref: Accessor<Element | null | undefined>,\n  options?: HasTabbableChildOptions,\n): Accessor<boolean> {\n  const [hasTabbableChild, setHasTabbableChild] = createSignal(false);\n\n  // DOM refs are client state: read them after hydration releases its initial\n  // signal snapshot, then measure in the post-render effect.\n  createEffect(\n    () => ({ element: ref(), isDisabled: options?.isDisabled?.() }),\n    ({ element, isDisabled }) => {\n      if (!element || isDisabled) {\n        setHasTabbableChild(false);\n        return;\n      }\n\n      const update = () => {\n        const walker = getFocusableTreeWalker(element, { tabbable: true });\n        setHasTabbableChild(Boolean(walker.nextNode()));\n      };\n      let isCurrent = true;\n\n      update();\n      // Selection can make a force-mounted panel reactive before Solid applies\n      // the corresponding `inert` DOM update. Recheck once that DOM work settles,\n      // matching React Aria's post-render layout-effect observation.\n      queueMicrotask(() => {\n        if (isCurrent && ref() === element && !options?.isDisabled?.()) {\n          update();\n        }\n      });\n\n      const observer =\n        typeof MutationObserver === \"undefined\" ? undefined : new MutationObserver(update);\n      observer?.observe(element, {\n        subtree: true,\n        childList: true,\n        attributes: true,\n        attributeFilter: [\"tabindex\", \"disabled\", \"inert\", \"data-inert\"],\n      });\n      return () => {\n        isCurrent = false;\n        observer?.disconnect();\n      };\n    },\n    { ssrSource: \"client\" },\n  );\n\n  return () => (options?.isDisabled?.() ? false : hasTabbableChild());\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/TabsKeyboardDelegate.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTab.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabList.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabPanel.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/utils.ts\n\n/**\n * ARIA hooks for tab components.\n * Based on these pinned React Aria sources:\n * - packages/react-aria/src/tabs/useTabList.ts\n * - packages/react-aria/src/tabs/useTab.ts\n * - packages/react-aria/src/tabs/useTabPanel.ts\n * - packages/react-aria/src/tabs/TabsKeyboardDelegate.ts\n * - packages/react-aria/src/tabs/utils.ts\n *\n * This Solid module combines the upstream hooks and keyboard delegate.\n */\n\nimport { createMemo, createTrackedEffect } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport { createFocusRing } from \"../interactions\";\nimport { createPress } from \"../interactions\";\nimport { createHover } from \"../interactions\";\nimport { createId } from \"../ssr\";\nimport { useLocale } from \"../i18n\";\nimport { ariaTrueFalse, attrTrue } from \"../utils/domAttrs\";\nimport { createHasTabbableChild } from \"../focus/createHasTabbableChild\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\n\nexport type TabOrientation = \"horizontal\" | \"vertical\";\nexport type KeyboardActivation = \"automatic\" | \"manual\";\n\nexport interface TabListState<T = unknown> {\n  collection: Accessor<Collection<T>>;\n  selectedKey: Accessor<Key | null>;\n  setSelectedKey(key: Key): void;\n  selectedItem: Accessor<CollectionNode<T> | null>;\n  isDisabled: Accessor<boolean>;\n  keyboardActivation: Accessor<KeyboardActivation>;\n  orientation: Accessor<TabOrientation>;\n  isKeyDisabled(key: Key): boolean;\n  disabledKeys: Accessor<Set<Key>>;\n  isFocused: Accessor<boolean>;\n  setFocused(isFocused: boolean): void;\n  focusedKey: Accessor<Key | null>;\n  setFocusedKey(key: Key | null): void;\n}\n\nexport interface AriaTabListProps {\n  /** The orientation of the tab list. */\n  orientation?: TabOrientation;\n  /** How tabs are activated (on focus or on click). */\n  keyboardActivation?: KeyboardActivation;\n  /** Whether the tab list is disabled. */\n  isDisabled?: boolean;\n  /** Label for the tab list. */\n  \"aria-label\"?: string;\n  /** ID of element that labels the tab list. */\n  \"aria-labelledby\"?: string;\n  /** ID of element that describes the tab list. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TabListAria {\n  /** Props for the tab list container element. */\n  tabListProps: {\n    role: \"tablist\";\n    \"aria-orientation\": TabOrientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    \"aria-describedby\"?: string;\n    onKeyDown: (e: KeyboardEvent) => void;\n    // React's bubbling onFocus/onBlur map to focusin/focusout in Solid; the\n    // tab list must observe focus entering/leaving its child tabs.\n    onFocusIn: (e: FocusEvent) => void;\n    onFocusOut: (e: FocusEvent) => void;\n  };\n}\n\nexport interface AriaTabProps {\n  /** The key of the tab. */\n  key: Key;\n  /** Whether the tab is disabled. */\n  isDisabled?: boolean;\n  /** Label for the tab. */\n  \"aria-label\"?: string;\n  /** ID reference for the tab label. */\n  \"aria-labelledby\"?: string;\n}\n\nexport interface TabAria {\n  /** Props for the tab element. */\n  tabProps: {\n    id: string;\n    role: \"tab\";\n    \"aria-selected\": boolean | \"true\" | \"false\";\n    \"aria-disabled\": boolean | \"true\" | undefined;\n    \"aria-controls\": string | undefined;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex: number | undefined;\n    onKeyDown: (e: KeyboardEvent) => void;\n    onMouseDown: (e: MouseEvent) => void;\n    onPointerDown: (e: PointerEvent) => void;\n    onClick: (e: MouseEvent) => void;\n    onFocus: (e: FocusEvent) => void;\n    onFocusIn: (e: FocusEvent) => void;\n    onBlur: (e: FocusEvent) => void;\n  };\n  /** Whether the tab is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the tab is disabled. */\n  isDisabled: Accessor<boolean>;\n  /** Whether the tab is pressed. */\n  isPressed: Accessor<boolean>;\n  /** Whether the tab has focus. */\n  isFocused: Accessor<boolean>;\n  /** Whether the tab has visible focus ring. */\n  isFocusVisible: Accessor<boolean>;\n  /** Whether the tab is hovered. */\n  isHovered: Accessor<boolean>;\n}\n\nexport interface AriaTabPanelProps {\n  /** The key of the associated tab. */\n  id?: Key;\n  /** Label for the tab panel. */\n  \"aria-label\"?: string;\n  /** ID of element that labels the tab panel. */\n  \"aria-labelledby\"?: string;\n  /** ID of element that describes the tab panel. */\n  \"aria-describedby\"?: string;\n}\n\nexport interface TabPanelAria {\n  /** Props for the tab panel element. */\n  tabPanelProps: {\n    id: string;\n    role: \"tabpanel\";\n    \"aria-labelledby\"?: string;\n    \"aria-label\"?: string;\n    \"aria-describedby\"?: string;\n    tabIndex: number | undefined;\n  };\n  /** Whether this panel is the selected one. */\n  isSelected: Accessor<boolean>;\n}\n\nconst tabListIds = new WeakMap<TabListState<unknown>, string>();\n\nfunction getTabListId<T>(state: TabListState<T>): string {\n  let id = tabListIds.get(state as TabListState<unknown>);\n  if (!id) {\n    id = createId();\n    tabListIds.set(state as TabListState<unknown>, id);\n  }\n  return id;\n}\n\nfunction generateTabId<T>(state: TabListState<T>, key: Key): string {\n  const baseId = getTabListId(state);\n  const keyStr = String(key).replace(/\\s+/g, \"-\");\n  return `${baseId}-tab-${keyStr}`;\n}\n\nfunction generateTabPanelId<T>(state: TabListState<T>, key: Key): string {\n  const baseId = getTabListId(state);\n  const keyStr = String(key).replace(/\\s+/g, \"-\");\n  return `${baseId}-tabpanel-${keyStr}`;\n}\n\nfunction getNextKey<T>(state: TabListState<T>, currentKey: Key): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key);\n  const currentIndex = keys.indexOf(currentKey);\n\n  if (currentIndex === -1) return keys[0] ?? null;\n\n  // Find next non-disabled key, wrapping around\n  for (let i = 1; i <= keys.length; i++) {\n    const nextIndex = (currentIndex + i) % keys.length;\n    const nextKey = keys[nextIndex];\n    if (!state.isKeyDisabled(nextKey)) {\n      return nextKey;\n    }\n  }\n\n  return null;\n}\n\nfunction getPreviousKey<T>(state: TabListState<T>, currentKey: Key): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key);\n  const currentIndex = keys.indexOf(currentKey);\n\n  if (currentIndex === -1) return keys[keys.length - 1] ?? null;\n\n  // Find previous non-disabled key, wrapping around\n  for (let i = 1; i <= keys.length; i++) {\n    const prevIndex = (currentIndex - i + keys.length) % keys.length;\n    const prevKey = keys[prevIndex];\n    if (!state.isKeyDisabled(prevKey)) {\n      return prevKey;\n    }\n  }\n\n  return null;\n}\n\nfunction getFirstKey<T>(state: TabListState<T>): Key | null {\n  const coll = state.collection();\n  for (const node of coll) {\n    if (!state.isKeyDisabled(node.key)) {\n      return node.key;\n    }\n  }\n  return null;\n}\n\nfunction getLastKey<T>(state: TabListState<T>): Key | null {\n  const coll = state.collection();\n  const keys = [...coll].map((node) => node.key).reverse();\n  for (const key of keys) {\n    if (!state.isKeyDisabled(key)) {\n      return key;\n    }\n  }\n  return null;\n}\n\n/**\n * Creates ARIA props for a tab list container.\n */\nexport function createTabList<T>(props: AriaTabListProps, state: TabListState<T>): TabListAria {\n  const locale = useLocale();\n  const orientation = () => props.orientation ?? state.orientation() ?? \"horizontal\";\n  const keyboardActivation = () =>\n    props.keyboardActivation ?? state.keyboardActivation() ?? \"automatic\";\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (state.isDisabled()) return;\n\n    const currentKey = state.focusedKey() ?? state.selectedKey();\n    if (currentKey === null) return;\n\n    let nextKey: Key | null = null;\n    const isHorizontal = orientation() === \"horizontal\";\n    const isRTL = locale().direction === \"rtl\";\n\n    switch (e.key) {\n      // getKeyLeftOf/getKeyRightOf follow locale text direction regardless of\n      // orientation (TabsKeyboardDelegate.flipDirection = direction === 'rtl'),\n      // so ArrowLeft always moves to the next tab in RTL. ArrowUp/ArrowDown stay\n      // unflipped and only apply when vertical.\n      case \"ArrowLeft\":\n        nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);\n        break;\n      case \"ArrowRight\":\n        nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          nextKey = getPreviousKey(state, currentKey);\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          nextKey = getNextKey(state, currentKey);\n        }\n        break;\n      case \"Home\":\n        nextKey = getFirstKey(state);\n        break;\n      case \"End\":\n        nextKey = getLastKey(state);\n        break;\n      case \"Enter\":\n      case \" \":\n        // In manual mode, Enter/Space activates the focused tab\n        if (keyboardActivation() === \"manual\" && state.focusedKey()) {\n          state.setSelectedKey(state.focusedKey()!);\n          e.preventDefault();\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (nextKey !== null) {\n      e.preventDefault();\n      // Batch the focus + selection writes so their observable ordering matches\n      // React. `setFocusedKey` drives a reactive effect that moves DOM focus\n      // (firing native focusout/focusin); `setSelectedKey` calls\n      // `onSelectionChange` synchronously. Written bare, Solid flushes the focus\n      // effect the instant `setFocusedKey` runs — so focus moves *before* the\n      // selection callback, inverting React's order. React batches both state\n      // updates in the handler (callback fires synchronously) and defers the\n      // focus move to a layout effect. `` is the Solid equivalent: it\n      // holds the focus effect until the batch closes, so the synchronous\n      // `onSelectionChange` fires first, then focus moves — matching upstream's\n      // `callback → focusout → focusin` sequence (D4 event-sequence oracle).\n      //\n      // `setFocused(true)` stays inside the batch. Playwright `.focus()` can\n      // land DOM focus on a tab without the tablist bubbling `focusin`; the\n      // item focus-move effect is gated on `isFocused` (RAC\n      // `manager.isFocused`). Setting it here, together with `focusedKey`,\n      // avoids the previous-tab effect stealing focus back mid-gesture.\n      {\n        state.setFocused(true);\n        state.setFocusedKey(nextKey);\n        // Selection follows focus only for keyboard navigation in automatic mode\n        // (mirrors useSelectableCollection's selectOnFocus in navigateToKey).\n        if (keyboardActivation() === \"automatic\") {\n          state.setSelectedKey(nextKey);\n        }\n      }\n      // Move DOM focus in the keydown handler so it lands before keyup.\n      // Solid `createEffect` is scheduled after paint; Playwright records\n      // keyup in the same turn, and a non-reactive `let` tab ref can leave\n      // the item effect with no element. Scope the query to the tablist so\n      // React/Solid comparison-panel ids cannot collide.\n      const tabList = e.currentTarget as Element | null;\n      const nextId = generateTabId(state, nextKey);\n      const nextEl = tabList?.querySelector(`#${CSS.escape(nextId)}`);\n      if (nextEl instanceof HTMLElement && nextEl.ownerDocument.activeElement !== nextEl) {\n        nextEl.focus();\n      }\n    }\n  };\n\n  const handleFocus = () => {\n    state.setFocused(true);\n    // If no focused key, focus the selected key\n    if (state.focusedKey() === null && state.selectedKey() !== null) {\n      state.setFocusedKey(state.selectedKey());\n    }\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    // Only blur if focus is leaving the tab list entirely\n    const relatedTarget = e.relatedTarget as Element | null;\n    if (relatedTarget && (e.currentTarget as Element).contains(relatedTarget)) {\n      return;\n    }\n    state.setFocused(false);\n  };\n\n  return {\n    tabListProps: {\n      role: \"tablist\",\n      get \"aria-orientation\"() {\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return props[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return props[\"aria-labelledby\"];\n      },\n      get \"aria-describedby\"() {\n        return props[\"aria-describedby\"];\n      },\n      onKeyDown: handleKeyDown,\n      onFocusIn: handleFocus,\n      onFocusOut: handleBlur,\n    },\n  };\n}\n\n/**\n * Creates ARIA props for an individual tab.\n */\nexport function createTab<T>(\n  props: AriaTabProps,\n  state: TabListState<T>,\n  ref?: Accessor<HTMLElement | null>,\n): TabAria {\n  const key = () => props.key;\n\n  const isSelected = createMemo(() => state.selectedKey() === key());\n  const isDisabled = createMemo(() => {\n    if (props.isDisabled) return true;\n    return state.isKeyDisabled(key());\n  });\n\n  // Whether this tab is the roving-focus target (state layer), used for the\n  // roving tabIndex and DOM focus alignment. The returned isFocused is the\n  // DOM-focus-based ring state, matching upstream's useFocusRing semantics.\n  const isKeyFocused = createMemo(() => state.focusedKey() === key());\n\n  // Focus ring\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  // Press handling. Selection timing mirrors useSelectableItem's default\n  // (non-shouldSelectOnPressUp) path: mouse selects on press start and\n  // keyboard on key down, while touch, pen, and virtual pointers select on\n  // press up.\n  const selectTab = () => {\n    // Press handlers select only — they do NOT set the focused key. Upstream's\n    // useSelectableItem does the same: its press/onSelect path calls\n    // replaceSelection. `focusedKey` is written by handleFocusIn (DOM `focusin`)\n    // and by createTabListState's selected→focused copy after paint (RAC\n    // useTabListState useEffect). Setting it here would flip the roving tabIndex\n    // during press, before React's post-paint copy and before native focus.\n    state.setSelectedKey(key());\n  };\n  const { isPressed, pressProps } = createPress({\n    get isDisabled() {\n      return isDisabled();\n    },\n    onPressStart: (e) => {\n      if (e.pointerType === \"mouse\" || e.pointerType === \"keyboard\") {\n        selectTab();\n      }\n    },\n    onPress: (e) => {\n      if (e.pointerType === \"touch\" || e.pointerType === \"pen\" || e.pointerType === \"virtual\") {\n        selectTab();\n      }\n    },\n  });\n\n  // Hover handling\n  const { isHovered } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Generate IDs\n  const tabId = generateTabId(state, key());\n  const tabPanelId = generateTabPanelId(state, key());\n\n  // Helper to safely call event handlers that may be bound tuples\n  const callHandler = <E extends Event>(handler: unknown, event: E) => {\n    if (typeof handler === \"function\") {\n      (handler as (e: E) => void)(event);\n      return;\n    }\n    if (Array.isArray(handler) && handler.length >= 2 && typeof handler[1] === \"function\") {\n      (handler[1] as (this: unknown, e: E) => void).call(handler[0], event);\n    }\n  };\n\n  // Focus management. The focus ring reacts to the native `focus` event, but the\n  // roving-tabindex commit is deliberately bound to `focusin` (see\n  // handleFocusIn) so its DOM reflection lands one event later — matching React,\n  // whose `onFocus` is a `focusin`-delegated listener at the app root.\n  const handleFocus = (e: FocusEvent) => {\n    callHandler(focusProps.onFocus, e);\n  };\n\n  // Roving-tabindex commit (D4 event-ordering). React's `onFocus` is delegated\n  // to a single `focusin` listener at the app root, so the roving tabIndex it\n  // drives reflects one event *after* the native `focus`. Binding the\n  // focusedKey write here (to `focusin`) mirrors that timing: the D4 oracle\n  // records event targets from a document-level capture-phase listener, which\n  // runs before this at-target handler, so a touch tap — whose selection lands\n  // on press-up, after focus — is still observed with tabIndex=-1 at `focusin`,\n  // exactly as React. Mouse press-start selection does not write focusedKey here;\n  // createTabListState copies selected→focused after paint, so capture of\n  // pointerup/click still reads tabindex=\"-1\". Setting it on the earlier `focus`\n  // event flipped the tab a whole event too soon, so touch taps diverged at\n  // `focusin`. The D4 event driver holds this ordering.\n  const handleFocusIn = () => {\n    // Batch collection-focused + roving key. Native `focus` is too early:\n    // setting isFocused there flushes the previous tab's focus-move effect\n    // and steals a touch tap back to Overview (D4 touch-tap).\n    {\n      state.setFocused(true);\n      state.setFocusedKey(key());\n    }\n  };\n\n  const handleBlur = (e: FocusEvent) => {\n    callHandler(focusProps.onBlur, e);\n  };\n\n  // Combine all handlers\n  const handleKeyDown = (e: KeyboardEvent) => {\n    callHandler(pressProps.onKeyDown, e);\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    callHandler(pressProps.onMouseDown, e);\n  };\n\n  const handlePointerDown = (e: PointerEvent) => {\n    callHandler(pressProps.onPointerDown, e);\n  };\n\n  const handleClick = (e: MouseEvent) => {\n    callHandler(pressProps.onClick, e);\n  };\n\n  // Keep DOM focus aligned with focusedKey updates from keyboard navigation.\n  // Only while the tab list itself is focused (mirrors useSelectableItem's\n  // manager.isFocused guard), so programmatic selection changes don't steal\n  // focus from elsewhere in the document.\n  createTrackedEffect(() => {\n    const element = ref?.();\n    if (!state.isFocused() || !isKeyFocused() || !element) return;\n\n    const activeElement = element.ownerDocument?.activeElement;\n    if (activeElement !== element) {\n      element.focus();\n    }\n  });\n\n  return {\n    tabProps: {\n      id: tabId,\n      role: \"tab\",\n      get \"aria-selected\"() {\n        return ariaTrueFalse(isSelected());\n      },\n      get \"aria-disabled\"() {\n        return attrTrue(isDisabled());\n      },\n      get \"aria-controls\"() {\n        return isSelected() ? tabPanelId : undefined;\n      },\n      \"aria-label\": props[\"aria-label\"],\n      \"aria-labelledby\": props[\"aria-labelledby\"],\n      get tabIndex() {\n        // Roving tabIndex follows the focused key (mirrors useSelectableItem);\n        // disabled tabs get no tabIndex at all (mirrors useTab).\n        if (isDisabled()) return undefined;\n        return isKeyFocused() ? 0 : -1;\n      },\n      onKeyDown: handleKeyDown,\n      onMouseDown: handleMouseDown,\n      onPointerDown: handlePointerDown,\n      onClick: handleClick,\n      onFocus: handleFocus,\n      onFocusIn: handleFocusIn,\n      onBlur: handleBlur,\n    },\n    isSelected,\n    isDisabled,\n    isPressed,\n    isFocused,\n    isFocusVisible,\n    isHovered,\n  };\n}\n\n/**\n * Creates ARIA props for a tab panel.\n */\nexport function createTabPanel<T>(\n  props: AriaTabPanelProps,\n  state: TabListState<T> | null,\n  ref: Accessor<Element | null | undefined> = () => null,\n): TabPanelAria {\n  const fallbackId = createId();\n\n  // Shared panel pattern: if no explicit id is provided, associate the panel\n  // with the currently selected tab.\n  const associatedKey = createMemo<Key | null>(() => {\n    if (state === null) return null;\n    return props.id ?? state.selectedKey();\n  });\n\n  // If state is null, the panel is always visible (SSR fallback).\n  const isSelected = createMemo(() => {\n    if (state === null) return true;\n    if (props.id === undefined) {\n      return state.selectedKey() !== null;\n    }\n    return state.selectedKey() === props.id;\n  });\n  const hasTabbableChild = createHasTabbableChild(ref, {\n    // Inactive force-mounted panels are inert, so their descendants are not\n    // tabbable. Recompute and observe only when a panel becomes active; this\n    // also disconnects an observer if a force-mounted panel is detached.\n    isDisabled: () => !isSelected(),\n  });\n\n  return {\n    tabPanelProps: {\n      get id() {\n        const key = associatedKey();\n        if (state && key !== null) {\n          return generateTabPanelId(state, key);\n        }\n        return fallbackId;\n      },\n      role: \"tabpanel\",\n      get \"aria-labelledby\"() {\n        if (props[\"aria-labelledby\"]) return props[\"aria-labelledby\"];\n        const key = associatedKey();\n        if (state && key !== null) {\n          return generateTabId(state, key);\n        }\n        return undefined;\n      },\n      \"aria-label\": props[\"aria-label\"],\n      \"aria-describedby\": props[\"aria-describedby\"],\n      // Tabbing from the selected tab should enter the first tabbable child.\n      // Keep the panel itself in sequential focus order only when it is empty\n      // of tabbable descendants.\n      get tabIndex() {\n        return hasTabbableChild() ? undefined : 0;\n      },\n    },\n    isSelected,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/tabs.jsx

@@ -1,13 +1,96 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/focus/useHasTabbableChild.ts
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/TabsKeyboardDelegate.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTab.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/useTabPanel.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/tabs/utils.ts
+import { i as attrTrue, n as ariaTrueFalse } from "./mergeProps.jsx";
+import { i as getFocusableTreeWalker } from "./dom.jsx";
 import { t as createPress } from "./createPress.jsx";
 import { t as createFocusRing } from "./createFocusRing.jsx";
 import { t as createHover } from "./createHover.jsx";
 import { i as useLocale } from "./locale.jsx";
 import { createId } from "../ssr/index.jsx";
-import { batch, createEffect, createMemo } from "solid-js";
+import { createEffect, createMemo, createSignal, createTrackedEffect } from "solid-js";
+//#region src/focus/createHasTabbableChild.ts
+/**
+* Returns whether an element has a tabbable child, and updates as its children
+* or their focusability change.
+*
+* @private
+*/
+function createHasTabbableChild(ref, options) {
+	const [hasTabbableChild, setHasTabbableChild] = createSignal(false);
+	createEffect(() => ({
+		element: ref(),
+		isDisabled: options?.isDisabled?.()
+	}), ({ element, isDisabled }) => {
+		if (!element || isDisabled) {
+			setHasTabbableChild(false);
+			return;
+		}
+		const update = () => {
+			const walker = getFocusableTreeWalker(element, { tabbable: true });
+			setHasTabbableChild(Boolean(walker.nextNode()));
+		};
+		let isCurrent = true;
+		update();
+		queueMicrotask(() => {
+			if (isCurrent && ref() === element && !options?.isDisabled?.()) update();
+		});
+		const observer = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(update);
+		observer?.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"tabindex",
+				"disabled",
+				"inert",
+				"data-inert"
+			]
+		});
+		return () => {
+			isCurrent = false;
+			observer?.disconnect();
+		};
+	}, { ssrSource: "client" });
+	return () => options?.isDisabled?.() ? false : hasTabbableChild();
+}
+//#endregion
 //#region src/tabs/createTabs.ts
 /**
 * ARIA hooks for tab components.
-* Based on @react-aria/tabs.
+* Based on these pinned React Aria sources:
+* - packages/react-aria/src/tabs/useTabList.ts
+* - packages/react-aria/src/tabs/useTab.ts
+* - packages/react-aria/src/tabs/useTabPanel.ts
+* - packages/react-aria/src/tabs/TabsKeyboardDelegate.ts
+* - packages/react-aria/src/tabs/utils.ts
+*
+* This Solid module combines the upstream hooks and keyboard delegate.
 */
 const tabListIds = /* @__PURE__ */ new WeakMap();
 function getTabListId(state) {
@@ -70,10 +153,10 @@ function createTabList(props, state) {
 		const isRTL = locale().direction === "rtl";
 		switch (e.key) {
 			case "ArrowLeft":
-				if (isHorizontal) nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
+				nextKey = isRTL ? getNextKey(state, currentKey) : getPreviousKey(state, currentKey);
 				break;
 			case "ArrowRight":
-				if (isHorizontal) nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
+				nextKey = isRTL ? getPreviousKey(state, currentKey) : getNextKey(state, currentKey);
 				break;
 			case "ArrowUp":
 				if (!isHorizontal) nextKey = getPreviousKey(state, currentKey);
@@ -98,10 +181,13 @@ function createTabList(props, state) {
 		}
 		if (nextKey !== null) {
 			e.preventDefault();
-			batch(() => {
-				state.setFocusedKey(nextKey);
-				if (keyboardActivation() === "automatic") state.setSelectedKey(nextKey);
-			});
+			state.setFocused(true);
+			state.setFocusedKey(nextKey);
+			if (keyboardActivation() === "automatic") state.setSelectedKey(nextKey);
+			const tabList = e.currentTarget;
+			const nextId = generateTabId(state, nextKey);
+			const nextEl = tabList?.querySelector(`#${CSS.escape(nextId)}`);
+			if (nextEl instanceof HTMLElement && nextEl.ownerDocument.activeElement !== nextEl) nextEl.focus();
 		}
 	};
 	const handleFocus = () => {
@@ -115,10 +201,18 @@ function createTabList(props, state) {
 	};
 	return { tabListProps: {
 		role: "tablist",
-		"aria-orientation": orientation(),
-		"aria-label": props["aria-label"],
-		"aria-labelledby": props["aria-labelledby"],
-		"aria-describedby": props["aria-describedby"],
+		get "aria-orientation"() {
+			return orientation();
+		},
+		get "aria-label"() {
+			return props["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return props["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return props["aria-describedby"];
+		},
 		onKeyDown: handleKeyDown,
 		onFocusIn: handleFocus,
 		onFocusOut: handleBlur
@@ -166,6 +260,7 @@ function createTab(props, state, ref) {
 		callHandler(focusProps.onFocus, e);
 	};
 	const handleFocusIn = () => {
+		state.setFocused(true);
 		state.setFocusedKey(key());
 	};
 	const handleBlur = (e) => {
@@ -183,7 +278,7 @@ function createTab(props, state, ref) {
 	const handleClick = (e) => {
 		callHandler(pressProps.onClick, e);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const element = ref?.();
 		if (!state.isFocused() || !isKeyFocused() || !element) return;
 		if (element.ownerDocument?.activeElement !== element) element.focus();
@@ -193,10 +288,10 @@ function createTab(props, state, ref) {
 			id: tabId,
 			role: "tab",
 			get "aria-selected"() {
-				return isSelected();
+				return ariaTrueFalse(isSelected());
 			},
 			get "aria-disabled"() {
-				return isDisabled() || void 0;
+				return attrTrue(isDisabled());
 			},
 			get "aria-controls"() {
 				return isSelected() ? tabPanelId : void 0;
@@ -226,7 +321,7 @@ function createTab(props, state, ref) {
 /**
 * Creates ARIA props for a tab panel.
 */
-function createTabPanel(props, state) {
+function createTabPanel(props, state, ref = () => null) {
 	const fallbackId = createId();
 	const associatedKey = createMemo(() => {
 		if (state === null) return null;
@@ -237,6 +332,7 @@ function createTabPanel(props, state) {
 		if (props.id === void 0) return state.selectedKey() !== null;
 		return state.selectedKey() === props.id;
 	});
+	const hasTabbableChild = createHasTabbableChild(ref, { isDisabled: () => !isSelected() });
 	return {
 		tabPanelProps: {
 			get id() {
@@ -252,7 +348,9 @@ function createTabPanel(props, state) {
 			},
 			"aria-label": props["aria-label"],
 			"aria-describedby": props["aria-describedby"],
-			tabIndex: 0
+			get tabIndex() {
+				return hasTabbableChild() ? void 0 : 0;
+			}
 		},
 		isSelected
 	};