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

package/dist/_chunk/toolbar.js

@@ -1,7 +1,20 @@
+/*
+* Copyright 2023 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/toolbar/useToolbar.ts
+import { t as onOwnedCleanup } from "./owner.js";
 import { t as access } from "./reactivity.js";
-import { g as isTabbable, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.js";
+import { a as getOwnerDocument, f as isFocusable, h as isTabbable, w as focusSafely } from "./dom.js";
 import { i as useLocale } from "./locale.js";
-import { createSignal, onCleanup, onMount } from "solid-js";
+import { createSignal, onSettled } from "solid-js";
 //#region src/toolbar/createToolbar.ts
 /**
 * createToolbar - Accessibility hook for toolbar elements
@@ -37,8 +50,10 @@ function createFocusManager(ref) {
 			if (accept) elements = elements.filter(accept);
 			if (!current || elements.length === 0) return null;
 			let nextIndex = elements.indexOf(current) + 1;
-			if (nextIndex >= elements.length) if (wrap) nextIndex = 0;
-			else return null;
+			if (nextIndex >= elements.length) {
+				if (wrap) nextIndex = 0;
+				else return null;
+			}
 			const nextElement = elements[nextIndex];
 			if (nextElement) {
 				focusSafely(nextElement);
@@ -56,8 +71,10 @@ function createFocusManager(ref) {
 			if (accept) elements = elements.filter(accept);
 			if (!current || elements.length === 0) return null;
 			let prevIndex = elements.indexOf(current) - 1;
-			if (prevIndex < 0) if (wrap) prevIndex = elements.length - 1;
-			else return null;
+			if (prevIndex < 0) {
+				if (wrap) prevIndex = elements.length - 1;
+				else return null;
+			}
 			const prevElement = elements[prevIndex];
 			if (prevElement) {
 				focusSafely(prevElement);
@@ -118,7 +135,7 @@ function createToolbar(props = {}) {
 	const ariaLabel = () => access(props["aria-label"]);
 	const ariaLabelledby = () => access(props["aria-labelledby"]);
 	const focusManager = createFocusManager(() => toolbarRef);
-	onMount(() => {
+	onSettled(() => {
 		if (toolbarRef) {
 			const parentToolbar = toolbarRef.parentElement?.closest("[role=\"toolbar\"]");
 			setIsInToolbar(!!parentToolbar);
@@ -195,7 +212,7 @@ function createToolbar(props = {}) {
 		el.addEventListener("keydown", onKeyDown, true);
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
-		onCleanup(() => {
+		onOwnedCleanup(() => {
 			el.removeEventListener("keydown", onKeyDown, true);
 			el.removeEventListener("focus", onFocus, true);
 			el.removeEventListener("blur", onBlur, true);

package/dist/_chunk/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/*\n * Copyright 2023 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/toolbar/useToolbar.ts\n\n/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport {\n  type MaybeAccessor,\n  access,\n  onOwnedCleanup,\n  getOwnerDocument,\n  isFocusable,\n  isTabbable,\n} from \"../utils\";\nimport { createSignal, onSettled } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport { useLocale } from \"../i18n\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onSettled(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onOwnedCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/toolbar.jsx

@@ -1,7 +1,20 @@
+/*
+* Copyright 2023 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/toolbar/useToolbar.ts
+import { t as onOwnedCleanup } from "./owner.jsx";
 import { t as access } from "./reactivity.jsx";
-import { g as isTabbable, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.jsx";
+import { a as getOwnerDocument, f as isFocusable, h as isTabbable, w as focusSafely } from "./dom.jsx";
 import { i as useLocale } from "./locale.jsx";
-import { createSignal, onCleanup, onMount } from "solid-js";
+import { createSignal, onSettled } from "solid-js";
 //#region src/toolbar/createToolbar.ts
 /**
 * createToolbar - Accessibility hook for toolbar elements
@@ -37,8 +50,10 @@ function createFocusManager(ref) {
 			if (accept) elements = elements.filter(accept);
 			if (!current || elements.length === 0) return null;
 			let nextIndex = elements.indexOf(current) + 1;
-			if (nextIndex >= elements.length) if (wrap) nextIndex = 0;
-			else return null;
+			if (nextIndex >= elements.length) {
+				if (wrap) nextIndex = 0;
+				else return null;
+			}
 			const nextElement = elements[nextIndex];
 			if (nextElement) {
 				focusSafely(nextElement);
@@ -56,8 +71,10 @@ function createFocusManager(ref) {
 			if (accept) elements = elements.filter(accept);
 			if (!current || elements.length === 0) return null;
 			let prevIndex = elements.indexOf(current) - 1;
-			if (prevIndex < 0) if (wrap) prevIndex = elements.length - 1;
-			else return null;
+			if (prevIndex < 0) {
+				if (wrap) prevIndex = elements.length - 1;
+				else return null;
+			}
 			const prevElement = elements[prevIndex];
 			if (prevElement) {
 				focusSafely(prevElement);
@@ -118,7 +135,7 @@ function createToolbar(props = {}) {
 	const ariaLabel = () => access(props["aria-label"]);
 	const ariaLabelledby = () => access(props["aria-labelledby"]);
 	const focusManager = createFocusManager(() => toolbarRef);
-	onMount(() => {
+	onSettled(() => {
 		if (toolbarRef) {
 			const parentToolbar = toolbarRef.parentElement?.closest("[role=\"toolbar\"]");
 			setIsInToolbar(!!parentToolbar);
@@ -195,7 +212,7 @@ function createToolbar(props = {}) {
 		el.addEventListener("keydown", onKeyDown, true);
 		el.addEventListener("focus", onFocus, true);
 		el.addEventListener("blur", onBlur, true);
-		onCleanup(() => {
+		onOwnedCleanup(() => {
 			el.removeEventListener("keydown", onKeyDown, true);
 			el.removeEventListener("focus", onFocus, true);
 			el.removeEventListener("blur", onBlur, true);

package/dist/_chunk/toolbar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.jsx","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"toolbar.jsx","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/*\n * Copyright 2023 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/toolbar/useToolbar.ts\n\n/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport {\n  type MaybeAccessor,\n  access,\n  onOwnedCleanup,\n  getOwnerDocument,\n  isFocusable,\n  isTabbable,\n} from \"../utils\";\nimport { createSignal, onSettled } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport { useLocale } from \"../i18n\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onSettled(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onOwnedCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}