@pine-ds/core 4.8.0 → 4.9.1

package/dist/cjs/pds-radio-group.cjs.entry.js

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-Do70atou.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsRadioGroupCss = () => `.sc-pds-radio-group-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-sm)}.is-invalid.sc-pds-radio-group-h .pds-radio-group__message--error.sc-pds-radio-group{color:var(--pine-color-text-message-danger)}.pds-radio-group__label.sc-pds-radio-group{color:var(--pine-color-text-label);font:var(--pine-typography-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-radio-group__radios.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pds-radio-group-gap, var(--pine-dimension-xs))}.pds-radio-group__radios--row.sc-pds-radio-group{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-radio-group__radios--column.sc-pds-radio-group{-ms-flex-direction:column;flex-direction:column}.pds-radio-group__message.sc-pds-radio-group{color:var(--pine-color-text-message);font:var(--pine-typography-body);width:100%}.pds-radio-group__message--error.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio-group__message--error.sc-pds-radio-group pds-icon.sc-pds-radio-group{-webkit-margin-before:var(--pine-dimension-050);margin-block-start:var(--pine-dimension-050)}`;
 
@@ -36,6 +37,7 @@ const PdsRadioGroup = class {
          * @defaultValue false
          */
         this.required = false;
+        this.hostKeeper = new attributes.HostStylingKeeper();
     }
     handlePropsChange() {
         this.updateChildRadios();
@@ -87,6 +89,29 @@ const PdsRadioGroup = class {
             }
         });
     }
+    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)
+            index.forceUpdate(this);
+    }
     componentWillLoad() {
         // Generate stable group ID once during initialization
         // This ensures DOM stability and accessibility relationships remain consistent across re-renders
@@ -100,6 +125,18 @@ const PdsRadioGroup = class {
                 : `${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) {
@@ -152,6 +189,20 @@ const PdsRadioGroup = class {
         // 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) {
@@ -165,13 +216,23 @@ const PdsRadioGroup = class {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.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 (index.h(index.Host, { key: '0fe381f99dddae0aeb9189a13b0e2195f1c79886', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (index.h("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), index.h("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
+            } }, this.groupLabel && (index.h("div", { key: '4967dc22fa0265dbfbabf94a49b182b8c06d0bd5', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), index.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',
-            } }, index.h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
+            } }, index.h("slot", { key: '48a8d2d74961a402e3a1b053b2f0314e74b4b289', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: '58db96d62b8d89f03ab245990d2d6bbd3b1b5f85', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: 'ad3aafe5f7ed45853c36b537525a8fff68452f55', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '80ce92868703c5e01434e7e83a7668e320bcbee1', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-Do70atou.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const labelCss = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
-const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}`;
+const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;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);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio: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}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) 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){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio: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)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio: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)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
 
 const PdsRadio = class {
     constructor(hostRef) {
@@ -28,7 +28,7 @@ const PdsRadio = class {
          */
         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;
@@ -42,6 +42,11 @@ const PdsRadio = class {
          * @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;
@@ -63,6 +68,9 @@ const PdsRadio = class {
     hasImage() {
         return this._hasImage;
     }
+    isPill() {
+        return this.variant === 'pill';
+    }
     classNames() {
         const classNames = [];
         if (this.invalid) {
@@ -71,10 +79,14 @@ const PdsRadio = class {
         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(' ');
@@ -104,13 +116,14 @@ const PdsRadio = class {
     }
     render() {
         const renderLabelAndMessages = () => [
-            index.h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, index.h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "aria-describedby": form.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' : '' }), index.h("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            index.h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, index.h("input", { key: 'fdd83248666907fa25c5406cdedcd0e6f8d45f50', "aria-describedby": form.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' : '' }), index.h("span", { key: '73166ffd57cdb1f3b9e2b61fe880216b23a6510b', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (index.h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (index.h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '08e7a2319eddc1d314ee9dddd51a5ce88cd4ae48', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (index.h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'e5bca81578382181b6fce61fa6830fd60e54234a', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (index.h(index.Host, { key: '351376552abee90f50c3aceb03ecf8a81ae1b82b', class: hostClass }, this.hasImage() && (index.h("div", { key: 'fd85fd36b2ebd99b12c3bb2a13cf3d3e3c26530f', class: "pds-radio__image-container", part: "image-container" }, index.h("slot", { key: 'abe75dbe38d29340b805f70861b084c1b3836be9', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (index.h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        const showImage = this.hasImage() && !this.isPill();
+        return (index.h(index.Host, { key: '4cf39a988cc7642234ff62e7fa2f0d08b09e7d25', class: hostClass }, showImage && (index.h("div", { key: '7a88d32f896ad4696ea46b13f9ef01e7df0a1c3e', class: "pds-radio__image-container", part: "image-container" }, index.h("slot", { key: 'eb8399263443d36ab91c0875602d0dc31f036058', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (index.h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsRowCss = () => `:host{--row-gap-y:var(--pine-dimension-125);--row-gap-x:var(--pine-dimension-125);display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}@layer layout{.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--pine-border)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}`;
 
@@ -71,7 +71,7 @@ const PdsRow = class {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return index.h(index.Host, { key: '452882c1105868f5d392e7cb165311b1abc4a243', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return index.h(index.Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-Do70atou.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsSelectTokensCss = () => `:host{--pine-select-color-background-danger:var(--pine-color-red-050)}`;
 
@@ -12,6 +12,25 @@ const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) l
 
 const pdsSelectCss = () => `:host{--pds-select-background:var(--pine-color-background-container);--pds-select-border:var(--pine-border);--pds-select-border-radius:var(--pine-dimension-125);--pds-select-border-radius-start-end:var(--pine-dimension-125);--pds-select-border-radius-start-start:var(--pine-dimension-125);--pds-select-border-radius-end-end:var(--pine-dimension-125);--pds-select-border-radius-end-start:var(--pine-dimension-125);--pds-select-min-height:36px;--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger)}:host .hidden,:host :host([hidden]){display:none}.pds-select{color:var(--pine-color-text);display:grid;-ms-flex-direction:column;flex-direction:column;grid-template-areas:"label label" "field field" "message message";grid-template-columns:1fr minmax(2rem, -webkit-min-content);grid-template-columns:1fr minmax(2rem, min-content);grid-template-rows:-webkit-min-content -webkit-min-content -webkit-min-content;grid-template-rows:min-content min-content min-content;position:relative;width:100%}.pds-select__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-area:label;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-select__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--pds-select-background);border:var(--pds-select-border);border-end-end-radius:var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));border-end-start-radius:var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));border-start-end-radius:var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));border-start-start-radius:var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));color:var(--pine-color-text);font:var(--pine-typography-body);grid-area:field;letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-select-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);-webkit-padding-end:var(--pine-dimension-450);padding-inline-end:var(--pine-dimension-450);position:relative}select:hover{border-color:var(--pine-color-border-hover);cursor:pointer}select:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}select:disabled{background-color:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) select:has(~.pds-select__message .pds-select__error-message){background-color:var(--pine-color-red-950)}select:has(~.pds-select__message .pds-select__error-message):focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-disabled) .pds-select__select-icon{color:var(--pine-color-text-disabled)}:host(.is-invalid) select{background-color:var(--pine-select-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) :host(.is-invalid) select{background-color:var(--pine-color-red-950)}:host(.is-invalid) select:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:hover:not(:disabled){border-color:var(--pine-color-accent-hover)}:host([highlight]:not(.is-disabled):not(.is-invalid)) select:focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not(.is-disabled):not(.is-invalid)) .pds-select__select-icon{color:var(--pine-color-text-accent)}.pds-select__error-message,.pds-select__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-select__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-select__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-select__message{grid-area:message}.pds-select__select-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;grid-column:-1/-2;grid-row:2/3;height:var(--pds-select-min-height);pointer-events:none;position:relative;z-index:calc(var(--pine-z-index-raised) - 1)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 
+/** 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;
+    }
+};
 const PdsSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -20,6 +39,9 @@ const PdsSelect = class {
         this.pdsFocus = index.createEvent(this, "pdsFocus");
         this.pdsKeyDown = index.createEvent(this, "pdsKeyDown");
         this._type = 'select-one';
+        this.optionObserver = null;
+        this.optionSyncFrame = null;
+        this.hasHadOptions = false;
         this.hostKeeper = new attributes.HostStylingKeeper();
         /**
          * Indicates whether or not the select field is disabled.
@@ -36,6 +58,16 @@ const PdsSelect = class {
          * @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.
         */
@@ -62,25 +94,47 @@ const PdsSelect = class {
             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();
         };
     }
     /**
@@ -109,9 +163,16 @@ const PdsSelect = class {
         }
         // Expose type property on the element instance to match native form element behavior
         form.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
@@ -121,6 +182,43 @@ const PdsSelect = class {
     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.
@@ -146,6 +244,19 @@ const PdsSelect = class {
             });
         }
     }
+    /**
+     * 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 && (index.h("p", { class: "pds-select__helper-message", id: form.messageId(this.componentId, 'helper') }, this.helperMessage));
     }
@@ -251,7 +362,7 @@ const PdsSelect = class {
             'has-action': hasAction && !this.hideLabel ? 'true' : null,
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (index.h(index.Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), index.h("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, index.h("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, index.h("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "aria-describedby": form.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) }), index.h("div", { key: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "aria-hidden": "true", class: "pds-select__select-icon", icon: index$1.enlarge }))));
+        return (index.h(index.Host, Object.assign({ key: '37c2c3b72c13c3c4e3d81da29ddddc86a7300d70', class: hostClass }, hostAttributes), index.h("div", { key: 'ff1c311dca6fc25813e5473d0e8daff4dc12e807', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: '77db17b0beb1fefabb26ffe1df0e5f03a0515996', class: "pds-select__label-wrapper" }, index.h("label", { key: 'c4dcba3bc148aada4a3afcca0a30c64a630e441f', htmlFor: this.componentId }, index.h("span", { key: '0fc3424ec1961d3b216c0fabb80cb8acee37f1a2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: 'ff343a6653ccd081021cb669a428c780d0162e8b', "aria-describedby": form.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) }), index.h("div", { key: '86fed1916c3b13d079492581a7c6bb621012a4a5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: 'abe06eeef5be13b716573c8a806d6b7795edc65f', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: '68c958666828f77114f2edeedb667070106046fa', "aria-hidden": "true", class: "pds-select__select-icon", icon: index$1.enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-sortable-item.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
-var index$1 = require('./index-Do70atou.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsSortableItemCss = () => `.pds-sortable-item.sc-pds-sortable-item-h{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--pine-dimension-md);padding-inline-start:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-start-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:calc(var(--pine-dimension-xs) * 1.25);border-end-start-radius:calc(var(--pine-dimension-xs) * 1.25)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h{cursor:not-allowed;opacity:0.5}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:not-allowed}.pds-sortable--disabled .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:transparent}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--pine-color-background-container-hover)}.pds-sortable:not(.pds-sortable--disabled) .pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--pine-color-info)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container);border-radius:0;-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);border-radius:0}`;
 
@@ -51,7 +51,7 @@ const PdsSortableItem = class {
     }
     render() {
         this.hostKeeper.record('pds-sortable-item');
-        return (index.h(index.Host, { key: '2065ccb474ae4b7032edc3c37aa6855f3048909d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (index.h("div", { key: '32385cc94837a3d0bc1c496615135c79274afe35', class: "pds-sortable-item__handle" }, index.h("pds-icon", { key: 'ea94e28b2867aa20622ca073dc31d3b4a11eebbb', "aria-hidden": "true", icon: index$1.handle }))), index.h("slot", { key: 'fb18aa90be0b8fa3832a5dd2b02a7b571205341f' }), this.enableActions && (index.h("div", { key: '4c6e59d77a7b2183552533a544f4a70ce0cc7011', class: "pds-sortable-item__actions" }, index.h("slot", { key: '497b1ff88436175d9365a28032e109b6fa118e44', name: "sortable-item-actions" })))));
+        return (index.h(index.Host, { key: 'c6b5402a54179d4e7caed3cc81874977d2d6c677', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (index.h("div", { key: 'cd2d85286bcb3e47f76e4571d609d91f932b717b', class: "pds-sortable-item__handle" }, index.h("pds-icon", { key: '97e2e155283d86921f40198637abf596d6cc86e0', "aria-hidden": "true", icon: index$1.handle }))), index.h("slot", { key: '99743c8e5be45ca76f276b47688843a621c8ded5' }), this.enableActions && (index.h("div", { key: '7cb1a8b99658d72067ccae036b2bc0276b8cf02e', class: "pds-sortable-item__actions" }, index.h("slot", { key: 'f9b3b7d1cc10ac077f65ec2cafac7a372deae511', name: "sortable-item-actions" })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index$1 = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index$1 = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 /**!
  * Sortable 1.15.7
@@ -2723,7 +2723,7 @@ const PdsSortable = class {
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (index$1.h(index$1.Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, index$1.h("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
+        return (index$1.h(index$1.Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, index$1.h("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-D9iJuJCP.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-Do70atou.js');
-var attributes = require('./attributes-BJ7KBHql.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index$1 = require('./index-BDnbr0DK.js');
+var attributes = require('./attributes-CW49XqaL.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
@@ -120,9 +120,9 @@ const PdsSwitch = class {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (index.h(index.Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "aria-describedby": form.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)), index.h("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            index.h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '2ae8dc876745af26fa2418f2265248aeb8f97a2b', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
+        return (index.h(index.Host, { key: '0fa5beb83232b381ea5cdfa82d143afcb69eb4e1', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: 'df5d08344d11cb334ef69a432d1c02557caacc96', htmlFor: this.componentId }, index.h("input", Object.assign({ key: '6908b328f0e2da2085ffbffe0d1e4d09f2c6fd86', "aria-describedby": form.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)), index.h("span", { key: '1108ab3eae63a371f9e9b80f011211cba8287b67', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: '8aac1d9b81deab92e1e27c06debf2b87bc697874', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            index.h("div", { key: 'ef829fb6bc66060805a144995f60e2bebb915615', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '42ad678cc2179b4a26ed09151de41c2293b98011', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '8dc0b29b522247762010edb3b1e8e5fc8c8788fa', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-CW49XqaL.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled,.is-disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled,.is-disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled,.is-disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-background-container);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;