@joewinke/jatui 0.1.27 → 0.1.28

package/dist/actions/listNav.js

@@ -0,0 +1,672 @@
+/**
+ * Shared keyboard-navigation action + composable for list-like UIs.
+ *
+ * Base motions — j/k / ArrowDown/ArrowUp with wraparound, Enter/Space to
+ * trigger select, Escape to clear focus. Typing targets (input, textarea,
+ * select, contenteditable) and most modifier combos are skipped so the
+ * shortcuts never interfere with typing or app-level keybindings.
+ *
+ * Vim-motion layer (always on):
+ *
+ *   gg           jump to first item
+ *   G            jump to last item
+ *   {n}j / {n}k  move `n` items (count-prefix buffer with 1.5s timeout)
+ *   {n}G, {n}gg  jump to 1-indexed line `n` (clamped to list length)
+ *   Ctrl+D / Ctrl+U  move roughly half a viewport's worth of items
+ *   zz           scroll the focused item to the centre of its viewport
+ *
+ * Selection layer (opt-in via `selectable: true`):
+ *
+ *   V              toggle visual mode (anchor at current focus, selects it)
+ *   j / k          while visual mode is on, also extends the range from anchor
+ *   x              toggle selection of the focused item (no movement)
+ *   Shift+J / K    toggle current + move down/up + toggle new focus (range-build)
+ *   *              toggle select-all of the currently visible items
+ *   Escape         backs out one layer at a time:
+ *                    pending motion → visual mode → selection → focus / onEscape
+ *
+ *   Selected items get the `selected-class` (default `jk-selected`) so pages
+ *   can style them. The controller exposes selectedIds()/clearSelection()/
+ *   selectAll()/toggleSelection()/isSelecting() and fires onSelectionChange
+ *   whenever the set mutates. A floating `BulkActionBar` is the canonical
+ *   chip for surfacing the count + per-route bulk actions.
+ *
+ * Usage — action form (simplest):
+ *
+ *   <div use:listNav={{
+ *     onSelect: (el, idx) => openDetail(el.dataset.navId!),
+ *     onEscape: () => closeDetail(),
+ *   }}>
+ *     {#each items as item}
+ *       <button data-nav-id={item.id}>{item.title}</button>
+ *     {/each}
+ *   </div>
+ *
+ * Usage — composable form (when you already have a keydown handler):
+ *
+ *   const nav = createListNav({
+ *     getItems: () => Array.from(container.querySelectorAll('[data-nav-id]')),
+ *     onSelect: (el) => openDetail(el.dataset.navId!),
+ *     selectable: true,
+ *     onSelectionChange: (ids) => { selectedIds = ids; },
+ *   });
+ *
+ *   function onKeydown(e: KeyboardEvent) {
+ *     if (nav.handleKeydown(e)) return;
+ *     // ...page-specific shortcuts
+ *   }
+ */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/** How long a half-typed motion (count prefix, pending `g`, pending `z`) waits
+ *  for its completion before resetting. Matches Vim's default `timeoutlen`. */
+var MOTION_BUFFER_TIMEOUT_MS = 1500;
+/** Upper cap so `99999j` can't produce pathological math. Above any list size
+ *  you'd reasonably navigate with j/k. */
+var MAX_COUNT = 99999;
+/** Fallback half-page size when we can't measure the viewport (SSR, jsdom
+ *  without layout, items not yet attached). */
+var DEFAULT_HALF_PAGE = 5;
+function isTypingTarget(target) {
+    if (typeof HTMLElement === 'undefined')
+        return false;
+    if (!(target instanceof HTMLElement))
+        return false;
+    var tag = target.tagName;
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    return target.isContentEditable;
+}
+function hasModifier(e) {
+    return e.ctrlKey || e.metaKey || e.altKey;
+}
+function resolveItems(optsRef) {
+    var getItems = optsRef.current.getItems;
+    if (!getItems)
+        return [];
+    var result = getItems();
+    return Array.isArray(result) ? result : Array.from(result);
+}
+function wrapIndex(next, length, wrap) {
+    if (length === 0)
+        return -1;
+    if (next < 0)
+        return wrap ? ((next % length) + length) % length : 0;
+    if (next >= length)
+        return wrap ? next % length : length - 1;
+    return next;
+}
+/**
+ * Estimate how many list items fit in one 'page' of the nearest scrollable
+ * ancestor, then halve it. Used for Ctrl+D / Ctrl+U. Returns {@link DEFAULT_HALF_PAGE}
+ * when layout isn't available (SSR, jsdom, detached elements).
+ */
+function getHalfPageSize(items, currentIdx) {
+    var _a, _b;
+    if (items.length === 0)
+        return 0;
+    try {
+        var pivot = (_a = items[Math.max(0, Math.min(items.length - 1, currentIdx))]) !== null && _a !== void 0 ? _a : items[0];
+        if (!pivot || typeof window === 'undefined')
+            return DEFAULT_HALF_PAGE;
+        // Walk up looking for an ancestor that is actually scrolling.
+        var scroller = pivot.parentElement;
+        while (scroller) {
+            var cs = window.getComputedStyle(scroller);
+            if ((cs.overflowY === 'auto' || cs.overflowY === 'scroll') &&
+                scroller.clientHeight > 0 &&
+                scroller.clientHeight < scroller.scrollHeight) {
+                break;
+            }
+            scroller = scroller.parentElement;
+        }
+        var viewportHeight = (_b = scroller === null || scroller === void 0 ? void 0 : scroller.clientHeight) !== null && _b !== void 0 ? _b : window.innerHeight;
+        var itemHeight = pivot.getBoundingClientRect().height;
+        if (viewportHeight > 0 && itemHeight > 0) {
+            var fullPage = Math.max(1, Math.floor(viewportHeight / itemHeight));
+            return Math.max(1, Math.floor(fullPage / 2));
+        }
+    }
+    catch (_c) {
+        // Fall through to default.
+    }
+    return DEFAULT_HALF_PAGE;
+}
+function makeController(optsRef) {
+    var focused = -1;
+    var lastEl = null;
+    // Motion-buffer state. A motion is 'pending' until its follow-up key
+    // arrives (e.g. the second `g` in `gg`) or the buffer times out.
+    var pendingCount = null;
+    var pendingG = false;
+    var pendingZ = false;
+    var bufferTimer = null;
+    // Selection state. `selected` holds stable ids (from getItemId / data-nav-id)
+    // rather than indices, since list filters can shift indices but ids persist.
+    // `visualMode` flips on/off via V; while on, j/k extends the range from
+    // `visualAnchor` (the index where V was first pressed) to current focus.
+    var selected = new Set();
+    var visualMode = false;
+    var visualAnchor = -1;
+    function clearBufferTimer() {
+        if (bufferTimer !== null) {
+            clearTimeout(bufferTimer);
+            bufferTimer = null;
+        }
+    }
+    function clearPending() {
+        pendingCount = null;
+        pendingG = false;
+        pendingZ = false;
+        clearBufferTimer();
+    }
+    function bumpTimer() {
+        clearBufferTimer();
+        if (typeof setTimeout !== 'undefined') {
+            bufferTimer = setTimeout(clearPending, MOTION_BUFFER_TIMEOUT_MS);
+        }
+    }
+    function focusedClass() {
+        var _a;
+        return (_a = optsRef.current.focusedClass) !== null && _a !== void 0 ? _a : 'jk-focused';
+    }
+    function selectedClass() {
+        var _a;
+        return (_a = optsRef.current.selectedClass) !== null && _a !== void 0 ? _a : 'jk-selected';
+    }
+    function getId(el) {
+        if (!el)
+            return null;
+        var resolver = optsRef.current.getItemId;
+        var raw = resolver ? resolver(el) : el.dataset.navId;
+        return raw == null ? null : String(raw);
+    }
+    function applySelectionClasses(items) {
+        var cls = selectedClass();
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var el = items_1[_i];
+            var id = getId(el);
+            if (id !== null && selected.has(id))
+                el.classList.add(cls);
+            else
+                el.classList.remove(cls);
+        }
+    }
+    function emitSelectionChange() {
+        var _a, _b;
+        applySelectionClasses(resolveItems(optsRef));
+        (_b = (_a = optsRef.current).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, new Set(selected));
+    }
+    function apply(items, idx) {
+        var _a, _b, _c, _d;
+        var cls = focusedClass();
+        var next = (_a = items[idx]) !== null && _a !== void 0 ? _a : null;
+        if (lastEl && lastEl !== next)
+            lastEl.classList.remove(cls);
+        if (next) {
+            next.classList.add(cls);
+            (_b = next.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(next, { block: 'nearest', inline: 'nearest' });
+        }
+        lastEl = next;
+        focused = next ? idx : -1;
+        (_d = (_c = optsRef.current).onFocusChange) === null || _d === void 0 ? void 0 : _d.call(_c, next, focused);
+    }
+    /**
+     * Re-derive the selected set from the inclusive range [anchor..focus] while
+     * visual mode is active. Items outside the range that were selected before
+     * V was pressed are preserved (additive — Vim's `V` extends, doesn't reset).
+     */
+    function extendVisualRange(items) {
+        var _a;
+        if (!visualMode || visualAnchor < 0 || focused < 0)
+            return;
+        var lo = Math.min(visualAnchor, focused);
+        var hi = Math.max(visualAnchor, focused);
+        // Add every id in [lo..hi]. Items outside the range are left alone so
+        // existing pre-V selections survive moving the anchor to a new region.
+        var mutated = false;
+        for (var i = lo; i <= hi; i++) {
+            var id = getId((_a = items[i]) !== null && _a !== void 0 ? _a : null);
+            if (id !== null && !selected.has(id)) {
+                selected.add(id);
+                mutated = true;
+            }
+        }
+        if (mutated)
+            emitSelectionChange();
+        else
+            applySelectionClasses(items);
+    }
+    function focus(idx) {
+        var items = resolveItems(optsRef);
+        if (items.length === 0)
+            return;
+        apply(items, Math.max(0, Math.min(items.length - 1, idx)));
+    }
+    function focusFirst() {
+        focus(0);
+    }
+    function focusLast() {
+        var items = resolveItems(optsRef);
+        if (items.length)
+            apply(items, items.length - 1);
+    }
+    function clear() {
+        var _a, _b;
+        if (lastEl)
+            lastEl.classList.remove(focusedClass());
+        lastEl = null;
+        focused = -1;
+        clearPending();
+        (_b = (_a = optsRef.current).onFocusChange) === null || _b === void 0 ? void 0 : _b.call(_a, null, -1);
+    }
+    function refresh() {
+        var items = resolveItems(optsRef);
+        if (items.length === 0) {
+            clear();
+            return;
+        }
+        // Re-home the focused element if the old node has been removed.
+        if (lastEl && !items.includes(lastEl)) {
+            var newIdx = Math.min(focused, items.length - 1);
+            apply(items, Math.max(0, newIdx));
+        }
+        else if (focused >= 0 && focused < items.length) {
+            apply(items, focused);
+        }
+        // Re-paint selection classes — items may have been re-rendered, so the
+        // CSS class needs to be re-applied to the new DOM nodes whose ids match.
+        applySelectionClasses(items);
+    }
+    function toggleSelectionByIndex(items, idx) {
+        var _a;
+        var id = getId((_a = items[idx]) !== null && _a !== void 0 ? _a : null);
+        if (id === null)
+            return;
+        if (selected.has(id))
+            selected.delete(id);
+        else
+            selected.add(id);
+        emitSelectionChange();
+    }
+    function exitVisualMode() {
+        visualMode = false;
+        visualAnchor = -1;
+    }
+    function handleKeydown(e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var opts = optsRef.current;
+        if (opts.enabled === false)
+            return false;
+        if (isTypingTarget(e.target))
+            return false;
+        var items = resolveItems(optsRef);
+        var wrap = (_a = opts.wraparound) !== null && _a !== void 0 ? _a : true;
+        var selectable = opts.selectable === true;
+        // --- Selection layer (opt-in) ----------------------------------------
+        // These keys are only owned by the controller when `selectable` is true,
+        // so existing pages without a selection model keep their bindings.
+        if (selectable && !hasModifier(e)) {
+            // V — toggle visual mode. First press anchors at current focus and
+            // selects the focused item; second press exits visual mode while
+            // keeping the existing selection (Vim parity for re-entry).
+            if (e.key === 'V') {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                if (visualMode) {
+                    exitVisualMode();
+                }
+                else {
+                    if (focused < 0)
+                        apply(items, 0);
+                    visualMode = true;
+                    visualAnchor = focused;
+                    toggleSelectionByIndex(items, focused);
+                    // If the toggle deselected the anchor, re-add it — entering
+                    // visual mode should always include the anchor.
+                    var anchorId = getId((_b = items[focused]) !== null && _b !== void 0 ? _b : null);
+                    if (anchorId !== null && !selected.has(anchorId)) {
+                        selected.add(anchorId);
+                        emitSelectionChange();
+                    }
+                }
+                clearPending();
+                return true;
+            }
+            // x — toggle selection of the focused item (no movement, no visual).
+            if (e.key === 'x' && !e.shiftKey) {
+                if (focused < 0 || items.length === 0)
+                    return false;
+                e.preventDefault();
+                toggleSelectionByIndex(items, focused);
+                clearPending();
+                return true;
+            }
+            // * — toggle select-all of currently visible items.
+            if (e.key === '*') {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                var allIds = [];
+                for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+                    var el = items_2[_i];
+                    var id = getId(el);
+                    if (id !== null)
+                        allIds.push(id);
+                }
+                var allSelected = allIds.length > 0 && allIds.every(function (id) { return selected.has(id); });
+                if (allSelected) {
+                    for (var _h = 0, allIds_1 = allIds; _h < allIds_1.length; _h++) {
+                        var id = allIds_1[_h];
+                        selected.delete(id);
+                    }
+                }
+                else {
+                    for (var _j = 0, allIds_2 = allIds; _j < allIds_2.length; _j++) {
+                        var id = allIds_2[_j];
+                        selected.add(id);
+                    }
+                }
+                emitSelectionChange();
+                clearPending();
+                return true;
+            }
+            // Shift+J / Shift+K — toggle current + move down/up + add new focus.
+            // Preserves the existing /triage idiom (range-build without entering
+            // visual mode). Always wraps within bounds (no wraparound for safety).
+            if (e.key === 'J' || e.key === 'K') {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                var dir = e.key === 'J' ? 1 : -1;
+                var before = focused < 0 ? (dir > 0 ? 0 : items.length - 1) : focused;
+                var beforeId = getId((_c = items[before]) !== null && _c !== void 0 ? _c : null);
+                if (beforeId !== null)
+                    selected.add(beforeId);
+                var afterIdx = Math.max(0, Math.min(items.length - 1, before + dir));
+                apply(items, afterIdx);
+                var afterId = getId((_d = items[afterIdx]) !== null && _d !== void 0 ? _d : null);
+                if (afterId !== null)
+                    selected.add(afterId);
+                emitSelectionChange();
+                clearPending();
+                return true;
+            }
+        }
+        // Ctrl+D / Ctrl+U — half-page motion. Intercepted before the generic
+        // Ctrl/Meta/Alt bailout so vim half-page works; every other modifier
+        // combination still falls through untouched.
+        if (e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) {
+            var lower = e.key.toLowerCase();
+            if (lower === 'd' || lower === 'u') {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                var half = getHalfPageSize(items, focused);
+                var dir = lower === 'd' ? 1 : -1;
+                var start = focused < 0 ? (dir > 0 ? 0 : items.length - 1) : focused;
+                apply(items, wrapIndex(start + dir * half, items.length, wrap));
+                clearPending();
+                return true;
+            }
+        }
+        if (hasModifier(e))
+            return false;
+        // Count prefix. A leading `0` is intentionally pass-through so
+        // consumers can still bind `0` themselves; subsequent digits within
+        // an already-started count (e.g. `10j`) are accumulated normally.
+        if (e.key.length === 1 && e.key >= '0' && e.key <= '9') {
+            if (pendingCount === null && e.key === '0')
+                return false;
+            e.preventDefault();
+            pendingCount = (pendingCount !== null && pendingCount !== void 0 ? pendingCount : 0) * 10 + Number(e.key);
+            if (pendingCount > MAX_COUNT)
+                pendingCount = MAX_COUNT;
+            pendingG = false;
+            pendingZ = false;
+            bumpTimer();
+            return true;
+        }
+        // gg — jump to first item (or to line {count} when a count is pending).
+        if (e.key === 'g' && !e.shiftKey) {
+            if (items.length === 0) {
+                clearPending();
+                return false;
+            }
+            e.preventDefault();
+            if (pendingG) {
+                var target = pendingCount !== null
+                    ? Math.max(0, Math.min(items.length - 1, pendingCount - 1))
+                    : 0;
+                apply(items, target);
+                clearPending();
+            }
+            else {
+                pendingG = true;
+                pendingZ = false;
+                bumpTimer();
+            }
+            return true;
+        }
+        // G — jump to last item (or to line {count}).
+        if (e.key === 'G') {
+            if (items.length === 0) {
+                clearPending();
+                return false;
+            }
+            e.preventDefault();
+            var target = pendingCount !== null
+                ? Math.max(0, Math.min(items.length - 1, pendingCount - 1))
+                : items.length - 1;
+            apply(items, target);
+            clearPending();
+            return true;
+        }
+        // zz — centre the focused item in its viewport.
+        if (e.key === 'z' && !e.shiftKey) {
+            e.preventDefault();
+            if (pendingZ) {
+                var el = (_e = lastEl !== null && lastEl !== void 0 ? lastEl : items[focused]) !== null && _e !== void 0 ? _e : null;
+                (_f = el === null || el === void 0 ? void 0 : el.scrollIntoView) === null || _f === void 0 ? void 0 : _f.call(el, { block: 'center', inline: 'nearest' });
+                clearPending();
+            }
+            else {
+                pendingZ = true;
+                pendingG = false;
+                bumpTimer();
+            }
+            return true;
+        }
+        switch (e.key) {
+            case 'j':
+            case 'ArrowDown': {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                var step = pendingCount !== null && pendingCount !== void 0 ? pendingCount : 1;
+                // From an unfocused state, `{n}j` selects the n-th item
+                // (1-indexed) so it mirrors `{n}G` from the top.
+                var target = focused < 0 ? step - 1 : focused + step;
+                apply(items, wrapIndex(target, items.length, wrap));
+                clearPending();
+                if (selectable && visualMode)
+                    extendVisualRange(items);
+                return true;
+            }
+            case 'k':
+            case 'ArrowUp': {
+                if (items.length === 0)
+                    return false;
+                e.preventDefault();
+                var step = pendingCount !== null && pendingCount !== void 0 ? pendingCount : 1;
+                var target = focused < 0 ? items.length - step : focused - step;
+                apply(items, wrapIndex(target, items.length, wrap));
+                clearPending();
+                if (selectable && visualMode)
+                    extendVisualRange(items);
+                return true;
+            }
+            case 'Enter':
+            case ' ': {
+                if (focused < 0)
+                    return false;
+                var el = items[focused];
+                if (!el)
+                    return false;
+                e.preventDefault();
+                clearPending();
+                (_g = opts.onSelect) === null || _g === void 0 ? void 0 : _g.call(opts, el, focused);
+                return true;
+            }
+            case 'Escape': {
+                // Cancel a half-typed motion first — matches vim's behaviour
+                // where Esc drops the count prefix without moving the cursor.
+                if (pendingCount !== null || pendingG || pendingZ) {
+                    e.preventDefault();
+                    clearPending();
+                    return true;
+                }
+                // Selection cascade: visual mode → selection → focus / onEscape.
+                // Each Esc backs out one layer so users can stop extending without
+                // losing what they've already selected, then Esc again to clear.
+                if (selectable && visualMode) {
+                    e.preventDefault();
+                    exitVisualMode();
+                    return true;
+                }
+                if (selectable && selected.size > 0) {
+                    e.preventDefault();
+                    selected.clear();
+                    emitSelectionChange();
+                    return true;
+                }
+                if (focused < 0 && !opts.onEscape)
+                    return false;
+                e.preventDefault();
+                if (opts.onEscape)
+                    opts.onEscape();
+                else
+                    clear();
+                return true;
+            }
+        }
+        // Any other key terminates a half-typed motion so `gx`, `5x`, or
+        // `zx` don't leave stale state around.
+        if (pendingCount !== null || pendingG || pendingZ)
+            clearPending();
+        return false;
+    }
+    return {
+        handleKeydown: handleKeydown,
+        focusedIndex: function () { return focused; },
+        focus: focus,
+        focusFirst: focusFirst,
+        focusLast: focusLast,
+        clear: clear,
+        refresh: refresh,
+        selectedIds: function () { return new Set(selected); },
+        toggleSelection: function (navId) {
+            var items = resolveItems(optsRef);
+            if (navId === undefined) {
+                if (focused < 0)
+                    return;
+                toggleSelectionByIndex(items, focused);
+                return;
+            }
+            if (selected.has(navId))
+                selected.delete(navId);
+            else
+                selected.add(navId);
+            emitSelectionChange();
+        },
+        setSelection: function (ids) {
+            selected.clear();
+            for (var _i = 0, ids_1 = ids; _i < ids_1.length; _i++) {
+                var id = ids_1[_i];
+                selected.add(id);
+            }
+            emitSelectionChange();
+        },
+        clearSelection: function () {
+            if (selected.size === 0 && !visualMode)
+                return;
+            selected.clear();
+            exitVisualMode();
+            emitSelectionChange();
+        },
+        selectAll: function () {
+            var items = resolveItems(optsRef);
+            for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
+                var el = items_3[_i];
+                var id = getId(el);
+                if (id !== null)
+                    selected.add(id);
+            }
+            emitSelectionChange();
+        },
+        isSelecting: function () { return visualMode; },
+    };
+}
+/**
+ * Imperative composable — use when you already own a keydown handler and want
+ * listNav to decide whether to consume the event.
+ */
+export function createListNav(options) {
+    var ref = { current: options };
+    return makeController(ref);
+}
+/**
+ * Svelte action — attaches a keydown listener (window by default) and handles
+ * j/k/ArrowDown/ArrowUp/Enter/Space/Escape navigation over children of `node`.
+ */
+export var listNav = function (node, initial) {
+    if (initial === void 0) { initial = {}; }
+    var ref = { current: withDefaultGetItems(node, initial) };
+    var controller = makeController(ref);
+    var target = ref.current.global === false ? node : window;
+    function onKeydown(e) {
+        controller.handleKeydown(e);
+    }
+    function attach() {
+        target = ref.current.global === false ? node : window;
+        target.addEventListener('keydown', onKeydown);
+    }
+    function detach() {
+        target.removeEventListener('keydown', onKeydown);
+    }
+    attach();
+    return {
+        update: function (next) {
+            if (next === void 0) { next = {}; }
+            var wasGlobal = ref.current.global !== false;
+            ref.current = withDefaultGetItems(node, next);
+            var isGlobal = ref.current.global !== false;
+            if (wasGlobal !== isGlobal) {
+                detach();
+                attach();
+            }
+            controller.refresh();
+        },
+        destroy: function () {
+            detach();
+            controller.clear();
+        },
+    };
+};
+function withDefaultGetItems(node, options) {
+    var _a;
+    if (options.getItems)
+        return options;
+    var selector = (_a = options.itemSelector) !== null && _a !== void 0 ? _a : '[data-nav-id]';
+    return __assign(__assign({}, options), { getItems: function () { return Array.from(node.querySelectorAll(selector)); } });
+}

package/dist/actions/railNav.js

@@ -111,7 +111,13 @@ function resolveHosts(optsRef) {
     var order = resolveOrder(optsRef.current);
     return order
         .map(function (id) { return container.querySelector("[".concat(attr, "=\"").concat(id, "\"]")); })
-        .filter(function (el) { return !!el; });
+        // checkVisibility() correctly returns false for elements inside a closed <details>
+        // (browsers keep offsetParent non-null for those, so that check alone is insufficient).
+        // Where checkVisibility is unavailable (jsdom, older engines) treat the rung as
+        // visible — a rendered element in `order` is navigable by default; only the
+        // closed-<details> case needs the extra exclusion, and that only exists in a
+        // real layout engine.
+        .filter(function (el) { var _a, _b; return !!el && ((_b = (_a = el.checkVisibility) === null || _a === void 0 ? void 0 : _a.call(el)) !== null && _b !== void 0 ? _b : true); });
 }
 /**
  * Focus the most appropriate control inside a rung host: