@justeattakeaway/pie-tooltip 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +12 -1
  2. package/custom-elements.json +112 -7
  3. package/dist/index.d.ts +13 -2
  4. package/dist/index.js +299 -196
  5. package/dist/react.d.ts +13 -2
  6. package/package.json +1 -1
  7. package/src/defs.ts +4 -1
  8. package/src/index.ts +286 -22
package/dist/index.js CHANGED
@@ -1,19 +1,19 @@
1
- import { LitElement as $, unsafeCSS as E, nothing as b } from "lit";
2
- import { property as g, queryAssignedElements as L, query as A, state as x } from "lit/decorators.js";
3
- import { classMap as O } from "lit/directives/class-map.js";
4
- import { ifDefined as R } from "lit/directives/if-defined.js";
5
- import { unsafeStatic as P, html as y } from "lit/static-html.js";
6
- import { validPropertyValues as m, safeCustomElement as S } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as q, unsafeCSS as F, nothing as y } from "lit";
2
+ import { property as b, queryAssignedElements as j, query as H, state as k } from "lit/decorators.js";
3
+ import { classMap as B } from "lit/directives/class-map.js";
4
+ import { ifDefined as N } from "lit/directives/if-defined.js";
5
+ import { unsafeStatic as X, html as z } from "lit/static-html.js";
6
+ import { validPropertyValues as w, safeCustomElement as U } from "@justeattakeaway/pie-webc-core";
7
7
  import "@justeattakeaway/pie-icon-button";
8
8
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
9
- const w = class w extends $ {
9
+ const _ = class _ extends q {
10
10
  willUpdate() {
11
- this.getAttribute("v") || this.setAttribute("v", w.v);
11
+ this.getAttribute("v") || this.setAttribute("v", _.v);
12
12
  }
13
13
  };
14
- w.v = "0.3.0";
15
- let k = w;
16
- const M = [
14
+ _.v = "0.4.0";
15
+ let P = _;
16
+ const Y = [
17
17
  "top",
18
18
  "top-start",
19
19
  "top-end",
@@ -26,7 +26,7 @@ const M = [
26
26
  "right",
27
27
  "right-start",
28
28
  "right-end"
29
- ], 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 = {
29
+ ], 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 = {
30
30
  isOpen: !1,
31
31
  position: "top",
32
32
  size: "default",
@@ -34,14 +34,14 @@ const M = [
34
34
  type: "default",
35
35
  isDismissible: !1,
36
36
  headingLevel: "h2"
37
- }, 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%}';
38
- var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, a = (t, o, i, r) => {
39
- for (var e = r > 1 ? void 0 : r ? N(o, i) : o, s = t.length - 1, n; s >= 0; s--)
40
- (n = t[s]) && (e = (r ? n(o, i, e) : n(e)) || e);
41
- return r && e && j(o, i, e), e;
37
+ }, 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%}';
38
+ var ot = Object.defineProperty, it = Object.getOwnPropertyDescriptor, p = (t, o, i, e) => {
39
+ for (var r = e > 1 ? void 0 : e ? it(o, i) : o, s = t.length - 1, n; s >= 0; s--)
40
+ (n = t[s]) && (r = (e ? n(o, i, r) : n(r)) || r);
41
+ return e && r && ot(o, i, r), r;
42
42
  };
43
- const z = "pie-tooltip-heading", X = (t) => {
44
- const o = (r) => !!r && r !== "none";
43
+ const E = "pie-tooltip-heading", et = (t) => {
44
+ const o = (e) => !!e && e !== "none";
45
45
  return [
46
46
  t.transform,
47
47
  t.perspective,
@@ -51,50 +51,77 @@ const z = "pie-tooltip-heading", X = (t) => {
51
51
  t.rotate,
52
52
  t.scale
53
53
  ].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);
54
- }, _ = (t) => {
54
+ }, S = (t) => {
55
55
  const { documentElement: o } = t.ownerDocument, i = [];
56
- let r = t;
57
- for (; r !== o; ) {
58
- const e = r.assignedSlot ?? r.parentNode, s = e instanceof ShadowRoot ? e.host : e;
56
+ let e = t;
57
+ for (; e !== o; ) {
58
+ const r = e.assignedSlot ?? e.parentNode, s = r instanceof ShadowRoot ? r.host : r;
59
59
  if (!(s instanceof Element))
60
60
  break;
61
- i.push(s), r = s;
61
+ i.push(s), e = s;
62
62
  }
63
63
  return i;
64
- }, U = (t) => {
64
+ }, rt = (t) => {
65
65
  const { documentElement: o, body: i } = t.ownerDocument;
66
- return _(t).filter((r) => {
67
- if (r === o || r === i)
66
+ return S(t).filter((e) => {
67
+ if (e === o || e === i)
68
68
  return !1;
69
- const e = getComputedStyle(r);
70
- return e.overflowX !== "visible" || e.overflowY !== "visible";
69
+ const r = getComputedStyle(e);
70
+ return r.overflowX !== "visible" || r.overflowY !== "visible";
71
71
  });
72
- }, Y = (t) => {
72
+ }, R = (t) => {
73
73
  const { left: o, top: i } = t.getBoundingClientRect(), {
74
- clientLeft: r,
75
- clientTop: e,
74
+ clientLeft: e,
75
+ clientTop: r,
76
76
  clientWidth: s,
77
77
  clientHeight: n
78
78
  } = t;
79
- return new DOMRect(o + r, i + e, s, n);
80
- }, W = (t, o) => {
81
- 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);
82
- return e <= i || s <= r ? null : new DOMRect(i, r, e - i, s - r);
79
+ return new DOMRect(o + e, i + r, s, n);
80
+ }, V = (t, o) => {
81
+ 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);
82
+ return r <= i || s <= e ? null : new DOMRect(i, e, r - i, s - e);
83
+ }, st = {
84
+ top: "bottom",
85
+ bottom: "top",
86
+ left: "right",
87
+ right: "left"
88
+ }, nt = {
89
+ top: ["left", "right"],
90
+ bottom: ["left", "right"],
91
+ left: ["top", "bottom"],
92
+ right: ["top", "bottom"]
93
+ }, lt = (t) => {
94
+ const o = /^(top|bottom|left|right)(-start|-end)?$/.exec(t ?? "");
95
+ return o ? { side: o[1], alignment: o[2] ?? "" } : { side: "top", alignment: "" };
96
+ }, at = (t, o) => o ? t === "left" ? "right" : t === "right" ? "left" : t : t, ct = (t, o, i, e, r, s, n) => {
97
+ const l = at(t, n), d = l === "top" || l === "bottom";
98
+ let a = 0, f = 0;
99
+ 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, {
100
+ left: a,
101
+ top: f,
102
+ right: a + e,
103
+ bottom: f + r
104
+ };
105
+ }, pt = (t, o) => o.left >= t.left && o.right <= t.right && o.top >= t.top && o.bottom <= t.bottom, dt = (t, o) => {
106
+ 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);
107
+ return Math.max(0, i) * Math.max(0, e);
83
108
  };
84
- let l = class extends k {
109
+ let c = class extends P {
85
110
  constructor() {
86
- 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;
111
+ 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;
87
112
  }
88
113
  get _mode() {
89
114
  if (this._hasActionContent !== void 0)
90
115
  return this._hasActionContent ? "dialog" : "tooltip";
91
116
  }
92
117
  firstUpdated() {
93
- this.resolveMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
118
+ this.resolveMode(), this._overlayModeDirty = !0, this.resolveOverlayMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
94
119
  }
95
120
  updated(t) {
96
121
  const o = ["trigger", "isOpen", "position", "size"];
97
- 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();
122
+ this.isOpen && t.has("isOpen") && (this._overlayModeDirty = !0), this.isOpen || (this._openedByClick = !1), t.has("trigger") && (this._overlayModeDirty = !0);
123
+ const i = o.some((e) => t.has(e));
124
+ 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();
98
125
  }
99
126
  disconnectedCallback() {
100
127
  this._teardownInteractionListeners(), this.stopTrackingTrigger(), super.disconnectedCallback();
@@ -106,20 +133,20 @@ let l = class extends k {
106
133
  return;
107
134
  const t = new AbortController(), { signal: o } = t, i = () => {
108
135
  this._reanchorFrame || (this._reanchorFrame = requestAnimationFrame(() => {
109
- this._reanchorFrame = 0, this._shouldResolveOverlayMode && (this._shouldResolveOverlayMode = !1, this.resolveOverlayMode()), this.projectOverTrigger();
136
+ this._reanchorFrame = 0, this.resolveOverlayMode(), this.projectOverTrigger();
110
137
  }));
111
- }, r = () => {
112
- this._shouldResolveOverlayMode = !0, i();
138
+ }, e = () => {
139
+ this._overlayModeDirty = !0, i();
113
140
  };
114
- window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o });
115
- const e = /* @__PURE__ */ new Set();
116
- _(this).forEach((n) => {
117
- const p = n.getRootNode();
118
- p instanceof ShadowRoot && e.add(p);
119
- }), e.forEach((n) => {
141
+ window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", e, { passive: !0, signal: o });
142
+ const r = /* @__PURE__ */ new Set();
143
+ S(this).forEach((n) => {
144
+ const l = n.getRootNode();
145
+ l instanceof ShadowRoot && r.add(l);
146
+ }), r.forEach((n) => {
120
147
  n.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o });
121
148
  }), this._triggerObserver = new ResizeObserver(() => {
122
- this._shouldResolveOverlayMode = !0, i();
149
+ this._overlayModeDirty = !0, i();
123
150
  });
124
151
  const s = this._getTriggerElement();
125
152
  s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
@@ -129,7 +156,7 @@ let l = class extends k {
129
156
  }
130
157
  stopTrackingTrigger() {
131
158
  var t, o, i;
132
- (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);
159
+ (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);
133
160
  }
134
161
  resolveMode() {
135
162
  this._hasActionContent = this._assignedActionElements.length > 0;
@@ -142,15 +169,20 @@ let l = class extends k {
142
169
  // ancestor of it; a clipper strictly inside the containing block does not clip. So each
143
170
  // clipper is counted against a mode only once that mode's containing block has been reached.
144
171
  resolveOverlayMode() {
145
- let t = !1, o = !1, i = 0, r = 0;
146
- const { documentElement: e, body: s } = this.ownerDocument;
147
- this._refreshTriggerClippers(), _(this).forEach((n) => {
148
- const p = getComputedStyle(n);
149
- if (p.display === "contents")
172
+ if (!this._overlayModeDirty)
173
+ return;
174
+ this._overlayModeDirty = !1;
175
+ let t = !1, o = !1;
176
+ const i = [], e = [], { documentElement: r, body: s } = this.ownerDocument;
177
+ this._refreshTriggerClippers(), S(this).forEach((l) => {
178
+ const d = getComputedStyle(l);
179
+ if (d.display === "contents")
150
180
  return;
151
- const v = X(p);
152
- (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));
153
- }), this.style.position = r < i ? "fixed" : "";
181
+ const a = et(d);
182
+ (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));
183
+ });
184
+ const n = e.length < i.length;
185
+ this.style.position = n ? "fixed" : "", this._overlayClippers = n ? e : i;
154
186
  }
155
187
  // Measures the trigger relative to the origin marker (which sits at the containing block's
156
188
  // origin) and writes CSS custom properties. Self-referential: correct for any containing
@@ -159,14 +191,14 @@ let l = class extends k {
159
191
  this._isPositioned = !1;
160
192
  const t = this._getTriggerElement();
161
193
  if (!t || !this._originElement) {
162
- ["top", "left", "width", "height"].forEach((f) => {
163
- this.style.removeProperty(`--tooltip-anchor-${f}`);
194
+ ["top", "left", "width", "height"].forEach((a) => {
195
+ this.style.removeProperty(`--tooltip-anchor-${a}`);
164
196
  }), this.style.removeProperty("--tooltip-container-inline-size"), this._isAnchorVisible = !0, this._isPositioned = !0;
165
197
  return;
166
198
  }
167
199
  t !== this._clippedTriggerElement && this._refreshTriggerClippers();
168
200
  const o = this._triggerClippers.reduce(
169
- (f, u) => f ? W(f, Y(u)) : null,
201
+ (a, f) => a ? V(a, R(f)) : null,
170
202
  t.getBoundingClientRect()
171
203
  );
172
204
  if (this._isAnchorVisible = o !== null, !o) {
@@ -174,21 +206,80 @@ let l = class extends k {
174
206
  return;
175
207
  }
176
208
  const i = this._originElement.getBoundingClientRect(), {
177
- top: r,
178
- left: e,
209
+ top: e,
210
+ left: r,
179
211
  width: s,
180
212
  height: n
181
213
  } = o;
182
- 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`);
183
- const p = t.parentElement, v = p ? p.getBoundingClientRect().width : s;
184
- this.style.setProperty("--tooltip-container-inline-size", `${v}px`), this._isPositioned = !0;
214
+ 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`);
215
+ const l = t.parentElement, d = l ? l.getBoundingClientRect().width : s;
216
+ this.style.setProperty("--tooltip-container-inline-size", `${d}px`), this.resolveCollision(o), this._isPositioned = !0;
217
+ }
218
+ resolveCollision(t) {
219
+ const o = this.renderRoot.querySelector(`.${h}`);
220
+ if (!o)
221
+ return;
222
+ const i = this._getCollisionBoundary();
223
+ if (!i) {
224
+ this._collisionSignature = null, this._setResolvedPosition(this.position ?? g.position);
225
+ return;
226
+ }
227
+ const e = this.type === "icon", r = getComputedStyle(this), s = r.direction === "rtl", n = o.offsetWidth, l = o.offsetHeight, d = [
228
+ t.left,
229
+ t.top,
230
+ t.width,
231
+ t.height,
232
+ i.left,
233
+ i.top,
234
+ i.width,
235
+ i.height,
236
+ n,
237
+ l,
238
+ s
239
+ ].join(":");
240
+ if (this._collisionSignature === d)
241
+ return;
242
+ this._collisionSignature = d;
243
+ 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);
244
+ let u, A, M = -1;
245
+ this._getCandidatePositions(x, C).some(({ side: O, alignment: $ }) => {
246
+ const L = ct(
247
+ O,
248
+ $,
249
+ t,
250
+ n,
251
+ l,
252
+ m,
253
+ s
254
+ );
255
+ if (pt(i, L))
256
+ return u = { side: O, alignment: $ }, !0;
257
+ const D = dt(i, L);
258
+ return D > M && (M = D, A = { side: O, alignment: $ }), !1;
259
+ });
260
+ const T = u ?? A, I = T ? `${T.side}${T.alignment}` : this.position ?? g.position;
261
+ this._setResolvedPosition(I);
262
+ }
263
+ _setResolvedPosition(t) {
264
+ this._resolvedPosition !== t && (this._resolvedPosition = t);
265
+ }
266
+ _getCollisionBoundary() {
267
+ const { documentElement: t } = this.ownerDocument, o = new DOMRect(0, 0, t.clientWidth, t.clientHeight);
268
+ return this._overlayClippers.reduce(
269
+ (i, e) => i ? V(i, R(e)) : null,
270
+ o
271
+ );
272
+ }
273
+ _getCandidatePositions(t, o) {
274
+ const i = [t, st[t], ...nt[t]], e = ["", "-start", "-end"];
275
+ return i.flatMap((r) => [o, ...e.filter((n) => n !== o)].map((n) => ({ side: r, alignment: n })));
185
276
  }
186
277
  // Cached because `projectOverTrigger` runs on every re-anchoring frame, and collecting these
187
278
  // costs a computed style per ancestor. Refreshed when the trigger changes and whenever the
188
279
  // overlay mode is resolved, which is the same cadence as an ancestor chain actually changing.
189
280
  _refreshTriggerClippers() {
190
281
  const t = this._getTriggerElement();
191
- this._clippedTriggerElement = t, this._triggerClippers = t ? U(t) : [];
282
+ this._clippedTriggerElement = t, this._triggerClippers = t ? rt(t) : [];
192
283
  }
193
284
  handleCloseButtonClick() {
194
285
  this._requestClose();
@@ -197,10 +288,10 @@ let l = class extends k {
197
288
  return this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
198
289
  }
199
290
  _requestOpen() {
200
- this.isOpen || this.dispatchEvent(new Event(q, { bubbles: !0, composed: !0 }));
291
+ this.isOpen || this.dispatchEvent(new Event(W, { bubbles: !0, composed: !0 }));
201
292
  }
202
293
  _requestClose() {
203
- this.isOpen && this.dispatchEvent(new Event(F, { bubbles: !0, composed: !0 }));
294
+ this.isOpen && this.dispatchEvent(new Event(Z, { bubbles: !0, composed: !0 }));
204
295
  }
205
296
  _startHoverCloseTimer() {
206
297
  this._hoverCloseTimer === void 0 && (this._hoverCloseTimer = setTimeout(() => {
@@ -211,13 +302,13 @@ let l = class extends k {
211
302
  this._hoverCloseTimer !== void 0 && (clearTimeout(this._hoverCloseTimer), this._hoverCloseTimer = void 0);
212
303
  }
213
304
  _rebuildInteractionListeners() {
214
- var r;
215
- if (this._teardownInteractionListeners(), !((r = this.triggers) != null && r.length)) return;
305
+ var e;
306
+ if (this._teardownInteractionListeners(), !((e = this.triggers) != null && e.length)) return;
216
307
  const t = new AbortController(), { signal: o } = t;
217
308
  this._interactionController = t;
218
309
  const i = this._getTriggerElement();
219
- if (this.ownerDocument.addEventListener("keydown", (e) => {
220
- e.key === "Escape" && this.isOpen && this._requestClose();
310
+ if (this.ownerDocument.addEventListener("keydown", (r) => {
311
+ r.key === "Escape" && this.isOpen && this._requestClose();
221
312
  }, { signal: o }), !!i) {
222
313
  if (this.triggers.includes("hover")) {
223
314
  i.addEventListener("mouseenter", () => {
@@ -225,24 +316,32 @@ let l = class extends k {
225
316
  }, { signal: o }), i.addEventListener("mouseleave", () => {
226
317
  this._startHoverCloseTimer();
227
318
  }, { signal: o });
228
- const e = this.renderRoot.querySelector(".c-tooltip");
229
- e && (e.addEventListener("mouseenter", () => {
319
+ const r = this.renderRoot.querySelector(".c-tooltip");
320
+ r && (r.addEventListener("mouseenter", () => {
230
321
  this._cancelHoverCloseTimer();
231
- }, { signal: o }), e.addEventListener("mouseleave", () => {
322
+ }, { signal: o }), r.addEventListener("mouseleave", () => {
232
323
  this._startHoverCloseTimer();
233
324
  }, { signal: o }));
234
325
  }
235
326
  this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
236
327
  this._requestOpen();
237
- }, { signal: o }), i.addEventListener("focusout", (e) => {
238
- const s = e.relatedTarget;
328
+ }, { signal: o }), i.addEventListener("focusout", (r) => {
329
+ const s = r.relatedTarget;
239
330
  s && (this.contains(s) || s === this) || this._requestClose();
240
- }, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (e) => {
241
- e.stopPropagation(), this.isOpen ? this._requestClose() : this._requestOpen();
242
- }, { signal: o }), this.ownerDocument.addEventListener("click", (e) => {
243
- var v;
244
- const s = e.composedPath()[0], n = this.contains(s) || ((v = this.shadowRoot) == null ? void 0 : v.contains(s)), p = i.contains(s) || s === i;
245
- !n && !p && this.isOpen && this._requestClose();
331
+ }, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (r) => {
332
+ if (r.stopPropagation(), !this.isOpen) {
333
+ this._openedByClick = !0, this._requestOpen();
334
+ return;
335
+ }
336
+ if (!this._openedByClick) {
337
+ this._openedByClick = !0;
338
+ return;
339
+ }
340
+ this._requestClose();
341
+ }, { signal: o }), this.ownerDocument.addEventListener("click", (r) => {
342
+ var d;
343
+ const s = r.composedPath()[0], n = this.contains(s) || ((d = this.shadowRoot) == null ? void 0 : d.contains(s)), l = i.contains(s) || s === i;
344
+ !n && !l && this.isOpen && this._requestClose();
246
345
  }, { signal: o }));
247
346
  }
248
347
  }
@@ -251,18 +350,18 @@ let l = class extends k {
251
350
  (t = this._interactionController) == null || t.abort(), this._interactionController = void 0, this._cancelHoverCloseTimer();
252
351
  }
253
352
  renderHeading() {
254
- const t = P(this.headingLevel);
255
- return y`<${t}
256
- id="${z}"
257
- class="${c}-heading"
258
- data-test-id="${z}">${this.heading}</${t}>`;
353
+ const t = X(this.headingLevel);
354
+ return z`<${t}
355
+ id="${E}"
356
+ class="${h}-heading"
357
+ data-test-id="${E}">${this.heading}</${t}>`;
259
358
  }
260
359
  renderCloseButton() {
261
360
  var t;
262
- return y`
361
+ return z`
263
362
  <pie-icon-button
264
- class="${c}-close"
265
- data-test-id="${d}-close"
363
+ class="${h}-close"
364
+ data-test-id="${v}-close"
266
365
  size="xsmall"
267
366
  variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
268
367
  .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
@@ -275,125 +374,129 @@ let l = class extends k {
275
374
  aria: t,
276
375
  heading: o,
277
376
  isDismissible: i,
278
- isOpen: r,
279
- position: e,
377
+ isOpen: e,
378
+ position: r,
280
379
  size: s,
281
380
  type: n,
282
- variant: p,
283
- _mode: v
284
- } = this, f = n === "icon", u = {
285
- [`${c}-layer`]: !0,
286
- [`${c}-layer--${e}`]: !0,
287
- [`${c}-layer--type-${n}`]: !0,
288
- "is-open": !!r,
381
+ variant: l,
382
+ _resolvedPosition: d,
383
+ _mode: a
384
+ } = this, f = d ?? r, m = n === "icon", x = {
385
+ [`${h}-layer`]: !0,
386
+ [`${h}-layer--${f}`]: !0,
387
+ [`${h}-layer--type-${n}`]: !0,
388
+ "is-open": !!e,
289
389
  "is-positioned": this._isPositioned,
290
390
  "is-anchorVisible": this._isAnchorVisible
291
- }, T = {
292
- [c]: !0,
293
- [`${c}--${e}`]: !0,
294
- [`${c}--${p}`]: !0,
295
- [`${c}--type-${n}`]: !0,
296
- [`${c}--size-${s}`]: !f,
391
+ }, C = {
392
+ [h]: !0,
393
+ [`${h}--${f}`]: !0,
394
+ [`${h}--${l}`]: !0,
395
+ [`${h}--type-${n}`]: !0,
396
+ [`${h}--size-${s}`]: !m,
297
397
  "is-dismissible": !!i,
298
- "has-action": v === "dialog",
398
+ "has-action": a === "dialog",
299
399
  "has-heading": !!o
300
- }, C = v === "dialog";
301
- return y`
302
- <div class="${c}-origin" data-test-id="${d}-origin"></div>
303
- <div class="${c}-anchor" data-test-id="${d}-anchor">
304
- <div class="${O(u)}" data-test-id="${d}-layer">
400
+ }, u = a === "dialog";
401
+ return z`
402
+ <div class="${h}-origin" data-test-id="${v}-origin"></div>
403
+ <div class="${h}-anchor" data-test-id="${v}-anchor">
404
+ <div class="${B(x)}" data-test-id="${v}-layer">
305
405
  <div
306
- class="${O(T)}"
307
- data-test-id="${d}"
308
- role="${R(v)}"
309
- aria-hidden="${!r}"
310
- aria-labelledby="${C && o ? z : b}"
311
- aria-label="${C && !o && (t != null && t.label) ? t.label : b}">
312
- ${f ? b : y`<div class="${c}-arrow" data-test-id="${d}-arrow"></div>`}
313
- <div class="${c}-body">
314
- ${o ? this.renderHeading() : b}
315
- <div class="${c}-content" data-test-id="${d}-content">
406
+ class="${B(C)}"
407
+ data-test-id="${v}"
408
+ role="${N(a)}"
409
+ aria-hidden="${!e}"
410
+ aria-labelledby="${u && o ? E : y}"
411
+ aria-label="${u && !o && (t != null && t.label) ? t.label : y}">
412
+ ${m ? y : z`<div class="${h}-arrow" data-test-id="${v}-arrow"></div>`}
413
+ <div class="${h}-body">
414
+ ${o ? this.renderHeading() : y}
415
+ <div class="${h}-content" data-test-id="${v}-content">
316
416
  <slot name="content"></slot>
317
417
  </div>
318
418
  </div>
319
- <div class="${c}-action" data-test-id="${d}-action">
419
+ <div class="${h}-action" data-test-id="${v}-action">
320
420
  <slot name="action" @slotchange="${this.resolveMode}"></slot>
321
421
  </div>
322
- ${i ? this.renderCloseButton() : b}
422
+ ${i ? this.renderCloseButton() : y}
323
423
  </div>
324
424
  </div>
325
425
  </div>`;
326
426
  }
327
427
  };
328
- l.styles = E(H);
329
- a([
330
- g({ type: String })
331
- ], l.prototype, "trigger", 2);
332
- a([
333
- g({ type: Boolean })
334
- ], l.prototype, "isOpen", 2);
335
- a([
336
- g({ type: String }),
337
- m(d, M, h.position)
338
- ], l.prototype, "position", 2);
339
- a([
340
- g({ type: String }),
341
- m(d, D, h.size)
342
- ], l.prototype, "size", 2);
343
- a([
344
- g({ type: String }),
345
- m(d, B, h.variant)
346
- ], l.prototype, "variant", 2);
347
- a([
348
- g({ type: String }),
349
- m(d, I, h.type)
350
- ], l.prototype, "type", 2);
351
- a([
352
- g({ type: Boolean })
353
- ], l.prototype, "isDismissible", 2);
354
- a([
355
- g({ type: String })
356
- ], l.prototype, "heading", 2);
357
- a([
358
- g({ type: String }),
359
- m(d, V, h.headingLevel)
360
- ], l.prototype, "headingLevel", 2);
361
- a([
362
- g({ type: Object })
363
- ], l.prototype, "aria", 2);
364
- a([
365
- g({ type: Array })
366
- ], l.prototype, "triggers", 2);
367
- a([
368
- L({ slot: "action" })
369
- ], l.prototype, "_assignedActionElements", 2);
370
- a([
371
- A(".c-tooltip-origin")
372
- ], l.prototype, "_originElement", 2);
373
- a([
374
- x()
375
- ], l.prototype, "_hasActionContent", 2);
376
- a([
377
- x()
378
- ], l.prototype, "_isPositioned", 2);
379
- a([
380
- x()
381
- ], l.prototype, "_isAnchorVisible", 2);
382
- l = a([
383
- S("pie-tooltip")
384
- ], l);
428
+ c.styles = F(tt);
429
+ p([
430
+ b({ type: String })
431
+ ], c.prototype, "trigger", 2);
432
+ p([
433
+ b({ type: Boolean })
434
+ ], c.prototype, "isOpen", 2);
435
+ p([
436
+ b({ type: String }),
437
+ w(v, Y, g.position)
438
+ ], c.prototype, "position", 2);
439
+ p([
440
+ b({ type: String }),
441
+ w(v, G, g.size)
442
+ ], c.prototype, "size", 2);
443
+ p([
444
+ b({ type: String }),
445
+ w(v, J, g.variant)
446
+ ], c.prototype, "variant", 2);
447
+ p([
448
+ b({ type: String }),
449
+ w(v, K, g.type)
450
+ ], c.prototype, "type", 2);
451
+ p([
452
+ b({ type: Boolean })
453
+ ], c.prototype, "isDismissible", 2);
454
+ p([
455
+ b({ type: String })
456
+ ], c.prototype, "heading", 2);
457
+ p([
458
+ b({ type: String }),
459
+ w(v, Q, g.headingLevel)
460
+ ], c.prototype, "headingLevel", 2);
461
+ p([
462
+ b({ type: Object })
463
+ ], c.prototype, "aria", 2);
464
+ p([
465
+ b({ type: Array })
466
+ ], c.prototype, "triggers", 2);
467
+ p([
468
+ j({ slot: "action" })
469
+ ], c.prototype, "_assignedActionElements", 2);
470
+ p([
471
+ H(".c-tooltip-origin")
472
+ ], c.prototype, "_originElement", 2);
473
+ p([
474
+ k()
475
+ ], c.prototype, "_hasActionContent", 2);
476
+ p([
477
+ k()
478
+ ], c.prototype, "_isPositioned", 2);
479
+ p([
480
+ k()
481
+ ], c.prototype, "_isAnchorVisible", 2);
482
+ p([
483
+ k()
484
+ ], c.prototype, "_resolvedPosition", 2);
485
+ c = p([
486
+ U("pie-tooltip")
487
+ ], c);
385
488
  export {
386
- F as ON_TOOLTIP_CLOSE_EVENT,
387
- q as ON_TOOLTIP_OPEN_EVENT,
388
- l as PieTooltip,
389
- c as componentClass,
390
- d as componentSelector,
391
- h as defaultProps,
392
- V as headingLevels,
393
- rt as modes,
394
- M as positions,
395
- D as sizes,
396
- et as triggers,
397
- I as types,
398
- B as variants
489
+ Z as ON_TOOLTIP_CLOSE_EVENT,
490
+ W as ON_TOOLTIP_OPEN_EVENT,
491
+ c as PieTooltip,
492
+ h as componentClass,
493
+ v as componentSelector,
494
+ g as defaultProps,
495
+ Q as headingLevels,
496
+ zt as modes,
497
+ Y as positions,
498
+ G as sizes,
499
+ wt as triggers,
500
+ K as types,
501
+ J as variants
399
502
  };