@pine-ds/core 4.8.0 → 4.9.1

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -199,11 +199,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: '79606519d810dc9882a91cbc3b6a199457086631', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
+                : {} }, h("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (h("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '5323521abc5c2464299cf77520fb38ec81297866', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'eb94dd282f885d3466b6177b2454cbcc4f932466', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '222eaaedd4bebddc18cebf01bf4da81004773a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '010f222fa02b1809ff818f7a030c2a12fc3e3abb' })));
+        return (h(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -164,7 +164,7 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Lima</pds-table-cell>
       <pds-table-cell>
         <pds-dropdown-menu placement="bottom-end">
-          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
           <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
           <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
           <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
@@ -186,7 +186,7 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Lima</pds-table-cell>
       <pds-table-cell>
         <pds-dropdown-menu placement="bottom-end">
-          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
           <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
           <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
           <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
@@ -208,7 +208,7 @@ const ResponsiveTemplate = (args) => html`
       <pds-table-cell>Row Item Lima</pds-table-cell>
       <pds-table-cell>
         <pds-dropdown-menu placement="bottom-end">
-          <pds-button slot="trigger" size="sm" variant="icon-only"><pds-icon name="dot-menu-horizontal"></pds-icon></pds-button>
+          <pds-button slot="trigger" size="small" variant="tertiary" icon-only aria-label="More actions"><pds-icon slot="start" name="dot-menu-horizontal" aria-hidden="true"></pds-icon></pds-button>
           <pds-dropdown-menu-item>Edit</pds-dropdown-menu-item>
           <pds-dropdown-menu-item>Duplicate</pds-dropdown-menu-item>
           <pds-dropdown-menu-separator></pds-dropdown-menu-separator>

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -33,7 +33,7 @@ export class PdsTabpanel {
         // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
         // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
         this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
-        return (h(Host, { key: '5d867e31d0f5f14e18f1c81035991c90bb5fe529', slot: "tabpanels", class: hostClass || undefined }, h("div", { key: '255d37a73089904cfb170cd89f7b829756f6295f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '714d3d0cf0fc6173e243a2b077d9b9918ae4acf9' }))));
+        return (h(Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, h("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -276,7 +276,7 @@ export class PdsTabs {
         // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
         // it is a prop change, not a strip.
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '91a9a5cf4348b73ef5ec21430db20468fb67906c', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: 'f0ec002e513f3e91956e905c23e35dae0e6328ad', name: "tabpanels" })));
+        return (h(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
+        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-textarea/pds-textarea.js

@@ -306,10 +306,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, h("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, h("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '853f06489ef6ca50205799659d221bd3bea7d8da', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '76e445d135191df3090620f2c2eaf6ed8d7eb9cb', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '836815333b0ca925bc205a4b8b25086fe82fcedc', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'e8633457c994d3387ec277fd9945afb2c653d27a', class: "pds-textarea__label-wrapper" }, h("label", { key: '977bb1c171b68242ab06e01ef94ecc4e4cb26880', htmlFor: this.componentId }, h("span", { key: 'ef87433d6524296b3153e8d04e6406c9287e3f2e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '92952c76f5f4a87da4953f792a9a5589d7765451', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'a61f39d0e299cb6b3e6d1beed37805ad9a71b579', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '811065b7ce7b45d902d821dbceb25fef4231db94', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'f95f566b79215a4a128fe92c02be244219f843e5', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '08f649e4b32551d59d60b978262cd7beaa99e08d', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -181,8 +181,8 @@ export const withActionButton = (args) => html`<pds-textarea
   value="${args.value}"
   data-tooltip-id="foo"
   title="bar">
-  <pds-button slot="action" variant="unstyled">
-    <pds-icon name="question-circle"></pds-icon>
+  <pds-button slot="action" variant="unstyled" aria-label="Help with description">
+    <pds-icon name="question-circle" aria-hidden="true"></pds-icon>
   </pds-button>
 </pds-textarea>`;
 

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

@@ -150,4 +150,17 @@
 .pds-toast--animating-out {
   animation: pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;
   pointer-events: none; /* Prevent interaction during animation */
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }

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

@@ -117,17 +117,23 @@ export class PdsToast {
         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" });
+        // Decorative: inside role="alert" an icon name would be read out with the
+        // message. Severity is announced as text instead (see severityLabel).
+        return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
+    }
+    severityText() {
+        var _a;
+        return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
     }
     render() {
-        return (h(Host, { key: '754a4583cefca47a3d3fea7dab036c06ea8aabcd', hidden: !this.isVisible }, h("div", { key: '8ac294344ca459202c0883e724e09a4218342cc4', class: {
+        const severity = this.severityText();
+        return (h(Host, { key: '4c4077add1843ab84674dfa49fb963df55f1c432', hidden: !this.isVisible }, h("div", { key: '0d819ac123de625604d3b1aa0f9391366b4d0289', 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: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, h("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (h("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && h("span", { key: 'f75fb422797082e99acb85432c1b50cf702d7afc', class: "visually-hidden" }, severity), h("span", { key: '3d9f03d96dbda41c72d2c2cc492b1422928d573f', class: "pds-toast__message" }, h("slot", { key: 'affc7e4cb592735ec396fa90a9405f25b389e4bd' })), this.dismissible && (h("button", { key: '0c4ef459dda09b8a196eed7ee28383995d959b11', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '913201979e52be743ba933ff173e023b81553362', name: "remove", "aria-hidden": "true" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '1b26a6a842868a5b1e55b7110c755edc7f830ba5', name: "remove", "aria-hidden": "true" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -272,6 +278,28 @@ export class PdsToast {
                 "reflect": false,
                 "attribute": "dismiss-label",
                 "defaultValue": "'Dismiss message'"
+            },
+            "severityLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "Accessible label announcing the toast's severity, read before the message.\nPass a translated string to localize it; defaults to English (`Error`) for\nthe `danger` type. Other types announce none unless this is set; pass an\nempty string to announce none."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity-label"
             }
         };
     }

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 
 export default {
@@ -15,6 +16,7 @@ const BaseTemplate = (args) => html`
   duration="${args.duration}"
   icon="${args.icon || ''}"
   type="${args.type}"
+  severity-label=${ifDefined(args.severityLabel)}
 >
   ${args.content || ''}
 </pds-toast>`;
@@ -26,6 +28,7 @@ const WithLinkTemplate = (args) => html`
   duration="${args.duration}"
   icon="${args.icon || ''}"
   type="${args.type}"
+  severity-label=${ifDefined(args.severityLabel)}
 >
   New update available. <a href="#">Learn more</a>
 </pds-toast>`;
@@ -42,7 +45,7 @@ Default.args = {
 export const Danger = BaseTemplate.bind();
 Danger.args = {
   componentId: 'toast-danger',
-  content: 'An error occurred. Please try again.',
+  content: 'Payment failed. Please try again.',
   dismissible: true,
   duration: 0,
   type: 'danger',

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,4 +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
@@ -16,10 +18,13 @@ export class PdsTooltip {
         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
@@ -83,6 +88,25 @@ export class PdsTooltip {
                 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(newValue, oldValue) {
         if (newValue === false && oldValue === true) {
@@ -97,16 +121,6 @@ export class PdsTooltip {
         window.addEventListener('pageshow', this.handlePageShow);
         this.currentPathname = window.location.pathname;
         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 });
-        }
         // no return; Stencil ignores teardown functions here
     }
     connectedCallback() {
@@ -114,10 +128,6 @@ export class PdsTooltip {
     }
     disconnectedCallback() {
         window.removeEventListener('pageshow', this.handlePageShow);
-        if (this.slotMutationObserver !== null) {
-            this.slotMutationObserver.disconnect();
-            this.slotMutationObserver = null;
-        }
         // Ensure global listeners/intervals are removed if still present
         if (this.portalEl !== null) {
             this.removePortal();
@@ -260,33 +270,16 @@ export class PdsTooltip {
         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 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 && typeof this.content === 'string' && this.content.trim() !== '') {
-            this.contentDiv.textContent = this.content;
-        }
+        const initialCopy = this.copySlottedContent();
+        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);
         });
@@ -307,13 +300,102 @@ export class PdsTooltip {
         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);
@@ -340,12 +422,13 @@ export class PdsTooltip {
             this.triggerEl.removeAttribute('aria-describedby');
         }
         this.contentDiv = null;
+        this.lastCopiedHtml = null;
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '2e28dff93cd22fd3816d71b67e38883061a8b2bc', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '9e7ea50427587f61dcea1ea97e10d71f4d0c9d92', 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: '08c1ff63c91b97b4df1362eb9b2e42b6fd556b11' })), h("div", { key: '5cfe25e21d1f096b76335570fbb930a7bc8c95f8', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'e7e8728d7c8a0c74933cef070aa38f88a1f53a32', 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",
+};