@pine-ds/core 4.6.0 → 4.7.1

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

@@ -249,9 +249,13 @@
   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);
 }

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

@@ -345,6 +345,11 @@ export class PdsMultiselect {
             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;
@@ -403,6 +408,18 @@ export class PdsMultiselect {
             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();
@@ -501,8 +518,20 @@ export class PdsMultiselect {
         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.
@@ -512,7 +541,8 @@ export class PdsMultiselect {
         (_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 !== '';
@@ -535,11 +565,12 @@ export class PdsMultiselect {
     }
     /**
      * Handle global keyboard events for accessibility.
-     * Closes dropdown on Escape key press regardless of focus location.
+     * Closes dropdown on Escape key press regardless of focus location. Taken in document's capture
+     * phase, before a modal around the multiselect hears it on document and closes too.
      */
     handleWindowKeyDown(event) {
         var _a;
-        if (!this.isOpen)
+        if (!this.isOpen || event.defaultPrevented)
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -1147,7 +1178,7 @@ export class PdsMultiselect {
                 '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 ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (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 ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (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;
@@ -1229,10 +1260,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '0ef6791666063e0d951d28f980b3bca89cf24287', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f0ccbabfbd2dcf38f6df52f73f2152eb4bd2828e', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '88e01c744644ce1f75c8d5b71dfaeeb79d1ef7df', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '0bf4a3b1378ff18e6d6b449507ebbae1bfb279e4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (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,
@@ -1248,7 +1279,7 @@ export class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": 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 }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '5202a263b219d06891bda739f98db0162bf33c48', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '47f7b55863c5b72d41c4ef1893b9364988fc0b56', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '3930dc30b2df7179d178873c470aa1da0f6f258c', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'e31d55db3fd0173c56faa23e34e0be92371983d4', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'b3326cc1a5e5886be05327a066e0a7ddd36ccefc', style: { display: 'none' } }, h("slot", { key: '91559cb9510abce6084348a17516460fd8545ef7' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, h("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -2439,7 +2470,7 @@ export class PdsMultiselect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Clears all selected values and resets the component.",
+                    "text": "Clears all selected values and resets the component. Works while disabled too, as setting a\nnative control's value from script does.",
                     "tags": []
                 }
             },
@@ -2488,8 +2519,8 @@ export class PdsMultiselect {
         return [{
                 "name": "keydown",
                 "method": "handleWindowKeyDown",
-                "target": "window",
-                "capture": false,
+                "target": "document",
+                "capture": true,
                 "passive": false
             }];
     }

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

@@ -1,9 +1,19 @@
 import { Host, h } from "@stencil/core";
-import { containsComposed } from "../../utils/closest";
+import { closest, containsComposed } from "../../utils/closest";
 import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 import { setAttributesIfChanged } from "../../utils/attributes";
 import { cssEscape } from "../../utils/css";
 import { limitRestores } from "../../utils/keep-hydrated";
+/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
+const openAutoPopovers = [];
+/** 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;
+}
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -36,7 +46,7 @@ export class PdsPopover {
          */
         this.triggerObserver = null;
         /**
-         * Portal element rendered in document.body
+         * Portal element: in document.body, or in the open dialog the popover is in
          */
         this.portalEl = null;
         /**
@@ -132,6 +142,26 @@ export class PdsPopover {
                     break;
             }
         };
+        /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
+        this.shadowFocusStyle = null;
+        /** The dialog the panel was opened in, closed along with it. */
+        this.watchedDialog = null;
+        this.onDialogClose = () => {
+            this.hide();
+        };
+        /**
+         * Inside a dialog, the panel can sit in a form that wraps the dialog, which a body portal never
+         * did. A submit from the panel (a button in it, or Enter in a field in it) is stopped, so the
+         * panel behaves as it does in the body.
+         */
+        this.handleSubmitFromPanel = (event) => {
+            if (!this.portalEl || !containsComposed(event.target, this.portalEl))
+                return;
+            if (containsComposed(this.portalEl, event.submitter) || containsComposed(this.portalEl, deepActiveElement())) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
     }
     restorePlacementDefault(newValue) {
         this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -194,19 +224,23 @@ export class PdsPopover {
         (_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.
+        // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
+        // is in now, if any.
         if (this.active) {
+            this.placePortal();
             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.
+        // already back in the page. Its portal is outside the popover, so it stays open, with focus
+        // where it was; connectedCallback moves it to follow the popover.
         if (this.el.isConnected)
             return;
         this.isComponentMounted = false;
+        this.unwatchDialogClose();
+        this.forgetOpen();
         // 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) {
@@ -227,6 +261,7 @@ export class PdsPopover {
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
         // Remove portal from DOM
@@ -271,9 +306,6 @@ export class PdsPopover {
         else {
             this.portalEl.id = `${this.componentId}-portal`;
         }
-        // Add accessibility attributes for screen readers
-        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
-        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
         // Append to body
         document.body.appendChild(this.portalEl);
         // Add global focus styles to match Pine design system
@@ -357,7 +389,27 @@ export class PdsPopover {
         // Clear tracking array
         this.movedNodes = [];
     }
+    copyFocusStylesInto(root) {
+        var _a, _b, _c;
+        // Outside a shadow root the document's own style applies, so drop a copy left in one.
+        if (!(root instanceof ShadowRoot)) {
+            (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+            this.shadowFocusStyle = null;
+            return;
+        }
+        if (((_b = this.shadowFocusStyle) === null || _b === void 0 ? void 0 : _b.parentNode) === root || !this.portalEl)
+            return;
+        const source = document.querySelector(`style[data-pds-popover-focus="${cssEscape(this.portalEl.id)}"]`);
+        if (!source)
+            return;
+        (_c = this.shadowFocusStyle) === null || _c === void 0 ? void 0 : _c.remove();
+        this.shadowFocusStyle = source.cloneNode(true);
+        root.appendChild(this.shadowFocusStyle);
+    }
     removePortal() {
+        var _a;
+        (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+        this.shadowFocusStyle = null;
         if (this.portalEl) {
             // Remove the portal element from DOM
             if (this.portalEl.parentNode) {
@@ -382,9 +434,13 @@ export class PdsPopover {
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
         this.linkTriggerToPortal();
+        this.placePortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
-        // Show portal
+        // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
+        // an auto popover listens for Escape.
+        if (this.popoverType === 'auto')
+            this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
         this.portalEl.style.visibility = 'visible';
@@ -396,8 +452,10 @@ export class PdsPopover {
         });
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
+        document.addEventListener('submit', this.handleSubmitFromPanel, true);
         // Add document listeners for light dismiss and escape key (auto type only)
         if (this.popoverType === 'auto') {
+            openAutoPopovers.push(this);
             this.addLightDismissListeners();
         }
         // Emit open event
@@ -413,12 +471,16 @@ export class PdsPopover {
         if (!this.active || !this.portalEl)
             return;
         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);
+        this.unwatchDialogClose();
+        // Restoring the content drops its focus to the body, so check where focus is first. In a
+        // shadow root, document.activeElement is only its host.
+        const focusWasInside = containsComposed(this.portalEl, deepActiveElement());
         this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
-        // Hide portal
+        // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
+        this.portalEl.style.border = '';
+        this.portalEl.removeAttribute('data-pds-popover-open');
         this.portalEl.style.display = 'none';
         this.portalEl.style.opacity = '0';
         this.portalEl.style.visibility = 'hidden';
@@ -428,8 +490,10 @@ export class PdsPopover {
             this.returnFocusToTrigger();
         }
         // Remove all listeners
+        this.forgetOpen();
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending timers
         this.clearDebounceTimers();
         // Emit close event
@@ -449,6 +513,59 @@ export class PdsPopover {
             this.show();
         }
     }
+    /**
+     * Puts the panel where it shows above everything around the popover. In an open dialog, it goes
+     * inside it: a modal dialog sits in the top layer above the body and makes the rest of the page
+     * inert, and a non-modal one sits above it by z-index. Right after the popover, it's next in the
+     * Tab order. In another component's slot, though, it would have no slot to render in, and in a
+     * form its buttons would submit it, so there it goes at the end of the dialog.
+     */
+    placePortal() {
+        var _a, _b;
+        if (!this.portalEl)
+            return;
+        const dialog = closest('dialog[open]', this.el);
+        if (!dialog) {
+            this.unwatchDialogClose();
+            this.portalEl.style.border = '';
+            if (this.portalEl.parentElement !== document.body)
+                document.body.appendChild(this.portalEl);
+            this.copyFocusStylesInto(document);
+            return;
+        }
+        const form = closest('form', this.el);
+        const besidePopover = !((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) && !(form && containsComposed(dialog, form));
+        if (besidePopover) {
+            if (this.el.nextElementSibling !== this.portalEl)
+                (_b = this.el.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(this.portalEl, this.el.nextSibling);
+        }
+        else if (this.portalEl.parentNode !== dialog) {
+            dialog.appendChild(this.portalEl);
+        }
+        this.watchDialogClose(dialog);
+        const root = this.portalEl.getRootNode();
+        this.copyFocusStylesInto(root);
+        // In a shadow root, the copied dark-mode rule can't see a [data-theme="dark"] on the page.
+        this.portalEl.style.border = root instanceof ShadowRoot && closest('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
+    }
+    forgetOpen() {
+        const index = openAutoPopovers.indexOf(this);
+        if (index >= 0)
+            openAutoPopovers.splice(index, 1);
+    }
+    /**
+     * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
+     * dialog when it's above it: a top-layer dialog or a pds-modal. A plain non-modal dialog inside
+     * the popover's modal doesn't close on Escape, so the popover takes it.
+     */
+    takesEscapeFrom(event) {
+        var _a, _b;
+        const origin = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
+        const dialog = closest('dialog[open]', origin);
+        if (!dialog || containsComposed(dialog, this.portalEl))
+            return true;
+        return !(dialog.classList.contains('pds-modal__backdrop') || dialog.matches(':modal'));
+    }
     /**
      * Adds light dismiss listeners (click outside and escape key)
      */
@@ -457,6 +574,19 @@ export class PdsPopover {
         document.addEventListener('click', this.boundClickOutsideHandler, true);
         document.addEventListener('keydown', this.boundEscapeKeyHandler);
     }
+    /** Closes the popover when the dialog it opened in closes, so it isn't left open inside. */
+    watchDialogClose(dialog) {
+        if (this.watchedDialog === dialog)
+            return;
+        this.unwatchDialogClose();
+        this.watchedDialog = dialog;
+        dialog.addEventListener('close', this.onDialogClose);
+    }
+    unwatchDialogClose() {
+        var _a;
+        (_a = this.watchedDialog) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.onDialogClose);
+        this.watchedDialog = null;
+    }
     /**
      * Removes light dismiss listeners
      */
@@ -482,7 +612,7 @@ export class PdsPopover {
      * Handles clicks outside the popover for light dismiss (auto type only)
      */
     handleClickOutside(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         // Ignore events that occurred at or before the popover opened
         // This prevents the opening click from immediately closing the popover
         // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
@@ -493,16 +623,18 @@ export class PdsPopover {
         if (eventTime <= this.openTimestamp) {
             return;
         }
-        const target = event.target;
+        // In a shadow root, event.target is only its host.
+        const target = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
         // A datepicker's calendar is portaled to the body: a click in the calendar of a datepicker
-        // inside this popover, in its content or its trigger, isn't outside it.
-        const calendar = (_b = (_a = target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.pds-datepicker-calendar-portal');
+        // inside this popover, in its content or its trigger, isn't outside it. The target can be
+        // inside the calendar's shadow root, so look up across it.
+        const calendar = closest('.pds-datepicker-calendar-portal', target);
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (containsComposed(this.portalEl, owner) || containsComposed(this.triggerEl, owner)))
             return;
         // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.contains(target);
-        const clickedInsideTrigger = (_d = this.triggerEl) === null || _d === void 0 ? void 0 : _d.contains(target);
+        const clickedInsidePopover = containsComposed(this.portalEl, target);
+        const clickedInsideTrigger = containsComposed(this.triggerEl, target);
         if (!clickedInsidePopover && !clickedInsideTrigger) {
             this.hide();
         }
@@ -523,14 +655,19 @@ export class PdsPopover {
      * Mirrors native Popover API: Escape closes and returns focus to trigger
      */
     handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            // Prevent default Escape behavior and stop propagation
-            // This mirrors native Popover API which handles Escape exclusively
-            event.preventDefault();
-            event.stopPropagation();
-            // Close popover and return focus to trigger
-            this.hide();
-        }
+        // A control inside that closes on Escape (a datepicker, a combobox) has handled it already.
+        if (event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        // Like the native Popover API, Escape closes only the top popover: the last one opened that
+        // it applies to. Every open popover hears it, so each checks whether it's that one.
+        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        if (top !== this)
+            return;
+        // Take the key, so the dialog or modal around it doesn't close too.
+        event.preventDefault();
+        event.stopPropagation();
+        // Close popover and return focus to trigger
+        this.hide();
     }
     /**
      * Handles scroll events to reposition the popover (debounced for performance)
@@ -635,13 +772,20 @@ export class PdsPopover {
         }
         this.portalEl.style.top = `${top}px`;
         this.portalEl.style.left = `${left}px`;
+        // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
+        // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
+        const placed = this.portalEl.getBoundingClientRect();
+        if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
+            this.portalEl.style.top = `${2 * top - placed.top}px`;
+            this.portalEl.style.left = `${2 * left - placed.left}px`;
+        }
         // Reset the repositioning guard after a short delay
         setTimeout(() => {
             this.isRepositioning = false;
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: 'd804db8c73e0dc2acf0d1bbca20edb77993ff7fd', id: this.componentId }, h("span", { key: '5408d1856c9b13b327ea13b43cffc23af925a82f', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '9d0ff01292c67bdaa88d49114162c3c65ff8a20d', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'cdd38016453ea1838d5718fb8e190cd4304ac8cc', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '9faf60d7be7a2ff3c5fe6c3e4de374bafadf848a', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, h("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -181,6 +181,7 @@ label:has(input:disabled) {
   column-gap: var(--pine-dimension-xs);
   display: flex;
   flex: 1;
+  flex-direction: row;
   padding: var(--pine-dimension-md);
 }
 @media (max-width: 767px) {
@@ -235,6 +236,11 @@ label:has(input:disabled) {
   object-fit: cover;
   width: 100%;
 }
+:host(.has-image) .pds-radio__content-wrapper {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 :host(.has-image) .pds-radio__message {
   grid-area: message;
   margin-block-start: 0;

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

@@ -51,23 +51,23 @@ export class PdsRow {
     }
     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 h(Host, { key: '78a505fef7132f9545916155d2485a6d2df8f4a5', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -93,6 +93,18 @@ export class PdsSwitch {
             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({}, inheritAriaAttributes(this.el));
         this.updateHasLabelSlot();
@@ -101,9 +113,9 @@ export class PdsSwitch {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (h(Host, { key: 'ee8576e523348ff9eed1b6087626849bb0966608', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '09433b5356d718be65f4f2eb61f35fff1d000e10', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f996a0fad56119674cfb7d95e1444bf411b64396', "aria-describedby": 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)), h("span", { key: '4b23305d3cc0f5b37b23c6b79a14cfba57c16816', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '258b5ccf0d4b01518df3a37772d694cb37569ffa', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: 'c8196fa2ce832de3a8c6d987a78fd65d791c4c59', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '948894dd2e642689af6cad545a0b31f7c4711d87', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd4b72b49bfd38a396b8f7c0686e1b2ef92d65491', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": 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)), h("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,7 @@ export class PdsTableCell {
         this.scrollContainer = null;
         this.setupRetries = 0;
         this.truncationCleanup = null;
+        this.hasLoaded = false;
         /**
          * Determines if the table is currently scrolling.
          * @defaultValue false
@@ -31,8 +32,23 @@ export class PdsTableCell {
     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();
@@ -45,6 +61,10 @@ export class PdsTableCell {
         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)
@@ -123,11 +143,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'bedaeeb5723299656f872a760ed1dd80c7fe8793', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '45182ee3e004097660432f552780b3d27671bd46' })));
+                : {} }, h("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }