@pine-ds/core 4.8.0 → 4.9.0

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

@@ -91,7 +91,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: 'b79a6e67f11024cb025cb26bbf77231547bd63a4', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'ae1f8ca39899894541eac3c07fb21ead4ab98f40' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { classNamesOf, isStencilClass } from "../../utils/keep-hydrated";
 import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 /**
  * @slot (default) - The tooltip's target element
@@ -16,7 +17,9 @@ 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;
@@ -83,6 +86,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 +119,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 +126,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,31 +268,9 @@ 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);
         this.repositionPortal().catch(error => {
@@ -307,8 +293,93 @@ 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();
@@ -340,12 +411,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: '067eda3089732c6a23032bb087182e6dcd0330fa', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '54f6f233c937f048f119df969630af530b10de25', 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: 'f8019985ad9fd27deb388e35c43bf2e227ff9c02' })), h("div", { key: '072c4e578aebb99cd213901369a57d7c74734ad9', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '22bc45dfb56567f53a608ce2033b062363793450', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/aria-references.js

@@ -0,0 +1,42 @@
+/**
+ * The ARIA attributes that take ID references, and the element-reflection property each is forwarded
+ * through. An ID on a host can't reach an element inside its shadow root, so a component that
+ * delegates focus forwards the elements the IDs point at instead. A browser without ARIA element
+ * reflection gets none of them.
+ */
+export const ARIA_REFERENCE_PROPERTIES = {
+    'aria-controls': 'ariaControlsElements',
+    'aria-describedby': 'ariaDescribedByElements',
+    'aria-labelledby': 'ariaLabelledByElements',
+};
+export const ARIA_REFERENCE_ATTRIBUTES = Object.keys(ARIA_REFERENCE_PROPERTIES);
+/**
+ * Finds an element by ID in the host's tree, then in each shadow root that contains it, so a host
+ * inside another component's shadow root still reaches, say, a popover portal on document.body.
+ * The closest root wins when an ID repeats.
+ */
+export const findInAncestorRoots = (host, id) => {
+    let root = host.getRootNode();
+    while (root instanceof ShadowRoot) {
+        const found = root.getElementById(id);
+        if (found)
+            return found;
+        root = root.host.getRootNode();
+    }
+    return root instanceof Document ? root.getElementById(id) : null;
+};
+/**
+ * Points the target's reflected ARIA properties at the elements the host's ID-reference attributes
+ * name, or clears them. Run it again whenever the attributes or the referenced elements may have
+ * changed: element references don't follow an ID to a node added or replaced later.
+ */
+export const forwardAriaReferences = (host, target) => {
+    Object.entries(ARIA_REFERENCE_PROPERTIES).forEach(([attribute, property]) => {
+        var _a, _b;
+        if (!(property in target))
+            return;
+        const ids = (_b = (_a = host.getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
+        const referenced = ids.map((id) => findInAncestorRoots(host, id)).filter((el) => el !== null);
+        target[property] = referenced.length > 0 ? referenced : null;
+    });
+};

package/dist/collection/utils/tabbable.js

@@ -0,0 +1,81 @@
+const TABBABLE = [
+    'a[href]',
+    'area[href]',
+    'button',
+    'input:not([type="hidden"])',
+    'select',
+    'textarea',
+    'iframe',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+/**
+ * Collects the tabbable elements under `root` in focus order, walking into open shadow roots and
+ * following slots, so a component's own controls (the input inside pds-combobox or pds-textarea)
+ * count without being registered here by tag name. Positive tabindex values are not reordered,
+ * and a closed shadow root can't be seen into.
+ */
+function collectTabbable(root, found) {
+    for (const child of Array.from(root.children))
+        visitTabbable(child, found);
+}
+// An editing host reports tabIndex -1 but is still a Tab stop; editable content inside it is not.
+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'))
+        return;
+    if (el.localName === 'slot') {
+        const slot = el;
+        // Fallback content renders only when nothing at all is assigned, text included.
+        if (((_b = (_a = slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : []).length === 0)
+            return collectTabbable(el, found);
+        for (const slotted of slot.assignedElements({ flatten: true }))
+            visitTabbable(slotted, found);
+        return;
+    }
+    // A delegatesFocus host passes focus to its first control, which the walk below finds.
+    const delegates = ((_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.delegatesFocus) === true;
+    if (el instanceof HTMLElement && !delegates && isTabStop(el) && el.matches(TABBABLE) && !el.matches(':disabled')) {
+        found.push(el);
+    }
+    // A shadow host's light children render only through its slots, which the walk reaches.
+    collectTabbable((_d = el.shadowRoot) !== null && _d !== void 0 ? _d : el, found);
+}
+/** The element as a radio in a named group, or `null`. */
+const groupedRadio = (el) => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '' ? el : null;
+/**
+ * Keeps one radio per named group, as the browser does: the checked one, or the first. The others
+ * are reached with the arrow keys, so they can't be the first or last stop of the trap.
+ */
+function oneRadioPerGroup(elements) {
+    // Radios group by name and form within one tree, so each shadow root starts its own groups.
+    const groups = [];
+    for (const el of elements) {
+        const radio = groupedRadio(el);
+        if (radio === null)
+            continue;
+        const group = groups.find(([first]) => first.name === radio.name && first.form === radio.form && first.getRootNode() === radio.getRootNode());
+        if (group)
+            group.push(radio);
+        else
+            groups.push([radio]);
+    }
+    const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
+    return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
+}
+/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
+export function tabbableIn(root) {
+    const found = [];
+    collectTabbable(root, found);
+    // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
+    // display isn't none; such an element can't take focus.
+    const visible = found.filter(el => {
+        if (typeof el.checkVisibility === 'function')
+            return el.checkVisibility({ checkVisibilityCSS: true });
+        const style = window.getComputedStyle(el);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return oneRadioPerGroup(visible);
+}