npm - @justeattakeaway/pie-tooltip - Versions diffs - 0.5.2 → 0.6.0 - Mend

@justeattakeaway/pie-tooltip 0.5.2 → 0.6.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

package/README.md CHANGED Viewed

@@ -48,7 +48,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 |---|---|---|---|
 | `trigger` | Any string | The `id` of the element the panel is anchored to. The trigger lives elsewhere in the DOM and is never slotted into the tooltip. | `undefined` |
 | `isOpen` | `true`, `false` | When true, the panel is visible. The component never writes to this property. | `false` |
-| `position` | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | The preferred side of the trigger the panel sits on, and its alignment along the cross axis. The panel repositions itself when this would collide with the viewport or a clipping scroll container. | `top` |
+| `position` | `top`, `top-start`, `top-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`, `right`, `right-start`, `right-end` | The side of the trigger the panel sits on, and its alignment along the cross axis. | `top` |
 | `size` | `default`, `fit-to-content`, `fill-container` | How the panel sizes itself. `default` is a fixed 280px and wraps, `fit-to-content` is as wide as its content, and `fill-container` matches the inline size of the trigger's parent element. Not applied when `type` is `icon`. | `default` |
 | `variant` | `default`, `inverse` | The colour treatment of the panel. `default` is the dark panel, `inverse` the light one. | `default` |
 | `type` | `default`, `icon` | The presentation of the panel. `icon` is the compact treatment intended for icon triggers: it has no arrow and is always as wide as its content, so `size` and `--tooltip-width` have no effect on it. | `default` |
@@ -106,17 +106,6 @@ right    right-start    right-end
 In right-to-left languages, everything on the inline axis mirrors. The alignments follow the reading direction, so `top-start` aligns against the right-hand edge, and `left` and `right` swap: a panel asked for on the left appears on the right. The `-start` and `-end` alignments of `left` and `right` are on the block axis, which has no direction to mirror, so only the side moves.
-### Collision detection
-`position` is a preference, not a guarantee. Before the panel is shown, and on every scroll, resize or direction change while it is open, the component measures the panel against the space available and repositions it if the preferred position would collide.
-- It flips to the opposite side first: `top` to `bottom`, and so on.
-- It then tries the remaining sides.
-- Within a side, it shifts the alignment (for example `top-start` to `top-end`) so the panel stays fully in view.
-- If no position fits entirely, it uses whichever position shows the most of the panel.
-The available space is the viewport, narrowed by any ancestor that clips the panel. Collision detection is always on and cannot be disabled.
 ## Sizing
 | `size` | Behaviour |

package/custom-elements.json CHANGED Viewed

@@ -343,14 +343,6 @@
               "privacy": "private",
               "default": "true"
             },
-            {
-              "kind": "field",
-              "name": "_resolvedPosition",
-              "type": {
-                "text": "TooltipProps['position'] | undefined"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "_clippedTriggerElement",
@@ -369,24 +361,6 @@
               "privacy": "private",
               "default": "[]"
             },
-            {
-              "kind": "field",
-              "name": "_overlayClippers",
-              "type": {
-                "text": "Array<Element>"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "_collisionSignature",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "_overlayModeDirty",
@@ -538,76 +512,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "resolveCollision",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "anchorRect",
-                  "type": {
-                    "text": "DOMRect"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_setResolvedPosition",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "position",
-                  "type": {
-                    "text": "TooltipProps['position']"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_getCollisionBoundary",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "DOMRect | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_getCandidatePositions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<{ side: TooltipSide; alignment: TooltipAlignment }>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "preferredSide",
-                  "type": {
-                    "text": "TooltipSide"
-                  }
-                },
-                {
-                  "name": "preferredAlignment",
-                  "type": {
-                    "text": "TooltipAlignment"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "_refreshTriggerClippers",

package/dist/index.d.ts CHANGED Viewed

@@ -52,11 +52,8 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
     private _hasActionContent;
     private _isPositioned;
     private _isAnchorVisible;
-    private _resolvedPosition;
     private _clippedTriggerElement;
     private _triggerClippers;
-    private _overlayClippers;
-    private _collisionSignature;
     private _overlayModeDirty;
     private _triggerTrackingController;
     private _interactionController;
@@ -78,10 +75,6 @@ export declare class PieTooltip extends PieElement implements TooltipProps {
     private resolveMode;
     private resolveOverlayMode;
     private projectOverTrigger;
-    private resolveCollision;
-    private _setResolvedPosition;
-    private _getCollisionBoundary;
-    private _getCandidatePositions;
     private _refreshTriggerClippers;
     private handleCloseButtonClick;
     private _getTriggerElement;
@@ -107,7 +100,7 @@ export declare interface TooltipProps {
     trigger?: string;
     /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
-    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
+    /** The side of the trigger the panel sits on, and its alignment along the cross axis. */
     position?: typeof positions[number];
     /** How the panel sizes itself. Not applied when `type` is `icon`. */
     size?: typeof sizes[number];

package/dist/index.js CHANGED Viewed

@@ -1,19 +1,19 @@
-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 { LitElement as $, unsafeCSS as E, nothing as b } from "lit";
+import { property as v, queryAssignedElements as A, query as L, state as x } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import { ifDefined as D } from "lit/directives/if-defined.js";
+import { unsafeStatic as M, html as y } from "lit/static-html.js";
+import { validPropertyValues as m, safeCustomElement as P } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
-const _ = class _ extends F {
+const w = class w extends $ {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", _.v);
+    this.getAttribute("v") || this.setAttribute("v", w.v);
   }
 };
-_.v = "0.5.2";
-let E = _;
-const Y = [
+w.v = "0.6.0";
+let _ = w;
+const S = [
   "top",
   "top-start",
   "top-end",
@@ -26,7 +26,7 @@ const Y = [
   "right",
   "right-start",
   "right-end"
-], 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 = {
+], B = ["default", "fit-to-content", "fill-container"], I = ["default", "inverse"], R = ["default", "icon"], q = ["h2", "h3", "h4", "h5", "h6"], rt = ["hover", "focus", "click"], st = ["tooltip", "dialog"], p = "pie-tooltip", a = "c-tooltip", F = `${p}-open`, V = `${p}-close`, g = {
   isOpen: !1,
   position: "top",
   size: "default",
@@ -34,14 +34,14 @@ const Y = [
   type: "default",
   isDismissible: !1,
   headingLevel: "h2"
-}, 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;white-space:normal;text-wrap:wrap;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;
+}, 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;white-space:normal;text-wrap:wrap;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 j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, c = (t, o, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? N(o, i) : o, s = t.length - 1, n; s >= 0; s--)
+    (n = t[s]) && (e = (r ? n(o, i, e) : n(e)) || e);
+  return r && e && j(o, i, e), e;
 };
-const et = 5, B = () => new Promise(requestAnimationFrame), rt = (t) => {
-  const i = (e) => !!e && e !== "none";
+const X = 5, O = () => new Promise(requestAnimationFrame), U = (t) => {
+  const o = (r) => !!r && r !== "none";
   return [
     t.transform,
     t.perspective,
@@ -50,65 +50,40 @@ const et = 5, B = () => new Promise(requestAnimationFrame), rt = (t) => {
     t.translate,
     t.rotate,
     t.scale
-  ].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;
+  ].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);
+}, k = (t) => {
+  const { documentElement: o } = t.ownerDocument, i = [];
+  let r = t;
+  for (; r !== o; ) {
+    const e = r.assignedSlot ?? r.parentNode, s = e instanceof ShadowRoot ? e.host : e;
     if (!(s instanceof Element))
       break;
-    o.push(s), e = s;
+    i.push(s), r = s;
   }
-  return o;
-}, st = (t) => {
-  const { documentElement: i, body: o } = t.ownerDocument;
-  return P(t).filter((e) => {
-    if (e === i || e === o)
+  return i;
+}, Y = (t) => {
+  const { documentElement: o, body: i } = t.ownerDocument;
+  return k(t).filter((r) => {
+    if (r === o || r === i)
       return !1;
-    const r = getComputedStyle(e);
-    return r.overflowX !== "visible" || r.overflowY !== "visible";
+    const e = getComputedStyle(r);
+    return e.overflowX !== "visible" || e.overflowY !== "visible";
   });
-}, I = (t) => {
-  const { left: i, top: o } = t.getBoundingClientRect(), {
-    clientLeft: e,
-    clientTop: r,
+}, W = (t) => {
+  const { left: o, top: i } = t.getBoundingClientRect(), {
+    clientLeft: r,
+    clientTop: e,
     clientWidth: s,
     clientHeight: n
   } = t;
-  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);
+  return new DOMRect(o + r, i + e, s, n);
+}, G = (t, o) => {
+  const i = Math.max(t.left, o.left), r = Math.max(t.top, o.top), e = Math.min(t.right, o.right), s = Math.min(t.bottom, o.bottom);
+  return e <= i || s <= r ? null : new DOMRect(i, r, e - i, s - r);
 };
-let c = class extends E {
+let l = class extends _ {
   constructor() {
-    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();
+    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._overlayModeDirty = !0, this._reanchorFrame = 0, this._openedByClick = !1, this._instanceId = crypto.randomUUID();
   }
   get _headingId() {
     return `pie-tooltip-heading-${this._instanceId}`;
@@ -121,10 +96,8 @@ let c = class extends E {
     this.resolveMode(), this._overlayModeDirty = !0, this.resolveOverlayMode(), this.projectOverTrigger(), this._rebuildInteractionListeners();
   }
   updated(t) {
-    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();
+    const o = ["trigger", "isOpen", "position", "size"];
+    this.isOpen && t.has("isOpen") && (this._overlayModeDirty = !0), this.isOpen || (this._openedByClick = !1), t.has("trigger") && (this._overlayModeDirty = !0), this.resolveOverlayMode(), o.some((i) => t.has(i)) && this.projectOverTrigger(), this.isOpen && t.has("trigger") && this.stopTrackingTrigger(), this.isOpen ? this.startTrackingTrigger() : this.stopTrackingTrigger(), (t.has("triggers") || t.has("trigger")) && this._rebuildInteractionListeners();
   }
   disconnectedCallback() {
     this._teardownInteractionListeners(), this.stopTrackingTrigger(), super.disconnectedCallback();
@@ -132,50 +105,50 @@ let c = class extends E {
   async focusPanel() {
     if (this._mode !== "dialog")
       return !1;
-    await this.updateComplete, await B();
-    const t = this.renderRoot.querySelector(`.${p}-content`);
+    await this.updateComplete, await O();
+    const t = this.renderRoot.querySelector(`.${a}-content`);
     if (!t)
       return !1;
-    const i = () => {
-      var o;
-      return ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === t;
+    const o = () => {
+      var i;
+      return ((i = this.shadowRoot) == null ? void 0 : i.activeElement) === t;
     };
-    for (let o = 0; o < et; o++) {
-      if (t.focus({ preventScroll: !0 }), i())
+    for (let i = 0; i < X; i++) {
+      if (t.focus({ preventScroll: !0 }), o())
         return !0;
-      await B();
+      await O();
     }
     return !1;
   }
   startTrackingTrigger() {
     if (this._triggerTrackingController)
       return;
-    const t = new AbortController(), { signal: i } = t, o = () => {
+    const t = new AbortController(), { signal: o } = t, i = () => {
       this._reanchorFrame || (this._reanchorFrame = requestAnimationFrame(() => {
         this._reanchorFrame = 0, this.resolveOverlayMode(), this.projectOverTrigger();
       }));
-    }, e = () => {
-      this._overlayModeDirty = !0, o();
+    }, r = () => {
+      this._overlayModeDirty = !0, i();
     };
-    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 });
+    window.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o }), window.addEventListener("resize", r, { passive: !0, signal: o });
+    const e = /* @__PURE__ */ new Set();
+    k(this).forEach((n) => {
+      const d = n.getRootNode();
+      d instanceof ShadowRoot && e.add(d);
+    }), e.forEach((n) => {
+      n.addEventListener("scroll", i, { capture: !0, passive: !0, signal: o });
     }), this._triggerObserver = new ResizeObserver(() => {
-      this._overlayModeDirty = !0, o();
+      this._overlayModeDirty = !0, i();
     });
     const s = this._getTriggerElement();
-    s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(o), this._directionObserver.observe(this.ownerDocument.documentElement, {
+    s && this._triggerObserver.observe(s), this._directionObserver = new MutationObserver(i), this._directionObserver.observe(this.ownerDocument.documentElement, {
       attributeFilter: ["dir"],
       subtree: !0
     }), this._triggerTrackingController = t;
   }
   stopTrackingTrigger() {
-    var t, 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);
+    var t, o, i;
+    (t = this._triggerTrackingController) == null || t.abort(), this._triggerTrackingController = void 0, (o = this._directionObserver) == null || o.disconnect(), this._directionObserver = void 0, (i = this._triggerObserver) == null || i.disconnect(), this._triggerObserver = void 0, this._reanchorFrame && (cancelAnimationFrame(this._reanchorFrame), this._reanchorFrame = 0);
   }
   resolveMode() {
     this._hasActionContent = this._assignedActionElements.length > 0;
@@ -184,108 +157,49 @@ let c = class extends E {
     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);
+    let t = !1, o = !1;
+    const i = [], r = [], { documentElement: e, body: s } = this.ownerDocument;
+    this._refreshTriggerClippers(), k(this).forEach((d) => {
+      const h = getComputedStyle(d);
       if (h.display === "contents")
         return;
-      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 f = U(h);
+      (f || h.position !== "static") && (t = !0), f && (o = !0), (h.overflowX !== "visible" || h.overflowY !== "visible") && !(d === e || d === s) && (t && i.push(d), o && r.push(d));
     });
-    const n = e.length < o.length;
-    this.style.position = n ? "fixed" : "", this._overlayClippers = n ? e : o;
+    const n = r.length < i.length;
+    this.style.position = n ? "fixed" : "";
   }
   projectOverTrigger() {
     this._isPositioned = !1;
     const t = this._getTriggerElement();
     if (!t || !this._originElement) {
-      ["top", "left", "width", "height"].forEach((a) => {
-        this.style.removeProperty(`--tooltip-anchor-${a}`);
+      ["top", "left", "width", "height"].forEach((f) => {
+        this.style.removeProperty(`--tooltip-anchor-${f}`);
       }), this.style.removeProperty("--tooltip-container-inline-size"), this._isAnchorVisible = !0, this._isPositioned = !0;
       return;
     }
     t !== this._clippedTriggerElement && this._refreshTriggerClippers();
-    const i = this._triggerClippers.reduce(
-      (a, v) => a ? R(a, I(v)) : null,
+    const o = this._triggerClippers.reduce(
+      (f, u) => f ? G(f, W(u)) : null,
       t.getBoundingClientRect()
     );
-    if (this._isAnchorVisible = i !== null, !i) {
+    if (this._isAnchorVisible = o !== null, !o) {
       this._isPositioned = !0;
       return;
     }
-    const o = this._originElement.getBoundingClientRect(), {
-      top: e,
-      left: r,
+    const i = this._originElement.getBoundingClientRect(), {
+      top: r,
+      left: e,
       width: s,
       height: n
-    } = 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 })));
+    } = 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 d = t.parentElement, h = d ? d.getBoundingClientRect().width : s;
+    this.style.setProperty("--tooltip-container-inline-size", `${h}px`), this._isPositioned = !0;
   }
   _refreshTriggerClippers() {
     const t = this._getTriggerElement();
-    this._clippedTriggerElement = t, this._triggerClippers = t ? st(t) : [];
+    this._clippedTriggerElement = t, this._triggerClippers = t ? Y(t) : [];
   }
   handleCloseButtonClick() {
     this._requestClose();
@@ -294,10 +208,10 @@ let c = class extends E {
     return this.trigger ? this.ownerDocument.getElementById(this.trigger) : null;
   }
   _requestOpen() {
-    this.isOpen || this.dispatchEvent(new Event(W, { bubbles: !0, composed: !0 }));
+    this.isOpen || this.dispatchEvent(new Event(F, { bubbles: !0, composed: !0 }));
   }
   _requestClose() {
-    this.isOpen && this.dispatchEvent(new Event(Z, { bubbles: !0, composed: !0 }));
+    this.isOpen && this.dispatchEvent(new Event(V, { bubbles: !0, composed: !0 }));
   }
   _startHoverCloseTimer() {
     this._hoverCloseTimer === void 0 && (this._hoverCloseTimer = setTimeout(() => {
@@ -308,34 +222,34 @@ let c = class extends E {
     this._hoverCloseTimer !== void 0 && (clearTimeout(this._hoverCloseTimer), this._hoverCloseTimer = void 0);
   }
   _rebuildInteractionListeners() {
-    var e;
+    var r;
     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) {
+    const t = new AbortController(), { signal: o } = t;
+    if (this._interactionController = t, this.ownerDocument.addEventListener("keydown", (e) => {
+      e.key === "Escape" && this.isOpen && this._requestClose();
+    }, { signal: o }), !((r = this.triggers) != null && r.length)) return;
+    const i = this._getTriggerElement();
+    if (i) {
       if (this.triggers.includes("hover")) {
-        o.addEventListener("mouseenter", () => {
+        i.addEventListener("mouseenter", () => {
           this._cancelHoverCloseTimer(), this._requestOpen();
-        }, { signal: i }), o.addEventListener("mouseleave", () => {
+        }, { signal: o }), i.addEventListener("mouseleave", () => {
           this._startHoverCloseTimer();
-        }, { signal: i });
-        const r = this.renderRoot.querySelector(".c-tooltip");
-        r && (r.addEventListener("mouseenter", () => {
+        }, { signal: o });
+        const e = this.renderRoot.querySelector(".c-tooltip");
+        e && (e.addEventListener("mouseenter", () => {
           this._cancelHoverCloseTimer();
-        }, { signal: i }), r.addEventListener("mouseleave", () => {
+        }, { signal: o }), e.addEventListener("mouseleave", () => {
           this._startHoverCloseTimer();
-        }, { signal: i }));
+        }, { signal: o }));
       }
-      this.triggers.includes("focus") && (o.addEventListener("focusin", () => {
+      this.triggers.includes("focus") && (i.addEventListener("focusin", () => {
         this._requestOpen();
-      }, { signal: i }), o.addEventListener("focusout", (r) => {
-        const s = r.relatedTarget;
+      }, { signal: o }), i.addEventListener("focusout", (e) => {
+        const s = e.relatedTarget;
         s && (this.contains(s) || s === this) || this._requestClose();
-      }, { signal: i })), this.triggers.includes("click") && (o.addEventListener("click", (r) => {
-        if (r.stopPropagation(), !this.isOpen) {
+      }, { signal: o })), this.triggers.includes("click") && (i.addEventListener("click", (e) => {
+        if (e.stopPropagation(), !this.isOpen) {
           this._openedByClick = !0, this._requestOpen();
           return;
         }
@@ -344,11 +258,11 @@ let c = class extends E {
           return;
         }
         this._requestClose();
-      }, { signal: i }), this.ownerDocument.addEventListener("click", (r) => {
+      }, { signal: o }), this.ownerDocument.addEventListener("click", (e) => {
         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 }));
+        const s = e.composedPath()[0], n = this.contains(s) || ((h = this.shadowRoot) == null ? void 0 : h.contains(s)), d = i.contains(s) || s === i;
+        !n && !d && this.isOpen && this._requestClose();
+      }, { signal: o }));
     }
   }
   _teardownInteractionListeners() {
@@ -356,18 +270,18 @@ let c = class extends E {
     (t = this._interactionController) == null || t.abort(), this._interactionController = void 0, this._cancelHoverCloseTimer();
   }
   renderHeading() {
-    const t = X(this.headingLevel);
-    return z`<${t}
+    const t = M(this.headingLevel);
+    return y`<${t}
                         id="${this._headingId}"
-                        class="${p}-heading"
-                        data-test-id="${g}-heading">${this.heading}</${t}>`;
+                        class="${a}-heading"
+                        data-test-id="${p}-heading">${this.heading}</${t}>`;
   }
   renderCloseButton() {
     var t;
-    return z`
+    return y`
             <pie-icon-button
-                class="${p}-close"
-                data-test-id="${g}-close"
+                class="${a}-close"
+                data-test-id="${p}-close"
                 size="xsmall"
                 variant="${this.variant === "inverse" ? "ghost-secondary" : "ghost-inverse"}"
                 .aria="${{ label: (t = this.aria) == null ? void 0 : t.close }}"
@@ -378,134 +292,130 @@ let c = class extends E {
   render() {
     const {
       aria: t,
-      heading: i,
-      isDismissible: o,
-      isOpen: e,
-      position: r,
+      heading: o,
+      isDismissible: i,
+      isOpen: r,
+      position: e,
       size: s,
       type: n,
-      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,
+      variant: d,
+      _mode: h
+    } = this, f = n === "icon", u = {
+      [`${a}-layer`]: !0,
+      [`${a}-layer--${e}`]: !0,
+      [`${a}-layer--type-${n}`]: !0,
+      "is-open": !!r,
       "is-positioned": this._isPositioned,
       "is-anchorVisible": this._isAnchorVisible
     }, C = {
-      [p]: !0,
-      [`${p}--${v}`]: !0,
-      [`${p}--${l}`]: !0,
-      [`${p}--type-${n}`]: !0,
-      [`${p}--size-${s}`]: !y,
-      "is-dismissible": !!o,
+      [a]: !0,
+      [`${a}--${e}`]: !0,
+      [`${a}--${d}`]: !0,
+      [`${a}--type-${n}`]: !0,
+      [`${a}--size-${s}`]: !f,
+      "is-dismissible": !!i,
       "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">
+      "has-heading": !!o
+    }, z = h === "dialog";
+    return y`
+            <div class="${a}-origin" data-test-id="${p}-origin"></div>
+            <div class="${a}-anchor" data-test-id="${p}-anchor">
+                <div class="${T(u)}" data-test-id="${p}-layer">
                     <div
-                        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}
+                        class="${T(C)}"
+                        data-test-id="${p}"
+                        role="${D(h)}"
+                        aria-hidden="${!r}"
+                        aria-labelledby="${z && o ? this._headingId : b}"
+                        aria-label="${z && !o && (t != null && t.label) ? t.label : b}">
+                        ${f ? b : y`<div class="${a}-arrow" data-test-id="${p}-arrow"></div>`}
+                        <div class="${a}-body">
+                            ${o ? this.renderHeading() : b}
                             <div
-                                class="${p}-content"
-                                tabindex="${b ? -1 : u}"
-                                data-test-id="${g}-content">
+                                class="${a}-content"
+                                tabindex="${z ? -1 : b}"
+                                data-test-id="${p}-content">
                                 <slot name="content"></slot>
                             </div>
                         </div>
-                        <div class="${p}-action" data-test-id="${g}-action">
+                        <div class="${a}-action" data-test-id="${p}-action">
                             <slot name="action" @slotchange="${this.resolveMode}"></slot>
                         </div>
-                        ${o ? this.renderCloseButton() : u}
+                        ${i ? this.renderCloseButton() : b}
                     </div>
                 </div>
             </div>`;
   }
 };
-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);
+l.styles = E(H);
+c([
+  v({ type: String })
+], l.prototype, "trigger", 2);
+c([
+  v({ type: Boolean })
+], l.prototype, "isOpen", 2);
+c([
+  v({ type: String }),
+  m(p, S, g.position)
+], l.prototype, "position", 2);
+c([
+  v({ type: String }),
+  m(p, B, g.size)
+], l.prototype, "size", 2);
+c([
+  v({ type: String }),
+  m(p, I, g.variant)
+], l.prototype, "variant", 2);
+c([
+  v({ type: String }),
+  m(p, R, g.type)
+], l.prototype, "type", 2);
+c([
+  v({ type: Boolean })
+], l.prototype, "isDismissible", 2);
+c([
+  v({ type: String })
+], l.prototype, "heading", 2);
+c([
+  v({ type: String }),
+  m(p, q, g.headingLevel)
+], l.prototype, "headingLevel", 2);
+c([
+  v({ type: Object })
+], l.prototype, "aria", 2);
+c([
+  v({ type: Array })
+], l.prototype, "triggers", 2);
+c([
+  A({ slot: "action" })
+], l.prototype, "_assignedActionElements", 2);
+c([
+  L(".c-tooltip-origin")
+], l.prototype, "_originElement", 2);
+c([
+  x()
+], l.prototype, "_hasActionContent", 2);
+c([
+  x()
+], l.prototype, "_isPositioned", 2);
+c([
+  x()
+], l.prototype, "_isAnchorVisible", 2);
+l = c([
+  P("pie-tooltip")
+], l);
 export {
-  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
+  V as ON_TOOLTIP_CLOSE_EVENT,
+  F as ON_TOOLTIP_OPEN_EVENT,
+  l as PieTooltip,
+  a as componentClass,
+  p as componentSelector,
+  g as defaultProps,
+  q as headingLevels,
+  st as modes,
+  S as positions,
+  B as sizes,
+  rt as triggers,
+  R as types,
+  I as variants
 };

package/dist/react.d.ts CHANGED Viewed

@@ -55,11 +55,8 @@ declare class PieTooltip_2 extends PieElement implements TooltipProps {
     private _hasActionContent;
     private _isPositioned;
     private _isAnchorVisible;
-    private _resolvedPosition;
     private _clippedTriggerElement;
     private _triggerClippers;
-    private _overlayClippers;
-    private _collisionSignature;
     private _overlayModeDirty;
     private _triggerTrackingController;
     private _interactionController;
@@ -81,10 +78,6 @@ declare class PieTooltip_2 extends PieElement implements TooltipProps {
     private resolveMode;
     private resolveOverlayMode;
     private projectOverTrigger;
-    private resolveCollision;
-    private _setResolvedPosition;
-    private _getCollisionBoundary;
-    private _getCandidatePositions;
     private _refreshTriggerClippers;
     private handleCloseButtonClick;
     private _getTriggerElement;
@@ -117,7 +110,7 @@ export declare interface TooltipProps {
     trigger?: string;
     /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
-    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
+    /** The side of the trigger the panel sits on, and its alignment along the cross axis. */
     position?: typeof positions[number];
     /** How the panel sizes itself. Not applied when `type` is `icon`. */
     size?: typeof sizes[number];

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-tooltip",
   "description": "PIE Design System Tooltip built using Web Components",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts CHANGED Viewed

@@ -42,7 +42,7 @@ export interface TooltipProps {
     /** When true, the panel is visible. The component never writes to this property. */
     isOpen?: boolean;
-    /** The preferred side and alignment; the panel repositions itself to avoid collisions. */
+    /** The side of the trigger the panel sits on, and its alignment along the cross axis. */
     position?: typeof positions[number];
     /** How the panel sizes itself. Not applied when `type` is `icon`. */

package/src/index.ts CHANGED Viewed

@@ -125,115 +125,6 @@ const intersectRects = (a: DOMRect, b: DOMRect): DOMRect | null => {
     return new DOMRect(left, top, right - left, bottom - top);
 };
-type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
-type TooltipAlignment = '' | '-start' | '-end';
-interface CandidateRect {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-}
-const oppositeSide: Record<TooltipSide, TooltipSide> = {
-    top: 'bottom',
-    bottom: 'top',
-    left: 'right',
-    right: 'left',
-};
-const crossSides: Record<TooltipSide, Array<TooltipSide>> = {
-    top: ['left', 'right'],
-    bottom: ['left', 'right'],
-    left: ['top', 'bottom'],
-    right: ['top', 'bottom'],
-};
-const parsePosition = (position: TooltipProps['position']): { side: TooltipSide; alignment: TooltipAlignment } => {
-    const match = /^(top|bottom|left|right)(-start|-end)?$/.exec(position ?? '');
-    if (!match) {
-        return { side: 'top', alignment: '' };
-    }
-    return { side: match[1] as TooltipSide, alignment: (match[2] ?? '') as TooltipAlignment };
-};
-const toPhysicalSide = (side: TooltipSide, isRtl: boolean): TooltipSide => {
-    if (!isRtl) {
-        return side;
-    }
-    if (side === 'left') {
-        return 'right';
-    }
-    if (side === 'right') {
-        return 'left';
-    }
-    return side;
-};
-const getCandidateRect = (
-    side: TooltipSide,
-    alignment: TooltipAlignment,
-    anchor: DOMRect,
-    panelWidth: number,
-    panelHeight: number,
-    offset: number,
-    isRtl: boolean,
-): CandidateRect => {
-    const physicalSide = toPhysicalSide(side, isRtl);
-    const isVerticalSide = physicalSide === 'top' || physicalSide === 'bottom';
-    let left = 0;
-    let top = 0;
-    if (physicalSide === 'top') {
-        top = anchor.top - offset - panelHeight;
-    } else if (physicalSide === 'bottom') {
-        top = anchor.bottom + offset;
-    } else if (physicalSide === 'left') {
-        left = anchor.left - offset - panelWidth;
-    } else {
-        left = anchor.right + offset;
-    }
-    if (isVerticalSide) {
-        if (alignment === '') {
-            left = anchor.left + (anchor.width / 2) - (panelWidth / 2);
-        } else if (alignment === '-start') {
-            left = isRtl ? anchor.right - panelWidth : anchor.left;
-        } else {
-            left = isRtl ? anchor.left : anchor.right - panelWidth;
-        }
-    } else if (alignment === '') {
-        top = anchor.top + (anchor.height / 2) - (panelHeight / 2);
-    } else {
-        top = alignment === '-start' ? anchor.top : anchor.bottom - panelHeight;
-    }
-    return {
-        left,
-        top,
-        right: left + panelWidth,
-        bottom: top + panelHeight,
-    };
-};
-const containsRect = (boundary: DOMRect, rect: CandidateRect): boolean => rect.left >= boundary.left &&
-    rect.right <= boundary.right &&
-    rect.top >= boundary.top &&
-    rect.bottom <= boundary.bottom;
-const getVisibleArea = (boundary: DOMRect, rect: CandidateRect): number => {
-    const width = Math.min(boundary.right, rect.right) - Math.max(boundary.left, rect.left);
-    const height = Math.min(boundary.bottom, rect.bottom) - Math.max(boundary.top, rect.top);
-    return Math.max(0, width) * Math.max(0, height);
-};
 /**
  * @tagname pie-tooltip
  * @event {Event} pie-tooltip-open - When a configured trigger asks for the panel. Set `isOpen` to `true` in response.
@@ -291,16 +182,10 @@ export class PieTooltip extends PieElement implements TooltipProps {
     @state() private _isAnchorVisible = true;
-    @state() private _resolvedPosition: TooltipProps['position'] | undefined;
     private _clippedTriggerElement: Element | null = null;
     private _triggerClippers: Array<Element> = [];
-    private _overlayClippers: Array<Element> = [];
-    private _collisionSignature: string | null = null;
     private _overlayModeDirty = true;
     private _triggerTrackingController: AbortController | undefined;
@@ -355,15 +240,9 @@ export class PieTooltip extends PieElement implements TooltipProps {
             this._overlayModeDirty = true;
         }
-        const isAnchoringChange = anchoringProperties.some((prop) => changedProperties.has(prop));
-        if (isAnchoringChange) {
-            this._collisionSignature = null;
-        }
         this.resolveOverlayMode();
-        if (isAnchoringChange) {
+        if (anchoringProperties.some((prop) => changedProperties.has(prop))) {
             this.projectOverTrigger();
         }
@@ -552,7 +431,6 @@ export class PieTooltip extends PieElement implements TooltipProps {
         const useFixed = fixedClippingAncestors.length < absoluteClippingAncestors.length;
         this.style.position = useFixed ? 'fixed' : '';
-        this._overlayClippers = useFixed ? fixedClippingAncestors : absoluteClippingAncestors;
     }
     private projectOverTrigger (): void {
@@ -603,121 +481,9 @@ export class PieTooltip extends PieElement implements TooltipProps {
         this.style.setProperty('--tooltip-container-inline-size', `${containerInlineSize}px`);
-        this.resolveCollision(visibleRect);
         this._isPositioned = true;
     }
-    private resolveCollision (anchorRect: DOMRect): void {
-        const panel = this.renderRoot.querySelector<HTMLElement>(`.${componentClass}`);
-        if (!panel) {
-            return;
-        }
-        const boundary = this._getCollisionBoundary();
-        if (!boundary) {
-            this._collisionSignature = null;
-            this._setResolvedPosition(this.position ?? defaultProps.position);
-            return;
-        }
-        const isIconType = this.type === 'icon';
-        const hostStyles = getComputedStyle(this);
-        const isRtl = hostStyles.direction === 'rtl';
-        const panelWidth = panel.offsetWidth;
-        const panelHeight = panel.offsetHeight;
-        const signature = [
-            anchorRect.left, anchorRect.top, anchorRect.width, anchorRect.height,
-            boundary.left, boundary.top, boundary.width, boundary.height,
-            panelWidth, panelHeight,
-            isRtl,
-        ].join(':');
-        if (this._collisionSignature === signature) {
-            return;
-        }
-        this._collisionSignature = signature;
-        const offset = parseFloat(hostStyles.getPropertyValue('--tooltip-offset')) || 0;
-        const arrowSize = parseFloat(hostStyles.getPropertyValue('--tooltip-arrow-size')) || 0;
-        const layerOffset = isIconType ? offset : offset + arrowSize;
-        const { side: preferredSide, alignment: preferredAlignment } = parsePosition(this.position ?? defaultProps.position);
-        let fitting: { side: TooltipSide; alignment: TooltipAlignment } | undefined;
-        let bestFallback: { side: TooltipSide; alignment: TooltipAlignment } | undefined;
-        let bestArea = -1;
-        this._getCandidatePositions(preferredSide, preferredAlignment).some(({ side, alignment }) => {
-            const rect = getCandidateRect(
-                side,
-                alignment,
-                anchorRect,
-                panelWidth,
-                panelHeight,
-                layerOffset,
-                isRtl,
-            );
-            if (containsRect(boundary, rect)) {
-                fitting = { side, alignment };
-                return true;
-            }
-            const area = getVisibleArea(boundary, rect);
-            if (area > bestArea) {
-                bestArea = area;
-                bestFallback = { side, alignment };
-            }
-            return false;
-        });
-        const resolved = fitting ?? bestFallback;
-        const resolvedPosition = resolved
-            ? `${resolved.side}${resolved.alignment}` as TooltipProps['position']
-            : this.position ?? defaultProps.position;
-        this._setResolvedPosition(resolvedPosition);
-    }
-    private _setResolvedPosition (position: TooltipProps['position']): void {
-        if (this._resolvedPosition !== position) {
-            this._resolvedPosition = position;
-        }
-    }
-    private _getCollisionBoundary (): DOMRect | null {
-        const { documentElement } = this.ownerDocument;
-        const viewport = new DOMRect(0, 0, documentElement.clientWidth, documentElement.clientHeight);
-        return this._overlayClippers.reduce<DOMRect | null>(
-            (rect, clipper) => (rect ? intersectRects(rect, getClipRect(clipper)) : null),
-            viewport,
-        );
-    }
-    private _getCandidatePositions (
-        preferredSide: TooltipSide,
-        preferredAlignment: TooltipAlignment,
-    ): Array<{ side: TooltipSide; alignment: TooltipAlignment }> {
-        const sideOrder: Array<TooltipSide> = [preferredSide, oppositeSide[preferredSide], ...crossSides[preferredSide]];
-        const allAlignments: Array<TooltipAlignment> = ['', '-start', '-end'];
-        return sideOrder.flatMap((side) => {
-            const alignments = [preferredAlignment, ...allAlignments.filter((alignment) => alignment !== preferredAlignment)];
-            return alignments.map((alignment) => ({ side, alignment }));
-        });
-    }
     private _refreshTriggerClippers (): void {
         const triggerElement = this._getTriggerElement();
@@ -886,15 +652,13 @@ export class PieTooltip extends PieElement implements TooltipProps {
             heading,
             isDismissible,
             isOpen,
-            position: preferredPosition,
+            position,
             size,
             type,
             variant,
-            _resolvedPosition,
             _mode: mode,
         } = this;
-        const position = _resolvedPosition ?? preferredPosition;
         const isIconType = type === 'icon';
         const layerClasses = {