@pine-ds/core 4.4.2 → 4.4.4

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
-import { inheritAriaAttributes } from "../../utils/attributes";
+import { inheritAriaAttributes, HostStylingKeeper } from "../../utils/attributes";
 /**
  * @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
  */
@@ -9,6 +9,7 @@ export class PdsCheckbox {
     constructor() {
         this.inheritedAttributes = {};
         this._type = 'checkbox';
+        this.hostKeeper = new HostStylingKeeper();
         this.hasLabelSlot = false;
         /**
          * It determines whether or not the checkbox is checked.
@@ -56,6 +57,7 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     connectedCallback() {
+        this.hostKeeper.connect(this.el);
         // Initialize ElementInternals for form association (only once per element instance)
         if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
@@ -63,6 +65,9 @@ export class PdsCheckbox {
         // Expose type property on the element instance to match native form element behavior
         exposeTypeProperty(this.el, () => this._type);
     }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     componentDidLoad() {
         this.updateFormValue();
     }
@@ -97,9 +102,11 @@ export class PdsCheckbox {
         this.updateHasLabelSlot();
     }
     render() {
-        return (h(Host, { key: 'aef1cece81ef5b59ee50d31f8542ffe627230734', class: this.classNames() }, h("label", { key: 'ad41c1039f2d11ff52e362e5e45d4c25e1d71b71', htmlFor: this.componentId }, h("input", Object.assign({ key: '180959e7154129ecbfe6a9151e13610d4799ece2', type: "checkbox", "aria-describedby": 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)), h("span", { key: '37917f2d69bc0927d38fd8400f48201a451e1d4f', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '14067135aafbb1c472c4b7cb47c807655ea17d4f', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '6939b70ba6e83bbb3c97547038230f466f0b28e2', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '3a8c7c163c5343f77c543abaa45e516a80b261ac', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6db80f38537e2817c2f14934dd190a5902ba608e', icon: danger, size: "small" }), this.errorMessage)));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '2d63feb42a7fa2a0121c1b25625ff7c6b6844fa9', class: hostClass }, h("label", { key: '07158e232a025c978c2725bdd938ce8254a244ac', htmlFor: this.componentId }, h("input", Object.assign({ key: 'c1f47d9de63fef8e373f6b76efb1386cb7ab4921', type: "checkbox", "aria-describedby": 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)), h("span", { key: 'e04db0b2a5600e3da74fb9857a276547f602c7eb', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '3af6b6bf89e9ab74821f63753843fca575aaea2f', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: '78c2f5f6b0cdc93facee367662ba190906a5421c', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'd776e3539d2ff057c5a2471df4069df8fc3af864', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f74131e597bc37569062b683b118b676af418a28', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { downSmall, remove } from "@pine-ds/icons/icons";
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 import { normalizeColorValue } from "../../utils/utils";
 const SENTIMENT_DOT_COLORS = {
@@ -20,6 +21,7 @@ const SENTIMENT_DOT_COLORS = {
  */
 export class PdsChip {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         this.truncationCleanup = null;
         /**
          * Determines whether a dot should be displayed on the chip.
@@ -47,6 +49,9 @@ export class PdsChip {
             this.pdsTagCloseClick.emit();
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
     // Bind (and re-bind) here, not just on load: changing variant/size remounts
     // the label span, so the tooltip has to re-attach to the current node or it
     // would keep measuring a detached one. Keyed on node identity so an unrelated
@@ -62,6 +67,7 @@ export class PdsChip {
         }
     }
     disconnectedCallback() {
+        this.hostKeeper.disconnect();
         this.destroyTruncationTooltip();
     }
     // Reveal the clipped label on hover/focus, matching pds-text / pds-table-cell.
@@ -206,7 +212,10 @@ export class PdsChip {
         return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (h(Host, { key: '065b561b3532d724a420b3fb1e4abaccd05b8879', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        const hostClass = this.classNames();
+        const hostStyles = this.hostStyles;
+        this.hostKeeper.record(hostClass, hostStyles);
+        return (h(Host, { key: '63e00360276ca3941fb543b2c35211a709fbfc2b', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -338,7 +338,7 @@
   display: flex;
   flex-shrink: 0;
   gap: var(--pine-dimension-xs);
-  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+  padding: var(--pine-dimension-sm);
 }
 .pds-combobox__panel-search pds-icon {
   color: var(--pine-color-text-muted);
@@ -357,6 +357,7 @@
   letter-spacing: var(--pine-letter-spacing);
   min-width: 0;
   outline: none;
+  padding: 0;
 }
 .pds-combobox__panel-search-input::placeholder {
   color: var(--pine-color-text-placeholder);
@@ -389,8 +390,12 @@
   border-block-end: var(--pine-border);
   border-block-end-color: var(--pine-color-border-subtle);
   border-radius: 0;
+  color: var(--pine-color-text-strong);
+  font: var(--pine-typography-body);
   inset-block-start: 0;
+  letter-spacing: var(--pine-letter-spacing);
   margin-inline: calc(var(--pine-dimension-2xs) * -1);
+  padding: var(--pine-dimension-sm);
   position: sticky;
   z-index: 1;
 }
@@ -447,6 +452,7 @@
   background: var(--color-background-default, var(--pine-color-secondary));
   border: var(--pine-border);
   border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
   color: var(--color-text-default, var(--pine-color-text-inverse-emphasis));
   cursor: pointer;
   display: flex;
@@ -497,7 +503,14 @@
 
 .pds-combobox__button-trigger--input-shape {
   border-radius: var(--pine-dimension-125);
-  min-height: var(--pine-dimension-500);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pine-dimension-450);
+  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);
+}
+
+.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder {
+  color: var(--pine-color-text-muted);
 }
 
 .pds-combobox__button-trigger-chevron {
@@ -566,6 +579,7 @@
 .pds-combobox__chip-trigger {
   align-items: center;
   border-radius: var(--pine-dimension-sm);
+  box-sizing: border-box;
   cursor: pointer;
   display: inline-flex;
   font: var(--pine-typography-body-medium);

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

@@ -61,6 +61,11 @@ export class PdsCombobox {
          * @defaultValue 'Back'
          */
         this.drillInBackLabel = 'Back';
+        /**
+         * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'No options found'
+         */
+        this.noOptionsFoundLabel = 'No options found';
         /**
          * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
          * @default '380px'
@@ -2023,7 +2028,7 @@ export class PdsCombobox {
                     this.panelTreeEl = el;
                 else
                     this.listboxEl = el;
-            }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), this.hasMore && !this.loading && (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))));
+            }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, this.noOptionsFoundLabel)))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), this.hasMore && !this.loading && (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))));
         if (!withSearch)
             return list;
         // The search field sits above the list; the wrapper is what's positioned and portaled.
@@ -2162,7 +2167,7 @@ export class PdsCombobox {
         return true;
     }
     renderPanelSearch() {
-        return (h("div", { key: "panel-search", class: "pds-combobox__panel-search" }, h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
+        return (h("div", { key: "panel-search", class: "pds-combobox__panel-search" }, h("pds-icon", { name: "search", size: "regular", "aria-hidden": "true" }), h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
     }
     /**
      * An option, as a listbox `option` or, given a tree `level`, a `treeitem`. `posinset` and
@@ -2251,7 +2256,7 @@ export class PdsCombobox {
     }
     // Helper method to render default text content
     renderDefaultContent() {
-        return (h("span", { class: "pds-combobox__button-trigger-label" }, this.selectedLabel || this.placeholder));
+        return (h("span", { class: { 'pds-combobox__button-trigger-label': true, 'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder));
     }
     // Helper method to check if we should show layout content
     shouldShowLayoutContent() {
@@ -2376,13 +2381,13 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '422371939a839b2f882e7cb4518d45f745bcd695', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '457eea53d9a496afcb27981c5891cbfc1e4ecffe', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: 'a0389c578aacaf341d1bb47bd498b4232fa83adf', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '960558b36010eb059c98acc37439656f2f7ff657', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b0abcd004aa98b630819cfdd0cfb85ebde2ee2f8', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: 'ae42f12fe4d0c498c99c0baae7673ff90e1be576', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': 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": 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" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": 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())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": 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(), h("div", { key: '75ec996d0f2d50c45adda95ff13d41a17cb25273', style: { display: 'none' } }, h("slot", { key: '8e2fa650cc87000eb73b163a334232b5c6b0ca99', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && (h("span", { key: '472ce084b6de60c68e6521708f6bc5b602c3af42', class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : '')))));
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": 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" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": 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())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": 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(), h("div", { key: 'ab0dba6db0a989cb2e41632cb8412062f96c38cd', style: { display: 'none' } }, h("slot", { key: '337461c5ead6dda1d04911fd4b5a23b1dc6b9726', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && (h("span", { key: 'd8d82d69381548b2e3266d9109c98ab0397b22e0', class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : '')))));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -2614,6 +2619,29 @@ export class PdsCombobox {
                 "attribute": "drill-in-back-label",
                 "defaultValue": "'Back'"
             },
+            "noOptionsFoundLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'No options found'"
+                        }],
+                    "text": "Text shown when no options match the search. Pass a translated string to localize it; defaults to English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-options-found-label",
+                "defaultValue": "'No options found'"
+            },
             "flyoutMaxWidth": {
                 "type": "string",
                 "mutable": false,

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

@@ -111,6 +111,40 @@ ButtonTrigger.args = {
   value: 'dog',
 };
 
+// trigger-shape="input": the same field as pds-select, empty and with a value, beside one.
+export const ButtonTriggerInputShape = (args) => html`
+<div style="display: grid; gap: 16px; grid-template-columns: repeat(2, 240px);">
+  <pds-combobox component-id="combobox-input-shape-empty" label=${args.label} trigger="button" trigger-shape=${args.triggerShape} trigger-variant=${args.triggerVariant} trigger-width="100%" mode="select-only" placeholder=${args.placeholder} ?disabled=${args.disabled}>
+    <option value="tag">Tag</option>
+    <option value="offer">Offer</option>
+  </pds-combobox>
+  <pds-select component-id="select-input-shape-empty" label="Conditional" ?disabled=${args.disabled}>
+    <option value="">Select conditional...</option>
+    <option value="is">is</option>
+  </pds-select>
+  <pds-combobox component-id="combobox-input-shape-filled" label=${args.label} trigger="button" trigger-shape=${args.triggerShape} trigger-variant=${args.triggerVariant} trigger-width="100%" mode="select-only" value="tag" ?disabled=${args.disabled}>
+    <option value="tag">Tag</option>
+    <option value="offer">Offer</option>
+  </pds-combobox>
+  <pds-select component-id="select-input-shape-filled" label="Conditional" value="is" ?disabled=${args.disabled}>
+    <option value="">Select conditional...</option>
+    <option value="is">is</option>
+  </pds-select>
+</div>`;
+
+ButtonTriggerInputShape.args = {
+  label: 'Category',
+  placeholder: 'Select category',
+  triggerShape: 'input',
+  triggerVariant: 'secondary',
+  disabled: false,
+};
+
+ButtonTriggerInputShape.argTypes = {
+  triggerShape: { control: 'inline-radio', options: ['pill', 'input'] },
+  triggerVariant: { control: 'inline-radio', options: ['secondary', 'primary', 'accent', 'destructive'] },
+};
+
 export const ProgrammaticClear = (args) => html`
 <pds-box direction="column" gap="sm" align-items="start">
   <pds-combobox
@@ -494,14 +528,17 @@ export const GroupDisplayDrillInWithPanelSearch = (args) => html`
     search-placeholder=${args.searchPlaceholder}
     search-options-label=${args.searchOptionsLabel}
     drill-in-back-label=${args.drillInBackLabel}
+    no-options-found-label=${args.noOptionsFoundLabel}
     trigger-width=${args.triggerWidth}
     dropdown-width=${args.dropdownWidth}
     .options=${args.options}
   ></pds-combobox>
 </div>`;
 
+// Search for something that matches no filter to see noOptionsFoundLabel.
 GroupDisplayDrillInWithPanelSearch.args = {
   panelSearch: true,
+  noOptionsFoundLabel: 'No filters found',
   label: 'Filter',
   placeholder: 'Choose a filter',
   searchPlaceholder: 'Search filters',
@@ -518,6 +555,10 @@ GroupDisplayDrillInWithPanelSearch.args = {
   ],
 };
 
+GroupDisplayDrillInWithPanelSearch.argTypes = {
+  noOptionsFoundLabel: { control: 'text' },
+};
+
 // A large action catalog: many groups, a button trigger and panel search. The narrower widths
 // leave room for the flyout beside the dropdown on a narrow canvas.
 export const GroupDisplayActionCatalog = (args) => html`

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

@@ -1,8 +1,11 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { copy as copyIcon } from "@pine-ds/icons/icons";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 export class PdsCopytext {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         this.truncationCleanup = null;
         /**
          * Determines whether `copytext` should have a visible border.
@@ -35,6 +38,12 @@ export class PdsCopytext {
             this.copyToClipboard(this.value);
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    restoreBorderDefault(newValue) {
+        this.border = restoreReflectedDefault(this.el, 'border', newValue, true);
+    }
     handleTruncateChange(newValue) {
         if (newValue) {
             this.initTruncationTooltip();
@@ -54,6 +63,7 @@ export class PdsCopytext {
         }
     }
     disconnectedCallback() {
+        this.hostKeeper.disconnect();
         this.destroyTruncationTooltip();
     }
     initTruncationTooltip() {
@@ -90,7 +100,9 @@ export class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '5a72c4f71f1d5573b6e708a8a0e0e003a7915935', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'eb14f7f0137a9ba13d4ce8f54edda0f5aedd1be0', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'aaa00e1272559dc2b808757b6323753ff45574b0', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '4c383f7f4b7d696bda724989c6462d0c8aafcbc1', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '1c43941f808f58a53f1c445e0f5693985c793c35', class: hostClass, id: this.componentId }, h("pds-button", { key: 'd771d2587a11f1b27bded17b5df5e649ea93cd90', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '0d4fd25220cac636b328fd1ee1aba40d07296265', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '832a044c10843bb90833301cc3f3ea1f7b755f42', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -108,7 +120,7 @@ export class PdsCopytext {
         return {
             "border": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -236,6 +248,9 @@ export class PdsCopytext {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "border",
+                "methodName": "restoreBorderDefault"
+            }, {
                 "propName": "truncate",
                 "methodName": "handleTruncateChange"
             }, {

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

@@ -5,6 +5,7 @@ import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
  * which caps itself against the viewport for a centered, possibly-shorter
  * modal, a drawer panel is already edge-to-edge, so its content can simply
  * flex to fill whatever space the header and footer leave.
+ * @lightDom renders-markup
  */
 export class PdsDrawerContent {
     // Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
@@ -12,7 +13,7 @@ export class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: 'b4b41258eccaae8e0a9df90a75fb30d65a7ac9c4', class: "pds-drawer-content" }, h("slot", { key: 'ef90ed5b3f84b51a2938e1d8fd021b971c1c0de9' })));
+        return (h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
     }
     static get is() { return "pds-drawer-content"; }
     static get originalStyleUrls() {

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

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsDrawerFooter {
     // Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: '383f7cb7a95a71bd03b2e328cd4b41117e17c631', class: "pds-drawer__footer" }, h("slot", { key: 'e9e9b6c7fef502c8004223bc8611e8d798ecb966' })));
+        return (h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
     }
     static get is() { return "pds-drawer-footer"; }
     static get originalStyleUrls() {

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

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsDrawerHeader {
     // Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '5524b12af7c07d322ebd6726bd1a28320a838e77', class: "pds-drawer__header" }, h("slot", { key: '8212060c5c48a53d05d320bb625ce2b6dce7c6c3' })));
+        return (h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

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

@@ -16,6 +16,7 @@ const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dro
  * suppressed, and adds the edge, width and dismiss behavior a side panel
  * needs on top. It does not reimplement focus, Escape or dialog semantics —
  * those come from `pds-modal` unchanged.
+ * @lightDom renders-markup
  */
 export class PdsDrawer {
     constructor() {
@@ -133,11 +134,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '0ca6f9e5c49323c0b72c6338ecd172262afdd999', class: {
+        return (h(Host, { key: '166bc90b45d29f64f11b6840e7c6ae798bf14261', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: '5b87fdc3aaedaa7cc7efe43482314dae8621d8c6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'dde3adec14308881defd57f75df9393bf9f9f48f' }))));
+            } }, h("pds-modal", { key: '2faa1cee1f34a85e9df0cabb8e78803982414982', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: '93968e612756c398f6d1faf9383f6c88c420da28' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { setAttributesIfChanged } from "../../utils/attributes";
 import { computePosition, flip, offset, shift, autoUpdate, } from "@floating-ui/dom";
 /**
  * @part menu-panel - Exposes the dropdown menu container for styling.
@@ -8,6 +9,7 @@ export class PdsDropdownMenu {
         this.isOpen = false;
         this.menuItems = [];
         this.cleanupAutoUpdate = null;
+        this.triggerObserver = null;
         this.currentFocusIndex = -1;
         /**
          * The placement of the dropdown panel relative to the trigger.
@@ -18,10 +20,17 @@ export class PdsDropdownMenu {
             // Get all elements assigned to this slot
             const assignedElements = this.slotEl.assignedElements();
             this.triggerEl = assignedElements[0];
-            this.triggerEl.onclick = this.handleClick;
-            // Add accessibility attributes to trigger
-            this.triggerEl.setAttribute('aria-haspopup', 'menu');
-            this.triggerEl.setAttribute('aria-expanded', 'false');
+            if (this.triggerEl) {
+                this.triggerEl.onclick = this.handleClick;
+                this.syncTriggerAria();
+            }
+            this.observeTrigger();
+        };
+        // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
+        this.syncTriggerAria = () => {
+            if (!this.triggerEl)
+                return;
+            setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
         };
         this.handleSlotChange = (event) => {
             this.slotEl = event.target;
@@ -75,8 +84,7 @@ export class PdsDropdownMenu {
             this.cleanupAutoUpdate = autoUpdate(this.triggerEl, this.panelEl, updatePosition);
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
             this.isOpen = true;
-            // Update ARIA attributes
-            this.triggerEl.setAttribute('aria-expanded', 'true');
+            this.syncTriggerAria();
         };
         // Close the dropdown
         this.closeDropdown = () => {
@@ -88,8 +96,7 @@ export class PdsDropdownMenu {
                 this.cleanupAutoUpdate();
                 this.cleanupAutoUpdate = null;
             }
-            // Update ARIA attributes
-            this.triggerEl.setAttribute('aria-expanded', 'false');
+            this.syncTriggerAria();
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
@@ -106,12 +113,35 @@ export class PdsDropdownMenu {
         var _a;
         this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
     }
+    connectedCallback() {
+        // Moved within the page, the trigger slot doesn't change, so watch the same trigger again, and
+        // fix anything changed while the menu was detached and unobserved.
+        this.observeTrigger();
+        this.syncTriggerAria();
+    }
     disconnectedCallback() {
+        var _a;
         // Clean up auto-update when component is removed from DOM
         if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
             this.cleanupAutoUpdate = null;
         }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+    }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (!this.triggerEl || typeof MutationObserver === 'undefined')
+            return;
+        this.triggerObserver = new MutationObserver(this.syncTriggerAria);
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-haspopup', 'aria-expanded'],
+        });
     }
     // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
     isFocusInMenu() {
@@ -313,7 +343,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'a49d859ea4b881c025620b3bad3157af8ceceb36', id: this.componentId }, h("slot", { key: '2669398c6b6f0ad4037ba34695b0880afa4c69b9', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'e2a6d7892bfe4ead980df8f702e5387e62d6bd05', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: '70fa9b2ac96f528ae0ebd28486b5a934fb705413', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '9d67972cf15c22bc666c32b86dcd8f143160ee0a', id: this.componentId }, h("slot", { key: 'e9cbc0612ce0e8c2bf55e1dc7930eda075fcc173', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '6fed3f11cf962a97f8ebb3cc69bd76efb425c464', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: 'b8757512713b913f3ee56d9518897e7ed3c3b830', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }