@pine-ds/core 4.8.0 → 4.9.1

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

@@ -3,7 +3,7 @@ import { HostStylingKeeper } from "../../utils/attributes";
 import { assignDescription, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 /**
- * @slot image - Custom image content to display instead of the default radio input
+ * @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
  * @part image-container - The container for the image
  * @lightDom renders-markup
  */
@@ -23,7 +23,7 @@ export class PdsRadio {
          */
         this.disabled = false;
         /**
-         * Adds a border around the radio component for better visual separation.
+         * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
          * @defaultValue false
          */
         this.hasBorder = false;
@@ -37,6 +37,11 @@ export class PdsRadio {
          * @defaultValue false
          */
         this.required = false;
+        /**
+         * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleRadioChange = (e) => {
             if (this.disabled) {
                 return;
@@ -58,6 +63,9 @@ export class PdsRadio {
     hasImage() {
         return this._hasImage;
     }
+    isPill() {
+        return this.variant === 'pill';
+    }
     classNames() {
         const classNames = [];
         if (this.invalid) {
@@ -66,10 +74,14 @@ export class PdsRadio {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
-        if (this.hasBorder) {
+        // A pill is its own bordered shape, so has-border doesn't stack a card around it.
+        if (this.hasBorder && !this.isPill()) {
             classNames.push('has-border');
         }
-        if (this.hasImage()) {
+        if (this.isPill()) {
+            classNames.push('pds-radio--pill');
+        }
+        if (this.hasImage() && !this.isPill()) {
             classNames.push('has-image');
         }
         return classNames.join(' ');
@@ -99,13 +111,14 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), h("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '08e7a2319eddc1d314ee9dddd51a5ce88cd4ae48', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '351376552abee90f50c3aceb03ecf8a81ae1b82b', class: hostClass }, this.hasImage() && (h("div", { key: 'fd85fd36b2ebd99b12c3bb2a13cf3d3e3c26530f', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'abe75dbe38d29340b805f70861b084c1b3836be9', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        const showImage = this.hasImage() && !this.isPill();
+        return (h(Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (h("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -239,7 +252,7 @@ export class PdsRadio {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Adds a border around the radio component for better visual separation."
+                    "text": "Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -301,7 +314,7 @@ export class PdsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers."
+                    "text": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -368,6 +381,29 @@ export class PdsRadio {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "default"
+                        }],
+                    "text": "Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -10,6 +10,13 @@ export default {
     invalid: false,
     hideLabel: false,
     required: false,
+    variant: 'default',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'pill'],
+    },
   },
   component: 'pds-radio',
   parameters: {},
@@ -30,6 +37,7 @@ const BaseTemplate = (args) =>
     ?required=${args.required}
     value=${args.value}
     ?invalid=${args.invalid}
+    variant=${args.variant}
   />`;
 
 export const Default = BaseTemplate.bind();
@@ -101,3 +109,10 @@ WithImage.args = {
   label: 'Option with image',
   helperMessage: 'This radio includes an image using the image slot',
 };
+
+export const Pill = BaseTemplate.bind();
+Pill.args = {
+  componentId: 'pill',
+  label: 'Label text',
+  variant: 'pill',
+};

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

@@ -1,4 +1,5 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { messageId } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 /**
@@ -32,6 +33,7 @@ export class PdsRadioGroup {
          * @defaultValue false
          */
         this.required = false;
+        this.hostKeeper = new HostStylingKeeper();
     }
     handlePropsChange() {
         this.updateChildRadios();
@@ -83,6 +85,29 @@ export class PdsRadioGroup {
             }
         });
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // A name set while the group was detached never reaches the observer.
+        this.syncName();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // Consumers can name the group after render (a prop change, an i18n swap, a morph); re-render so their name wins.
+        this.hostAriaObserver = new MutationObserver(() => this.syncName());
+        this.hostAriaObserver.observe(this.el, { attributeFilter: ['aria-label', 'aria-labelledby'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.hostKeeper.disconnect();
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
+    }
+    // Re-renders only when the group's name would change, so its own aria-labelledby write doesn't loop back.
+    syncName() {
+        if (this._groupId === undefined)
+            return;
+        if (this.getAriaLabelledBy() !== this.renderedLabelledBy)
+            forceUpdate(this);
+    }
     componentWillLoad() {
         // Generate stable group ID once during initialization
         // This ensures DOM stability and accessibility relationships remain consistent across re-renders
@@ -96,6 +121,18 @@ export class PdsRadioGroup {
                 : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
             this._groupId = `radio-group-${uniqueId}`;
         }
+        // A restored or cloned host still carries the id and ARIA references an earlier instance wrote, pointing at
+        // that instance's label and messages. Drop them so this render writes its own: on first load, Stencil keeps a
+        // host attribute that's already there.
+        const previousId = this.el.getAttribute('id');
+        if (previousId && previousId !== this._groupId) {
+            ['aria-labelledby', 'aria-describedby'].forEach((name) => {
+                var _a, _b;
+                const ids = (_b = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
+                if (ids.some((id) => id.startsWith(`${previousId}__`)))
+                    this.el.removeAttribute(name);
+            });
+        }
     }
     componentDidLoad() {
         if (!this.name) {
@@ -148,6 +185,20 @@ export class PdsRadioGroup {
         // Otherwise, assume it's a dimension token like "100", "200", etc.
         return `var(--pine-dimension-${this.gap})`;
     }
+    get labelId() {
+        return `${this._groupId}__label`;
+    }
+    // Names the group from its visible label, unless the consumer named it with their own aria-label or aria-labelledby.
+    // A blank aria-label (an empty translation, say) names nothing, so it falls back to groupLabel.
+    getAriaLabelledBy() {
+        var _a;
+        const hostLabelledBy = this.el.getAttribute('aria-labelledby');
+        if ((hostLabelledBy === null || hostLabelledBy === void 0 ? void 0 : hostLabelledBy.trim()) && hostLabelledBy !== this.labelId)
+            return hostLabelledBy;
+        if ((_a = this.el.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim())
+            return undefined;
+        return this.groupLabel ? this.labelId : undefined;
+    }
     getAriaDescribedBy() {
         const messageIds = [];
         if (this.errorMessage) {
@@ -161,13 +212,23 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        const ariaLabelledBy = this.getAriaLabelledBy();
+        const hostClass = this.classNames();
+        this.renderedLabelledBy = ariaLabelledBy;
+        // A DOM morph strips what the component wrote on its host; put back its role, name and description.
+        // Only its own aria-labelledby, so a consumer's that the server dropped stays dropped.
+        this.hostKeeper.record(hostClass, { '--pds-radio-group-gap': gapValue }, {
+            role: 'radiogroup',
+            'aria-describedby': ariaDescribedBy,
+            'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
+        });
+        return (h(Host, { key: '0fe381f99dddae0aeb9189a13b0e2195f1c79886', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
+            } }, this.groupLabel && (h("div", { key: '4967dc22fa0265dbfbabf94a49b182b8c06d0bd5', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), h("div", { key: '7a782a6920de7eda76ab0060c7512f093671ad41', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: '48a8d2d74961a402e3a1b053b2f0314e74b4b289', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '58db96d62b8d89f03ab245990d2d6bbd3b1b5f85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'ad3aafe5f7ed45853c36b537525a8fff68452f55', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '80ce92868703c5e01434e7e83a7668e320bcbee1', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -132,3 +132,48 @@ Horizontal.args = {
   name: 'horizontal-group',
 };
 
+
+const PillTemplate = (args) =>
+  html` <pds-radio-group
+    component-id=${args.componentId}
+    direction=${args.direction}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    ?invalid=${args.invalid}
+    group-label=${args.groupLabel}
+    name=${args.name}
+    ?required=${args.required}
+  >
+    <pds-radio component-id="pill-solo" label="Just me" value="solo" variant="pill" checked></pds-radio>
+    <pds-radio component-id="pill-small" label="2-10 people" value="small" variant="pill"></pds-radio>
+    <pds-radio component-id="pill-medium" label="11-50 people" value="medium" variant="pill"></pds-radio>
+    <pds-radio component-id="pill-large" label="More than 50" value="large" variant="pill"></pds-radio>
+  </pds-radio-group>`;
+
+export const Pill = PillTemplate.bind();
+Pill.args = {
+  componentId: 'pill-group',
+  direction: 'row',
+  groupLabel: 'How big is your team?',
+  name: 'pill-group',
+};
+
+export const PillDisabled = PillTemplate.bind();
+PillDisabled.args = {
+  componentId: 'pill-group-disabled',
+  direction: 'row',
+  disabled: true,
+  groupLabel: 'How big is your team?',
+  name: 'pill-group-disabled',
+};
+
+export const PillInvalid = PillTemplate.bind();
+PillInvalid.args = {
+  componentId: 'pill-group-invalid',
+  direction: 'row',
+  errorMessage: 'Choose a team size to continue',
+  groupLabel: 'How big is your team?',
+  invalid: true,
+  name: 'pill-group-invalid',
+};

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

@@ -67,7 +67,7 @@ export class PdsRow {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return h(Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -2,12 +2,34 @@ import { Host, h } from "@stencil/core";
 import { HostStylingKeeper } from "../../utils/attributes";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
+/** The tags of an option list in order, optgroup contents included: equal shapes can be patched in place. */
+const shapeOf = (items) => items.map((item) => item.tagName + (item.tagName === 'OPTGROUP' ? `(${shapeOf(Array.from(item.children))})` : '')).join();
+/** Brings an existing option or optgroup up to date with its copy, keeping the element itself. */
+const patchInPlace = (target, copy) => {
+    Array.from(target.attributes).forEach(({ name }) => {
+        if (!copy.hasAttribute(name))
+            target.removeAttribute(name);
+    });
+    Array.from(copy.attributes).forEach(({ name, value }) => {
+        if (target.getAttribute(name) !== value)
+            target.setAttribute(name, value);
+    });
+    if (copy.tagName === 'OPTGROUP') {
+        Array.from(copy.children).forEach((child, index) => patchInPlace(target.children[index], child));
+    }
+    else if (target.textContent !== copy.textContent) {
+        target.textContent = copy.textContent;
+    }
+};
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
  */
 export class PdsSelect {
     constructor() {
         this._type = 'select-one';
+        this.optionObserver = null;
+        this.optionSyncFrame = null;
+        this.hasHadOptions = false;
         this.hostKeeper = new HostStylingKeeper();
         /**
          * Indicates whether or not the select field is disabled.
@@ -24,6 +46,16 @@ export class PdsSelect {
          * @defaultValue false
          */
         this.required = false;
+        /**
+         * Whether a mutation is inside an option or optgroup. The host's own attributes and children
+         * (top-level adds and removes reach `slotchange`) and the action slot's content are not.
+         */
+        this.touchesOption = ({ target }) => {
+            // Not just TEXT_NODE: characterData also reports comment nodes, and a Comment has no
+            // .closest() — treating anything non-Element as a Text node crashed on one.
+            const element = target.nodeType === Node.ELEMENT_NODE ? target : target.parentElement;
+            return target !== this.el && (element === null || element === void 0 ? void 0 : element.closest('option, optgroup')) != null;
+        };
         /**
          * Emits an event on input change.
         */
@@ -50,25 +82,47 @@ export class PdsSelect {
             this.pdsKeyDown.emit(ev);
         };
         /**
-         * Handles the change event for the slot element.
-         * This method is triggered when the slot content changes.
-         * It updates the inner HTML of the select element by cloning and appending
-         * the assigned <option> elements from the slot.
+         * Copies the slotted <option> and <optgroup> elements into the inner select, then
+         * reselects the current value. Runs on `slotchange` and when a slotted option changes
+         * (see startOptionSync).
+         *
+         * Nothing happens when the copies match what the select already holds. When only text or
+         * attributes changed, the select's own options are updated in place rather than replaced,
+         * so an open picker keeps its highlight, a multiple select keeps its range anchor, and a
+         * screen reader keeps its place. Selecting programmatically fires no change event, so a
+         * copy never emits `pdsSelectChange`.
          */
         this.handleSlotChange = () => {
-            const slot = this.slotContainer.querySelector('slot');
-            this.selectEl.innerHTML = '';
-            const assignedElements = slot.assignedElements({ flatten: true });
-            assignedElements.forEach((item) => {
-                if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
-                    const clonedItem = item.cloneNode(true);
-                    if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
-                        clonedItem.selected = true;
-                    }
-                    this.selectEl.appendChild(clonedItem);
-                }
-            });
+            var _a;
+            const slot = (_a = this.slotContainer) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+            if (slot === null || slot === undefined || this.selectEl === undefined)
+                return;
+            const copies = slot.assignedElements({ flatten: true })
+                .filter((item) => ['OPTION', 'OPTGROUP'].includes(item.tagName))
+                .map((item) => item.cloneNode(true));
+            const current = Array.from(this.selectEl.children);
+            // The very first copy populates an empty select, where falling back to the first option (like
+            // a native select) is correct; the no-match blank state is for options changing under a value
+            // that was already showing selected. Tracked separately from the select's current emptiness:
+            // an async reload that clears options before the next set lands would otherwise look like a
+            // first render again, and the no-match state must still apply once that next set arrives.
+            const hadOptions = this.hasHadOptions;
+            if (copies.length > 0)
+                this.hasHadOptions = true;
+            const markup = (items) => items.map((item) => item.outerHTML).join('');
+            if (markup(copies) === markup(current))
+                return;
+            if (shapeOf(copies) === shapeOf(current)) {
+                copies.forEach((copy, index) => patchInPlace(current[index], copy));
+            }
+            else {
+                this.selectEl.innerHTML = '';
+                copies.forEach((copy) => this.selectEl.appendChild(copy));
+            }
             this.updateSelectedOption();
+            if (hadOptions)
+                this.showNoSelectionWithoutMatch();
+            this.updateFormValue();
         };
     }
     /**
@@ -97,9 +151,16 @@ export class PdsSelect {
         }
         // Expose type property on the element instance to match native form element behavior
         exposeTypeProperty(this.el, () => this._type);
+        // Reconnected after a move: componentDidLoad won't run again, and options may have changed
+        // while it was out of the document.
+        if (this.selectEl !== undefined) {
+            this.startOptionSync();
+            this.scheduleOptionSync();
+        }
     }
     disconnectedCallback() {
         this.hostKeeper.disconnect();
+        this.stopOptionSync();
     }
     componentWillLoad() {
         // Set initial type based on multiple prop
@@ -109,6 +170,43 @@ export class PdsSelect {
     componentDidLoad() {
         // Set initial form value
         this.updateFormValue();
+        // Stencil holds componentDidLoad until the shadow root's pds-icon has loaded, so options can
+        // change between the first slotchange copy and here with nothing observing yet — the same gap
+        // the reconnect path closes with a catch-up sync.
+        this.startOptionSync();
+        this.scheduleOptionSync();
+    }
+    /**
+     * Keeps the inner select in step with the slotted options. `slotchange` only fires when
+     * top-level options are added or removed, so an option's text, value or disabled state
+     * changing, or an option added inside an optgroup, would otherwise never reach the select.
+     * Changes are batched into one copy per animation frame.
+     */
+    startOptionSync() {
+        if (this.optionObserver !== null || typeof MutationObserver === 'undefined' || !this.el.isConnected)
+            return;
+        this.optionObserver = new MutationObserver((mutations) => {
+            if (mutations.some(this.touchesOption))
+                this.scheduleOptionSync();
+        });
+        this.optionObserver.observe(this.el, { childList: true, subtree: true, attributes: true, characterData: true });
+    }
+    scheduleOptionSync() {
+        if (this.optionSyncFrame !== null)
+            return;
+        this.optionSyncFrame = requestAnimationFrame(() => {
+            this.optionSyncFrame = null;
+            this.handleSlotChange();
+        });
+    }
+    stopOptionSync() {
+        var _a;
+        (_a = this.optionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.optionObserver = null;
+        if (this.optionSyncFrame !== null) {
+            cancelAnimationFrame(this.optionSyncFrame);
+            this.optionSyncFrame = null;
+        }
     }
     /**
      * Updates the selected option in the select element based on the current value.
@@ -135,6 +233,19 @@ export class PdsSelect {
         }
         ;
     }
+    /**
+     * After a copy that changes an existing option set, a value whose option was renamed or removed
+     * has nothing to select. Like a native select, show nothing selected rather than the first
+     * option; the value itself is kept, with no change event.
+     */
+    showNoSelectionWithoutMatch() {
+        var _a;
+        const wanted = [].concat((_a = this.value) !== null && _a !== void 0 ? _a : []).filter((value) => value !== '');
+        const options = Array.from(this.selectEl.options);
+        if (wanted.length > 0 && !options.some((option) => wanted.includes(option.value))) {
+            this.selectEl.selectedIndex = -1;
+        }
+    }
     getHelperMessage() {
         return this.helperMessage && (h("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
     }
@@ -240,7 +351,7 @@ export class PdsSelect {
             'has-action': hasAction && !this.hideLabel ? 'true' : null,
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), h("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (h("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, h("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, h("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), h("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (h("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, h("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, h("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -198,8 +198,8 @@ export const withActionButton = (args) => html`<pds-select
   ?required=${args.required}
   type="${args.type}"
   value="${args.value}">
-  <pds-button slot="action" variant="unstyled">
-    <pds-icon name="question-circle"></pds-icon>
+  <pds-button slot="action" variant="unstyled" aria-label="Help with country">
+    <pds-icon name="question-circle" aria-hidden="true"></pds-icon>
   </pds-button>
   ${options.map((option) => html`<option value="${option.value}">${option.label}</option>`)}
 </pds-select>`;

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -48,7 +48,7 @@ export class PdsSortableItem {
     }
     render() {
         this.hostKeeper.record('pds-sortable-item');
-        return (h(Host, { key: '2065ccb474ae4b7032edc3c37aa6855f3048909d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '32385cc94837a3d0bc1c496615135c79274afe35', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ea94e28b2867aa20622ca073dc31d3b4a11eebbb', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'fb18aa90be0b8fa3832a5dd2b02a7b571205341f' }), this.enableActions && (h("div", { key: '4c6e59d77a7b2183552533a544f4a70ce0cc7011', class: "pds-sortable-item__actions" }, h("slot", { key: '497b1ff88436175d9365a28032e109b6fa118e44', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (h("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, h("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -70,7 +70,7 @@ export class PdsSortable {
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (h(Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, h("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
+        return (h(Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, h("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -113,9 +113,9 @@ export class PdsSwitch {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (h(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2ae8dc876745af26fa2418f2265248aeb8f97a2b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, h("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '817532e93c8f91ef64cd0f90aa6c4372c3b7d83f', role: "rowgroup", part: "body" }, h("slot", { key: '296ba876c6716e85252a06008bd55d59624223e3' })));
+        return (h(Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, h("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js

@@ -143,11 +143,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'de70a1002cc46e204f87349069b86ca43aa2129a', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '5e2b3308291e480323d7a1ac0575035758fb3695' })));
+                : {} }, h("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'de3faae735e90f5fde1258b5acb826f5f9dbd170', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'e590e57c8b37ec0ad18e96077401c4692bbd45a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '44ca7eda63185672939909e121a86e6502080a7d', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: '0671df85d7989cff7266bfd3d1b4d62b332d2e81' })));
+        return (h(Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }