@justeattakeaway/pie-tooltip 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,19 +1,19 @@
-import { LitElement as C, unsafeCSS as T, nothing as f } from "lit";
-import { property as v, queryAssignedElements as E, query as P, state as $ } from "lit/decorators.js";
-import { classMap as k } from "lit/directives/class-map.js";
-import { ifDefined as A } from "lit/directives/if-defined.js";
-import { unsafeStatic as B, html as y } from "lit/static-html.js";
+import { LitElement as $, unsafeCSS as E, nothing as b } from "lit";
+import { property as g, queryAssignedElements as L, query as A, state as x } from "lit/decorators.js";
+import { classMap as O } from "lit/directives/class-map.js";
+import { ifDefined as R } from "lit/directives/if-defined.js";
+import { unsafeStatic as P, html as y } from "lit/static-html.js";
 import { validPropertyValues as m, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
-const b = class b extends C {
+const w = class w extends $ {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", b.v);
+    this.getAttribute("v") || this.setAttribute("v", w.v);
   }
 };
-b.v = "0.2.0";
-let u = b;
-const F = [
+w.v = "0.3.0";
+let k = w;
+const M = [
   "top",
   "top-start",
   "top-end",
@@ -26,7 +26,7 @@ const F = [
   "right",
   "right-start",
   "right-end"
-], M = ["default", "fit-to-content", "fill-container"], D = ["default", "inverse"], L = ["default", "icon"], R = ["h2", "h3", "h4", "h5", "h6"], W = ["tooltip", "dialog"], p = "pie-tooltip", a = "c-tooltip", j = `${p}-close`, d = {
+], D = ["default", "fit-to-content", "fill-container"], B = ["default", "inverse"], I = ["default", "icon"], V = ["h2", "h3", "h4", "h5", "h6"], et = ["hover", "focus", "click"], rt = ["tooltip", "dialog"], d = "pie-tooltip", c = "c-tooltip", q = `${d}-open`, F = `${d}-close`, h = {
   isOpen: !1,
   position: "top",
   size: "default",
@@ -34,13 +34,13 @@ const F = [
   type: "default",
   isDismissible: !1,
   headingLevel: "h2"
-}, I = "*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top,.c-tooltip-layer--bottom{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left,.c-tooltip-layer--right{inset-block-start:0;block-size:100%}.c-tooltip-layer--top{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom{--tooltip-motion-translate-y: -4px}.c-tooltip--left{--tooltip-motion-translate-x: 4px}.c-tooltip--right{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);padding-inline-end:calc(var(--tooltip-padding-inline) + var(--tooltip-close-size))}.c-tooltip.is-dismissible:not(.has-heading){display:flex;flex-direction:column;justify-content:center}.c-tooltip--top{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-a)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-body{min-block-size:var(--tooltip-close-size)}.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body{display:grid;align-content:center}.c-tooltip-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}";
-var V = Object.defineProperty, N = Object.getOwnPropertyDescriptor, n = (t, o, i, r) => {
-  for (var e = r > 1 ? void 0 : r ? N(o, i) : o, c = t.length - 1, s; c >= 0; c--)
-    (s = t[c]) && (e = (r ? s(o, i, e) : s(e)) || e);
-  return r && e && V(o, i, e), e;
+}, H = '*,*:after,*:before{box-sizing:inherit}:host{--tooltip-anchor-top: 0;--tooltip-anchor-left: 0;--tooltip-anchor-width: 0;--tooltip-anchor-height: 0;--tooltip-container-inline-size: 0;--tooltip-offset: var(--dt-spacing-a);--tooltip-arrow-size: 8px;--tooltip-layer-offset: calc(var(--tooltip-offset) + var(--tooltip-arrow-size));position:absolute;top:0;left:0;z-index:var(--dt-z-index-tooltip);display:block;inline-size:0;block-size:0;pointer-events:none}.c-tooltip-origin{position:absolute;top:0;left:0;inline-size:0;block-size:0}.c-tooltip-anchor{position:absolute;top:var(--tooltip-anchor-top);left:var(--tooltip-anchor-left);inline-size:var(--tooltip-anchor-width);block-size:var(--tooltip-anchor-height)}.c-tooltip-layer{position:absolute;display:grid;grid-template-columns:100%;grid-template-rows:100%;visibility:hidden;transition:visibility 0s linear .15s}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible{visibility:visible;transition-delay:0s}.c-tooltip-layer--type-icon{--tooltip-layer-offset: var(--tooltip-offset)}.c-tooltip-layer--top,.c-tooltip-layer--bottom{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left,.c-tooltip-layer--right{inset-block-start:0;block-size:100%}.c-tooltip-layer--top{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-start,.c-tooltip-layer--bottom-start{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-start,.c-tooltip-layer--right-start{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-start{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-start{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-start{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-start{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top-end,.c-tooltip-layer--bottom-end{inset-inline-start:0;inline-size:100%}.c-tooltip-layer--left-end,.c-tooltip-layer--right-end{inset-block-start:0;block-size:100%}.c-tooltip-layer--top-end{inset-block-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--bottom-end{inset-block-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--left-end{inset-inline-end:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--right-end{inset-inline-start:calc(100% + var(--tooltip-layer-offset))}.c-tooltip-layer--top{place-items:center}.c-tooltip-layer--top-start{place-items:start}.c-tooltip-layer--top-end{place-items:end}.c-tooltip-layer--bottom{place-items:center}.c-tooltip-layer--bottom-start{place-items:start}.c-tooltip-layer--bottom-end{place-items:end}.c-tooltip-layer--left{place-items:center}.c-tooltip-layer--left-start{place-items:start}.c-tooltip-layer--left-end{place-items:end}.c-tooltip-layer--right{place-items:center}.c-tooltip-layer--right-start{place-items:start}.c-tooltip-layer--right-end{place-items:end}.c-tooltip{--tooltip-inline-size: 280px;--tooltip-max-inline-size: calc(100vw - var(--dt-spacing-d) * 2);--tooltip-background-color: var(--dt-color-container-inverse);--tooltip-content-color: var(--dt-color-content-inverse);--tooltip-border-radius: var(--dt-radius-rounded-b);--tooltip-padding-block: var(--dt-spacing-b);--tooltip-padding-inline: var(--dt-spacing-c);--tooltip-close-size: 32px;--tooltip-motion-duration: .15s;--tooltip-motion-easing: cubic-bezier(.45, 0, .55, 1);--tooltip-motion-translate-x: 0;--tooltip-motion-translate-y: 0;--tooltip-arrow-inset: calc(var(--tooltip-border-radius) + var(--tooltip-arrow-size));--tooltip-arrow-cross-inset: calc(var(--tooltip-arrow-cross-position, 50%) - var(--tooltip-arrow-size));--tooltip-arrow-main-inset-far: calc(100% - 2px) ;--tooltip-arrow-main-inset-near: calc(var(--tooltip-arrow-size) * -1);font-family:var(--dt-font-body-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);position:relative;inline-size:var(--tooltip-width, var(--tooltip-inline-size));max-inline-size:var(--tooltip-max-inline-size);padding-block-start:var(--tooltip-padding-block);padding-block-end:var(--tooltip-padding-block);padding-inline-start:var(--tooltip-padding-inline);padding-inline-end:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-background-color);color:var(--tooltip-content-color);pointer-events:auto;opacity:0;transform:translate(var(--tooltip-motion-translate-x),var(--tooltip-motion-translate-y));transition:opacity var(--tooltip-motion-duration) var(--tooltip-motion-easing),transform var(--tooltip-motion-duration) var(--tooltip-motion-easing)}.c-tooltip-layer.is-open.is-positioned.is-anchorVisible .c-tooltip{--tooltip-motion-duration: .2s;opacity:1;transform:translate(0)}.c-tooltip--top{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom{--tooltip-motion-translate-y: -4px}.c-tooltip--left{--tooltip-motion-translate-x: 4px}.c-tooltip--right{--tooltip-motion-translate-x: -4px}.c-tooltip--top-start{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-start{--tooltip-motion-translate-y: -4px}.c-tooltip--left-start{--tooltip-motion-translate-x: 4px}.c-tooltip--right-start{--tooltip-motion-translate-x: -4px}.c-tooltip--top-end{--tooltip-motion-translate-y: 4px}.c-tooltip--bottom-end{--tooltip-motion-translate-y: -4px}.c-tooltip--left-end{--tooltip-motion-translate-x: 4px}.c-tooltip--right-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--left{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-start{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-start{--tooltip-motion-translate-x: 4px}:host(:dir(rtl)) .c-tooltip--left-end{--tooltip-motion-translate-x: -4px}:host(:dir(rtl)) .c-tooltip--right-end{--tooltip-motion-translate-x: 4px}@media(prefers-reduced-motion:reduce){.c-tooltip-layer,.c-tooltip{transition:none}}.c-tooltip--inverse{--tooltip-background-color: var(--dt-color-container-default);--tooltip-content-color: var(--dt-color-content-default)}.c-tooltip--size-fit-to-content{--tooltip-inline-size: max-content}.c-tooltip--size-fill-container{--tooltip-inline-size: var(--tooltip-container-inline-size);--tooltip-max-inline-size: none}.c-tooltip--type-icon{--tooltip-border-radius: var(--dt-radius-rounded-e);--tooltip-padding-block: var(--dt-spacing-a);--tooltip-padding-inline: var(--dt-spacing-c);inline-size:max-content}.c-tooltip.is-dismissible{min-block-size:calc(var(--tooltip-close-size) + var(--dt-spacing-b) * 2);padding-inline-end:calc(var(--tooltip-padding-inline) + var(--tooltip-close-size))}.c-tooltip.is-dismissible:not(.has-heading){display:flex;flex-direction:column;justify-content:center}.c-tooltip--top{--tooltip-arrow-cross-position: 50%}.c-tooltip--top-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--top-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--bottom{--tooltip-arrow-cross-position: 50%}.c-tooltip--bottom-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--bottom-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--left{--tooltip-arrow-cross-position: 50%}.c-tooltip--left-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--left-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip--right{--tooltip-arrow-cross-position: 50%}.c-tooltip--right-start{--tooltip-arrow-cross-position: var(--tooltip-arrow-inset)}.c-tooltip--right-end{--tooltip-arrow-cross-position: calc(100% - var(--tooltip-arrow-inset))}.c-tooltip-arrow{position:absolute;background-color:var(--tooltip-background-color)}.c-tooltip--top .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-start .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}.c-tooltip--top-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(0% 0%,100% 0%,100% 2px,50% 100%,0% 2px);inset-block-start:var(--tooltip-arrow-main-inset-far);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--bottom-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) * 2);block-size:calc(var(--tooltip-arrow-size) + 2px);clip-path:polygon(50% 0%,100% var(--tooltip-arrow-size),100% 100%,0% 100%,0% var(--tooltip-arrow-size));inset-block-start:var(--tooltip-arrow-main-inset-near);inset-inline-start:var(--tooltip-arrow-cross-inset)}.c-tooltip--left-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 0%,2px 0%,100% 50%,2px 100%,0% 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-far)}.c-tooltip--right-end .c-tooltip-arrow{inline-size:calc(var(--tooltip-arrow-size) + 2px);block-size:calc(var(--tooltip-arrow-size) * 2);clip-path:polygon(0% 50%,var(--tooltip-arrow-size) 0%,100% 0%,100% 100%,var(--tooltip-arrow-size) 100%);inset-block-start:var(--tooltip-arrow-cross-inset);inset-inline-start:var(--tooltip-arrow-main-inset-near)}:host(:dir(rtl)) .c-tooltip--left .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-start .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-start .c-tooltip-arrow{transform:scaleX(-1)}:host(:dir(rtl)) .c-tooltip--left-end .c-tooltip-arrow,:host(:dir(rtl)) .c-tooltip--right-end .c-tooltip-arrow{transform:scaleX(-1)}.c-tooltip-heading{font-family:var(--dt-font-body-strong-s-family),var(--dt-font-family-secondary),sans-serif;font-weight:var(--dt-font-body-strong-s-weight);font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);margin-block-start:0;margin-block-end:0}.c-tooltip-content{overflow-wrap:break-word}.c-tooltip.has-action .c-tooltip-action{display:flex;justify-content:flex-end;margin-block-start:var(--dt-spacing-a)}.c-tooltip.is-dismissible.has-action .c-tooltip-action{margin-inline-end:calc(var(--tooltip-close-size) * -1)}.c-tooltip.is-dismissible.has-action .c-tooltip-body{min-block-size:var(--tooltip-close-size)}.c-tooltip.is-dismissible.has-action:not(.has-heading) .c-tooltip-body{display:grid;align-content:center}.c-tooltip-close{position:absolute;inset-block-start:var(--dt-spacing-b);inset-inline-end:var(--dt-spacing-b)}.c-tooltip--top:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-start:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-start:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-start:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-start:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--top-end:before{content:"";position:absolute;inset-block-start:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--bottom-end:before{content:"";position:absolute;inset-block-end:100%;block-size:var(--tooltip-layer-offset);inset-inline-start:0;inline-size:100%}.c-tooltip--left-end:before{content:"";position:absolute;inset-inline-start:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}.c-tooltip--right-end:before{content:"";position:absolute;inset-inline-end:100%;inline-size:var(--tooltip-layer-offset);inset-block-start:0;block-size:100%}';
+var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, a = (t, o, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? N(o, i) : o, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (e = (r ? n(o, i, e) : n(e)) || e);
+  return r && e && j(o, i, e), e;
 };
-const w = "pie-tooltip-heading", X = (t) => {
+const z = "pie-tooltip-heading", X = (t) => {
   const o = (r) => !!r && r !== "none";
   return [
     t.transform,
@@ -51,24 +51,53 @@ const w = "pie-tooltip-heading", X = (t) => {
     t.rotate,
     t.scale
   ].some(o) || /\b(paint|layout|content|strict)\b/.test(t.contain) || t.containerType && t.containerType !== "normal" ? !0 : /\b(transform|perspective|filter|backdrop-filter|contain|translate|rotate|scale)\b/.test(t.willChange);
+}, _ = (t) => {
+  const { documentElement: o } = t.ownerDocument, i = [];
+  let r = t;
+  for (; r !== o; ) {
+    const e = r.assignedSlot ?? r.parentNode, s = e instanceof ShadowRoot ? e.host : e;
+    if (!(s instanceof Element))
+      break;
+    i.push(s), r = s;
+  }
+  return i;
+}, U = (t) => {
+  const { documentElement: o, body: i } = t.ownerDocument;
+  return _(t).filter((r) => {
+    if (r === o || r === i)
+      return !1;
+    const e = getComputedStyle(r);
+    return e.overflowX !== "visible" || e.overflowY !== "visible";
+  });
+}, Y = (t) => {
+  const { left: o, top: i } = t.getBoundingClientRect(), {
+    clientLeft: r,
+    clientTop: e,
+    clientWidth: s,
+    clientHeight: n
+  } = t;
+  return new DOMRect(o + r, i + e, s, n);
+}, W = (t, o) => {
+  const i = Math.max(t.left, o.left), r = Math.max(t.top, o.top), e = Math.min(t.right, o.right), s = Math.min(t.bottom, o.bottom);
+  return e <= i || s <= r ? null : new DOMRect(i, r, e - i, s - r);
 };
-let l = class extends u {
+let l = class extends k {
   constructor() {
-    super(...arguments), this.isOpen = d.isOpen, this.position = d.position, this.size = d.size, this.variant = d.variant, this.type = d.type, this.isDismissible = d.isDismissible, this.headingLevel = d.headingLevel, this._isPositioned = !1, this._reanchorFrame = 0, this._shouldResolveOverlayMode = !1;
+    super(...arguments), this.isOpen = h.isOpen, this.position = h.position, this.size = h.size, this.variant = h.variant, this.type = h.type, this.isDismissible = h.isDismissible, this.headingLevel = h.headingLevel, this.triggers = [], this._isPositioned = !1, this._isAnchorVisible = !0, this._clippedTriggerElement = null, this._triggerClippers = [], this._reanchorFrame = 0, this._shouldResolveOverlayMode = !1;
   }
   get _mode() {
     if (this._hasActionContent !== void 0)
       return this._hasActionContent ? "dialog" : "tooltip";
   }
   firstUpdated() {
-    this.resolveMode(), this.projectOverTrigger();
+    this.resolveMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
   }
   updated(t) {
     const o = ["trigger", "isOpen", "position", "size"];
-    this.isOpen && t.has("isOpen") && this.resolveOverlayMode(), o.some((i) => t.has(i)) && this.projectOverTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger();
+    this.isOpen && t.has("isOpen") && this.resolveOverlayMode(), o.some((i) => t.has(i)) && this.projectOverTrigger(), this.isOpen && t.has("trigger") && this.stopTrackingTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger(), (t.has("triggers") || t.has("trigger")) && this._rebuildInteractionListeners();
   }
   disconnectedCallback() {
-    this.stopTrackingTrigger(), super.disconnectedCallback();
+    this._teardownInteractionListeners(), this.stopTrackingTrigger(), super.disconnectedCallback();
   }
   // Listens for scroll (capture — catches any ancestor), resize, and dir-attribute changes to
   // re-anchor the panel. Multiple events per frame coalesce into one requestAnimationFrame call.
@@ -82,14 +111,25 @@ let l = class extends u {
     }, r = () => {
       this._shouldResolveOverlayMode = !0, i();
     };
-    window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o }), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
+    window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o });
+    const e = /* @__PURE__ */ new Set();
+    _(this).forEach((n) => {
+      const p = n.getRootNode();
+      p instanceof ShadowRoot && e.add(p);
+    }), e.forEach((n) => {
+      n.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o });
+    }), this._triggerObserver = new ResizeObserver(() => {
+      this._shouldResolveOverlayMode = !0, i();
+    });
+    const s = this._getTriggerElement();
+    s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
       attributeFilter: ["dir"],
       subtree: !0
     }), this._triggerTrackingController = t;
   }
   stopTrackingTrigger() {
-    var t, o;
-    (t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (o = this._directionObserver) == null || o.disconnect(), this._directionObserver = void 0, this._shouldResolveOverlayMode = !1, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
+    var t, o, i;
+    (t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (o = this._directionObserver) == null || o.disconnect(), this._directionObserver = void 0, (i = this._triggerObserver) == null || i.disconnect(), this._triggerObserver = void 0, this._shouldResolveOverlayMode = !1, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
   }
   resolveMode() {
     this._hasActionContent = this._assignedActionElements.length > 0;
@@ -97,57 +137,132 @@ let l = class extends u {
   // Picks between `absolute` (browser handles scrolling, but clipped by overflow ancestors) and
   // `fixed` (escapes overflow clips, but must re-offset on every scroll). Switches to `fixed`
   // only when it escapes a clip that `absolute` would not.
+  //
+  // An overflow ancestor clips a positioned box only if it is that box's containing block or an
+  // ancestor of it; a clipper strictly inside the containing block does not clip. So each
+  // clipper is counted against a mode only once that mode's containing block has been reached.
   resolveOverlayMode() {
-    let t = !1, o = !1, i = !1, r = !1, e = this.parentNode;
-    for (; e; ) {
-      const c = e instanceof ShadowRoot ? e.host : e;
-      if (!(c instanceof Element))
-        break;
-      const s = getComputedStyle(c), h = X(s);
-      if ((h || s.position !== "static") && (t = !0), h && (o = !0), (s.overflowX !== "visible" || s.overflowY !== "visible") && (i = i || t, r = r || o), c === this.ownerDocument.documentElement)
-        break;
-      e = c.parentNode;
-    }
-    this.style.position = i && !r ? "fixed" : "";
+    let t = !1, o = !1, i = 0, r = 0;
+    const { documentElement: e, body: s } = this.ownerDocument;
+    this._refreshTriggerClippers(), _(this).forEach((n) => {
+      const p = getComputedStyle(n);
+      if (p.display === "contents")
+        return;
+      const v = X(p);
+      (v || p.position !== "static") && (t = !0), v && (o = !0), (p.overflowX !== "visible" || p.overflowY !== "visible") && !(n === e || n === s) && (t && (i += 1), o && (r += 1));
+    }), this.style.position = r < i ? "fixed" : "";
   }
   // Measures the trigger relative to the origin marker (which sits at the containing block's
   // origin) and writes CSS custom properties. Self-referential: correct for any containing
   // block. Physical values; shadow-root CSS uses logical properties for RTL mirroring.
   projectOverTrigger() {
     this._isPositioned = !1;
-    const t = this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
+    const t = this._getTriggerElement();
     if (!t || !this._originElement) {
-      ["top", "left", "width", "height"].forEach((g) => {
-        this.style.removeProperty(`--tooltip-anchor-${g}`);
-      }), this.style.removeProperty("--tooltip-container-inline-size"), this._isPositioned = !0;
+      ["top", "left", "width", "height"].forEach((f) => {
+        this.style.removeProperty(`--tooltip-anchor-${f}`);
+      }), this.style.removeProperty("--tooltip-container-inline-size"), this._isAnchorVisible = !0, this._isPositioned = !0;
+      return;
+    }
+    t !== this._clippedTriggerElement && this._refreshTriggerClippers();
+    const o = this._triggerClippers.reduce(
+      (f, u) => f ? W(f, Y(u)) : null,
+      t.getBoundingClientRect()
+    );
+    if (this._isAnchorVisible = o !== null, !o) {
+      this._isPositioned = !0;
       return;
     }
-    const o = this._originElement.getBoundingClientRect(), {
-      top: i,
-      left: r,
-      width: e,
-      height: c
-    } = t.getBoundingClientRect();
-    this.style.setProperty("--tooltip-anchor-top", `${i - o.top}px`), this.style.setProperty("--tooltip-anchor-left", `${r - o.left}px`), this.style.setProperty("--tooltip-anchor-width", `${e}px`), this.style.setProperty("--tooltip-anchor-height", `${c}px`);
-    const s = t.parentElement, h = s ? s.getBoundingClientRect().width : e;
-    this.style.setProperty("--tooltip-container-inline-size", `${h}px`), this._isPositioned = !0;
+    const i = this._originElement.getBoundingClientRect(), {
+      top: r,
+      left: e,
+      width: s,
+      height: n
+    } = o;
+    this.style.setProperty("--tooltip-anchor-top", `${r - i.top}px`), this.style.setProperty("--tooltip-anchor-left", `${e - i.left}px`), this.style.setProperty("--tooltip-anchor-width", `${s}px`), this.style.setProperty("--tooltip-anchor-height", `${n}px`);
+    const p = t.parentElement, v = p ? p.getBoundingClientRect().width : s;
+    this.style.setProperty("--tooltip-container-inline-size", `${v}px`), this._isPositioned = !0;
+  }
+  // Cached because `projectOverTrigger` runs on every re-anchoring frame, and collecting these
+  // costs a computed style per ancestor. Refreshed when the trigger changes and whenever the
+  // overlay mode is resolved, which is the same cadence as an ancestor chain actually changing.
+  _refreshTriggerClippers() {
+    const t = this._getTriggerElement();
+    this._clippedTriggerElement = t, this._triggerClippers = t ? U(t) : [];
   }
   handleCloseButtonClick() {
-    this.dispatchEvent(new Event(j, { bubbles: !0, composed: !0 }));
+    this._requestClose();
+  }
+  _getTriggerElement() {
+    return this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
+  }
+  _requestOpen() {
+    this.isOpen || this.dispatchEvent(new Event(q, { bubbles: !0, composed: !0 }));
+  }
+  _requestClose() {
+    this.isOpen && this.dispatchEvent(new Event(F, { bubbles: !0, composed: !0 }));
+  }
+  _startHoverCloseTimer() {
+    this._hoverCloseTimer === void 0 && (this._hoverCloseTimer = setTimeout(() => {
+      this._hoverCloseTimer = void 0, this._requestClose();
+    }, 100));
+  }
+  _cancelHoverCloseTimer() {
+    this._hoverCloseTimer !== void 0 && (clearTimeout(this._hoverCloseTimer), this._hoverCloseTimer = void 0);
+  }
+  _rebuildInteractionListeners() {
+    var r;
+    if (this._teardownInteractionListeners(), !((r = this.triggers) != null && r.length)) return;
+    const t = new AbortController(), { signal: o } = t;
+    this._interactionController = t;
+    const i = this._getTriggerElement();
+    if (this.ownerDocument.addEventListener("keydown", (e) => {
+      e.key === "Escape" && this.isOpen && this._requestClose();
+    }, { signal: o }), !!i) {
+      if (this.triggers.includes("hover")) {
+        i.addEventListener("mouseenter", () => {
+          this._cancelHoverCloseTimer(), this._requestOpen();
+        }, { signal: o }), i.addEventListener("mouseleave", () => {
+          this._startHoverCloseTimer();
+        }, { signal: o });
+        const e = this.renderRoot.querySelector(".c-tooltip");
+        e && (e.addEventListener("mouseenter", () => {
+          this._cancelHoverCloseTimer();
+        }, { signal: o }), e.addEventListener("mouseleave", () => {
+          this._startHoverCloseTimer();
+        }, { signal: o }));
+      }
+      this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
+        this._requestOpen();
+      }, { signal: o }), i.addEventListener("focusout", (e) => {
+        const s = e.relatedTarget;
+        s && (this.contains(s) || s === this) || this._requestClose();
+      }, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (e) => {
+        e.stopPropagation(), this.isOpen ? this._requestClose() : this._requestOpen();
+      }, { signal: o }), this.ownerDocument.addEventListener("click", (e) => {
+        var v;
+        const s = e.composedPath()[0], n = this.contains(s) || ((v = this.shadowRoot) == null ? void 0 : v.contains(s)), p = i.contains(s) || s === i;
+        !n && !p && this.isOpen && this._requestClose();
+      }, { signal: o }));
+    }
+  }
+  _teardownInteractionListeners() {
+    var t;
+    (t = this._interactionController) == null || t.abort(), this._interactionController = void 0, this._cancelHoverCloseTimer();
   }
   renderHeading() {
-    const t = B(this.headingLevel);
+    const t = P(this.headingLevel);
     return y`<${t}
-                        id="${w}"
-                        class="${a}-heading"
-                        data-test-id="${w}">${this.heading}</${t}>`;
+                        id="${z}"
+                        class="${c}-heading"
+                        data-test-id="${z}">${this.heading}</${t}>`;
   }
   renderCloseButton() {
     var t;
     return y`
             <pie-icon-button
-                class="${a}-close"
-                data-test-id="${p}-close"
+                class="${c}-close"
+                data-test-id="${d}-close"
                 size="xsmall"
                 variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
                 .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
@@ -162,114 +277,123 @@ let l = class extends u {
       isDismissible: i,
       isOpen: r,
       position: e,
-      size: c,
-      type: s,
-      variant: h,
-      _mode: g
-    } = this, z = s === "icon", _ = {
-      [`${a}-layer`]: !0,
-      [`${a}-layer--${e}`]: !0,
-      [`${a}-layer--type-${s}`]: !0,
+      size: s,
+      type: n,
+      variant: p,
+      _mode: v
+    } = this, f = n === "icon", u = {
+      [`${c}-layer`]: !0,
+      [`${c}-layer--${e}`]: !0,
+      [`${c}-layer--type-${n}`]: !0,
       "is-open": !!r,
-      "is-positioned": this._isPositioned
-    }, O = {
-      [a]: !0,
-      [`${a}--${e}`]: !0,
-      [`${a}--${h}`]: !0,
-      [`${a}--type-${s}`]: !0,
-      [`${a}--size-${c}`]: !z,
+      "is-positioned": this._isPositioned,
+      "is-anchorVisible": this._isAnchorVisible
+    }, T = {
+      [c]: !0,
+      [`${c}--${e}`]: !0,
+      [`${c}--${p}`]: !0,
+      [`${c}--type-${n}`]: !0,
+      [`${c}--size-${s}`]: !f,
       "is-dismissible": !!i,
-      "has-action": g === "dialog",
+      "has-action": v === "dialog",
       "has-heading": !!o
-    }, x = g === "dialog";
+    }, C = v === "dialog";
     return y`
-            <div class="${a}-origin" data-test-id="${p}-origin"></div>
-            <div class="${a}-anchor" data-test-id="${p}-anchor">
-                <div class="${k(_)}" data-test-id="${p}-layer">
+            <div class="${c}-origin" data-test-id="${d}-origin"></div>
+            <div class="${c}-anchor" data-test-id="${d}-anchor">
+                <div class="${O(u)}" data-test-id="${d}-layer">
                     <div
-                        class="${k(O)}"
-                        data-test-id="${p}"
-                        role="${A(g)}"
+                        class="${O(T)}"
+                        data-test-id="${d}"
+                        role="${R(v)}"
                         aria-hidden="${!r}"
-                        aria-labelledby="${x && o ? w : f}"
-                        aria-label="${x && !o && (t != null && t.label) ? t.label : f}">
-                        ${z ? f : y`<div class="${a}-arrow" data-test-id="${p}-arrow"></div>`}
-                        <div class="${a}-body">
-                            ${o ? this.renderHeading() : f}
-                            <div class="${a}-content" data-test-id="${p}-content">
+                        aria-labelledby="${C && o ? z : b}"
+                        aria-label="${C && !o && (t != null && t.label) ? t.label : b}">
+                        ${f ? b : y`<div class="${c}-arrow" data-test-id="${d}-arrow"></div>`}
+                        <div class="${c}-body">
+                            ${o ? this.renderHeading() : b}
+                            <div class="${c}-content" data-test-id="${d}-content">
                                 <slot name="content"></slot>
                             </div>
                         </div>
-                        <div class="${a}-action" data-test-id="${p}-action">
+                        <div class="${c}-action" data-test-id="${d}-action">
                             <slot name="action" @slotchange="${this.resolveMode}"></slot>
                         </div>
-                        ${i ? this.renderCloseButton() : f}
+                        ${i ? this.renderCloseButton() : b}
                     </div>
                 </div>
             </div>`;
   }
 };
-l.styles = T(I);
-n([
-  v({ type: String })
+l.styles = E(H);
+a([
+  g({ type: String })
 ], l.prototype, "trigger", 2);
-n([
-  v({ type: Boolean })
+a([
+  g({ type: Boolean })
 ], l.prototype, "isOpen", 2);
-n([
-  v({ type: String }),
-  m(p, F, d.position)
+a([
+  g({ type: String }),
+  m(d, M, h.position)
 ], l.prototype, "position", 2);
-n([
-  v({ type: String }),
-  m(p, M, d.size)
+a([
+  g({ type: String }),
+  m(d, D, h.size)
 ], l.prototype, "size", 2);
-n([
-  v({ type: String }),
-  m(p, D, d.variant)
+a([
+  g({ type: String }),
+  m(d, B, h.variant)
 ], l.prototype, "variant", 2);
-n([
-  v({ type: String }),
-  m(p, L, d.type)
+a([
+  g({ type: String }),
+  m(d, I, h.type)
 ], l.prototype, "type", 2);
-n([
-  v({ type: Boolean })
+a([
+  g({ type: Boolean })
 ], l.prototype, "isDismissible", 2);
-n([
-  v({ type: String })
+a([
+  g({ type: String })
 ], l.prototype, "heading", 2);
-n([
-  v({ type: String }),
-  m(p, R, d.headingLevel)
+a([
+  g({ type: String }),
+  m(d, V, h.headingLevel)
 ], l.prototype, "headingLevel", 2);
-n([
-  v({ type: Object })
+a([
+  g({ type: Object })
 ], l.prototype, "aria", 2);
-n([
-  E({ slot: "action" })
+a([
+  g({ type: Array })
+], l.prototype, "triggers", 2);
+a([
+  L({ slot: "action" })
 ], l.prototype, "_assignedActionElements", 2);
-n([
-  P(".c-tooltip-origin")
+a([
+  A(".c-tooltip-origin")
 ], l.prototype, "_originElement", 2);
-n([
-  $()
+a([
+  x()
 ], l.prototype, "_hasActionContent", 2);
-n([
-  $()
+a([
+  x()
 ], l.prototype, "_isPositioned", 2);
-l = n([
+a([
+  x()
+], l.prototype, "_isAnchorVisible", 2);
+l = a([
   S("pie-tooltip")
 ], l);
 export {
-  j as ON_TOOLTIP_CLOSE_EVENT,
+  F as ON_TOOLTIP_CLOSE_EVENT,
+  q as ON_TOOLTIP_OPEN_EVENT,
   l as PieTooltip,
-  a as componentClass,
-  p as componentSelector,
-  d as defaultProps,
-  R as headingLevels,
-  W as modes,
-  F as positions,
-  M as sizes,
-  L as types,
-  D as variants
+  c as componentClass,
+  d as componentSelector,
+  h as defaultProps,
+  V as headingLevels,
+  rt as modes,
+  M as positions,
+  D as sizes,
+  et as triggers,
+  I as types,
+  B as variants
 };