@quartzds/core 1.0.0-beta.12 → 1.0.0-beta.120

package/dist/cjs/qds-dropdown.cjs.entry.js

@@ -1,227 +1,391 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-DIY7gpXM.js');
+var floatingUi_dom = require('./floating-ui.dom-Bvzubd50.js');
+var helpers = require('./helpers-BIL8yXqA.js');
 
-const index = require('./index-d181f952.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-7f1cac3e.js');
-const helpers = require('./helpers-452256e8.js');
-
-const dropdownCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{background:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);display:inline-block;left:0;top:0}";
+const dropdownCss = ":host([hidden]){display:none!important}:host{background-color:var(--qds-theme-popup-background);border:none;border-radius:var(--qds-popup-border-radius);box-shadow:var(--qds-popup-elevation);box-sizing:border-box;display:inline-block;inset:unset;margin:0;overflow:initial;padding:0}";
 
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Dropdown_instances, _Dropdown_cleanup, _Dropdown_Items, _Dropdown_gap, _Dropdown_middleware, _Dropdown_referenceElement, _Dropdown_open, _Dropdown_opened, _Dropdown_onFocusout, _Dropdown_focusOnTrigger, _Dropdown_onKeydown, _Dropdown_onReferenceClick, _Dropdown_focusFirstItem, _Dropdown_disconnectReferenceElement, _Dropdown_boundOnFocusout, _Dropdown_boundOnKeydown, _Dropdown_boundOnReferenceClick, _Dropdown_onSlotchange;
 let autoIncrementingId = 1;
+const isQdsButton = (element) => element.tagName.toLowerCase() === 'qds-button';
+const ALLOWED_TAGS = new Set([
+    'qds-action-item',
+    'qds-menu-item',
+    'qds-list-item',
+]);
+const isEnabledItem = (element) => element instanceof HTMLElement &&
+    ALLOWED_TAGS.has(element.tagName.toLowerCase()) &&
+    !element.hasAttribute('disabled') &&
+    !element.inert;
 const Dropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cancelEmitter = index.createEvent(this, "qdsCancel", 3);
-    this.closeEmitter = index.createEvent(this, "qdsClose", 2);
-    this.open = false;
-    this.boundFocusout = (event) => {
-      helpers.ignorePromise(this.handleFocusOut(event));
-    };
-    this.boundEscape = (event) => {
-      helpers.ignorePromise(this.handleEscape(event));
-    };
-    this.boundReferenceClick = () => {
-      helpers.ignorePromise(this.handleReferenceClick());
-    };
-    this.autoUpdateOptions = undefined;
-    this.disabled = false;
-    this.flipOptions = undefined;
-    this.noFlip = false;
-    this.noShift = false;
-    this.offsetOptions = undefined;
-    this.placement = 'bottom-start';
-    this.shiftOptions = undefined;
-    this.strategy = undefined;
-    this.target = undefined;
-    this.hostAriaLabelledBy = undefined;
-    this.hostDisplay = undefined;
-    this.hostPosition = undefined;
-    this.hostTransform = undefined;
-  }
-  /**
-   * Show the dropdown.
-   */
-  async show() {
-    if (this.open)
-      return;
-    if (this.referenceElement instanceof globalThis.Element) {
-      this.referenceElement.setAttribute('aria-expanded', 'true');
-      this.referenceElement.setAttribute('aria-controls', this.element.id);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cancelEmitter = index.createEvent(this, "qdsCancel", 3);
+        this.closeEmitter = index.createEvent(this, "qdsClose", 2);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        _Dropdown_instances.add(this);
+        /**
+         * Prevents the dropdown from being shown by user interaction. The dropdown
+         * can still be displayed by calling the `show()` method.
+         */
+        this.disabled = false;
+        /**
+         * Disable Floating UI's
+         * [`flip` middleware](https://floating-ui.com/docs/flip).
+         */
+        this.noFlip = false;
+        /**
+         * Disable Floating UI's
+         * [`shift` middleware](https://floating-ui.com/docs/shift).
+         */
+        this.noShift = false;
+        /**
+         * Where to place the dropdown relative to the `target`.
+         *
+         * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        this.placement = 'bottom-start';
+        /**
+         * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+         * dropdowns that allow for multiple interactions.
+         */
+        this.keepOpenOnSelect = false;
+        _Dropdown_cleanup.set(this, void 0);
+        _Dropdown_Items.set(this, []);
+        _Dropdown_gap.set(this, 0);
+        _Dropdown_middleware.set(this, void 0);
+        _Dropdown_referenceElement.set(this, void 0);
+        _Dropdown_open.set(this, false
+        /**
+         * Whether the dropdown has been opened at least once.
+         * This is used to determine whether the dropdown should update its position, gap
+         * and middleware when it is opened.
+         */
+        );
+        /**
+         * Whether the dropdown has been opened at least once.
+         * This is used to determine whether the dropdown should update its position, gap
+         * and middleware when it is opened.
+         */
+        _Dropdown_opened.set(this, false
+        /**
+         * Updates the gap between the dropdown and its target element.
+         */
+        );
+        _Dropdown_onFocusout.set(this, async (event) => {
+            if (!(event instanceof FocusEvent))
+                return;
+            const { relatedTarget } = event;
+            const dropdownItem = __classPrivateFieldGet(this, _Dropdown_Items, "f").find((item) => item === relatedTarget);
+            if (relatedTarget instanceof globalThis.Element &&
+                !this.host.contains(relatedTarget) &&
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") !== relatedTarget &&
+                !dropdownItem)
+                await this.close();
+        });
+        _Dropdown_onKeydown.set(this, async (event) => {
+            if (!(event instanceof KeyboardEvent))
+                return;
+            const { key, target } = event;
+            if (key === 'Enter' && !this.keepOpenOnSelect && isEnabledItem(target)) {
+                await this.close();
+                __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_focusOnTrigger).call(this);
+                return;
+            }
+            if (key === 'Escape' &&
+                (target === __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") ||
+                    (target instanceof globalThis.Element &&
+                        helpers.closestElement('qds-dropdown', target) === this.host))) {
+                const cancelEvent = this.cancelEmitter.emit();
+                if (cancelEvent.defaultPrevented)
+                    return;
+                await this.close();
+                __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_focusOnTrigger).call(this);
+                return;
+            }
+            if (target === __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") &&
+                (key === 'ArrowDown' || key === 'ArrowUp')) {
+                if (!__classPrivateFieldGet(this, _Dropdown_open, "f"))
+                    await this.show();
+                __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_focusFirstItem).call(this);
+                event.preventDefault();
+                return;
+            }
+            if (!helpers.VERTICAL_MOVE_KEYS.has(key))
+                return;
+            const Items = __classPrivateFieldGet(this, _Dropdown_Items, "f").filter((item) => isEnabledItem(item) &&
+                helpers.closestElement('qds-dropdown', item) === this.host);
+            if (Items.length === 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const currentIndex = Items.findIndex((item) => item.getAttribute('tabindex') === '0');
+            let nextIndex = currentIndex;
+            switch (key) {
+                case 'ArrowUp': {
+                    nextIndex = currentIndex > 0 ? currentIndex - 1 : Items.length - 1;
+                    break;
+                }
+                case 'ArrowDown': {
+                    nextIndex = currentIndex < Items.length - 1 ? currentIndex + 1 : 0;
+                    break;
+                }
+                case 'Home': {
+                    nextIndex = 0;
+                    break;
+                }
+                case 'End': {
+                    nextIndex = Items.length - 1;
+                    break;
+                }
+                default: {
+                    return;
+                }
+            }
+            const nextItem = Items[nextIndex];
+            for (const [index, item] of Items.entries()) {
+                item.setAttribute('tabindex', index === nextIndex ? '0' : '-1');
+            }
+            nextItem.focus();
+            event.preventDefault();
+        });
+        _Dropdown_onReferenceClick.set(this, async () => {
+            if (this.disabled)
+                return;
+            if (__classPrivateFieldGet(this, _Dropdown_open, "f")) {
+                await this.close();
+                return;
+            }
+            await this.show();
+            __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_focusFirstItem).call(this);
+        });
+        _Dropdown_boundOnFocusout.set(this, (event) => {
+            helpers.ignorePromise(__classPrivateFieldGet(this, _Dropdown_onFocusout, "f").call(this, event));
+        });
+        _Dropdown_boundOnKeydown.set(this, (event) => {
+            helpers.ignorePromise(__classPrivateFieldGet(this, _Dropdown_onKeydown, "f").call(this, event));
+        });
+        _Dropdown_boundOnReferenceClick.set(this, () => {
+            helpers.ignorePromise(__classPrivateFieldGet(this, _Dropdown_onReferenceClick, "f").call(this));
+        });
+        _Dropdown_onSlotchange.set(this, (event) => {
+            const slot = event.target;
+            const assignedElements = slot.assignedElements({ flatten: true });
+            __classPrivateFieldSet(this, _Dropdown_Items, assignedElements.filter((element) => isEnabledItem(element)), "f");
+        });
+    }
+    /**
+     * Updates the gap between the dropdown and its target element.
+     */
+    async updateGap() {
+        __classPrivateFieldSet(this, _Dropdown_gap, helpers.propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0, "f");
+        await this.updateMiddleware();
+    }
+    /**
+     * Shows the dropdown.
+     */
+    async show() {
+        if (__classPrivateFieldGet(this, _Dropdown_open, "f"))
+            return;
+        const reference = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f");
+        const { host } = this;
+        if (reference instanceof globalThis.Element) {
+            reference.setAttribute('aria-expanded', 'true');
+            reference.setAttribute('aria-controls', host.id);
+            host.setAttribute('aria-labelledby', reference.id);
+            if (!reference.hasAttribute('aria-haspopup'))
+                reference.setAttribute('aria-haspopup', 'true');
+            if (isQdsButton(reference) && reference.action === 'dropdown')
+                reference.action = 'dropdown-close';
+        }
+        if (!__classPrivateFieldGet(this, _Dropdown_opened, "f")) {
+            await this.updateGap();
+            __classPrivateFieldSet(this, _Dropdown_opened, true, "f");
+        }
+        this.startAutoUpdate();
+        __classPrivateFieldSet(this, _Dropdown_open, true, "f");
+        host.hidden = false;
+        host.showPopover();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async close() {
+        if (!__classPrivateFieldGet(this, _Dropdown_open, "f"))
+            return;
+        if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element) {
+            __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'false');
+            __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-controls');
+            if (isQdsButton(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")) &&
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action === 'dropdown-close')
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action = 'dropdown';
+        }
+        if (__classPrivateFieldGet(this, _Dropdown_cleanup, "f"))
+            __classPrivateFieldGet(this, _Dropdown_cleanup, "f").call(this);
+        __classPrivateFieldSet(this, _Dropdown_open, false, "f");
+        this.host.hidden = true;
+        this.host.hidePopover();
+        this.closeEmitter.emit();
+    }
+    async handleMouseDown(event) {
+        if (!__classPrivateFieldGet(this, _Dropdown_open, "f"))
+            return;
+        const composedPath = event.composedPath();
+        const withinBounds = composedPath.includes(this.host) ||
+            (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element &&
+                composedPath.includes(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")));
+        if (!withinBounds)
+            await this.close();
+    }
+    async onItemClick(event) {
+        if (!this.keepOpenOnSelect && isEnabledItem(event.target)) {
+            await this.close();
+        }
     }
-    this.open = true;
-    this.hostDisplay = undefined;
-    this.startAutoUpdate();
-  }
-  /**
-   * Close the dropdown.
-   */
-  async close() {
-    if (!this.open)
-      return;
-    if (this.referenceElement instanceof globalThis.Element) {
-      this.referenceElement.setAttribute('aria-expanded', 'false');
-      this.referenceElement.removeAttribute('aria-controls');
+    async updateReferenceElement() {
+        var _a;
+        __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
+        __classPrivateFieldSet(this, _Dropdown_referenceElement, helpers.resolveTarget(this.target), "f");
+        if (!(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element))
+            return;
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'false');
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('click', __classPrivateFieldGet(this, _Dropdown_boundOnReferenceClick, "f"));
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_boundOnFocusout, "f"));
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_boundOnKeydown, "f"));
+        if (this.host.role === 'menu') {
+            (_a = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f")).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
+            this.host.setAttribute('aria-labelledby', __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").id);
+        }
     }
-    this.open = false;
-    this.hostDisplay = 'none';
-    if (this.cleanup)
-      this.cleanup();
-    this.closeEmitter.emit();
-  }
-  /**
-   * Update the dropdown's middleware and position.
-   */
-  async update() {
-    await this.updateMiddleware();
-  }
-  async handleMouseDown(event) {
-    if (!this.open)
-      return;
-    const composedPath = event.composedPath();
-    const withinBounds = composedPath.includes(this.element) ||
-      (this.referenceElement instanceof globalThis.Element &&
-        composedPath.includes(this.referenceElement));
-    if (!withinBounds)
-      await this.close();
-  }
-  async updateReferenceElement() {
-    var _a;
-    this.disconnectReferenceElement();
-    const resolvedTarget = typeof this.target === 'function' ? this.target() : this.target;
-    if (typeof resolvedTarget === 'string') {
-      const element = document.querySelector(resolvedTarget);
-      if (element === null)
-        throw new Error('String `target` must resolve to an Element.');
-      this.referenceElement = element;
+    async updateMiddleware() {
+        __classPrivateFieldSet(this, _Dropdown_middleware, [
+            floatingUi_dom.offset({
+                ...this.offsetOptions,
+                mainAxis: __classPrivateFieldGet(this, _Dropdown_gap, "f"),
+            }),
+            !this.noFlip &&
+                floatingUi_dom.flip({
+                    crossAxis: this.noShift,
+                    ...this.flipOptions,
+                }),
+            !this.noShift &&
+                floatingUi_dom.shift({
+                    limiter: floatingUi_dom.limitShift(),
+                    ...this.shiftOptions,
+                }),
+        ], "f");
     }
-    else
-      this.referenceElement = resolvedTarget;
-    if (!(this.referenceElement instanceof globalThis.Element))
-      return;
-    this.referenceElement.setAttribute('aria-expanded', 'false');
-    this.referenceElement.addEventListener('click', this.boundReferenceClick);
-    this.referenceElement.addEventListener('focusout', this.boundFocusout);
-    this.referenceElement.addEventListener('keydown', this.boundEscape);
-    if (this.element.role === 'menu') {
-      (_a = this.referenceElement).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
-      this.hostAriaLabelledBy = this.referenceElement.id;
+    async updatePosition() {
+        if (!__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"))
+            return;
+        const { x, y, strategy } = await floatingUi_dom.computePosition(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, {
+            middleware: __classPrivateFieldGet(this, _Dropdown_middleware, "f"),
+            placement: this.placement,
+            strategy: this.strategy,
+        });
+        Object.assign(this.host.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
-  }
-  async updateMiddleware() {
-    this.middleware = [
-      floatingUi_dom_esm.offset({
-        ...this.offsetOptions,
-        mainAxis: helpers.propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,
-      }),
-      !this.noFlip &&
-        floatingUi_dom_esm.flip({
-          crossAxis: this.noShift,
-          ...this.flipOptions,
-        }),
-      !this.noShift &&
-        floatingUi_dom_esm.shift({
-          limiter: floatingUi_dom_esm.limitShift(),
-          ...this.shiftOptions,
-        }),
-    ].filter((middleware) => middleware !== false);
-    await this.updatePosition();
-  }
-  async updatePosition() {
-    helpers.invariant(this.referenceElement);
-    const { x, y, strategy } = await floatingUi_dom_esm.computePosition(this.referenceElement, this.element, {
-      middleware: this.middleware,
-      placement: this.placement,
-      strategy: this.strategy,
+    startAutoUpdate() {
+        if (!__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"))
+            return;
+        if (__classPrivateFieldGet(this, _Dropdown_cleanup, "f"))
+            __classPrivateFieldGet(this, _Dropdown_cleanup, "f").call(this);
+        __classPrivateFieldSet(this, _Dropdown_cleanup, floatingUi_dom.autoUpdate(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, () => {
+            helpers.ignorePromise(this.updatePosition());
+        }, this.autoUpdateOptions), "f");
+    }
+    async componentWillLoad() {
+        var _a;
+        this.host.hidden = true;
+        this.host.popover = 'manual';
+        this.internals.role = 'menu';
+        (_a = this.host).id || (_a.id = `qds-dropdown-${autoIncrementingId}`);
+        await this.updateReferenceElement();
+        autoIncrementingId += 1;
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
+    }
+    render() {
+        return (index.h(index.Host, { key: '052f625928e9ace10076f39b8a4d7f84b238c407', onKeyDown: __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"), onFocusout: __classPrivateFieldGet(this, _Dropdown_onFocusout, "f") }, index.h("slot", { key: '962dc5ef2ae9a6249c124bfc7e1a6e18fff2957e', onSlotchange: __classPrivateFieldGet(this, _Dropdown_onSlotchange, "f") })));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "target": ["updateReferenceElement"],
+        "flipOptions": ["updateMiddleware"],
+        "noFlip": ["updateMiddleware"],
+        "noShift": ["updateMiddleware"],
+        "offsetOptions": ["updateMiddleware"],
+        "shiftOptions": ["updateMiddleware"],
+        "middleware": ["updatePosition"],
+        "placement": ["updatePosition"],
+        "strategy": ["updatePosition"],
+        "autoUpdateOptions": ["startAutoUpdate"]
+    }; }
+};
+_Dropdown_cleanup = new WeakMap(), _Dropdown_Items = new WeakMap(), _Dropdown_gap = new WeakMap(), _Dropdown_middleware = new WeakMap(), _Dropdown_referenceElement = new WeakMap(), _Dropdown_open = new WeakMap(), _Dropdown_opened = new WeakMap(), _Dropdown_onFocusout = new WeakMap(), _Dropdown_onKeydown = new WeakMap(), _Dropdown_onReferenceClick = new WeakMap(), _Dropdown_boundOnFocusout = new WeakMap(), _Dropdown_boundOnKeydown = new WeakMap(), _Dropdown_boundOnReferenceClick = new WeakMap(), _Dropdown_onSlotchange = new WeakMap(), _Dropdown_instances = new WeakSet(), _Dropdown_focusOnTrigger = function _Dropdown_focusOnTrigger() {
+    if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.HTMLElement ||
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.SVGElement) {
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").focus();
+    }
+}, _Dropdown_focusFirstItem = function _Dropdown_focusFirstItem() {
+    requestAnimationFrame(() => {
+        const firstItem = __classPrivateFieldGet(this, _Dropdown_Items, "f").find((item) => item instanceof HTMLElement &&
+            isEnabledItem(item) &&
+            helpers.closestElement('qds-dropdown', item) === this.host);
+        if (!firstItem)
+            return;
+        for (const item of __classPrivateFieldGet(this, _Dropdown_Items, "f"))
+            item.setAttribute('tabindex', '-1');
+        firstItem.setAttribute('tabindex', '0');
+        firstItem.focus();
     });
-    this.hostPosition = strategy;
-    this.hostTransform = `translate(${helpers.roundByDPR(x)}px,${helpers.roundByDPR(y)}px)`;
-  }
-  startAutoUpdate() {
-    helpers.invariant(this.referenceElement);
-    if (this.cleanup)
-      this.cleanup();
-    this.cleanup = floatingUi_dom_esm.autoUpdate(this.referenceElement, this.element, () => {
-      helpers.ignorePromise(this.updatePosition());
-    }, this.autoUpdateOptions);
-  }
-  async componentWillLoad() {
-    var _a, _b;
-    this.hostDisplay = 'none';
-    (_a = this.element).role ?? (_a.role = 'menu');
-    (_b = this.element).id || (_b.id = `qds-dropdown-${autoIncrementingId}`);
-    await this.updateReferenceElement();
-    autoIncrementingId += 1;
-    await this.updateMiddleware();
-  }
-  disconnectedCallback() {
-    this.disconnectReferenceElement();
-  }
-  render() {
-    return (index.h(index.Host, { "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: this.boundEscape, onFocusout: this.boundFocusout, style: {
-        display: this.hostDisplay,
-        position: this.hostPosition,
-        transform: this.hostTransform,
-      } }, index.h("slot", null)));
-  }
-  async handleFocusOut(event) {
-    if (!(event instanceof FocusEvent))
-      return;
-    const { relatedTarget } = event;
-    if (relatedTarget instanceof globalThis.Element &&
-      !this.element.contains(relatedTarget) &&
-      this.referenceElement !== relatedTarget)
-      await this.close();
-  }
-  async handleEscape(event) {
-    if (!(event instanceof KeyboardEvent) ||
-      event.key !== 'Escape' ||
-      (event.target !== this.referenceElement &&
-        event.target instanceof globalThis.Element &&
-        event.target.closest('qds-dropdown') !== this.element))
-      return;
-    const cancelEvent = this.cancelEmitter.emit();
-    if (cancelEvent.defaultPrevented)
-      return;
-    await this.close();
-    if (this.referenceElement instanceof globalThis.HTMLElement ||
-      this.referenceElement instanceof globalThis.SVGElement)
-      this.referenceElement.focus();
-  }
-  async handleReferenceClick() {
-    if (!this.disabled)
-      await (this.open ? this.close() : this.show());
-  }
-  disconnectReferenceElement() {
-    this.hostAriaLabelledBy = undefined;
-    if (!(this.referenceElement instanceof globalThis.Element))
-      return;
-    this.referenceElement.removeEventListener('click', this.boundReferenceClick);
-    this.referenceElement.removeEventListener('focusout', this.boundFocusout);
-    this.referenceElement.removeEventListener('keydown', this.boundEscape);
-    this.referenceElement.removeAttribute('aria-expanded');
-    this.referenceElement.removeAttribute('aria-controls');
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "target": ["updateReferenceElement"],
-    "flipOptions": ["updateMiddleware"],
-    "noFlip": ["updateMiddleware"],
-    "noShift": ["updateMiddleware"],
-    "offsetOptions": ["updateMiddleware"],
-    "shiftOptions": ["updateMiddleware"],
-    "placement": ["updatePosition"],
-    "strategy": ["updatePosition"],
-    "autoUpdateOptions": ["startAutoUpdate"]
-  }; }
+}, _Dropdown_disconnectReferenceElement = function _Dropdown_disconnectReferenceElement() {
+    this.host.removeAttribute('aria-labelledby');
+    if (!(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element))
+        return;
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_boundOnFocusout, "f"));
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_boundOnKeydown, "f"));
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-expanded');
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-controls');
 };
 Dropdown.style = dropdownCss;
 
 exports.qds_dropdown = Dropdown;
-
-//# sourceMappingURL=qds-dropdown.cjs.entry.js.map
+//# sourceMappingURL=qds-dropdown.entry.cjs.js.map