@pine-ds/core 4.2.0 → 4.4.0

package/dist/collection/components/pds-filters/pds-filter/pds-filter.js

@@ -485,7 +485,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: 'bd03de5e8461e3aba4d6f014e2d64d9aada0c0e1', id: this.componentId }, h("button", { key: 'f35cb4aec14b1ed3b61d33c412cbfc89ba19cba3', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'b3635542048ac52d290917260181d7313eddaff2', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '0c5ef7f7655ddbee33a695703ce192f082b21bf1', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'e75c75d8e9e4596d7f0642e4e1f91deae3f2b9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'bef66af716be823ed3ac36d39a4532785df07f6b' })))));
+        return (h(Host, { key: '4abb55453c9ab4cd49b21a23047aa5ee4ab70056', id: this.componentId }, h("button", { key: 'e6b6bd81ca3f9d23f490219cf8e81f0bdf511798', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '4cea081451f50508cef36e90d4c88cbd94933287', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '479f84087e7969fa555475b240f5e70ce5bcf136', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '85aec3d5d7b33a0cfb3602412238830929902eb1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'ede4c3866bfdce974e0d21c6e6a3ae22aee47d2c' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class PdsFilters {
     render() {
-        return (h(Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, h("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, h("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
+        return (h(Host, { key: '5587c41a5ca93cc48399d7c1af0762d4a3516b4d', id: this.componentId }, h("div", { key: '43ee499b9c3f49b52cf18beee8ac5cf97b8ad49a', class: "pds-filters" }, h("slot", { key: '79a452042d7aa7e0492d80fd773f71fb820c2211' }))));
     }
     static get is() { return "pds-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
+        return (h(Host, { key: 'fff1a796e59b8e666069e56390e174d7d2861f03', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '2ac4ef66ebbb39d488ce68f06b590a5fad180811', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'dbeda9da5adca51c58ec5a807cde673d6b479d0f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, isSpecTest, messageId } from "../../utils/form";
 import { inheritAriaAttributes } from "../../utils/attributes";
-import { debounceEvent } from "../../utils/utils";
+import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
 import { danger } from "@pine-ds/icons/icons";
 /**
  * @slot append - Content to be displayed after the input field
@@ -181,6 +181,7 @@ export class PdsInput {
     }
     disconnectedCallback() {
         var _a;
+        cancelDebouncedEvent(this.pdsInput);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = undefined;
     }
@@ -199,6 +200,8 @@ export class PdsInput {
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
         this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
     }
     valueChanged() {
         const nativeInput = this.nativeInput;
@@ -286,10 +289,10 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: 'b67b80853cbf1f1e84c3ce6d2ff7e63f480c5b8d', "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: '27a60a963cfa1a96391b55800eba27743a2527f4', class: "pds-input" }, label && (h("div", { key: '3f8ce2b254feea4b6fe9ea74318f1e6c27a75927', class: {
+        return (h(Host, { key: '8c0829cc3502e5fa1fe52584d84b9345fcb0f3fd', "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: 'cf754e6fc72d2cf900e541a469a8e0ba62851538', class: "pds-input" }, label && (h("div", { key: 'f55793898eb2840322ec9a79daed186420ef0d90', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '1c290cde5a9100b11fe3059725866506d089e834', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '2ebc8dafa48d6d855be5b8e1aa3bdd417d6250f3' }, label, this.required && h("span", { key: '73f7d22b13739daff6aa104c140208c5b1a86d10', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '4ea0b3335abbdf920ca064aa5866a060ef18c2ad', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '4acf340fdcf40968e9c46b6a240f8a9008998c11', 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: 'f1969fe3a5f3aba65f44fcdaddd5a12d90db7fb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'd4df1ceff95d5db7f2d927e9fcb848444570f9a2', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'f69182919903aab42b7641d9a0082861f551a214', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: '2a7deac2a9443b1a648133a799b69414b96314e3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '75dc7787e0132c4f62272307867a8066f9cf6ce2' }, label, this.required && h("span", { key: 'c7c413addd2b3f275031596598b030c02f647969', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'eaf09d07c4fbc84ef835d2c7b4f00e252394f5ed', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'dca2390b44e430f0ab1d29daa4ce630ac3b12881', 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: '0bd7859f44185ed0c1478833518cb5829ffea4ad', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'c40016f5bb03e292e01430c2940aff0ebb98abb5', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '54985d775ddf951b50cae4796b7847e98de7434f', "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.js

@@ -56,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: '9e2d6cc4f2697bd11db4fd7ddd6f9e42ef28cf8c', 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: 'f48dd74f1921400553845ea3b03720749b1a6737' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '4757dc775fb132ea1fed93fed8e3cd18c77d45af', 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: '88e5a1ef3b0fc384f7449979029fa45c627aab99' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '6f1b9cf0dab342ea09c1f52c605228ef4d04f829', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: 'ce5b09477f57aad1a09ce3a38b81b64f673944b2', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'd193dfdaa527debff73705cef65e3d7f7a9a69ae', class: "pds-loader--spinner" }, h("svg", { key: 'c881ff2ee1d5d92ac55300bd13e9d066f7a3970f', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '998920cdc820cc4e60df39bda5707e0b6bd5d0fe' }, h("linearGradient", { key: '02028f6ac070703f8b96b1723c4d2c07670e73bb', id: "spinner-secondHalf" }, h("stop", { key: 'b3120c2a597d8f646e791b1ac09a262486fb29cc', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '932056b587b5e3191952506d9411c68375af6620', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '14540856cb968c220f71537c012a8c415d39af85', id: "spinner-firstHalf" }, h("stop", { key: 'c94d634b1dffa0c5301b8cb2c0b6e81fdb34429e', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'b6477c000c01728a60a7fd8e182f24da4b554128', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '810f7c7bcd8e33bd2bed70932ed174eef48ae711', class: "pds-loader__spinner-path" }, h("path", { key: '4e54f348c563cca7e14790a34a58dacbda452824', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '3968c60f27ec619aabc74a278026abdd94d4510f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '171fe08e0aec1f207704a0395388ccc57ea045d4', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '60cf0b871807eb49ce73d3e63f00f5914c9c9eec', class: "pds-loader--typing" }, h("span", { key: 'dfbdcc1fe558803d39caa56bb57763269c061661' }), h("span", { key: '0c343f36a8d71bdc07306b3c879016686da94199' }), h("span", { key: 'f2a30e560ef0c9ac26c596dbaad33eeb0e4f7ff3' }))), h("div", { key: '0fa18b15a3962df872fd28136caf258cd09cafdb', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'e8eabec0c6d24d3ad962ecee9e0ed6e0e0b4adc0', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '173f7ae2d2f49807144df2faa8d8a765f92da235', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '05bc278d18ef2470d87676b3a53d691a6a9872dd', class: "pds-loader--spinner" }, h("svg", { key: 'fcfc87492dd5cdbc7bf471089a038bd8b057f6ec', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd9f6aecc7e5a8b03e2d18f79125fd6190b27803c' }, h("linearGradient", { key: '7851a1b709bccac7704b3822e1aae292d3a68e2d', id: "spinner-secondHalf" }, h("stop", { key: '3d4a75792365cad4ea417794dca6c440859f8ce3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7287acab80b1ea32f884cf69ceb19989603e0882', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '0ec8d95161c24d14773ebee01c189f269079b79d', id: "spinner-firstHalf" }, h("stop", { key: '2a7cea30b2bf2044a14f29f4d64728150669d048', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '608bd5cc1c7b9014a5f183d9e06efe4a0c119616', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '36016dc3bd8a2e4f03f4f287881bfe1b7ce15494', class: "pds-loader__spinner-path" }, h("path", { key: '9410bff29a42cd469ed0f52510a36f7d173b2247', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '66e8283575e53ca52edd12e95c6545406d39c361', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1c8a7526bc763ac62f0e8c762ab47cb2bca0ec89', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '2c8f9596beb8010778e0cf79f006970769da9795', class: "pds-loader--typing" }, h("span", { key: '587cd8da845d1223a5e8b2d199d049ccc1ed78aa' }), h("span", { key: '972f7844a5f2469adbb04b15ebf41e49eb5c0354' }), h("span", { key: '575511989d50f6d9436b846cadec1a5a4fa57c1e' }))), h("div", { key: '70f1b43a79a1d2605145a5ea6fe86e0a6059889d', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '9a981b8530200aa91916017180266edaea6da9ac', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -178,10 +178,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, h("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
+        return (h(Host, { key: '3e8352c946c3646a485ca505e11de3ace3906435' }, h("div", { key: 'd1fb3cb8f2c7ce0c3b19787152d93c1a0ac84b72', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6d263b4960a3cffe985ee3af6d6e22e97ded4b7e' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, h("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
+        return (h("footer", { key: 'ed10ed9c8ab3a472ec9e4d20683c4c209877a6c2', class: "pds-modal__footer" }, h("slot", { key: '35765b1624e35dfc540620b7fca20dba3a5c2ca7' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, h("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
+        return (h("header", { key: '247373607b807a1428d5b3e7726bd88b6c23776b', class: "pds-modal__header" }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -29,6 +29,22 @@ pds-modal .pds-modal__backdrop {
 .pds-modal__backdrop::backdrop {
   background: transparent;
 }
+.pds-modal__backdrop[aria-modal=false] {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+@supports (backdrop-filter: blur(3px)) {
+  .pds-modal__backdrop[aria-modal=false] {
+    backdrop-filter: none;
+  }
+  .pds-modal__backdrop[aria-modal=false]::before {
+    backdrop-filter: blur(3px);
+    content: "";
+    inset: 0;
+    position: fixed;
+    z-index: -1;
+  }
+}
 .pds-modal__backdrop.open {
   opacity: 1;
   transition-timing-function: var(--pine-motion-easing-out);
@@ -86,6 +102,10 @@ pds-modal .pds-modal__backdrop {
   max-width: 900px;
 }
 
+.pds-modal--custom {
+  max-width: var(--pds-modal-max-width, 700px);
+}
+
 .pds-modal--fullscreen {
   border-radius: 0;
   height: 100%;

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
+const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
+const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
+    /\d/.test(value) &&
+    (typeof CSS === 'undefined' || CSS.supports('max-width', value));
 export class PdsModal {
     constructor() {
         this.focusableElements = [];
@@ -14,7 +18,9 @@ export class PdsModal {
          */
         this.open = false;
         /**
-         * The size of the modal
+         * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
+         * max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
+         * A value that is neither falls back to 'md'.
          * @default 'md'
          */
         this.size = 'md';
@@ -114,6 +120,9 @@ export class PdsModal {
                 // disableTopLayer), so do not trap Tab here.
                 if (this.disableTopLayer)
                     return;
+                // Content can change while the modal is open (rows fetched in, sections shown), so the
+                // first and last elements are read now rather than from the list taken on opening.
+                this.updateFocusableElements();
                 // If there are no focusable elements, do nothing
                 if (this.focusableElements.length === 0)
                     return;
@@ -140,6 +149,12 @@ export class PdsModal {
             }
         };
     }
+    componentWillLoad() {
+        this.warnOnInvalidSize();
+    }
+    sizeChanged() {
+        this.warnOnInvalidSize();
+    }
     componentDidLoad() {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
         // Add keyboard event listener
@@ -194,8 +209,11 @@ export class PdsModal {
             'pds-select:not([disabled])',
         ].join(',');
         this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
-        // Filter out elements with display: none or visibility: hidden
+        // 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';
         });
@@ -398,15 +416,28 @@ export class PdsModal {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    resolveSize() {
+        var _a;
+        const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
+        if (PRESET_SIZES.includes(size))
+            return [size];
+        return isCustomLength(size) ? ['custom', size] : [undefined];
+    }
+    warnOnInvalidSize() {
+        if (this.resolveSize()[0] !== undefined)
+            return;
+        console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
+    }
     render() {
-        return (h("dialog", { key: 'f35044ec9bca1189069faf083c824d8144800053', class: {
+        const [sizeClass = 'md', customSize] = this.resolveSize();
+        return (h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
                 'pds-modal': true,
-                [`pds-modal--${this.size}`]: true,
+                [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -490,9 +521,20 @@ export class PdsModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
-                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
-                    "references": {}
+                    "original": "ModalSizeType | (string & Record<never, never>)",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\" | string & Record<never, never>",
+                    "references": {
+                        "ModalSizeType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ModalSizeType",
+                            "referenceLocation": "ModalSizeType"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -501,7 +543,7 @@ export class PdsModal {
                             "name": "default",
                             "text": "'md'"
                         }],
-                    "text": "The size of the modal"
+                    "text": "The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom\nmax-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.\nA value that is neither falls back to 'md'."
                 },
                 "getter": false,
                 "setter": false,
@@ -663,6 +705,9 @@ export class PdsModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "size",
+                "methodName": "sizeChanged"
+            }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];

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

@@ -13,6 +13,12 @@ export default {
     scrollable: true,
     size: 'md',
   },
+  argTypes: {
+    size: {
+      control: 'text',
+      description: "A preset ('sm', 'md', 'lg', 'fullscreen') or a CSS length such as '1100px'.",
+    },
+  },
   parameters: {}
 }
 
@@ -89,6 +95,14 @@ Default.args = {
   open: false,
 };
 
+// Any CSS length works as a size; it becomes the modal's max-width.
+export const CustomSize = BaseTemplate.bind({});
+CustomSize.args = {
+  componentId: 'custom-size-modal',
+  size: '1100px',
+  open: false,
+};
+
 const DestructiveTemplate = (args) => html`
   <div>
     <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">

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

@@ -77,7 +77,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '1207382ec39e45f95449791cd9fbf3ad54a17564', class: backdropClasses }, h("div", { key: '865cff8feaf031750e6763d60580f9060dfc0c91', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: 'b49ba7c717999b53578056ad35c4ec270dbdfd01', class: "pds-modal__header" }, h("slot", { key: '2c06b0f0c4692f1991eb389a73b751d38796c1cf', name: "header" })), h("div", { key: 'ca0e6f324db12de5bd0c21b53bf888ab44c0d34c', class: "pds-modal-content" }, h("slot", { key: 'cef74e83f58195b574f9a290f748cecb2561668e' })), h("div", { key: '65518e197e80fa0cd8ea8cbbd9bb10a064e251ca', class: "pds-modal__footer" }, h("slot", { key: '8cd72b932b7c4d31cf9ecb8f0c37d9a5b5ca7594', name: "footer" })))));
+        return (h("div", { key: '1211583aae06cfa7726371ba18796d7704d9e468', class: backdropClasses }, h("div", { key: '8376a213a21b8f5ee78b9e58e2265d27ce957307', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '4dfcad52e69fa2f207ed09c3ee3a225a1d789e71', class: "pds-modal__header" }, h("slot", { key: '8d9710b91f6f83bc20b2f93b9e4e9fa5f59ae2ce', name: "header" })), h("div", { key: 'f3291bf921619eabb6d63aa80e006f94239325fc', class: "pds-modal-content" }, h("slot", { key: '19dca53455f9943e394d8ed9ea722a1a591e5de6' })), h("div", { key: '835caa9692b1109649edc7d4daf308bb10ed0cd9', class: "pds-modal__footer" }, h("slot", { key: 'f30033b8f842923df9780b893d05428dc14452dc', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -156,7 +156,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  position: absolute;
+  position: fixed;
   z-index: var(--pine-z-index-raised);
 }
 
@@ -263,6 +263,18 @@
   outline: var(--pine-dimension-none);
 }
 
+.pds-multiselect__option-action {
+  align-items: center;
+  block-size: var(--pine-dimension-md);
+  color: var(--pine-color-icon);
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  inline-size: var(--pine-dimension-md);
+  justify-content: center;
+  margin-inline-start: var(--pine-dimension-xs);
+}
+
 .pds-multiselect__create-option {
   color: var(--pine-color-text-strong);
   width: 100%;
@@ -289,6 +301,12 @@
   padding: var(--pine-dimension-xs);
 }
 
+.pds-multiselect__footer {
+  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);