@pine-ds/core 3.28.0 → 3.30.0

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { isSpecTest } from "../../utils/form";
+import { assignDescription, isSpecTest, messageId } from "../../utils/form";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { debounceEvent } from "../../utils/utils";
 import DOMPurify from "dompurify";
@@ -1450,6 +1450,19 @@ export class PdsCombobox {
             ,
             large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
     }
+    // Mirrors pds-multiselect and pds-select: an error message on its own puts the
+    // field in an invalid state, so assistive tech agrees with the visual treatment.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
+    renderMessages() {
+        const hasErrorMessage = Boolean(this.errorMessage);
+        const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
+        return [
+            showHelperMessage && (h("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
+            hasErrorMessage && (h("p", { class: "pds-combobox__error", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { icon: "danger", size: "small", "aria-hidden": "true" }), this.errorMessage)),
+        ];
+    }
     render() {
         const triggerClass = [
             'pds-combobox__button-trigger',
@@ -1458,10 +1471,13 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '3de5711e53460545e3cb962d446880a99edcd44c', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'cce16999fc6be08b99a113ae58cb2be0fbe9c577', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '355650eba712d6c91694752daed4cf18008a920d', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '115a28c139b06d852de925536a7345958730265b', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b0ede014fa6bfda054aa641556afa82c8240be52', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: 'befefbc617146f1b5f896988608a6a57f6ff826c', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '87ffd9a2472b7459343daf4c0f7d46f260365180', style: { display: 'none' } }, h("slot", { key: 'fd0e21c876fbf21761ad63c9529a304912aecd1d', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: {
+                'pds-combobox__input': true,
+                'pds-combobox__input--invalid': this.isInvalid(),
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(this.highlightedIndex) : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '5458993624cf3b2cd70026001a289cb3328b955e', style: { display: 'none' } }, h("slot", { key: '03178355e67f7347f832725d26fafe6281bd2541', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -1582,6 +1598,25 @@ export class PdsCombobox {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
             "dropdownPlacement": {
                 "type": "string",
                 "mutable": false,
@@ -1651,6 +1686,25 @@ export class PdsCombobox {
                 "attribute": "dropdown-mount",
                 "defaultValue": "'host'"
             },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper message to display below the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
             "hideLabel": {
                 "type": "boolean",
                 "mutable": false,
@@ -1671,6 +1725,25 @@ export class PdsCombobox {
                 "attribute": "hide-label",
                 "defaultValue": "false"
             },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the combobox is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

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

@@ -10,7 +10,10 @@ export default {
     dropdownPlacement: 'bottom-start',
     dropdownMount: 'host',
     dropdownWidth: '236px',
+    errorMessage: null,
+    helperMessage: null,
     hideLabel: false,
+    invalid: false,
     maxHeight: null,
     mode: 'filter',
     trigger: 'input',
@@ -38,7 +41,10 @@ const BaseTemplate = (args) => html`
   dropdown-placement=${args.dropdownPlacement}
   dropdown-mount=${args.dropdownMount}
   dropdown-width=${args.dropdownWidth}
+  error-message=${args.errorMessage}
+  helper-message=${args.helperMessage}
   hide-label=${args.hideLabel}
+  invalid=${args.invalid}
   max-height=${args.maxHeight}
   label=${args.label}
   placeholder=${args.placeholder}
@@ -70,6 +76,25 @@ Default.args = {
   value: 'panda',
 };
 
+export const HelperMessage = BaseTemplate.bind();
+HelperMessage.args = {
+  componentId: 'combobox-helper-story',
+  name: 'favoriteAnimal',
+  label: 'Favorite Animal',
+  placeholder: 'placeholder_text',
+  helperMessage: 'Start typing to filter the list.',
+};
+
+export const ErrorMessage = BaseTemplate.bind();
+ErrorMessage.args = {
+  componentId: 'combobox-error-story',
+  name: 'favoriteAnimal',
+  label: 'Favorite Animal',
+  placeholder: 'placeholder_text',
+  errorMessage: 'Please choose an animal.',
+  invalid: true,
+};
+
 export const ButtonTrigger = BaseTemplate.bind();
 ButtonTrigger.args = {
   componentId: 'combobox-button-trigger-story',

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

@@ -289,7 +289,7 @@ export class PdsInput {
         return (h(Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (h("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && h("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '3785b396bf9174766973e8b19028e4dcecde19d9', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'e9e4aa936346811e0a5ca0fa5107f548b52fcc99', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'ef3694246fa3d8f818da438e7ec4411dd56b084c', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'f1e488b33c8338f54cd83a59e219311a844e3c97', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && h("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '41ed8dab6f7c71c6c382627ca4dc48bb95c1161d', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '4791ddeb01b758a94a2fddfec6093b9b39eefafa', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'd0a22ae4b0e400e1d5df55e35c0aaaa5c5ea3ab7', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '69975cdcc15e5ab6df9e2c354977e2c6dae18f6e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,4 +70,14 @@
 .pds-link--plain:hover {
   color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));
   text-decoration: underline;
+}
+
+:host([active]) .pds-link {
+  color: var(--pds-context-link-color, var(--pine-color-text-strong));
+  text-decoration: underline;
+}
+
+:host([active]) .pds-link:hover {
+  color: var(--pds-context-link-color-hover, var(--pine-color-text-strong));
+  text-decoration: underline;
 }

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

@@ -7,6 +7,13 @@ import { launch } from "@pine-ds/icons/icons";
  */
 export class PdsLink {
     constructor() {
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
         /**
          * Determines whether the link should open in a new tab.
          * @defaultValue false
@@ -49,8 +56,8 @@ export class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '314a6249f39716ab2e632c2cb4c588ce2c74a77b', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'ceab5601c349ece4b142f16f682d5a2d2d0ba59a' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: 'cba3137af21eb374c8318e43e279e77fefdc1b5c', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +73,29 @@ export class PdsLink {
     }
     static get properties() {
         return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Marks the link as the current/active navigation item \u2014 for tab strips and\nnav rails built from links. Applies the active treatment (persistent\nunderline + strong text) and sets `aria-current=\"page\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
             "color": {
                 "type": "string",
                 "mutable": false,

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

@@ -58,3 +58,17 @@ WithoutCustomTextInSlot.args = {
   fontSize: 'lg',
   variant: 'inline'
 };
+
+// A per-URL tab strip built from links (pds-tabs is an in-page panel switcher,
+// not navigation). `active` marks the current destination — persistent underline
+// + strong text, and `aria-current="page"`, which is the correct ARIA token for
+// links that navigate to distinct pages.
+export const NavTabs = {
+  render: () => html`
+    <nav aria-label="Club sections" style="display: flex; gap: var(--pine-dimension-md);">
+      <pds-link href="/clubs/1/chat" font-size="md" ?active=${true}>Chat</pds-link>
+      <pds-link href="/clubs/1/resources" font-size="md" variant="plain">Resources</pds-link>
+      <pds-link href="/clubs/1/members" font-size="md" variant="plain">Members</pds-link>
+    </nav>
+  `,
+};

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

@@ -22,6 +22,16 @@ export class PdsModal {
          * @default true
          */
         this.scrollable = true;
+        /**
+         * Whether the modal opens outside the browser top layer as a non-modal dialog.
+         * When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
+         * overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
+         * above it via `z-index`. The page is not made inert and focus is not trapped in
+         * this mode. Read when the modal opens; changing it while the modal is open is
+         * not supported.
+         * @default false
+         */
+        this.disableTopLayer = false;
         /**
          * Stores the list of focusable elements in the modal
          */
@@ -43,6 +53,13 @@ export class PdsModal {
                 return;
             // Handle Escape key to close the modal
             if (e.key === 'Escape') {
+                // In non-top-layer mode, focus can move into an overlay stacked above the
+                // modal (the reason disableTopLayer exists). If that overlay owns focus,
+                // leave Escape to it rather than dismissing this modal out from under it.
+                const active = document.activeElement;
+                if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
+                    return;
+                }
                 // Always prevent native dialog close behavior
                 e.preventDefault();
                 // Only close if backdropDismiss is enabled and this is the innermost modal
@@ -53,6 +70,11 @@ export class PdsModal {
             }
             // Handle Tab key for focus trapping
             if (e.key === 'Tab') {
+                // In non-top-layer mode the modal is deliberately not focus-isolated: focus
+                // must be able to leave it into overlays stacked above (the whole point of
+                // disableTopLayer), so do not trap Tab here.
+                if (this.disableTopLayer)
+                    return;
                 // If there are no focusable elements, do nothing
                 if (this.focusableElements.length === 0)
                     return;
@@ -170,8 +192,16 @@ export class PdsModal {
             try {
                 // Store the currently focused element to restore focus when modal closes
                 this.previousActiveElement = document.activeElement;
-                // Use native dialog showModal method which makes the rest of the page inert
-                this.modalRef.showModal();
+                // 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
+                // in the normal stacking context so those overlays can stack above it.
+                if (this.disableTopLayer) {
+                    this.modalRef.show();
+                }
+                else {
+                    this.modalRef.showModal();
+                }
                 this.open = true;
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
@@ -233,14 +263,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: 'cf2710a889d8f0e80a3551088ab38a88dc44ad1e', class: {
+        return (h("dialog", { key: 'd345ea0a585213fd7879a2fe27071705fbdba79b', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'a06d017153e67ad38bc1ced56ba22aeade977aaf', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '34c9a222d58ffd9736a36ab6848679186167e878', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'd995c586809a4940c091912244a86cb4605a961c' }))));
+            }, part: "modal" }, h("slot", { key: '4eef9c3001b6a7c972fa8e49fa3f0b140c7fe7ce' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -365,6 +395,29 @@ export class PdsModal {
                 "reflect": false,
                 "attribute": "scrollable",
                 "defaultValue": "true"
+            },
+            "disableTopLayer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the modal opens outside the browser top layer as a non-modal dialog.\nWhen `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so\noverlays rendered elsewhere in the DOM (file pickers, editor menus) can display\nabove it via `z-index`. The page is not made inert and focus is not trapped in\nthis mode. Read when the modal opens; changing it while the modal is open is\nnot supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-top-layer",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -8,6 +8,7 @@ export default {
   args: {
     backdropDismiss: true,
     componentId: 'modal-demo',
+    disableTopLayer: false,
     open: false,
     scrollable: true,
     size: 'md',
@@ -26,6 +27,7 @@ const BaseTemplate = (args) => html`
       component-id="${args.componentId}"
       size="${args.size}"
       ?backdrop-dismiss=${args.backdropDismiss}
+      ?disable-top-layer=${args.disableTopLayer}
       scrollable="${args.scrollable}"
       ?open=${args.open}
       key="${args.scrollable ? 'scrollable' : 'non-scrollable'}"
@@ -652,3 +654,78 @@ export const CustomBorders = CustomBordersTemplate.bind({});
 CustomBorders.args = {
   componentId: 'custom-borders-modal',
 };
+
+// Demonstrates `disable-top-layer`: the modal opens as a non-modal dialog
+// (dialog.show()) so an overlay appended to document.body can display above it.
+// With the default top-layer behavior the same overlay would render behind the
+// modal and be unreachable.
+const DisableTopLayerTemplate = (args) => html`
+  <div style="padding: 1rem;">
+    <pds-button onClick="document.querySelector('#${args.componentId}').open = true">
+      Open Modal (disable-top-layer)
+    </pds-button>
+
+    <pds-modal
+      id="${args.componentId}"
+      component-id="${args.componentId}"
+      size="${args.size}"
+      ?backdrop-dismiss=${args.backdropDismiss}
+      ?disable-top-layer=${args.disableTopLayer}
+      ?open=${args.open}
+    >
+      <pds-modal-header>
+        <pds-box direction="column" fit padding="md">
+          <pds-box align-items="center" fit justify-content="space-between">
+            <pds-text tag="h2" size="h3">Modal Title</pds-text>
+            <pds-button
+              class="pds-modal__close"
+              variant="unstyled"
+              icon-only="true"
+              onclick="document.querySelector('#${args.componentId}').open = false"
+              aria-label="Close modal"
+              part="close-button"
+            >
+              <pds-icon slot="start" name="remove" aria-hidden="true"></pds-icon>
+            </pds-button>
+          </pds-box>
+        </pds-box>
+      </pds-modal-header>
+
+      <pds-modal-content>
+        <pds-box fit direction="column" padding-inline-start="md" padding-inline-end="md" gap="sm">
+          <p>
+            This modal uses <code>disable-top-layer</code>, so it renders in the normal stacking
+            context instead of the browser top layer.
+          </p>
+          <p>
+            An overlay appended to <code>document.body</code> with a higher <code>z-index</code> can
+            therefore display above it &mdash; useful for file pickers, rich-text editor menus, and
+            other body-mounted overlays that would otherwise be trapped behind a top-layer dialog.
+          </p>
+          <pds-button
+            variant="secondary"
+            onclick="(function(){var o=document.createElement('button');o.type='button';o.textContent='Overlay above the modal — focusable, keyboard-dismissable. Click or press Enter.';o.setAttribute('style','position:fixed;inset:auto 2rem 2rem auto;max-width:20rem;padding:1rem;border:0;text-align:start;border-radius:8px;background:#111;color:#fff;z-index:2147483647;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)');var modal=document.querySelector('#${args.componentId}');var remove=function(){o.remove()};o.onclick=remove;o.addEventListener('keydown',function(e){if(e.key==='Escape')remove()});if(modal)modal.addEventListener('pdsModalClose',remove,{once:true});document.body.appendChild(o);o.focus();})()"
+          >
+            Show overlay above modal
+          </pds-button>
+        </pds-box>
+      </pds-modal-content>
+
+      <pds-modal-footer>
+        <pds-box justify-content="end" fit padding="md" gap="sm">
+          <pds-button variant="secondary" onclick="document.querySelector('#${args.componentId}').open = false">
+            Close
+          </pds-button>
+        </pds-box>
+      </pds-modal-footer>
+    </pds-modal>
+  </div>
+`;
+
+export const DisableTopLayer = DisableTopLayerTemplate.bind({});
+DisableTopLayer.args = {
+  componentId: 'disable-top-layer-modal',
+  disableTopLayer: true,
+  size: 'md',
+  open: false,
+};

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

@@ -291,7 +291,7 @@
 
 .pds-multiselect__helper {
   color: var(--pine-color-text-message);
-  font: var(--pine-typography-body-sm);
+  font: var(--pine-typography-body-sm-medium);
   margin-block-start: var(--pine-dimension-2xs);
   margin-inline-start: var(--pine-dimension-none);
 }
@@ -300,7 +300,7 @@
   align-items: flex-start;
   color: var(--pine-color-text-message-danger);
   display: flex;
-  font: var(--pine-typography-body-sm);
+  font: var(--pine-typography-body-sm-medium);
   gap: var(--pine-dimension-2xs);
   margin-block-start: var(--pine-dimension-2xs);
   margin-inline-start: var(--pine-dimension-none);

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

@@ -1031,16 +1031,16 @@ export class PdsMultiselect {
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
                 'pds-multiselect__trigger--pill-inline': true,
-            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
+            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
-            }, 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.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
+            }, 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", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '973443f9eb29dcf7fb1bde3f9101ac02967a8fd9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '568aab2b278abb7f4426d84ee926b4883375fb11', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'daddf192efd47df8c15267b9896913b926e02544', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd0c72ab75a8e02e61c09e980ae817790804a776a', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '0453db2fca10b3573b1dd244875f90c856c8887b', style: { display: 'none' } }, h("slot", { key: 'a612741afc9545e5e50c47d27c3c27c1d7cade3c' })))));
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, h("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,6 +59,9 @@
   color: var(--pine-color-text-label-disabled);
   cursor: not-allowed;
 }
+:host(.has-border):has(input:disabled) label::after {
+  cursor: not-allowed;
+}
 :host(.has-border).is-invalid .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
 }
@@ -255,6 +258,9 @@ label:has(input:disabled) {
   color: var(--pine-color-text-label-disabled);
   cursor: not-allowed;
 }
+:host(.has-image).is-disabled label::after {
+  cursor: not-allowed;
+}
 :host(.has-image).is-disabled .pds-radio__message {
   color: var(--pine-color-text-label-disabled);
 }

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

@@ -80,11 +80,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '75aca490be2db050f66ddd9cb45ce122bea4db53', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '1bbc7398d3be35e301526b0f842274a3f1db4457', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ca6cb85ace418259f13b6be404e125d4c1c3a778', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '968c3dcc6b3e18a177db0570a9104b4755827a3e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1a1228fa52e68623098f09493d93aa03d2e65c4', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2dec1d43ade25a8ff70301fb661174eff5efadeb', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '60fabeef5778fd30e46cfd23d05684e1743bc57f', class: this.classNames() }, this.hasImage() && (h("div", { key: '9ba3e60182a68cc8e996623cf46e17001ff451f6', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'bf8927129eb68ee7ed07a1f8f8727f013254e133', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '75563601db01d7db2a4c4e74364c0bb2d57ac9ae', class: this.classNames() }, this.hasImage() && (h("div", { key: '120ca4dd9d3828cda49c0f7539f429e2aaa89329', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a03496e1acc3799740aa20342408de97991cad68', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
+import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
@@ -140,6 +140,11 @@ export class PdsSelect {
             return null;
         return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
     }
+    // The field also renders as invalid whenever an error message is present, via
+    // `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
     classNames() {
         const classNames = [];
         if (this.invalid) {
@@ -223,7 +228,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '71f6bfba3361eaac3459c1b30b23183503b57ae5', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'cbd0059fc405179a59c29f81510d2948e358531c', class: "pds-select" }, !this.hideLabel && (h("div", { key: '87d42d145ec0a46a474bb599e46226efc72d1acb', class: "pds-select__label-wrapper" }, h("label", { key: '23e4b10a8b99023d1779de0eb6c56ff31189dce1', htmlFor: this.componentId }, h("span", { key: 'b655a0850ce9ce173fbd814461df8529c9c150d9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'a9f2cd048cdea6f0a44305a2760c418617d7c0eb', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'cca5b1b634d1d77bc4164cb196fdd1c4ffcb888e', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '018780883212786a89c5e6f776dc8c69853bf732', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '10e82ad220b4e9d8d9c0710a14335d5603bd6164', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (h("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, h("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, h("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }