@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,7 +1,9 @@
 'use strict';
 
 var index$1 = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var sortableLabel = require('./sortable-label-DOcJrHvA.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var i18nFormat = require('./i18n-format-BD0PmYzT.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
 /**!
@@ -2655,6 +2657,9 @@ Sortable.mount(Remove, Revert);
 
 const pdsSortableCss = () => `.pds-sortable.sc-pds-sortable-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-sortable.pds-sortable--bordered.sc-pds-sortable-h{border:var(--pine-border);border-radius:var(--pine-dimension-2xs)}`;
 
+const LIVE_REGION_CLASS = 'pds-sortable__live-region';
+const GRABBED_CLASS = 'pds-sortable-item--grabbed';
+const HANDLE_SELECTOR = '.pds-sortable-item__handle';
 const PdsSortable = class {
     constructor(hostRef) {
         index$1.registerInstance(this, hostRef);
@@ -2677,11 +2682,155 @@ const PdsSortable = class {
          * Determines the grabbable area for the `pds-sortable-item`.
          */
         this.handleType = 'row';
+        /**
+         * Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated.
+         * @defaultValue 'Reorder {item}'
+         */
+        this.handleLabel = 'Reorder {item}';
+        /**
+         * Screen-reader announcement when an item is picked up from the keyboard. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'
+         */
+        this.itemPickedUpLabel = '{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.';
+        /**
+         * Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, moved to position {position} of {total}'
+         */
+        this.itemMovedLabel = '{item}, moved to position {position} of {total}';
+        /**
+         * Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue '{item}, dropped at position {position} of {total}'
+         */
+        this.itemDroppedLabel = '{item}, dropped at position {position} of {total}';
+        /**
+         * Screen-reader announcement when a keyboard reorder is canceled and the item goes back. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated.
+         * @defaultValue 'Reorder canceled. {item} returned to position {position} of {total}'
+         */
+        this.reorderCanceledLabel = 'Reorder canceled. {item} returned to position {position} of {total}';
+        /** The item picked up from the keyboard, and where it started. */
+        this.grabbed = null;
+        this.liveRegion = null;
         this.hostKeeper = new attributes.HostStylingKeeper();
+        // Set only when a `pointerdown` here drops a picked-up item, and only until the `click` that
+        // follows it, if one does: a screen reader's browse-mode Enter or Space synthesizes both for
+        // the same press, and that click must not re-pick-up what its own pointerdown just dropped.
+        this.droppedByPointerDown = null;
+        this.handleFocusIn = () => {
+            this.ensureLiveRegion();
+        };
+        /**
+         * Focus leaving a picked-up item drops it where it is, unless the whole window lost focus (the user
+         * switched apps), when the item stays picked up for their return. A real window blur does not move
+         * `document.activeElement` away from the handle that's losing focus (some browsers reset it to `body`
+         * instead, but never to a different element), so it's told apart from focus moving into an iframe or
+         * another embedded document that way: an iframe becomes a genuinely different active element, while a
+         * window blur leaves `activeElement` as the handle itself, `null`, or `body`.
+         */
+        this.handleFocusOut = (ev) => {
+            var _a;
+            if (!this.isGrabbing() || ev.target !== this.focusTarget(this.grabbed.item))
+                return;
+            const nothingElseFocused = document.activeElement === null || document.activeElement === document.body || document.activeElement === ev.target;
+            if (ev.relatedTarget === null && ((_a = document.hasFocus) === null || _a === void 0 ? void 0 : _a.call(document)) === false && nothingElseFocused)
+                return;
+            this.drop(ev);
+        };
+        /**
+         * Screen readers in browse mode turn Enter and Space on a button into a click with no key events,
+         * so a click that isn't from a pointer (`detail` is 0) picks up or drops too.
+         */
+        this.handleClick = (ev) => {
+            if (this.disabled || ev.detail !== 0)
+                return;
+            const item = this.targetItem(ev.target);
+            if (!item)
+                return;
+            // NVDA and JAWS in Chromium fire this click's capture-phase `pointerdown` first, for the
+            // same Enter or Space press. If that pointerdown found the item already grabbed and dropped
+            // it, this click is that same press's drop, already handled -- picking the item back up here
+            // would leave it stuck grabbed, since Escape and the arrow keys don't reach the handle in
+            // browse mode.
+            if (this.droppedByPointerDown === item) {
+                this.droppedByPointerDown = null;
+                return;
+            }
+            if (!this.isGrabbing()) {
+                this.pickUp(item);
+            }
+            else if (this.grabbed.item === item) {
+                this.drop(ev);
+            }
+        };
+        this.handleKeyDown = (ev) => {
+            if (this.disabled || ev.altKey || ev.ctrlKey || ev.metaKey)
+                return;
+            const item = this.targetItem(ev.target);
+            if (!item)
+                return;
+            if (!this.isGrabbing()) {
+                if ((ev.key === ' ' || ev.key === 'Enter') && !ev.repeat) {
+                    ev.preventDefault();
+                    this.pickUp(item);
+                }
+                return;
+            }
+            if (this.grabbed.item !== item)
+                return;
+            const items = this.items();
+            const index = items.indexOf(item);
+            switch (ev.key) {
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    this.moveTo(item, index - 1);
+                    break;
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    this.moveTo(item, index + 1);
+                    break;
+                case 'Home':
+                    ev.preventDefault();
+                    this.moveTo(item, 0);
+                    break;
+                case 'End':
+                    ev.preventDefault();
+                    this.moveTo(item, items.length - 1);
+                    break;
+                case ' ':
+                case 'Enter':
+                    ev.preventDefault();
+                    if (!ev.repeat)
+                        this.drop(ev);
+                    break;
+                case 'Escape':
+                    // Keep an enclosing modal or drawer from closing too.
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.cancel();
+                    break;
+            }
+        };
     }
     handleDisabledChange() {
         var _a;
         (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('disabled', this.disabled);
+        if (this.disabled && this.isGrabbing())
+            this.cancel();
+        this.updateItems();
+    }
+    handleHandleTypeChange() {
+        var _a;
+        if (this.isGrabbing())
+            this.cancel();
+        // `null`, not `undefined`: SortableJS treats `option(name, undefined)` as a read, which would
+        // leave a previous handle restriction in place.
+        (_a = this.sortableInstance) === null || _a === void 0 ? void 0 : _a.option('handle', this.handleType === 'handle' ? HANDLE_SELECTOR : null);
+        this.updateItems();
+    }
+    updateItems() {
+        this.items().forEach((item) => {
+            if (item.tagName === 'PDS-SORTABLE-ITEM')
+                index$1.forceUpdate(item);
+        });
     }
     classNames() {
         const classNames = ['pds-sortable'];
@@ -2703,11 +2852,19 @@ const PdsSortable = class {
         this.hostKeeper.connect(this.el);
     }
     disconnectedCallback() {
+        var _a;
         this.hostKeeper.disconnect();
+        // Put the order back: a move that was never dropped was never emitted.
+        if (this.isGrabbing())
+            this.cancel(false);
+        (_a = this.liveRegion) === null || _a === void 0 ? void 0 : _a.remove();
+        this.liveRegion = null;
     }
     componentDidLoad() {
+        var _a;
+        const reduceMotion = typeof window !== 'undefined' && ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)').matches);
         let sortableOptions = {
-            animation: 150,
+            animation: reduceMotion ? 0 : 150,
             disabled: this.disabled,
             ghostClass: 'pds-sortable-item--ghost',
             dragClass: 'pds-sortable-item--drag',
@@ -2716,19 +2873,214 @@ const PdsSortable = class {
             },
         };
         if (this.handleType === 'handle') {
-            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
+            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: HANDLE_SELECTOR });
         }
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
+        // In place before the first announcement, as a region that's created with its text isn't read.
+        this.ensureLiveRegion();
+        // Items that rendered before this list was defined have no handle yet.
+        this.updateItems();
+    }
+    /** The children that can be reordered, counted as SortableJS counts them. */
+    items() {
+        return Array.from(this.el.children).filter((child) => child.tagName !== 'TEMPLATE');
+    }
+    /**
+     * The live region sits right after the list, not in it, so it's never counted as an item, by
+     * SortableJS or by a consumer reading the list's children, and it's still in the same modal. A
+     * morph that removes it gets it put back on the next focus.
+     */
+    ensureLiveRegion() {
+        if (!this.liveRegion) {
+            // A page-cache (bfcache, Turbo) restore brings back a DOM snapshot that can already have
+            // this list's own live region sitting right after it -- adopted here instead of making
+            // another, which would leave the stale one behind with its last message still in it.
+            const existing = this.el.nextElementSibling;
+            if (existing === null || existing === void 0 ? void 0 : existing.classList.contains(LIVE_REGION_CLASS)) {
+                this.liveRegion = existing;
+                return;
+            }
+            const region = document.createElement('span');
+            region.className = LIVE_REGION_CLASS;
+            region.setAttribute('role', 'status');
+            region.setAttribute('aria-live', 'polite');
+            region.setAttribute('aria-atomic', 'true');
+            // Created here, not rendered, so the scoped stylesheet can't reach it. With no inset, an
+            // absolutely positioned element sits at its static position -- the end of the list, here --
+            // rather than collapsing to (0, 0), which can grow a scrollable ancestor's scroll area.
+            Object.assign(region.style, {
+                position: 'absolute',
+                width: '1px',
+                height: '1px',
+                margin: '-1px',
+                padding: '0',
+                overflow: 'hidden',
+                clipPath: 'inset(50%)',
+                whiteSpace: 'nowrap',
+                border: '0',
+            });
+            this.liveRegion = region;
+        }
+        if (!this.liveRegion.isConnected && this.el.parentNode) {
+            // The host may itself be slotted into a named slot (e.g. inside a modal); stay in it rather
+            // than falling back to the default slot, which a consumer's template may not render.
+            const hostSlot = this.el.getAttribute('slot');
+            if (hostSlot !== null) {
+                this.liveRegion.setAttribute('slot', hostSlot);
+            }
+            else {
+                this.liveRegion.removeAttribute('slot');
+            }
+            this.el.parentNode.insertBefore(this.liveRegion, this.el.nextSibling);
+        }
+    }
+    announce(template, item) {
+        this.ensureLiveRegion();
+        const items = this.items();
+        const message = i18nFormat.formatMessage(template, {
+            item: sortableLabel.sortableItemLabel(item),
+            position: items.indexOf(item) + 1,
+            total: items.length,
+        });
+        // A repeat of the same text isn't announced again, so tell the two apart.
+        this.liveRegion.textContent = message === this.liveRegion.textContent ? `${message} ` : message;
+    }
+    handlePointerDown(ev) {
+        // A drag takes over from a keyboard reorder: keep the moves so far, so the drag starts from them.
+        // Only the primary button (or a touch/pen contact, same value) can start that drag -- a
+        // right-click or a secondary pointer does something else (a context menu, typically) and
+        // must not drop the item out from under it.
+        if (ev.button !== 0 || !this.isGrabbing())
+            return;
+        const item = this.grabbed.item;
+        this.drop(ev);
+        this.droppedByPointerDown = item;
+        window.setTimeout(() => {
+            if (this.droppedByPointerDown === item)
+                this.droppedByPointerDown = null;
+        }, 0);
+    }
+    /**
+     * Whether an item is picked up. One that's been taken out of the list meanwhile (a re-render, a
+     * stream update) is let go, as there's nothing left to move.
+     */
+    isGrabbing() {
+        if (this.grabbed && this.grabbed.item.parentElement !== this.el)
+            this.release();
+        return this.grabbed !== null;
+    }
+    /** The item whose handle `target` is, if it is one. */
+    targetItem(target) {
+        const item = this.items().find((candidate) => candidate.contains(target));
+        return item && this.focusTarget(item) === target ? item : undefined;
+    }
+    /** The item's handle, the button the keyboard reorders with. */
+    focusTarget(item) {
+        var _a;
+        return ((_a = Array.from(item.children).find((child) => child.matches(HANDLE_SELECTOR))) !== null && _a !== void 0 ? _a : null);
+    }
+    // SortableJS tells `index` (among all children) and `draggableIndex` (among draggable ones)
+    // apart for a list that also holds non-draggable children. This list doesn't -- the live
+    // region that once lived among `this.el`'s children now sits outside it as a sibling -- so
+    // `items()` already is every child, and the two counts are always the same.
+    indexes(item) {
+        const index = this.items().indexOf(item);
+        return { index, draggableIndex: index };
+    }
+    pickUp(item) {
+        var _a;
+        const { index, draggableIndex } = this.indexes(item);
+        this.grabbed = { item, oldIndex: index, oldDraggableIndex: draggableIndex };
+        item.classList.add(GRABBED_CLASS);
+        (_a = this.focusTarget(item)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'true');
+        this.announce(this.itemPickedUpLabel, item);
+    }
+    /**
+     * Moves the other items around `item` rather than `item` itself, so it never leaves the DOM and
+     * keeps focus.
+     */
+    moveTo(item, to, announce = true) {
+        var _a;
+        const items = this.items();
+        const from = items.indexOf(item);
+        if (to < 0 || to >= items.length || to === from) {
+            // At the first or last position, an out-of-range attempt (ArrowUp at the top, ArrowDown at
+            // the bottom) or a no-op one (Home already first, End already last) would otherwise leave
+            // a screen reader user with no sign the key landed at all. Repeating the current position
+            // confirms it without implying a move that didn't happen -- `cancel()`'s own call here
+            // passes `announce: false` and gets its own, different announcement instead.
+            if (announce)
+                this.announce(this.itemMovedLabel, item);
+            return;
+        }
+        if (to < from) {
+            const next = item.nextSibling;
+            items.slice(to, from).forEach((sibling) => this.el.insertBefore(sibling, next));
+        }
+        else {
+            items.slice(from + 1, to + 1).forEach((sibling) => this.el.insertBefore(sibling, item));
+        }
+        // Focus doesn't move, so the browser won't scroll the item into view itself.
+        (_a = item.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(item, { block: 'nearest' });
+        if (announce)
+            this.announce(this.itemMovedLabel, item);
+    }
+    drop(originalEvent) {
+        const { item, oldIndex, oldDraggableIndex } = this.grabbed;
+        this.release();
+        this.announce(this.itemDroppedLabel, item);
+        const { index, draggableIndex } = this.indexes(item);
+        // A keyboard drop happens more often than a drag: tabbing away from a picked-up row, a click
+        // elsewhere in the list, or the second press of a screen reader's browse-mode Enter all drop
+        // it too. Emitting unconditionally would have a consumer that saves on every event send a
+        // no-op request each time nothing actually moved.
+        if (draggableIndex === oldDraggableIndex)
+            return;
+        // The same shape SortableJS gives `onEnd`, with the event that ended the move as
+        // `originalEvent` -- not always a `KeyboardEvent`: a `FocusEvent` when focus leaves the row,
+        // a `PointerEvent` for a pointerdown, or a `MouseEvent` for a browse-mode click.
+        const detail = Object.assign(new CustomEvent('end', { bubbles: true, cancelable: true }), {
+            item,
+            from: this.el,
+            to: this.el,
+            oldIndex,
+            newIndex: index,
+            oldDraggableIndex,
+            newDraggableIndex: draggableIndex,
+            originalEvent,
+            pullMode: undefined,
+        });
+        this.pdsSortableItemMoved.emit(detail);
+    }
+    cancel(announce = true) {
+        const { item, oldDraggableIndex } = this.grabbed;
+        this.release();
+        // Items may have come or gone meanwhile, so go back as near the start as the list allows.
+        this.moveTo(item, Math.min(oldDraggableIndex, this.items().length - 1), false);
+        if (announce)
+            this.announce(this.reorderCanceledLabel, item);
+    }
+    release() {
+        var _a;
+        this.grabbed.item.classList.remove(GRABBED_CLASS);
+        (_a = this.focusTarget(this.grabbed.item)) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', 'false');
+        this.grabbed = null;
     }
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (index$1.h(index$1.Host, { key: '6e9e7b769f57ebfd81541fbecbe17b3fb4ad3e47', class: classNames, id: this.componentId }, index$1.h("slot", { key: 'c9466a216862c0a3e578f3fcfc1ac1e26146722b' })));
+        return (index$1.h(index$1.Host, { key: 'a1fb28574e3aa92a923c4baeecec690d4052601f', class: classNames, id: this.componentId, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, onClick: this.handleClick }, index$1.h("slot", { key: 'b9a255d4f94a6b9976a4cac7e142e45210125828' })));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "handleDisabledChange": 0
+            }],
+        "handleType": [{
+                "handleHandleTypeChange": 0
+            }],
+        "handleLabel": [{
+                "updateItems": 0
             }]
     }; }
 };

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

@@ -3,7 +3,8 @@
 var index = require('./index-D9iJuJCP.js');
 var form = require('./form-MhwfKTuo.js');
 var index$1 = require('./index-BDnbr0DK.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var ariaReferences = require('./aria-references-CUmqibnO.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)}`;
@@ -16,8 +17,11 @@ const PdsSwitch = class {
         this.pdsSwitchChange = index.createEvent(this, "pdsSwitchChange");
         this.inheritedAttributes = {};
         this._type = 'checkbox';
+        this.forwardsDescription = false;
         this.hostKeeper = new attributes.HostStylingKeeper();
         this.hasLabelSlot = false;
+        // Kept apart from the `disabled` prop so a fieldset never overwrites what the consumer set.
+        this.fieldsetDisabled = false;
         /**
          * Determines the input 'checked' state.
          */
@@ -35,7 +39,7 @@ const PdsSwitch = class {
          */
         this.required = false;
         this.onSwitchUpdate = (e) => {
-            if (this.disabled)
+            if (this.isDisabled())
                 return;
             const input = e.target;
             this.checked = input.checked;
@@ -55,10 +59,40 @@ const PdsSwitch = class {
             }
             return switchClasses;
         };
+        // An ID on the host can't reach into the shadow root, so the input is pointed at the elements the host's
+        // aria-describedby names, followed by its own helper or error message. A browser without ARIA element
+        // reflection keeps the input's own message only.
+        this.forwardDescription = () => {
+            var _a;
+            const input = this.inputEl;
+            if (input === undefined || !('ariaDescribedByElements' in input))
+                return;
+            const ownId = this.ownDescriptionId();
+            const referenced = ariaReferences.referencedElements(this.el, 'aria-describedby');
+            if (referenced.length === 0) {
+                if (!this.forwardsDescription)
+                    return;
+                this.forwardsDescription = false;
+                // Setting the element property cleared the attribute render wrote, so put that back.
+                if (ownId !== undefined) {
+                    input.setAttribute('aria-describedby', ownId);
+                }
+                else {
+                    input.removeAttribute('aria-describedby');
+                }
+                return;
+            }
+            const own = ownId === undefined ? null : (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(ownId);
+            input.ariaDescribedByElements = own == null ? referenced : [...referenced, own];
+            this.forwardsDescription = true;
+        };
         this.updateHasLabelSlot = () => {
             this.hasLabelSlot = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'label');
         };
     }
+    isDisabled() {
+        return this.disabled || this.fieldsetDisabled;
+    }
     connectedCallback() {
         this.hostKeeper.connect(this.el);
         // Initialize ElementInternals for form association (only once per element instance)
@@ -67,28 +101,58 @@ const PdsSwitch = class {
         }
         // Expose type property on the element instance to match native form element behavior
         form.exposeTypeProperty(this.el, () => this._type);
+        // A reconnected switch may sit in a different tree, where its description IDs name other elements.
+        this.forwardDescription();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // Consumers set aria-describedby on the host, sometimes after render, but only the inner input is announced.
+        this.hostDescriptionObserver = new MutationObserver(this.forwardDescription);
+        this.hostDescriptionObserver.observe(this.el, { attributeFilter: ['aria-describedby'] });
     }
     disconnectedCallback() {
+        var _a;
         this.hostKeeper.disconnect();
+        (_a = this.hostDescriptionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostDescriptionObserver = undefined;
+    }
+    componentDidRender() {
+        this.forwardDescription();
     }
     componentDidLoad() {
         this.updateFormValue();
     }
-    checkedChanged() {
+    syncFormValue() {
         this.updateFormValue();
     }
     updateFormValue() {
         if (form.isSpecTest())
             return;
         if (this.internals && this.internals.setFormValue) {
-            // For switches, only send the value when checked, otherwise send null
-            const formValue = this.checked ? (this.value || 'on') : null;
-            this.internals.setFormValue(formValue);
+            // The restoration state always carries the checked value, even while disabled, so a bfcache or
+            // back-forward restore can bring back a checked-then-disabled switch instead of losing it to a null state.
+            this.internals.setFormValue(this.formValue(), this.checkedValue());
         }
         if (this.internals && this.internals.setValidity) {
             this.internals.setValidity({});
         }
     }
+    // Unchecked sends uncheckedValue when set, even an empty string, otherwise nothing. Disabled sends nothing, like a
+    // native checkbox: the platform only leaves out a host with the disabled attribute present, which is also how
+    // React's own custom-element attribute serialization writes it.
+    formValue() {
+        if (this.isDisabled())
+            return null;
+        return this.checkedValue();
+    }
+    checkedValue() {
+        var _a;
+        if (this.checked)
+            return this.value || 'on';
+        return (_a = this.uncheckedValue) !== null && _a !== void 0 ? _a : null;
+    }
+    ownDescriptionId() {
+        return form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage);
+    }
     formStateRestoreCallback(state) {
         if (state instanceof FormData) {
             // For switches, restore if the value exists in FormData
@@ -108,27 +172,40 @@ const PdsSwitch = class {
         // literal string "false" (a consumer's or React's attribute serialization can write that) —
         // the platform treats any value as disabled, independent of fieldset state. A real disabled
         // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
-        if (disabled && !this.el.closest('fieldset[disabled]'))
-            return;
-        this.disabled = disabled;
+        this.fieldsetDisabled = disabled && this.el.closest('fieldset[disabled]') !== null;
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el));
+        this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el, ['aria-describedby']));
         this.updateHasLabelSlot();
     }
     render() {
         const hostClass = this.switchClassNames();
-        const ariaDisabled = this.disabled ? 'true' : null;
+        const ariaDisabled = this.isDisabled() ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        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)));
+        return (index.h(index.Host, { key: 'e5100ae3ecfac3bb556582507cc628b2455ae6cc', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: 'c337b8c4dc381c3a745100c707792c11711c01a1', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'f18ae27e7c91ef4d54b0192a04130420b991c9ff', "aria-describedby": this.ownDescriptionId(), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.isDisabled(), id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate,
+            // A description added after the switch, or replaced by a framework or a DOM morph, is picked up by the
+            // time focus reaches the switch and it's announced.
+            onFocus: this.forwardDescription, ref: (el) => (this.inputEl = el), required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), index.h("span", { key: '4bddfc080db7fee6fa8080e890918757dacde3fb', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: 'c9302409719113e12f6debb426c78dd0caaee88a', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            index.h("div", { key: '60785b9779cb2d50e6f0f2b32179106256f55ebf', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '9b258e9302c5ef959e8c06bee780d7d43144359b', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'f8df779a8c65a6f0b6ea139ff3c31cca76eb48fa', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "checked": [{
-                "checkedChanged": 0
+                "syncFormValue": 0
+            }],
+        "disabled": [{
+                "syncFormValue": 0
+            }],
+        "fieldsetDisabled": [{
+                "syncFormValue": 0
+            }],
+        "uncheckedValue": [{
+                "syncFormValue": 0
+            }],
+        "value": [{
+                "syncFormValue": 0
             }]
     }; }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
 require('./keep-hydrated-AKoh0DG4.js');
 

package/dist/cjs/pds-table-body.cjs.entry.js

@@ -10,7 +10,7 @@ const PdsTableBody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '4f1cba9505f56ff1ab0a19f9a88318d66a02eacc', role: "rowgroup", part: "body" }, index.h("slot", { key: 'ea0c620a15fcbe2915189e870d0815c5cbffdf8c' })));
+        return (index.h(index.Host, { key: '4b4da65979e3d3557d05cb9aff8d257d29e2c0a5', role: "rowgroup", part: "body" }, index.h("slot", { key: '70dcd401a705a430c54c57bf994a410a636c4a53' })));
     }
 };
 PdsTableBody.style = pdsTableBodyCss();