se-design 1.0.75 → 1.0.76-dev2

package/dist/index68.js

@@ -1,59 +1,87 @@
-import * as c from "react";
-function R({
-  itemIds: n,
-  tabIndex: i = 0,
-  defaultFocusedId: l,
-  orientation: o = "horizontal",
-  cols: u,
+import { useRef as u, useCallback as f, useEffect as P } from "react";
+import { useComboboxNavigation as y } from "./index76.js";
+import { useDismissOnFocusOut as R } from "./index77.js";
+function M({
+  items: l,
+  isOpen: t,
+  onOpenChange: s,
+  onSelect: g,
+  listboxId: n,
   loop: h = !0,
-  onFocusChange: x
+  disabled: x = !1,
+  optionSelector: b = '[role="option"]',
+  hasItems: c
 }) {
-  const [a, g] = c.useState(l || n[0] || ""), b = c.useRef({});
-  c.useEffect(() => {
-    if (n.length > 0 && !n.includes(a)) {
-      const e = l || n[0] || "";
-      g(e);
+  const d = u(null), r = u(!1), i = u(!1), m = c !== void 0 ? c : l.length > 0, a = f(() => {
+    s(!1);
+  }, [s]);
+  P(() => {
+    t || (r.current = !1);
+  }, [t]);
+  const e = y({
+    items: l,
+    isOpen: t,
+    onSelect: g,
+    onClose: a,
+    onOpen: () => s(!0),
+    loop: h,
+    disabled: x,
+    listboxRef: d,
+    optionSelector: b
+  }), p = R({
+    onFocusOut: a,
+    onEscape: a,
+    disabled: !t
+  }), v = {
+    ...p,
+    onBlurCapture: (o) => {
+      if (!r.current) {
+        if (i.current) {
+          i.current = !1;
+          return;
+        }
+        p.onBlurCapture(o);
+      }
     }
-  }, [n, a, l]);
-  const k = c.useCallback((e) => {
-    g(e), x?.(e);
-  }, [x]), v = c.useCallback((e, t = 1) => {
-    if (n.length === 0) return;
-    const f = n.indexOf(a), s = Math.max(0, f);
-    let r = s;
-    switch (e) {
-      case "first":
-        r = 0;
-        break;
-      case "last":
-        r = n.length - 1;
-        break;
-      case "prev":
-        h ? r = (s - t + n.length) % n.length : r = Math.max(0, s - t);
-        break;
-      case "next":
-        h ? r = (s + t) % n.length : r = Math.min(n.length - 1, s + t);
-        break;
+  }, I = {
+    role: "combobox",
+    "aria-expanded": t && m,
+    "aria-haspopup": "listbox",
+    "aria-controls": t ? n : void 0,
+    "aria-autocomplete": "list",
+    "aria-activedescendant": e.highlightedIndex >= 0 ? e.getOptionId(n, e.highlightedIndex) : void 0,
+    onKeyDown: (o) => {
+      o.key === "Tab" && (i.current = !0), e.handleKeyDown(o);
     }
-    const w = n[r];
-    w && b.current[w]?.focus();
-  }, [n, a, h]), y = c.useCallback((e) => ({
-    ref: (t) => {
-      b.current[e] = t;
+  }, w = {
+    id: n,
+    role: "listbox",
+    ref: d,
+    onMouseDownCapture: (o) => {
+      r.current = !0;
     },
-    tabIndex: a === e ? i : -1,
-    onFocus: () => k(e)
-  }), [a, i, k]), p = c.useCallback((e) => {
-    let t = null, f = 1;
-    e.key === "Home" ? t = "first" : e.key === "End" ? t = "last" : (o !== "vertical" && (e.key === "ArrowLeft" ? t = "prev" : e.key === "ArrowRight" && (t = "next")), !t && o !== "horizontal" && (e.key === "ArrowUp" ? t = "prev" : e.key === "ArrowDown" && (t = "next"), t && u && (f = u))), t && (e.preventDefault(), e.stopPropagation(), v(t, f));
-  }, [o, u, v]);
+    onMouseUpCapture: (o) => {
+      r.current = !1;
+    },
+    onMouseLeave: (o) => {
+      r.current = !1;
+    }
+  }, C = f((o, D = !1) => ({
+    id: e.getOptionId(n, o),
+    role: "option",
+    "aria-selected": D
+  }), [e.getOptionId, n]);
   return {
-    setFocusedId: k,
-    handleKeyDown: p,
-    getRovingItemProps: y
+    containerProps: v,
+    inputProps: I,
+    listboxProps: w,
+    getOptionProps: C,
+    highlightedIndex: e.highlightedIndex,
+    setHighlightedIndex: e.setHighlightedIndex,
+    getOptionId: e.getOptionId
   };
 }
 export {
-  R as useRovingFocus
+  M as useCombobox
 };
 //# sourceMappingURL=index68.js.map

package/dist/index68.js.map

@@ -1 +1 @@
-{"version":3,"file":"index68.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n  /**\n   * Array of item IDs in order\n   */\n  itemIds: string[];\n\n  /**\n   * The tabIndex to apply to the currently focused item in the roving group.\n   * Defaults to 0 \n   */\n  tabIndex?: number;\n\n  /**\n   * Initial focused item ID. Defaults to first item.\n   */\n  defaultFocusedId?: string;\n\n  /**\n   * Orientation for arrow key mapping.\n   * - horizontal: ArrowLeft/ArrowRight\n   * - vertical: ArrowUp/ArrowDown\n   * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n   */\n  orientation?: 'horizontal' | 'vertical' | 'grid';\n\n  /**\n   * Number of columns in the grid. Required when orientation is 'grid'.\n   * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n   */\n  cols?: number;\n\n  /**\n   * Whether navigation wraps around at ends. Defaults to true.\n   */\n  loop?: boolean;\n\n  /**\n   * Callback when focus changes\n   */\n  onFocusChange?: (id: string) => void;\n}\n\nexport interface RovingItemProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n}\n\nexport interface UseRovingFocusReturn {\n  /**\n   * Set focused item ID manually\n   */\n  setFocusedId: (id: string) => void;\n\n  /**\n   * Keyboard handler for arrow/Home/End navigation.\n   * Attach to each item's onKeyDown.\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n\n  /**\n   * Get props for an item in the roving focus group (ref + tabIndex)\n   */\n  getRovingItemProps: (id: string) => RovingItemProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['tab1', 'tab2', 'tab3'],\n *   orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n *   orientation: 'grid',\n *   cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n  itemIds,\n  tabIndex = 0,\n  defaultFocusedId,\n  orientation = 'horizontal',\n  cols,\n  loop = true,\n  onFocusChange\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n  const [focusedId, setFocusedIdState] = React.useState<string>(\n    defaultFocusedId || itemIds[0] || ''\n  );\n\n  const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n  // Sync focusedId if itemIds change and current focusedId is no longer valid\n  React.useEffect(() => {\n    if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n      const newFocusedId = defaultFocusedId || itemIds[0] || '';\n      setFocusedIdState(newFocusedId);\n    }\n  }, [itemIds, focusedId, defaultFocusedId]);\n\n  const setFocusedId = React.useCallback(\n    (id: string) => {\n      setFocusedIdState(id);\n      onFocusChange?.(id);\n    },\n    [onFocusChange]\n  );\n\n  const moveFocus = React.useCallback(\n    (direction: RovingDirection, step: number = 1) => {\n      if (itemIds.length === 0) return;\n\n      const currentIdx = itemIds.indexOf(focusedId);\n      const safeIdx = Math.max(0, currentIdx);\n      let nextIdx = safeIdx;\n\n      switch (direction) {\n        case 'first':\n          nextIdx = 0;\n          break;\n        case 'last':\n          nextIdx = itemIds.length - 1;\n          break;\n        case 'prev':\n          if (loop) {\n            nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n          } else {\n            nextIdx = Math.max(0, safeIdx - step);\n          }\n          break;\n        case 'next':\n          if (loop) {\n            nextIdx = (safeIdx + step) % itemIds.length;\n          } else {\n            nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n          }\n          break;\n      }\n\n      const nextId = itemIds[nextIdx];\n      if (!nextId) return;\n\n      itemRefs.current[nextId]?.focus();\n    },\n    [itemIds, focusedId, loop]\n  );\n\n  const getRovingItemProps = React.useCallback(\n    (id: string): RovingItemProps => ({\n      ref: (el: HTMLElement | null) => {\n        itemRefs.current[id] = el;\n      },\n      tabIndex: focusedId === id ? tabIndex : -1,\n      onFocus: () => setFocusedId(id)\n    }),\n    [focusedId, tabIndex, setFocusedId]\n  );\n\n  // Keyboard handler for arrow/Home/End navigation\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let direction: RovingDirection | null = null;\n      let step = 1;\n\n      if (e.key === 'Home') {\n        direction = 'first';\n      } else if (e.key === 'End') {\n        direction = 'last';\n      } else {\n        // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n        if (orientation !== 'vertical') {\n          if (e.key === 'ArrowLeft') direction = 'prev';\n          else if (e.key === 'ArrowRight') direction = 'next';\n        }\n        // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n        if (!direction && orientation !== 'horizontal') {\n          if (e.key === 'ArrowUp') direction = 'prev';\n          else if (e.key === 'ArrowDown') direction = 'next';\n          if (direction && cols) step = cols;\n        }\n      }\n\n      if (direction) {\n        e.preventDefault();\n        e.stopPropagation();\n        moveFocus(direction, step);\n      }\n    },\n    [orientation, cols, moveFocus]\n  );\n\n  return {\n    setFocusedId,\n    handleKeyDown,\n    getRovingItemProps\n  };\n}\n"],"names":["React","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","current","focus","getRovingItemProps","ref","el","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"index68.js","sources":["../src/utils/a11y/useCombobox.ts"],"sourcesContent":["import { useRef, useCallback, useEffect } from 'react';\nimport type { RefObject } from 'react';\nimport { useComboboxNavigation } from './useComboboxNavigation';\nimport { useDismissOnFocusOut } from './useDismissOnFocusOut';\nimport type { UseDismissOnFocusOutReturn } from './useDismissOnFocusOut';\n\nexport interface UseComboboxOptions<T = any> {\n  /**\n   * Array of items to navigate through\n   */\n  items: T[];\n  \n  /**\n   * Whether the dropdown is currently open\n   */\n  isOpen: boolean;\n  \n  /**\n   * Callback to change the open state\n   */\n  onOpenChange: (open: boolean) => void;\n  \n  /**\n   * Callback when an item is selected (Enter key)\n   */\n  onSelect: (item: T, index: number) => void;\n  \n  /**\n   * Stable ID for the listbox element\n   */\n  listboxId: string;\n  \n  /**\n   * Whether to wrap around at the ends of the list.\n   * Default: true\n   */\n  loop?: boolean;\n  \n  /**\n   * Whether keyboard navigation is disabled\n   * (e.g., for custom rendered content)\n   */\n  disabled?: boolean;\n  \n  /**\n   * CSS selector for option elements (default: '[role=\"option\"]')\n   */\n  optionSelector?: string;\n  \n  /**\n   * Whether the listbox has any items to show\n   * Used for aria-expanded logic\n   * Default: items.length > 0\n   */\n  hasItems?: boolean;\n}\n\nexport interface UseComboboxReturn {\n  /**\n   * Props to spread on the container element (handles dismiss on focus out)\n   */\n  containerProps: UseDismissOnFocusOutReturn<HTMLElement>;\n  \n  /**\n   * Props to spread on the combobox input element\n   */\n  inputProps: {\n    role: 'combobox';\n    'aria-expanded': boolean;\n    'aria-haspopup': 'listbox';\n    'aria-controls': string | undefined;\n    'aria-autocomplete': 'list';\n    'aria-activedescendant': string | undefined;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n  };\n  \n  /**\n   * Props to spread on the listbox element\n   */\n  listboxProps: {\n    id: string;\n    role: 'listbox';\n    ref: RefObject<HTMLDivElement | null>;\n    onMouseDownCapture: (e: React.MouseEvent) => void;\n    onMouseUpCapture: (e: React.MouseEvent) => void;\n    onMouseLeave: (e: React.MouseEvent) => void;\n  };\n  \n  /**\n   * Generate props for an option element at the given index\n   * @param selected - Whether this option is the currently selected/chosen value (not keyboard highlight)\n   */\n  getOptionProps: (index: number, selected?: boolean) => {\n    id: string;\n    role: 'option';\n    'aria-selected': boolean;\n  };\n  \n  /**\n   * Currently highlighted index (-1 if none)\n   */\n  highlightedIndex: number;\n  \n  /**\n   * Set the highlighted index manually\n   */\n  setHighlightedIndex: (index: number | ((prev: number) => number)) => void;\n  \n  /**\n   * Generate stable ID for an option\n   */\n  getOptionId: (listboxId: string, index: number) => string;\n}\n\n/**\n * Comprehensive hook for implementing WAI-ARIA combobox pattern.\n * \n * Combines:\n * - Keyboard navigation (Arrow Up/Down, Enter, Escape, Tab)\n * - Focus management and dismissal\n * - ARIA attributes for accessibility\n * - Auto-scroll highlighted item into view\n * \n * This hook provides a complete, batteries-included solution for building\n * accessible combobox components (autocomplete, select, search with suggestions, etc.)\n * \n * @example Basic usage\n * ```tsx\n * const MyCombobox = () => {\n *   const [isOpen, setIsOpen] = useState(false);\n *   const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);\n *   \n *   const {\n *     containerProps,\n *     inputProps,\n *     listboxProps,\n *     getOptionProps,\n *     highlightedIndex\n *   } = useCombobox({\n *     items,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (item) => console.log('Selected:', item),\n *     listboxId: 'my-listbox'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input {...inputProps} />\n *       {isOpen && (\n *         <div {...listboxProps}>\n *           {items.map((item, i) => (\n *             <div key={i} {...getOptionProps(i)}>\n *               {item}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n * \n * @example With custom ARIA labels and handlers\n * ```tsx\n * const MySearchBox = () => {\n *   const [query, setQuery] = useState('');\n *   const [suggestions, setSuggestions] = useState([]);\n *   const [isOpen, setIsOpen] = useState(false);\n *   \n *   const { containerProps, inputProps, listboxProps, getOptionProps } = useCombobox({\n *     items: suggestions,\n *     isOpen,\n *     onOpenChange: setIsOpen,\n *     onSelect: (suggestion) => {\n *       setQuery(suggestion);\n *       setIsOpen(false);\n *     },\n *     listboxId: 'search-suggestions'\n *   });\n *   \n *   return (\n *     <div {...containerProps}>\n *       <input\n *         {...inputProps}\n *         value={query}\n *         onChange={(e) => setQuery(e.target.value)}\n *         aria-label=\"Search\"\n *       />\n *       {isOpen && suggestions.length > 0 && (\n *         <div {...listboxProps} aria-label=\"Search suggestions\">\n *           {suggestions.map((suggestion, i) => (\n *             <div\n *               key={i}\n *               {...getOptionProps(i)}\n *               onClick={() => {\n *                 setQuery(suggestion);\n *                 setIsOpen(false);\n *               }}\n *             >\n *               {suggestion}\n *             </div>\n *           ))}\n *         </div>\n *       )}\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useCombobox<T = any>({\n  items,\n  isOpen,\n  onOpenChange,\n  onSelect,\n  listboxId,\n  loop = true,\n  disabled = false,\n  optionSelector = '[role=\"option\"]',\n  hasItems\n}: UseComboboxOptions<T>): UseComboboxReturn {\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n  const pointerDownInListboxRef = useRef(false);\n  const tabKeyPressedRef = useRef(false);\n  \n  // Determine if we should show as expanded\n  const shouldShowExpanded = hasItems !== undefined ? hasItems : items.length > 0;\n  \n  // Close dropdown callback\n  const closeDropdown = useCallback(() => {\n    onOpenChange(false);\n  }, [onOpenChange]);\n\n  // Ensure pointer state doesn't get stuck when listbox unmounts\n  useEffect(() => {\n    if (!isOpen) {\n      pointerDownInListboxRef.current = false;\n    }\n  }, [isOpen]);\n  \n  // Keyboard navigation with aria-activedescendant\n  const navigation = useComboboxNavigation<T>({\n    items,\n    isOpen,\n    onSelect,\n    onClose: closeDropdown,\n    onOpen: () => onOpenChange(true),\n    loop,\n    disabled,\n    listboxRef,\n    optionSelector\n  });\n  \n  // Focus out / Escape dismissal\n  const dismissHandlers = useDismissOnFocusOut({\n    onFocusOut: closeDropdown,\n    onEscape: closeDropdown,\n    disabled: !isOpen\n  });\n\n  const containerProps: UseDismissOnFocusOutReturn<HTMLElement> = {\n    ...dismissHandlers,\n    onBlurCapture: (e) => {\n      // Clicking inside a listbox option can blur the input (relatedTarget is null),\n      // which would dismiss before the click handler runs. Prevent that.\n      if (pointerDownInListboxRef.current) return;\n      \n      // Tab key pressed - let Tab handler close dropdown, skip blur detection\n      if (tabKeyPressedRef.current) {\n        tabKeyPressedRef.current = false;\n        return;\n      }\n      \n      dismissHandlers.onBlurCapture(e);\n    }\n  };\n  \n  // Build input props\n  const inputProps = {\n    role: 'combobox' as const,\n    'aria-expanded': isOpen && shouldShowExpanded,\n    'aria-haspopup': 'listbox' as const,\n    'aria-controls': isOpen ? listboxId : undefined,\n    'aria-autocomplete': 'list' as const,\n    'aria-activedescendant': \n      navigation.highlightedIndex >= 0 \n        ? navigation.getOptionId(listboxId, navigation.highlightedIndex) \n        : undefined,\n    onKeyDown: (e: React.KeyboardEvent) => {\n      // Set flag when Tab is pressed (before blur fires)\n      if (e.key === 'Tab') {\n        tabKeyPressedRef.current = true;\n      }\n      navigation.handleKeyDown(e);\n    }\n  };\n  \n  // Build listbox props\n  const listboxProps = {\n    id: listboxId,\n    role: 'listbox' as const,\n    ref: listboxRef,\n    onMouseDownCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = true;\n    },\n    onMouseUpCapture: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    },\n    onMouseLeave: (_e: React.MouseEvent) => {\n      pointerDownInListboxRef.current = false;\n    }\n  };\n  \n  // Option props generator\n  const getOptionProps = useCallback(\n    (index: number, selected: boolean = false) => ({\n      id: navigation.getOptionId(listboxId, index),\n      role: 'option' as const,\n      'aria-selected': selected\n    }),\n    [navigation.getOptionId, listboxId]\n  );\n  \n  return {\n    containerProps,\n    inputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex: navigation.highlightedIndex,\n    setHighlightedIndex: navigation.setHighlightedIndex,\n    getOptionId: navigation.getOptionId\n  };\n}\n"],"names":["useRef","useCallback","useEffect","useComboboxNavigation","useDismissOnFocusOut","useCombobox","items","isOpen","onOpenChange","onSelect","listboxId","loop","disabled","optionSelector","hasItems","listboxRef","pointerDownInListboxRef","tabKeyPressedRef","shouldShowExpanded","undefined","length","closeDropdown","current","navigation","onClose","onOpen","dismissHandlers","onFocusOut","onEscape","containerProps","onBlurCapture","e","inputProps","role","highlightedIndex","getOptionId","onKeyDown","key","handleKeyDown","listboxProps","id","ref","onMouseDownCapture","_e","onMouseUpCapture","onMouseLeave","getOptionProps","index","selected","setHighlightedIndex"],"mappings":"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"}

package/dist/index69.js

@@ -1,62 +1,22 @@
-import { useCallback as b } from "react";
-import { useRovingFocus as y } from "./index68.js";
-const l = (r, t) => `tab${t ? `-${t}` : ""}-${r}`, s = (r, t) => `panel${t ? `-${t}` : ""}-${r}`, R = (r, t) => ({
-  id: s(r, t),
-  role: "tabpanel",
-  "aria-labelledby": l(r, t)
-});
-function w({
-  itemIds: r,
-  orientation: t = "horizontal",
-  activeItem: n,
-  idBase: e = "",
-  includePanelLinks: u = !0,
-  externalPanelId: a
-}) {
-  const {
-    setFocusedId: f,
-    handleKeyDown: p,
-    getRovingItemProps: c
-  } = y({
-    itemIds: r,
-    defaultFocusedId: n,
-    orientation: t,
-    loop: !0
-  }), g = b((o) => {
-    const {
-      ref: T,
-      tabIndex: $,
-      onFocus: x
-    } = c(o), F = n === o;
-    return {
-      ref: T,
-      tabIndex: $,
-      onFocus: x,
-      id: l(o, e),
-      ...u && {
-        "aria-controls": a ?? s(o, e)
-      },
-      "aria-selected": F,
-      role: "tab"
-    };
-  }, [n, c, e, u, a]), P = b((o) => ({
-    id: s(o, e),
-    role: "tabpanel",
-    "aria-labelledby": l(o, e)
-  }), [e]);
-  return {
-    getTabProps: g,
-    getPanelProps: P,
-    setFocusedTabId: f,
-    handleKeyDown: p,
-    getPanelId: (o) => s(o, e),
-    getTabId: (o) => l(o, e)
-  };
+import { useRef as u, useEffect as i } from "react";
+function f(n, {
+  targetSelector: r = "#main-content h1",
+  fallbackId: c = "main-content"
+} = {}) {
+  const t = u(!0);
+  i(() => {
+    if (t.current) {
+      t.current = !1;
+      return;
+    }
+    const o = requestAnimationFrame(() => {
+      const e = document.querySelector(r) || document.getElementById(c);
+      e && (e.hasAttribute("tabindex") || e.setAttribute("tabindex", "-1"), e.focus());
+    });
+    return () => cancelAnimationFrame(o);
+  }, n);
 }
 export {
-  s as getPanelId,
-  l as getTabId,
-  R as getTabPanelProps,
-  w as useTabsA11y
+  f as useFocusManagement
 };
 //# sourceMappingURL=index69.js.map

package/dist/index69.js.map

@@ -1 +1 @@
-{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useTabsA11y.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useRovingFocus } from './useRovingFocus';\n\nexport const getTabId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `tab${suffix}-${itemId}`;\n};\n\nexport const getPanelId = (itemId: string, idBase: string) => {\n  const suffix = idBase ? `-${idBase}` : '';\n  return `panel${suffix}-${itemId}`;\n};\n\nexport const getTabPanelProps = (tabId: string, idBase: string) => ({\n  id: getPanelId(tabId, idBase),\n  role: 'tabpanel' as const,\n  'aria-labelledby': getTabId(tabId, idBase)\n});\n\ninterface UseTabsA11yProps {\n  itemIds: string[];\n  orientation?: 'horizontal' | 'vertical';\n  activeItem: string;\n  idBase?: string;\n  includePanelLinks?: boolean; // Set to false when consumer manages their own panels externally\n  externalPanelId?: string; // When set, all tabs point aria-controls to this single external panel id\n}\n\ninterface TabA11yProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n  id: string;\n  'aria-controls'?: string;\n  'aria-selected': boolean;\n  role: 'tab';\n}\n\ninterface PanelA11yProps {\n  id: string;\n  role: 'tabpanel';\n  'aria-labelledby': string;\n}\n\n/**\n * Hook for managing Tabs (NavigationBar) focus and ARIA props.\n * Handles roving tabindex pattern and generates tab-specific ARIA attributes.\n * \n * @example\n * const itemIds = useMemo(() => navigationItems.map(item => item.id), [navigationItems]);\n * const { getTabProps, setFocusedTabId, handleKeyDown } = useTabsA11y({\n *   itemIds,\n *   activeNavigationItem: 'tab-1',\n *   orientation: 'horizontal',\n *   idBase: 'settings'\n * });\n */\nexport function useTabsA11y({\n  itemIds,\n  orientation = 'horizontal',\n  activeItem,\n  idBase = '',\n  includePanelLinks = true,\n  externalPanelId\n}: UseTabsA11yProps) {\n  const {\n    setFocusedId: setFocusedTabId,\n    handleKeyDown,\n    getRovingItemProps\n  } = useRovingFocus({\n    itemIds,\n    defaultFocusedId: activeItem,\n    orientation,\n    loop: true\n  });\n\n  /**\n   * Get all props needed for a tab button.\n   * Combines roving focus props (ref, tabIndex) with tab-specific ARIA attributes.\n   */\n  const getTabProps = useCallback((itemId: string): TabA11yProps => {\n    const { ref, tabIndex, onFocus } = getRovingItemProps(itemId);\n    const isSelected = activeItem === itemId;\n\n    return {\n      ref,\n      tabIndex,\n      onFocus,\n      id: getTabId(itemId, idBase),\n      ...(includePanelLinks && { 'aria-controls': externalPanelId ?? getPanelId(itemId, idBase) }),\n      'aria-selected': isSelected,\n      role: 'tab'\n    };\n  }, [activeItem, getRovingItemProps, idBase, includePanelLinks, externalPanelId]);\n\n  /**\n   * Get all props needed for a tab panel.\n   * Provides ARIA attributes to associate the panel with its tab.\n   */\n  const getPanelProps = useCallback((itemId: string): PanelA11yProps => {\n    return {\n      id: getPanelId(itemId, idBase),\n      role: 'tabpanel',\n      'aria-labelledby': getTabId(itemId, idBase)\n    };\n  }, [idBase]);\n\n  return {\n    getTabProps,\n    getPanelProps,\n    setFocusedTabId,\n    handleKeyDown,\n    getPanelId: (itemId: string) => getPanelId(itemId, idBase),\n    getTabId: (itemId: string) => getTabId(itemId, idBase)\n  };\n}\n\n"],"names":["getTabId","itemId","idBase","getPanelId","getTabPanelProps","tabId","id","role","useTabsA11y","itemIds","orientation","activeItem","includePanelLinks","externalPanelId","setFocusedId","setFocusedTabId","handleKeyDown","getRovingItemProps","useRovingFocus","defaultFocusedId","loop","getTabProps","useCallback","ref","tabIndex","onFocus","isSelected","getPanelProps"],"mappings":"AAGaA,SAAAA,eAAAA,SAAAA;AAAAA,SAAAA,kBAAAA,SAAAA;AAAAA,MAAAA,IAAWA,CAACC,GAAgBC,MAEhC,MADQA,IAAS,IAAIA,CAAM,KAAK,EACpB,IAAID,CAAM,IAGlBE,IAAaA,CAACF,GAAgBC,MAElC,QADQA,IAAS,IAAIA,CAAM,KAAK,EAClB,IAAID,CAAM,IAGpBG,IAAmBA,CAACC,GAAeH,OAAoB;AAAA,EAClEI,IAAIH,EAAWE,GAAOH,CAAM;AAAA,EAC5BK,MAAM;AAAA,EACN,mBAAmBP,EAASK,GAAOH,CAAM;AAC3C;AAwCO,SAASM,EAAY;AAAA,EAC1BC,SAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,YAAAA;AAAAA,EACAT,QAAAA,IAAS;AAAA,EACTU,mBAAAA,IAAoB;AAAA,EACpBC,iBAAAA;AACgB,GAAG;AACb,QAAA;AAAA,IACJC,cAAcC;AAAAA,IACdC,eAAAA;AAAAA,IACAC,oBAAAA;AAAAA,MACEC,EAAe;AAAA,IACjBT,SAAAA;AAAAA,IACAU,kBAAkBR;AAAAA,IAClBD,aAAAA;AAAAA,IACAU,MAAM;AAAA,EAAA,CACP,GAMKC,IAAcC,EAAY,CAACrB,MAAiC;AAC1D,UAAA;AAAA,MAAEsB,KAAAA;AAAAA,MAAKC,UAAAA;AAAAA,MAAUC,SAAAA;AAAAA,IAAAA,IAAYR,EAAmBhB,CAAM,GACtDyB,IAAaf,MAAeV;AAE3B,WAAA;AAAA,MACLsB,KAAAA;AAAAA,MACAC,UAAAA;AAAAA,MACAC,SAAAA;AAAAA,MACAnB,IAAIN,EAASC,GAAQC,CAAM;AAAA,MAC3B,GAAIU,KAAqB;AAAA,QAAE,iBAAiBC,KAAmBV,EAAWF,GAAQC,CAAM;AAAA,MAAE;AAAA,MAC1F,iBAAiBwB;AAAAA,MACjBnB,MAAM;AAAA,IAAA;AAAA,EACR,GACC,CAACI,GAAYM,GAAoBf,GAAQU,GAAmBC,CAAe,CAAC,GAMzEc,IAAgBL,EAAY,CAACrB,OAC1B;AAAA,IACLK,IAAIH,EAAWF,GAAQC,CAAM;AAAA,IAC7BK,MAAM;AAAA,IACN,mBAAmBP,EAASC,GAAQC,CAAM;AAAA,EAAA,IAE3C,CAACA,CAAM,CAAC;AAEJ,SAAA;AAAA,IACLmB,aAAAA;AAAAA,IACAM,eAAAA;AAAAA,IACAZ,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAb,YAAYA,CAACF,MAAmBE,EAAWF,GAAQC,CAAM;AAAA,IACzDF,UAAUA,CAACC,MAAmBD,EAASC,GAAQC,CAAM;AAAA,EAAA;AAEzD;"}
+{"version":3,"file":"index69.js","sources":["../src/utils/a11y/useFocusManagement.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport type { DependencyList } from 'react';\n\nexport interface UseFocusManagementOptions {\n  /**\n   * CSS selector to query the primary focus target.\n   * Default: 'h1'\n   */\n  targetSelector?: string;\n  /**\n   * Fallback element id if selector target is not found.\n   * Default: 'main-content'\n   */\n  fallbackId?: string;\n}\n\n/**\n * Generic focus management hook for route/state driven UI transitions.\n * Useful for both route changes and in-page multi-step wizards.\n * \n * Always skips first render and uses animation frame for safe DOM timing.\n */\nexport function useFocusManagement(\n  dependencies: DependencyList,\n  {\n    targetSelector = '#main-content h1',\n    fallbackId = 'main-content'\n  }: UseFocusManagementOptions = {}\n): void {\n  const isFirstRender = useRef(true);\n\n  useEffect(() => {\n    // Always skip first render\n    if (isFirstRender.current) {\n      isFirstRender.current = false;\n      return;\n    }\n\n    const focusTarget = () => {\n      const el = (document.querySelector(targetSelector) || document.getElementById(fallbackId)) as HTMLElement;\n      if (el) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '-1');\n        el.focus();\n      }\n    };\n\n    // Always use animation frame for safe DOM timing\n    const rafId = requestAnimationFrame(focusTarget);\n    return () => cancelAnimationFrame(rafId);\n  }, dependencies);\n}\n"],"names":["useFocusManagement","dependencies","targetSelector","fallbackId","isFirstRender","useRef","useEffect","current","rafId","requestAnimationFrame","focusTarget","el","document","querySelector","getElementById","hasAttribute","setAttribute","focus","cancelAnimationFrame"],"mappings":";AAsBO,SAASA,EACdC,GACA;AAAA,EACEC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACY,IAAI,IACzB;AACN,QAAMC,IAAgBC,EAAO,EAAI;AAEjCC,EAAAA,EAAU,MAAM;AAEd,QAAIF,EAAcG,SAAS;AACzBH,MAAAA,EAAcG,UAAU;AACxB;AAAA,IACF;AAWA,UAAMC,IAAQC,sBATMC,MAAM;AACxB,YAAMC,IAAMC,SAASC,cAAcX,CAAc,KAAKU,SAASE,eAAeX,CAAU;AACxF,MAAIQ,MACGA,EAAGI,aAAa,UAAU,KAAGJ,EAAGK,aAAa,YAAY,IAAI,GAClEL,EAAGM,MAAAA;AAAAA,IAEP,CAG+C;AAC/C,WAAO,MAAMC,qBAAqBV,CAAK;AAAA,EACzC,GAAGP,CAAY;AACjB;"}

package/dist/index7.js

@@ -1,56 +1,49 @@
-import t, { useState as u } from "react";
-import { MenuList as d } from "./index17.js";
-function l() {
-  return l = Object.assign ? Object.assign.bind() : function(o) {
-    for (var e = 1; e < arguments.length; e++) {
-      var n = arguments[e];
-      for (var a in n) ({}).hasOwnProperty.call(n, a) && (o[a] = n[a]);
+import s, { useState as h, useCallback as i } from "react";
+import "./index72.js";
+import { isElementVisible as p } from "./index198.js";
+const x = ({
+  skipLinks: n,
+  className: c = ""
+}) => {
+  const [r, u] = h(n), l = i(() => {
+    const t = n.filter((e) => {
+      const o = document.getElementById(e.id);
+      return p(o);
+    });
+    u(t);
+  }, [n]), a = i(() => {
+    l();
+  }, [l]), d = i((t) => {
+    const e = document.getElementById(t);
+    if (e) {
+      const o = document.getElementById("main-header") || document.querySelector("header");
+      if (e === o) {
+        e.focus();
+        return;
+      }
+      const f = o ? o.offsetHeight : 0, m = e.getBoundingClientRect().top + window.scrollY - f - 16;
+      window.scrollTo({
+        top: m,
+        behavior: "smooth"
+      }), e.focus({
+        preventScroll: !0
+      });
     }
-    return o;
-  }, l.apply(null, arguments);
-}
-const g = (o) => {
-  const {
-    label: e,
-    onDropdownClick: n = () => {
-    },
-    menuItems: a = [],
-    automationId: s = "",
-    ...i
-  } = o, [r, m] = u(!1), c = () => {
-    m(!r), n();
-  };
-  return /* @__PURE__ */ t.createElement("div", {
-    className: "se-design-split-button flex items-center relative",
-    "data-automation-id": s
-  }, /* @__PURE__ */ t.createElement("button", l({
-    type: "button",
-    className: "px-8 py-2.5 rounded-l text-sm bg-[var(--color-blue-500)] text-[var(--color-white)] border-r border-[var(--color-white)]"
-  }, i), e), /* @__PURE__ */ t.createElement("button", {
-    type: "button",
-    className: "bg-[var(--color-blue-500)] rounded-r",
-    onClick: c,
-    "data-automation-id": "split-button-dropdown-button"
-  }, /* @__PURE__ */ t.createElement("svg", {
-    className: `${r ? "rotate-180" : ""} transition-all`,
-    width: "35",
-    height: "40",
-    viewBox: "0 0 35 40",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ t.createElement("path", {
-    d: "M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z",
-    fill: "transparent"
-  }), /* @__PURE__ */ t.createElement("path", {
-    d: "M18 23.5L14 19.5L22 19.5L18 23.5Z",
-    fill: "white"
-  }))), r && /* @__PURE__ */ t.createElement("div", {
-    className: "absolute top-full mt-1 w-max"
-  }, /* @__PURE__ */ t.createElement(d, {
-    items: a
-  })));
+  }, []);
+  return n.length === 0 ? null : /* @__PURE__ */ s.createElement("div", {
+    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${c}`,
+    onFocus: a
+  }, r.map((t) => /* @__PURE__ */ s.createElement("a", {
+    key: t.id,
+    href: `#${t.id}`,
+    className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
+    onClick: (e) => {
+      e.preventDefault(), d(t.id);
+    }
+  }, t.label)));
 };
 export {
-  g as SplitButton
+  x as SkipLinksBar,
+  x as default
 };
 //# sourceMappingURL=index7.js.map

package/dist/index7.js.map

@@ -1 +1 @@
-{"version":3,"file":"index7.js","sources":["../src/components/SplitButton/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { MenuItemProps } from 'src/components/MenuItem';\nimport { MenuList } from 'src/components/MenuList';\n\nexport interface SplitButtonProps {\n  /**\n   * Button contents\n   */\n  label: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Optional click handler for dropdown\n   */\n  onDropdownClick?: () => void;\n  menuItems?: MenuItemProps[];\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nexport const SplitButton: FC<SplitButtonProps> = (props) => {\n  const { label, onDropdownClick = () => {}, menuItems = [], automationId = '', ...remainingProps } = props;\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleDropdownClick = () => {\n    setIsOpen(!isOpen);\n    onDropdownClick();\n  };\n\n  return (\n    <div className={'se-design-split-button flex items-center relative'} data-automation-id={automationId}>\n      <button\n        type=\"button\"\n        className=\"px-8 py-2.5 rounded-l text-sm bg-[var(--color-blue-500)] text-[var(--color-white)] border-r border-[var(--color-white)]\"\n        {...remainingProps}\n      >\n        {label}\n      </button>\n      <button type=\"button\" className=\"bg-[var(--color-blue-500)] rounded-r\" onClick={handleDropdownClick} data-automation-id=\"split-button-dropdown-button\">\n        <svg\n          className={`${isOpen ? 'rotate-180' : ''} transition-all`}\n          width=\"35\"\n          height=\"40\"\n          viewBox=\"0 0 35 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path d=\"M0 0H32C33.6569 0 35 1.34315 35 3V37C35 38.6569 33.6569 40 32 40H0V0Z\" fill=\"transparent\" />\n          <path d=\"M18 23.5L14 19.5L22 19.5L18 23.5Z\" fill=\"white\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"absolute top-full mt-1 w-max\">\n          <MenuList items={menuItems} />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["SplitButton","props","label","onDropdownClick","menuItems","automationId","remainingProps","isOpen","setIsOpen","useState","handleDropdownClick","React","createElement","className","_extends","type","onClick","width","height","viewBox","fill","xmlns","d","MenuList","items"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAqCC,CAAUA,MAAA;AACpD,QAAA;AAAA,IAAEC,OAAAA;AAAAA,IAAOC,iBAAAA,IAAkBA,MAAM;AAAA,IAAC;AAAA,IAAGC,WAAAA,IAAY,CAAE;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAI,GAAGC;AAAAA,EAAmBL,IAAAA,GAC9F,CAACM,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAsBA,MAAM;AAChCF,IAAAA,EAAU,CAACD,CAAM,GACDJ;EAAA;AAIhBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW;AAAA,IAAqD,sBAAoBR;AAAAA,EACvFM,GAAAA,gBAAAA,EAAAC,cAAA,UAAAE,EAAA;AAAA,IACEC,MAAK;AAAA,IACLF,WAAU;AAAA,EAAA,GACNP,CAAc,GAEjBJ,CACK,GACRS,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQG,MAAK;AAAA,IAASF,WAAU;AAAA,IAAuCG,SAASN;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GACtHE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGN,IAAS,eAAe,EAAE;AAAA,IACxCU,OAAM;AAAA,IACNC,QAAO;AAAA,IACPC,SAAQ;AAAA,IACRC,MAAK;AAAA,IACLC,OAAM;AAAA,EAAA,GAENT,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAwEF,MAAK;AAAA,EAAA,CAAe,GACpGR,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMU,GAAE;AAAA,IAAoCF,MAAK;AAAA,EAAS,CAAA,CACvD,CACC,GACPb,KACCI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAACW,GAAQ;AAAA,IAACC,OAAOpB;AAAAA,EAAY,CAAA,CAC1B,CAEJ;AAET;"}
+{"version":3,"file":"index7.js","sources":["../src/components/SkipLinksBar/index.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { isElementVisible } from '../../utils/a11y';\n\nexport interface SkipLink {\n  id: string;              \n  label: string;\n}\n\nexport interface SkipLinksBarProps {\n  skipLinks: SkipLink[];   // Required: array of skip targets\n  className?: string;        \n}\n\nexport const SkipLinksBar: React.FC<SkipLinksBarProps> = ({\n  skipLinks,\n  className = '',\n}) => {\n  const [visibleLinks, setVisibleLinks] = useState<SkipLink[]>(skipLinks);\n\n  // Check which target elements exist in DOM AND are visible\n  const checkVisibleLinks = useCallback(() => {\n    const existing = skipLinks.filter(link => {\n      const element = document.getElementById(link.id);\n      return isElementVisible(element);\n    });\n    setVisibleLinks(existing);\n  }, [skipLinks]);\n\n  // Only check on focus — by the time user tabs in, all child routes have rendered\n  const handleContainerFocus = useCallback(() => {\n    checkVisibleLinks();\n  }, [checkVisibleLinks]);\n\n  const handleSkipLinkClick = useCallback((targetId: string) => {\n    const targetElement = document.getElementById(targetId);\n    if (targetElement) {\n      // Find sticky/fixed header that should be accounted for\n      const header = document.getElementById('main-header')||document.querySelector('header');\n      \n      // If target is the header itself, just focus it (it's already at top)\n      if (targetElement === header) {\n        targetElement.focus();\n        return;\n      }\n      \n      const headerHeight = header ? header.offsetHeight : 0;\n      \n      // Scroll with offset to avoid content being hidden behind sticky headers\n      const elementPosition = targetElement.getBoundingClientRect().top + window.scrollY;\n      const offsetPosition = elementPosition - headerHeight - 16; // 16px padding for breathing room\n      \n      window.scrollTo({\n        top: offsetPosition,\n        behavior: 'smooth'\n      });\n      \n      targetElement.focus({ preventScroll: true });\n    }\n  }, []);\n\n  if (skipLinks.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${className}`}\n      onFocus={handleContainerFocus}\n    >\n      {visibleLinks.map((link) => (\n        <a\n          key={link.id}\n          href={`#${link.id}`}\n          className=\"absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]\"\n          onClick={(e) => {\n            e.preventDefault();\n            handleSkipLinkClick(link.id);\n          }}\n        >\n          {link.label}\n        </a>\n      ))}\n    </div>\n  );\n};\n\nexport default SkipLinksBar;\n"],"names":["SkipLinksBar","skipLinks","className","visibleLinks","setVisibleLinks","useState","checkVisibleLinks","useCallback","existing","filter","link","element","document","getElementById","id","isElementVisible","handleContainerFocus","handleSkipLinkClick","targetId","targetElement","header","querySelector","focus","headerHeight","offsetHeight","offsetPosition","getBoundingClientRect","top","window","scrollY","scrollTo","behavior","preventScroll","length","React","createElement","onFocus","map","key","href","onClick","e","preventDefault","label"],"mappings":";;;AAaO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,WAAAA;AAAAA,EACAC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAqBJ,CAAS,GAGhEK,IAAoBC,EAAY,MAAM;AAC1C,UAAMC,IAAWP,EAAUQ,OAAOC,CAAAA,MAAQ;AACxC,YAAMC,IAAUC,SAASC,eAAeH,EAAKI,EAAE;AAC/C,aAAOC,EAAiBJ,CAAO;AAAA,IACjC,CAAC;AACDP,IAAAA,EAAgBI,CAAQ;AAAA,EAC1B,GAAG,CAACP,CAAS,CAAC,GAGRe,IAAuBT,EAAY,MAAM;AAC7CD,IAAAA,EAAAA;AAAAA,EACF,GAAG,CAACA,CAAiB,CAAC,GAEhBW,IAAsBV,EAAY,CAACW,MAAqB;AAC5D,UAAMC,IAAgBP,SAASC,eAAeK,CAAQ;AACtD,QAAIC,GAAe;AAEjB,YAAMC,IAASR,SAASC,eAAe,aAAa,KAAGD,SAASS,cAAc,QAAQ;AAGtF,UAAIF,MAAkBC,GAAQ;AAC5BD,QAAAA,EAAcG,MAAAA;AACd;AAAA,MACF;AAEA,YAAMC,IAAeH,IAASA,EAAOI,eAAe,GAI9CC,IADkBN,EAAcO,sBAAAA,EAAwBC,MAAMC,OAAOC,UAClCN,IAAe;AAExDK,aAAOE,SAAS;AAAA,QACdH,KAAKF;AAAAA,QACLM,UAAU;AAAA,MAAA,CACX,GAEDZ,EAAcG,MAAM;AAAA,QAAEU,eAAe;AAAA,MAAA,CAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,SAAI/B,EAAUgC,WAAW,IAChB,OAIPC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEjC,WAAW,iOAAiOA,CAAS;AAAA,IACrPkC,SAASpB;AAAAA,EAAAA,GAERb,EAAakC,IAAK3B,CAAAA,MACjBwB,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEG,KAAK5B,EAAKI;AAAAA,IACVyB,MAAM,IAAI7B,EAAKI,EAAE;AAAA,IACjBZ,WAAU;AAAA,IACVsC,SAAUC,CAAAA,MAAM;AACdA,QAAEC,eAAAA,GACFzB,EAAoBP,EAAKI,EAAE;AAAA,IAC7B;AAAA,EAAA,GAECJ,EAAKiC,KACL,CACJ,CACE;AAET;"}

package/dist/index70.js

@@ -1,8 +1,69 @@
-const t = () => typeof navigator < "u" && /Android/i.test(navigator.userAgent), o = (i) => {
-  const r = "pointerType" in i ? i.pointerType : void 0;
-  return r === "" && i.isTrusted ? !0 : t() && r ? i.type === "click" && i.buttons === 1 : i.detail === 0 && !r;
-};
+import * as n from "react";
+import { getA11yNameAttributes as C } from "./index78.js";
+function M({
+  itemIds: r,
+  tabIndex: v = 0,
+  defaultFocusedId: u,
+  orientation: a = "horizontal",
+  cols: i,
+  loop: k = !0,
+  onFocusChange: f,
+  role: h
+}) {
+  const [c, b] = n.useState(u || r[0] || ""), g = n.useRef({});
+  n.useEffect(() => {
+    if (r.length > 0 && !r.includes(c)) {
+      const e = u || r[0] || "";
+      b(e);
+    }
+  }, [r, c, u]);
+  const x = n.useCallback((e) => {
+    b(e), f?.(e);
+  }, [f]), y = n.useCallback((e) => {
+    const t = g.current[e];
+    t ? t.focus() : (b(e), f?.(e));
+  }, [f]), p = n.useCallback((e, t = 1) => {
+    if (r.length === 0) return;
+    const o = r.indexOf(c), l = Math.max(0, o);
+    let s = l;
+    switch (e) {
+      case "first":
+        s = 0;
+        break;
+      case "last":
+        s = r.length - 1;
+        break;
+      case "prev":
+        k ? s = (l - t + r.length) % r.length : s = Math.max(0, l - t);
+        break;
+      case "next":
+        k ? s = (l + t) % r.length : s = Math.min(r.length - 1, l + t);
+        break;
+    }
+    const w = r[s];
+    w && g.current[w]?.focus();
+  }, [r, c, k]), A = n.useCallback((e) => ({
+    ref: (t) => {
+      g.current[e] = t;
+    },
+    tabIndex: c === e ? v : -1,
+    onFocus: () => x(e)
+  }), [c, v, x]), R = n.useCallback((e) => {
+    let t = null, o = 1;
+    e.key === "Home" ? t = "first" : e.key === "End" ? t = "last" : (a !== "vertical" && (e.key === "ArrowLeft" ? t = "prev" : e.key === "ArrowRight" && (t = "next")), !t && a !== "horizontal" && (e.key === "ArrowUp" ? t = "prev" : e.key === "ArrowDown" && (t = "next"), t && i && (o = i))), t && (e.preventDefault(), e.stopPropagation(), p(t, o));
+  }, [a, i, p]), z = n.useCallback((e) => {
+    const t = {};
+    return h && (t.role = h), a === "horizontal" ? t["aria-orientation"] = "horizontal" : a === "vertical" && (t["aria-orientation"] = "vertical"), e && Object.assign(t, C(e)), t;
+  }, [h, a]);
+  return {
+    setFocusedId: x,
+    focusItem: y,
+    handleKeyDown: R,
+    getRovingItemProps: A,
+    getContainerProps: z
+  };
+}
 export {
-  o as isVirtualClick
+  M as useRovingFocus
 };
 //# sourceMappingURL=index70.js.map

package/dist/index70.js.map

@@ -1 +1 @@
-{"version":3,"file":"index70.js","sources":["../src/utils/virtualClick.ts"],"sourcesContent":["/**\n * Input/virtual click detection helpers.\n */\n\nconst isAndroid = () =>\n  typeof navigator !== 'undefined' && /Android/i.test(navigator.userAgent);\n\nexport const isVirtualClick = (event: MouseEvent | PointerEvent): boolean => {\n  const pointerType = 'pointerType' in event ? event.pointerType : undefined;\n\n  // JAWS/NVDA with Firefox.\n  if (pointerType === '' && event.isTrusted) {\n    return true;\n  }\n\n  // Android TalkBack's detail value varies depending on listener type.\n  if (isAndroid() && pointerType) {\n    return event.type === 'click' && event.buttons === 1;\n  }\n\n  // Most browsers: virtual click has detail === 0 and no pointerType.\n  return event.detail === 0 && !pointerType;\n};\n\n\n"],"names":["isAndroid","navigator","test","userAgent","isVirtualClick","event","pointerType","undefined","isTrusted","type","buttons","detail"],"mappings":"AAIA,MAAMA,IAAYA,MAChB,OAAOC,YAAc,OAAe,WAAWC,KAAKD,UAAUE,SAAS,GAE5DC,IAAiBA,CAACC,MAA8C;AAC3E,QAAMC,IAAc,iBAAiBD,IAAQA,EAAMC,cAAcC;AAG7DD,SAAAA,MAAgB,MAAMD,EAAMG,YACvB,KAILR,OAAeM,IACVD,EAAMI,SAAS,WAAWJ,EAAMK,YAAY,IAI9CL,EAAMM,WAAW,KAAK,CAACL;AAChC;"}
+{"version":3,"file":"index70.js","sources":["../src/utils/a11y/useRovingFocus.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { getA11yNameAttributes, AccessibleNameInput } from './accessibleName';\nexport type { AccessibleNameInput };\n\nexport type RovingDirection = 'prev' | 'next' | 'first' | 'last';\n\nexport interface UseRovingFocusOptions {\n  /**\n   * Array of item IDs in order\n   */\n  itemIds: string[];\n\n  /**\n   * The tabIndex to apply to the currently focused item in the roving group.\n   * Defaults to 0 \n   */\n  tabIndex?: number;\n\n  /**\n   * Initial focused item ID. Defaults to first item.\n   */\n  defaultFocusedId?: string;\n\n  /**\n   * Orientation for arrow key mapping.\n   * - horizontal: ArrowLeft/ArrowRight\n   * - vertical: ArrowUp/ArrowDown\n   * - grid: all four arrow keys (Left/Right move by 1, Up/Down move by `cols`)\n   */\n  orientation?: 'horizontal' | 'vertical' | 'grid';\n\n  /**\n   * Number of columns in the grid. Required when orientation is 'grid'.\n   * ArrowUp/ArrowDown navigate by this many items in the flat itemIds array.\n   */\n  cols?: number;\n\n  /**\n   * Whether navigation wraps around at ends. Defaults to true.\n   */\n  loop?: boolean;\n\n  /**\n   * Callback when focus changes\n   */\n  onFocusChange?: (id: string) => void;\n\n  /**\n   * ARIA role for the container element (e.g. 'grid', 'menu', 'tablist', 'toolbar').\n   * Returned via getContainerProps().\n   */\n  role?: React.AriaRole;\n}\n\nexport interface RovingItemProps {\n  ref: (el: HTMLElement | null) => void;\n  tabIndex: number;\n  onFocus: () => void;\n}\n\nexport interface RovingContainerProps {\n  role?: React.AriaRole;\n  'aria-orientation'?: 'horizontal' | 'vertical';\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n}\n\nexport interface UseRovingFocusReturn {\n  /**\n   * Set focused item ID manually\n   */\n  setFocusedId: (id: string) => void;\n\n  /**\n   * Imperatively focus a DOM element by id.\n   * If the element exists in refs, focus it immediately.\n   * If not yet in DOM, update state so it gets focus once rendered.\n   */\n  focusItem: (id: string) => void;\n\n  /**\n   * Keyboard handler for arrow/Home/End navigation.\n   * Attach to each item's onKeyDown.\n   */\n  handleKeyDown: (e: React.KeyboardEvent) => void;\n\n  /**\n   * Get props for an item in the roving focus group (ref + tabIndex)\n   */\n  getRovingItemProps: (id: string) => RovingItemProps;\n\n  /**\n   * Props to spread on the container element.\n   * Returns role (if provided), aria-orientation (derived from orientation; omitted for grid),\n   * and any accessible name/description attributes passed in.\n   */\n  getContainerProps: (nameInput?: AccessibleNameInput) => RovingContainerProps;\n}\n\n/**\n * Hook for managing roving focus pattern (roving tabindex).\n * Reusable for composite widgets: tabs, toolbars, menus, listboxes, radio groups, grids.\n *\n * @example\n * // 1D (toolbar/tabs):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['tab1', 'tab2', 'tab3'],\n *   orientation: 'horizontal'\n * });\n *\n * // 2D (grid — flat itemIds, cols for row-jump math):\n * const { getRovingItemProps, handleKeyDown } = useRovingFocus({\n *   itemIds: ['r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2'],\n *   orientation: 'grid',\n *   cols: 3\n * });\n *\n * // In render:\n * <button {...getRovingItemProps('tab1')} onKeyDown={handleKeyDown}>Tab 1</button>\n */\nexport function useRovingFocus({\n  itemIds,\n  tabIndex = 0,\n  defaultFocusedId,\n  orientation = 'horizontal',\n  cols,\n  loop = true,\n  onFocusChange,\n  role\n}: UseRovingFocusOptions): UseRovingFocusReturn {\n  const [focusedId, setFocusedIdState] = React.useState<string>(\n    defaultFocusedId || itemIds[0] || ''\n  );\n\n  const itemRefs = React.useRef<Record<string, HTMLElement | null>>({});\n\n  // Sync focusedId if itemIds change and current focusedId is no longer valid\n  React.useEffect(() => {\n    if (itemIds.length > 0 && !itemIds.includes(focusedId)) {\n      const newFocusedId = defaultFocusedId || itemIds[0] || '';\n      setFocusedIdState(newFocusedId);\n    }\n  }, [itemIds, focusedId, defaultFocusedId]);\n\n  const setFocusedId = React.useCallback(\n    (id: string) => {\n      setFocusedIdState(id);\n      onFocusChange?.(id);\n    },\n    [onFocusChange]\n  );\n\n  const focusItem = React.useCallback(\n    (id: string) => {\n      const el = itemRefs.current[id];\n      if (el) {\n        el.focus();\n      } else {\n        // element not yet in DOM (e.g. month just changed) — update state so it gets focus once rendered\n        setFocusedIdState(id);\n        onFocusChange?.(id);\n      }\n    },\n    [onFocusChange]\n  );\n\n  const moveFocus = React.useCallback(\n    (direction: RovingDirection, step: number = 1) => {\n      if (itemIds.length === 0) return;\n\n      const currentIdx = itemIds.indexOf(focusedId);\n      const safeIdx = Math.max(0, currentIdx);\n      let nextIdx = safeIdx;\n\n      switch (direction) {\n        case 'first':\n          nextIdx = 0;\n          break;\n        case 'last':\n          nextIdx = itemIds.length - 1;\n          break;\n        case 'prev':\n          if (loop) {\n            nextIdx = (safeIdx - step + itemIds.length) % itemIds.length;\n          } else {\n            nextIdx = Math.max(0, safeIdx - step);\n          }\n          break;\n        case 'next':\n          if (loop) {\n            nextIdx = (safeIdx + step) % itemIds.length;\n          } else {\n            nextIdx = Math.min(itemIds.length - 1, safeIdx + step);\n          }\n          break;\n      }\n\n      const nextId = itemIds[nextIdx];\n      if (!nextId) return;\n\n      itemRefs.current[nextId]?.focus();\n    },\n    [itemIds, focusedId, loop]\n  );\n\n  const getRovingItemProps = React.useCallback(\n    (id: string): RovingItemProps => ({\n      ref: (el: HTMLElement | null) => {\n        itemRefs.current[id] = el;\n      },\n      tabIndex: focusedId === id ? tabIndex : -1,\n      onFocus: () => setFocusedId(id)\n    }),\n    [focusedId, tabIndex, setFocusedId]\n  );\n\n  // Keyboard handler for arrow/Home/End navigation\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      let direction: RovingDirection | null = null;\n      let step = 1;\n\n      if (e.key === 'Home') {\n        direction = 'first';\n      } else if (e.key === 'End') {\n        direction = 'last';\n      } else {\n        // Horizontal axis (Left/Right) — active for 'horizontal' and 'grid'\n        if (orientation !== 'vertical') {\n          if (e.key === 'ArrowLeft') direction = 'prev';\n          else if (e.key === 'ArrowRight') direction = 'next';\n        }\n        // Vertical axis (Up/Down) — active for 'vertical' and 'grid'\n        if (!direction && orientation !== 'horizontal') {\n          if (e.key === 'ArrowUp') direction = 'prev';\n          else if (e.key === 'ArrowDown') direction = 'next';\n          if (direction && cols) step = cols;\n        }\n      }\n\n      if (direction) {\n        e.preventDefault();\n        e.stopPropagation();\n        moveFocus(direction, step);\n      }\n    },\n    [orientation, cols, moveFocus]\n  );\n\n  const getContainerProps = React.useCallback((nameInput?: AccessibleNameInput): RovingContainerProps => {\n    const props: RovingContainerProps = {};\n    if (role) props.role = role;\n    if (orientation === 'horizontal') props['aria-orientation'] = 'horizontal';\n    else if (orientation === 'vertical') props['aria-orientation'] = 'vertical';\n    // grid: aria-orientation omitted — not applicable for role=\"grid\"\n    if (nameInput) Object.assign(props, getA11yNameAttributes(nameInput));\n    return props;\n  }, [role, orientation]);\n\n  return {\n    setFocusedId,\n    focusItem,\n    handleKeyDown,\n    getRovingItemProps,\n    getContainerProps\n  };\n}\n"],"names":["React","getA11yNameAttributes","useRovingFocus","itemIds","tabIndex","defaultFocusedId","orientation","cols","loop","onFocusChange","role","focusedId","setFocusedIdState","useState","itemRefs","useRef","useEffect","length","includes","newFocusedId","setFocusedId","useCallback","id","focusItem","el","current","focus","moveFocus","direction","step","currentIdx","indexOf","safeIdx","Math","max","nextIdx","min","nextId","getRovingItemProps","ref","onFocus","handleKeyDown","e","key","preventDefault","stopPropagation","getContainerProps","nameInput","props","Object","assign"],"mappings":"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"}

package/dist/index71.js

@@ -1,12 +1,30 @@
-function f({
-  ariaLabel: e,
-  ariaLabelledBy: i,
-  ariaDescribedBy: r
+const l = ['button:not([disabled]):not([tabindex="-1"])', '[href]:not([tabindex="-1"])', 'input:not([disabled]):not([tabindex="-1"])', 'select:not([disabled]):not([tabindex="-1"])', 'textarea:not([disabled]):not([tabindex="-1"])', '[tabindex]:not([tabindex="-1"]):not([disabled])', '[contenteditable="true"]:not([tabindex="-1"])'].join(", "), u = [l, '[role="menuitem"]', '[role="option"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'].join(", ");
+function s({
+  container: e,
+  includeRoles: t = !1,
+  additionalSelectors: r = [],
+  filterHidden: a = !1
 }) {
-  const t = {};
-  return i ? t["aria-labelledby"] = i : e && (t["aria-label"] = e), r && (t["aria-describedby"] = r), t;
+  if (!e) return [];
+  const d = [t ? u : l, ...r].filter(Boolean).join(", "), i = Array.from(e.querySelectorAll(d));
+  return a ? i.filter((n) => {
+    const o = window.getComputedStyle(n);
+    return o.display !== "none" && o.visibility !== "hidden" && o.opacity !== "0" && !n.hasAttribute("hidden") && n.offsetWidth > 0 && n.offsetHeight > 0;
+  }) : i;
+}
+function b(e) {
+  const t = s(e);
+  return t.length > 0 ? t[0] : null;
+}
+function c(e) {
+  const t = s(e);
+  return t.length > 0 ? t[t.length - 1] : null;
 }
 export {
-  f as getA11yNameAttributes
+  l as FOCUSABLE_SELECTOR,
+  u as FOCUSABLE_WITH_ROLES_SELECTOR,
+  b as getFirstFocusableElement,
+  s as getFocusableElements,
+  c as getLastFocusableElement
 };
 //# sourceMappingURL=index71.js.map

package/dist/index71.js.map

@@ -1 +1 @@
-{"version":3,"file":"index71.js","sources":["../src/utils/a11y/accessibleName.ts"],"sourcesContent":["/**\n * Accessible name/description utilities following WCAG precedence rules.\n * \n * **When to use:**\n * - `ariaLabelledBy`: visible label exists (preferred - keeps SR and visual text in sync)\n * - `ariaLabel`: no visible label (e.g., icon-only buttons)\n * - `ariaDescribedBy`: additional context needed (warnings, hints, constraints)\n * \n * **Precedence:** ariaLabelledBy > ariaLabel > visible text content\n * \n * @example Icon-only button\n * ```tsx\n * <Button iconProps={{ name: 'close' }} ariaLabel=\"Close dialog\" />\n * ```\n * \n * @example Disambiguate generic labels\n * ```tsx\n * <Button label=\"Edit\" ariaLabel=\"Edit name\" />\n * <Button label=\"Edit\" ariaLabel=\"Edit email\" />\n * ```\n */\n\nexport type AccessibleNameInput = {\n  /** Accessible name when no visible label exists (icon-only buttons). */\n  ariaLabel?: string;\n  /** ID(s) of visible element(s) that label this control. Preferred over ariaLabel. */\n  ariaLabelledBy?: string;\n  /** ID(s) of element(s) providing additional description (additive). */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Returns ARIA attributes with correct precedence.\n * Prefer ariaLabelledBy > ariaLabel. ariaDescribedBy is always additive.\n */\nexport function getA11yNameAttributes({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy\n}: AccessibleNameInput): Record<string, string> {\n  const props: Record<string, string> = {};\n\n  if (ariaLabelledBy) props['aria-labelledby'] = ariaLabelledBy;\n  else if (ariaLabel) props['aria-label'] = ariaLabel;\n\n  if (ariaDescribedBy) props['aria-describedby'] = ariaDescribedBy;\n\n  return props;\n}\n"],"names":["getA11yNameAttributes","ariaLabel","ariaLabelledBy","ariaDescribedBy","props"],"mappings":"AAmCO,SAASA,EAAsB;AAAA,EACpCC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AACmB,GAA2B;AAC9C,QAAMC,IAAgC,CAAA;AAElCF,SAAAA,IAAsBE,EAAA,iBAAiB,IAAIF,IACtCD,MAAiBG,EAAA,YAAY,IAAIH,IAEtCE,MAAuBC,EAAA,kBAAkB,IAAID,IAE1CC;AACT;"}
+{"version":3,"file":"index71.js","sources":["../src/utils/a11y/focusableElements.ts"],"sourcesContent":["/**\n * Utilities for finding focusable elements within a container.\n * \n * Used for focus management in modals, popovers, and other interactive overlays.\n */\n\n/**\n * Base selector for standard focusable elements.\n * Matches: buttons, links, inputs, selects, textareas, elements with tabindex >= 0, contenteditable.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'button:not([disabled]):not([tabindex=\"-1\"])',\n  '[href]:not([tabindex=\"-1\"])',\n  'input:not([disabled]):not([tabindex=\"-1\"])',\n  'select:not([disabled]):not([tabindex=\"-1\"])',\n  'textarea:not([disabled]):not([tabindex=\"-1\"])',\n  '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n  '[contenteditable=\"true\"]:not([tabindex=\"-1\"])'\n].join(', ');\n\n/**\n * Extended selector that includes ARIA role-based focusable elements.\n * Useful for composite widgets like menus, listboxes, etc.\n */\nexport const FOCUSABLE_WITH_ROLES_SELECTOR = [\n  FOCUSABLE_SELECTOR,\n  '[role=\"menuitem\"]',\n  '[role=\"option\"]',\n  '[role=\"menuitemcheckbox\"]',\n  '[role=\"menuitemradio\"]'\n].join(', ');\n\n/**\n * Options for getFocusableElements\n */\nexport interface GetFocusableElementsOptions {\n  /**\n   * Container element to search within. If null/undefined, returns empty array.\n   */\n  container: HTMLElement | null;\n  /**\n   * Whether to include role-based focusable elements (menuitem, option, etc.).\n   * Default: false (uses base selector only)\n   */\n  includeRoles?: boolean;\n  /**\n   * Additional custom selectors to include.\n   */\n  additionalSelectors?: string[];\n  /**\n   * Whether to filter out hidden/invisible elements.\n   * Default: false (returns all matching elements regardless of visibility)\n   */\n  filterHidden?: boolean;\n}\n\n/**\n * Get all focusable elements within a container.\n * \n * @example Basic usage (standard focusable elements)\n * ```ts\n * const focusables = getFocusableElements({ container: dialogRef.current });\n * focusables[0]?.focus(); // Focus first element\n * ```\n * \n * @example With role-based elements (for menus/listboxes)\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: menuRef.current,\n *   includeRoles: true \n * });\n * ```\n * \n * @example With custom selectors\n * ```ts\n * const focusables = getFocusableElements({ \n *   container: customWidgetRef.current,\n *   additionalSelectors: ['[data-focusable=\"true\"]']\n * });\n * ```\n */\nexport function getFocusableElements({\n  container,\n  includeRoles = false,\n  additionalSelectors = [],\n  filterHidden = false\n}: GetFocusableElementsOptions): HTMLElement[] {\n  if (!container) return [];\n\n  const selector = [\n    includeRoles ? FOCUSABLE_WITH_ROLES_SELECTOR : FOCUSABLE_SELECTOR,\n    ...additionalSelectors\n  ].filter(Boolean).join(', ');\n\n  const elements = Array.from(container.querySelectorAll<HTMLElement>(selector));\n\n  if (!filterHidden) return elements;\n\n  // Filter out hidden/invisible elements\n  return elements.filter((el) => {\n    const style = window.getComputedStyle(el);\n    return (\n      style.display !== 'none' &&\n      style.visibility !== 'hidden' &&\n      style.opacity !== '0' &&\n      !el.hasAttribute('hidden') &&\n      el.offsetWidth > 0 &&\n      el.offsetHeight > 0\n    );\n  });\n}\n\n/**\n * Get the first focusable element in a container.\n * Returns null if none found.\n */\nexport function getFirstFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[0] : null;\n}\n\n/**\n * Get the last focusable element in a container.\n * Returns null if none found.\n */\nexport function getLastFocusableElement(\n  options: GetFocusableElementsOptions\n): HTMLElement | null {\n  const focusables = getFocusableElements(options);\n  return focusables.length > 0 ? focusables[focusables.length - 1] : null;\n}\n"],"names":["FOCUSABLE_SELECTOR","join","FOCUSABLE_WITH_ROLES_SELECTOR","getFocusableElements","container","includeRoles","additionalSelectors","filterHidden","selector","filter","Boolean","elements","Array","from","querySelectorAll","el","style","window","getComputedStyle","display","visibility","opacity","hasAttribute","offsetWidth","offsetHeight","getFirstFocusableElement","options","focusables","length","getLastFocusableElement"],"mappings":"AAUO,MAAMA,IAAqB,CAChC,+CACA,+BACA,8CACA,+CACA,iDACA,mDACA,+CAA+C,EAC/CC,KAAK,IAAI,GAMEC,IAAgC,CAC3CF,GACA,qBACA,mBACA,6BACA,wBAAwB,EACxBC,KAAK,IAAI;AAmDJ,SAASE,EAAqB;AAAA,EACnCC,WAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,qBAAAA,IAAsB,CAAA;AAAA,EACtBC,cAAAA,IAAe;AACY,GAAkB;AAC7C,MAAI,CAACH,EAAW,QAAO,CAAA;AAEvB,QAAMI,IAAW,CACfH,IAAeH,IAAgCF,GAC/C,GAAGM,CAAmB,EACtBG,OAAOC,OAAO,EAAET,KAAK,IAAI,GAErBU,IAAWC,MAAMC,KAAKT,EAAUU,iBAA8BN,CAAQ,CAAC;AAE7E,SAAKD,IAGEI,EAASF,OAAQM,CAAAA,MAAO;AAC7B,UAAMC,IAAQC,OAAOC,iBAAiBH,CAAE;AACxC,WACEC,EAAMG,YAAY,UAClBH,EAAMI,eAAe,YACrBJ,EAAMK,YAAY,OAClB,CAACN,EAAGO,aAAa,QAAQ,KACzBP,EAAGQ,cAAc,KACjBR,EAAGS,eAAe;AAAA,EAEtB,CAAC,IAbyBb;AAc5B;AAMO,SAASc,EACdC,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAW,CAAC,IAAI;AACjD;AAMO,SAASE,EACdH,GACoB;AACpB,QAAMC,IAAaxB,EAAqBuB,CAAO;AAC/C,SAAOC,EAAWC,SAAS,IAAID,EAAWA,EAAWC,SAAS,CAAC,IAAI;AACrE;"}