@patternfly/pfe-core 2.4.0 → 3.0.0

package/controllers/roving-tabindex-controller.js

@@ -1,201 +1,228 @@
+var _RovingTabindexController_instances, _a, _RovingTabindexController_activeItem, _RovingTabindexController_itemsContainer, _RovingTabindexController_items, _RovingTabindexController_gainedInitialFocus, _RovingTabindexController_focusableItems_get, _RovingTabindexController_activeIndex_get, _RovingTabindexController_itemIndex_get, _RovingTabindexController_options, _RovingTabindexController_initContainer, _RovingTabindexController_onKeydown;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 const isFocusableElement = (el) => !!el &&
-    !el.hasAttribute('disabled') &&
     !el.ariaHidden &&
     !el.hasAttribute('hidden');
 /**
  * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within
- * Components Using a Roving
- * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)
+ * Components Using a Roving tabindex][rti]
+ *
+ * [rti]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
  */
 export class RovingTabindexController {
-    /** active focusable element */
-    #activeItem;
-    /** closest ancestor containing items */
-    #itemsContainer;
-    /** array of all focusable elements */
-    #items = [];
-    /**
-     * finds focusable items from a group of items
-     */
-    get #focusableItems() {
-        return this.#items.filter(isFocusableElement);
+    static of(host, options) {
+        return new _a(host, options);
     }
     /**
-     * index of active item in array of focusable items
+     * active item of array of items
      */
-    get #activeIndex() {
-        return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;
+    get activeItem() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f");
     }
     /**
-     * index of active item in array of items
+     * all items from array
      */
-    get #itemIndex() {
-        return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;
+    get items() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_items, "f");
     }
     /**
-     * active item of array of items
+     * all focusable items from array
      */
-    get activeItem() {
-        return this.#activeItem;
+    get focusableItems() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get);
     }
     /**
      * first item in array of focusable items
      */
     get firstItem() {
-        return this.#focusableItems[0];
+        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[0];
     }
     /**
      * last item in array of focusable items
      */
     get lastItem() {
-        return this.#focusableItems.at(-1);
+        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).at(-1);
     }
     /**
      * next item  after active item in array of focusable items
      */
     get nextItem() {
-        return (this.#activeIndex >= this.#focusableItems.length - 1 ? this.firstItem
-            : this.#focusableItems[this.#activeIndex + 1]);
+        return (__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) >= __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length - 1 ? this.firstItem
+            : __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) + 1]);
     }
     /**
      * previous item  after active item in array of focusable items
      */
     get prevItem() {
-        return (this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]
+        return (__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) > 0 ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) - 1]
             : this.lastItem);
     }
-    constructor(host) {
+    constructor(host, options) {
+        _RovingTabindexController_instances.add(this);
         this.host = host;
+        /** active focusable element */
+        _RovingTabindexController_activeItem.set(this, void 0);
+        /** closest ancestor containing items */
+        _RovingTabindexController_itemsContainer.set(this, void 0);
+        /** array of all focusable elements */
+        _RovingTabindexController_items.set(this, []);
+        /** flags whether the host's element has gained focus at least once */
+        _RovingTabindexController_gainedInitialFocus.set(this, false);
+        _RovingTabindexController_options.set(this, void 0);
+        /**
+         * handles keyboard navigation
+         */
+        _RovingTabindexController_onKeydown.set(this, (event) => {
+            if (!(event instanceof KeyboardEvent) ||
+                event.ctrlKey ||
+                event.altKey ||
+                event.metaKey ||
+                !__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length ||
+                !event.composedPath().some(x => __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).includes(x))) {
+                return;
+            }
+            const orientation = __classPrivateFieldGet(this, _RovingTabindexController_options, "f").getHTMLElement()?.getAttribute('aria-orientation');
+            const item = this.activeItem;
+            let shouldPreventDefault = false;
+            const horizontalOnly = !item ? false
+                : item.tagName === 'SELECT' ||
+                    item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal';
+            const verticalOnly = orientation === 'vertical';
+            switch (event.key) {
+                case 'ArrowLeft':
+                    if (verticalOnly) {
+                        return;
+                    }
+                    this.setActiveItem(this.prevItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowRight':
+                    if (verticalOnly) {
+                        return;
+                    }
+                    this.setActiveItem(this.nextItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowUp':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.setActiveItem(this.prevItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowDown':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.setActiveItem(this.nextItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'Home':
+                    this.setActiveItem(this.firstItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'End':
+                    this.setActiveItem(this.lastItem);
+                    shouldPreventDefault = true;
+                    break;
+                default:
+                    break;
+            }
+            if (shouldPreventDefault) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        });
+        __classPrivateFieldSet(this, _RovingTabindexController_options, {
+            getHTMLElement: options?.getHTMLElement ??
+                options?.getElement ??
+                (() => host instanceof HTMLElement ? host : null),
+            getItems: options?.getItems,
+            getItemContainer: options?.getItemContainer,
+        }, "f");
+        const instance = _a.hosts.get(host);
+        if (instance) {
+            return instance;
+        }
+        _a.hosts.set(host, this);
         this.host.addController(this);
+        this.updateItems();
     }
-    /**
-     * handles keyboard navigation
-     */
-    #onKeydown = (event) => {
-        if (event.ctrlKey ||
-            event.altKey ||
-            event.metaKey ||
-            !this.#focusableItems.length ||
-            !event.composedPath().some(x => this.#focusableItems.includes(x))) {
-            return;
+    hostUpdated() {
+        const oldContainer = __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f");
+        const newContainer = __classPrivateFieldGet(this, _RovingTabindexController_options, "f").getHTMLElement();
+        if (oldContainer !== newContainer) {
+            oldContainer?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+            _a.elements.delete(oldContainer);
+            this.updateItems();
         }
-        const item = this.activeItem;
-        let shouldPreventDefault = false;
-        const horizontalOnly = !item ? false
-            : item.tagName === 'SELECT' ||
-                item.getAttribute('role') === 'spinbutton';
-        switch (event.key) {
-            case 'ArrowLeft':
-                this.focusOnItem(this.prevItem);
-                shouldPreventDefault = true;
-                break;
-            case 'ArrowRight':
-                this.focusOnItem(this.nextItem);
-                shouldPreventDefault = true;
-                break;
-            case 'ArrowUp':
-                if (horizontalOnly) {
-                    return;
-                }
-                this.focusOnItem(this.prevItem);
-                shouldPreventDefault = true;
-                break;
-            case 'ArrowDown':
-                if (horizontalOnly) {
-                    return;
-                }
-                this.focusOnItem(this.nextItem);
-                shouldPreventDefault = true;
-                break;
-            case 'Home':
-                this.focusOnItem(this.firstItem);
-                shouldPreventDefault = true;
-                break;
-            case 'PageUp':
-                if (horizontalOnly) {
-                    return;
-                }
-                this.focusOnItem(this.firstItem);
-                shouldPreventDefault = true;
-                break;
-            case 'End':
-                this.focusOnItem(this.lastItem);
-                shouldPreventDefault = true;
-                break;
-            case 'PageDown':
-                if (horizontalOnly) {
-                    return;
-                }
-                this.focusOnItem(this.lastItem);
-                shouldPreventDefault = true;
-                break;
-            default:
-                break;
+        if (newContainer) {
+            __classPrivateFieldGet(this, _RovingTabindexController_instances, "m", _RovingTabindexController_initContainer).call(this, newContainer);
         }
-        if (shouldPreventDefault) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    };
+    }
     /**
-     * sets tabindex of item based on whether or not it is active
+     * removes event listeners from items container
      */
-    updateActiveItem(item) {
-        if (item) {
-            if (!!this.#activeItem && item !== this.#activeItem) {
-                this.#activeItem.tabIndex = -1;
-            }
-            item.tabIndex = 0;
-            this.#activeItem = item;
-        }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+        __classPrivateFieldSet(this, _RovingTabindexController_itemsContainer, undefined, "f");
+        __classPrivateFieldSet(this, _RovingTabindexController_gainedInitialFocus, false, "f");
     }
     /**
-     * focuses on an item and sets it as active
+     * Sets the active item and focuses it
      */
-    focusOnItem(item) {
-        this.updateActiveItem(item || this.firstItem);
-        this.#activeItem?.focus();
+    setActiveItem(item) {
+        __classPrivateFieldSet(this, _RovingTabindexController_activeItem, item, "f");
+        for (const item of __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)) {
+            item.tabIndex = __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") === item ? 0 : -1;
+        }
         this.host.requestUpdate();
+        if (__classPrivateFieldGet(this, _RovingTabindexController_gainedInitialFocus, "f")) {
+            __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f")?.focus();
+        }
     }
     /**
      * Focuses next focusable item
      */
-    updateItems(items) {
-        const sequence = [...items.slice(this.#itemIndex), ...items.slice(0, this.#itemIndex)];
-        const first = sequence.find(item => this.#focusableItems.includes(item));
-        this.focusOnItem(first || this.firstItem);
+    updateItems(items = __classPrivateFieldGet(this, _RovingTabindexController_options, "f").getItems?.() ?? []) {
+        __classPrivateFieldSet(this, _RovingTabindexController_items, items, "f");
+        const sequence = [...__classPrivateFieldGet(this, _RovingTabindexController_items, "f").slice(__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get) - 1), ...__classPrivateFieldGet(this, _RovingTabindexController_items, "f").slice(0, __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get) - 1)];
+        const first = sequence.find(item => __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).includes(item));
+        const [focusableItem] = __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get);
+        const activeItem = focusableItem ?? first ?? this.firstItem;
+        this.setActiveItem(activeItem);
+    }
+    /** @deprecated use setActiveItem */
+    focusOnItem(item) {
+        this.setActiveItem(item);
     }
     /**
      * from array of HTML items, and sets active items
+     * @deprecated: use getItems and getItemContainer option functions
      */
-    initItems(items, itemsContainer = this.host) {
-        this.#items = items ?? [];
-        const focusableItems = this.#focusableItems;
-        const [focusableItem] = focusableItems;
-        this.#activeItem = focusableItem;
-        for (const item of focusableItems) {
-            item.tabIndex = this.#activeItem === item ? 0 : -1;
-        }
-        /**
-         * removes listener on previous contained and applies it to new container
-         */
-        if (!this.#itemsContainer || itemsContainer !== this.#itemsContainer) {
-            this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
-            this.#itemsContainer = itemsContainer;
-            this.hostConnected();
+    initItems(items, itemsContainer) {
+        const element = itemsContainer ?? __classPrivateFieldGet(this, _RovingTabindexController_options, "f")?.getItemContainer?.() ?? __classPrivateFieldGet(this, _RovingTabindexController_options, "f").getHTMLElement();
+        if (element) {
+            __classPrivateFieldGet(this, _RovingTabindexController_instances, "m", _RovingTabindexController_initContainer).call(this, element);
         }
-    }
-    /**
-     * adds event listeners to items container
-     */
-    hostConnected() {
-        this.#itemsContainer?.addEventListener('keydown', this.#onKeydown);
-    }
-    /**
-     * removes event listeners from items container
-     */
-    hostDisconnected() {
-        this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
+        this.updateItems(items);
     }
 }
+_a = RovingTabindexController, _RovingTabindexController_activeItem = new WeakMap(), _RovingTabindexController_itemsContainer = new WeakMap(), _RovingTabindexController_items = new WeakMap(), _RovingTabindexController_gainedInitialFocus = new WeakMap(), _RovingTabindexController_options = new WeakMap(), _RovingTabindexController_onKeydown = new WeakMap(), _RovingTabindexController_instances = new WeakSet(), _RovingTabindexController_focusableItems_get = function _RovingTabindexController_focusableItems_get() {
+    return __classPrivateFieldGet(this, _RovingTabindexController_items, "f").filter(isFocusableElement);
+}, _RovingTabindexController_activeIndex_get = function _RovingTabindexController_activeIndex_get() {
+    return !!__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get) && !!this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).indexOf(this.activeItem) : -1;
+}, _RovingTabindexController_itemIndex_get = function _RovingTabindexController_itemIndex_get() {
+    return this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_items, "f").indexOf(this.activeItem) : -1;
+}, _RovingTabindexController_initContainer = function _RovingTabindexController_initContainer(container) {
+    _a.elements.set(container, this);
+    __classPrivateFieldSet(this, _RovingTabindexController_itemsContainer, container, "f");
+    __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f").addEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+    __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f").addEventListener('focusin', () => {
+        __classPrivateFieldSet(this, _RovingTabindexController_gainedInitialFocus, true, "f");
+    }, { once: true });
+};
+RovingTabindexController.hosts = new WeakMap();
+/** @internal */
+RovingTabindexController.elements = new WeakMap();
 //# sourceMappingURL=roving-tabindex-controller.js.map

package/controllers/roving-tabindex-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"roving-tabindex-controller.js","sourceRoot":"","sources":["roving-tabindex-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nconst isFocusableElement = (el: Element): el is HTMLElement =>\n  !!el &&\n  !el.hasAttribute('disabled') &&\n  !el.ariaHidden &&\n  !el.hasAttribute('hidden');\n\n/**\n * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within\n * Components Using a Roving\n * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)\n */\nexport class RovingTabindexController<\n  ItemType extends HTMLElement = HTMLElement,\n> implements ReactiveController {\n  /** active focusable element */\n  #activeItem?: ItemType;\n\n  /** closest ancestor containing items */\n  #itemsContainer?: HTMLElement;\n\n  /** array of all focusable elements */\n  #items: ItemType[] = [];\n\n  /**\n   * finds focusable items from a group of items\n   */\n  get #focusableItems(): ItemType[] {\n    return this.#items.filter(isFocusableElement);\n  }\n\n  /**\n   * index of active item in array of focusable items\n   */\n  get #activeIndex(): number {\n    return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * index of active item in array of items\n   */\n  get #itemIndex(): number {\n    return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * active item of array of items\n   */\n  get activeItem(): ItemType | undefined {\n    return this.#activeItem;\n  }\n\n  /**\n   * first item in array of focusable items\n   */\n  get firstItem(): ItemType | undefined {\n    return this.#focusableItems[0];\n  }\n\n  /**\n   * last item in array of focusable items\n   */\n  get lastItem(): ItemType | undefined {\n    return this.#focusableItems.at(-1);\n  }\n\n  /**\n   * next item  after active item in array of focusable items\n   */\n  get nextItem(): ItemType | undefined {\n    return (\n        this.#activeIndex >= this.#focusableItems.length - 1 ? this.firstItem\n      : this.#focusableItems[this.#activeIndex + 1]\n    );\n  }\n\n  /**\n   * previous item  after active item in array of focusable items\n   */\n  get prevItem(): ItemType | undefined {\n    return (\n        this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]\n      : this.lastItem\n    );\n  }\n\n  constructor(public host: ReactiveControllerHost & HTMLElement) {\n    this.host.addController(this);\n  }\n\n  /**\n   * handles keyboard navigation\n   */\n  #onKeydown = (event: KeyboardEvent) => {\n    if (event.ctrlKey ||\n        event.altKey ||\n        event.metaKey ||\n        !this.#focusableItems.length ||\n        !event.composedPath().some(x =>\n          this.#focusableItems.includes(x as ItemType))) {\n      return;\n    }\n    const item = this.activeItem;\n    let shouldPreventDefault = false;\n    const horizontalOnly =\n        !item ? false\n      : item.tagName === 'SELECT' ||\n        item.getAttribute('role') === 'spinbutton';\n\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowRight':\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'Home':\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'End':\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      default:\n        break;\n    }\n\n    if (shouldPreventDefault) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * sets tabindex of item based on whether or not it is active\n   */\n  updateActiveItem(item?: ItemType): void {\n    if (item) {\n      if (!!this.#activeItem && item !== this.#activeItem) {\n        this.#activeItem.tabIndex = -1;\n      }\n      item.tabIndex = 0;\n      this.#activeItem = item;\n    }\n  }\n\n  /**\n   * focuses on an item and sets it as active\n   */\n  focusOnItem(item?: ItemType): void {\n    this.updateActiveItem(item || this.firstItem);\n    this.#activeItem?.focus();\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Focuses next focusable item\n   */\n  updateItems(items: ItemType[]) {\n    const sequence = [...items.slice(this.#itemIndex), ...items.slice(0, this.#itemIndex)];\n    const first = sequence.find(item => this.#focusableItems.includes(item));\n    this.focusOnItem(first || this.firstItem);\n  }\n\n  /**\n   * from array of HTML items, and sets active items\n   */\n  initItems(items: ItemType[], itemsContainer: HTMLElement = this.host) {\n    this.#items = items ?? [];\n    const focusableItems = this.#focusableItems;\n    const [focusableItem] = focusableItems;\n    this.#activeItem = focusableItem;\n    for (const item of focusableItems) {\n      item.tabIndex = this.#activeItem === item ? 0 : -1;\n    }\n    /**\n     * removes listener on previous contained and applies it to new container\n     */\n    if (!this.#itemsContainer || itemsContainer !== this.#itemsContainer) {\n      this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);\n      this.#itemsContainer = itemsContainer;\n      this.hostConnected();\n    }\n  }\n\n  /**\n   * adds event listeners to items container\n   */\n  hostConnected() {\n    this.#itemsContainer?.addEventListener('keydown', this.#onKeydown);\n  }\n\n  /**\n   * removes event listeners from items container\n   */\n  hostDisconnected() {\n    this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);\n  }\n}\n"]}
+{"version":3,"file":"roving-tabindex-controller.js","sourceRoot":"","sources":["roving-tabindex-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { RequireProps } from '../core.js';\n\nconst isFocusableElement = (el: Element): el is HTMLElement =>\n  !!el &&\n  !el.ariaHidden &&\n  !el.hasAttribute('hidden');\n\nexport interface RovingTabindexControllerOptions<Item extends HTMLElement> {\n  /** @deprecated use getHTMLElement */\n  getElement?: () => Element | null;\n  getHTMLElement?: () => HTMLElement | null;\n  getItems?: () => Item[];\n  getItemContainer?: () => HTMLElement;\n}\n\n/**\n * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within\n * Components Using a Roving tabindex][rti]\n *\n * [rti]: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n */\nexport class RovingTabindexController<\n  Item extends HTMLElement = HTMLElement,\n> implements ReactiveController {\n  private static hosts = new WeakMap<ReactiveControllerHost, RovingTabindexController>();\n\n  static of<Item extends HTMLElement>(\n    host: ReactiveControllerHost,\n    options: RovingTabindexControllerOptions<Item> & { getItems(): Item[] },\n  ) {\n    return new RovingTabindexController(host, options);\n  }\n\n  /** @internal */\n  static elements = new WeakMap<Element, RovingTabindexController>();\n\n  /** active focusable element */\n  #activeItem?: Item;\n\n  /** closest ancestor containing items */\n  #itemsContainer?: Element;\n\n  /** array of all focusable elements */\n  #items: Item[] = [];\n\n  /** flags whether the host's element has gained focus at least once */\n  #gainedInitialFocus = false;\n\n  /**\n   * finds focusable items from a group of items\n   */\n  get #focusableItems(): Item[] {\n    return this.#items.filter(isFocusableElement);\n  }\n\n  /**\n   * index of active item in array of focusable items\n   */\n  get #activeIndex(): number {\n    return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * index of active item in array of items\n   */\n  get #itemIndex(): number {\n    return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * active item of array of items\n   */\n  get activeItem(): Item | undefined {\n    return this.#activeItem;\n  }\n\n  /**\n   * all items from array\n   */\n  get items() {\n    return this.#items;\n  }\n\n  /**\n   * all focusable items from array\n   */\n  get focusableItems() {\n    return this.#focusableItems;\n  }\n\n  /**\n   * first item in array of focusable items\n   */\n  get firstItem(): Item | undefined {\n    return this.#focusableItems[0];\n  }\n\n  /**\n   * last item in array of focusable items\n   */\n  get lastItem(): Item | undefined {\n    return this.#focusableItems.at(-1);\n  }\n\n  /**\n   * next item  after active item in array of focusable items\n   */\n  get nextItem(): Item | undefined {\n    return (\n      this.#activeIndex >= this.#focusableItems.length - 1 ? this.firstItem\n        : this.#focusableItems[this.#activeIndex + 1]\n    );\n  }\n\n  /**\n   * previous item  after active item in array of focusable items\n   */\n  get prevItem(): Item | undefined {\n    return (\n      this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]\n        : this.lastItem\n    );\n  }\n\n  #options: RequireProps<RovingTabindexControllerOptions<Item>, 'getHTMLElement'>;\n\n  constructor(\n    public host: ReactiveControllerHost,\n    options?: RovingTabindexControllerOptions<Item>,\n  ) {\n    this.#options = {\n      getHTMLElement: options?.getHTMLElement ??\n        (options?.getElement as (() => HTMLElement | null)) ??\n        (() => host instanceof HTMLElement ? host : null),\n      getItems: options?.getItems,\n      getItemContainer: options?.getItemContainer,\n    };\n    const instance = RovingTabindexController.hosts.get(host);\n    if (instance) {\n      return instance as RovingTabindexController<Item>;\n    }\n    RovingTabindexController.hosts.set(host, this);\n    this.host.addController(this);\n    this.updateItems();\n  }\n\n  hostUpdated() {\n    const oldContainer = this.#itemsContainer;\n    const newContainer = this.#options.getHTMLElement();\n    if (oldContainer !== newContainer) {\n      oldContainer?.removeEventListener('keydown', this.#onKeydown);\n      RovingTabindexController.elements.delete(oldContainer!);\n      this.updateItems();\n    }\n    if (newContainer) {\n      this.#initContainer(newContainer);\n    }\n  }\n\n  /**\n   * removes event listeners from items container\n   */\n  hostDisconnected() {\n    this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);\n    this.#itemsContainer = undefined;\n    this.#gainedInitialFocus = false;\n  }\n\n  #initContainer(container: Element) {\n    RovingTabindexController.elements.set(container, this);\n    this.#itemsContainer = container;\n    this.#itemsContainer.addEventListener('keydown', this.#onKeydown);\n    this.#itemsContainer.addEventListener('focusin', () => {\n      this.#gainedInitialFocus = true;\n    }, { once: true });\n  }\n\n  /**\n   * handles keyboard navigation\n   */\n  #onKeydown = (event: Event) => {\n    if (!(event instanceof KeyboardEvent) ||\n        event.ctrlKey ||\n        event.altKey ||\n        event.metaKey ||\n        !this.#focusableItems.length ||\n        !event.composedPath().some(x =>\n          this.#focusableItems.includes(x as Item))) {\n      return;\n    }\n\n    const orientation = this.#options.getHTMLElement()?.getAttribute('aria-orientation');\n\n    const item = this.activeItem;\n    let shouldPreventDefault = false;\n    const horizontalOnly =\n      !item ? false\n        : item.tagName === 'SELECT' ||\n        item.getAttribute('role') === 'spinbutton' || orientation === 'horizontal';\n    const verticalOnly = orientation === 'vertical';\n    switch (event.key) {\n      case 'ArrowLeft':\n        if (verticalOnly) {\n          return;\n        }\n        this.setActiveItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowRight':\n        if (verticalOnly) {\n          return;\n        }\n\n        this.setActiveItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.setActiveItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.setActiveItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'Home':\n        this.setActiveItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'End':\n        this.setActiveItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      default:\n        break;\n    }\n\n    if (shouldPreventDefault) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * Sets the active item and focuses it\n   */\n  setActiveItem(item?: Item): void {\n    this.#activeItem = item;\n    for (const item of this.#focusableItems) {\n      item.tabIndex = this.#activeItem === item ? 0 : -1;\n    }\n    this.host.requestUpdate();\n    if (this.#gainedInitialFocus) {\n      this.#activeItem?.focus();\n    }\n  }\n\n  /**\n   * Focuses next focusable item\n   */\n  updateItems(items: Item[] = this.#options.getItems?.() ?? []) {\n    this.#items = items;\n    const sequence = [...this.#items.slice(this.#itemIndex - 1), ...this.#items.slice(0, this.#itemIndex - 1)];\n    const first = sequence.find(item => this.#focusableItems.includes(item));\n    const [focusableItem] = this.#focusableItems;\n    const activeItem = focusableItem ?? first ?? this.firstItem;\n    this.setActiveItem(activeItem);\n  }\n\n  /** @deprecated use setActiveItem */\n  focusOnItem(item?: Item): void {\n    this.setActiveItem(item);\n  }\n\n  /**\n   * from array of HTML items, and sets active items\n   * @deprecated: use getItems and getItemContainer option functions\n   */\n  initItems(items: Item[], itemsContainer?: Element) {\n    const element = itemsContainer ?? this.#options?.getItemContainer?.() ?? this.#options.getHTMLElement();\n    if (element) {\n      this.#initContainer(element);\n    }\n    this.updateItems(items);\n  }\n}\n"]}

package/controllers/scroll-spy-controller.js

@@ -1,122 +1,120 @@
+var _ScrollSpyController_instances, _ScrollSpyController_tagNames, _ScrollSpyController_activeAttribute, _ScrollSpyController_io, _ScrollSpyController_passedLinks, _ScrollSpyController_force, _ScrollSpyController_intersected, _ScrollSpyController_root, _ScrollSpyController_rootMargin, _ScrollSpyController_threshold, _ScrollSpyController_rootNode, _ScrollSpyController_getHash, _ScrollSpyController_linkChildren_get, _ScrollSpyController_initIo, _ScrollSpyController_markPassed, _ScrollSpyController_setActive, _ScrollSpyController_nextIntersection, _ScrollSpyController_onIo;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 export class ScrollSpyController {
-    #tagNames;
-    #activeAttribute;
-    #io;
-    /** Which link's targets have already scrolled past? */
-    #passedLinks = new Set();
-    /** Ignore intersections? */
-    #force = false;
-    /** Has the intersection observer found an element? */
-    #intersected = false;
-    #root;
-    #rootMargin;
-    #threshold;
-    #rootNode;
-    #getHash;
-    get #linkChildren() {
-        return Array.from(this.host.querySelectorAll(this.#tagNames.join(',')))
-            .filter(this.#getHash);
-    }
     get root() {
-        return this.#root;
+        return __classPrivateFieldGet(this, _ScrollSpyController_root, "f");
     }
     set root(v) {
-        this.#root = v;
-        this.#io?.disconnect();
-        this.#initIo();
+        __classPrivateFieldSet(this, _ScrollSpyController_root, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
     }
     get rootMargin() {
-        return this.#rootMargin;
+        return __classPrivateFieldGet(this, _ScrollSpyController_rootMargin, "f");
     }
     set rootMargin(v) {
-        this.#rootMargin = v;
-        this.#io?.disconnect();
-        this.#initIo();
+        __classPrivateFieldSet(this, _ScrollSpyController_rootMargin, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
     }
     get threshold() {
-        return this.#threshold;
+        return __classPrivateFieldGet(this, _ScrollSpyController_threshold, "f");
     }
     set threshold(v) {
-        this.#threshold = v;
-        this.#io?.disconnect();
-        this.#initIo();
+        __classPrivateFieldSet(this, _ScrollSpyController_threshold, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
     }
     constructor(host, options) {
+        _ScrollSpyController_instances.add(this);
         this.host = host;
+        _ScrollSpyController_tagNames.set(this, void 0);
+        _ScrollSpyController_activeAttribute.set(this, void 0);
+        _ScrollSpyController_io.set(this, void 0);
+        /** Which link's targets have already scrolled past? */
+        _ScrollSpyController_passedLinks.set(this, new Set());
+        /** Ignore intersections? */
+        _ScrollSpyController_force.set(this, false);
+        /** Has the intersection observer found an element? */
+        _ScrollSpyController_intersected.set(this, false);
+        _ScrollSpyController_root.set(this, void 0);
+        _ScrollSpyController_rootMargin.set(this, void 0);
+        _ScrollSpyController_threshold.set(this, void 0);
+        _ScrollSpyController_rootNode.set(this, void 0);
+        _ScrollSpyController_getHash.set(this, void 0);
         host.addController(this);
-        this.#tagNames = options.tagNames;
-        this.#root = options.root;
-        this.#rootMargin = options.rootMargin;
-        this.#activeAttribute = options.activeAttribute ?? 'active';
-        this.#threshold = options.threshold ?? 0.85;
-        this.#rootNode = options.rootNode ?? host.getRootNode();
-        this.#getHash = options?.getHash ?? ((el) => el.getAttribute('href'));
+        __classPrivateFieldSet(this, _ScrollSpyController_tagNames, options.tagNames, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_root, options.root, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_rootMargin, options.rootMargin, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_activeAttribute, options.activeAttribute ?? 'active', "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_threshold, options.threshold ?? 0.85, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_rootNode, options.rootNode ?? host.getRootNode(), "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_getHash, options?.getHash ?? ((el) => el.getAttribute('href')), "f");
     }
     hostConnected() {
-        this.#initIo();
-    }
-    #initIo() {
-        const rootNode = this.#rootNode;
-        if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
-            const { rootMargin, threshold, root } = this;
-            this.#io = new IntersectionObserver(r => this.#onIo(r), { root, rootMargin, threshold });
-            this.#linkChildren
-                .map(x => this.#getHash(x))
-                .filter((x) => !!x)
-                .map(x => rootNode.getElementById(x.replace('#', '')))
-                .filter((x) => !!x)
-                .forEach(target => this.#io?.observe(target));
-        }
-    }
-    #markPassed(link, force) {
-        if (force) {
-            this.#passedLinks.add(link);
-        }
-        else {
-            this.#passedLinks.delete(link);
-        }
-    }
-    #setActive(link) {
-        for (const child of this.#linkChildren) {
-            child.toggleAttribute(this.#activeAttribute, child === link);
-        }
-    }
-    async #nextIntersection() {
-        this.#intersected = false;
-        // safeguard the loop
-        setTimeout(() => this.#intersected = false, 3000);
-        while (!this.#intersected) {
-            await new Promise(requestAnimationFrame);
-        }
-    }
-    async #onIo(entries) {
-        if (!this.#force) {
-            for (const { target, boundingClientRect, intersectionRect } of entries) {
-                const selector = `:is(${this.#tagNames.join(',')})[href="#${target.id}"]`;
-                const link = this.host.querySelector(selector);
-                if (link) {
-                    this.#markPassed(link, boundingClientRect.top < intersectionRect.top);
-                }
-            }
-            const link = [...this.#passedLinks];
-            const last = link.at(-1);
-            this.#setActive(last ?? this.#linkChildren.at(0));
-        }
-        this.#intersected = true;
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
     }
     /** Explicitly set the active item */
     async setActive(link) {
-        this.#force = true;
-        this.#setActive(link);
+        __classPrivateFieldSet(this, _ScrollSpyController_force, true, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_setActive).call(this, link);
         let sawActive = false;
-        for (const child of this.#linkChildren) {
-            this.#markPassed(child, !sawActive);
+        for (const child of __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)) {
+            __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_markPassed).call(this, child, !sawActive);
             if (child === link) {
                 sawActive = true;
             }
         }
-        await this.#nextIntersection();
-        this.#force = false;
+        await __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_nextIntersection).call(this);
+        __classPrivateFieldSet(this, _ScrollSpyController_force, false, "f");
     }
 }
+_ScrollSpyController_tagNames = new WeakMap(), _ScrollSpyController_activeAttribute = new WeakMap(), _ScrollSpyController_io = new WeakMap(), _ScrollSpyController_passedLinks = new WeakMap(), _ScrollSpyController_force = new WeakMap(), _ScrollSpyController_intersected = new WeakMap(), _ScrollSpyController_root = new WeakMap(), _ScrollSpyController_rootMargin = new WeakMap(), _ScrollSpyController_threshold = new WeakMap(), _ScrollSpyController_rootNode = new WeakMap(), _ScrollSpyController_getHash = new WeakMap(), _ScrollSpyController_instances = new WeakSet(), _ScrollSpyController_linkChildren_get = function _ScrollSpyController_linkChildren_get() {
+    return Array.from(this.host.querySelectorAll(__classPrivateFieldGet(this, _ScrollSpyController_tagNames, "f").join(',')))
+        .filter(__classPrivateFieldGet(this, _ScrollSpyController_getHash, "f"));
+}, _ScrollSpyController_initIo = function _ScrollSpyController_initIo() {
+    const rootNode = __classPrivateFieldGet(this, _ScrollSpyController_rootNode, "f");
+    if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
+        const { rootMargin, threshold, root } = this;
+        __classPrivateFieldSet(this, _ScrollSpyController_io, new IntersectionObserver(r => __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_onIo).call(this, r), { root, rootMargin, threshold }), "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)
+            .map(x => __classPrivateFieldGet(this, _ScrollSpyController_getHash, "f").call(this, x))
+            .filter((x) => !!x)
+            .map(x => rootNode.getElementById(x.replace('#', '')))
+            .filter((x) => !!x)
+            .forEach(target => __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.observe(target));
+    }
+}, _ScrollSpyController_markPassed = function _ScrollSpyController_markPassed(link, force) {
+    if (force) {
+        __classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f").add(link);
+    }
+    else {
+        __classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f").delete(link);
+    }
+}, _ScrollSpyController_setActive = function _ScrollSpyController_setActive(link) {
+    for (const child of __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)) {
+        child.toggleAttribute(__classPrivateFieldGet(this, _ScrollSpyController_activeAttribute, "f"), child === link);
+    }
+}, _ScrollSpyController_nextIntersection = async function _ScrollSpyController_nextIntersection() {
+    __classPrivateFieldSet(this, _ScrollSpyController_intersected, false, "f");
+    // safeguard the loop
+    setTimeout(() => __classPrivateFieldSet(this, _ScrollSpyController_intersected, false, "f"), 3000);
+    while (!__classPrivateFieldGet(this, _ScrollSpyController_intersected, "f")) {
+        await new Promise(requestAnimationFrame);
+    }
+}, _ScrollSpyController_onIo = async function _ScrollSpyController_onIo(entries) {
+    if (!__classPrivateFieldGet(this, _ScrollSpyController_force, "f")) {
+        for (const { target, boundingClientRect, intersectionRect } of entries) {
+            const selector = `:is(${__classPrivateFieldGet(this, _ScrollSpyController_tagNames, "f").join(',')})[href="#${target.id}"]`;
+            const link = this.host.querySelector(selector);
+            if (link) {
+                __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_markPassed).call(this, link, boundingClientRect.top < intersectionRect.top);
+            }
+        }
+        const link = [...__classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f")];
+        const last = link.at(-1);
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_setActive).call(this, last ?? __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get).at(0));
+    }
+    __classPrivateFieldSet(this, _ScrollSpyController_intersected, true, "f");
+};
 //# sourceMappingURL=scroll-spy-controller.js.map