sheer-ui 0.4.2 → 0.5.0

package/src/lib/internal/selection.svelte.ts

@@ -1,143 +0,0 @@
-import { boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, getAriaChecked } from './attrs.js';
-import { kbd } from './kbd.js';
-import type { Orientation } from './index.js';
-import type { BitsKeyboardEvent, BitsMouseEvent } from './types.js';
-import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
-import { RovingFocusItem } from './roving-focus-item.svelte.js';
-
-export type SelectionType = 'single' | 'multiple';
-
-export type Selection = string | string[];
-
-export const emptySelection = (type: SelectionType): Selection => (type === 'single' ? '' : []);
-
-/**
- * Membership over a consumer's bindable that is a string in single mode and a string array
- * in multiple mode. `value` reads and writes the root's prop through the closures it was
- * built with; the mode is fixed at construction, so `with` always keeps the declared shape.
- */
-export class SelectionValue {
-	readonly isMulti: boolean;
-	readonly #read: () => Selection;
-	readonly #write: (value: Selection) => void;
-
-	constructor(type: SelectionType, read: () => Selection, write: (value: Selection) => void) {
-		this.isMulti = type === 'multiple';
-		this.#read = read;
-		this.#write = write;
-	}
-
-	get value(): Selection {
-		return this.#read();
-	}
-
-	set value(next: Selection) {
-		this.#write(next);
-	}
-
-	includes(item: string): boolean {
-		const value = this.#read();
-		return this.isMulti ? (value as string[]).includes(item) : value === item;
-	}
-
-	/** The value with `item` present or absent; the same reference when it already is. */
-	with(item: string, selected: boolean): Selection {
-		const value = this.#read();
-		const present = this.isMulti ? (value as string[]).includes(item) : value === item;
-		if (present === selected) return value;
-		if (!this.isMulti) return selected ? item : '';
-		return selected ? [...(value as string[]), item] : (value as string[]).filter((v) => v !== item);
-	}
-}
-
-/**
- * What a selection item needs from the group that owns it. Reactive members are accessors on the
- * implementing class, read at use, never copied out.
- */
-export interface SelectionGroup {
-	readonly selection: SelectionValue;
-	readonly disabled: boolean;
-	readonly orientation: Orientation;
-	readonly rovingFocusGroup: RovingFocusGroup;
-	/** Whether arrow keys move between the items; absent means always. */
-	readonly rovingFocus?: boolean;
-	/** A selection takes the roving tab stop in a toggle group; a toolbar's stays where it is. */
-	readonly selectionTakesTabStop: boolean;
-	/** Beyond the roving group's candidate attribute, which every item carries. */
-	readonly extraItemAttrs?: Record<string, ''>;
-}
-
-/** The item component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
-export interface SelectionItemOpts {
-	readonly id: string;
-	readonly value: string;
-	readonly disabled: boolean;
-	ref: HTMLElement | null;
-}
-
-export class SelectionItemState {
-	readonly opts: SelectionItemOpts;
-	readonly group: SelectionGroup;
-	readonly rovingItem: RovingFocusItem;
-	readonly #isDisabled = $derived.by(() => this.opts.disabled || this.group.disabled);
-	readonly isPressed = $derived.by(() => this.group.selection.includes(this.opts.value));
-
-	constructor(opts: SelectionItemOpts, group: SelectionGroup) {
-		this.opts = opts;
-		this.group = group;
-		this.rovingItem = new RovingFocusItem({
-			group: group.rovingFocusGroup,
-			ref: () => opts.ref,
-			setRef: (v) => (opts.ref = v),
-			enabled: () => group.rovingFocus ?? true,
-		});
-
-		this.onclick = this.onclick.bind(this);
-		this.onkeydown = this.onkeydown.bind(this);
-	}
-
-	#activate() {
-		if (this.#isDisabled) return;
-		const item = this.opts.value;
-		const selected = !this.group.selection.includes(item);
-		this.group.selection.value = this.group.selection.with(item, selected);
-		if (selected && this.group.selectionTakesTabStop) this.group.rovingFocusGroup.setCurrentTabStopId(this.opts.id);
-	}
-
-	onclick(_: BitsMouseEvent) {
-		this.#activate();
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (this.#isDisabled) return;
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			e.preventDefault();
-			this.#activate();
-			return;
-		}
-		this.rovingItem.handleKeydown(e);
-	}
-
-	readonly snippetProps = $derived.by(() => ({ pressed: this.isPressed }));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id,
-				role: this.group.selection.isMulti ? undefined : 'radio',
-				'data-orientation': this.group.orientation,
-				'data-disabled': boolToEmptyStrOrUndef(this.#isDisabled),
-				'data-state': this.isPressed ? 'on' : 'off',
-				'data-value': this.opts.value,
-				'aria-pressed': this.group.selection.isMulti ? boolToStr(this.isPressed) : undefined,
-				'aria-checked': this.group.selection.isMulti ? undefined : getAriaChecked(this.isPressed, false),
-				disabled: boolToTrueOrUndef(this.#isDisabled),
-				...this.group.rovingFocusGroup.candidateAttrs,
-				...this.group.extraItemAttrs,
-				//
-				onclick: this.onclick,
-				onkeydown: this.onkeydown,
-				...this.rovingItem.props,
-			}) as const,
-	);
-}

package/src/lib/internal/shared-state.svelte.ts

@@ -1,39 +0,0 @@
-import type { AnyFn } from './types.js';
-
-export class SharedState<T extends AnyFn> {
-	#factory: T;
-	#subscribers = 0;
-	#state: ReturnType<T> | undefined = $state();
-	#disposeRoot: (() => void) | undefined;
-
-	constructor(factory: T) {
-		this.#factory = factory;
-	}
-
-	#release = () => {
-		// Deferred a microtask so a same-tick destroy→create (last overlay closing while the
-		// next one opens) lands on the still-alive root instead of disposing and rebuilding it —
-		// the same race svelte core defers for in createSubscriber.
-		queueMicrotask(() => {
-			this.#subscribers -= 1;
-
-			if (this.#subscribers > 0) return;
-
-			this.#disposeRoot?.();
-			this.#disposeRoot = undefined;
-			this.#state = undefined;
-		});
-	};
-
-	get(...args: Parameters<T>): ReturnType<T> {
-		this.#subscribers += 1;
-
-		this.#disposeRoot ??= $effect.root(() => {
-			this.#state = this.#factory(...args);
-		});
-
-		$effect(() => this.#release);
-
-		return this.#state!;
-	}
-}

package/src/lib/internal/state-machine.svelte.ts

@@ -1,30 +0,0 @@
-interface Machine<S> {
-	[k: string]: { [k: string]: S };
-}
-type MachineState<T> = keyof T;
-type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
-
-// 🤯 https://fettblog.eu/typescript-union-to-intersection/
-// oxlint-disable-next-line no-explicit-any
-type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
-
-export class StateMachine<M> {
-	state: MachineState<M>;
-	readonly #machine: M & Machine<MachineState<M>>;
-
-	constructor(initialState: MachineState<M>, machine: M & Machine<MachineState<M>>) {
-		this.state = $state.raw(initialState);
-		this.#machine = machine;
-		this.dispatch = this.dispatch.bind(this);
-	}
-
-	#reducer(event: MachineEvent<M>) {
-		// @ts-expect-error  state is keyof M
-		const nextState = this.#machine[this.state][event];
-		return nextState ?? this.state;
-	}
-
-	dispatch(event: MachineEvent<M>) {
-		this.state = this.#reducer(event);
-	}
-}

package/src/lib/internal/svelte-resize-observer.svelte.ts

@@ -1,37 +0,0 @@
-import { createAttachmentKey, type Attachment } from 'svelte/attachments';
-
-type MaybeElement = Element | null | undefined | false;
-
-/** rAF-debounced ResizeObserver over `nodes`, returning its teardown. */
-function observeNodes(nodes: Element[], onResize: ResizeObserverCallback, options?: ResizeObserverOptions) {
-	let rAF = 0;
-
-	const resizeObserver = new ResizeObserver((entries, observer) => {
-		window.cancelAnimationFrame(rAF);
-		rAF = window.requestAnimationFrame(() => onResize(entries, observer));
-	});
-
-	for (const node of nodes) {
-		resizeObserver.observe(node, options);
-	}
-
-	return () => {
-		window.cancelAnimationFrame(rAF);
-		resizeObserver.disconnect();
-	};
-}
-
-export function resizeAttachment<T extends Element = HTMLElement>(onResize: ResizeObserverCallback, options?: ResizeObserverOptions) {
-	return {
-		[createAttachmentKey()]: ((node: T) => observeNodes([node], onResize, options)) satisfies Attachment<T>,
-	};
-}
-
-export function observeResizeMany(getNodes: () => Iterable<MaybeElement>, onResize: () => void, options?: ResizeObserverOptions) {
-	$effect(() => {
-		const nodes = [...getNodes()].filter(Boolean) as Element[];
-		if (nodes.length === 0) return;
-
-		return observeNodes(nodes, onResize, options);
-	});
-}

package/src/lib/internal/tabbable.ts

@@ -1,398 +0,0 @@
-/*
- * Adapted from focus-trap/tabbable v6.5.0.
- * Source: https://github.com/focus-trap/tabbable/blob/v6.5.0/src/index.js
- * License: MIT, Copyright (c) 2015 David Clark.
- *
- * Local scope: only the behavior used by this package is kept. We support open
- * shadow roots and the display check modes used by the helpers below.
- */
-
-import { selfAndAncestors } from './tools/utils/dom.js';
-
-type DisplayCheck = 'full' | 'none';
-
-interface TabbableOptions {
-	displayCheck?: DisplayCheck;
-	getShadowRoot?: true;
-}
-
-type TabbableElement = HTMLElement & {
-	assignedSlot?: HTMLSlotElement | null;
-	checked?: boolean;
-	disabled?: boolean;
-	form?: HTMLFormElement | null;
-	name?: string;
-	type?: string;
-};
-
-type CandidateScope = {
-	scopeParent: TabbableElement;
-	candidates: Candidate[];
-};
-
-type Candidate = TabbableElement | CandidateScope;
-
-const candidateSelectors = [
-	'input:not([inert]):not([inert] *)',
-	'select:not([inert]):not([inert] *)',
-	'textarea:not([inert]):not([inert] *)',
-	'a[href]:not([inert]):not([inert] *)',
-	'area[href]:not([inert]):not([inert] *)',
-	'button:not([inert]):not([inert] *)',
-	'[tabindex]:not(slot):not([inert]):not([inert] *)',
-	'audio[controls]:not([inert]):not([inert] *)',
-	'video[controls]:not([inert]):not([inert] *)',
-	'[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)',
-	'details>summary:first-of-type:not([inert]):not([inert] *)',
-	'details:not([inert]):not([inert] *)',
-];
-
-const candidateSelector = candidateSelectors.join(',');
-const focusableCandidateSelector = candidateSelectors.concat('iframe:not([inert]):not([inert] *)').join(',');
-
-const noElement = typeof Element === 'undefined';
-const matches = noElement ? () => false : Element.prototype.matches;
-
-function asElement(node: Node | null | undefined): Element | null {
-	return node?.nodeType === Node.ELEMENT_NODE ? (node as Element) : null;
-}
-
-function getRootNode(element: Element): Node {
-	return element.getRootNode?.() ?? element.ownerDocument;
-}
-
-
-function isInert(node: Node | null | undefined, lookUp = true): boolean {
-	const element = asElement(node);
-	const inertAttribute = element?.getAttribute('inert');
-	const inert = inertAttribute === '' || inertAttribute === 'true';
-
-	return Boolean(
-		inert ||
-			(lookUp &&
-				node &&
-				(typeof (node as Element).closest === 'function'
-					? (node as Element).closest('[inert]')
-					: isInert(node.parentNode))),
-	);
-}
-
-function isContentEditable(node: Element | null | undefined): boolean {
-	const value = node?.getAttribute('contenteditable');
-	return value === '' || value === 'true';
-}
-
-function getCandidates(container: Element, includeContainer: boolean, filter: (node: TabbableElement) => boolean) {
-	if (isInert(container)) return [];
-
-	const candidates = Array.from(container.querySelectorAll(candidateSelector)) as TabbableElement[];
-	if (includeContainer && matches.call(container, candidateSelector)) {
-		candidates.unshift(container as TabbableElement);
-	}
-
-	return candidates.filter(filter);
-}
-
-/**
- * Candidates under `elements` in document order (depth-first, pre-order). Slot content and open
- * shadow roots recurse as their own scope: spliced in when `options.flatten`, otherwise yielded as
- * a single `{ scopeParent, candidates }` entry so `sortByOrder` can rank the scope as a unit.
- */
-function* iterateCandidates(
-	elements: Iterable<Element>,
-	includeContainer: boolean,
-	options: {
-		filter: (node: TabbableElement) => boolean;
-		flatten: boolean;
-		shadowRootFilter?: (node: TabbableElement) => boolean;
-	},
-): Generator<Candidate> {
-	const roots = Array.from(elements) as TabbableElement[];
-	// The roots are excluded from their own result unless `includeContainer`. Nested scopes always
-	// pass true, so only the outermost call ever consults this.
-	const excluded = includeContainer ? null : new Set<Element>(roots);
-
-	function* scope(scopeParent: TabbableElement, content: Iterable<Element>): Generator<Candidate> {
-		const nested = iterateCandidates(content, true, options);
-		if (options.flatten) yield* nested;
-		else yield { scopeParent, candidates: Array.from(nested) };
-	}
-
-	function* walk(elements: TabbableElement[]): Generator<Candidate> {
-		for (const element of elements) {
-			if (isInert(element, false)) continue;
-
-			if (element.tagName === 'SLOT') {
-				const slot = element as HTMLSlotElement;
-				const assigned = slot.assignedElements();
-				yield* scope(element, assigned.length ? assigned : Array.from(slot.children));
-				continue;
-			}
-
-			if (matches.call(element, candidateSelector) && options.filter(element) && !excluded?.has(element)) {
-				yield element;
-			}
-
-			const shadowRoot = element.shadowRoot;
-			const validShadowRoot =
-				shadowRoot && !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
-
-			if (validShadowRoot) yield* scope(element, shadowRoot.children);
-			else yield* walk(Array.from(element.children) as TabbableElement[]);
-		}
-	}
-
-	yield* walk(roots);
-}
-
-function hasTabIndex(node: Element): boolean {
-	return !Number.isNaN(Number.parseInt(node.getAttribute('tabindex') ?? '', 10));
-}
-
-export function getTabIndex(node: TabbableElement): number {
-	if (!node) throw new Error('No node provided');
-
-	if (
-		node.tabIndex < 0 &&
-		(/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) &&
-		!hasTabIndex(node)
-	) {
-		return 0;
-	}
-
-	return node.tabIndex;
-}
-
-function getSortOrderTabIndex(node: TabbableElement, isScope: boolean): number {
-	const tabIndex = getTabIndex(node);
-	return tabIndex < 0 && isScope && !hasTabIndex(node) ? 0 : tabIndex;
-}
-
-function isCandidateScope(candidate: Candidate): candidate is CandidateScope {
-	return 'scopeParent' in candidate;
-}
-
-function isInput(node: TabbableElement): node is HTMLInputElement & TabbableElement {
-	return node.tagName === 'INPUT';
-}
-
-function isHiddenInput(node: TabbableElement): boolean {
-	return isInput(node) && node.type === 'hidden';
-}
-
-function isDetailsWithSummary(node: TabbableElement): boolean {
-	return node.tagName === 'DETAILS' && Array.from(node.children).some((child) => child.tagName === 'SUMMARY');
-}
-
-function getCheckedRadio(nodes: NodeListOf<HTMLInputElement>, form: HTMLFormElement | null | undefined) {
-	for (const node of nodes) {
-		if (node.checked && node.form === form) return node;
-	}
-}
-
-function isTabbableRadio(node: TabbableElement): boolean {
-	if (!node.name) return true;
-
-	const radioScope = (node.form ?? getRootNode(node)) as ParentNode;
-	const queryRadios = (name: string) => radioScope.querySelectorAll<HTMLInputElement>(`input[type="radio"][name="${name}"]`);
-
-	let radioSet: NodeListOf<HTMLInputElement>;
-	if (typeof window !== 'undefined' && window.CSS?.escape) {
-		radioSet = queryRadios(window.CSS.escape(node.name));
-	} else {
-		try {
-			radioSet = queryRadios(node.name);
-		} catch {
-			return false;
-		}
-	}
-
-	const checked = getCheckedRadio(radioSet, node.form);
-	return !checked || checked === node;
-}
-
-function isRadio(node: TabbableElement): boolean {
-	return isInput(node) && node.type === 'radio';
-}
-
-function isNonTabbableRadio(node: TabbableElement): boolean {
-	return isRadio(node) && !isTabbableRadio(node);
-}
-
-
-function isHidden(node: TabbableElement, options: TabbableOptions): boolean {
-	// 'full' (a real browser): one platform call covers display:none anywhere up the tree,
-	// visibility hidden/collapse (own or inherited), content-visibility, a closed <details>'
-	// content and a detached node (no box) — upstream tabbable's `full-native` mode.
-	if (!options.displayCheck || options.displayCheck === 'full') {
-		return !node.checkVisibility({ visibilityProperty: true });
-	}
-
-	// 'none' (jsdom, no layout): the style-only checks the platform call would have made.
-	const { visibility } = getComputedStyle(node);
-	if (visibility === 'hidden' || visibility === 'collapse') return true;
-
-	const isDirectSummary = matches.call(node, 'details>summary:first-of-type');
-	const nodeUnderDetails = isDirectSummary ? node.parentElement : node;
-	return Boolean(nodeUnderDetails && matches.call(nodeUnderDetails, 'details:not([open]) *'));
-}
-
-function isDisabledFromFieldset(node: TabbableElement): boolean {
-	if (!/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) return false;
-
-	for (const parent of selfAndAncestors(node.parentElement)) {
-		if (parent.tagName === 'FIELDSET' && (parent as HTMLFieldSetElement).disabled) {
-			for (const child of parent.children) {
-				if (child.tagName === 'LEGEND') {
-					return matches.call(parent, 'fieldset[disabled] *') ? true : !child.contains(node);
-				}
-			}
-			return true;
-		}
-	}
-
-	return false;
-}
-
-function isNodeMatchingSelectorFocusable(options: TabbableOptions, node: TabbableElement): boolean {
-	return !(
-		node.disabled ||
-		isHiddenInput(node) ||
-		isHidden(node, options) ||
-		isDetailsWithSummary(node) ||
-		isDisabledFromFieldset(node)
-	);
-}
-
-function isNodeMatchingSelectorTabbable(options: TabbableOptions, node: TabbableElement): boolean {
-	return !isNonTabbableRadio(node) && getTabIndex(node) >= 0 && isNodeMatchingSelectorFocusable(options, node);
-}
-
-function isShadowRootTabbable(shadowHostNode: TabbableElement): boolean {
-	const tabIndex = Number.parseInt(shadowHostNode.getAttribute('tabindex') ?? '', 10);
-	return Number.isNaN(tabIndex) || tabIndex >= 0;
-}
-
-function sortByOrder(candidates: Candidate[]): TabbableElement[] {
-	const regularTabbables: TabbableElement[] = [];
-	const orderedTabbables: Array<{ documentOrder: number; tabIndex: number; content: TabbableElement[] }> = [];
-
-	candidates.forEach((candidate, documentOrder) => {
-		const isScope = isCandidateScope(candidate);
-		const element = isScope ? candidate.scopeParent : candidate;
-		const content = isScope ? sortByOrder(candidate.candidates) : [element];
-		const tabIndex = getSortOrderTabIndex(element, isScope);
-
-		if (tabIndex === 0) {
-			regularTabbables.push(...content);
-		} else {
-			orderedTabbables.push({ documentOrder, tabIndex, content });
-		}
-	});
-
-	return orderedTabbables
-		.sort((a, b) => (a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex))
-		.flatMap((candidate) => candidate.content)
-		.concat(regularTabbables);
-}
-
-export function tabbable(container: HTMLElement, options: TabbableOptions = {}) {
-	if (options.getShadowRoot) {
-		const candidates = iterateCandidates([container], false, {
-			filter: (node) => isNodeMatchingSelectorTabbable(options, node),
-			flatten: false,
-			shadowRootFilter: isShadowRootTabbable,
-		});
-		return sortByOrder(Array.from(candidates));
-	}
-
-	return sortByOrder(getCandidates(container, false, (node) => isNodeMatchingSelectorTabbable(options, node)));
-}
-
-export function focusable(container: HTMLElement, options: TabbableOptions = {}) {
-	if (options.getShadowRoot) {
-		const candidates = iterateCandidates([container], false, {
-			filter: (node) => isNodeMatchingSelectorFocusable(options, node),
-			flatten: true,
-		});
-		return Array.from(candidates) as TabbableElement[];
-	}
-
-	return getCandidates(container, false, (node) => isNodeMatchingSelectorFocusable(options, node));
-}
-
-export function isTabbableNode(node: Element, options: TabbableOptions = {}) {
-	if (!node) throw new Error('No node provided');
-	if (!matches.call(node, candidateSelector)) return false;
-	return isNodeMatchingSelectorTabbable(options, node as TabbableElement);
-}
-
-export function isFocusableNode(node: Element, options: TabbableOptions = {}) {
-	if (!node) throw new Error('No node provided');
-	if (!matches.call(node, focusableCandidateSelector)) return false;
-	return isNodeMatchingSelectorFocusable(options, node as TabbableElement);
-}
-
-function getTabbableOptions() {
-	return {
-		getShadowRoot: true,
-		displayCheck:
-			// JSDOM does not support the `tabbable` library. To solve this we can
-			// check if `ResizeObserver` is a real function (not polyfilled), which
-			// determines if the current environment is JSDOM-like.
-			typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none',
-	} as const;
-}
-
-export function getTabbableCandidates(container: HTMLElement) {
-	return tabbable(container, getTabbableOptions()) as HTMLElement[];
-}
-
-export function getFocusableCandidates(container: HTMLElement) {
-	return focusable(container, getTabbableOptions()) as HTMLElement[];
-}
-
-export function isTabbable(node: Element) {
-	return isTabbableNode(node, getTabbableOptions());
-}
-
-export function isFocusable(node: Element) {
-	return isFocusableNode(node, getTabbableOptions());
-}
-
-/**
- * Gets all tabbable elements in the body and finds the next/previous tabbable element
- * from the `currentNode` based on the `direction` provided.
- * @param currentNode - the node we want to get the next/previous tabbable from
- */
-export function getTabbableFrom(currentNode: HTMLElement, direction: 'next' | 'prev') {
-	if (!isTabbable(currentNode)) {
-		return getTabbableFromFocusable(currentNode, direction);
-	}
-	const doc = currentNode.ownerDocument;
-	const allTabbable = getTabbableCandidates(doc.body);
-	if (direction === 'prev') allTabbable.reverse();
-	const activeIndex = allTabbable.indexOf(currentNode);
-	if (activeIndex === -1) return doc.body;
-	const nextTabbableElements = allTabbable.slice(activeIndex + 1);
-	return nextTabbableElements[0];
-}
-
-export function getTabbableFromFocusable(currentNode: HTMLElement, direction: 'next' | 'prev') {
-	const doc = currentNode.ownerDocument;
-	if (!isFocusable(currentNode)) return doc.body;
-
-	// find all focusable nodes, since some elements may be focusable but not tabbable
-	// such as context menu triggers
-	const allFocusable = getFocusableCandidates(doc.body);
-
-	// find index of current node among focusable siblings
-	if (direction === 'prev') allFocusable.reverse();
-	const activeIndex = allFocusable.indexOf(currentNode);
-	if (activeIndex === -1) return doc.body;
-
-	const nextFocusableElements = allFocusable.slice(activeIndex + 1);
-
-	// find the next focusable node that is also tabbable
-	return nextFocusableElements.find((node) => isTabbable(node)) ?? doc.body;
-}