@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/a11y/interactivity-checker.js

@@ -0,0 +1,126 @@
+// InteractivityChecker: is an element disabled / visible / focusable / tabbable (frames, iOS WebKit
+// rules, audio / video, contenteditable).
+// Ported from Angular CDK a11y interactivity-checker (angular/components), MIT, © Google LLC.
+//
+// Rivet: a plain class plus a shared instance; the platform checks follow Angular's `Platform`
+// (WEBKIT excludes Blink, IOS = iPad / iPhone / iPod user agents). Not supported on the server
+// (`isTabbable` returns false there, as in the original).
+/** Options for `isFocusable`. */
+export class IsFocusableConfig {
+    /** Whether to count invisible elements as focusable. */
+    ignoreVisibility = false;
+}
+function userAgent() {
+    return typeof navigator === "undefined" ? "" : navigator.userAgent;
+}
+const isBrowser = () => typeof document === "object" && !!document;
+const isEdge = () => /(edge)/i.test(userAgent());
+const isTrident = () => /(msie|trident)/i.test(userAgent());
+const isBlink = () => isBrowser() && !!(globalThis.chrome || (typeof Intl !== "undefined" && Intl.v8BreakIterator)) && typeof CSS !== "undefined" && !isEdge() && !isTrident();
+const isPlatformWebKit = () => isBrowser() && /AppleWebKit/i.test(userAgent()) && !isBlink() && !isEdge() && !isTrident();
+const isPlatformIOS = () => isBrowser() && /iPad|iPhone|iPod/.test(userAgent()) && !("MSStream" in globalThis);
+const isPlatformFirefox = () => isBrowser() && /(firefox|minefield)/i.test(userAgent());
+/** Checks interactivity of elements: disabled, visible, tabbable, focusable. */
+export class InteractivityChecker {
+    /** Whether the element has a `disabled` attribute (not `aria-disabled`). */
+    isDisabled(element) {
+        return element.hasAttribute("disabled");
+    }
+    /** Whether the element is rendered (has geometry) and `visibility: visible`. */
+    isVisible(element) {
+        return hasGeometry(element) && getComputedStyle(element).visibility === "visible";
+    }
+    /** Whether Tab reaches the element (assumes it is visible). */
+    isTabbable(element) {
+        if (!isBrowser())
+            return false;
+        const frameElement = getFrameElement(getWindow(element));
+        if (frameElement) {
+            // Inside a frame: an untabbable or hidden frame makes its content untabbable.
+            if (getTabIndexValue(frameElement) === -1)
+                return false;
+            if (!this.isVisible(frameElement))
+                return false;
+        }
+        const nodeName = element.nodeName.toLowerCase();
+        const tabIndexValue = getTabIndexValue(element);
+        if (element.hasAttribute("contenteditable"))
+            return tabIndexValue !== -1;
+        // Browsers do not keep focus inside frames / objects; they are not part of the tab order.
+        if (nodeName === "iframe" || nodeName === "object")
+            return false;
+        // iOS Safari tabs only between text inputs, selects and textareas.
+        if (isPlatformWebKit() && isPlatformIOS() && !isPotentiallyTabbableIOS(element))
+            return false;
+        if (nodeName === "audio") {
+            if (!element.hasAttribute("controls"))
+                return false;
+            return tabIndexValue !== -1;
+        }
+        if (nodeName === "video") {
+            if (tabIndexValue === -1)
+                return false;
+            if (tabIndexValue !== null)
+                return true;
+            // Firefox tabs to videos without controls.
+            return isPlatformFirefox() || element.hasAttribute("controls");
+        }
+        return element.tabIndex >= 0;
+    }
+    /** Whether the element can receive focus (native control, anchor with href, contenteditable, tabindex). */
+    isFocusable(element, config) {
+        return isPotentiallyFocusable(element) && !this.isDisabled(element) && (config?.ignoreVisibility || this.isVisible(element));
+    }
+}
+function getFrameElement(window) {
+    try {
+        return window.frameElement;
+    }
+    catch {
+        return null; // cross-origin
+    }
+}
+function hasGeometry(element) {
+    return !!(element.offsetWidth || element.offsetHeight || (typeof element.getClientRects === "function" && element.getClientRects().length));
+}
+function isNativeFormElement(element) {
+    const nodeName = element.nodeName.toLowerCase();
+    return nodeName === "input" || nodeName === "select" || nodeName === "button" || nodeName === "textarea";
+}
+function isHiddenInput(element) {
+    return element.nodeName.toLowerCase() === "input" && element.type === "hidden";
+}
+function isAnchorWithHref(element) {
+    return element.nodeName.toLowerCase() === "a" && element.hasAttribute("href");
+}
+function hasValidTabIndex(element) {
+    if (!element.hasAttribute("tabindex") || element.tabIndex === undefined)
+        return false;
+    const tabIndex = element.getAttribute("tabindex");
+    return !!(tabIndex && !isNaN(parseInt(tabIndex, 10)));
+}
+/** The parsed `tabindex` attribute, or null when absent / invalid. */
+function getTabIndexValue(element) {
+    if (!hasValidTabIndex(element))
+        return null;
+    const tabIndex = parseInt(element.getAttribute("tabindex") || "", 10);
+    return isNaN(tabIndex) ? -1 : tabIndex;
+}
+function isPotentiallyTabbableIOS(element) {
+    const nodeName = element.nodeName.toLowerCase();
+    const inputType = nodeName === "input" && element.type;
+    return inputType === "text" || inputType === "password" || nodeName === "select" || nodeName === "textarea";
+}
+function isPotentiallyFocusable(element) {
+    if (isHiddenInput(element))
+        return false;
+    return isNativeFormElement(element) || isAnchorWithHref(element) || element.hasAttribute("contenteditable") || hasValidTabIndex(element);
+}
+function getWindow(node) {
+    return (node.ownerDocument && node.ownerDocument.defaultView) || window;
+}
+let shared = null;
+/** The shared InteractivityChecker. */
+export function getInteractivityChecker() {
+    return (shared ??= new InteractivityChecker());
+}

package/a11y/key-manager.d.ts

@@ -0,0 +1,152 @@
+import type { FocusOrigin } from "./focus-monitor.js";
+type ModifierKey = "altKey" | "shiftKey" | "ctrlKey" | "metaKey";
+/** Whether `event` has any of `modifiers` (any modifier when none given). */
+export declare function hasModifierKey(event: KeyboardEvent | MouseEvent, ...modifiers: ModifierKey[]): boolean;
+export interface Subscription {
+    unsubscribe(): void;
+}
+/** Observer callbacks (RxJS shape). */
+export interface Observer<T> {
+    next?: (value: T) => void;
+    complete?: () => void;
+}
+/** Minimal `Subject`: `next`, `subscribe` (function or `{ next, complete }`), `complete`. */
+export declare class Subject<T = void> {
+    private observers;
+    private closed;
+    next(value: T): void;
+    subscribe(observer: ((value: T) => void) | Observer<T>): Subscription;
+    complete(): void;
+    get observed(): boolean;
+}
+export interface TypeaheadItem {
+    getLabel?(): string;
+}
+export interface TypeaheadConfig<T> {
+    debounceInterval?: number;
+    skipPredicate?: (item: T) => boolean | undefined;
+}
+/** Selects items from typed characters (debounced), as in `role="listbox"` / `role="tree"`. */
+export declare class Typeahead<T extends TypeaheadItem> {
+    private _items;
+    private _selectedItemIndex;
+    /** Letters pressed so far. */
+    private _pressedLetters;
+    private _skipPredicateFn?;
+    private _timer;
+    private readonly _interval;
+    private readonly _selectedItem;
+    readonly selectedItem: Subject<T>;
+    constructor(initialItems: readonly T[], config?: TypeaheadConfig<T>);
+    destroy(): void;
+    setCurrentSelectedItemIndex(index: number): void;
+    setItems(items: readonly T[]): void;
+    handleKey(event: KeyboardEvent): void;
+    /** Whether the user is typing (letters buffered). */
+    isTyping(): boolean;
+    /** Forget the typed letters. */
+    reset(): void;
+    private _letter;
+    private _search;
+}
+/** Items a ListKeyManager can manage. */
+export interface ListKeyManagerOption {
+    disabled?: boolean;
+    getLabel?(): string;
+}
+/** Modifier keys handled by the ListKeyManager. */
+export type ListKeyManagerModifierKey = "altKey" | "ctrlKey" | "metaKey" | "shiftKey";
+type Items<T> = T[] | readonly T[] | (() => T[] | readonly T[]);
+/** Keyboard navigation of a list: sets the active item on arrow / Home / End / Page / typeahead keys. */
+export declare class ListKeyManager<T extends ListKeyManagerOption> {
+    private _activeItemIndex;
+    private _activeItem;
+    private _wrap;
+    private _typeaheadSubscription;
+    private _vertical;
+    private _horizontal;
+    private _allowedModifierKeys;
+    private _homeAndEnd;
+    private _pageUpAndDown;
+    private _effect;
+    private _typeahead?;
+    /** Skip predicate: disabled items by default. */
+    private _skipPredicateFn;
+    /** Emits when Tab is pressed (focus leaves the list). */
+    readonly tabOut: Subject<void>;
+    /** Emits the new active index whenever the active item changes. */
+    readonly change: Subject<number>;
+    private _items;
+    constructor(_items: Items<T>);
+    /** Predicate for items to skip. */
+    skipPredicate(predicate: (item: T) => boolean): this;
+    /** Wrap from one end of the list to the other. */
+    withWrap(shouldWrap?: boolean): this;
+    /** Up / Down arrows move (default on). */
+    withVerticalOrientation(enabled?: boolean): this;
+    /** Left / Right arrows move in `direction`; `null` disables horizontal movement. */
+    withHorizontalOrientation(direction: "ltr" | "rtl" | null): this;
+    /** Modifier keys that may be held while navigating (default none). */
+    withAllowedModifierKeys(keys: ListKeyManagerModifierKey[]): this;
+    /** Typeahead: typed characters activate the next item whose label starts with them. */
+    withTypeAhead(debounceInterval?: number): this;
+    /** Cancel the current typeahead sequence. */
+    cancelTypeahead(): this;
+    /** Home / End activate the first / last item. */
+    withHomeAndEnd(enabled?: boolean): this;
+    /** PageUp / PageDown move by `delta` items (clamped to the ends). */
+    withPageUpDown(enabled?: boolean, delta?: number): this;
+    /** Set the active item (index or item); emits `change` when it changed. */
+    setActiveItem(item: T | number): void;
+    /** Set the active item from a keydown; prevents the default action of handled keys. */
+    onKeydown(event: KeyboardEvent): void;
+    /** Index of the active item (-1: none). */
+    get activeItemIndex(): number | null;
+    /** The active item. */
+    get activeItem(): T | null;
+    /** Whether the user is typing (typeahead). */
+    isTyping(): boolean;
+    setFirstItemActive(): void;
+    setLastItemActive(): void;
+    setNextItemActive(): void;
+    setPreviousItemActive(): void;
+    /** Set the active item without emitting `change` or other effects. */
+    updateActiveItem(item: T | number): void;
+    /** Clean up subscriptions and timers. */
+    destroy(): void;
+    private _setActiveItemByDelta;
+    private _setActiveInWrapMode;
+    private _setActiveInDefaultMode;
+    private _setActiveItemByIndex;
+    private _getItemsArray;
+    private _itemsChanged;
+}
+/** Items of an ActiveDescendantKeyManager style themselves as active / inactive. */
+export interface Highlightable extends ListKeyManagerOption {
+    setActiveStyles(): void;
+    setInactiveStyles(): void;
+}
+/** ListKeyManager for `aria-activedescendant` widgets: the active item styles itself, focus stays put. */
+export declare class ActiveDescendantKeyManager<T> extends ListKeyManager<Highlightable & T> {
+    setActiveItem(index: (Highlightable & T) | number): void;
+}
+/** Items of a FocusKeyManager focus themselves. */
+export interface FocusableOption extends ListKeyManagerOption {
+    focus(origin?: FocusOrigin): void;
+}
+/** ListKeyManager for roving focus: the active item receives focus. */
+export declare class FocusKeyManager<T> extends ListKeyManager<FocusableOption & T> {
+    private _origin;
+    /** Focus origin passed to the items' `focus` calls. */
+    setFocusOrigin(origin: FocusOrigin): this;
+    setActiveItem(item: (FocusableOption & T) | number): void;
+}
+/**
+ * Adapter: DOM elements as key manager items (`disabled` from `aria-disabled` / `disabled`, label
+ * from text content, `focus()` / active styles via `data-active`). Rivet addition for DOM-as-collection
+ * widgets.
+ */
+export declare function elementOption(element: HTMLElement): FocusableOption & Highlightable & {
+    element: HTMLElement;
+};
+export {};

package/a11y/key-manager.js

@@ -0,0 +1,397 @@
+// ListKeyManager / ActiveDescendantKeyManager / FocusKeyManager / Typeahead: keyboard navigation of a
+// list of items — arrows (vertical, horizontal LTR/RTL), wrap, skip predicate (disabled by default),
+// Home/End, PageUp/PageDown, allowed modifier keys, debounced typeahead, Tab-out, change stream.
+// Ported from Angular CDK a11y key-manager (angular/components), MIT, © Google LLC.
+//
+// Rivet: `Subject`s are minimal emitters with the same `subscribe` / `next` / `complete` shape (no
+// RxJS); items may be an array or an accessor / signal (the original's `Signal<T[]>`; an accessor is
+// tracked with an effect, no injector). Instances are browser-side objects: create them in a handler or
+// client effect. Resumed widgets keep the active index in a signal and restore it with
+// `updateActiveItem(index())` before `onKeydown`, then write it back from `change`.
+import { effect } from "@rivetjs/reactivity";
+// Key codes (Angular `@angular/cdk/keycodes`).
+const TAB = 9, PAGE_UP = 33, PAGE_DOWN = 34, END = 35, HOME = 36, LEFT_ARROW = 37, UP_ARROW = 38, RIGHT_ARROW = 39, DOWN_ARROW = 40, ZERO = 48, NINE = 57, A = 65, Z = 90;
+/** Whether `event` has any of `modifiers` (any modifier when none given). */
+export function hasModifierKey(event, ...modifiers) {
+    if (modifiers.length)
+        return modifiers.some((modifier) => event[modifier]);
+    return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}
+/** Minimal `Subject`: `next`, `subscribe` (function or `{ next, complete }`), `complete`. */
+export class Subject {
+    observers = new Set();
+    closed = false;
+    next(value) {
+        if (this.closed)
+            return;
+        for (const observer of [...this.observers])
+            observer.next?.(value);
+    }
+    subscribe(observer) {
+        const entry = typeof observer === "function" ? { next: observer } : observer;
+        if (this.closed) {
+            entry.complete?.();
+            return { unsubscribe() { } };
+        }
+        this.observers.add(entry);
+        return { unsubscribe: () => this.observers.delete(entry) };
+    }
+    complete() {
+        if (this.closed)
+            return;
+        this.closed = true;
+        const observers = [...this.observers];
+        this.observers.clear();
+        for (const observer of observers)
+            observer.complete?.();
+    }
+    get observed() {
+        return this.observers.size > 0;
+    }
+}
+const DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS = 200;
+/** Selects items from typed characters (debounced), as in `role="listbox"` / `role="tree"`. */
+export class Typeahead {
+    _items = [];
+    _selectedItemIndex = -1;
+    /** Letters pressed so far. */
+    _pressedLetters = [];
+    _skipPredicateFn;
+    _timer;
+    _interval;
+    _selectedItem = new Subject();
+    selectedItem = this._selectedItem;
+    constructor(initialItems, config) {
+        this._interval = typeof config?.debounceInterval === "number" ? config.debounceInterval : DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL_MS;
+        if (config?.skipPredicate)
+            this._skipPredicateFn = config.skipPredicate;
+        if (initialItems.length && initialItems.some((item) => typeof item.getLabel !== "function"))
+            throw new Error("KeyManager items in typeahead mode must implement the `getLabel` method.");
+        this.setItems(initialItems);
+    }
+    destroy() {
+        this._pressedLetters = [];
+        clearTimeout(this._timer);
+        this._selectedItem.complete();
+    }
+    setCurrentSelectedItemIndex(index) {
+        this._selectedItemIndex = index;
+    }
+    setItems(items) {
+        this._items = items;
+    }
+    handleKey(event) {
+        const keyCode = event.keyCode;
+        // `event.key` maps to the user's keyboard language; else alphanumerics from the keyCode.
+        if (event.key && event.key.length === 1)
+            this._letter(event.key.toLocaleUpperCase());
+        else if ((keyCode >= A && keyCode <= Z) || (keyCode >= ZERO && keyCode <= NINE))
+            this._letter(String.fromCharCode(keyCode));
+    }
+    /** Whether the user is typing (letters buffered). */
+    isTyping() {
+        return this._pressedLetters.length > 0;
+    }
+    /** Forget the typed letters. */
+    reset() {
+        this._pressedLetters = [];
+    }
+    _letter(letter) {
+        this._pressedLetters.push(letter);
+        clearTimeout(this._timer);
+        this._timer = setTimeout(() => this._search(), this._interval);
+    }
+    _search() {
+        if (this._pressedLetters.length === 0)
+            return;
+        const inputString = this._pressedLetters.join("").toLocaleUpperCase();
+        // Start after the current item.
+        for (let i = 1; i < this._items.length + 1; i++) {
+            const index = (this._selectedItemIndex + i) % this._items.length;
+            const item = this._items[index];
+            if (!this._skipPredicateFn?.(item) && item.getLabel?.().toLocaleUpperCase().trim().indexOf(inputString) === 0) {
+                this._selectedItem.next(item);
+                break;
+            }
+        }
+        this._pressedLetters = [];
+    }
+}
+/** Keyboard navigation of a list: sets the active item on arrow / Home / End / Page / typeahead keys. */
+export class ListKeyManager {
+    _activeItemIndex = -1;
+    _activeItem = null;
+    _wrap = false;
+    _typeaheadSubscription = { unsubscribe() { } };
+    _vertical = true;
+    _horizontal = null;
+    _allowedModifierKeys = [];
+    _homeAndEnd = false;
+    _pageUpAndDown = { enabled: false, delta: 10 };
+    _effect;
+    _typeahead;
+    /** Skip predicate: disabled items by default. */
+    _skipPredicateFn = (item) => item.disabled;
+    /** Emits when Tab is pressed (focus leaves the list). */
+    tabOut = new Subject();
+    /** Emits the new active index whenever the active item changes. */
+    change = new Subject();
+    _items;
+    constructor(_items) {
+        this._items = _items;
+        if (typeof _items === "function")
+            this._effect = effect(() => this._itemsChanged(_items()));
+    }
+    /** Predicate for items to skip. */
+    skipPredicate(predicate) {
+        this._skipPredicateFn = predicate;
+        return this;
+    }
+    /** Wrap from one end of the list to the other. */
+    withWrap(shouldWrap = true) {
+        this._wrap = shouldWrap;
+        return this;
+    }
+    /** Up / Down arrows move (default on). */
+    withVerticalOrientation(enabled = true) {
+        this._vertical = enabled;
+        return this;
+    }
+    /** Left / Right arrows move in `direction`; `null` disables horizontal movement. */
+    withHorizontalOrientation(direction) {
+        this._horizontal = direction;
+        return this;
+    }
+    /** Modifier keys that may be held while navigating (default none). */
+    withAllowedModifierKeys(keys) {
+        this._allowedModifierKeys = keys;
+        return this;
+    }
+    /** Typeahead: typed characters activate the next item whose label starts with them. */
+    withTypeAhead(debounceInterval = 200) {
+        const items = this._getItemsArray();
+        if (items.length > 0 && items.some((item) => typeof item.getLabel !== "function"))
+            throw Error("ListKeyManager items in typeahead mode must implement the `getLabel` method.");
+        this._typeaheadSubscription.unsubscribe();
+        this._typeahead = new Typeahead(items, {
+            debounceInterval: typeof debounceInterval === "number" ? debounceInterval : undefined,
+            skipPredicate: (item) => this._skipPredicateFn(item),
+        });
+        this._typeaheadSubscription = this._typeahead.selectedItem.subscribe((item) => this.setActiveItem(item));
+        return this;
+    }
+    /** Cancel the current typeahead sequence. */
+    cancelTypeahead() {
+        this._typeahead?.reset();
+        return this;
+    }
+    /** Home / End activate the first / last item. */
+    withHomeAndEnd(enabled = true) {
+        this._homeAndEnd = enabled;
+        return this;
+    }
+    /** PageUp / PageDown move by `delta` items (clamped to the ends). */
+    withPageUpDown(enabled = true, delta = 10) {
+        this._pageUpAndDown = { enabled, delta };
+        return this;
+    }
+    /** Set the active item (index or item); emits `change` when it changed. */
+    setActiveItem(item) {
+        const previous = this._activeItem;
+        this.updateActiveItem(item);
+        if (this._activeItem !== previous)
+            this.change.next(this._activeItemIndex);
+    }
+    /** Set the active item from a keydown; prevents the default action of handled keys. */
+    onKeydown(event) {
+        const keyCode = event.keyCode;
+        const modifiers = ["altKey", "ctrlKey", "metaKey", "shiftKey"];
+        const isModifierAllowed = modifiers.every((modifier) => !event[modifier] || this._allowedModifierKeys.indexOf(modifier) > -1);
+        switch (keyCode) {
+            case TAB:
+                this.tabOut.next();
+                return;
+            case DOWN_ARROW:
+                if (this._vertical && isModifierAllowed) {
+                    this.setNextItemActive();
+                    break;
+                }
+                return;
+            case UP_ARROW:
+                if (this._vertical && isModifierAllowed) {
+                    this.setPreviousItemActive();
+                    break;
+                }
+                return;
+            case RIGHT_ARROW:
+                if (this._horizontal && isModifierAllowed) {
+                    this._horizontal === "rtl" ? this.setPreviousItemActive() : this.setNextItemActive();
+                    break;
+                }
+                return;
+            case LEFT_ARROW:
+                if (this._horizontal && isModifierAllowed) {
+                    this._horizontal === "rtl" ? this.setNextItemActive() : this.setPreviousItemActive();
+                    break;
+                }
+                return;
+            case HOME:
+                if (this._homeAndEnd && isModifierAllowed) {
+                    this.setFirstItemActive();
+                    break;
+                }
+                return;
+            case END:
+                if (this._homeAndEnd && isModifierAllowed) {
+                    this.setLastItemActive();
+                    break;
+                }
+                return;
+            case PAGE_UP:
+                if (this._pageUpAndDown.enabled && isModifierAllowed) {
+                    const target = this._activeItemIndex - this._pageUpAndDown.delta;
+                    this._setActiveItemByIndex(target > 0 ? target : 0, 1);
+                    break;
+                }
+                return;
+            case PAGE_DOWN:
+                if (this._pageUpAndDown.enabled && isModifierAllowed) {
+                    const target = this._activeItemIndex + this._pageUpAndDown.delta;
+                    const length = this._getItemsArray().length;
+                    this._setActiveItemByIndex(target < length ? target : length - 1, -1);
+                    break;
+                }
+                return;
+            default:
+                if (isModifierAllowed || hasModifierKey(event, "shiftKey"))
+                    this._typeahead?.handleKey(event);
+                // Non-navigation keys keep their default action.
+                return;
+        }
+        this._typeahead?.reset();
+        event.preventDefault();
+    }
+    /** Index of the active item (-1: none). */
+    get activeItemIndex() {
+        return this._activeItemIndex;
+    }
+    /** The active item. */
+    get activeItem() {
+        return this._activeItem;
+    }
+    /** Whether the user is typing (typeahead). */
+    isTyping() {
+        return !!this._typeahead && this._typeahead.isTyping();
+    }
+    setFirstItemActive() {
+        this._setActiveItemByIndex(0, 1);
+    }
+    setLastItemActive() {
+        this._setActiveItemByIndex(this._getItemsArray().length - 1, -1);
+    }
+    setNextItemActive() {
+        this._activeItemIndex < 0 ? this.setFirstItemActive() : this._setActiveItemByDelta(1);
+    }
+    setPreviousItemActive() {
+        this._activeItemIndex < 0 && this._wrap ? this.setLastItemActive() : this._setActiveItemByDelta(-1);
+    }
+    /** Set the active item without emitting `change` or other effects. */
+    updateActiveItem(item) {
+        const items = this._getItemsArray();
+        const index = typeof item === "number" ? item : items.indexOf(item);
+        const active = items[index];
+        this._activeItem = active == null ? null : active;
+        this._activeItemIndex = index;
+        this._typeahead?.setCurrentSelectedItemIndex(index);
+    }
+    /** Clean up subscriptions and timers. */
+    destroy() {
+        this._typeaheadSubscription.unsubscribe();
+        this._effect?.();
+        this._typeahead?.destroy();
+        this.tabOut.complete();
+        this.change.complete();
+    }
+    _setActiveItemByDelta(delta) {
+        this._wrap ? this._setActiveInWrapMode(delta) : this._setActiveInDefaultMode(delta);
+    }
+    _setActiveInWrapMode(delta) {
+        const items = this._getItemsArray();
+        for (let i = 1; i <= items.length; i++) {
+            const index = (this._activeItemIndex + delta * i + items.length) % items.length;
+            if (!this._skipPredicateFn(items[index])) {
+                this.setActiveItem(index);
+                return;
+            }
+        }
+    }
+    _setActiveInDefaultMode(delta) {
+        this._setActiveItemByIndex(this._activeItemIndex + delta, delta);
+    }
+    _setActiveItemByIndex(index, fallbackDelta) {
+        const items = this._getItemsArray();
+        if (!items[index])
+            return;
+        while (this._skipPredicateFn(items[index])) {
+            index += fallbackDelta;
+            if (!items[index])
+                return;
+        }
+        this.setActiveItem(index);
+    }
+    _getItemsArray() {
+        return typeof this._items === "function" ? this._items() : this._items;
+    }
+    _itemsChanged(newItems) {
+        this._typeahead?.setItems(newItems);
+        const active = this._activeItem;
+        if (active) {
+            const newIndex = newItems.indexOf(active);
+            if (newIndex > -1 && newIndex !== this._activeItemIndex) {
+                this._activeItemIndex = newIndex;
+                this._typeahead?.setCurrentSelectedItemIndex(newIndex);
+            }
+        }
+    }
+}
+/** ListKeyManager for `aria-activedescendant` widgets: the active item styles itself, focus stays put. */
+export class ActiveDescendantKeyManager extends ListKeyManager {
+    setActiveItem(index) {
+        if (this.activeItem)
+            this.activeItem.setInactiveStyles();
+        super.setActiveItem(index);
+        if (this.activeItem)
+            this.activeItem.setActiveStyles();
+    }
+}
+/** ListKeyManager for roving focus: the active item receives focus. */
+export class FocusKeyManager extends ListKeyManager {
+    _origin = "program";
+    /** Focus origin passed to the items' `focus` calls. */
+    setFocusOrigin(origin) {
+        this._origin = origin;
+        return this;
+    }
+    setActiveItem(item) {
+        super.setActiveItem(item);
+        if (this.activeItem)
+            this.activeItem.focus(this._origin);
+    }
+}
+/**
+ * Adapter: DOM elements as key manager items (`disabled` from `aria-disabled` / `disabled`, label
+ * from text content, `focus()` / active styles via `data-active`). Rivet addition for DOM-as-collection
+ * widgets.
+ */
+export function elementOption(element) {
+    return {
+        element,
+        get disabled() {
+            return element.getAttribute("aria-disabled") === "true" || element.disabled === true;
+        },
+        getLabel: () => element.getAttribute("aria-label") ?? element.textContent ?? "",
+        focus: () => element.focus(),
+        setActiveStyles: () => element.setAttribute("data-active", ""),
+        setInactiveStyles: () => element.removeAttribute("data-active"),
+    };
+}