@pine-ds/core 4.4.3 → 4.5.0

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;
 }
@@ -498,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 {

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-datepicker/pds-datepicker.css

@@ -186,7 +186,6 @@ pds-input {
 .pds-datepicker__day--selected,
 .pds-datepicker__day--selected:hover {
   background: var(--pine-color-primary);
-  border-radius: var(--pine-border-radius-full);
   color: var(--pine-color-text-primary);
 }
 
@@ -218,10 +217,13 @@ pds-input {
   background: var(--pine-color-text-primary);
 }
 
+.pds-datepicker__day--in-range {
+  border-radius: 0;
+}
+
 .pds-datepicker__day--in-range,
 .pds-datepicker__day--in-range:hover {
   background: var(--pine-color-background-muted);
-  border-radius: 0;
   color: var(--pine-color-text-secondary);
 }
 

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"; }

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

@@ -1,10 +1,13 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 /**
  * @part loader-svg - Exposes the spinner SVG element for color customization.
  * @slot label - Default slot for Loader label text.
  */
 export class PdsLoader {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * If false, the loader will be hidden.
          */
@@ -30,6 +33,15 @@ export class PdsLoader {
             }
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    restoreSizeDefault(newValue) {
+        this.size = restoreReflectedDefault(this.el, 'size', newValue, 'md');
+    }
     loaderSize() {
         const sizes = {
             xs: '24px',
@@ -46,7 +58,15 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '173f7ae2d2f49807144df2faa8d8a765f92da235', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '05bc278d18ef2470d87676b3a53d691a6a9872dd', class: "pds-loader--spinner" }, h("svg", { key: 'fcfc87492dd5cdbc7bf471089a038bd8b057f6ec', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd9f6aecc7e5a8b03e2d18f79125fd6190b27803c' }, h("linearGradient", { key: '7851a1b709bccac7704b3822e1aae292d3a68e2d', id: "spinner-secondHalf" }, h("stop", { key: '3d4a75792365cad4ea417794dca6c440859f8ce3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7287acab80b1ea32f884cf69ceb19989603e0882', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '0ec8d95161c24d14773ebee01c189f269079b79d', id: "spinner-firstHalf" }, h("stop", { key: '2a7cea30b2bf2044a14f29f4d64728150669d048', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '608bd5cc1c7b9014a5f183d9e06efe4a0c119616', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '36016dc3bd8a2e4f03f4f287881bfe1b7ce15494', class: "pds-loader__spinner-path" }, h("path", { key: '9410bff29a42cd469ed0f52510a36f7d173b2247', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '66e8283575e53ca52edd12e95c6545406d39c361', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1c8a7526bc763ac62f0e8c762ab47cb2bca0ec89', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '2c8f9596beb8010778e0cf79f006970769da9795', class: "pds-loader--typing" }, h("span", { key: '587cd8da845d1223a5e8b2d199d049ccc1ed78aa' }), h("span", { key: '972f7844a5f2469adbb04b15ebf41e49eb5c0354' }), h("span", { key: '575511989d50f6d9436b846cadec1a5a4fa57c1e' }))), h("div", { key: '70f1b43a79a1d2605145a5ea6fe86e0a6059889d', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '9a981b8530200aa91916017180266edaea6da9ac', name: "label" }, "Loading..."))));
+        const hostClass = `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`;
+        // Explicit 'true': a boolean `true` lands as an empty value, which ARIA reads as unset.
+        const hostAttributes = {
+            'aria-hidden': this.isLoading ? null : 'true',
+            'aria-busy': this.isLoading ? 'true' : null,
+            'aria-live': 'polite',
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (h(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, h("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, h("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, h("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, h("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, h("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, h("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), h("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), h("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), h("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +124,7 @@ export class PdsLoader {
             },
             "size": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "| 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string",
                     "resolved": "string",
@@ -144,4 +164,11 @@ export class PdsLoader {
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "restoreSizeDefault"
+            }];
+    }
 }

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

@@ -1,5 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalContent {
     constructor() {
         /**
@@ -178,10 +181,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '3e8352c946c3646a485ca505e11de3ace3906435' }, h("div", { key: 'd1fb3cb8f2c7ce0c3b19787152d93c1a0ac84b72', class: {
+        return (h(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, h("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6d263b4960a3cffe985ee3af6d6e22e97ded4b7e' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {