@pine-ds/core 3.1.0 → 3.2.0

package/components/pds-toast.js

@@ -0,0 +1,137 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pds-icon2.js';
+
+const pdsToastCss = ":host{--animation-duration:0.3s;--animation-timing:cubic-bezier(0.4, 0, 0.2, 1);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}";
+
+const PdsToast$1 = /*@__PURE__*/ proxyCustomElement(class PdsToast extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pdsToastDismissed = createEvent(this, "pdsToastDismissed", 7);
+        /**
+         * Whether the toast can be dismissed manually via the close button.
+         * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.
+         * @default true
+         */
+        this.dismissible = true;
+        /**
+         * The duration in milliseconds to show the toast before auto-dismissing.
+         * Set to 0 to disable auto-dismiss.
+         * @default 4500
+         */
+        this.duration = 4500;
+        /**
+         * The type of toast to display.
+         * - default: Grey background (default)
+         * - danger: Red background
+         * - loading: With spinner animation
+         * @default 'default'
+         */
+        this.type = 'default';
+        /**
+         * Whether the toast is currently visible.
+         */
+        this.isVisible = true;
+        /**
+         * Whether the toast is animating out.
+         */
+        this.isAnimatingOut = false;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    handleDurationChange(newDuration) {
+        if (this.dismissTimer) {
+            window.clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+        if (newDuration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    async dismiss() {
+        // Start the animation out
+        this.isAnimatingOut = true;
+        // Wait for animation to complete before hiding and cleanup
+        await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration
+        this.isVisible = false;
+        this.cleanup();
+        this.pdsToastDismissed.emit({ componentId: this.componentId });
+    }
+    // Private methods
+    cleanup() {
+        if (this.dismissTimer) {
+            window.clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+    }
+    startDismissTimer() {
+        this.dismissTimer = window.setTimeout(() => {
+            this.dismiss();
+        }, this.duration);
+    }
+    renderIcon() {
+        // Loading type takes priority
+        if (this.type === 'loading') {
+            return (h("div", { class: "pds-toast__loader" }, h("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, h("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
+        }
+        // Return icon if provided, otherwise undefined (which renders as nothing)
+        return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
+    }
+    render() {
+        return (h(Host, { key: 'c950cf3a269952f6048f79e5c6c793c65ff2b89a', hidden: !this.isVisible }, h("div", { key: '0cec10124aecec0c7af86b460165a577c65d1571', class: {
+                'pds-toast': true,
+                [`pds-toast--${this.type}`]: this.type !== 'default',
+                'pds-toast--animating-out': this.isAnimatingOut
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '5dda529f788df94ed0e444924fb11a1061a20dd1', class: "pds-toast__message" }, h("slot", { key: '29a6c93dbf14f92b1375eff7a3c8f4556babe67a' })), this.dismissible && (h("button", { key: 'f3bcbcacceb5ef2b1d2127d408879e2a95418230', type: "button", class: "pds-toast__button", onClick: () => {
+                this.dismiss();
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '1ea48def81a89dc7ba38f493abb0107632005075', name: "remove" }))))));
+    }
+    static get watchers() { return {
+        "duration": ["handleDurationChange"]
+    }; }
+    static get style() { return pdsToastCss; }
+}, [1, "pds-toast", {
+        "componentId": [1, "component-id"],
+        "dismissible": [4],
+        "duration": [2],
+        "icon": [1],
+        "type": [1],
+        "isVisible": [32],
+        "isAnimatingOut": [32],
+        "dismiss": [64]
+    }, undefined, {
+        "duration": ["handleDurationChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-toast", "pds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-toast":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsToast$1);
+            }
+            break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PdsToast = PdsToast$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsToast, defineCustomElement };
+//# sourceMappingURL=pds-toast.js.map
+
+//# sourceMappingURL=pds-toast.js.map

package/components/pds-toast.js.map

@@ -0,0 +1 @@
+{"file":"pds-toast.js","mappings":"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","names":["PdsToast","__stencil_proxyCustomElement"],"sources":["src/components/pds-toast/pds-toast.scss?tag=pds-toast&encapsulation=shadow","src/components/pds-toast/pds-toast.tsx"],"sourcesContent":[":host {\n  --animation-duration: 0.3s;\n  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);\n  --padding-inline: var(--pine-dimension-md);\n  --padding-inline-desktop: var(--pine-dimension-2xl);\n  --sizing-height-default: 68px;\n  --sizing-min-width: calc(var(--sizing-total-width) - (var(--padding-inline) * 2));\n  --sizing-min-width-desktop: calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));\n  --sizing-total-width: 350px;\n\n  box-sizing: border-box;\n  display: block;\n  font: var(--pine-typography-body-medium);\n}\n\n.pds-toast {\n  align-items: center;\n  animation: pds-toast-animate-in var(--animation-duration) var(--animation-timing);\n  background-color: var(--pine-color-primary);\n  border-radius: var(--pine-dimension-xs);\n  box-shadow: var(--pine-box-shadow);\n  color: var(--pine-color-text-primary);\n  display: flex;\n  height: var(--sizing-height-default);\n  justify-content: flex-start;\n  margin-block-end: var(--pine-dimension-2xs);\n  max-width: 90vw;\n  min-width: var(--sizing-min-width);\n  padding: 0 var(--padding-inline);\n  position: relative;\n  width: fit-content;\n\n  @media screen and (max-width: 767px) {\n    height: 36px;\n    max-width: calc(100vw - (var(--pine-dimension-2xs) * 2));\n    min-width: auto;\n    padding-inline: var(--pine-dimension-2xs);\n  }\n\n  &--danger {\n    background-color: var(--pine-color-danger);\n  }\n\n  &--loading {\n    .pds-toast__loader {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n      margin-inline-end: var(--pine-dimension-sm);\n      position: relative;\n\n      &-spinner {\n        animation: pds-toast-rotate 2s linear infinite;\n        height: 20px;\n        width: 20px;\n      }\n\n      &-path {\n        animation: pds-toast-dash 1.5s ease-in-out infinite;\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n        stroke-linecap: round;\n      }\n    }\n  }\n}\n\n.pds-toast__icon {\n  color: var(--pine-color-text-primary);\n  display: inline-flex;\n  margin-inline-end: var(--pine-dimension-sm);\n}\n\n.pds-toast__message {\n  font: var(--pine-typography-body-sm-medium);\n  margin-inline-end: auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  // Style all slotted links\n  ::slotted(a) {\n    color: var(--pine-color-text-primary);\n    margin-inline-start: var(--pine-dimension-xs);\n    opacity: 0.7;\n    text-decoration: underline;\n\n    &:hover,\n    &:focus-visible {\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--pine-color-text-primary);\n      outline-offset: 2px;\n    }\n  }\n}\n\n.pds-toast__button {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  margin-inline-start: var(--pine-dimension-md);\n  opacity: 0.7;\n  padding: 0;\n  white-space: nowrap;\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n  }\n\n  &:focus {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-dimension-2xs);\n  }\n}\n\n// Animation keyframes\n@keyframes pds-toast-animate-in {\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pds-toast-animate-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n// Loading animation keyframes\n@keyframes pds-toast-rotate {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes pds-toast-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35;\n  }\n\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124;\n  }\n}\n\n// Animation for dismissing\n:host([hidden]) .pds-toast,\n.pds-toast--animating-out {\n  animation: pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;\n  pointer-events: none; /* Prevent interaction during animation */\n}\n","import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-toast',\n  styleUrl: 'pds-toast.scss',\n  shadow: true,\n})\nexport class PdsToast {\n  // Props\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Whether the toast can be dismissed manually via the close button.\n   * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.\n   * @default true\n   */\n  @Prop() dismissible: boolean = true;\n\n  /**\n   * The duration in milliseconds to show the toast before auto-dismissing.\n   * Set to 0 to disable auto-dismiss.\n   * @default 4500\n   */\n  @Prop() duration: number = 4500;\n\n  /**\n   * The name of the icon to display in the toast.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The type of toast to display.\n   * - default: Grey background (default)\n   * - danger: Red background\n   * - loading: With spinner animation\n   * @default 'default'\n   */\n  @Prop() type: 'default' | 'danger' | 'loading' = 'default';\n\n  /**\n   * Whether the toast is currently visible.\n   */\n  @State() isVisible: boolean = true;\n\n  /**\n   * Whether the toast is animating out.\n   */\n  @State() isAnimatingOut: boolean = false;\n\n  // Private properties\n  /**\n   * Timer for auto-dismissal\n   */\n  private dismissTimer?: number;\n\n  /**\n   * Event emitted when the toast is dismissed, either manually or automatically.\n   */\n  @Event() pdsToastDismissed: EventEmitter<{ componentId?: string }>;\n\n  componentDidLoad() {\n    if (this.duration > 0) {\n      this.startDismissTimer();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanup();\n  }\n\n  @Watch('duration')\n  handleDurationChange(newDuration: number) {\n    if (this.dismissTimer) {\n      window.clearTimeout(this.dismissTimer);\n      this.dismissTimer = undefined;\n    }\n    if (newDuration > 0) {\n      this.startDismissTimer();\n    }\n  }\n\n  @Method()\n  async dismiss(): Promise<void> {\n    // Start the animation out\n    this.isAnimatingOut = true;\n\n    // Wait for animation to complete before hiding and cleanup\n    await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration\n\n    this.isVisible = false;\n    this.cleanup();\n    this.pdsToastDismissed.emit({ componentId: this.componentId });\n  }\n\n  // Private methods\n  private cleanup(): void {\n    if (this.dismissTimer) {\n      window.clearTimeout(this.dismissTimer);\n      this.dismissTimer = undefined;\n    }\n  }\n\n  private startDismissTimer(): void {\n    this.dismissTimer = window.setTimeout(() => {\n      this.dismiss();\n    }, this.duration);\n  }\n\n  private renderIcon() {\n    // Loading type takes priority\n    if (this.type === 'loading') {\n      return (\n        <div class=\"pds-toast__loader\">\n          <svg class=\"pds-toast__loader-spinner\" viewBox=\"25 25 50 50\" aria-hidden=\"true\">\n            <circle class=\"pds-toast__loader-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n      );\n    }\n\n    // Return icon if provided, otherwise undefined (which renders as nothing)\n    return this.icon && <pds-icon name={this.icon} class=\"pds-toast__icon\" />;\n  }\n\n  render() {\n    return (\n      <Host hidden={!this.isVisible}>\n        <div\n          class={{\n            'pds-toast': true,\n            [`pds-toast--${this.type}`]: this.type !== 'default',\n            'pds-toast--animating-out': this.isAnimatingOut\n          }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          {this.renderIcon()}\n\n          <span class=\"pds-toast__message\">\n            <slot></slot>\n          </span>\n\n          {this.dismissible && (\n            <button\n              type=\"button\"\n              class=\"pds-toast__button\"\n              onClick={() => {\n                this.dismiss();\n              }}\n              aria-label=\"Dismiss message\"\n            >\n              <pds-icon name=\"remove\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-tooltip.js

@@ -1,80 +1,106 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
-    if (elem == undefined)
-        return;
+    if (elem === null || overlay === null)
+        return false;
+    if (typeof elemPlacement !== 'string' || elemPlacement.trim() === '') {
+        return false;
+    }
     const rect = elem.getBoundingClientRect();
     const contentRect = overlay.getBoundingClientRect();
-    // Exit the function if the placement is not set
-    if (!elemPlacement || elemPlacement == "")
-        return;
+    // Reset styles
+    overlay.style.top = '';
+    overlay.style.left = '';
+    overlay.style.right = '';
+    overlay.style.bottom = '';
+    overlay.style.transform = '';
+    // Use fixed positioning for portal overlays
+    overlay.style.position = 'fixed';
+    // Detect if the trigger is a span with only text or a text node
+    let isTextTrigger = false;
+    if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.TEXT_NODE) {
+        isTextTrigger = true;
+    }
+    else if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.ELEMENT_NODE) {
+        const child = elem.childNodes[0];
+        if (child.tagName === 'SPAN' && child.childNodes.length === 1 && child.childNodes[0].nodeType === Node.TEXT_NODE) {
+            isTextTrigger = true;
+        }
+    }
     switch (true) {
-        case elemPlacement.includes("right"):
-            overlay.style.top = '50%';
-            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
-            }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('right'):
+            if (isTextTrigger) {
+                // Align to the bottom of the trigger for text triggers
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
+            }
+            overlay.style.left = `${rect.right + offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("left"):
-            overlay.style.top = '50%';
-            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
-            }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('left'):
+            if (isTextTrigger) {
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
+            }
+            overlay.style.left = `${rect.left - contentRect.width - offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("bottom"):
-            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
-            }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('bottom'):
+            overlay.style.top = `${rect.bottom + offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
-        case elemPlacement.includes("top"):
-            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
-            }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('top'):
+            overlay.style.top = `${rect.top - contentRect.height - offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
     }
+    return true;
 };
 
-const pdsTooltipCss = ":host{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px;display:inline-block;position:relative}:host ::slotted(*){display:-ms-flexbox;display:flex}:host ::slotted([slot=content]){display:block;max-width:var(--tooltip-dimension-max-width);white-space:normal}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}:host(.pds-tooltip--has-html-content) .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
+const pdsTooltipCss = ".pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:absolute;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:1}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
 
 const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
+        /**
+         * Internal state: true if the tooltip was opened by user interaction (hover/focus),
+         * false if opened via the `opened` prop or currently closed.
+         */
+        this._isInteractiveOpen = false;
+        this.portalEl = null;
+        this.triggerEl = null;
+        this.contentDiv = null;
+        this.slotMutationObserver = null;
+        this.overlayResizeObserver = null;
         /**
          * Determines when the tooltip is open
          * @defaultValue false
@@ -106,44 +132,80 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
          */
         this.opened = false;
         this.handleHide = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
             this.hideTooltip();
+            this._isInteractiveOpen = false;
         };
         this.handleShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this._isInteractiveOpen = true;
             this.showTooltip();
         };
         this.handlePageShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
             this.opened = false;
+            this._isInteractiveOpen = false;
+        };
+        this.handleScroll = () => {
+            if (this.opened) {
+                if (!this._isInteractiveOpen) {
+                    this.repositionPortal();
+                }
+                else {
+                    this.hideTooltip();
+                    this._isInteractiveOpen = false;
+                }
+            }
+        };
+        this.handleSpaNavigation = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this.hideTooltip();
+            this._isInteractiveOpen = false;
         };
     }
-    handleOpenToggle() {
-        if (this.opened) {
-            this.handleShow();
-        }
-        else {
-            this.handleHide();
+    handleOpenToggle(newValue, oldValue) {
+        if (newValue === false && oldValue === true) {
+            this._isInteractiveOpen = false;
         }
     }
     componentWillLoad() {
-        if (this.opened) {
-            this.showTooltip();
-        }
-        this.el.addEventListener('blur', this.handleHide, true);
-        this.el.addEventListener('focus', this.handleShow, true);
+        this._isInteractiveOpen = false;
     }
     componentDidLoad() {
-        // fix for Safari iOS back button issue
         window.addEventListener('pageshow', this.handlePageShow);
+        this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
+        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
+        if (contentSlotWrapper !== null) {
+            this.slotMutationObserver = new MutationObserver(() => {
+                if (this.opened && this.portalEl !== null) {
+                    this.removePortal();
+                    this.createPortal();
+                }
+            });
+            this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
+        }
         return () => {
             window.removeEventListener('pageshow', this.handlePageShow);
+            if (this.slotMutationObserver !== null) {
+                this.slotMutationObserver.disconnect();
+            }
         };
     }
-    componentDidUpdate() {
-        if (this.opened) {
-            this.showTooltip();
-        }
-    }
     componentDidRender() {
-        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
+        if (this.opened && this.portalEl === null) {
+            this.createPortal();
+        }
+        else if (!this.opened && this.portalEl !== null) {
+            this.removePortal();
+        }
     }
     /**
      * Shows the tooltip by enabling the opened property
@@ -157,21 +219,159 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
     async hideTooltip() {
         this.opened = false;
     }
+    /**
+     * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.
+     * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.
+     * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.
+     * This helps with precise alignment.
+     */
+    determinePositioningAnchor() {
+        let positioningAnchor = this.triggerEl;
+        if (this.triggerEl !== null) {
+            const children = this.triggerEl.childNodes;
+            for (let i = 0; i < children.length; i++) {
+                const childNode = children[i];
+                if (childNode.nodeType === Node.ELEMENT_NODE) {
+                    positioningAnchor = childNode;
+                    break; // Found the first element, use it as the anchor
+                }
+            }
+        }
+        // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),
+        // positioningAnchor will correctly remain this.triggerEl (the span).
+        return positioningAnchor;
+    }
+    /**
+     * Centralized method to calculate and apply the tooltip's position.
+     * Uses the determined anchor element and the current content dimensions.
+     */
+    repositionPortal() {
+        const anchor = this.determinePositioningAnchor();
+        if (anchor !== null && this.contentDiv !== null) {
+            positionTooltip({ elem: anchor, elemPlacement: this.placement, overlay: this.contentDiv });
+            const placementParts = this.placement.split('-');
+            const primaryPlacement = placementParts[0];
+            const isCardinalCenterPlacement = placementParts.length === 1;
+            if (isCardinalCenterPlacement) {
+                const anchorRect = anchor.getBoundingClientRect();
+                const overlayRect = this.contentDiv.getBoundingClientRect();
+                if (primaryPlacement === 'left' || primaryPlacement === 'right') {
+                    const currentOverlayTop = parseFloat(this.contentDiv.style.top || '0');
+                    const anchorCenterY = anchorRect.top + (anchorRect.height / 2);
+                    const overlayCenterY = overlayRect.top + (overlayRect.height / 2);
+                    const adjustmentY = anchorCenterY - overlayCenterY;
+                    if (Math.abs(adjustmentY) > 0.5) {
+                        this.contentDiv.style.top = `${currentOverlayTop + adjustmentY}px`;
+                    }
+                }
+                else if (primaryPlacement === 'top' || primaryPlacement === 'bottom') {
+                    const currentOverlayLeft = parseFloat(this.contentDiv.style.left || '0');
+                    const anchorCenterX = anchorRect.left + (anchorRect.width / 2);
+                    const overlayCenterX = overlayRect.left + (overlayRect.width / 2);
+                    const adjustmentX = anchorCenterX - overlayCenterX;
+                    if (Math.abs(adjustmentX) > 0.5) {
+                        this.contentDiv.style.left = `${currentOverlayLeft + adjustmentX}px`;
+                    }
+                }
+            }
+        }
+    }
+    createPortal() {
+        if (this.portalEl !== null)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = `pds-tooltip pds-tooltip--${this.placement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+        this.portalEl.style.position = 'fixed';
+        this.portalEl.style.zIndex = '9999';
+        if (this.portalEl.id === '') {
+            this.portalEl.id = this.componentId || this.el.id || `pds-tooltip-portal-${PdsTooltip.instanceCounter++}`;
+        }
+        if (this.portalEl.getAttribute('id') !== this.portalEl.id) {
+            this.portalEl.setAttribute('id', this.portalEl.id);
+        }
+        this.portalEl.setAttribute('role', 'tooltip');
+        this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+        this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        this.portalEl.style.maxWidth = this.maxWidth;
+        this.contentDiv = document.createElement('div');
+        this.contentDiv.className = 'pds-tooltip__content';
+        this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+        this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        this.contentDiv.setAttribute('role', 'tooltip');
+        this.contentDiv.style.maxWidth = this.maxWidth;
+        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
+        const slottedContentContainer = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('[slot="content"]');
+        let hasSlottedContent = false;
+        if (slottedContentContainer !== null) {
+            const childrenToClone = Array.from(slottedContentContainer.childNodes);
+            if (childrenToClone.length > 0) {
+                const hasMeaningfulNode = childrenToClone.some(node => {
+                    var _a;
+                    return node.nodeType === Node.ELEMENT_NODE ||
+                        (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
+                });
+                if (hasMeaningfulNode) {
+                    hasSlottedContent = true;
+                    childrenToClone.forEach((node /*, index*/) => {
+                        var _a;
+                        if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
+                            this.contentDiv.appendChild(node.cloneNode(true));
+                        }
+                    });
+                }
+            }
+        }
+        if (!hasSlottedContent) {
+            if (this.content !== '') {
+                this.contentDiv.textContent = this.content;
+            }
+        }
+        this.portalEl.appendChild(this.contentDiv);
+        document.body.appendChild(this.portalEl);
+        this.repositionPortal();
+        if (this.contentDiv !== null) {
+            this.overlayResizeObserver = new ResizeObserver(() => {
+                this.repositionPortal();
+            });
+            this.overlayResizeObserver.observe(this.contentDiv);
+        }
+        // Add global listeners when portal is created
+        window.addEventListener('scroll', this.handleScroll, true);
+        window.addEventListener('popstate', this.handleSpaNavigation, true);
+        window.addEventListener('hashchange', this.handleSpaNavigation, true);
+        // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed
+        if (this.triggerEl !== null && this.portalEl.id !== '') {
+            this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
+        }
+    }
+    removePortal() {
+        if (this.overlayResizeObserver !== null && this.contentDiv !== null) {
+            this.overlayResizeObserver.unobserve(this.contentDiv);
+            this.overlayResizeObserver = null;
+        }
+        if (this.portalEl !== null) {
+            window.removeEventListener('scroll', this.handleScroll, true);
+            window.removeEventListener('popstate', this.handleSpaNavigation, true);
+            window.removeEventListener('hashchange', this.handleSpaNavigation, true);
+            document.body.removeChild(this.portalEl);
+            this.portalEl = null;
+        }
+        // Remove ARIA attribute from trigger
+        if (this.triggerEl !== null) {
+            this.triggerEl.removeAttribute('aria-describedby');
+        }
+        this.contentDiv = null;
+    }
     render() {
-        return (h(Host, { key: '2732f2c81bc66814945206ddde15367e64a89ec2', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '58705f1fbb1d88b91337100ba32de07f7838be52', class: `
-            pds-tooltip
-            pds-tooltip--${this.placement}
-            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
-            ${this.opened ? 'pds-tooltip--is-open' : ''}
-            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '33e96cb4f46ebc418f79971047a37fc5c3498e0d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: 'cca7b5d50e2cbc0f839a46caa5a5dc8a79f1cb15' })), h("div", { key: '22c666894f7835629e00e9c2c3964bcaf63000ae', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '83a805d9eef71ac261a03d56853ccc8ac7bfe818', name: "content" }), this.content))));
+        const hostId = this.componentId || undefined;
+        return (h(Host, { key: '0fe2bea1ea0e8eaeb5879644694a2e129f1f4898', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f26feb3c37957573d3b6b0a55091b2e7012ae31b', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocus: this.handleShow, onBlur: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'c7940e3aa7f17fc5d5fcdedc0a624204ceed291c' })), h("div", { key: '0c8dc83e3b7f8c1337aae8641d80f63c0866c348', class: "pds-tooltip__content-slot-wrapper", style: { display: 'none' } }, h("slot", { key: '2f6701768c0debdd69673da3ad7dc34b8b237f6a', name: "content" }))));
     }
     get el() { return this; }
     static get watchers() { return {
         "opened": ["handleOpenToggle"]
     }; }
     static get style() { return pdsTooltipCss; }
-}, [1, "pds-tooltip", {
+}, [4, "pds-tooltip", {
         "content": [1],
         "componentId": [1, "component-id"],
         "hasArrow": [4, "has-arrow"],
@@ -179,12 +379,14 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
         "placement": [513],
         "maxWidth": [1, "max-width"],
         "opened": [1540],
+        "_isInteractiveOpen": [32],
         "isOpen": [32],
         "showTooltip": [64],
         "hideTooltip": [64]
     }, undefined, {
         "opened": ["handleOpenToggle"]
     }]);
+PdsTooltip$1.instanceCounter = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;