@justeattakeaway/pie-tooltip 0.2.0 → 0.4.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 { validPropertyValues as m, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import { LitElement as q, unsafeCSS as F, nothing as y } from "lit";
+import { property as b, queryAssignedElements as j, query as H, state as k } from "lit/decorators.js";
+import { classMap as B } from "lit/directives/class-map.js";
+import { ifDefined as N } from "lit/directives/if-defined.js";
+import { unsafeStatic as X, html as z } from "lit/static-html.js";
+import { validPropertyValues as w, safeCustomElement as U } 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 _ = class _ extends q {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", b.v);
+    this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-b.v = "0.2.0";
-let u = b;
-const F = [
+_.v = "0.4.0";
+let P = _;
+const Y = [
   "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 = {
+], G = ["default", "fit-to-content", "fill-container"], J = ["default", "inverse"], K = ["default", "icon"], Q = ["h2", "h3", "h4", "h5", "h6"], wt = ["hover", "focus", "click"], zt = ["tooltip", "dialog"], v = "pie-tooltip", h = "c-tooltip", W = `${v}-open`, Z = `${v}-close`, g = {
   isOpen: !1,
   position: "top",
   size: "default",
@@ -34,14 +34,14 @@ 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;
+}, tt = '*,*: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 ot = Object.defineProperty, it = Object.getOwnPropertyDescriptor, p = (t, o, i, e) => {
+  for (var r = e > 1 ? void 0 : e ? it(o, i) : o, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (r = (e ? n(o, i, r) : n(r)) || r);
+  return e && r && ot(o, i, r), r;
 };
-const w = "pie-tooltip-heading", X = (t) => {
-  const o = (r) => !!r && r !== "none";
+const E = "pie-tooltip-heading", et = (t) => {
+  const o = (e) => !!e && e !== "none";
   return [
     t.transform,
     t.perspective,
@@ -51,24 +51,80 @@ 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);
+}, S = (t) => {
+  const { documentElement: o } = t.ownerDocument, i = [];
+  let e = t;
+  for (; e !== o; ) {
+    const r = e.assignedSlot ?? e.parentNode, s = r instanceof ShadowRoot ? r.host : r;
+    if (!(s instanceof Element))
+      break;
+    i.push(s), e = s;
+  }
+  return i;
+}, rt = (t) => {
+  const { documentElement: o, body: i } = t.ownerDocument;
+  return S(t).filter((e) => {
+    if (e === o || e === i)
+      return !1;
+    const r = getComputedStyle(e);
+    return r.overflowX !== "visible" || r.overflowY !== "visible";
+  });
+}, R = (t) => {
+  const { left: o, top: i } = t.getBoundingClientRect(), {
+    clientLeft: e,
+    clientTop: r,
+    clientWidth: s,
+    clientHeight: n
+  } = t;
+  return new DOMRect(o + e, i + r, s, n);
+}, V = (t, o) => {
+  const i = Math.max(t.left, o.left), e = Math.max(t.top, o.top), r = Math.min(t.right, o.right), s = Math.min(t.bottom, o.bottom);
+  return r <= i || s <= e ? null : new DOMRect(i, e, r - i, s - e);
+}, st = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, nt = {
+  top: ["left", "right"],
+  bottom: ["left", "right"],
+  left: ["top", "bottom"],
+  right: ["top", "bottom"]
+}, lt = (t) => {
+  const o = /^(top|bottom|left|right)(-start|-end)?$/.exec(t ?? "");
+  return o ? { side: o[1], alignment: o[2] ?? "" } : { side: "top", alignment: "" };
+}, at = (t, o) => o ? t === "left" ? "right" : t === "right" ? "left" : t : t, ct = (t, o, i, e, r, s, n) => {
+  const l = at(t, n), d = l === "top" || l === "bottom";
+  let a = 0, f = 0;
+  return l === "top" ? f = i.top - s - r : l === "bottom" ? f = i.bottom + s : l === "left" ? a = i.left - s - e : a = i.right + s, d ? o === "" ? a = i.left + i.width / 2 - e / 2 : o === "-start" ? a = n ? i.right - e : i.left : a = n ? i.left : i.right - e : o === "" ? f = i.top + i.height / 2 - r / 2 : f = o === "-start" ? i.top : i.bottom - r, {
+    left: a,
+    top: f,
+    right: a + e,
+    bottom: f + r
+  };
+}, pt = (t, o) => o.left >= t.left && o.right <= t.right && o.top >= t.top && o.bottom <= t.bottom, dt = (t, o) => {
+  const i = Math.min(t.right, o.right) - Math.max(t.left, o.left), e = Math.min(t.bottom, o.bottom) - Math.max(t.top, o.top);
+  return Math.max(0, i) * Math.max(0, e);
 };
-let l = class extends u {
+let c = class extends P {
   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 = g.isOpen, this.position = g.position, this.size = g.size, this.variant = g.variant, this.type = g.type, this.isDismissible = g.isDismissible, this.headingLevel = g.headingLevel, this.triggers = [], this._isPositioned = !1, this._isAnchorVisible = !0, this._clippedTriggerElement = null, this._triggerClippers = [], this._overlayClippers = [], this._collisionSignature = null, this._overlayModeDirty = !0, this._reanchorFrame = 0, this._openedByClick = !1;
   }
   get _mode() {
     if (this._hasActionContent !== void 0)
       return this._hasActionContent ? "dialog" : "tooltip";
   }
   firstUpdated() {
-    this.resolveMode(), this.projectOverTrigger();
+    this.resolveMode(), this._overlayModeDirty = !0, this.resolveOverlayMode(), 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._overlayModeDirty = !0), this.isOpen || (this._openedByClick = !1), t.has("trigger") && (this._overlayModeDirty = !0);
+    const i = o.some((e) => t.has(e));
+    i && (this._collisionSignature = null), this.resolveOverlayMode(), 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.
@@ -77,19 +133,30 @@ let l = class extends u {
       return;
     const t = new AbortController(), { signal: o } = t, i = () => {
       this._reanchorFrame || (this._reanchorFrame = requestAnimationFrame(() => {
-        this._reanchorFrame = 0, this._shouldResolveOverlayMode && (this._shouldResolveOverlayMode = !1, this.resolveOverlayMode()), this.projectOverTrigger();
+        this._reanchorFrame = 0, this.resolveOverlayMode(), this.projectOverTrigger();
       }));
-    }, r = () => {
-      this._shouldResolveOverlayMode = !0, i();
+    }, e = () => {
+      this._overlayModeDirty = !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", e, { passive: !0, signal: o });
+    const r = /* @__PURE__ */ new Set();
+    S(this).forEach((n) => {
+      const l = n.getRootNode();
+      l instanceof ShadowRoot && r.add(l);
+    }), r.forEach((n) => {
+      n.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o });
+    }), this._triggerObserver = new ResizeObserver(() => {
+      this._overlayModeDirty = !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._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
   }
   resolveMode() {
     this._hasActionContent = this._assignedActionElements.length > 0;
@@ -97,57 +164,204 @@ 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" : "";
+    if (!this._overlayModeDirty)
+      return;
+    this._overlayModeDirty = !1;
+    let t = !1, o = !1;
+    const i = [], e = [], { documentElement: r, body: s } = this.ownerDocument;
+    this._refreshTriggerClippers(), S(this).forEach((l) => {
+      const d = getComputedStyle(l);
+      if (d.display === "contents")
+        return;
+      const a = et(d);
+      (a || d.position !== "static") && (t = !0), a && (o = !0), (d.overflowX !== "visible" || d.overflowY !== "visible") && !(l === r || l === s) && (t && i.push(l), o && e.push(l));
+    });
+    const n = e.length < i.length;
+    this.style.position = n ? "fixed" : "", this._overlayClippers = n ? e : i;
   }
   // 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((a) => {
+        this.style.removeProperty(`--tooltip-anchor-${a}`);
+      }), this.style.removeProperty("--tooltip-container-inline-size"), this._isAnchorVisible = !0, this._isPositioned = !0;
       return;
     }
-    const o = this._originElement.getBoundingClientRect(), {
-      top: i,
+    t !== this._clippedTriggerElement && this._refreshTriggerClippers();
+    const o = this._triggerClippers.reduce(
+      (a, f) => a ? V(a, R(f)) : null,
+      t.getBoundingClientRect()
+    );
+    if (this._isAnchorVisible = o !== null, !o) {
+      this._isPositioned = !0;
+      return;
+    }
+    const i = this._originElement.getBoundingClientRect(), {
+      top: e,
       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;
+      width: s,
+      height: n
+    } = o;
+    this.style.setProperty("--tooltip-anchor-top", `${e - i.top}px`), this.style.setProperty("--tooltip-anchor-left", `${r - i.left}px`), this.style.setProperty("--tooltip-anchor-width", `${s}px`), this.style.setProperty("--tooltip-anchor-height", `${n}px`);
+    const l = t.parentElement, d = l ? l.getBoundingClientRect().width : s;
+    this.style.setProperty("--tooltip-container-inline-size", `${d}px`), this.resolveCollision(o), this._isPositioned = !0;
+  }
+  resolveCollision(t) {
+    const o = this.renderRoot.querySelector(`.${h}`);
+    if (!o)
+      return;
+    const i = this._getCollisionBoundary();
+    if (!i) {
+      this._collisionSignature = null, this._setResolvedPosition(this.position ?? g.position);
+      return;
+    }
+    const e = this.type === "icon", r = getComputedStyle(this), s = r.direction === "rtl", n = o.offsetWidth, l = o.offsetHeight, d = [
+      t.left,
+      t.top,
+      t.width,
+      t.height,
+      i.left,
+      i.top,
+      i.width,
+      i.height,
+      n,
+      l,
+      s
+    ].join(":");
+    if (this._collisionSignature === d)
+      return;
+    this._collisionSignature = d;
+    const a = parseFloat(r.getPropertyValue("--tooltip-offset")) || 0, f = parseFloat(r.getPropertyValue("--tooltip-arrow-size")) || 0, m = e ? a : a + f, { side: x, alignment: C } = lt(this.position ?? g.position);
+    let u, A, M = -1;
+    this._getCandidatePositions(x, C).some(({ side: O, alignment: $ }) => {
+      const L = ct(
+        O,
+        $,
+        t,
+        n,
+        l,
+        m,
+        s
+      );
+      if (pt(i, L))
+        return u = { side: O, alignment: $ }, !0;
+      const D = dt(i, L);
+      return D > M && (M = D, A = { side: O, alignment: $ }), !1;
+    });
+    const T = u ?? A, I = T ? `${T.side}${T.alignment}` : this.position ?? g.position;
+    this._setResolvedPosition(I);
+  }
+  _setResolvedPosition(t) {
+    this._resolvedPosition !== t && (this._resolvedPosition = t);
+  }
+  _getCollisionBoundary() {
+    const { documentElement: t } = this.ownerDocument, o = new DOMRect(0, 0, t.clientWidth, t.clientHeight);
+    return this._overlayClippers.reduce(
+      (i, e) => i ? V(i, R(e)) : null,
+      o
+    );
+  }
+  _getCandidatePositions(t, o) {
+    const i = [t, st[t], ...nt[t]], e = ["", "-start", "-end"];
+    return i.flatMap((r) => [o, ...e.filter((n) => n !== o)].map((n) => ({ side: r, alignment: n })));
+  }
+  // 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 ? rt(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(W, { bubbles: !0, composed: !0 }));
+  }
+  _requestClose() {
+    this.isOpen && this.dispatchEvent(new Event(Z, { 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 e;
+    if (this._teardownInteractionListeners(), !((e = this.triggers) != null && e.length)) return;
+    const t = new AbortController(), { signal: o } = t;
+    this._interactionController = t;
+    const i = this._getTriggerElement();
+    if (this.ownerDocument.addEventListener("keydown", (r) => {
+      r.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 r = this.renderRoot.querySelector(".c-tooltip");
+        r && (r.addEventListener("mouseenter", () => {
+          this._cancelHoverCloseTimer();
+        }, { signal: o }), r.addEventListener("mouseleave", () => {
+          this._startHoverCloseTimer();
+        }, { signal: o }));
+      }
+      this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
+        this._requestOpen();
+      }, { signal: o }), i.addEventListener("focusout", (r) => {
+        const s = r.relatedTarget;
+        s && (this.contains(s) || s === this) || this._requestClose();
+      }, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (r) => {
+        if (r.stopPropagation(), !this.isOpen) {
+          this._openedByClick = !0, this._requestOpen();
+          return;
+        }
+        if (!this._openedByClick) {
+          this._openedByClick = !0;
+          return;
+        }
+        this._requestClose();
+      }, { signal: o }), this.ownerDocument.addEventListener("click", (r) => {
+        var d;
+        const s = r.composedPath()[0], n = this.contains(s) || ((d = this.shadowRoot) == null ? void 0 : d.contains(s)), l = i.contains(s) || s === i;
+        !n && !l && 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);
-    return y`<${t}
-                        id="${w}"
-                        class="${a}-heading"
-                        data-test-id="${w}">${this.heading}</${t}>`;
+    const t = X(this.headingLevel);
+    return z`<${t}
+                        id="${E}"
+                        class="${h}-heading"
+                        data-test-id="${E}">${this.heading}</${t}>`;
   }
   renderCloseButton() {
     var t;
-    return y`
+    return z`
             <pie-icon-button
-                class="${a}-close"
-                data-test-id="${p}-close"
+                class="${h}-close"
+                data-test-id="${v}-close"
                 size="xsmall"
                 variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
                 .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
@@ -160,116 +374,129 @@ let l = class extends u {
       aria: t,
       heading: o,
       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,
-      "is-open": !!r,
-      "is-positioned": this._isPositioned
-    }, O = {
-      [a]: !0,
-      [`${a}--${e}`]: !0,
-      [`${a}--${h}`]: !0,
-      [`${a}--type-${s}`]: !0,
-      [`${a}--size-${c}`]: !z,
+      isOpen: e,
+      position: r,
+      size: s,
+      type: n,
+      variant: l,
+      _resolvedPosition: d,
+      _mode: a
+    } = this, f = d ?? r, m = n === "icon", x = {
+      [`${h}-layer`]: !0,
+      [`${h}-layer--${f}`]: !0,
+      [`${h}-layer--type-${n}`]: !0,
+      "is-open": !!e,
+      "is-positioned": this._isPositioned,
+      "is-anchorVisible": this._isAnchorVisible
+    }, C = {
+      [h]: !0,
+      [`${h}--${f}`]: !0,
+      [`${h}--${l}`]: !0,
+      [`${h}--type-${n}`]: !0,
+      [`${h}--size-${s}`]: !m,
       "is-dismissible": !!i,
-      "has-action": g === "dialog",
+      "has-action": a === "dialog",
       "has-heading": !!o
-    }, x = g === "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">
+    }, u = a === "dialog";
+    return z`
+            <div class="${h}-origin" data-test-id="${v}-origin"></div>
+            <div class="${h}-anchor" data-test-id="${v}-anchor">
+                <div class="${B(x)}" data-test-id="${v}-layer">
                     <div
-                        class="${k(O)}"
-                        data-test-id="${p}"
-                        role="${A(g)}"
-                        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">
+                        class="${B(C)}"
+                        data-test-id="${v}"
+                        role="${N(a)}"
+                        aria-hidden="${!e}"
+                        aria-labelledby="${u && o ? E : y}"
+                        aria-label="${u && !o && (t != null && t.label) ? t.label : y}">
+                        ${m ? y : z`<div class="${h}-arrow" data-test-id="${v}-arrow"></div>`}
+                        <div class="${h}-body">
+                            ${o ? this.renderHeading() : y}
+                            <div class="${h}-content" data-test-id="${v}-content">
                                 <slot name="content"></slot>
                             </div>
                         </div>
-                        <div class="${a}-action" data-test-id="${p}-action">
+                        <div class="${h}-action" data-test-id="${v}-action">
                             <slot name="action" @slotchange="${this.resolveMode}"></slot>
                         </div>
-                        ${i ? this.renderCloseButton() : f}
+                        ${i ? this.renderCloseButton() : y}
                     </div>
                 </div>
             </div>`;
   }
 };
-l.styles = T(I);
-n([
-  v({ type: String })
-], l.prototype, "trigger", 2);
-n([
-  v({ type: Boolean })
-], l.prototype, "isOpen", 2);
-n([
-  v({ type: String }),
-  m(p, F, d.position)
-], l.prototype, "position", 2);
-n([
-  v({ type: String }),
-  m(p, M, d.size)
-], l.prototype, "size", 2);
-n([
-  v({ type: String }),
-  m(p, D, d.variant)
-], l.prototype, "variant", 2);
-n([
-  v({ type: String }),
-  m(p, L, d.type)
-], l.prototype, "type", 2);
-n([
-  v({ type: Boolean })
-], l.prototype, "isDismissible", 2);
-n([
-  v({ type: String })
-], l.prototype, "heading", 2);
-n([
-  v({ type: String }),
-  m(p, R, d.headingLevel)
-], l.prototype, "headingLevel", 2);
-n([
-  v({ type: Object })
-], l.prototype, "aria", 2);
-n([
-  E({ slot: "action" })
-], l.prototype, "_assignedActionElements", 2);
-n([
-  P(".c-tooltip-origin")
-], l.prototype, "_originElement", 2);
-n([
-  $()
-], l.prototype, "_hasActionContent", 2);
-n([
-  $()
-], l.prototype, "_isPositioned", 2);
-l = n([
-  S("pie-tooltip")
-], l);
+c.styles = F(tt);
+p([
+  b({ type: String })
+], c.prototype, "trigger", 2);
+p([
+  b({ type: Boolean })
+], c.prototype, "isOpen", 2);
+p([
+  b({ type: String }),
+  w(v, Y, g.position)
+], c.prototype, "position", 2);
+p([
+  b({ type: String }),
+  w(v, G, g.size)
+], c.prototype, "size", 2);
+p([
+  b({ type: String }),
+  w(v, J, g.variant)
+], c.prototype, "variant", 2);
+p([
+  b({ type: String }),
+  w(v, K, g.type)
+], c.prototype, "type", 2);
+p([
+  b({ type: Boolean })
+], c.prototype, "isDismissible", 2);
+p([
+  b({ type: String })
+], c.prototype, "heading", 2);
+p([
+  b({ type: String }),
+  w(v, Q, g.headingLevel)
+], c.prototype, "headingLevel", 2);
+p([
+  b({ type: Object })
+], c.prototype, "aria", 2);
+p([
+  b({ type: Array })
+], c.prototype, "triggers", 2);
+p([
+  j({ slot: "action" })
+], c.prototype, "_assignedActionElements", 2);
+p([
+  H(".c-tooltip-origin")
+], c.prototype, "_originElement", 2);
+p([
+  k()
+], c.prototype, "_hasActionContent", 2);
+p([
+  k()
+], c.prototype, "_isPositioned", 2);
+p([
+  k()
+], c.prototype, "_isAnchorVisible", 2);
+p([
+  k()
+], c.prototype, "_resolvedPosition", 2);
+c = p([
+  U("pie-tooltip")
+], c);
 export {
-  j as ON_TOOLTIP_CLOSE_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
+  Z as ON_TOOLTIP_CLOSE_EVENT,
+  W as ON_TOOLTIP_OPEN_EVENT,
+  c as PieTooltip,
+  h as componentClass,
+  v as componentSelector,
+  g as defaultProps,
+  Q as headingLevels,
+  zt as modes,
+  Y as positions,
+  G as sizes,
+  wt as triggers,
+  K as types,
+  J as variants
 };