@pine-ds/core 4.7.0 → 4.7.1

package/dist/cjs/pds-modal.cjs.entry.js

@@ -78,6 +78,20 @@ function oneRadioPerGroup(elements) {
     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. */
+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);
+}
 /** 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) {
@@ -361,17 +375,7 @@ const PdsModal = class {
     updateFocusableElements() {
         if (!this.modalRef)
             return;
-        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 => {
-            if (typeof el.checkVisibility === 'function')
-                return el.checkVisibility({ checkVisibilityCSS: true });
-            const style = window.getComputedStyle(el);
-            return style.display !== 'none' && style.visibility !== 'hidden';
-        });
-        this.focusableElements = oneRadioPerGroup(this.focusableElements);
+        this.focusableElements = tabbableIn(this.modalRef);
     }
     /**
      * Sets focus to the first focusable element in the modal
@@ -395,10 +399,13 @@ const PdsModal = class {
      * Opens the modal
      */
     async showModal() {
+        var _a;
         if (this.modalRef) {
             try {
-                // Store the currently focused element to restore focus when modal closes
-                this.previousActiveElement = document.activeElement;
+                // Store the currently focused element to restore focus when modal closes. Showing an open
+                // modal again (the open watcher does) would record a control inside it instead.
+                if (!this.modalRef.open)
+                    this.previousActiveElement = document.activeElement;
                 // showModal() promotes the dialog to the browser top layer (and makes the
                 // rest of the page inert), which prevents any overlay outside the dialog
                 // from ever painting above it. show() opens a non-modal dialog that stays
@@ -415,9 +422,20 @@ const PdsModal = class {
                     openModals.set(this.el, ++openSequence);
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
+                const openedAs = (_a = openModals.get(this.el)) !== null && _a !== void 0 ? _a : 0;
                 setTimeout(() => {
                     var _a, _b;
                     this.updateFocusableElements();
+                    // A modal opened above this one in the meantime has focus; don't take it back. Not this
+                    // modal itself (moving it gives it a new place), and not a disableTopLayer modal outside
+                    // it while this one is in the top layer, which sits below it.
+                    const openedAbove = Array.from(openModals).some(([modal, sequence]) => sequence > openedAs &&
+                        modal !== this.el &&
+                        (containsComposed(this.el, modal) || !modal.disableTopLayer || this.disableTopLayer));
+                    if (openedAbove) {
+                        this.pdsModalOpen.emit();
+                        return;
+                    }
                     if (this.disableInitialFocus) {
                         // show()/showModal() also move focus into the dialog natively (the
                         // HTML spec's "dialog focusing steps") — that native step isn't
@@ -461,6 +479,7 @@ const PdsModal = class {
      * Closes the modal
      */
     async hideModal() {
+        var _a;
         if (this.modalRef) {
             try {
                 // Capture before close(): with the async task queue, a prop change
@@ -476,11 +495,18 @@ const PdsModal = class {
                 this.modalRef.close();
                 this.open = false;
                 openModals.delete(this.el);
-                // Restore focus to the element that was focused before the modal was opened
-                if (!focusAlreadyMovedElsewhere &&
-                    this.previousActiveElement &&
-                    typeof this.previousActiveElement.focus === 'function') {
-                    this.previousActiveElement.focus();
+                // Restore focus to the element that was focused before the modal was opened. If that's
+                // gone or can't take focus (disabled, hidden, or nothing), fall back to the open modal now
+                // on top, so focus doesn't land on an inert page behind it.
+                if (!focusAlreadyMovedElsewhere) {
+                    const previous = this.previousActiveElement;
+                    if (previous && previous !== document.body && previous.isConnected)
+                        (_a = previous.focus) === null || _a === void 0 ? void 0 : _a.call(previous);
+                    const active = deepActiveElement();
+                    // document.body isn't a real restore target — it's just where focus lands when nothing
+                    // was focused before opening, so landing back there never counts as a successful restore.
+                    if (!previous || previous === document.body || !containsComposed(previous, active) || containsComposed(this.el, active))
+                        this.focusTopModal();
                 }
                 this.pdsModalClose.emit();
             }
@@ -489,6 +515,21 @@ const PdsModal = class {
             }
         }
     }
+    /**
+     * Focuses the first control of the open modal now on top, when the page behind it is inert: that
+     * modal is in the top layer (or paints there inside a top-layer one), or it wraps this one. A
+     * non-modal one over an interactive page, like a drawer, is left alone.
+     */
+    focusTopModal() {
+        var _a;
+        const top = this.innermostOpenModal();
+        const dialog = top === null || top === void 0 ? void 0 : top.querySelector('.pds-modal__backdrop');
+        if (!dialog)
+            return;
+        if (!closest.closest('dialog:modal', dialog) && !containsComposed(top, this.el))
+            return;
+        (_a = tabbableIn(dialog).find(el => !containsComposed(this.el, el))) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * Gets the z-index of a modal's backdrop element
      */
@@ -610,14 +651,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: '0633d4e8a7cb81f2f9280e754564960a00a4d60b', class: {
+        return (index.h("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.h("div", { key: '466f8a3476cf066817554f47ec7d3a0e3ab10b89', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.h("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '01ca45c96540416216a1082bad52b137720f0f4d' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pds-multiselect.cjs.entry.js

@@ -8,7 +8,7 @@ var index$1 = require('./index-5Azb8EQG.js');
 var i18nFormat = require('./i18n-format-BD0PmYzT.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
-const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
+const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
 
 // Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
 const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
@@ -349,6 +349,11 @@ const PdsMultiselect = class {
             e.preventDefault(); // Prevent focus change
             this.toggleOption(option);
         };
+        // mousedown already toggled the option. Without this, a click on the chip reaches the
+        // checkbox through its label and toggles it a second time.
+        this.handleOptionClick = (e) => {
+            e.preventDefault();
+        };
         this.handleOptionMouseEnter = (index, option) => () => {
             if (option.disabled)
                 return;
@@ -407,6 +412,18 @@ const PdsMultiselect = class {
             this.internals = this.el.attachInternals();
         }
     }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
     componentWillLoad() {
         this.originalSearchEmitter = this.pdsMultiselectSearch;
         this.syncSelectedItems();
@@ -505,8 +522,20 @@ const PdsMultiselect = class {
         var _a;
         (_a = this.slottedTriggerEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', String(this.isOpen));
     }
-    disabledChanged() {
+    disabledChanged(disabled) {
+        var _a, _b;
         this.syncSlottedTrigger();
+        // A disabled control can't stay open, or its options could still be toggled.
+        if (!disabled || !this.isOpen)
+            return;
+        const activeElement = document.activeElement;
+        const focusInside = !!(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || this.el.contains(activeElement));
+        this.closeDropdown();
+        // A disabled built-in trigger can't take focus back (falls to <body>, as natively); a slotted
+        // trigger without its own disabled property only gets aria-disabled and stays focusable, so
+        // focus would otherwise stay stranded on the closed panel's former content.
+        if (focusInside)
+            (_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
     /**
      * Sets focus on the trigger button.
@@ -516,7 +545,8 @@ const PdsMultiselect = class {
         (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
-     * Clears all selected values and resets the component.
+     * Clears all selected values and resets the component. Works while disabled too, as setting a
+     * native control's value from script does.
      */
     async clear() {
         const hadValues = this.value.length > 0 || this.searchQuery !== '';
@@ -1152,7 +1182,7 @@ const PdsMultiselect = class {
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
     }
     renderOptionAction(option, optionId, isHighlighted) {
         var _a;
@@ -1234,10 +1264,10 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (index.h(index.Host, { key: 'fcc35a82c16d5cf35a49ce997f19618104f9cc45', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '72d1fdf759d9173f54bac80ec50aff651fd2b357', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'e28f02c2beb23dc2c0deefadbd0645b20d938d91', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (index.h(index.Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), index.h("div", { key: '06539bf2c4b8da2889505a9f042d5cd6721b1853', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), index.h("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1253,7 +1283,7 @@ const PdsMultiselect = class {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: '3364fc00bc744fcd599436a9cb6dc563564d89d9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: 'bf712c65b9acb66e2998a43686fed408fc1ff48a', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'b485db6c2c3ae312cce2b90db60e850ad6dfdcf5', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '20daf861cf9584f33f5a9574e9581acc487e7dfe', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '018d333254771695a8c191f1cea40af6e78427a2', style: { display: 'none' } }, index.h("slot", { key: '2ef4a01fbe5d294a9ead5cc1183c28341834539b' })))));
+            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, index.h("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-radio.cjs.entry.js

@@ -8,7 +8,7 @@ require('./keep-hydrated-CiXgkEYd.js');
 
 const labelCss = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
-const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 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}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 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}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
+const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 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}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 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}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
 
 const PdsRadio = class {
     constructor(hostRef) {

package/dist/cjs/pds-row.cjs.entry.js

@@ -55,23 +55,23 @@ const PdsRow = class {
     }
     render() {
         const rowClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
     ${this.border ? 'pds-row--border' : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.noWrap ? 'pds-row--no-wrap' : ''}
   `;
         const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
-            '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
-            '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+            '--row-gap-x': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+            '--row-gap-y': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
         })), (this.colGapBlock && {
-            '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
+            '--row-gap-y': this.colGapBlock != null && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
         })), (this.colGapInline && {
-            '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
+            '--row-gap-x': this.colGapInline != null && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return index.h(index.Host, { key: '78a505fef7132f9545916155d2485a6d2df8f4a5', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return index.h(index.Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-switch.cjs.entry.js

@@ -100,6 +100,18 @@ const PdsSwitch = class {
             this.checked = state === (this.value || 'on');
         }
     }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el));
         this.updateHasLabelSlot();
@@ -108,9 +120,9 @@ const PdsSwitch = class {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (index.h(index.Host, { key: 'ee8576e523348ff9eed1b6087626849bb0966608', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: '09433b5356d718be65f4f2eb61f35fff1d000e10', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'f996a0fad56119674cfb7d95e1444bf411b64396', "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), index.h("span", { key: '4b23305d3cc0f5b37b23c6b79a14cfba57c16816', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: '258b5ccf0d4b01518df3a37772d694cb37569ffa', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            index.h("div", { key: 'c8196fa2ce832de3a8c6d987a78fd65d791c4c59', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '948894dd2e642689af6cad545a0b31f7c4711d87', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'd4b72b49bfd38a396b8f7c0686e1b2ef92d65491', icon: index$1.danger, size: "small" }), this.errorMessage)));
+        return (index.h(index.Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), index.h("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            index.h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-table-cell.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
-var truncationTooltip = require('./truncation-tooltip-CYgQfBLt.js');
+var truncationTooltip = require('./truncation-tooltip-DO9xli2e.js');
 require('./keep-hydrated-CiXgkEYd.js');
 require('./floating-ui.dom-Dc8Anyel.js');
 
@@ -14,6 +14,7 @@ const PdsTableCell = class {
         this.scrollContainer = null;
         this.setupRetries = 0;
         this.truncationCleanup = null;
+        this.hasLoaded = false;
         /**
          * Determines if the table is currently scrolling.
          * @defaultValue false
@@ -39,8 +40,23 @@ const PdsTableCell = class {
     componentWillRender() {
         this.tableRef = this.hostElement.closest('pds-table');
     }
+    // Fires again each time the cell is moved (a sort re-appends every row), unlike componentDidLoad,
+    // so it re-binds what disconnectedCallback tore down. The tooltip binds to the host, which exists before load.
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.tableRef = this.hostElement.closest('pds-table');
+        this.cleanupScrollListener();
+        if (this.needsScrollShadow) {
+            this.setupScrollListener();
+        }
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
     componentDidLoad() {
-        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
+        this.hasLoaded = true;
+        if (this.needsScrollShadow) {
             // For responsive tables with fixed columns, set up scroll detection
             // This enables the first column to show a shadow when the table is scrolled horizontally
             this.setupScrollListener();
@@ -53,6 +69,10 @@ const PdsTableCell = class {
         this.cleanupScrollListener();
         this.destroyTruncationTooltip();
     }
+    get needsScrollShadow() {
+        var _a;
+        return Boolean(((_a = this.tableRef) === null || _a === void 0 ? void 0 : _a.responsive) && this.tableRef.fixedColumn);
+    }
     setupScrollListener() {
         var _a;
         if (!this.tableRef)
@@ -131,11 +151,11 @@ const PdsTableCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: 'bedaeeb5723299656f872a760ed1dd80c7fe8793', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (index.h(index.Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '45182ee3e004097660432f552780b3d27671bd46' })));
+                : {} }, index.h("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pds-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var utils = require('./utils-BhRmyxT8.js');
-var truncationTooltip = require('./truncation-tooltip-CYgQfBLt.js');
+var truncationTooltip = require('./truncation-tooltip-DO9xli2e.js');
 var index$1 = require('./index.cjs.js');
 require('./keep-hydrated-CiXgkEYd.js');
 require('./floating-ui.dom-Dc8Anyel.js');
@@ -28,9 +28,10 @@ const PdsText = class {
     }
     validateSize(newValue) {
         // Skip when the prop is omitted or explicitly cleared (an empty string is a
-        // common "unset" sentinel). Any other unsupported value — including a
+        // common "unset" sentinel), or its attribute was removed (Stencil sets the
+        // prop to `null`). Any other unsupported value — including a
         // whitespace-only string — is a developer mistake worth warning about.
-        if (newValue === undefined || newValue === '') {
+        if (newValue == null || newValue === '') {
             return;
         }
         if (!index$1.TEXT_SIZES.includes(newValue)) {
@@ -43,6 +44,13 @@ const PdsText = class {
         // any attempt to apply an unknown size class. @Watch covers later changes.
         this.validateSize(this.size);
     }
+    // componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
+    // down. Before the first render there's no contentEl yet, and componentDidLoad binds it.
+    connectedCallback() {
+        if (this.truncate && this.contentEl) {
+            this.initTruncationTooltip();
+        }
+    }
     componentDidLoad() {
         if (this.truncate) {
             this.initTruncationTooltip();
@@ -72,23 +80,23 @@ const PdsText = class {
         const Tag = this.tag;
         const typeClasses = `
       pds-text
-      ${this.align !== undefined && this.align.trim() !== ''
+      ${this.align != null && this.align.trim() !== ''
             ? `pds-text--align-${this.align}`
             : ''}
-      ${this.gutter !== undefined && this.gutter.trim() !== ''
+      ${this.gutter != null && this.gutter.trim() !== ''
             ? `pds-text--gutter-${this.gutter}`
             : ''}
-      ${this.size !== undefined && this.size.trim() !== ''
+      ${this.size != null && this.size.trim() !== ''
             ? `pds-text--size-${this.size}`
             : ''}
-      ${this.weight !== undefined && this.weight.trim() !== ''
+      ${this.weight != null && this.weight.trim() !== ''
             ? `pds-text--weight-${this.weight}`
             : ''}
-      ${this.decoration !== undefined && this.decoration.trim() !== ''
+      ${this.decoration != null && this.decoration.trim() !== ''
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (index.h(Tag, { key: '6ae89af63963745cd4e8fa734a62f37bc27c59ac', ref: (el) => (this.contentEl = el), style: this.color && utils.setColor(this.color), class: typeClasses, part: "content" }, index.h("slot", { key: '008f5852aeb4b43cff1a2fea9be9d8fbba9f7934' })));
+        return (index.h(Tag, { key: '6460288f1d395080a39aec214e55cab87fdaec9f', ref: (el) => (this.contentEl = el), style: this.color && utils.setColor(this.color), class: typeClasses, part: "content" }, index.h("slot", { key: 'a8be0d96f72d8ee44288d7c8615155dc68d92663' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{truncation-tooltip-CYgQfBLt.js → truncation-tooltip-DO9xli2e.js}

@@ -72,7 +72,7 @@ function isOverflowing(el) {
  * @returns A cleanup function that removes all listeners, observers, and DOM elements.
  */
 function setupTruncationTooltip(options) {
-    const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
+    const { hostEl, contentEl, getTooltipText, placement = 'top', reference = hostEl, manageTabIndex = true, focusEl = hostEl } = options;
     injectStyles();
     let portalEl = null;
     let isHovering = false;
@@ -167,7 +167,7 @@ function setupTruncationTooltip(options) {
         if (!portalEl)
             return;
         try {
-            const { x, y } = await floatingUi_dom.computePosition(hostEl, portalEl, {
+            const { x, y } = await floatingUi_dom.computePosition(reference, portalEl, {
                 placement,
                 strategy: 'fixed',
                 middleware: [floatingUi_dom.offset(4), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 5 })],
@@ -180,7 +180,7 @@ function setupTruncationTooltip(options) {
         catch (_a) {
             // Fallback: position above the element with bounds checking
             if (portalEl) {
-                const rect = hostEl.getBoundingClientRect();
+                const rect = reference.getBoundingClientRect();
                 const portalRect = portalEl.getBoundingClientRect();
                 const padding = 5;
                 // Ensure tooltip stays within viewport bounds
@@ -266,8 +266,8 @@ function setupTruncationTooltip(options) {
     }
     hostEl.addEventListener('mouseenter', handleMouseEnter);
     hostEl.addEventListener('mouseleave', handleMouseLeave);
-    hostEl.addEventListener('focusin', handleFocusIn);
-    hostEl.addEventListener('focusout', handleFocusOut);
+    focusEl.addEventListener('focusin', handleFocusIn);
+    focusEl.addEventListener('focusout', handleFocusOut);
     // Return cleanup function
     return () => {
         disposed = true;
@@ -287,8 +287,8 @@ function setupTruncationTooltip(options) {
         }
         hostEl.removeEventListener('mouseenter', handleMouseEnter);
         hostEl.removeEventListener('mouseleave', handleMouseLeave);
-        hostEl.removeEventListener('focusin', handleFocusIn);
-        hostEl.removeEventListener('focusout', handleFocusOut);
+        focusEl.removeEventListener('focusin', handleFocusIn);
+        focusEl.removeEventListener('focusout', handleFocusOut);
         removePortal();
     };
 }