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

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

@@ -1,17 +1,192 @@
-import { Host, h } from "@stencil/core";
+import { forceUpdate, Host, h } from "@stencil/core";
+import { sortableItemLabel } from "./sortable-label";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { formatMessage } from "../../i18n";
 import Sortable from "sortablejs";
+const LIVE_REGION_CLASS = 'pds-sortable__live-region';
+const GRABBED_CLASS = 'pds-sortable-item--grabbed';
+const HANDLE_SELECTOR = '.pds-sortable-item__handle';
+/**
+ * @lightDom host-only
+ */
 export class PdsSortable {
     constructor() {
+        /**
+         * Determines whether `sortable` should have a border.
+         * @defaultValue false
+         */
         this.border = false;
-        this.componentId = undefined;
+        /**
+         * Determines whether or not the sortable is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether `sortable` items should be divided with border.
+         */
         this.dividers = false;
+        /**
+         * 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 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')
+                forceUpdate(item);
+        });
     }
     classNames() {
         const classNames = ['pds-sortable'];
         if (this.border) {
             classNames.push('pds-sortable--bordered');
         }
+        if (this.disabled) {
+            classNames.push('pds-sortable--disabled');
+        }
         if (this.dividers) {
             classNames.push('pds-sortable--divided');
         }
@@ -20,9 +195,24 @@ export class PdsSortable {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        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',
             onEnd: (evt) => {
@@ -30,12 +220,203 @@ export class PdsSortable {
             },
         };
         if (this.handleType === 'handle') {
-            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
+            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: HANDLE_SELECTOR });
         }
-        Sortable.create(this.el, sortableOptions);
+        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 = formatMessage(template, {
+            item: 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() {
-        return (h(Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+        const classNames = this.classNames();
+        this.hostKeeper.record(classNames);
+        return (h(Host, { key: 'f758a8b71485f09185ba511b304c48c3fcdb5298', class: classNames, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, onClick: this.handleClick }, h("slot", { key: 'fecbafc235475dc67fb1d7fe051c42d2a51b4bfe' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }
@@ -68,8 +449,33 @@ export class PdsSortable {
                         }],
                     "text": "Determines whether `sortable` should have a border."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
                 "attribute": "border",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the sortable is disabled."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -84,10 +490,12 @@ export class PdsSortable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the sortable container `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "dividers": {
                 "type": "boolean",
@@ -101,10 +509,12 @@ export class PdsSortable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Deternines whether `sortable` items should be divided with border."
+                    "text": "Determines whether `sortable` items should be divided with border."
                 },
-                "attribute": "dividers",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "dividers",
                 "defaultValue": "false"
             },
             "handleType": {
@@ -121,9 +531,126 @@ export class PdsSortable {
                     "tags": [],
                     "text": "Determines the grabbable area for the `pds-sortable-item`."
                 },
-                "attribute": "handle-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "handle-type",
                 "defaultValue": "'row'"
+            },
+            "handleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Reorder {item}'"
+                        }],
+                    "text": "Accessible label for each item's reorder handle, the button the keyboard reorders with. Pass a translated string to localize it; `{item}` is interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-label",
+                "defaultValue": "'Reorder {item}'"
+            },
+            "itemPickedUpLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'"
+                        }],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-picked-up-label",
+                "defaultValue": "'{item}, picked up. Position {position} of {total}. Press the arrow keys to move, Space or Enter to drop, Escape to cancel.'"
+            },
+            "itemMovedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, moved to position {position} of {total}'"
+                        }],
+                    "text": "Screen-reader announcement when a picked-up item is moved. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-moved-label",
+                "defaultValue": "'{item}, moved to position {position} of {total}'"
+            },
+            "itemDroppedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'{item}, dropped at position {position} of {total}'"
+                        }],
+                    "text": "Screen-reader announcement when a picked-up item is dropped. Pass a translated string to localize it; `{item}`, `{position}` and `{total}` are interpolated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "item-dropped-label",
+                "defaultValue": "'{item}, dropped at position {position} of {total}'"
+            },
+            "reorderCanceledLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Reorder canceled. {item} returned to position {position} of {total}'"
+                        }],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reorder-canceled-label",
+                "defaultValue": "'Reorder canceled. {item} returned to position {position} of {total}'"
             }
         };
     }
@@ -136,15 +663,42 @@ export class PdsSortable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when a sortable item is moved."
+                    "text": "Event emitted when a sortable item is moved, by dragging or from the keyboard. A keyboard move\ncarries the same fields as a drag (`item`, `from`, `to`, `oldIndex`, `newIndex`,\n`oldDraggableIndex`, `newDraggableIndex`), with the event that ended the move as\n`originalEvent` -- a `KeyboardEvent` for Space or Enter, but a `FocusEvent`, `PointerEvent` or\n`MouseEvent` when the drop instead comes from focus leaving the row, a drag taking over, or a\nscreen reader's browse-mode click."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "SortableEvent",
+                    "resolved": "SortableEvent",
+                    "references": {
+                        "SortableEvent": {
+                            "location": "import",
+                            "path": "sortablejs",
+                            "id": "../../node_modules/@types/sortablejs/index.d.ts::SortableEvent",
+                            "referenceLocation": "SortableEvent"
+                        }
+                    }
                 }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "handleType",
+                "methodName": "handleHandleTypeChange"
+            }, {
+                "propName": "handleLabel",
+                "methodName": "updateItems"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handlePointerDown",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }];
+    }
 }
-//# sourceMappingURL=pds-sortable.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=sortable-interface.js.map