@patternfly/pfe-core 2.3.0 → 2.4.0

package/controllers/overflow-controller.js

@@ -1,78 +1,80 @@
-var _OverflowController_instances, _OverflowController_container, _OverflowController_items, _OverflowController_scrollTimeoutDelay, _OverflowController_scrollTimeout, _OverflowController_hideOverflowButtons, _OverflowController_setOverflowState;
-import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
 export class OverflowController {
+    /** Overflow container */
+    #container;
+    /** Children that can overflow */
+    #items;
+    #scrollTimeoutDelay;
+    #scrollTimeout;
+    /** Default state */
+    #hideOverflowButtons;
     get firstItem() {
-        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(0);
+        return this.#items.at(0);
     }
     get lastItem() {
-        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(-1);
+        return this.#items.at(-1);
     }
     constructor(host, options) {
-        _OverflowController_instances.add(this);
         this.host = host;
         this.options = options;
-        /** Overflow container */
-        _OverflowController_container.set(this, void 0);
         /** Children that can overflow */
-        _OverflowController_items.set(this, []);
-        _OverflowController_scrollTimeoutDelay.set(this, 0);
-        _OverflowController_scrollTimeout.set(this, void 0);
+        this.#items = [];
+        this.#scrollTimeoutDelay = 0;
         /** Default state */
-        _OverflowController_hideOverflowButtons.set(this, false);
+        this.#hideOverflowButtons = false;
         this.showScrollButtons = false;
         this.overflowLeft = false;
         this.overflowRight = false;
         this.onScroll = () => {
-            clearTimeout(__classPrivateFieldGet(this, _OverflowController_scrollTimeout, "f"));
-            __classPrivateFieldSet(this, _OverflowController_scrollTimeout, setTimeout(() => __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this), __classPrivateFieldGet(this, _OverflowController_scrollTimeoutDelay, "f")), "f");
+            clearTimeout(this.#scrollTimeout);
+            this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);
         };
         this.host.addController(this);
         if (options?.hideOverflowButtons) {
-            __classPrivateFieldSet(this, _OverflowController_hideOverflowButtons, options?.hideOverflowButtons, "f");
+            this.#hideOverflowButtons = options?.hideOverflowButtons;
         }
     }
+    #setOverflowState() {
+        if (!this.firstItem || !this.lastItem || !this.#container) {
+            return;
+        }
+        this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);
+        this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);
+        let scrollButtonsWidth = 0;
+        if (this.overflowLeft || this.overflowRight) {
+            scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
+        }
+        this.showScrollButtons = !this.#hideOverflowButtons &&
+            this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);
+        this.host.requestUpdate();
+    }
     init(container, items) {
-        __classPrivateFieldSet(this, _OverflowController_container, container, "f");
+        this.#container = container;
         // convert HTMLCollection to HTMLElement[]
-        __classPrivateFieldSet(this, _OverflowController_items, items, "f");
+        this.#items = items;
     }
     scrollLeft() {
-        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+        if (!this.#container) {
             return;
         }
-        const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft - __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
-        __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
-        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+        const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;
+        this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
+        this.#setOverflowState();
     }
     scrollRight() {
-        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+        if (!this.#container) {
             return;
         }
-        const leftScroll = __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft + __classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth;
-        __classPrivateFieldGet(this, _OverflowController_container, "f").scroll({ left: leftScroll, behavior: 'smooth' });
-        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+        const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;
+        this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
+        this.#setOverflowState();
     }
     update() {
-        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+        this.#setOverflowState();
     }
     hostConnected() {
         this.onScroll();
-        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+        this.#setOverflowState();
     }
 }
-_OverflowController_container = new WeakMap(), _OverflowController_items = new WeakMap(), _OverflowController_scrollTimeoutDelay = new WeakMap(), _OverflowController_scrollTimeout = new WeakMap(), _OverflowController_hideOverflowButtons = new WeakMap(), _OverflowController_instances = new WeakSet(), _OverflowController_setOverflowState = function _OverflowController_setOverflowState() {
-    if (!this.firstItem || !this.lastItem || !__classPrivateFieldGet(this, _OverflowController_container, "f")) {
-        return;
-    }
-    this.overflowLeft = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.firstItem);
-    this.overflowRight = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.lastItem);
-    let scrollButtonsWidth = 0;
-    if (this.overflowLeft || this.overflowRight) {
-        scrollButtonsWidth = (__classPrivateFieldGet(this, _OverflowController_container, "f").parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
-    }
-    this.showScrollButtons = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") &&
-        __classPrivateFieldGet(this, _OverflowController_container, "f").scrollWidth > (__classPrivateFieldGet(this, _OverflowController_container, "f").clientWidth + scrollButtonsWidth);
-    this.host.requestUpdate();
-};
 //# sourceMappingURL=overflow-controller.js.map

package/controllers/overflow-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n  hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n  /** Overflow container */\n  #container?: HTMLElement;\n  /** Children that can overflow */\n  #items: HTMLElement[] = [];\n\n  #scrollTimeoutDelay = 0;\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Default state */\n  #hideOverflowButtons = false;\n  showScrollButtons = false;\n  overflowLeft = false;\n  overflowRight = false;\n\n  get firstItem(): HTMLElement | undefined {\n    return this.#items.at(0);\n  }\n\n  get lastItem(): HTMLElement | undefined {\n    return this.#items.at(-1);\n  }\n\n  constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n    this.host.addController(this);\n    if (options?.hideOverflowButtons) {\n      this.#hideOverflowButtons = options?.hideOverflowButtons;\n    }\n  }\n\n  #setOverflowState(): void {\n    if (!this.firstItem || !this.lastItem || !this.#container) {\n      return;\n    }\n    this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n    this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n    let scrollButtonsWidth = 0;\n    if (this.overflowLeft || this.overflowRight) {\n      scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;\n    }\n    this.showScrollButtons = !this.#hideOverflowButtons &&\n    this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);\n    this.host.requestUpdate();\n  }\n\n  init(container: HTMLElement, items: HTMLElement[]) {\n    this.#container = container;\n    // convert HTMLCollection to HTMLElement[]\n    this.#items = items;\n  }\n\n  onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n  };\n\n  scrollLeft() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  scrollRight() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  update() {\n    this.#setOverflowState();\n  }\n\n  hostConnected(): void {\n    this.onScroll();\n    this.#setOverflowState();\n  }\n}\n"]}
+{"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n  hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n  /** Overflow container */\n  #container?: HTMLElement;\n  /** Children that can overflow */\n  #items: HTMLElement[] = [];\n\n  #scrollTimeoutDelay = 0;\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Default state */\n  #hideOverflowButtons = false;\n  showScrollButtons = false;\n  overflowLeft = false;\n  overflowRight = false;\n\n  get firstItem(): HTMLElement | undefined {\n    return this.#items.at(0);\n  }\n\n  get lastItem(): HTMLElement | undefined {\n    return this.#items.at(-1);\n  }\n\n  constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n    this.host.addController(this);\n    if (options?.hideOverflowButtons) {\n      this.#hideOverflowButtons = options?.hideOverflowButtons;\n    }\n  }\n\n  #setOverflowState(): void {\n    if (!this.firstItem || !this.lastItem || !this.#container) {\n      return;\n    }\n    this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n    this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n    let scrollButtonsWidth = 0;\n    if (this.overflowLeft || this.overflowRight) {\n      scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;\n    }\n    this.showScrollButtons = !this.#hideOverflowButtons &&\n    this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);\n    this.host.requestUpdate();\n  }\n\n  init(container: HTMLElement, items: HTMLElement[]) {\n    this.#container = container;\n    // convert HTMLCollection to HTMLElement[]\n    this.#items = items;\n  }\n\n  onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n  };\n\n  scrollLeft() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  scrollRight() {\n    if (!this.#container) {\n      return;\n    }\n    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;\n    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });\n    this.#setOverflowState();\n  }\n\n  update() {\n    this.#setOverflowState();\n  }\n\n  hostConnected(): void {\n    this.onScroll();\n    this.#setOverflowState();\n  }\n}\n"]}

package/controllers/property-observer-controller.js

@@ -1,6 +1,7 @@
 export const observedController = Symbol('observed properties controller');
 /** This controller holds a cache of observed property values which were set before the element updated */
 class PropertyObserverController {
+    static { this.hosts = new WeakMap(); }
     delete(key) {
         this.values.delete(key);
     }
@@ -29,6 +30,5 @@ class PropertyObserverController {
         this.values.set(key, [methodName, vals]);
     }
 }
-PropertyObserverController.hosts = new WeakMap();
 export { PropertyObserverController };
 //# sourceMappingURL=property-observer-controller.js.map

package/controllers/property-observer-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAa,0BAA0B;IAK7B,MAAM,CAAC,GAAW;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QANjC,WAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;QAOnF,IAAI,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;SACjF;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAA8C,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;IAC7E,CAAC;IAED,kFAAkF;IAClF,UAAU;QACR,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/D,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC;IAED,uFAAuF;IACvF,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,GAAW,EAAE,UAAkB,EAAE,GAAG,IAAwB;QAChE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC;;AAhCc,gCAAK,GAAqD,IAAI,OAAO,EAAE,AAAlE,CAAmE;SAD5E,0BAA0B","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n  this: T,\n  old?: T[keyof T],\n  newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n  [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n  private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n  private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n  private delete(key: string) {\n    this.values.delete(key);\n  }\n\n  constructor(private host: ReactiveElement) {\n    if (PropertyObserverController.hosts.get(host)) {\n      return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n    }\n    host.addController(this);\n    (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n  }\n\n  /** Set any cached valued accumulated between constructor and connectedCallback */\n  hostUpdate() {\n    for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n      // @ts-expect-error: be cool, typescript\n      this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n      this.delete(key);\n    }\n  }\n\n  /** Once the element has updated, we no longer need this controller, so we remove it */\n  hostUpdated() {\n    this.host.removeController(this);\n  }\n\n  cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n    this.values.set(key, [methodName, vals]);\n  }\n}\n"]}
+{"version":3,"file":"property-observer-controller.js","sourceRoot":"","sources":["property-observer-controller.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,gCAAgC,CAAC,CAAC;AAc3E,0GAA0G;AAC1G,MAAa,0BAA0B;aACtB,UAAK,GAAqD,IAAI,OAAO,EAAE,AAAlE,CAAmE;IAI/E,MAAM,CAAC,GAAW;QACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAED,YAAoB,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QANjC,WAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;QAOnF,IAAI,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC9C,OAAO,0BAA0B,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAA+B,CAAC;SACjF;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxB,IAA8C,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC;IAC7E,CAAC;IAED,kFAAkF;IAClF,UAAU;QACR,KAAK,MAAM,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAC/D,wCAAwC;YACxC,IAAI,CAAC,IAAI,CAAC,UAAmC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC;IAED,uFAAuF;IACvF,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,GAAW,EAAE,UAAkB,EAAE,GAAG,IAAwB;QAChE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3C,CAAC;;SAjCU,0BAA0B","sourcesContent":["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n  this: T,\n  old?: T[keyof T],\n  newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n  [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n  private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n  private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n  private delete(key: string) {\n    this.values.delete(key);\n  }\n\n  constructor(private host: ReactiveElement) {\n    if (PropertyObserverController.hosts.get(host)) {\n      return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n    }\n    host.addController(this);\n    (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n  }\n\n  /** Set any cached valued accumulated between constructor and connectedCallback */\n  hostUpdate() {\n    for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n      // @ts-expect-error: be cool, typescript\n      this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n      this.delete(key);\n    }\n  }\n\n  /** Once the element has updated, we no longer need this controller, so we remove it */\n  hostUpdated() {\n    this.host.removeController(this);\n  }\n\n  cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n    this.values.set(key, [methodName, vals]);\n  }\n}\n"]}

package/controllers/roving-tabindex-controller.js

@@ -1,5 +1,3 @@
-var _RovingTabindexController_instances, _RovingTabindexController_activeItem, _RovingTabindexController_itemsContainer, _RovingTabindexController_items, _RovingTabindexController_focusableItems_get, _RovingTabindexController_activeIndex_get, _RovingTabindexController_itemIndex_get, _RovingTabindexController_onKeydown;
-import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 const isFocusableElement = (el) => !!el &&
     !el.hasAttribute('disabled') &&
     !el.ariaHidden &&
@@ -10,124 +8,145 @@ const isFocusableElement = (el) => !!el &&
  * tabindex](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);
+    }
+    /**
+     * index of active item in array of focusable items
+     */
+    get #activeIndex() {
+        return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;
+    }
+    /**
+     * index of active item in array of items
+     */
+    get #itemIndex() {
+        return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;
+    }
     /**
      * active item of array of items
      */
     get activeItem() {
-        return __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f");
+        return this.#activeItem;
     }
     /**
      * first item in array of focusable items
      */
     get firstItem() {
-        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[0];
+        return this.#focusableItems[0];
     }
     /**
      * last item in array of focusable items
      */
     get lastItem() {
-        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).at(-1);
+        return this.#focusableItems.at(-1);
     }
     /**
      * next item  after active item in array of focusable items
      */
     get nextItem() {
-        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]);
+        return (this.#activeIndex >= this.#focusableItems.length - 1 ? this.firstItem
+            : this.#focusableItems[this.#activeIndex + 1]);
     }
     /**
      * previous item  after active item in array of focusable items
      */
     get prevItem() {
-        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]
+        return (this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]
             : this.lastItem);
     }
     constructor(host) {
-        _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, []);
-        /**
-         * handles keyboard navigation
-         */
-        _RovingTabindexController_onKeydown.set(this, (event) => {
-            if (event.ctrlKey || event.altKey || event.metaKey || __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length < 1) {
-                return;
-            }
-            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 (shouldPreventDefault) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        });
         this.host.addController(this);
     }
+    /**
+     * handles keyboard navigation
+     */
+    #onKeydown = (event) => {
+        if (event.ctrlKey ||
+            event.altKey ||
+            event.metaKey ||
+            !this.#focusableItems.length ||
+            !event.composedPath().some(x => this.#focusableItems.includes(x))) {
+            return;
+        }
+        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 (shouldPreventDefault) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    };
     /**
      * sets tabindex of item based on whether or not it is active
      */
     updateActiveItem(item) {
         if (item) {
-            if (!!__classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") && item !== __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f")) {
-                __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f").tabIndex = -1;
+            if (!!this.#activeItem && item !== this.#activeItem) {
+                this.#activeItem.tabIndex = -1;
             }
             item.tabIndex = 0;
-            __classPrivateFieldSet(this, _RovingTabindexController_activeItem, item, "f");
+            this.#activeItem = item;
         }
     }
     /**
@@ -135,34 +154,34 @@ export class RovingTabindexController {
      */
     focusOnItem(item) {
         this.updateActiveItem(item || this.firstItem);
-        __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f")?.focus();
+        this.#activeItem?.focus();
         this.host.requestUpdate();
     }
     /**
      * Focuses next focusable item
      */
     updateItems(items) {
-        const sequence = [...items.slice(__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get)), ...items.slice(0, __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get))];
-        const first = sequence.find(item => __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).includes(item));
+        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);
     }
     /**
      * from array of HTML items, and sets active items
      */
     initItems(items, itemsContainer = this.host) {
-        __classPrivateFieldSet(this, _RovingTabindexController_items, items ?? [], "f");
-        const focusableItems = __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get);
+        this.#items = items ?? [];
+        const focusableItems = this.#focusableItems;
         const [focusableItem] = focusableItems;
-        __classPrivateFieldSet(this, _RovingTabindexController_activeItem, focusableItem, "f");
+        this.#activeItem = focusableItem;
         for (const item of focusableItems) {
-            item.tabIndex = __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") === item ? 0 : -1;
+            item.tabIndex = this.#activeItem === item ? 0 : -1;
         }
         /**
          * removes listener on previous contained and applies it to new container
          */
-        if (!__classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f") || itemsContainer !== __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")) {
-            __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
-            __classPrivateFieldSet(this, _RovingTabindexController_itemsContainer, itemsContainer, "f");
+        if (!this.#itemsContainer || itemsContainer !== this.#itemsContainer) {
+            this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
+            this.#itemsContainer = itemsContainer;
             this.hostConnected();
         }
     }
@@ -170,20 +189,13 @@ export class RovingTabindexController {
      * adds event listeners to items container
      */
     hostConnected() {
-        __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.addEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+        this.#itemsContainer?.addEventListener('keydown', this.#onKeydown);
     }
     /**
      * removes event listeners from items container
      */
     hostDisconnected() {
-        __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+        this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);
     }
 }
-_RovingTabindexController_activeItem = new WeakMap(), _RovingTabindexController_itemsContainer = new WeakMap(), _RovingTabindexController_items = 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;
-};
 //# 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 || event.altKey || event.metaKey || this.#focusableItems.length < 1) {\n      return;\n    }\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';\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"]}