@pine-ds/core 4.4.2 → 4.4.4

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

@@ -1,10 +1,13 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 /**
  * @part loader-svg - Exposes the spinner SVG element for color customization.
  * @slot label - Default slot for Loader label text.
  */
 export class PdsLoader {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * If false, the loader will be hidden.
          */
@@ -30,6 +33,15 @@ export class PdsLoader {
             }
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    restoreSizeDefault(newValue) {
+        this.size = restoreReflectedDefault(this.el, 'size', newValue, 'md');
+    }
     loaderSize() {
         const sizes = {
             xs: '24px',
@@ -46,7 +58,15 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '173f7ae2d2f49807144df2faa8d8a765f92da235', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '05bc278d18ef2470d87676b3a53d691a6a9872dd', class: "pds-loader--spinner" }, h("svg", { key: 'fcfc87492dd5cdbc7bf471089a038bd8b057f6ec', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd9f6aecc7e5a8b03e2d18f79125fd6190b27803c' }, h("linearGradient", { key: '7851a1b709bccac7704b3822e1aae292d3a68e2d', id: "spinner-secondHalf" }, h("stop", { key: '3d4a75792365cad4ea417794dca6c440859f8ce3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7287acab80b1ea32f884cf69ceb19989603e0882', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '0ec8d95161c24d14773ebee01c189f269079b79d', id: "spinner-firstHalf" }, h("stop", { key: '2a7cea30b2bf2044a14f29f4d64728150669d048', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '608bd5cc1c7b9014a5f183d9e06efe4a0c119616', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '36016dc3bd8a2e4f03f4f287881bfe1b7ce15494', class: "pds-loader__spinner-path" }, h("path", { key: '9410bff29a42cd469ed0f52510a36f7d173b2247', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '66e8283575e53ca52edd12e95c6545406d39c361', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1c8a7526bc763ac62f0e8c762ab47cb2bca0ec89', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '2c8f9596beb8010778e0cf79f006970769da9795', class: "pds-loader--typing" }, h("span", { key: '587cd8da845d1223a5e8b2d199d049ccc1ed78aa' }), h("span", { key: '972f7844a5f2469adbb04b15ebf41e49eb5c0354' }), h("span", { key: '575511989d50f6d9436b846cadec1a5a4fa57c1e' }))), h("div", { key: '70f1b43a79a1d2605145a5ea6fe86e0a6059889d', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '9a981b8530200aa91916017180266edaea6da9ac', name: "label" }, "Loading..."))));
+        const hostClass = `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`;
+        // Explicit 'true': a boolean `true` lands as an empty value, which ARIA reads as unset.
+        const hostAttributes = {
+            'aria-hidden': this.isLoading ? null : 'true',
+            'aria-busy': this.isLoading ? 'true' : null,
+            'aria-live': 'polite',
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (h(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, h("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, h("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, h("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, h("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, h("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, h("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), h("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), h("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), h("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +124,7 @@ export class PdsLoader {
             },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "| 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string",
                     "resolved": "string",
@@ -144,4 +164,11 @@ export class PdsLoader {
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "restoreSizeDefault"
+            }];
+    }
 }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -1,5 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalContent {
     constructor() {
         /**
@@ -178,10 +181,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '3e8352c946c3646a485ca505e11de3ace3906435' }, h("div", { key: 'd1fb3cb8f2c7ce0c3b19787152d93c1a0ac84b72', class: {
+        return (h(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, h("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6d263b4960a3cffe985ee3af6d6e22e97ded4b7e' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalFooter {
     // Unwraps a nested .pds-modal__footer left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'ed10ed9c8ab3a472ec9e4d20683c4c209877a6c2', class: "pds-modal__footer" }, h("slot", { key: '35765b1624e35dfc540620b7fca20dba3a5c2ca7' })));
+        return (h("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, h("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalHeader {
     // Unwraps a nested .pds-modal__header left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '247373607b807a1428d5b3e7726bd88b6c23776b', class: "pds-modal__header" }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
+        return (h("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -1,9 +1,96 @@
 import { h } from "@stencil/core";
+import { closest } from "../../utils/closest";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
 const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
 const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
     /\d/.test(value) &&
     (typeof CSS === 'undefined' || CSS.supports('max-width', value));
+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));
+}
+/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
+function containsComposed(ancestor, node) {
+    for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
+        if (current === ancestor)
+            return true;
+    }
+    return false;
+}
+/** The focused element, followed down through shadow roots to the control that has focus. */
+function deepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModal {
     constructor() {
         this.focusableElements = [];
@@ -120,6 +207,17 @@ export class PdsModal {
                 // disableTopLayer), so do not trap Tab here.
                 if (this.disableTopLayer)
                     return;
+                // A control inside that handles Tab itself (a popup with its own trap) has already moved
+                // focus. This holds only when it listens on its own element, which runs before this
+                // document listener; one listening on document too would race it.
+                if (e.defaultPrevented)
+                    return;
+                // Every open modal hears this keydown. When focus is in a modal dialog opened above this one,
+                // that dialog traps Tab: this modal's list also holds its controls, so it would wrap first. A
+                // non-modal dialog inside (a disableTopLayer modal) doesn't trap, so this one still does.
+                const activeElement = deepActiveElement();
+                if (!activeElement || this.modalDialogAbove(activeElement))
+                    return;
                 // Content can change while the modal is open (rows fetched in, sections shown), so the
                 // first and last elements are read now rather than from the list taken on opening.
                 this.updateFocusableElements();
@@ -129,13 +227,13 @@ export class PdsModal {
                 // Get the first and last focusable elements
                 const firstFocusableElement = this.focusableElements[0];
                 const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
-                // Get the current active element
-                const activeElement = document.activeElement;
-                // Check if we need to wrap focus
-                const isFirstElement = activeElement === firstFocusableElement ||
-                    firstFocusableElement.contains(activeElement);
-                const isLastElement = activeElement === lastFocusableElement ||
-                    lastFocusableElement.contains(activeElement);
+                // activeElement is the control inside any shadow root, as the list holds, not the host
+                // document.activeElement reports. It's matched to its own stop first, so a stop inside a
+                // listed host isn't taken for that host; a focused node that isn't a stop counts as the
+                // innermost stop it sits in.
+                const stop = this.stopIndex(activeElement);
+                const isFirstElement = stop === 0;
+                const isLastElement = stop === this.focusableElements.length - 1;
                 // If shift + tab is pressed and focus is on the first element, move to the last element
                 if (e.shiftKey && isFirstElement) {
                     e.preventDefault();
@@ -192,23 +290,8 @@ export class PdsModal {
     updateFocusableElements() {
         if (!this.modalRef)
             return;
-        // Get all focusable elements within the modal
-        const selector = [
-            'a[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-            'pds-button:not([disabled])',
-            'pds-link:not([disabled])',
-            'pds-input:not([disabled])',
-            'pds-checkbox:not([disabled])',
-            'pds-radio:not([disabled])',
-            'pds-switch:not([disabled])',
-            'pds-select:not([disabled])',
-        ].join(',');
-        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
+        this.focusableElements = [];
+        collectTabbable(this.modalRef, this.focusableElements);
         // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
         // display isn't none; such an element can't take focus, so it can't anchor the trap.
         this.focusableElements = this.focusableElements.filter(el => {
@@ -217,6 +300,7 @@ export class PdsModal {
             const style = window.getComputedStyle(el);
             return style.display !== 'none' && style.visibility !== 'hidden';
         });
+        this.focusableElements = oneRadioPerGroup(this.focusableElements);
     }
     /**
      * Sets focus to the first focusable element in the modal
@@ -230,30 +314,11 @@ export class PdsModal {
         this.focusElement(firstElement);
     }
     /**
-     * Helper method to focus an element, with special handling for web components
+     * Focuses an element from the list. It holds the controls themselves, inside any shadow root,
+     * so they take focus directly.
      */
     focusElement(element) {
-        if (!element)
-            return;
-        try {
-            // Try standard focus first
-            element.focus();
-            // Check if focus worked
-            setTimeout(() => {
-                if (document.activeElement !== element) {
-                    // For web components, try to find a focusable element inside
-                    if (element.shadowRoot) {
-                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
-                        if (focusableInShadow) {
-                            focusableInShadow.focus();
-                        }
-                    }
-                }
-            }, 0);
-        }
-        catch (error) {
-            console.error('Error focusing element:', error);
-        }
+        element === null || element === void 0 ? void 0 : element.focus();
     }
     /**
      * Opens the modal
@@ -416,6 +481,30 @@ export class PdsModal {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    /** Whether a modal dialog other than this one sits between the focused element and this modal. */
+    modalDialogAbove(active) {
+        var _a;
+        for (let dialog = closest('dialog[open]', active); dialog instanceof HTMLElement;) {
+            if (dialog === this.modalRef)
+                return false;
+            if (dialog.matches(':modal'))
+                return true;
+            // Up from this dialog, across a shadow root; past the document root, closest() gives nothing.
+            dialog = closest('dialog[open]', (_a = dialog.parentElement) !== null && _a !== void 0 ? _a : dialog.getRootNode().host);
+        }
+        return false;
+    }
+    /** The focused element's place in the list: its own stop, or the innermost stop it sits in. */
+    stopIndex(active) {
+        const own = this.focusableElements.indexOf(active);
+        if (own >= 0)
+            return own;
+        for (let i = this.focusableElements.length - 1; i >= 0; i--) {
+            if (containsComposed(this.focusableElements[i], active))
+                return i;
+        }
+        return -1;
+    }
     resolveSize() {
         var _a;
         const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
@@ -430,14 +519,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', class: {
+        return (h("dialog", { key: 'b6714c7e77d80bf2370f2170ffce029abe147d81', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '8c3319f53dd8c79c9e952785277e9e82e28b651e', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { containsComposed } from "../../utils/closest";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
+import { setAttributesIfChanged } from "../../utils/attributes";
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -15,10 +17,22 @@ export class PdsPopover {
          * Tracks if the component is still mounted to prevent memory leaks
          */
         this.isComponentMounted = true;
+        /**
+         * Set once `componentDidLoad` has built the portal, so a later reconnect knows to rebuild it
+         */
+        this.hasLoaded = false;
+        /**
+         * A popover without a componentId keeps one generated portal id, even when the portal is rebuilt
+         */
+        this.generatedPortalId = null;
         /**
          * Reference to the trigger element
          */
         this.triggerEl = null;
+        /**
+         * Puts the trigger's ARIA back when something else removes or changes it
+         */
+        this.triggerObserver = null;
         /**
          * Portal element rendered in document.body
          */
@@ -80,6 +94,7 @@ export class PdsPopover {
             else {
                 this.triggerEl = null;
             }
+            this.observeTrigger();
         };
         /**
          * Handles changes to the default slot (popover content)
@@ -116,6 +131,9 @@ export class PdsPopover {
             }
         };
     }
+    restorePlacementDefault(newValue) {
+        this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
+    }
     componentDidLoad() {
         var _a;
         // Bind event handlers for cleanup
@@ -125,6 +143,7 @@ export class PdsPopover {
         this.boundResizeHandler = this.handleResize.bind(this);
         // Create portal element
         this.createPortal();
+        this.hasLoaded = true;
         // Initialize trigger element by calling slot change handler
         // This is a fallback for environments where slot change might not fire reliably
         const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
@@ -139,20 +158,69 @@ export class PdsPopover {
             this.linkTriggerToPortal();
         }
     }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (this.triggerEl == null || typeof MutationObserver === 'undefined')
+            return;
+        this.triggerObserver = new MutationObserver(() => this.linkTriggerToPortal());
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-expanded', 'aria-controls'],
+        });
+    }
     // Set ARIA attributes to establish relationship between trigger and popover
     // This mirrors the native Popover API's accessibility behavior
     linkTriggerToPortal() {
         if (this.triggerEl == null || this.portalEl == null)
             return;
-        this.triggerEl.setAttribute('aria-expanded', String(this.active));
-        this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
+        // Skips values already in place, so the trigger observer's own callback doesn't loop.
+        setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
+    }
+    // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
+    // disconnectedCallback tore down. Each step is a no-op when nothing was.
+    connectedCallback() {
+        var _a;
+        if (!this.hasLoaded)
+            return;
+        this.isComponentMounted = true;
+        this.createPortal();
+        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
+        this.observeTrigger();
+        this.linkTriggerToPortal();
+        // Still open after a move: the trigger moved, so the portal follows it.
+        if (this.active) {
+            requestAnimationFrame(() => this.handlePopoverPositioning());
+        }
     }
     disconnectedCallback() {
+        var _a;
+        // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
+        // already back in the page. Its portal is in <body>, untouched, so it stays open, with focus
+        // where it was.
+        if (this.el.isConnected)
+            return;
         this.isComponentMounted = false;
+        // Open, the content sits in the portal; put it back before the portal goes. Only listeners on
+        // the popover itself hear the close event now, but those are the ones mirroring its state.
+        if (this.active) {
+            this.restorePortalContent();
+            this.active = false;
+            this.linkTriggerToPortal();
+            this.pdsPopoverClose.emit({
+                componentId: this.componentId,
+                popoverType: this.popoverType,
+            });
+        }
         // Clean up trigger click event listener
         if (this.triggerEl != null) {
             this.triggerEl.removeEventListener('click', this.handleTriggerClick);
         }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
@@ -175,6 +243,7 @@ export class PdsPopover {
         }
     }
     createPortal() {
+        var _a;
         if (this.portalEl !== null)
             return;
         this.portalEl = document.createElement('div');
@@ -193,8 +262,8 @@ export class PdsPopover {
         this.portalEl.style.padding = 'var(--pine-dimension-md)';
         // Generate unique ID
         if (!this.componentId) {
-            const suffix = PdsPopover.instanceCounter++;
-            this.portalEl.id = `pds-popover-portal-${suffix}`;
+            (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
+            this.portalEl.id = this.generatedPortalId;
         }
         else {
             this.portalEl.id = `${this.componentId}-portal`;
@@ -306,10 +375,7 @@ export class PdsPopover {
         this.active = true;
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'true');
-        }
+        this.linkTriggerToPortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
         // Show portal
@@ -343,10 +409,7 @@ export class PdsPopover {
         this.active = false;
         // Restoring the content drops its focus to the body, so check where focus is first.
         const focusWasInside = this.portalEl.contains(document.activeElement);
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'false');
-        }
+        this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
         // Hide portal
@@ -572,7 +635,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '7f02e4a9af4d2dc4cafb9187fc2263edaa79af86', id: this.componentId }, h("span", { key: '128828d5fc52478b3e9670418a8e9c2d5ce6e7f6', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'c479f39a3653d6627a20d05c3a87ea1a5e2bebf2', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e730149edce755c8789ec700c0a95dfa4b4ab835', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '2f5ab80b4d75c114568d364ce9a74a658e426766', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '66347d4922274d25504e5be134b36f05a3f12fdc', id: this.componentId }, h("span", { key: '8f29d54d58cf0c66f86470c77c676716f1ab056f', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5c89b687cfc01e67d3c11835e77755de88f03584', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '0ca9aff3021720098d86ec29eb69cbf149ef79a9', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'b73c3324d3322c41c68161e9ada51499c0e49cb0', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -675,7 +738,7 @@ export class PdsPopover {
             },
             "placement": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "PlacementType",
                     "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
@@ -813,6 +876,12 @@ export class PdsPopover {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "placement",
+                "methodName": "restorePlacementDefault"
+            }];
+    }
 }
 /**
  * Instance counter for unique IDs

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

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { normalizeColorValue } from "../../utils/utils";
 export class PdsProgress {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
         * Determines whether or not progress is animated.
         * @defaultValue false
@@ -18,9 +20,17 @@ export class PdsProgress {
         */
         this.showPercent = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     render() {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
-        return (h(Host, { key: '2aaabbb78cef6237b47408a6766936a4ce065e40', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '192ce4a08155a84577ed46d9dc342a744354213a', class: "pds-progress" }, h("label", { key: '3e9f16f9a4c5d822ef6493d6457dbb657835903a', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '35b4cd422bb247b8ae8eeaa7c3ea231d312197c9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'a4952bcda7ab062da7ff706b519476f8e7fff898', class: "pds-progress__percentage" }, this.percent, "%")));
+        const hostClass = this.animated ? { 'is-animated': this.animated } : '';
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '5573a5c48eee2f7968835db92afdaebb73c1b85e', class: hostClass }, h("div", { key: 'bb5cf260495be798f4272673884336022c28441e', class: "pds-progress" }, h("label", { key: '017efa649ada73ec724b930e06bbf1ab19a18f61', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e648d910b072b7b2ca1c4a92c0832bf6e2ef5406', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '1f9f1733ff2cd6e2ec81e9a46759ff451cf158f7', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -167,4 +177,5 @@ export class PdsProgress {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }