@pine-ds/core 4.9.0 → 4.10.0

package/dist/collection/components/pds-radio-group/pds-radio-group.js

@@ -1,4 +1,5 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { messageId } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 /**
@@ -32,6 +33,7 @@ export class PdsRadioGroup {
          * @defaultValue false
          */
         this.required = false;
+        this.hostKeeper = new HostStylingKeeper();
     }
     handlePropsChange() {
         this.updateChildRadios();
@@ -83,6 +85,29 @@ export class PdsRadioGroup {
             }
         });
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // A name set while the group was detached never reaches the observer.
+        this.syncName();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // Consumers can name the group after render (a prop change, an i18n swap, a morph); re-render so their name wins.
+        this.hostAriaObserver = new MutationObserver(() => this.syncName());
+        this.hostAriaObserver.observe(this.el, { attributeFilter: ['aria-label', 'aria-labelledby'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.hostKeeper.disconnect();
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
+    }
+    // Re-renders only when the group's name would change, so its own aria-labelledby write doesn't loop back.
+    syncName() {
+        if (this._groupId === undefined)
+            return;
+        if (this.getAriaLabelledBy() !== this.renderedLabelledBy)
+            forceUpdate(this);
+    }
     componentWillLoad() {
         // Generate stable group ID once during initialization
         // This ensures DOM stability and accessibility relationships remain consistent across re-renders
@@ -96,6 +121,18 @@ export class PdsRadioGroup {
                 : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
             this._groupId = `radio-group-${uniqueId}`;
         }
+        // A restored or cloned host still carries the id and ARIA references an earlier instance wrote, pointing at
+        // that instance's label and messages. Drop them so this render writes its own: on first load, Stencil keeps a
+        // host attribute that's already there.
+        const previousId = this.el.getAttribute('id');
+        if (previousId && previousId !== this._groupId) {
+            ['aria-labelledby', 'aria-describedby'].forEach((name) => {
+                var _a, _b;
+                const ids = (_b = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
+                if (ids.some((id) => id.startsWith(`${previousId}__`)))
+                    this.el.removeAttribute(name);
+            });
+        }
     }
     componentDidLoad() {
         if (!this.name) {
@@ -148,6 +185,20 @@ export class PdsRadioGroup {
         // Otherwise, assume it's a dimension token like "100", "200", etc.
         return `var(--pine-dimension-${this.gap})`;
     }
+    get labelId() {
+        return `${this._groupId}__label`;
+    }
+    // Names the group from its visible label, unless the consumer named it with their own aria-label or aria-labelledby.
+    // A blank aria-label (an empty translation, say) names nothing, so it falls back to groupLabel.
+    getAriaLabelledBy() {
+        var _a;
+        const hostLabelledBy = this.el.getAttribute('aria-labelledby');
+        if ((hostLabelledBy === null || hostLabelledBy === void 0 ? void 0 : hostLabelledBy.trim()) && hostLabelledBy !== this.labelId)
+            return hostLabelledBy;
+        if ((_a = this.el.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim())
+            return undefined;
+        return this.groupLabel ? this.labelId : undefined;
+    }
     getAriaDescribedBy() {
         const messageIds = [];
         if (this.errorMessage) {
@@ -161,13 +212,23 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        const ariaLabelledBy = this.getAriaLabelledBy();
+        const hostClass = this.classNames();
+        this.renderedLabelledBy = ariaLabelledBy;
+        // A DOM morph strips what the component wrote on its host; put back its role, name and description.
+        // Only its own aria-labelledby, so a consumer's that the server dropped stays dropped.
+        this.hostKeeper.record(hostClass, { '--pds-radio-group-gap': gapValue }, {
+            role: 'radiogroup',
+            'aria-describedby': ariaDescribedBy,
+            'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
+        });
+        return (h(Host, { key: '0fe381f99dddae0aeb9189a13b0e2195f1c79886', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', class: {
+            } }, this.groupLabel && (h("div", { key: '4967dc22fa0265dbfbabf94a49b182b8c06d0bd5', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), h("div", { key: '7a782a6920de7eda76ab0060c7512f093671ad41', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: '48a8d2d74961a402e3a1b053b2f0314e74b4b289', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '58db96d62b8d89f03ab245990d2d6bbd3b1b5f85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'ad3aafe5f7ed45853c36b537525a8fff68452f55', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '80ce92868703c5e01434e7e83a7668e320bcbee1', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,10 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
-import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
+import { FOCUSABLE_WRAPPER, setupTruncationTooltip } from "../../utils/truncation-tooltip";
 import { TEXT_SIZES } from "../../utils/types";
+// Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
+// text that joins the same control later can take that control's focus away from it.
+const textsUsingWrapper = new WeakMap();
 /**
  * @part content - The text content container
  */
@@ -55,17 +58,39 @@ export class PdsText {
         this.destroyTruncationTooltip();
     }
     initTruncationTooltip() {
+        var _a;
         // Clean up any existing tooltip before setting up a new one
         this.destroyTruncationTooltip();
         if (this.contentEl) {
+            const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
+            // A pds-chip with a max width binds its tooltip to the wrapper too.
+            const others = wrapper === null ? [] : wrapper.querySelectorAll('pds-text, pds-chip');
+            // One focus on a shared wrapper would open every clipped text's tooltip at once, so texts sharing one each keep
+            // their own stop, and a text bound before this one joined lets go: this one's focus bubbles to the wrapper too.
+            let sharesWrapper = false;
+            for (let i = 0; i < others.length; i++) {
+                const other = others[i];
+                // The property counts too: setting `truncate` runs setup before the next render reflects the attribute.
+                if (other !== this.el && (other.truncate || other.maxWidth || other.hasAttribute('truncate') || other.hasAttribute('max-width'))) {
+                    sharesWrapper = true;
+                    (_a = textsUsingWrapper.get(other)) === null || _a === void 0 ? void 0 : _a();
+                }
+            }
+            const usesWrapper = wrapper !== null && !sharesWrapper;
             this.truncationCleanup = setupTruncationTooltip({
                 hostEl: this.el,
                 contentEl: this.contentEl,
                 getTooltipText: () => this.el.textContent || '',
+                // A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
+                manageTabIndex: !usesWrapper,
+                focusEl: usesWrapper ? wrapper : this.el,
             });
+            if (usesWrapper)
+                textsUsingWrapper.set(this.el, () => this.initTruncationTooltip());
         }
     }
     destroyTruncationTooltip() {
+        textsUsingWrapper.delete(this.el);
         if (this.truncationCleanup) {
             this.truncationCleanup();
             this.truncationCleanup = null;
@@ -91,7 +116,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
+        return (h(Tag, { key: '30566c7810d3fd7f76ae281ae6d9a7e66803f0a3', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'f5113458aa9295803fc1c0bc552f9f92602cacba' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -279,7 +304,7 @@ export class PdsText {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order."
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order.\nInside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and\n`pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a\n`max-width`, no tab stop is added; the tooltip appears when that control receives\nkeyboard focus."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-text/stories/pds-text.stories.js

@@ -123,3 +123,19 @@ Truncate.args = {
   truncate: true,
   width: '250px',
 };
+
+const TruncateInLinkTemplate = (args) => html`
+<div style="width: ${args.width || '250px'};">
+  <a href="#">
+    <pds-text tag="${args.tag}" ?truncate="${args.truncate}">${args.slot}</pds-text>
+  </a>
+</div>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Tab to the link to see the full content in a tooltip. The truncated text adds no tab stop of its own.</pds-text>`;
+
+export const TruncateInLink = TruncateInLinkTemplate.bind();
+TruncateInLink.args = {
+  slot: 'Id irure id magna ipsum voluptate irure esse eu nulla. Ullamco officia adipisicing qui nulla non sint.',
+  tag: 'p',
+  truncate: true,
+  width: '250px',
+};

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

@@ -8,6 +8,17 @@
   --tooltip-dimension-max-width: 320px;
 }
 
+:is(dialog, [popover]) > .pds-tooltip {
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  white-space: normal;
+  word-spacing: normal;
+}
+
 .pds-tooltip__content {
   background-color: var(--pine-color-primary);
   border-radius: calc(var(--pine-dimension-xs) * 1.25);

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 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
@@ -23,6 +24,7 @@ export class PdsTooltip {
         this.currentPathname = '';
         this.pathnameCheckInterval = null;
         this.stopAutoUpdate = null;
+        this.stopWatchingPortalHost = null;
         /**
          * Determines whether or not the tooltip has an arrow
          * @defaultValue true
@@ -272,7 +274,12 @@ export class PdsTooltip {
         this.lastCopiedHtml = this.strippedHtml(initialCopy);
         this.contentDiv.append(...Array.from(initialCopy.childNodes));
         this.portalEl.appendChild(this.contentDiv);
-        document.body.appendChild(this.portalEl);
+        // 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);
         });
@@ -385,6 +392,10 @@ export class PdsTooltip {
             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);
@@ -415,9 +426,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '54f6f233c937f048f119df969630af530b10de25', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '475ff12d4be035e3effa894353e7948b42a23489', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '3375dfb5bb86ba373bc5d617f4a53171505631d1', 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: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), h("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'a3392ad415f5ac7f3883100bf914484ffcc8e536' })), h("div", { key: '774ac2c4808e96649b1536569aaf8cf8a6e3abc2', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '672c64b4acdb365623885ac2105a9b90b1dcfa6b', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

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

@@ -20,6 +20,29 @@ const HTMLContentTemplate = (args) => html`
     <pds-button variant="secondary">Hover</pds-button>
   </pds-tooltip>`;
 
+const InModalTemplate = (args) => html`
+  <pds-button onclick="document.querySelector('#tooltip-modal').open = true">Open modal</pds-button>
+  <pds-modal id="tooltip-modal" component-id="tooltip-modal" size="sm">
+    <pds-modal-header>
+      <pds-box padding="md">
+        <pds-text tag="h2" size="h3">Publish changes</pds-text>
+      </pds-box>
+    </pds-modal-header>
+    <pds-modal-content>
+      <pds-box padding-inline-start="md" padding-inline-end="md">
+        <pds-text tag="p">Hover or focus Publish: its tooltip shows above the open modal.</pds-text>
+      </pds-box>
+    </pds-modal-content>
+    <pds-modal-footer>
+      <pds-box fit gap="sm" justify-content="end" padding="md">
+        <pds-button variant="secondary" onclick="document.querySelector('#tooltip-modal').open = false">Cancel</pds-button>
+        <pds-tooltip content=${args.content} ?has-arrow=${args.hasArrow} placement=${args.placement}>
+          <pds-button variant="primary">Publish</pds-button>
+        </pds-tooltip>
+      </pds-box>
+    </pds-modal-footer>
+  </pds-modal>`;
+
 const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
@@ -99,3 +122,10 @@ NoArrow.args = {
   placement: "bottom-start",
   slot: "target text"
 };
+
+export const InModal = InModalTemplate.bind({});
+InModal.args = {
+  content: "Fix the errors on the page to publish",
+  hasArrow: true,
+  placement: "top",
+};

package/dist/collection/utils/portal-target.js

@@ -0,0 +1,64 @@
+/**
+ * The native `<dialog>` or open `popover` (as pds-filter's) an element sits in, so a popup portaled
+ * there shares its top layer and a click in it isn't outside it; otherwise `document.body`.
+ * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
+ * walks assigned slots and shadow hosts, as pds-combobox does. `isHost` picks which ancestor counts.
+ */
+export function findPortalTarget(from, isHost = isOpenDialogOrPopover) {
+    const seen = new Set();
+    let current = from;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        if (current.nodeType === Node.ELEMENT_NODE && isHost(current)) {
+            return current;
+        }
+        const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
+        if (assigned) {
+            current = assigned;
+            continue;
+        }
+        const parent = current.parentNode;
+        current = parent instanceof ShadowRoot ? parent.host : parent;
+    }
+    return document.body;
+}
+/**
+ * A modal dialog or open popover, which paints in the top layer above anything in the body, that
+ * sits in the document itself: the document's stylesheets don't reach into a shadow root.
+ */
+export function isTopLayerInDocument(el) {
+    if (el.getRootNode() !== el.ownerDocument)
+        return false;
+    return matchesSafely(el, ':modal') || matchesSafely(el, ':popover-open');
+}
+/**
+ * Calls `onClose` once `host` leaves the top layer (its dialog closes or its popover hides), and
+ * returns a function that stops listening.
+ */
+export function onTopLayerClose(host, onClose) {
+    const check = () => {
+        if (!isTopLayerInDocument(host))
+            onClose();
+    };
+    host.addEventListener('close', check);
+    host.addEventListener('toggle', check);
+    return () => {
+        host.removeEventListener('close', check);
+        host.removeEventListener('toggle', check);
+    };
+}
+function isOpenDialogOrPopover(el) {
+    // Only an open dialog: inside a closed one, the popup would be hidden with it.
+    if (el.localName === 'dialog')
+        return el.open;
+    return el.hasAttribute('popover') && matchesSafely(el, ':popover-open');
+}
+function matchesSafely(el, selector) {
+    try {
+        return el.matches(selector);
+    }
+    catch (_a) {
+        // A browser without the selector (no Popover API, or no :modal): no top layer to share.
+        return false;
+    }
+}

package/dist/collection/utils/tabbable.js

@@ -24,7 +24,8 @@ function collectTabbable(root, found) {
 const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
 function visitTabbable(el, found) {
     var _a, _b, _c, _d;
-    if (el.hasAttribute('inert'))
+    // A tooltip portaled into a dialog only describes the control that has focus; it's never a stop of its own.
+    if (el.hasAttribute('inert') || el.getAttribute('role') === 'tooltip')
         return;
     if (el.localName === 'slot') {
         const slot = el;

package/dist/collection/utils/truncation-tooltip.js

@@ -1,4 +1,8 @@
 import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
+import { findPortalTarget, isTopLayerInDocument, onTopLayerClose } from "./portal-target";
+// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
+// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
+export const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
 /** CSS class prefix used for truncation tooltip portal elements */
 const TOOLTIP_CLASS = 'pds-truncation-tooltip';
 /**
@@ -8,7 +12,8 @@ const TOOLTIP_CLASS = 'pds-truncation-tooltip';
  *
  * Z-Index Strategy:
  * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
- * This is necessary because tooltips are portaled to document.body and must overlay:
+ * This is necessary because tooltips are portaled to document.body, or into the modal dialog or
+ * open popover around the host (the top layer, which no z-index reaches from the body), and must overlay:
  * - Modal dialogs
  * - Dropdown menus
  * - Other floating UI elements
@@ -48,6 +53,15 @@ function injectStyles() {
       opacity: 1;
       visibility: visible;
     }
+    :is(dialog, [popover]) > .${TOOLTIP_CLASS} {
+      font-style: normal;
+      font-weight: normal;
+      text-align: start;
+      text-indent: 0;
+      text-transform: none;
+      white-space: normal;
+      word-spacing: normal;
+    }
   `;
     document.head.appendChild(style);
 }
@@ -74,7 +88,8 @@ function isFocusVisible(el) {
  *
  * When the element's text overflows, hovering the host element or giving it
  * keyboard focus will display a tooltip showing the full text content. The
- * tooltip is rendered as a portal on document.body and positioned with Floating UI.
+ * tooltip is rendered as a portal on document.body, or in the modal dialog or open popover around
+ * the host, and positioned with Floating UI.
  *
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
  *
@@ -84,6 +99,7 @@ export function setupTruncationTooltip(options) {
     const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
     injectStyles();
     let portalEl = null;
+    let stopWatchingPortalHost = null;
     let isHovering = false;
     let isHoveringPortal = false;
     let isFocused = false;
@@ -162,7 +178,11 @@ export function setupTruncationTooltip(options) {
         contentDiv.className = `${TOOLTIP_CLASS}__content`;
         contentDiv.textContent = text.trim();
         portalEl.appendChild(contentDiv);
-        document.body.appendChild(portalEl);
+        const portalHost = findPortalTarget(hostEl, isTopLayerInDocument);
+        portalHost.appendChild(portalEl);
+        // Closing that host moves no pointer, so a tooltip opened by touch would outlive it unseen.
+        if (portalHost !== document.body)
+            stopWatchingPortalHost = onTopLayerClose(portalHost, closeWithPortalHost);
         // Allow the user to hover into the tooltip to select/copy text
         portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
         portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
@@ -201,6 +221,10 @@ export function setupTruncationTooltip(options) {
         }
     }
     function removePortal() {
+        if (stopWatchingPortalHost !== null) {
+            stopWatchingPortalHost();
+            stopWatchingPortalHost = null;
+        }
         if (portalEl) {
             portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
             portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
@@ -234,6 +258,14 @@ export function setupTruncationTooltip(options) {
             return;
         removePortal();
     }
+    // Hover and focus can't outlast a host that's no longer shown, so none of them keeps it open.
+    function closeWithPortalHost() {
+        isHovering = false;
+        isHoveringPortal = false;
+        isFocused = false;
+        cancelHideTimeout();
+        removePortal();
+    }
     /**
      * Schedules tooltip removal after a short delay.
      *
@@ -265,11 +297,18 @@ export function setupTruncationTooltip(options) {
         isHoveringPortal = false;
         scheduleHide();
     }
+    // A second tab stop inside focusEl, such as another clipped text, bubbles its focus here too. Its event.target is
+    // retargeted to the stop's outermost element in focusEl's tree, which sits beside hostEl rather than around or in it.
+    function isFocusForHost(target) {
+        return focusEl === hostEl || target === focusEl || target.contains(hostEl) || hostEl.contains(target);
+    }
     // Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
     // Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
     function showForVisibleFocus(event) {
         if (!isFocusVisible(event.composedPath()[0]))
             return;
+        if (!isFocusForHost(event.target))
+            return;
         isFocused = true;
         showTooltip();
     }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-29T23:00:11",
+  "timestamp": "2026-11-06T15:29:44",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -17370,6 +17370,12 @@
           "capture": true,
           "passive": false
         },
+        {
+          "event": "keydown",
+          "target": "document",
+          "capture": true,
+          "passive": false
+        },
         {
           "event": "keydown",
           "target": "window",
@@ -26924,7 +26930,7 @@
           "mutable": false,
           "attr": "truncate",
           "reflectToAttr": true,
-          "docs": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order.",
+          "docs": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order.\nInside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and\n`pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a\n`max-width`, no tab stop is added; the tooltip appears when that control receives\nkeyboard focus.",
           "docsTags": [],
           "values": [
             {
@@ -28271,7 +28277,7 @@
       "path": "src/utils/types.ts"
     },
     "src/components/pds-combobox/combobox-interface.ts::ComboboxOption": {
-      "declaration": "export interface ComboboxOption {\n  id: string | number;\n  text: string;\n  /**\n   * Label of the group this option belongs to. Options sharing a group are rendered together\n   * under one group label, where the group first appears, the same as slotted `<optgroup>`\n   * markup. With `group-display=\"inline\"`, options without a group are listed before every group;\n   * with `flyout` and `drill-in`, options without a group and groups keep the array's order.\n   */\n  group?: string;\n  /**\n   * Pine icon name shown beside the group's label (letters, digits and hyphens, for example\n   * `hashtag`); URLs and file paths are not accepted. The first option in the group that sets\n   * one wins, the same as `data-icon` on a slotted `<optgroup>`.\n   */\n  groupIcon?: string;\n  /**\n   * Pine icon name shown before the option's text (letters, digits and hyphens, for example\n   * `hashtag`); URLs and file paths are not accepted. The same as `data-icon` on a slotted `<option>`.\n   * Once the option is chosen, the `button` trigger shows it too.\n   */\n  icon?: string;\n  /**\n   * When `true`, the option stays reachable by the arrow keys and the pointer, so assistive tech\n   * announces it as unavailable, but it cannot be selected.\n   */\n  disabled?: boolean;\n  [key: string]: unknown;\n}",
+      "declaration": "export interface ComboboxOption {\n  id: string | number;\n  text: string;\n  /**\n   * Label of the group this option belongs to. Options sharing a group are rendered together\n   * under one group label, where the group first appears, the same as slotted `<optgroup>`\n   * markup. With `group-display=\"inline\"`, options without a group are listed before every group;\n   * with `flyout` and `drill-in`, options without a group and groups keep the array's order.\n   */\n  group?: string;\n  /**\n   * Pine icon name shown beside the group's label (letters, digits and hyphens, for example\n   * `hashtag`); URLs and file paths are not accepted. The first option in the group that sets\n   * one wins, the same as `data-icon` on a slotted `<optgroup>`.\n   */\n  groupIcon?: string;\n  /**\n   * A small chip after the group's label, such as \"Premium\". `label` is its text; `sentiment` is a\n   * `pds-chip` sentiment (`neutral` when unset or unknown); `icon` is a Pine icon name (letters,\n   * digits and hyphens, for example `premium`); URLs and file paths are not accepted. The first\n   * option in the group that sets one wins, the same as `data-badge`, `data-badge-sentiment` and\n   * `data-badge-icon` on a slotted `<optgroup>`. It isn't matched by search, and screen readers\n   * read it as part of the group's name. It isn't shown on a drilled-in group's row back.\n   */\n  groupBadge?: { label: string; sentiment?: string; icon?: string };\n  /**\n   * Pine icon name shown before the option's text (letters, digits and hyphens, for example\n   * `hashtag`); URLs and file paths are not accepted. The same as `data-icon` on a slotted `<option>`.\n   * Once the option is chosen, the `button` trigger shows it too.\n   */\n  icon?: string;\n  /**\n   * A small chip after the option's text, such as \"New\". `label` is its text; `sentiment` is a\n   * `pds-chip` sentiment (`neutral` when unset or unknown); `icon` is a Pine icon name (letters,\n   * digits and hyphens, for example `star`); URLs and file paths are not accepted. The same as\n   * `data-badge`, `data-badge-sentiment` and `data-badge-icon` on a slotted `<option>`. It isn't\n   * shown in the trigger or matched by search, and screen readers read it as part of the option's\n   * name. Options that are chips or custom layouts don't show it.\n   */\n  badge?: { label: string; sentiment?: string; icon?: string };\n  /**\n   * When `true`, the option stays reachable by the arrow keys and the pointer, so assistive tech\n   * announces it as unavailable, but it cannot be selected.\n   */\n  disabled?: boolean;\n  [key: string]: unknown;\n}",
       "docstring": "",
       "path": "src/components/pds-combobox/combobox-interface.ts"
     },

package/dist/esm/{index-BFSwd-GQ.js → index-4_RRPJTO.js}

@@ -2253,6 +2253,17 @@ var postUpdateComponent = (hostRef) => {
     hostRef.$flags$ &= -517;
   }
 };
+var forceUpdate = (ref) => {
+  var _a;
+  {
+    const hostRef = getHostRef(ref);
+    const isConnected = (_a = hostRef == null ? void 0 : hostRef.$hostElement$) == null ? void 0 : _a.isConnected;
+    if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
+      scheduleUpdate(hostRef, false);
+    }
+    return isConnected;
+  }
+};
 var appDidLoad = (who) => {
   var _a;
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
@@ -2924,4 +2935,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { Fragment as F, Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, Host as H, getElement as a, bootstrapLazy as b, createEvent as c, forceUpdate as f, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/{index-m3pqpeWg.js → index-DvN3tyZp.js}

@@ -1,4 +1,4 @@
-/* pds-icons v10.7.0, ES Modules */
+/* pds-icons v10.8.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";