@justeattakeaway/pie-tooltip 0.3.0 → 0.5.0

package/dist/index.js

@@ -1,19 +1,19 @@
-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 { LitElement as F, unsafeCSS as q, nothing as u } from "lit";
+import { property as m, queryAssignedElements as j, query as H, state as k } from "lit/decorators.js";
+import { classMap as D } 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 w = class w extends $ {
+const _ = class _ extends F {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", w.v);
+    this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-w.v = "0.3.0";
-let k = w;
-const M = [
+_.v = "0.5.0";
+let E = _;
+const Y = [
   "top",
   "top-start",
   "top-end",
@@ -26,7 +26,7 @@ const M = [
   "right",
   "right-start",
   "right-end"
-], 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 = {
+], G = ["default", "fit-to-content", "fill-container"], J = ["default", "inverse"], K = ["default", "icon"], Q = ["h2", "h3", "h4", "h5", "h6"], zt = ["hover", "focus", "click"], _t = ["tooltip", "dialog"], g = "pie-tooltip", p = "c-tooltip", W = `${g}-open`, Z = `${g}-close`, f = {
   isOpen: !1,
   position: "top",
   size: "default",
@@ -34,14 +34,14 @@ const M = [
   type: "default",
   isDismissible: !1,
   headingLevel: "h2"
-}, 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;
+}, 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-content:focus{outline:none}.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, d = (t, i, o, e) => {
+  for (var r = e > 1 ? void 0 : e ? it(i, o) : i, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (r = (e ? n(i, o, r) : n(r)) || r);
+  return e && r && ot(i, o, r), r;
 };
-const z = "pie-tooltip-heading", X = (t) => {
-  const o = (r) => !!r && r !== "none";
+const et = 5, B = () => new Promise(requestAnimationFrame), rt = (t) => {
+  const i = (e) => !!e && e !== "none";
   return [
     t.transform,
     t.perspective,
@@ -50,145 +50,242 @@ const z = "pie-tooltip-heading", X = (t) => {
     t.translate,
     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;
+  ].some(i) || /\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);
+}, P = (t) => {
+  const { documentElement: i } = t.ownerDocument, o = [];
+  let e = t;
+  for (; e !== i; ) {
+    const r = e.assignedSlot ?? e.parentNode, s = r instanceof ShadowRoot ? r.host : r;
     if (!(s instanceof Element))
       break;
-    i.push(s), r = s;
+    o.push(s), e = s;
   }
-  return i;
-}, U = (t) => {
-  const { documentElement: o, body: i } = t.ownerDocument;
-  return _(t).filter((r) => {
-    if (r === o || r === i)
+  return o;
+}, st = (t) => {
+  const { documentElement: i, body: o } = t.ownerDocument;
+  return P(t).filter((e) => {
+    if (e === i || e === o)
       return !1;
-    const e = getComputedStyle(r);
-    return e.overflowX !== "visible" || e.overflowY !== "visible";
+    const r = getComputedStyle(e);
+    return r.overflowX !== "visible" || r.overflowY !== "visible";
   });
-}, Y = (t) => {
-  const { left: o, top: i } = t.getBoundingClientRect(), {
-    clientLeft: r,
-    clientTop: e,
+}, I = (t) => {
+  const { left: i, top: o } = t.getBoundingClientRect(), {
+    clientLeft: e,
+    clientTop: r,
     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);
+  return new DOMRect(i + e, o + r, s, n);
+}, R = (t, i) => {
+  const o = Math.max(t.left, i.left), e = Math.max(t.top, i.top), r = Math.min(t.right, i.right), s = Math.min(t.bottom, i.bottom);
+  return r <= o || s <= e ? null : new DOMRect(o, e, r - o, s - e);
+}, nt = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, lt = {
+  top: ["left", "right"],
+  bottom: ["left", "right"],
+  left: ["top", "bottom"],
+  right: ["top", "bottom"]
+}, at = (t) => {
+  const i = /^(top|bottom|left|right)(-start|-end)?$/.exec(t ?? "");
+  return i ? { side: i[1], alignment: i[2] ?? "" } : { side: "top", alignment: "" };
+}, ct = (t, i) => i ? t === "left" ? "right" : t === "right" ? "left" : t : t, pt = (t, i, o, e, r, s, n) => {
+  const l = ct(t, n), h = l === "top" || l === "bottom";
+  let a = 0, v = 0;
+  return l === "top" ? v = o.top - s - r : l === "bottom" ? v = o.bottom + s : l === "left" ? a = o.left - s - e : a = o.right + s, h ? i === "" ? a = o.left + o.width / 2 - e / 2 : i === "-start" ? a = n ? o.right - e : o.left : a = n ? o.left : o.right - e : i === "" ? v = o.top + o.height / 2 - r / 2 : v = i === "-start" ? o.top : o.bottom - r, {
+    left: a,
+    top: v,
+    right: a + e,
+    bottom: v + r
+  };
+}, dt = (t, i) => i.left >= t.left && i.right <= t.right && i.top >= t.top && i.bottom <= t.bottom, ht = (t, i) => {
+  const o = Math.min(t.right, i.right) - Math.max(t.left, i.left), e = Math.min(t.bottom, i.bottom) - Math.max(t.top, i.top);
+  return Math.max(0, o) * Math.max(0, e);
 };
-let l = class extends k {
+let c = class extends E {
   constructor() {
-    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;
+    super(...arguments), this.isOpen = f.isOpen, this.position = f.position, this.size = f.size, this.variant = f.variant, this.type = f.type, this.isDismissible = f.isDismissible, this.headingLevel = f.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, this._instanceId = crypto.randomUUID();
+  }
+  get _headingId() {
+    return `pie-tooltip-heading-${this._instanceId}`;
   }
   get _mode() {
     if (this._hasActionContent !== void 0)
-      return this._hasActionContent ? "dialog" : "tooltip";
+      return this._hasActionContent || this.isDismissible ? "dialog" : "tooltip";
   }
   firstUpdated() {
-    this.resolveMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
+    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 && t.has("trigger") && this.stopTrackingTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger(), (t.has("triggers") || t.has("trigger")) && this._rebuildInteractionListeners();
+    const i = ["trigger", "isOpen", "position", "size"];
+    this.isOpen && t.has("isOpen") && (this._overlayModeDirty = !0), this.isOpen || (this._openedByClick = !1), t.has("trigger") && (this._overlayModeDirty = !0);
+    const o = i.some((e) => t.has(e));
+    o && (this._collisionSignature = null), this.resolveOverlayMode(), o && 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._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.
+  async focusPanel() {
+    if (this._mode !== "dialog")
+      return !1;
+    await this.updateComplete, await B();
+    const t = this.renderRoot.querySelector(`.${p}-content`);
+    if (!t)
+      return !1;
+    const i = () => {
+      var o;
+      return ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === t;
+    };
+    for (let o = 0; o < et; o++) {
+      if (t.focus({ preventScroll: !0 }), i())
+        return !0;
+      await B();
+    }
+    return !1;
+  }
   startTrackingTrigger() {
     if (this._triggerTrackingController)
       return;
-    const t = new AbortController(), { signal: o } = t, i = () => {
+    const t = new AbortController(), { signal: i } = t, o = () => {
       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, o();
     };
-    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 });
+    window.addEventListener("scroll", o, { capture: !0, passive: !0, signal: i }), window.addEventListener("resize", e, { passive: !0, signal: i });
+    const r = /* @__PURE__ */ new Set();
+    P(this).forEach((n) => {
+      const l = n.getRootNode();
+      l instanceof ShadowRoot && r.add(l);
+    }), r.forEach((n) => {
+      n.addEventListener("scroll", o, { capture: !0, passive: !0, signal: i });
     }), this._triggerObserver = new ResizeObserver(() => {
-      this._shouldResolveOverlayMode = !0, i();
+      this._overlayModeDirty = !0, o();
     });
     const s = this._getTriggerElement();
-    s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
+    s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(o), this._directionObserver.observe(this.ownerDocument.documentElement, {
       attributeFilter: ["dir"],
       subtree: !0
     }), this._triggerTrackingController = t;
   }
   stopTrackingTrigger() {
-    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);
+    var t, i, o;
+    (t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (i = this._directionObserver) == null || i.disconnect(), this._directionObserver = void 0, (o = this._triggerObserver) == null || o.disconnect(), this._triggerObserver = void 0, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
   }
   resolveMode() {
     this._hasActionContent = this._assignedActionElements.length > 0;
   }
-  // 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 = 0, r = 0;
-    const { documentElement: e, body: s } = this.ownerDocument;
-    this._refreshTriggerClippers(), _(this).forEach((n) => {
-      const p = getComputedStyle(n);
-      if (p.display === "contents")
+    if (!this._overlayModeDirty)
+      return;
+    this._overlayModeDirty = !1;
+    let t = !1, i = !1;
+    const o = [], e = [], { documentElement: r, body: s } = this.ownerDocument;
+    this._refreshTriggerClippers(), P(this).forEach((l) => {
+      const h = getComputedStyle(l);
+      if (h.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" : "";
+      const a = rt(h);
+      (a || h.position !== "static") && (t = !0), a && (i = !0), (h.overflowX !== "visible" || h.overflowY !== "visible") && !(l === r || l === s) && (t && o.push(l), i && e.push(l));
+    });
+    const n = e.length < o.length;
+    this.style.position = n ? "fixed" : "", this._overlayClippers = n ? e : o;
   }
-  // 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._getTriggerElement();
     if (!t || !this._originElement) {
-      ["top", "left", "width", "height"].forEach((f) => {
-        this.style.removeProperty(`--tooltip-anchor-${f}`);
+      ["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;
     }
     t !== this._clippedTriggerElement && this._refreshTriggerClippers();
-    const o = this._triggerClippers.reduce(
-      (f, u) => f ? W(f, Y(u)) : null,
+    const i = this._triggerClippers.reduce(
+      (a, v) => a ? R(a, I(v)) : null,
       t.getBoundingClientRect()
     );
-    if (this._isAnchorVisible = o !== null, !o) {
+    if (this._isAnchorVisible = i !== null, !i) {
       this._isPositioned = !0;
       return;
     }
-    const i = this._originElement.getBoundingClientRect(), {
-      top: r,
-      left: e,
+    const o = this._originElement.getBoundingClientRect(), {
+      top: e,
+      left: r,
       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;
+    } = i;
+    this.style.setProperty("--tooltip-anchor-top", `${e - o.top}px`), this.style.setProperty("--tooltip-anchor-left", `${r - o.left}px`), this.style.setProperty("--tooltip-anchor-width", `${s}px`), this.style.setProperty("--tooltip-anchor-height", `${n}px`);
+    const l = t.parentElement, h = l ? l.getBoundingClientRect().width : s;
+    this.style.setProperty("--tooltip-container-inline-size", `${h}px`), this.resolveCollision(i), this._isPositioned = !0;
+  }
+  resolveCollision(t) {
+    const i = this.renderRoot.querySelector(`.${p}`);
+    if (!i)
+      return;
+    const o = this._getCollisionBoundary();
+    if (!o) {
+      this._collisionSignature = null, this._setResolvedPosition(this.position ?? f.position);
+      return;
+    }
+    const e = this.type === "icon", r = getComputedStyle(this), s = r.direction === "rtl", n = i.offsetWidth, l = i.offsetHeight, h = [
+      t.left,
+      t.top,
+      t.width,
+      t.height,
+      o.left,
+      o.top,
+      o.width,
+      o.height,
+      n,
+      l,
+      s
+    ].join(":");
+    if (this._collisionSignature === h)
+      return;
+    this._collisionSignature = h;
+    const a = parseFloat(r.getPropertyValue("--tooltip-offset")) || 0, v = parseFloat(r.getPropertyValue("--tooltip-arrow-size")) || 0, y = e ? a : a + v, { side: x, alignment: C } = at(this.position ?? f.position);
+    let b, S, A = -1;
+    this._getCandidatePositions(x, C).some(({ side: $, alignment: O }) => {
+      const M = pt(
+        $,
+        O,
+        t,
+        n,
+        l,
+        y,
+        s
+      );
+      if (dt(o, M))
+        return b = { side: $, alignment: O }, !0;
+      const L = ht(o, M);
+      return L > A && (A = L, S = { side: $, alignment: O }), !1;
+    });
+    const T = b ?? S, V = T ? `${T.side}${T.alignment}` : this.position ?? f.position;
+    this._setResolvedPosition(V);
+  }
+  _setResolvedPosition(t) {
+    this._resolvedPosition !== t && (this._resolvedPosition = t);
+  }
+  _getCollisionBoundary() {
+    const { documentElement: t } = this.ownerDocument, i = new DOMRect(0, 0, t.clientWidth, t.clientHeight);
+    return this._overlayClippers.reduce(
+      (o, e) => o ? R(o, I(e)) : null,
+      i
+    );
+  }
+  _getCandidatePositions(t, i) {
+    const o = [t, nt[t], ...lt[t]], e = ["", "-start", "-end"];
+    return o.flatMap((r) => [i, ...e.filter((n) => n !== i)].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 ? U(t) : [];
+    this._clippedTriggerElement = t, this._triggerClippers = t ? st(t) : [];
   }
   handleCloseButtonClick() {
     this._requestClose();
@@ -197,10 +294,10 @@ let l = class extends k {
     return this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
   }
   _requestOpen() {
-    this.isOpen || this.dispatchEvent(new Event(q, { bubbles: !0, composed: !0 }));
+    this.isOpen || this.dispatchEvent(new Event(W, { bubbles: !0, composed: !0 }));
   }
   _requestClose() {
-    this.isOpen && this.dispatchEvent(new Event(F, { bubbles: !0, composed: !0 }));
+    this.isOpen && this.dispatchEvent(new Event(Z, { bubbles: !0, composed: !0 }));
   }
   _startHoverCloseTimer() {
     this._hoverCloseTimer === void 0 && (this._hoverCloseTimer = setTimeout(() => {
@@ -211,39 +308,47 @@ let l = class extends k {
     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) {
+    var e;
+    this._teardownInteractionListeners();
+    const t = new AbortController(), { signal: i } = t;
+    if (this._interactionController = t, this.ownerDocument.addEventListener("keydown", (r) => {
+      r.key === "Escape" && this.isOpen && this._requestClose();
+    }, { signal: i }), !((e = this.triggers) != null && e.length)) return;
+    const o = this._getTriggerElement();
+    if (o) {
       if (this.triggers.includes("hover")) {
-        i.addEventListener("mouseenter", () => {
+        o.addEventListener("mouseenter", () => {
           this._cancelHoverCloseTimer(), this._requestOpen();
-        }, { signal: o }), i.addEventListener("mouseleave", () => {
+        }, { signal: i }), o.addEventListener("mouseleave", () => {
           this._startHoverCloseTimer();
-        }, { signal: o });
-        const e = this.renderRoot.querySelector(".c-tooltip");
-        e && (e.addEventListener("mouseenter", () => {
+        }, { signal: i });
+        const r = this.renderRoot.querySelector(".c-tooltip");
+        r && (r.addEventListener("mouseenter", () => {
           this._cancelHoverCloseTimer();
-        }, { signal: o }), e.addEventListener("mouseleave", () => {
+        }, { signal: i }), r.addEventListener("mouseleave", () => {
           this._startHoverCloseTimer();
-        }, { signal: o }));
+        }, { signal: i }));
       }
-      this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
+      this.triggers.includes("focus") && (o.addEventListener("focusin", () => {
         this._requestOpen();
-      }, { signal: o }), i.addEventListener("focusout", (e) => {
-        const s = e.relatedTarget;
+      }, { signal: i }), o.addEventListener("focusout", (r) => {
+        const s = r.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 }));
+      }, { signal: i })), this.triggers.includes("click") && (o.addEventListener("click", (r) => {
+        if (r.stopPropagation(), !this.isOpen) {
+          this._openedByClick = !0, this._requestOpen();
+          return;
+        }
+        if (!this._openedByClick) {
+          this._openedByClick = !0;
+          return;
+        }
+        this._requestClose();
+      }, { signal: i }), this.ownerDocument.addEventListener("click", (r) => {
+        var h;
+        const s = r.composedPath()[0], n = this.contains(s) || ((h = this.shadowRoot) == null ? void 0 : h.contains(s)), l = o.contains(s) || s === o;
+        !n && !l && this.isOpen && this._requestClose();
+      }, { signal: i }));
     }
   }
   _teardownInteractionListeners() {
@@ -251,18 +356,18 @@ let l = class extends k {
     (t = this._interactionController) == null || t.abort(), this._interactionController = void 0, this._cancelHoverCloseTimer();
   }
   renderHeading() {
-    const t = P(this.headingLevel);
-    return y`<${t}
-                        id="${z}"
-                        class="${c}-heading"
-                        data-test-id="${z}">${this.heading}</${t}>`;
+    const t = X(this.headingLevel);
+    return z`<${t}
+                        id="${this._headingId}"
+                        class="${p}-heading"
+                        data-test-id="${g}-heading">${this.heading}</${t}>`;
   }
   renderCloseButton() {
     var t;
-    return y`
+    return z`
             <pie-icon-button
-                class="${c}-close"
-                data-test-id="${d}-close"
+                class="${p}-close"
+                data-test-id="${g}-close"
                 size="xsmall"
                 variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
                 .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
@@ -273,127 +378,134 @@ let l = class extends k {
   render() {
     const {
       aria: t,
-      heading: o,
-      isDismissible: i,
-      isOpen: r,
-      position: e,
+      heading: i,
+      isDismissible: o,
+      isOpen: e,
+      position: r,
       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,
+      variant: l,
+      _resolvedPosition: h,
+      _mode: a
+    } = this, v = h ?? r, y = n === "icon", x = {
+      [`${p}-layer`]: !0,
+      [`${p}-layer--${v}`]: !0,
+      [`${p}-layer--type-${n}`]: !0,
+      "is-open": !!e,
       "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": v === "dialog",
-      "has-heading": !!o
-    }, C = v === "dialog";
-    return y`
-            <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">
+    }, C = {
+      [p]: !0,
+      [`${p}--${v}`]: !0,
+      [`${p}--${l}`]: !0,
+      [`${p}--type-${n}`]: !0,
+      [`${p}--size-${s}`]: !y,
+      "is-dismissible": !!o,
+      "has-action": this._hasActionContent === !0,
+      "has-heading": !!i
+    }, b = a === "dialog";
+    return z`
+            <div class="${p}-origin" data-test-id="${g}-origin"></div>
+            <div class="${p}-anchor" data-test-id="${g}-anchor">
+                <div class="${D(x)}" data-test-id="${g}-layer">
                     <div
-                        class="${O(T)}"
-                        data-test-id="${d}"
-                        role="${R(v)}"
-                        aria-hidden="${!r}"
-                        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">
+                        class="${D(C)}"
+                        data-test-id="${g}"
+                        role="${N(a)}"
+                        aria-hidden="${!e}"
+                        aria-labelledby="${b && i ? this._headingId : u}"
+                        aria-label="${b && !i && (t != null && t.label) ? t.label : u}">
+                        ${y ? u : z`<div class="${p}-arrow" data-test-id="${g}-arrow"></div>`}
+                        <div class="${p}-body">
+                            ${i ? this.renderHeading() : u}
+                            <div
+                                class="${p}-content"
+                                tabindex="${b ? -1 : u}"
+                                data-test-id="${g}-content">
                                 <slot name="content"></slot>
                             </div>
                         </div>
-                        <div class="${c}-action" data-test-id="${d}-action">
+                        <div class="${p}-action" data-test-id="${g}-action">
                             <slot name="action" @slotchange="${this.resolveMode}"></slot>
                         </div>
-                        ${i ? this.renderCloseButton() : b}
+                        ${o ? this.renderCloseButton() : u}
                     </div>
                 </div>
             </div>`;
   }
 };
-l.styles = E(H);
-a([
-  g({ type: String })
-], l.prototype, "trigger", 2);
-a([
-  g({ type: Boolean })
-], l.prototype, "isOpen", 2);
-a([
-  g({ type: String }),
-  m(d, M, h.position)
-], l.prototype, "position", 2);
-a([
-  g({ type: String }),
-  m(d, D, h.size)
-], l.prototype, "size", 2);
-a([
-  g({ type: String }),
-  m(d, B, h.variant)
-], l.prototype, "variant", 2);
-a([
-  g({ type: String }),
-  m(d, I, h.type)
-], l.prototype, "type", 2);
-a([
-  g({ type: Boolean })
-], l.prototype, "isDismissible", 2);
-a([
-  g({ type: String })
-], l.prototype, "heading", 2);
-a([
-  g({ type: String }),
-  m(d, V, h.headingLevel)
-], l.prototype, "headingLevel", 2);
-a([
-  g({ type: Object })
-], l.prototype, "aria", 2);
-a([
-  g({ type: Array })
-], l.prototype, "triggers", 2);
-a([
-  L({ slot: "action" })
-], l.prototype, "_assignedActionElements", 2);
-a([
-  A(".c-tooltip-origin")
-], l.prototype, "_originElement", 2);
-a([
-  x()
-], l.prototype, "_hasActionContent", 2);
-a([
-  x()
-], l.prototype, "_isPositioned", 2);
-a([
-  x()
-], l.prototype, "_isAnchorVisible", 2);
-l = a([
-  S("pie-tooltip")
-], l);
+c.styles = q(tt);
+d([
+  m({ type: String })
+], c.prototype, "trigger", 2);
+d([
+  m({ type: Boolean })
+], c.prototype, "isOpen", 2);
+d([
+  m({ type: String }),
+  w(g, Y, f.position)
+], c.prototype, "position", 2);
+d([
+  m({ type: String }),
+  w(g, G, f.size)
+], c.prototype, "size", 2);
+d([
+  m({ type: String }),
+  w(g, J, f.variant)
+], c.prototype, "variant", 2);
+d([
+  m({ type: String }),
+  w(g, K, f.type)
+], c.prototype, "type", 2);
+d([
+  m({ type: Boolean })
+], c.prototype, "isDismissible", 2);
+d([
+  m({ type: String })
+], c.prototype, "heading", 2);
+d([
+  m({ type: String }),
+  w(g, Q, f.headingLevel)
+], c.prototype, "headingLevel", 2);
+d([
+  m({ type: Object })
+], c.prototype, "aria", 2);
+d([
+  m({ type: Array })
+], c.prototype, "triggers", 2);
+d([
+  j({ slot: "action" })
+], c.prototype, "_assignedActionElements", 2);
+d([
+  H(".c-tooltip-origin")
+], c.prototype, "_originElement", 2);
+d([
+  k()
+], c.prototype, "_hasActionContent", 2);
+d([
+  k()
+], c.prototype, "_isPositioned", 2);
+d([
+  k()
+], c.prototype, "_isAnchorVisible", 2);
+d([
+  k()
+], c.prototype, "_resolvedPosition", 2);
+c = d([
+  U("pie-tooltip")
+], c);
 export {
-  F as ON_TOOLTIP_CLOSE_EVENT,
-  q as ON_TOOLTIP_OPEN_EVENT,
-  l as PieTooltip,
-  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
+  Z as ON_TOOLTIP_CLOSE_EVENT,
+  W as ON_TOOLTIP_OPEN_EVENT,
+  c as PieTooltip,
+  p as componentClass,
+  g as componentSelector,
+  f as defaultProps,
+  Q as headingLevels,
+  _t as modes,
+  Y as positions,
+  G as sizes,
+  zt as triggers,
+  K as types,
+  J as variants
 };