@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -1,49 +1,184 @@
 import { Host, h } from "@stencil/core";
-import { positionTooltip } from "../../utils/overlay";
+import { classNamesOf, isStencilClass } from "../../utils/keep-hydrated";
+import { findPortalTarget, isTopLayerInDocument, onTopLayerClose } from "../../utils/portal-target";
+import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 /**
  * @slot (default) - The tooltip's target element
  * @slot content - HTML content for the tooltip
+ * @lightDom renders-markup
  */
 export class PdsTooltip {
     constructor() {
+        /**
+         * 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.resolvedPlacement = 'right';
+        this.triggerEl = null;
+        this.contentDiv = null;
+        this.lastCopiedHtml = null;
+        this.slotMutationObserver = null;
+        this.contentSyncFrame = null;
+        this.currentPathname = '';
+        this.pathnameCheckInterval = null;
+        this.stopAutoUpdate = null;
+        this.stopWatchingPortalHost = null;
+        /**
+         * Determines whether or not the tooltip has an arrow
+         * @defaultValue true
+         */
+        this.hasArrow = true;
+        /**
+         * Enable this option when using the content slot
+         * @defaultValue false
+         */
+        this.htmlContent = false;
+        /**
+         * Determines the preferred position of the tooltip
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+        /**
+         * Sets the maximum width of the tooltip content
+         * @defaultValue "352px"
+         */
+        this.maxWidth = '352px';
+        /**
+         * Determines whether or not the tooltip is visible
+         * @defaultValue false
+         */
+        this.opened = false;
+        // connectedCallback fires on every reconnect (unlike componentWillLoad/componentDidLoad,
+        // which are one-time), so resetting this here re-arms exactly one reconnect-cleanup pass
+        // per connect instead of re-scanning on every render for the component's whole lifetime.
+        this.hasCheckedReconnect = false;
         this.handleHide = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
             this.hideTooltip();
-            this.pdsTooltipHide.emit();
+            this._isInteractiveOpen = false;
         };
         this.handleShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this._isInteractiveOpen = true;
             this.showTooltip();
-            this.pdsTooltipShow.emit();
         };
-        this.isOpen = false;
-        this.content = undefined;
-        this.componentId = undefined;
-        this.hasArrow = true;
-        this.htmlContent = false;
-        this.placement = 'right';
-        this.opened = false;
+        this.handlePageShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this.opened = false;
+            this._isInteractiveOpen = false;
+        };
+        this.handleSpaNavigation = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this.hideTooltip();
+            this._isInteractiveOpen = false;
+        };
+        this.checkPathnameChange = () => {
+            if (window.location.pathname !== this.currentPathname) {
+                this.currentPathname = window.location.pathname;
+                this.handleSpaNavigation();
+            }
+        };
+        this.scheduleContentSync = () => {
+            if (this.contentSyncFrame !== null)
+                return;
+            this.contentSyncFrame = requestAnimationFrame(() => {
+                this.contentSyncFrame = null;
+                if (this.portalEl === null || this.contentDiv === null)
+                    return;
+                const copy = this.copySlottedContent();
+                const strippedCopy = this.strippedHtml(copy);
+                if (strippedCopy === this.lastCopiedHtml)
+                    return;
+                this.lastCopiedHtml = strippedCopy;
+                this.contentDiv.textContent = '';
+                this.contentDiv.append(...Array.from(copy.childNodes));
+                this.repositionPortal().catch(error => {
+                    console.warn('Failed to reposition tooltip after a content change:', error);
+                });
+            });
+        };
     }
-    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;
+        this.resolvedPlacement = this.placement;
     }
-    componentDidUpdate() {
-        if (this.opened) {
-            this.showTooltip();
+    componentDidLoad() {
+        window.addEventListener('pageshow', this.handlePageShow);
+        this.currentPathname = window.location.pathname;
+        this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
+        // no return; Stencil ignores teardown functions here
+    }
+    connectedCallback() {
+        this.hasCheckedReconnect = false;
+    }
+    disconnectedCallback() {
+        window.removeEventListener('pageshow', this.handlePageShow);
+        // Ensure global listeners/intervals are removed if still present
+        if (this.portalEl !== null) {
+            this.removePortal();
         }
+        if (this.pathnameCheckInterval !== null) {
+            clearInterval(this.pathnameCheckInterval);
+            this.pathnameCheckInterval = null;
+        }
+        // Ensure autoUpdate is stopped if still present
+        if (this.stopAutoUpdate !== null) {
+            this.stopAutoUpdate();
+            this.stopAutoUpdate = null;
+        }
+    }
+    // Unwraps stale nested trigger/content-slot-wrapper siblings left by a page-cache (Turbo, bfcache) reconnect, rerouting content-slot content back to the real content wrapper. Drains both wrappers (not just trigger) so content rerouted into contentWrapper is itself re-checked for further nesting.
+    unwrapReconnectedSlots() {
+        // Direct children only — querySelector would find a stale nested wrapper first.
+        const trigger = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__trigger'));
+        const contentWrapper = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
+        if (trigger === undefined || contentWrapper === undefined)
+            return;
+        const staleSelector = '.pds-tooltip__trigger, .pds-tooltip__content-slot-wrapper';
+        const findStaleIn = (root) => Array.from(root.children).find((child) => child.matches(staleSelector));
+        [trigger, contentWrapper].forEach((root) => {
+            let stale = findStaleIn(root);
+            while (stale !== undefined) {
+                const destination = stale.matches('.pds-tooltip__content-slot-wrapper') ? contentWrapper : trigger;
+                Array.from(stale.childNodes).forEach((node) => destination === root ? root.insertBefore(node, stale) : destination.appendChild(node));
+                stale.remove();
+                stale = findStaleIn(root);
+            }
+        });
     }
     componentDidRender() {
-        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
+        if (!this.hasCheckedReconnect) {
+            this.unwrapReconnectedSlots();
+            this.hasCheckedReconnect = true;
+        }
+        if (this.opened && this.portalEl === null) {
+            this.createPortal();
+        }
+        else if (!this.opened && this.portalEl !== null) {
+            this.removePortal();
+        }
+        // Update portal class when opened state changes
+        if (this.portalEl !== null) {
+            this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+            // Update ARIA attributes to stay in sync with visual open state
+            this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+            this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        }
     }
     /**
      * Shows the tooltip by enabling the opened property
@@ -57,17 +192,244 @@ export class PdsTooltip {
     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 using floating UI.
+     * Uses the determined anchor element and applies computePosition with flip, offset, and shift.
+     */
+    async repositionPortal() {
+        const anchor = this.determinePositioningAnchor();
+        if (anchor !== null && this.portalEl !== null) {
+            try {
+                const { x, y, placement: computedPlacement } = await computePosition(anchor, this.portalEl, {
+                    placement: this.placement,
+                    strategy: 'fixed',
+                    middleware: [offset(8), flip(), shift({ padding: 5 })],
+                });
+                this.resolvedPlacement = computedPlacement;
+                Object.assign(this.portalEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    position: 'fixed',
+                });
+                // Update CSS classes to match the resolved placement
+                this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+            }
+            catch (error) {
+                console.warn('Failed to position tooltip:', error);
+                this.resolvedPlacement = this.placement; // Fallback to requested placement
+                // Fallback to basic positioning if floating UI fails
+                const anchorRect = anchor.getBoundingClientRect();
+                this.portalEl.style.left = `${anchorRect.right + 8}px`;
+                this.portalEl.style.top = `${anchorRect.top}px`;
+                this.portalEl.style.position = 'fixed';
+            }
+        }
+    }
+    createPortal() {
+        if (this.portalEl !== null)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${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 = 'var(--pine-z-index-nuclear)';
+        if (this.portalEl.id === '') {
+            const suffix = PdsTooltip.instanceCounter++;
+            const baseId = this.componentId || this.el.id || 'pds-tooltip';
+            this.portalEl.id = `${baseId}-portal-${suffix}`;
+        }
+        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');
+        const initialCopy = this.copySlottedContent();
+        this.lastCopiedHtml = this.strippedHtml(initialCopy);
+        this.contentDiv.append(...Array.from(initialCopy.childNodes));
+        this.portalEl.appendChild(this.contentDiv);
+        // Nothing in the body paints above a modal dialog or open popover, so the portal goes inside one.
+        const portalHost = findPortalTarget(this.el, isTopLayerInDocument);
+        portalHost.appendChild(this.portalEl);
+        // Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
+        if (portalHost !== document.body)
+            this.stopWatchingPortalHost = onTopLayerClose(portalHost, this.handleHide);
+        this.repositionPortal().catch(error => {
+            console.warn('Failed to position tooltip on creation:', error);
+        });
+        // Use Floating UI's autoUpdate to handle scroll/resize automatically
+        if (this.triggerEl && this.portalEl) {
+            this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
+                this.repositionPortal().catch(error => {
+                    console.warn('Failed to reposition tooltip on auto update:', error);
+                });
+            });
+        }
+        // Keep only SPA navigation listeners (not handled by autoUpdate)
+        window.addEventListener('popstate', this.handleSpaNavigation, true);
+        window.addEventListener('hashchange', this.handleSpaNavigation, true);
+        // Start pathname change detection
+        this.pathnameCheckInterval = setInterval(this.checkPathnameChange, 100);
+        // 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);
+        }
+        this.startContentSync();
+    }
+    /**
+     * The host's own content slot wrapper. Matched among direct children only, so a nested
+     * pds-tooltip inside the trigger slot isn't mistaken for this one's.
+     */
+    get contentSlotWrapper() {
+        return Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
+    }
+    /**
+     * Copies the slotted content (or the `content` prop's text) into a detached container. The
+     * portal holds copies so the framework that owns the slotted nodes keeps them.
+     */
+    copySlottedContent() {
+        var _a, _b;
+        const copy = document.createElement('div');
+        const slottedContentContainer = (_a = this.contentSlotWrapper) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="content"]');
+        const meaningfulNodes = Array.from((_b = slottedContentContainer === null || slottedContentContainer === void 0 ? void 0 : slottedContentContainer.childNodes) !== null && _b !== void 0 ? _b : []).filter(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()) !== '');
+        });
+        meaningfulNodes.forEach(node => copy.appendChild(node.cloneNode(true)));
+        if (meaningfulNodes.length === 0 && typeof this.content === 'string' && this.content.trim() !== '') {
+            copy.textContent = this.content;
+        }
+        return copy;
+    }
+    /**
+     * While the tooltip is open, keeps the portal's copy in step with the slotted content at any
+     * depth: content that loads or re-renders after opening shows without reopening. Changes are
+     * batched to one re-copy per animation frame, and a re-copy that matches the last one shown is
+     * dropped, so screen readers aren't re-announced, iframes don't reload and the tooltip isn't
+     * repositioned for nothing. Only the hidden slot wrapper is observed, so copying into the portal
+     * can't trigger another sync.
+     */
+    startContentSync() {
+        const contentSlotWrapper = this.contentSlotWrapper;
+        if (contentSlotWrapper === undefined || typeof MutationObserver === 'undefined')
+            return;
+        this.slotMutationObserver = new MutationObserver(this.scheduleContentSync);
+        this.slotMutationObserver.observe(contentSlotWrapper, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    /**
+     * A copy's serialized HTML with Stencil's own hydration and scope classes removed from every
+     * `pds-*` descendant, so a nested component finishing hydration (or re-hydrating once reconnected
+     * inside the portal) isn't mistaken for a real content change. Without this, that class-only
+     * difference fails the equality check above and triggers a recopy that replaces still-loaded
+     * nodes — reloading any iframe or media the slotted content held.
+     */
+    strippedHtml(root) {
+        const clone = root.cloneNode(true);
+        clone.querySelectorAll('*').forEach((el) => {
+            // isStencilClass is host-scoped (its own doc: "another sc- class may be a consumer's"), so it
+            // only applies to pds-* elements — the same check keepPineHydrated makes before using it.
+            if (!el.localName.startsWith('pds-'))
+                return;
+            // Not `el.className`: on an SVG element that's an SVGAnimatedString, not a string,
+            // so classNamesOf would silently drop its classes from the comparison. The `class`
+            // attribute is a plain string on every element, SVG included.
+            const kept = classNamesOf(el.getAttribute('class') || '').filter((name) => !isStencilClass(el, name));
+            if (kept.length === 0) {
+                el.removeAttribute('class');
+            }
+            else {
+                el.setAttribute('class', kept.join(' '));
+            }
+        });
+        return clone.innerHTML;
+    }
+    stopContentSync() {
+        if (this.slotMutationObserver !== null) {
+            this.slotMutationObserver.disconnect();
+            this.slotMutationObserver = null;
+        }
+        if (this.contentSyncFrame !== null) {
+            cancelAnimationFrame(this.contentSyncFrame);
+            this.contentSyncFrame = null;
+        }
+    }
+    removePortal() {
+        this.stopContentSync();
+        // Stop Floating UI's autoUpdate
+        if (this.stopAutoUpdate !== null) {
+            this.stopAutoUpdate();
+            this.stopAutoUpdate = null;
+        }
+        if (this.stopWatchingPortalHost !== null) {
+            this.stopWatchingPortalHost();
+            this.stopWatchingPortalHost = null;
+        }
+        // Stop pathname change detection
+        if (this.pathnameCheckInterval !== null) {
+            clearInterval(this.pathnameCheckInterval);
+            this.pathnameCheckInterval = null;
+        }
+        if (this.portalEl !== null) {
+            // Remove only SPA navigation listeners (scroll/resize handled by autoUpdate)
+            window.removeEventListener('popstate', this.handleSpaNavigation, true);
+            window.removeEventListener('hashchange', this.handleSpaNavigation, true);
+            // Safely remove portal from DOM
+            try {
+                if (this.portalEl.parentNode) {
+                    this.portalEl.parentNode.removeChild(this.portalEl);
+                }
+            }
+            catch (error) {
+                // Portal might have already been removed by test cleanup
+                console.warn('Portal element could not be removed from DOM:', error);
+            }
+            this.portalEl = null;
+        }
+        // Remove ARIA attribute from trigger
+        if (this.triggerEl !== null) {
+            this.triggerEl.removeAttribute('aria-describedby');
+        }
+        this.contentDiv = null;
+        this.lastCopiedHtml = null;
+    }
     render() {
-        return (h(Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', 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: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', 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" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
+        return (h(Host, { key: '8e9f4aac519caacca9d7e7bc92a714e09ecc756f', class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f4a706e2b5bb68ac171c25ae02ae23555860c165', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+            /* focusin/out bubble; ensure keyboard users see tooltips */
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '7548da298a2295f40fd1c6a9b4f1e597f687b80e' })), h("div", { key: 'e19be5edd901bc8a6f96ace445451a976b92e447', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '0616e0468350750019afb736d79ac9f49ace4730', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["pds-tooltip.scss"]
@@ -94,8 +456,10 @@ export class PdsTooltip {
                     "tags": [],
                     "text": "Content for the tooltip. If HTML is required, use the content slot"
                 },
-                "attribute": "content",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content"
             },
             "componentId": {
                 "type": "string",
@@ -109,10 +473,12 @@ export class PdsTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance, used to build its portal element's `id`.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "hasArrow": {
                 "type": "boolean",
@@ -123,7 +489,7 @@ export class PdsTooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
@@ -131,8 +497,10 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip has an arrow"
                 },
-                "attribute": "has-arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-arrow",
                 "defaultValue": "true"
             },
             "htmlContent": {
@@ -152,17 +520,26 @@ export class PdsTooltip {
                         }],
                     "text": "Enable this option when using the content slot"
                 },
-                "attribute": "html-content",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-content",
                 "defaultValue": "false"
             },
             "placement": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                    "original": "PlacementType",
                     "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {}
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -173,10 +550,35 @@ export class PdsTooltip {
                         }],
                     "text": "Determines the preferred position of the tooltip"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'right'"
             },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"352px\""
+                        }],
+                    "text": "Sets the maximum width of the tooltip content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'352px'"
+            },
             "opened": {
                 "type": "boolean",
                 "mutable": true,
@@ -194,50 +596,19 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip is visible"
                 },
-                "attribute": "opened",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "opened",
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {}
+            "_isInteractiveOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "pdsTooltipHide",
-                "name": "pdsTooltipHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is closed"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "pdsTooltipShow",
-                "name": "pdsTooltipShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is shown"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "showTooltip": {
@@ -284,4 +655,4 @@ export class PdsTooltip {
             }];
     }
 }
-//# sourceMappingURL=pds-tooltip.js.map
+PdsTooltip.instanceCounter = 0;