@quartzds/core 1.0.0-beta.8 → 1.0.0-beta.81

package/components/qds-dropdown.js

@@ -1,254 +1,281 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2025 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, l as limitShift } from './floating-ui.dom.esm.js';
-import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR } from './helpers.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7b04d43e.js';
+import { o as offset, f as flip, s as shift, l as limitShift, c as computePosition, a as autoUpdate } from './p-fdd0abae.js';
+import { r as resolveTarget, d as propertyToPx, e as roundByDPR, f as ignorePromise } from './p-4141d6ed.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:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;display:inline-block;left:0;top:0}";
+const QdsDropdownStyle0 = dropdownCss;
 
+// SPDX-FileCopyrightText: © 2024 Schneider Electric
+//
+// SPDX-License-Identifier: Apache-2.0
+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 __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 _Dropdown_instances, _Dropdown_cleanup, _Dropdown_middleware, _Dropdown_referenceElement, _Dropdown_open, _Dropdown_onFocusout, _Dropdown_onKeydown, _Dropdown_onReferenceClick, _Dropdown_disconnectReferenceElement;
 let autoIncrementingId = 1;
-const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.cancelEmitter = createEvent(this, "qdsCancel", 3);
-    this.closeEmitter = createEvent(this, "qdsClose", 2);
-    this.open = false;
-    this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(event));
-    };
-    this.boundEscape = (event) => {
-      ignorePromise(this.handleEscape(event));
-    };
-    this.boundReferenceClick = () => {
-      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);
+const isQdsButton = (element) => element.tagName.toLowerCase() === 'qds-button';
+const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.cancelEmitter = createEvent(this, "qdsCancel", 3);
+        this.closeEmitter = createEvent(this, "qdsClose", 2);
+        _Dropdown_instances.add(this);
+        _Dropdown_cleanup.set(this, void 0);
+        _Dropdown_middleware.set(this, void 0);
+        _Dropdown_referenceElement.set(this, void 0);
+        _Dropdown_open.set(this, false
+        /**
+         * Update the dropdown's middleware and position.
+         */
+        );
+        _Dropdown_onFocusout.set(this, (event) => {
+            if (!(event instanceof FocusEvent))
+                return;
+            const { relatedTarget } = event;
+            if (relatedTarget instanceof globalThis.Element &&
+                !this.host.contains(relatedTarget) &&
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") !== relatedTarget)
+                this.close();
+        });
+        _Dropdown_onKeydown.set(this, (event) => {
+            if (!(event instanceof KeyboardEvent) ||
+                event.key !== 'Escape' ||
+                (event.target !== __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") &&
+                    event.target instanceof globalThis.Element &&
+                    event.target.closest('qds-dropdown') !== this.host))
+                return;
+            const cancelEvent = this.cancelEmitter.emit();
+            if (cancelEvent.defaultPrevented)
+                return;
+            this.close();
+            if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.HTMLElement ||
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.SVGElement)
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").focus();
+        });
+        _Dropdown_onReferenceClick.set(this, () => {
+            if (this.disabled)
+                return;
+            if (__classPrivateFieldGet(this, _Dropdown_open, "f"))
+                this.close();
+            else
+                this.show();
+        });
+        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;
     }
-    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');
+    /**
+     * Update the dropdown's middleware and position.
+     */
+    async update() {
+        await this.updateMiddleware();
     }
-    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;
+    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)
+            this.close();
     }
-    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 updateReferenceElement() {
+        var _a;
+        __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
+        __classPrivateFieldSet(this, _Dropdown_referenceElement, 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_onReferenceClick, "f"));
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"));
+        __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").addEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"));
+        if (this.host.role === 'menu') {
+            (_a = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f")).id || (_a.id = `qds-dropdown-trigger-${autoIncrementingId}`);
+            this.hostAriaLabelledBy = __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").id;
+        }
+        await this.updatePosition();
     }
-  }
-  async updateMiddleware() {
-    this.middleware = [
-      offset({
-        ...this.offsetOptions,
-        mainAxis: propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,
-      }),
-      !this.noFlip &&
-        flip({
-          crossAxis: this.noShift,
-          ...this.flipOptions,
-        }),
-      !this.noShift &&
-        shift({
-          limiter: limitShift(),
-          ...this.shiftOptions,
-        }),
-    ].filter((middleware) => middleware !== false);
-    await this.updatePosition();
-  }
-  async updatePosition() {
-    invariant(this.referenceElement);
-    const { x, y, strategy } = await computePosition(this.referenceElement, this.element, {
-      middleware: this.middleware,
-      placement: this.placement,
-      strategy: this.strategy,
-    });
-    this.hostPosition = strategy;
-    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
-  }
-  startAutoUpdate() {
-    invariant(this.referenceElement);
-    if (this.cleanup)
-      this.cleanup();
-    this.cleanup = autoUpdate(this.referenceElement, this.element, () => {
-      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 (h(Host, { "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: this.boundEscape, onFocusout: this.boundFocusout, style: {
-        display: this.hostDisplay,
-        position: this.hostPosition,
-        transform: this.hostTransform,
-      } }, 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 this; }
-  static get watchers() { return {
-    "target": ["updateReferenceElement"],
-    "flipOptions": ["updateMiddleware"],
-    "noFlip": ["updateMiddleware"],
-    "noShift": ["updateMiddleware"],
-    "offsetOptions": ["updateMiddleware"],
-    "shiftOptions": ["updateMiddleware"],
-    "placement": ["updatePosition"],
-    "strategy": ["updatePosition"],
-    "autoUpdateOptions": ["startAutoUpdate"]
-  }; }
-  static get style() { return dropdownCss; }
+    async updateMiddleware() {
+        __classPrivateFieldSet(this, _Dropdown_middleware, [
+            offset({
+                ...this.offsetOptions,
+                mainAxis: propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0,
+            }),
+            !this.noFlip &&
+                flip({
+                    crossAxis: this.noShift,
+                    ...this.flipOptions,
+                }),
+            !this.noShift &&
+                shift({
+                    limiter: limitShift(),
+                    ...this.shiftOptions,
+                }),
+        ].filter((middleware) => middleware !== false), "f");
+        await this.updatePosition();
+    }
+    async updatePosition() {
+        if (!__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"))
+            return;
+        const { x, y, strategy } = await computePosition(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, {
+            middleware: __classPrivateFieldGet(this, _Dropdown_middleware, "f"),
+            placement: this.placement,
+            strategy: this.strategy,
+        });
+        this.hostPosition = strategy;
+        this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
+    }
+    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, autoUpdate(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f"), this.host, () => {
+            ignorePromise(this.updatePosition());
+        }, this.autoUpdateOptions), "f");
+    }
+    async componentWillLoad() {
+        var _a, _b;
+        this.hostDisplay = 'none';
+        (_a = this.host).role ?? (_a.role = 'menu');
+        (_b = this.host).id || (_b.id = `qds-dropdown-${autoIncrementingId}`);
+        await this.updateReferenceElement();
+        autoIncrementingId += 1;
+        await this.updateMiddleware();
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _Dropdown_instances, "m", _Dropdown_disconnectReferenceElement).call(this);
+    }
+    render() {
+        return (h(Host, { key: 'f23a5f38189f5e9415c0089764b5252a98720b59', "aria-labelledby": this.hostAriaLabelledBy, onKeyDown: __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"), onFocusout: __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"), style: {
+                display: this.hostDisplay,
+                position: this.hostPosition,
+                transform: this.hostTransform,
+            } }, h("slot", { key: 'b6d668e2f80443b86133f2360df0f359f9fd51ba' })));
+    }
+    show() {
+        if (__classPrivateFieldGet(this, _Dropdown_open, "f"))
+            return;
+        if (__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element) {
+            __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-expanded', 'true');
+            __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").setAttribute('aria-controls', this.host.id);
+            if (isQdsButton(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f")) &&
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action === 'dropdown')
+                __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").action = 'dropdown-close';
+        }
+        __classPrivateFieldSet(this, _Dropdown_open, true, "f");
+        this.hostDisplay = undefined;
+        this.startAutoUpdate();
+    }
+    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';
+        }
+        __classPrivateFieldSet(this, _Dropdown_open, false, "f");
+        this.hostDisplay = 'none';
+        if (__classPrivateFieldGet(this, _Dropdown_cleanup, "f"))
+            __classPrivateFieldGet(this, _Dropdown_cleanup, "f").call(this);
+        this.closeEmitter.emit();
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "target": ["updateReferenceElement"],
+        "flipOptions": ["updateMiddleware"],
+        "noFlip": ["updateMiddleware"],
+        "noShift": ["updateMiddleware"],
+        "offsetOptions": ["updateMiddleware"],
+        "shiftOptions": ["updateMiddleware"],
+        "placement": ["updatePosition"],
+        "strategy": ["updatePosition"],
+        "autoUpdateOptions": ["startAutoUpdate"]
+    }; }
+    static get style() { return QdsDropdownStyle0; }
 }, [1, "qds-dropdown", {
-    "autoUpdateOptions": [16],
-    "disabled": [1028],
-    "flipOptions": [16],
-    "noFlip": [4, "no-flip"],
-    "noShift": [4, "no-shift"],
-    "offsetOptions": [16],
-    "placement": [1],
-    "shiftOptions": [16],
-    "strategy": [1],
-    "target": [1],
-    "hostAriaLabelledBy": [32],
-    "hostDisplay": [32],
-    "hostPosition": [32],
-    "hostTransform": [32],
-    "show": [64],
-    "close": [64],
-    "update": [64]
-  }, [[4, "click", "handleMouseDown"]]]);
+        "autoUpdateOptions": [16],
+        "disabled": [4],
+        "flipOptions": [16],
+        "noFlip": [4, "no-flip"],
+        "noShift": [4, "no-shift"],
+        "offsetOptions": [16],
+        "placement": [1],
+        "shiftOptions": [16],
+        "strategy": [1],
+        "target": [1],
+        "hostAriaLabelledBy": [32],
+        "hostDisplay": [32],
+        "hostPosition": [32],
+        "hostTransform": [32],
+        "update": [64]
+    }, [[4, "click", "handleMouseDown"]], {
+        "target": ["updateReferenceElement"],
+        "flipOptions": ["updateMiddleware"],
+        "noFlip": ["updateMiddleware"],
+        "noShift": ["updateMiddleware"],
+        "offsetOptions": ["updateMiddleware"],
+        "shiftOptions": ["updateMiddleware"],
+        "placement": ["updatePosition"],
+        "strategy": ["updatePosition"],
+        "autoUpdateOptions": ["startAutoUpdate"]
+    }]);
+_Dropdown_cleanup = new WeakMap(), _Dropdown_middleware = new WeakMap(), _Dropdown_referenceElement = new WeakMap(), _Dropdown_open = new WeakMap(), _Dropdown_onFocusout = new WeakMap(), _Dropdown_onKeydown = new WeakMap(), _Dropdown_onReferenceClick = new WeakMap(), _Dropdown_instances = new WeakSet(), _Dropdown_disconnectReferenceElement = function _Dropdown_disconnectReferenceElement() {
+    this.hostAriaLabelledBy = undefined;
+    if (!(__classPrivateFieldGet(this, _Dropdown_referenceElement, "f") instanceof globalThis.Element))
+        return;
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('focusout', __classPrivateFieldGet(this, _Dropdown_onFocusout, "f"));
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeEventListener('keydown', __classPrivateFieldGet(this, _Dropdown_onKeydown, "f"));
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-expanded');
+    __classPrivateFieldGet(this, _Dropdown_referenceElement, "f").removeAttribute('aria-controls');
+};
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["qds-dropdown"];
-  components.forEach(tagName => { switch (tagName) {
-    case "qds-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Dropdown);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["qds-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "qds-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Dropdown);
+            }
+            break;
+    } });
 }
 
 const QdsDropdown = Dropdown;

package/components/qds-dropdown.js.map

@@ -1 +1 @@
-{"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n  background: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  display: inline-block;\n  left: 0;\n  top: 0;\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  invariant,\n  propertyToPx,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\n/**\n * @experimental\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n  tag: 'qds-dropdown',\n  shadow: true,\n  styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the dropdown from being shown by user interaction. The dropdown\n   * can still be displayed by calling the `show()` method.\n   */\n  @Prop({ mutable: true }) public disabled = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the dropdown relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'bottom-start'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the dropdown. The target specified\n   * can be any of the follow:\n   *\n   * - A CSS selector string\n   * - A reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n   * - A function returning a reference to an\n   * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n   * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n   * or a CSS selector string\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * current open dropdown by pressing the `Esc` key.\n   *\n   * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are emitted.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly element!: HTMLQdsDropdownElement\n\n  @State() private hostAriaLabelledBy?: string\n\n  @State() private hostDisplay?: string\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  private cleanup?: () => void\n\n  private middleware?: Middleware[]\n\n  private referenceElement?: ReferenceElement\n\n  private open = false\n\n  /**\n   * Show the dropdown.\n   */\n  @Method()\n  public async show(): Promise<void> {\n    if (this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'true')\n      this.referenceElement.setAttribute('aria-controls', this.element.id)\n    }\n\n    this.open = true\n    this.hostDisplay = undefined\n    this.startAutoUpdate()\n  }\n\n  /**\n   * Close the dropdown.\n   */\n  @Method()\n  public async close(): Promise<void> {\n    if (!this.open) return\n\n    if (this.referenceElement instanceof globalThis.Element) {\n      this.referenceElement.setAttribute('aria-expanded', 'false')\n      this.referenceElement.removeAttribute('aria-controls')\n    }\n\n    this.open = false\n    this.hostDisplay = 'none'\n    if (this.cleanup) this.cleanup()\n\n    this.closeEmitter.emit()\n  }\n\n  /**\n   * Update the dropdown's middleware and position.\n   */\n  @Method()\n  public async update(): Promise<void> {\n    await this.updateMiddleware()\n  }\n\n  @Listen('click', { target: 'document' })\n  protected async handleMouseDown(event: MouseEvent): Promise<void> {\n    if (!this.open) return\n\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.element) ||\n      (this.referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.referenceElement))\n    if (!withinBounds) await this.close()\n  }\n\n  @Watch('target')\n  private async updateReferenceElement(): Promise<void> {\n    this.disconnectReferenceElement()\n\n    const resolvedTarget =\n      typeof this.target === 'function' ? this.target() : this.target\n    if (typeof resolvedTarget === 'string') {\n      const element = document.querySelector(resolvedTarget)\n      if (element === null)\n        throw new Error('String `target` must resolve to an Element.')\n      this.referenceElement = element\n    } else this.referenceElement = resolvedTarget\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.setAttribute('aria-expanded', 'false')\n    this.referenceElement.addEventListener('click', this.boundReferenceClick)\n    this.referenceElement.addEventListener('focusout', this.boundFocusout)\n    this.referenceElement.addEventListener('keydown', this.boundEscape)\n    if (this.element.role === 'menu') {\n      this.referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n      this.hostAriaLabelledBy = this.referenceElement.id\n    }\n  }\n\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  private async updateMiddleware(): Promise<void> {\n    this.middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis:\n          propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n    await this.updatePosition()\n  }\n\n  @Watch('placement')\n  @Watch('strategy')\n  private async updatePosition(): Promise<void> {\n    invariant(this.referenceElement)\n\n    const { x, y, strategy } = await computePosition(\n      this.referenceElement,\n      this.element,\n      {\n        middleware: this.middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n  }\n\n  @Watch('autoUpdateOptions')\n  private startAutoUpdate(): void {\n    invariant(this.referenceElement)\n\n    if (this.cleanup) this.cleanup()\n    this.cleanup = autoUpdate(\n      this.referenceElement,\n      this.element,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.hostDisplay = 'none'\n    this.element.role ??= 'menu'\n    this.element.id ||= `qds-dropdown-${autoIncrementingId}`\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n    await this.updateMiddleware()\n  }\n\n  public disconnectedCallback(): void {\n    this.disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        aria-labelledby={this.hostAriaLabelledBy}\n        onKeyDown={this.boundEscape}\n        onFocusout={this.boundFocusout}\n        style={{\n          display: this.hostDisplay,\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n      </Host>\n    )\n  }\n\n  private async handleFocusOut(event: Event): Promise<void> {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.element.contains(relatedTarget) &&\n      this.referenceElement !== relatedTarget\n    )\n      await this.close()\n  }\n\n  private readonly boundFocusout = (event: Event): void => {\n    ignorePromise(this.handleFocusOut(event))\n  }\n\n  private async handleEscape(event: Event): Promise<void> {\n    if (\n      !(event instanceof KeyboardEvent) ||\n      event.key !== 'Escape' ||\n      (event.target !== this.referenceElement &&\n        event.target instanceof globalThis.Element &&\n        event.target.closest('qds-dropdown') !== this.element)\n    )\n      return\n\n    const cancelEvent = this.cancelEmitter.emit()\n    if (cancelEvent.defaultPrevented) return\n\n    await this.close()\n    if (\n      this.referenceElement instanceof globalThis.HTMLElement ||\n      this.referenceElement instanceof globalThis.SVGElement\n    )\n      this.referenceElement.focus()\n  }\n\n  private readonly boundEscape = (event: Event): void => {\n    ignorePromise(this.handleEscape(event))\n  }\n\n  private async handleReferenceClick(): Promise<void> {\n    if (!this.disabled) await (this.open ? this.close() : this.show())\n  }\n\n  private readonly boundReferenceClick = (): void => {\n    ignorePromise(this.handleReferenceClick())\n  }\n\n  private disconnectReferenceElement(): void {\n    this.hostAriaLabelledBy = undefined\n\n    if (!(this.referenceElement instanceof globalThis.Element)) return\n\n    this.referenceElement.removeEventListener('click', this.boundReferenceClick)\n    this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n    this.referenceElement.removeEventListener('keydown', this.boundEscape)\n    this.referenceElement.removeAttribute('aria-expanded')\n    this.referenceElement.removeAttribute('aria-controls')\n  }\n}\n"],"version":3}
+{"file":"qds-dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/dropdown.css?tag=qds-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n  background: var(--qds-theme-accessory-background);\n  border-radius: var(--qds-accessory-border-radius);\n  box-shadow: var(--qds-theme-accessory-elevation);\n  box-sizing: border-box;\n  display: inline-block;\n  left: 0;\n  top: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n  AutoUpdateOptions,\n  DetectOverflowOptions,\n  FlipOptions,\n  Middleware,\n  Placement,\n  ReferenceElement,\n  ShiftOptions,\n  Strategy,\n} from '@floating-ui/dom'\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  limitShift,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n  Component,\n  Element,\n  Event,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n  ignorePromise,\n  propertyToPx,\n  resolveTarget,\n  roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nconst isQdsButton = (\n  element: globalThis.Element,\n): element is HTMLQdsButtonElement =>\n  element.tagName.toLowerCase() === 'qds-button'\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/dropdown\n */\n@Component({\n  tag: 'qds-dropdown',\n  shadow: true,\n  styleUrl: 'dropdown.css',\n})\nexport class Dropdown implements ComponentInterface {\n  /**\n   * Options to pass to Floating UI's\n   * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n   *\n   * @see https://floating-ui.com/docs/autoupdate#options\n   */\n  @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n  /**\n   * Prevents the dropdown from being shown by user interaction. The dropdown\n   * can still be displayed by calling the `show()` method.\n   */\n  @Prop() public readonly disabled: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   *\n   * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n   * set to the value of the `noShift` property by default for interoperability\n   * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/flip#options\n   */\n  @Prop() public readonly flipOptions?: Partial<\n    DetectOverflowOptions & FlipOptions\n  >\n\n  /**\n   * Disable Floating UI's\n   * [`flip` middleware](https://floating-ui.com/docs/flip).\n   */\n  @Prop() public readonly noFlip: boolean = false\n\n  /**\n   * Disable Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   */\n  @Prop() public readonly noShift: boolean = false\n\n  /**\n   * Options to pass to Floating UI's\n   * [`offset` middleware](https://floating-ui.com/docs/offset).\n   *\n   * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n   * not supported.\n   *\n   * @see https://floating-ui.com/docs/offset#options\n   */\n  @Prop() public readonly offsetOptions?: OffsetOptions\n\n  /**\n   * Where to place the dropdown relative to the `target`.\n   *\n   * @see https://floating-ui.com/docs/tutorial#placements\n   */\n  @Prop() public readonly placement: Placement = 'bottom-start'\n\n  /**\n   * Options to pass to Floating UI's\n   * [`shift` middleware](https://floating-ui.com/docs/shift).\n   *\n   * @see https://floating-ui.com/docs/shift#options\n   */\n  @Prop() public readonly shiftOptions?: Partial<\n    DetectOverflowOptions & ShiftOptions\n  >\n\n  /**\n   * The CSS position strategy to use.\n   *\n   * @see https://floating-ui.com/docs/computeposition#strategy\n   */\n  @Prop() public readonly strategy?: Strategy\n\n  /**\n   * The trigger element that will trigger the dropdown. The target specified\n   * can be any of the following:\n   *\n   * - A CSS selector string\n   * - A reference to an [`Element`][] or [Virtual Element][]\n   * - A function returning a reference to an [`Element`][],\n   * [Virtual Element][], or a CSS selector string\n   *\n   * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n   * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n   */\n  @Prop() public readonly target!:\n    | ReferenceElement\n    | string\n    | (() => ReferenceElement | string)\n\n  /**\n   * Emitted when the user instructs the browser that they wish to dismiss the\n   * current open dropdown by pressing the `Esc` key.\n   *\n   * When a dropdown is dismissed with the `Esc` key, both the `qdsCancel` and\n   * `qdsClose` events are emitted.\n   */\n  @Event({ eventName: 'qdsCancel', bubbles: false })\n  private readonly cancelEmitter!: EventEmitter<void>\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n  private readonly closeEmitter!: EventEmitter<void>\n\n  @Element() private readonly host!: HTMLQdsDropdownElement\n\n  @State() private hostAriaLabelledBy?: string\n\n  @State() private hostDisplay?: string\n\n  @State() private hostPosition?: string\n\n  @State() private hostTransform?: string\n\n  #cleanup?: () => void\n\n  #middleware?: Middleware[]\n\n  #referenceElement?: ReferenceElement\n\n  #open = false\n\n  /**\n   * Update the dropdown's middleware and position.\n   */\n  @Method()\n  public async update(): Promise<void> {\n    await this.updateMiddleware()\n  }\n\n  @Listen('click', { target: 'document' })\n  protected handleMouseDown(event: MouseEvent): void {\n    if (!this.#open) return\n\n    const composedPath = event.composedPath()\n    const withinBounds =\n      composedPath.includes(this.host) ||\n      (this.#referenceElement instanceof globalThis.Element &&\n        composedPath.includes(this.#referenceElement))\n    if (!withinBounds) this.close()\n  }\n\n  @Watch('target')\n  protected async updateReferenceElement(): Promise<void> {\n    this.#disconnectReferenceElement()\n\n    this.#referenceElement = resolveTarget(this.target)\n\n    if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n    this.#referenceElement.setAttribute('aria-expanded', 'false')\n    this.#referenceElement.addEventListener('click', this.#onReferenceClick)\n    this.#referenceElement.addEventListener('focusout', this.#onFocusout)\n    this.#referenceElement.addEventListener('keydown', this.#onKeydown)\n\n    if (this.host.role === 'menu') {\n      this.#referenceElement.id ||= `qds-dropdown-trigger-${autoIncrementingId}`\n      this.hostAriaLabelledBy = this.#referenceElement.id\n    }\n    await this.updatePosition()\n  }\n\n  @Watch('flipOptions')\n  @Watch('noFlip')\n  @Watch('noShift')\n  @Watch('offsetOptions')\n  @Watch('shiftOptions')\n  protected async updateMiddleware(): Promise<void> {\n    this.#middleware = [\n      offset({\n        ...this.offsetOptions,\n        mainAxis: propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0,\n      }),\n      !this.noFlip &&\n        flip({\n          crossAxis: this.noShift,\n          ...this.flipOptions,\n        }),\n      !this.noShift &&\n        shift({\n          limiter: limitShift(),\n          ...this.shiftOptions,\n        }),\n    ].filter((middleware): middleware is Middleware => middleware !== false)\n    await this.updatePosition()\n  }\n\n  @Watch('placement')\n  @Watch('strategy')\n  protected async updatePosition(): Promise<void> {\n    if (!this.#referenceElement) return\n\n    const { x, y, strategy } = await computePosition(\n      this.#referenceElement,\n      this.host,\n      {\n        middleware: this.#middleware,\n        placement: this.placement,\n        strategy: this.strategy,\n      },\n    )\n    this.hostPosition = strategy\n    this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n  }\n\n  @Watch('autoUpdateOptions')\n  protected startAutoUpdate(): void {\n    if (!this.#referenceElement) return\n\n    if (this.#cleanup) this.#cleanup()\n    this.#cleanup = autoUpdate(\n      this.#referenceElement,\n      this.host,\n      () => {\n        ignorePromise(this.updatePosition())\n      },\n      this.autoUpdateOptions,\n    )\n  }\n\n  public async componentWillLoad(): Promise<void> {\n    this.hostDisplay = 'none'\n    this.host.role ??= 'menu'\n    this.host.id ||= `qds-dropdown-${autoIncrementingId}`\n    await this.updateReferenceElement()\n    autoIncrementingId += 1\n    await this.updateMiddleware()\n  }\n\n  public disconnectedCallback(): void {\n    this.#disconnectReferenceElement()\n  }\n\n  public render() {\n    return (\n      <Host\n        aria-labelledby={this.hostAriaLabelledBy}\n        onKeyDown={this.#onKeydown}\n        onFocusout={this.#onFocusout}\n        style={{\n          display: this.hostDisplay,\n          position: this.hostPosition,\n          transform: this.hostTransform,\n        }}\n      >\n        <slot />\n      </Host>\n    )\n  }\n\n  public show(): void {\n    if (this.#open) return\n\n    if (this.#referenceElement instanceof globalThis.Element) {\n      this.#referenceElement.setAttribute('aria-expanded', 'true')\n      this.#referenceElement.setAttribute('aria-controls', this.host.id)\n\n      if (\n        isQdsButton(this.#referenceElement) &&\n        this.#referenceElement.action === 'dropdown'\n      )\n        this.#referenceElement.action = 'dropdown-close'\n    }\n\n    this.#open = true\n    this.hostDisplay = undefined\n    this.startAutoUpdate()\n  }\n\n  public close(): void {\n    if (!this.#open) return\n\n    if (this.#referenceElement instanceof globalThis.Element) {\n      this.#referenceElement.setAttribute('aria-expanded', 'false')\n      this.#referenceElement.removeAttribute('aria-controls')\n\n      if (\n        isQdsButton(this.#referenceElement) &&\n        this.#referenceElement.action === 'dropdown-close'\n      )\n        this.#referenceElement.action = 'dropdown'\n    }\n\n    this.#open = false\n    this.hostDisplay = 'none'\n    if (this.#cleanup) this.#cleanup()\n\n    this.closeEmitter.emit()\n  }\n\n  readonly #onFocusout = (event: Event): void => {\n    if (!(event instanceof FocusEvent)) return\n    const { relatedTarget } = event\n\n    if (\n      relatedTarget instanceof globalThis.Element &&\n      !this.host.contains(relatedTarget) &&\n      this.#referenceElement !== relatedTarget\n    )\n      this.close()\n  }\n\n  readonly #onKeydown = (event: Event): void => {\n    if (\n      !(event instanceof KeyboardEvent) ||\n      event.key !== 'Escape' ||\n      (event.target !== this.#referenceElement &&\n        event.target instanceof globalThis.Element &&\n        event.target.closest('qds-dropdown') !== this.host)\n    )\n      return\n\n    const cancelEvent = this.cancelEmitter.emit()\n    if (cancelEvent.defaultPrevented) return\n\n    this.close()\n    if (\n      this.#referenceElement instanceof globalThis.HTMLElement ||\n      this.#referenceElement instanceof globalThis.SVGElement\n    )\n      this.#referenceElement.focus()\n  }\n\n  readonly #onReferenceClick = (): void => {\n    if (this.disabled) return\n\n    if (this.#open) this.close()\n    else this.show()\n  }\n\n  #disconnectReferenceElement(): void {\n    this.hostAriaLabelledBy = undefined\n\n    if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n    this.#referenceElement.removeEventListener('focusout', this.#onFocusout)\n    this.#referenceElement.removeEventListener('keydown', this.#onKeydown)\n    this.#referenceElement.removeAttribute('aria-expanded')\n    this.#referenceElement.removeAttribute('aria-controls')\n  }\n}\n"],"version":3}