@pine-ds/core 4.7.2 → 4.9.0

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

@@ -6,9 +6,18 @@ export default {
 	args: {
 		popoverTargetAction: 'toggle',
 		popoverType: 'auto',
+		openOn: 'click',
 		placement: 'bottom-start',
+		padding: 'md',
 		componentId: 'popover-playground',
 	},
+	argTypes: {
+		padding: {
+			control: { type: 'select' },
+			options: ['none', 'xs', 'sm', 'md'],
+		},
+		openOn: { control: 'inline-radio', options: ['click', 'hover'] },
+	},
 	component: 'pds-popover',
 	parameters: {},
 	title: 'components/Popover'
@@ -19,8 +28,10 @@ const BaseTemplate = (args) => html`
 		component-id=${args.componentId}
 		popover-target-action=${args.popoverTargetAction}
 		popover-type=${args.popoverType}
+		open-on=${args.openOn}
 		placement=${args.placement}
 		.maxWidth=${args.maxWidth}
+		padding=${args.padding}
 	>
 		<pds-button slot="trigger">Show popover</pds-button>
 		<p>This is popover content that can be configured using the controls below.</p>
@@ -84,3 +95,23 @@ export const WithContent = (args) => html`
 WithContent.args = {
 	componentId: 'popover-rich'
 };
+
+export const OpenOnHover = (args) => html`
+	<pds-popover
+		component-id=${args.componentId || 'popover-hover'}
+		open-on="hover"
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+	>
+		<pds-button slot="trigger" variant="secondary">Hover for details</pds-button>
+		<pds-box direction="column" gap="xs" fit="true">
+			<pds-text tag="h3" size="md" weight="semibold">Project summary</pds-text>
+			<pds-text tag="p" size="sm" color="secondary">Rest the pointer on the trigger to preview supporting details. Click the trigger to keep this open while you read.</pds-text>
+		</pds-box>
+	</pds-popover>
+`;
+OpenOnHover.args = {
+	componentId: 'popover-hover'
+};

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

@@ -30,7 +30,7 @@ export class PdsProgress {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, h("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, h("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, h("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, h("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, h("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
+        return (h(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, h("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -271,4 +271,61 @@ label:has(input:disabled) {
 }
 :host(.has-image).is-invalid .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
+}
+
+:host(.pds-radio--pill) label {
+  align-items: center;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
+  color: var(--pine-color-text-active);
+  cursor: pointer;
+  font: var(--pine-typography-body);
+  min-block-size: var(--pine-dimension-xl);
+  padding: 0 var(--pine-dimension-sm);
+  transition: border-color var(--pine-motion-duration-fast) ease;
+}
+:host(.pds-radio--pill) label span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+:host(.pds-radio--pill) label:hover {
+  border-color: var(--pine-color-text);
+}
+:host(.pds-radio--pill) label:has(input:checked) {
+  border-color: var(--pine-color-text-active);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);
+}
+:host(.pds-radio--pill) label:has(input:focus-visible) {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width-thick);
+}
+:host(.pds-radio--pill) label:has(input:disabled) {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host(.pds-radio--pill) label:has(input:disabled:checked) {
+  border-color: var(--pine-color-text-label-disabled);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);
+}
+@media (forced-colors: active) {
+  :host(.pds-radio--pill) label:has(input:disabled) {
+    border-color: GrayText;
+  }
+  :host(.pds-radio--pill) label:has(input:checked) {
+    border-color: Highlight;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+  :host(.pds-radio--pill) label:has(input:disabled:checked) {
+    border-color: GrayText;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+}
+:host(.pds-radio--pill) .pds-radio__message {
+  margin-inline-start: 0;
 }

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: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', 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: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (h("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', 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

@@ -161,13 +161,13 @@ 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: {
+        return (h(Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "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: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', 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: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "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: 'f49caaba976579eb5588e442499595c7dba7ceff', 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"; }