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

package/dist/esm/qds-tooltip.entry.js

@@ -1,280 +1,353 @@
 /*!
- * SPDX-FileCopyrightText: © 2023 Schneider Electric
+ * SPDX-FileCopyrightText: © 2026 Schneider Electric
  * 
- * SPDX-License-Identifier: LGPL-2.1-only
+ * SPDX-License-Identifier: Apache-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-d7183092.js';
-import { o as offset, f as flip, s as shift, l as limitShift, b as arrow, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-c2f3e549.js';
-import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR, f as isTouchDevice } from './helpers-76b84f45.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Hg1Liloy.js';
+import { o as offset, f as flip, s as shift, b as arrow, c as computePosition, a as autoUpdate, l as limitShift } from './floating-ui.dom-Bv2vPjgL.js';
+import { j as ignorePromise, k as propertyToPx, i as invariant, r as resolveTarget, l as isTouchDevice } from './helpers-BgaJNF9u.js';
 
-const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n    0px +\n      0px\n  );height:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );top:100%}:host([data-side='bottom'])::before{top:calc(\n    -1 * (0px +\n          0px)\n  );top:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n    0px +\n      0px\n  );width:calc(\n    var(--qds-accessory-gap-floating, 0px) +\n      var(--qds-signature-triangle-pointer-size-height, 0px)\n  );left:100%}:host([data-side='right'])::before{left:calc(\n    -1 * (0px +\n          0px)\n  );left:calc(\n    -1 * (var(--qds-accessory-gap-floating, 0px) +\n          var(--qds-signature-triangle-pointer-size-height, 0px))\n  )}.arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.arrow-container[data-side='top']{top:100%}.arrow{fill:var(--qds-theme-accessory-background)}";
+const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border:none;border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);inset:unset;margin:0;overflow:initial;padding:0}:host:before{content:\"\";position:absolute}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side=bottom]):before,:host([data-side=top]):before{height:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px));top:100%;width:100%}:host([data-side=bottom]):before{top:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}:host([data-side=left]):before,:host([data-side=right]):before{left:100%;width:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))}:host([data-side=right]):before{left:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}.qds-arrow{height:var(--qds-signature-triangle-pointer-size-height);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow:before{background-color:var(--qds-theme-accessory-background);clip-path:polygon(0 0,100% 0,50% 100%);height:100%}.qds-arrow:after,.qds-arrow:before{content:\"\";position:absolute;width:100%}.qds-arrow:after{background-color:var(--qds-theme-accessory-border);bottom:calc(var(--qds-accessory-border-width)*-1);clip-path:polygon(0 10%,100% 10%,50% 100%);height:calc(100% + var(--qds-accessory-border-width));z-index:-1}.qds-arrow[data-side=bottom]{top:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1);transform:rotate(180deg)}.qds-arrow[data-side=left]{right:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(-90deg)}.qds-arrow[data-side=right]{left:calc((var(--qds-accessory-gap-floating) + var(--qds-signature-triangle-pointer-size-height))*-1 + var(--qds-accessory-effect-section-position-y));transform:rotate(90deg)}.qds-arrow[data-side=top]{bottom:calc((var(--qds-signature-triangle-pointer-size-height) - var(--qds-accessory-effect-section-position-y))*-1)}.qds-tooltip{align-items:inherit;border:var(--qds-accessory-border-width) solid var(--qds-theme-accessory-border);border-radius:var(--qds-accessory-border-radius);display:inherit;flex-direction:inherit;flex-wrap:inherit;gap:inherit;justify-content:inherit;max-width:var(--qds-accessory-max-width);padding:var(--qds-accessory-padding-top) var(--qds-accessory-padding-end) var(--qds-accessory-padding-bottom) var(--qds-accessory-padding-start)}";
 
+// 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 _Tooltip_instances, _Tooltip_arrow, _Tooltip_arrowPadding, _Tooltip_cleanup, _Tooltip_clickedTooltip, _Tooltip_isTouchDevice, _Tooltip_listeners, _Tooltip_mainAxisDistance, _Tooltip_middleware, _Tooltip_open, _Tooltip_opened, _Tooltip_referenceElement, _Tooltip_arrowRef, _Tooltip_boundTooltipPointerDown, _Tooltip_handleFocus, _Tooltip_boundFocus, _Tooltip_handleKeyDown, _Tooltip_boundKeyDown, _Tooltip_handlePointerenter, _Tooltip_boundPointerenter, _Tooltip_handlePointerleave, _Tooltip_boundPointerleave, _Tooltip_handleFocusOut, _Tooltip_boundFocusout, _Tooltip_handlePointerdown, _Tooltip_boundPointerdown, _Tooltip_handleReferenceClick, _Tooltip_boundReferenceClick, _Tooltip_on, _Tooltip_removeEventListeners, _Tooltip_setAriaExpanded;
 let autoIncrementingId = 1;
 const Tooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.closeEmitter = createEvent(this, "qdsClose", 2);
-    this.clickedTooltip = false;
-    this.isTouchDevice = false;
-    this.arrowContainerRef = (svg) => {
-      this.arrowContainerElement = svg;
-    };
-    this.boundTooltipMouseDown = () => {
-      this.clickedTooltip = true;
-    };
-    this.boundFocus = () => {
-      ignorePromise(this.handleFocus());
-    };
-    this.boundMouseEnter = () => {
-      ignorePromise(this.handleMouseEnter());
-    };
-    this.boundMouseLeave = (event) => {
-      ignorePromise(this.handleMouseLeave(event));
-    };
-    this.boundFocusout = (event) => {
-      ignorePromise(this.handleFocusOut(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 = 'top';
-    this.shiftOptions = undefined;
-    this.strategy = undefined;
-    this.target = undefined;
-    this.hostPosition = undefined;
-    this.hostTransform = undefined;
-    this.open = false;
-    this.middleware = undefined;
-    this.aDisplay = undefined;
-    this.side = 'top';
-    this.aShape = '';
-    this.aViewbox = '';
-    this.aHeight = 0;
-    this.aWidth = 0;
-    this.aGap = 0;
-    this.aX = '';
-    this.aY = '';
-  }
-  /**
-   * Show the tooltip.
-   */
-  async show() {
-    if (this.open)
-      return;
-    if (this.referenceElement instanceof globalThis.Element)
-      this.referenceElement.addEventListener('focusout', this.boundFocusout);
-    this.open = true;
-    this.element.setAttribute('aria-hidden', 'false');
-    this.startAutoUpdate();
-  }
-  /**
-   * Close the tooltip.
-   */
-  async close() {
-    if (!this.open)
-      return;
-    this.closeEmitter.emit();
-    if (this.referenceElement instanceof globalThis.Element)
-      this.referenceElement.removeEventListener('focusout', this.boundFocusout);
-    this.open = false;
-    this.clickedTooltip = false;
-    this.element.setAttribute('aria-hidden', 'true');
-    if (this.cleanup)
-      this.cleanup();
-  }
-  /**
-   * Update the tooltip's arrow.
-   *
-   * This method should typically be called when the Quartz platform was
-   * changed.
-   */
-  async updateArrow() {
-    this.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0;
-    this.aHeight =
-      propertyToPx(this.element, `--qds-signature-triangle-pointer-size-height`) ?? 0;
-    this.aWidth =
-      propertyToPx(this.element, `--qds-signature-triangle-pointer-size-width`) ?? 0;
-    this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`;
-    const aTipRadius = propertyToPx(this.element, `--qds-signature-triangle-pointer-tip-radius`) ?? 0;
-    const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1);
-    const svgY = ((this.aHeight / 2) * aTipRadius) / 4;
-    this.aShape =
-      'M0,0' +
-        ` H${this.aWidth}` +
-        ` L${this.aWidth - svgX},${this.aHeight - svgY}` +
-        ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +
-        ' Z';
-  }
-  async handleMouseDown(event) {
-    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 updateMiddleware() {
-    invariant(this.arrowContainerElement);
-    this.middleware = [
-      offset({
-        ...this.offsetOptions,
-        mainAxis: this.aGap + this.aHeight,
-      }),
-      !this.noFlip &&
-        flip({
-          crossAxis: this.noShift,
-          ...this.flipOptions,
-        }),
-      !this.noShift &&
-        shift({
-          limiter: limitShift(),
-          ...this.shiftOptions,
-        }),
-      arrow({
-        element: this.arrowContainerElement,
-      }),
-    ].filter((middleware) => middleware !== false);
-  }
-  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;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeEmitter = 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;
+        }
+        _Tooltip_instances.add(this);
+        /**
+         * Prevents the tooltip from being shown by user interaction. The tooltip 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 tooltip relative to the `target`.
+         *
+         * @see https://floating-ui.com/docs/tutorial#placements
+         */
+        this.placement = 'top';
+        /**
+         * Determines the events that cause the tooltip to show. Multiple event names
+         * are separated by spaces.
+         */
+        this.trigger = 'pointerenter focus';
+        _Tooltip_arrow.set(this, void 0);
+        _Tooltip_arrowPadding.set(this, 0);
+        _Tooltip_cleanup.set(this, void 0);
+        _Tooltip_clickedTooltip.set(this, false);
+        _Tooltip_isTouchDevice.set(this, false);
+        _Tooltip_listeners.set(this, []);
+        _Tooltip_mainAxisDistance.set(this, 0);
+        _Tooltip_middleware.set(this, void 0);
+        _Tooltip_open.set(this, false
+        /**
+         * Ensure that `updateArrow()` is called only once internally as this is
+         * expensive.
+         */
+        );
+        /**
+         * Ensure that `updateArrow()` is called only once internally as this is
+         * expensive.
+         */
+        _Tooltip_opened.set(this, false);
+        _Tooltip_referenceElement.set(this, void 0);
+        _Tooltip_arrowRef.set(this, (div) => {
+            __classPrivateFieldSet(this, _Tooltip_arrow, div, "f");
+        });
+        _Tooltip_boundTooltipPointerDown.set(this, () => {
+            __classPrivateFieldSet(this, _Tooltip_clickedTooltip, true, "f");
+        });
+        _Tooltip_boundFocus.set(this, () => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handleFocus).call(this));
+        });
+        _Tooltip_boundKeyDown.set(this, (event) => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handleKeyDown).call(this, event));
+        });
+        _Tooltip_boundPointerenter.set(this, () => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handlePointerenter).call(this));
+        });
+        _Tooltip_boundPointerleave.set(this, (event) => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handlePointerleave).call(this, event));
+        });
+        _Tooltip_boundFocusout.set(this, (event) => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handleFocusOut).call(this, event));
+        });
+        _Tooltip_boundPointerdown.set(this, (event) => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handlePointerdown).call(this, event));
+        });
+        _Tooltip_boundReferenceClick.set(this, () => {
+            ignorePromise(__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_handleReferenceClick).call(this));
+        });
     }
-    else
-      this.referenceElement = resolvedTarget;
-    if (!(this.referenceElement instanceof globalThis.Element))
-      return;
-    if (this.isTouchDevice)
-      this.referenceElement.addEventListener('click', this.boundReferenceClick);
-    this.referenceElement.addEventListener('focus', this.boundFocus);
-    this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter);
-    this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave);
-    (_a = this.element).id || (_a.id = `qds-tooltip-${autoIncrementingId}`);
-    this.referenceElement.setAttribute('aria-describedby', this.element.id);
-  }
-  async updatePosition() {
-    invariant(this.referenceElement);
-    const { x, y, middlewareData, placement, 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)`;
-    if (!middlewareData.arrow)
-      return;
-    invariant(this.arrowContainerElement);
-    if (middlewareData.arrow.centerOffset !== 0) {
-      this.aDisplay = 'none';
-      return;
+    /**
+     * Show the tooltip.
+     */
+    async show() {
+        if (__classPrivateFieldGet(this, _Tooltip_open, "f"))
+            return;
+        if (!__classPrivateFieldGet(this, _Tooltip_opened, "f")) {
+            await this.updateArrow();
+            __classPrivateFieldSet(this, _Tooltip_opened, true, "f");
+        }
+        this.startAutoUpdate();
+        __classPrivateFieldSet(this, _Tooltip_open, true, "f");
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_setAriaExpanded).call(this);
+    }
+    /**
+     * Close the tooltip.
+     */
+    async close() {
+        if (!__classPrivateFieldGet(this, _Tooltip_open, "f"))
+            return;
+        this.closeEmitter.emit();
+        if (__classPrivateFieldGet(this, _Tooltip_cleanup, "f"))
+            __classPrivateFieldGet(this, _Tooltip_cleanup, "f").call(this);
+        __classPrivateFieldSet(this, _Tooltip_open, false, "f");
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_setAriaExpanded).call(this);
+        __classPrivateFieldSet(this, _Tooltip_clickedTooltip, false, "f");
+    }
+    /**
+     * Update the tooltip's arrow.
+     *
+     * This method should typically be called when the Quartz platform was
+     * changed.
+     */
+    async updateArrow() {
+        const gap = propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0;
+        const height = propertyToPx(this.host, '--qds-signature-triangle-pointer-size-height') ??
+            0;
+        const padding = propertyToPx(this.host, '--qds-accessory-border-radius') ?? 0;
+        __classPrivateFieldSet(this, _Tooltip_mainAxisDistance, gap + height, "f");
+        __classPrivateFieldSet(this, _Tooltip_arrowPadding, padding, "f");
+        await this.updateMiddleware();
+    }
+    async updateMiddleware() {
+        invariant(__classPrivateFieldGet(this, _Tooltip_arrow, "f"));
+        __classPrivateFieldSet(this, _Tooltip_middleware, [
+            offset({
+                ...this.offsetOptions,
+                mainAxis: __classPrivateFieldGet(this, _Tooltip_mainAxisDistance, "f"),
+            }),
+            !this.noFlip &&
+                flip({
+                    crossAxis: this.noShift,
+                    ...this.flipOptions,
+                }),
+            !this.noShift &&
+                shift({
+                    limiter: limitShift(),
+                    ...this.shiftOptions,
+                }),
+            arrow({
+                element: __classPrivateFieldGet(this, _Tooltip_arrow, "f"),
+                padding: __classPrivateFieldGet(this, _Tooltip_arrowPadding, "f"),
+            }),
+        ], "f");
+    }
+    async updateReferenceElement() {
+        var _a;
+        this.disconnectedCallback();
+        __classPrivateFieldSet(this, _Tooltip_referenceElement, resolveTarget(this.target), "f");
+        if (!(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element))
+            return;
+        this.updateEventListeners();
+        (_a = this.host).id || (_a.id = `qds-tooltip-${autoIncrementingId}`);
+        __classPrivateFieldGet(this, _Tooltip_referenceElement, "f").setAttribute('aria-describedby', this.host.id);
+        if (this.host.role === 'dialog')
+            __classPrivateFieldGet(this, _Tooltip_referenceElement, "f").ariaHasPopup = 'dialog';
+    }
+    updateEventListeners() {
+        if (!(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element))
+            return;
+        const triggers = Array.isArray(this.trigger)
+            ? this.trigger
+            : (this.trigger?.split(' ') ??
+                []);
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListeners).call(this);
+        if (__classPrivateFieldGet(this, _Tooltip_isTouchDevice, "f"))
+            __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'click', __classPrivateFieldGet(this, _Tooltip_boundReferenceClick, "f"));
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, document.documentElement, 'pointerdown', __classPrivateFieldGet(this, _Tooltip_boundPointerdown, "f"));
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'keydown', __classPrivateFieldGet(this, _Tooltip_boundKeyDown, "f"));
+        for (const trigger of triggers) {
+            switch (trigger) {
+                case 'click': {
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'click', __classPrivateFieldGet(this, _Tooltip_boundReferenceClick, "f"));
+                    break;
+                }
+                case 'focus':
+                case 'focusin': {
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), trigger, __classPrivateFieldGet(this, _Tooltip_boundFocus, "f"));
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'focusout', __classPrivateFieldGet(this, _Tooltip_boundFocusout, "f"));
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, this.host, 'focusout', __classPrivateFieldGet(this, _Tooltip_boundFocusout, "f"));
+                    break;
+                }
+                case 'pointerenter': {
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'pointerenter', __classPrivateFieldGet(this, _Tooltip_boundPointerenter, "f"));
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, __classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), 'pointerleave', __classPrivateFieldGet(this, _Tooltip_boundPointerleave, "f"));
+                    __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_on).call(this, this.host, 'pointerleave', __classPrivateFieldGet(this, _Tooltip_boundPointerleave, "f"));
+                    break;
+                }
+            }
+        }
     }
-    this.aDisplay = undefined;
-    const [side] = placement.split('-');
-    this.side = side;
-    const { x: aX, y: aY } = middlewareData.arrow;
-    this.aX = aX === undefined ? '' : `${aX}px`;
-    this.aY = aY === undefined ? '' : `${aY}px`;
-  }
-  startAutoUpdate() {
-    invariant(this.referenceElement);
-    if (this.cleanup)
-      this.cleanup();
-    this.cleanup = autoUpdate(this.referenceElement, this.element, () => {
-      ignorePromise(this.updatePosition());
-    }, this.autoUpdateOptions);
-  }
-  async componentWillLoad() {
-    this.isTouchDevice = isTouchDevice();
-    this.element.setAttribute('aria-hidden', 'true');
-    await this.updateReferenceElement();
-    autoIncrementingId += 1;
-  }
-  async componentDidLoad() {
-    await this.updateArrow();
-  }
-  disconnectedCallback() {
-    this.disconnectReferenceElement();
-  }
-  render() {
-    return (h(Host, { "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
-        position: this.hostPosition,
-        transform: this.hostTransform,
-      } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
-        left: this.aX,
-        top: this.aY,
-        display: this.aDisplay,
-      } }, h("path", { class: "arrow", d: this.aShape }))));
-  }
-  async handleFocus() {
+    async updatePosition() {
+        invariant(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"));
+        const { x, y, middlewareData, placement, strategy } = await computePosition(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), this.host, {
+            middleware: __classPrivateFieldGet(this, _Tooltip_middleware, "f"),
+            placement: this.placement,
+            strategy: this.strategy,
+        });
+        const [side] = placement.split('-');
+        this.host.dataset.side = side;
+        Object.assign(this.host.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+        if (middlewareData.arrow === undefined)
+            return;
+        invariant(__classPrivateFieldGet(this, _Tooltip_arrow, "f"));
+        const { x: aX, y: aY, centerOffset } = middlewareData.arrow;
+        __classPrivateFieldGet(this, _Tooltip_arrow, "f").dataset.side = side;
+        Object.assign(__classPrivateFieldGet(this, _Tooltip_arrow, "f").style, {
+            display: centerOffset === 0 ? '' : 'none',
+            left: aX === undefined ? '' : `${aX}px`,
+            top: aY === undefined ? '' : `${aY}px`,
+        });
+    }
+    startAutoUpdate() {
+        invariant(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"));
+        if (__classPrivateFieldGet(this, _Tooltip_cleanup, "f"))
+            __classPrivateFieldGet(this, _Tooltip_cleanup, "f").call(this);
+        __classPrivateFieldSet(this, _Tooltip_cleanup, autoUpdate(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f"), this.host, () => {
+            ignorePromise(this.updatePosition());
+        }, this.autoUpdateOptions), "f");
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _Tooltip_isTouchDevice, isTouchDevice(), "f");
+        this.host.hidden = true;
+        this.host.popover = 'manual';
+        this.internals.role = 'tooltip';
+        await this.updateReferenceElement();
+        autoIncrementingId += 1;
+    }
+    disconnectedCallback() {
+        if (!(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element))
+            return;
+        __classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListeners).call(this);
+        __classPrivateFieldGet(this, _Tooltip_referenceElement, "f").removeAttribute('aria-describedby');
+    }
+    render() {
+        return (h(Host, { key: 'd988515f748a96c82aa9d06e5147e5d0bca5b15a', onKeyDown: __classPrivateFieldGet(this, _Tooltip_boundKeyDown, "f"), onPointerDown: __classPrivateFieldGet(this, _Tooltip_boundTooltipPointerDown, "f") }, h("div", { key: '8a4b87f814af050b52659eb14f04f377a704e19d', class: "qds-tooltip" }, h("slot", { key: 'e4e89b12134a6ed44eb8ae0e6f76d9843341cabe' })), h("div", { key: '3bff9e45b53659775dcdc5ef89d2132951cac5a9', class: "qds-arrow", ref: __classPrivateFieldGet(this, _Tooltip_arrowRef, "f") })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "flipOptions": ["updateMiddleware"],
+        "noFlip": ["updateMiddleware"],
+        "noShift": ["updateMiddleware"],
+        "offsetOptions": ["updateMiddleware"],
+        "shiftOptions": ["updateMiddleware"],
+        "target": ["updateReferenceElement"],
+        "trigger": ["updateEventListeners"],
+        "middleware": ["updatePosition"],
+        "placement": ["updatePosition"],
+        "strategy": ["updatePosition"],
+        "autoUpdateOptions": ["startAutoUpdate"]
+    }; }
+};
+_Tooltip_arrow = new WeakMap(), _Tooltip_arrowPadding = new WeakMap(), _Tooltip_cleanup = new WeakMap(), _Tooltip_clickedTooltip = new WeakMap(), _Tooltip_isTouchDevice = new WeakMap(), _Tooltip_listeners = new WeakMap(), _Tooltip_mainAxisDistance = new WeakMap(), _Tooltip_middleware = new WeakMap(), _Tooltip_open = new WeakMap(), _Tooltip_opened = new WeakMap(), _Tooltip_referenceElement = new WeakMap(), _Tooltip_arrowRef = new WeakMap(), _Tooltip_boundTooltipPointerDown = new WeakMap(), _Tooltip_boundFocus = new WeakMap(), _Tooltip_boundKeyDown = new WeakMap(), _Tooltip_boundPointerenter = new WeakMap(), _Tooltip_boundPointerleave = new WeakMap(), _Tooltip_boundFocusout = new WeakMap(), _Tooltip_boundPointerdown = new WeakMap(), _Tooltip_boundReferenceClick = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_handleFocus = async function _Tooltip_handleFocus() {
     if (!this.disabled)
-      await this.show();
-  }
-  async handleMouseEnter() {
+        await this.show();
+}, _Tooltip_handleKeyDown = async function _Tooltip_handleKeyDown(event) {
+    if (event instanceof KeyboardEvent && event.key === 'Escape')
+        await this.close();
+}, _Tooltip_handlePointerenter = async function _Tooltip_handlePointerenter() {
     if (!this.disabled)
-      await this.show();
-  }
-  async handleMouseLeave(event) {
-    if (!this.clickedTooltip &&
-      document.activeElement !== this.referenceElement &&
-      document.activeElement?.closest('qds-tooltip') !== this.element &&
-      event instanceof MouseEvent &&
-      event.relatedTarget !== this.referenceElement &&
-      event.relatedTarget !== this.element)
-      await this.close();
-  }
-  async handleFocusOut(event) {
+        await this.show();
+}, _Tooltip_handlePointerleave = async function _Tooltip_handlePointerleave(event) {
+    if (!__classPrivateFieldGet(this, _Tooltip_clickedTooltip, "f") &&
+        document.activeElement !== __classPrivateFieldGet(this, _Tooltip_referenceElement, "f") &&
+        document.activeElement?.closest('qds-tooltip') !== this.host &&
+        event instanceof PointerEvent &&
+        event.relatedTarget !== __classPrivateFieldGet(this, _Tooltip_referenceElement, "f") &&
+        event.relatedTarget !== this.host)
+        await this.close();
+}, _Tooltip_handleFocusOut = async function _Tooltip_handleFocusOut(event) {
     if (!(event instanceof FocusEvent))
-      return;
+        return;
     const { relatedTarget } = event;
     if (relatedTarget instanceof globalThis.Element &&
-      !this.element.contains(relatedTarget) &&
-      this.referenceElement !== relatedTarget)
-      await this.close();
-  }
-  async handleReferenceClick() {
+        !this.host.contains(relatedTarget) &&
+        __classPrivateFieldGet(this, _Tooltip_referenceElement, "f") !== relatedTarget)
+        await this.close();
+}, _Tooltip_handlePointerdown = async function _Tooltip_handlePointerdown(event) {
+    const composedPath = event.composedPath();
+    const withinBounds = composedPath.includes(this.host) ||
+        (__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element &&
+            composedPath.includes(__classPrivateFieldGet(this, _Tooltip_referenceElement, "f")));
+    if (!withinBounds)
+        await this.close();
+}, _Tooltip_handleReferenceClick = async function _Tooltip_handleReferenceClick() {
     if (!this.disabled)
-      await (this.open ? this.close() : this.show());
-  }
-  disconnectReferenceElement() {
-    if (!(this.referenceElement instanceof globalThis.Element))
-      return;
-    if (this.isTouchDevice)
-      this.referenceElement.removeEventListener('click', this.boundReferenceClick);
-    this.referenceElement.removeEventListener('focus', this.boundFocus);
-    this.referenceElement.removeEventListener('focusout', this.boundFocusout);
-    this.referenceElement.removeEventListener('mouseenter', this.boundMouseEnter);
-    this.referenceElement.removeEventListener('mouseleave', this.boundMouseLeave);
-    this.referenceElement.removeAttribute('aria-describedby');
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "aGap": ["updateMiddleware"],
-    "aHeight": ["updateMiddleware"],
-    "flipOptions": ["updateMiddleware"],
-    "noFlip": ["updateMiddleware"],
-    "noShift": ["updateMiddleware"],
-    "offsetOptions": ["updateMiddleware"],
-    "shiftOptions": ["updateMiddleware"],
-    "target": ["updateReferenceElement"],
-    "middleware": ["updatePosition"],
-    "placement": ["updatePosition"],
-    "strategy": ["updatePosition"],
-    "autoUpdateOptions": ["startAutoUpdate"]
-  }; }
+        await (__classPrivateFieldGet(this, _Tooltip_open, "f") ? this.close() : this.show());
+}, _Tooltip_on = function _Tooltip_on(element, event, listener) {
+    const hasListener = __classPrivateFieldGet(this, _Tooltip_listeners, "f").some((value) => value.element === element && value.event === event);
+    if (hasListener)
+        return;
+    element.addEventListener(event, listener);
+    __classPrivateFieldGet(this, _Tooltip_listeners, "f").push({ element, event, listener });
+}, _Tooltip_removeEventListeners = function _Tooltip_removeEventListeners() {
+    for (const { element, event, listener } of __classPrivateFieldGet(this, _Tooltip_listeners, "f"))
+        element.removeEventListener(event, listener);
+    __classPrivateFieldSet(this, _Tooltip_listeners, [], "f");
+}, _Tooltip_setAriaExpanded = function _Tooltip_setAriaExpanded() {
+    this.host.hidden = !__classPrivateFieldGet(this, _Tooltip_open, "f");
+    if (__classPrivateFieldGet(this, _Tooltip_open, "f"))
+        this.host.showPopover();
+    else
+        this.host.hidePopover();
+    if (__classPrivateFieldGet(this, _Tooltip_referenceElement, "f") instanceof globalThis.Element &&
+        this.host.role === 'dialog')
+        __classPrivateFieldGet(this, _Tooltip_referenceElement, "f").ariaExpanded = String(__classPrivateFieldGet(this, _Tooltip_open, "f"));
 };
 Tooltip.style = tooltipCss;
 
 export { Tooltip as qds_tooltip };
-
-//# sourceMappingURL=qds-tooltip.entry.js.map
+//# sourceMappingURL=qds-tooltip.entry.js.map