@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,378 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
+import { e as exposeTypeProperty, m as messageId, i as isSpecTest, a as assignDescription } from './form-BuRbS7Hp.js';
+import { b as danger, e as enlarge } from './index-B0DXTeeV.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsSelectTokensCss = () => `:host{--pine-select-color-background-danger:var(--pine-color-red-050)}`;
+
+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)}`;
+
+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) {
+        registerInstance(this, hostRef);
+        this.pdsSelectChange = createEvent(this, "pdsSelectChange");
+        this.pdsBlur = createEvent(this, "pdsBlur");
+        this.pdsFocus = createEvent(this, "pdsFocus");
+        this.pdsKeyDown = createEvent(this, "pdsKeyDown");
+        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.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether multiple options can be selected.
+         * @defaultValue false
+         */
+        this.multiple = false;
+        /**
+         * Indicates whether or not the select field is required.
+         * @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.
+        */
+        this.onSelectUpdate = (e) => {
+            const target = e.target;
+            const values = Array.from(target.options)
+                .filter((option) => (option.selected))
+                .map((option) => (option.value));
+            if (values.length === 1 && !this.multiple) {
+                this.value = values[0];
+            }
+            else {
+                this.value = values;
+            }
+            this.pdsSelectChange.emit(e);
+        };
+        this.onBlur = (ev) => {
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.pdsFocus.emit(ev);
+        };
+        this.onKeyDown = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
+        /**
+         * 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 = () => {
+            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();
+        };
+    }
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged() {
+        this.updateSelectedOption();
+        this.updateFormValue();
+    }
+    /**
+     * Updates the type property when multiple changes to match native select behavior.
+     */
+    multipleChanged() {
+        this.updateType();
+    }
+    updateType() {
+        this._type = this.multiple ? 'select-multiple' : 'select-one';
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // 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
+        this.updateType();
+        this.updateSelectedOption();
+    }
+    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.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    updateSelectedOption() {
+        if (this.selectEl) {
+            const options = this.selectEl.options;
+            // Update the selected attribute for all options.
+            Array.from(options).map((option) => {
+                if (Array.isArray(this.value)) {
+                    option.selected = this.value.includes(option.value);
+                }
+                else {
+                    option.selected = this.value === option.value;
+                }
+            });
+        }
+    }
+    /**
+     * 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));
+    }
+    getErrorMessage() {
+        return this.errorMessage && (h("p", { class: "pds-select__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage));
+    }
+    renderMessages() {
+        if (!this.helperMessage && !this.errorMessage)
+            return null;
+        return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
+    }
+    // The field also renders as invalid whenever an error message is present, via
+    // `select:has(~ .pds-select__message .pds-select__error-message)` in the styles.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-select__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.value;
+            // Handle multi-select arrays by converting to FormData or comma-separated string
+            if (Array.isArray(value)) {
+                if (value.length > 1) {
+                    // For multiple values, create FormData with multiple entries
+                    const formData = new FormData();
+                    value.forEach(val => formData.append(this.name || '', val));
+                    this.internals.setFormValue(formData);
+                }
+                else {
+                    // Single value in array, use the string value
+                    this.internals.setFormValue(value[0] || null);
+                }
+            }
+            else {
+                // Single string value
+                this.internals.setFormValue(value || null);
+            }
+            // Set validity based on native select validation
+            if (this.selectEl && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.selectEl.validity, this.selectEl.validationMessage, this.selectEl);
+            }
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback() {
+        this.value = '';
+        this.updateFormValue();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+        else if (state instanceof FormData && this.name) {
+            // Extract value(s) from FormData using the select's name
+            const values = state.getAll(this.name);
+            if (values.length > 1) {
+                // Multi-select: convert to string array
+                this.value = values.filter(v => typeof v === 'string');
+            }
+            else if (values.length === 1 && typeof values[0] === 'string') {
+                // Single select: use string value
+                this.value = values[0];
+            }
+        }
+    }
+    render() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        const hostClass = this.classNames();
+        const hostAttributes = {
+            'aria-disabled': this.disabled ? 'true' : null,
+            'has-action': hasAction && !this.hideLabel ? 'true' : null,
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (h(Host, Object.assign({ key: '6ffb35c5166a0759fbe7b3daa0b674c5f10458fa', class: hostClass }, hostAttributes), h("div", { key: '1e2d73b3a65189c29a34c1ce4473cce190f052c0', class: "pds-select" }, !this.hideLabel && (h("div", { key: '467c75d7232e4667975419a0dcad28231ca240a1', class: "pds-select__label-wrapper" }, h("label", { key: '9dd08c5c71a23c762f9d38fcec525a05ced7d48b', htmlFor: this.componentId }, h("span", { key: '94e5f054aa6e75e458f24c02ba9a6cda81f112d7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '18c626e10851041042ab4d6dfe700d49a9b3312b', "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: '08c6cee6b009d22b0ed70cc8231d3c2c8637099d', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '2ebcb906f8816e3bf26d5e4f82f8ea2d9ca2256a', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '191f489efb78fc7066fc0b5a1f5da1f7cda446e8', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "multiple": [{
+                "multipleChanged": 0
+            }]
+    }; }
+};
+PdsSelect.style = pdsSelectTokensCss() + (labelCss() + pdsSelectCss());
+
+export { PdsSelect as pds_select };

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

@@ -1,16 +1,49 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-2a33b470.js';
-import { h as handle } from './index-a1e2f9af.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
+import { f as formatMessage } from './i18n-format-BJgZHCWe.js';
+import { s as sortableItemLabel } from './sortable-label-PItnzVVR.js';
+import { h as handle } from './index-B0DXTeeV.js';
+import './keep-hydrated-BgNaWLoS.js';
 
-const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.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(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.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-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
-const PdsSortableItemStyle0 = pdsSortableItemCss;
+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);position:relative;-webkit-transition:-webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:-webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out);transition:box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out), -webkit-box-shadow var(--pine-motion-duration-fast) var(--pine-motion-easing-out)}.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{border-radius:var(--pine-border-radius-sm);line-height:1;-webkit-margin-end:var(--pine-dimension-md);margin-inline-end:var(--pine-dimension-md)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle--hidden.sc-pds-sortable-item{-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle--hidden.sc-pds-sortable-item:focus-visible{outline:0}.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.sc-pds-sortable-item-h:has(>.pds-sortable-item__handle--hidden:focus-visible){outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) * -1)}.pds-sortable-item--grabbed.sc-pds-sortable-item-h{background-color:var(--pine-color-background-container-hover);-webkit-box-shadow:var(--pine-box-shadow-400), inset 0 0 0 var(--pine-border-width-thick) var(--pine-color-border-active);box-shadow:var(--pine-box-shadow-400), inset 0 0 0 var(--pine-border-width-thick) var(--pine-color-border-active);position:relative;z-index:1}@media (forced-colors: active){.pds-sortable-item--grabbed.sc-pds-sortable-item-h{border:var(--pine-border-width-thick) solid Highlight;padding-block:calc(var(--pine-dimension-xs) - var(--pine-border-width-thick));padding-inline:calc(var(--pine-dimension-md) - var(--pine-border-width-thick))}}.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}`;
 
+const GRABBED_CLASS = 'pds-sortable-item--grabbed';
 const PdsSortableItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostKeeper = new HostStylingKeeper();
+        /**
+         * Determines whether `sortable-item-actions` slot should be enabled.
+         * @defaultValue false
+         */
         this.enableActions = false;
-        this.componentId = undefined;
+        /**
+         * Determines whether the reorder handle is shown. The handle itself renders whenever the list
+         * is reorderable, regardless of this prop; without it, the handle is visually hidden but still
+         * reachable from the keyboard.
+         * @defaultValue false
+         */
         this.showHandle = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // Discards stale handle/actions siblings left by a page-cache (Turbo, bfcache) reconnect; the fresh handle is always first, the fresh actions wrapper always last.
+    componentDidRender() {
+        const handles = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__handle'));
+        handles.slice(1).forEach((stale) => stale.remove());
+        const actionsWrappers = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__actions'));
+        const freshActions = actionsWrappers[actionsWrappers.length - 1];
+        actionsWrappers.slice(0, -1).forEach((stale) => {
+            if (freshActions !== undefined) {
+                Array.from(stale.children).forEach((node) => freshActions.appendChild(node));
+            }
+            stale.remove();
+        });
+    }
     componentWillRender() {
         // When the parent sortable has a type of 'handle', the sortable items
         // will automatically set showHandle to 'true'.
@@ -20,12 +53,29 @@ const PdsSortableItem = class {
         }
     }
     render() {
-        return (h(Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: handle }))), h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
+        const sortable = this.sortableRef;
+        // In a list that can be reordered, the handle is what the keyboard reorders with. It's always
+        // rendered, and only hidden visually when `show-handle` is off, so every row has a named button.
+        const reorderable = typeof (sortable === null || sortable === void 0 ? void 0 : sortable.handleLabel) === 'string' && !sortable.disabled;
+        // `pds-sortable` sets the grabbed class and `aria-pressed` directly on this element and its
+        // handle, not through a prop -- read back whatever's there now rather than hardcoding the
+        // rest state, so a re-render for an unrelated reason (`handleLabel` changing, for one,
+        // `forceUpdate`s every row) carries the current grabbed state forward instead of resetting it.
+        const wasGrabbed = this.el.classList.contains(GRABBED_CLASS);
+        const hostClasses = {
+            'pds-sortable-item': true,
+            [GRABBED_CLASS]: wasGrabbed,
+        };
+        this.hostKeeper.record(hostClasses);
+        const existingHandle = this.el.querySelector('.pds-sortable-item__handle');
+        const wasPressed = (existingHandle === null || existingHandle === void 0 ? void 0 : existingHandle.getAttribute('aria-pressed')) === 'true';
+        return (h(Host, { key: '93566ff82e0603508392df14f6ecec11872e822c', class: hostClasses }, (this.showHandle || reorderable) && (h("div", { key: 'c3c6bd592ab827a0fc513c101b5afec8acc62cf4', class: {
+                'pds-sortable-item__handle': true,
+                'pds-sortable-item__handle--hidden': !this.showHandle,
+            }, role: reorderable ? 'button' : undefined, tabindex: reorderable ? '0' : undefined, "aria-label": reorderable ? formatMessage(sortable.handleLabel, { item: sortableItemLabel(this.el) }) : undefined, "aria-pressed": reorderable ? String(wasPressed) : undefined }, h("pds-icon", { key: 'a71dd5c7c7d368ec0ef326d7f86f33bcaeecf238', "aria-hidden": "true", icon: handle }))), h("slot", { key: 'cf372e7f7a234829b77ae28604bfdbdced27b1e8' }), this.enableActions && (h("div", { key: 'abf8848c6c5ed09ddcf1b09be21f0ba851385f10', class: "pds-sortable-item__actions" }, h("slot", { key: 'e6b3b897c17529f5d803d72e6fcbeed66880f083', name: "sortable-item-actions" })))));
     }
     get el() { return getElement(this); }
 };
-PdsSortableItem.style = PdsSortableItemStyle0;
+PdsSortableItem.style = pdsSortableItemCss();
 
 export { PdsSortableItem as pds_sortable_item };
-
-//# sourceMappingURL=pds-sortable-item.entry.js.map