@pine-ds/core 4.7.1 → 4.8.0

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

@@ -2,11 +2,12 @@
 
 var index = require('./index-jl_Q819j.js');
 var utils = require('./utils-BhRmyxT8.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
 const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
 
+const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
 const PdsButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -54,11 +55,16 @@ const PdsButton = class {
         this.variant = 'primary';
         this.hasStartContent = false;
         this.hasEndContent = false;
-        this.triggerExpanded = null;
-        this.triggerHasPopup = null;
-        this.syncTriggerAria = () => {
-            this.triggerExpanded = this.el.getAttribute('aria-expanded');
-            this.triggerHasPopup = this.el.getAttribute('aria-haspopup');
+        this.forwardedAria = {};
+        // Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
+        // so taking them off the host would fight each one.
+        this.syncHostAria = () => {
+            const forwarded = {};
+            FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
+            // A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
+            if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
+                this.forwardedAria = forwarded;
+            }
             this.forwardAriaControls();
         };
         this.handleStartSlotChange = (event) => {
@@ -96,19 +102,19 @@ const PdsButton = class {
         };
     }
     connectedCallback() {
-        this.syncTriggerAria();
+        this.syncHostAria();
         if (typeof MutationObserver === 'undefined')
             return;
-        // Popovers and menus set these on the host after render, but only the inner element is announced.
-        this.triggerAriaObserver = new MutationObserver(this.syncTriggerAria);
-        this.triggerAriaObserver.observe(this.el, {
-            attributeFilter: ['aria-controls', 'aria-expanded', 'aria-haspopup'],
+        // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
+        this.hostAriaObserver = new MutationObserver(this.syncHostAria);
+        this.hostAriaObserver.observe(this.el, {
+            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat('aria-controls'),
         });
     }
     disconnectedCallback() {
         var _a;
-        (_a = this.triggerAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.triggerAriaObserver = undefined;
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
     }
     componentDidRender() {
         this.forwardAriaControls();
@@ -226,16 +232,13 @@ const PdsButton = class {
     }
     render() {
         // Common props for both button and anchor elements
-        const commonProps = {
-            'aria-expanded': this.triggerExpanded,
-            'aria-haspopup': this.triggerHasPopup,
-            class: this.classNames(),
-            part: 'button',
-            ref: (el) => (this.contentEl = el),
-        };
+        const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
         const attributes = () => {
             if (this.href) {
-                return Object.assign(Object.assign({}, commonProps), { download: this.download, href: this.disabled ? null : this.href, target: this.target });
+                return Object.assign(Object.assign({}, commonProps), {
+                    // ARIA allows aria-pressed only on buttons, so a link never gets it.
+                    'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
+                });
             }
             return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
         };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var attributes = require('./attributes-BJ7KBHql.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
@@ -126,7 +126,7 @@ const PdsCheckbox = class {
         this.hostKeeper.record(hostClass);
         return (index.h(index.Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, index.h("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), index.h("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
             index.h("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: index$1.danger, size: "small" }), this.errorMessage)));
+            index.h("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '88a46a17abc1c7b3b3e90543ce8dcf38a14c878c', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-jl_Q819j.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var attributes = require('./attributes-BJ7KBHql.js');
-var truncationTooltip = require('./truncation-tooltip-DO9xli2e.js');
+var truncationTooltip = require('./truncation-tooltip-BtuiXLV0.js');
 var utils = require('./utils-BhRmyxT8.js');
 require('./keep-hydrated-CiXgkEYd.js');
 require('./floating-ui.dom-Dc8Anyel.js');
@@ -239,13 +239,13 @@ const PdsChip = class {
                 'aria-label': this.dismissLabel,
             };
         };
-        return (index.h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), index.h("pds-icon", { icon: index$1.remove, size: this.iconSize })));
+        return (index.h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), index.h("pds-icon", { icon: index$1.remove, size: this.iconSize, "aria-hidden": "true" })));
     }
     render() {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (index.h(index.Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (index.h(index.Host, { key: 'fa432fa987afb5b856e5e7d3894a88be043805d2', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3964,7 +3964,7 @@ const PdsCombobox = class {
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
-            }, "data-option-index": index$1, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (index.h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && index.h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }, "data-option-index": index$1, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (index.h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && index.h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
     }
     /** An option's text, after its `data-icon` when it has one. */
     renderOptionLabel(option) {
@@ -4163,7 +4163,7 @@ const PdsCombobox = class {
     }
     // Helper method to render chip trigger default content
     renderChipTriggerDefaultContent() {
-        return (index.h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && index.h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+        return (index.h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && index.h("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
     }
     // Helper method to render option as chip (new automatic approach)
     renderOptionChip(option) {
@@ -4194,13 +4194,13 @@ const PdsCombobox = class {
         ]
             .filter(Boolean)
             .join(' ');
-        return (index.h(index.Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (index.h("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (index.h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, index.h("input", { ref: el => {
+        return (index.h(index.Host, { key: 'c4bc64f28f6f8f2170d199bd89ba02b3fbe41bad', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '7648c513d133e11376e50a9a15bc9a227b8fe1d2', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (index.h("label", { key: '1be4dce04b943119265b99c2b14002e5faba337f', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (index.h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, index.h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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" }), index.h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (index.h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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())) : (index.h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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(), index.h("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, index.h("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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" }), index.h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (index.h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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())) : (index.h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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(), index.h("div", { key: 'f9aca483c67dd0cdf2fcbdc651a13cfb8fcfe7f1', style: { display: 'none' } }, index.h("slot", { key: '7a0dc5718ccf377b41bd1716030f16a135700518', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
             index.h("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
             // Its own region: sharing one, revealing a row then opening it would leave the text the
             // same, and opening the group would go unannounced.

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-jl_Q819j.js');
 var attributes = require('./attributes-BJ7KBHql.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
-var truncationTooltip = require('./truncation-tooltip-DO9xli2e.js');
+var truncationTooltip = require('./truncation-tooltip-BtuiXLV0.js');
 require('./keep-hydrated-CiXgkEYd.js');
 require('./floating-ui.dom-Dc8Anyel.js');
 

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var floatingUi_dom = require('./floating-ui.dom-Dc8Anyel.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var form = require('./form-MhwfKTuo.js');
 var i18nFormat = require('./i18n-format-BD0PmYzT.js');
 var closest = require('./closest-D0qyYtJ3.js');

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

@@ -5,7 +5,7 @@ var closest = require('./closest-D0qyYtJ3.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
-const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
+const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop>*{pointer-events:auto}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
 
 // Known selectors for content Pine components portal out of place rather than
 // rendering where they are — pds-tooltip and pds-combobox's dropdown in

package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-jl_Q819j.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
-const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
+const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
 
 const PdsDropdownMenuItem = class {
     constructor(hostRef) {
@@ -19,9 +19,17 @@ const PdsDropdownMenuItem = class {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * reach but that can't be activated. Takes precedence over `href` and `destructive`.
+         * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+         * @defaultValue false
+         */
+        this.informational = false;
         /**
          * Determines whether the link should open in a new tab and display an external icon.
          * This is a simpler alternative to using `target="_blank"` for the common case.
+         * Ignored when `informational` is set.
          * @defaultValue false
          */
         this.external = false;
@@ -32,6 +40,12 @@ const PdsDropdownMenuItem = class {
         this.handleBlur = () => {
             this.hasFocus = false;
         };
+        // Space would otherwise scroll the page, since nothing in the item takes the key.
+        this.handleInformationalKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
         this.handleKeyDown = (event) => {
             // Handle keyboard events
             if (!this.disabled && (event.key === 'Enter')) {
@@ -53,6 +67,8 @@ const PdsDropdownMenuItem = class {
     ;
     handleClick() {
         var _a;
+        if (this.informational)
+            return;
         // Filter only pds-dropdown-menu-item elements and find the index of the current item
         const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
         const itemIndex = menuItems.indexOf(this.host);
@@ -65,6 +81,12 @@ const PdsDropdownMenuItem = class {
         });
     }
     renderElement() {
+        if (this.informational) {
+            return (index.h("div", { class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("slot", null)));
+        }
         if (this.href != null) {
             return (index.h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
@@ -77,7 +99,14 @@ const PdsDropdownMenuItem = class {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, index.h("slot", null)));
     }
     render() {
-        return (index.h(index.Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (index.h(index.Host, { key: '47a62550fde33f892d7af4f4e71b67ebf7aa2c3f', id: this.componentId, class: {
+                'is-disabled': this.disabled,
+                'is-informational': this.informational,
+                'destructive': !this.disabled && !this.informational && this.destructive
+            }, onClick: () => !this.disabled && this.handleClick(), role: "none",
+            // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
+            // the menu and the informational menuitem as an unexpected child.
+            tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/pds-dropdown-menu.cjs.entry.js

@@ -203,11 +203,11 @@ const PdsDropdownMenu = class {
             if (tagName === 'pds-dropdown-menu-item') {
                 // For pds-dropdown-menu-item, focus the inner element
                 const menuItem = item;
-                const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
                 const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
                     || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
-                if (innerButton) {
-                    innerButton.focus();
+                if (innerControl) {
+                    innerControl.focus();
                 }
                 else if (innerLink) {
                     innerLink.focus();
@@ -359,7 +359,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, index.h("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
+        return (index.h(index.Host, { key: '1765909c8c3c140e52dc3f6b50693c97d6bcc003', id: this.componentId }, index.h("slot", { key: '0b566cd288428a0694a2d61d4a73bd79def4bfad', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: '16cdfc208cfe7f6e074289c30aa0e1188a34876d', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: 'a28c1736ad02e8ac3d82c0fe1933606a7216989b', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '9c6dfddefb266083f68aa27d6cc01127a69cd1cf', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: '8cfe85c10f92d4a4ec6b5d2d0264d054a74ba29b', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: '1a5b4aa406d2706ca8cef49deb05140a5763be1c', onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
 const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;

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

@@ -4,7 +4,7 @@ var index = require('./index-jl_Q819j.js');
 var form = require('./form-MhwfKTuo.js');
 var attributes = require('./attributes-BJ7KBHql.js');
 var utils = require('./utils-BhRmyxT8.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
 const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-jl_Q819j.js');
 var utils = require('./utils-BhRmyxT8.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
 const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.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/cjs/pds-modal-content.cjs.entry.js

@@ -19,6 +19,21 @@ const PdsModalContent = class {
          * Tracks whether the border prop was explicitly set by the user
          */
         this.userSetBorder = false;
+        this.hasLoaded = false;
+        /**
+         * Handle scroll events
+         */
+        this.handleScroll = () => {
+            this.updateBorders();
+        };
+        /**
+         * Handle resize events
+         */
+        this.handleResize = () => {
+            this.calculateMaxHeight();
+            // Update borders after resize as content scrollability might change
+            setTimeout(() => this.updateBorders(), 50);
+        };
     }
     // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
@@ -32,43 +47,30 @@ const PdsModalContent = class {
         this.userSetBorder = hasBorderAttribute || this.border !== 'none';
     }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.calculateMaxHeight();
-        // Set up resize listener
-        window.addEventListener('resize', this.handleResize.bind(this));
-        // Only set up scroll listener for border updates if borders are managed automatically
         if (!this.userSetBorder) {
-            setTimeout(() => {
-                // The scroll happens on the component element itself (this.el), not the inner div
-                this.el.addEventListener('scroll', this.handleScroll.bind(this));
-                // Initial border update after everything is set up
-                setTimeout(() => this.updateBorders(), 100);
-            }, 100);
+            // Initial border update after everything is set up
+            setTimeout(() => this.updateBorders(), 200);
         }
     }
+    // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
+    // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
+    connectedCallback() {
+        window.addEventListener('resize', this.handleResize);
+        // The scroll happens on the component element itself (this.el), not the inner div
+        this.el.addEventListener('scroll', this.handleScroll);
+        if (this.hasLoaded)
+            this.calculateMaxHeight();
+    }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize.bind(this));
-        // Clean up scroll listener only if it was set up
-        if (!this.userSetBorder) {
-            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
-        }
+        window.removeEventListener('resize', this.handleResize);
+        this.el.removeEventListener('scroll', this.handleScroll);
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
         }
     }
-    /**
-     * Handle scroll events
-     */
-    handleScroll() {
-        this.updateBorders();
-    }
-    /**
-     * Handle resize events
-     */
-    handleResize() {
-        this.calculateMaxHeight();
-        // Update borders after resize as content scrollability might change
-        setTimeout(() => this.updateBorders(), 50);
-    }
     /**
      * Updates border visibility based on scroll state (only if not user-defined)
      */
@@ -185,10 +187,10 @@ const PdsModalContent = class {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (index.h(index.Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, index.h("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
+        return (index.h(index.Host, { key: 'c83e230d23444e3d5358d995170e2b8386884fe8' }, index.h("div", { key: 'b91de2c71e693b5a1ba2b257d741e7b0418c2d76', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
+            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: '971cbd44ffeac4bb13a651948a119c603bed9e4f' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -107,7 +107,7 @@ function containsComposed(ancestor, node) {
  */
 const openModals = new Map();
 let openSequence = 0;
-/** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
+/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
 function hasOpenPopover(root) {
     if (root.querySelector('[data-pds-popover-open]'))
         return true;
@@ -651,14 +651,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
+        return (index.h("dialog", { key: '0a3ea92246b5ae704bc7dcbadf4f4e0d5a54e9e6', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.h("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.h("div", { key: 'a38029c2284ed345bec2ce7638fc3415818cd609', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '396da81af42685f5c083f853afa207a6844e444e' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@ var index = require('./index-jl_Q819j.js');
 var floatingUi_dom = require('./floating-ui.dom-Dc8Anyel.js');
 var utils = require('./utils-BhRmyxT8.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var i18nFormat = require('./i18n-format-BD0PmYzT.js');
 require('./keep-hydrated-CiXgkEYd.js');
 
@@ -1182,7 +1182,7 @@ const PdsMultiselect = class {
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
     }
     renderOptionAction(option, optionId, isHighlighted) {
         var _a;
@@ -1205,7 +1205,7 @@ const PdsMultiselect = class {
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
         const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
-        return (index.h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, index.h("div", { class: "pds-multiselect__search" }, index.h("pds-icon", { name: "search", size: "small" }), index.h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), index.h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (index.h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+        return (index.h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, index.h("div", { class: "pds-multiselect__search" }, index.h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), index.h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), index.h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (index.h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
             if (item.type === 'group') {
                 return (index.h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, index.h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), index.h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
             }
@@ -1264,10 +1264,10 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (index.h(index.Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (index.h(index.Host, { key: 'd0879469e6ff943374c2f035c0a8d6d57c25dc5f', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '80caa694099218561b85c93d547ec9208def0ec7', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'b4eaa2c9e2901c28ecb0b8f55e63e33ad899e945', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), index.h("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), index.h("div", { key: '404ed58aa6bfb2248ffad5e56ebabfe65149b9a4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1283,7 +1283,7 @@ const PdsMultiselect = class {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, index.h("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
+            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: '73f17916a37722fefebd6b5a184a7b3dca6f4a9d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '1a987562b21da6f8d2f8c9f94e93e8c99a7abd74', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'ce1f7f48d6f8dee320d87cb7088f084e68cb3ab5', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '8347dfdec6ef1b81d4cf9f72cba3d9ec965dcf08', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '74cd840e102ad635d2f4bc23cf3bcfaa61d5cea1', style: { display: 'none' } }, index.h("slot", { key: 'c2fd9e71363a9661062c8d88be0dd78fc98b964d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }