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

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

@@ -1,111 +1,98 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2a33b470.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { s as sortableItemLabel } from './sortable-label-PItnzVVR.js';
+import { H as HostStylingKeeper } from './attributes-CD8knu3a.js';
+import { f as formatMessage } from './i18n-format-BJgZHCWe.js';
+import './keep-hydrated-BgNaWLoS.js';
 
 /**!
- * Sortable 1.15.2
+ * Sortable 1.15.7
  * @author	RubaXa   <trash@rubaxa.org>
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
  */
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  }
-  return target;
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return _typeof(obj);
+  return t;
 }
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
-  } else {
-    obj[key] = value;
   }
-  return obj;
+  return e;
 }
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return target;
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
 }
 
-var version = "1.15.2";
+var version = "1.15.7";
 
 function userAgent(pattern) {
   if (typeof window !== 'undefined' && window.navigator) {
@@ -148,7 +135,7 @@ function matches( /**HTMLElement*/el, /**String*/selector) {
   return false;
 }
 function getParentOrHost(el) {
-  return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode;
+  return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode;
 }
 function closest( /**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) {
   if (el) {
@@ -321,10 +308,8 @@ function isScrolledPast(el, elSide, parentSide) {
   while (parent) {
     var parentSideVal = getRect(parent)[parentSide],
       visible = void 0;
-    if (parentSide === 'top' || parentSide === 'left') {
+    {
       visible = elSideVal >= parentSideVal;
-    } else {
-      visible = elSideVal <= parentSideVal;
     }
     if (!visible) return parent;
     if (parent === getWindowScrollingElement()) break;
@@ -1084,7 +1069,8 @@ function Sortable(el, options) {
       x: 0,
       y: 0
     },
-    supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && !Safari,
+    // Disabled on Safari: #1571; Enabled on Safari IOS: #2244
+    supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && (!Safari || IOS),
     emptyInsertThreshold: 5
   };
   PluginManager.initializePlugins(this, el, defaults);
@@ -1195,7 +1181,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         pluginEvent('filter', _this, {
           evt: evt
         });
-        preventOnFilter && evt.cancelable && evt.preventDefault();
+        preventOnFilter && evt.preventDefault();
         return; // cancel dnd
       }
     } else if (filter) {
@@ -1217,7 +1203,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         }
       });
       if (filter) {
-        preventOnFilter && evt.cancelable && evt.preventDefault();
+        preventOnFilter && evt.preventDefault();
         return; // cancel dnd
       }
     }
@@ -1289,9 +1275,15 @@ Sortable.prototype = /** @lends Sortable.prototype */{
       on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent);
       on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);
       on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);
-      on(ownerDocument, 'mouseup', _this._onDrop);
-      on(ownerDocument, 'touchend', _this._onDrop);
-      on(ownerDocument, 'touchcancel', _this._onDrop);
+      if (options.supportPointer) {
+        on(ownerDocument, 'pointerup', _this._onDrop);
+        // Native D&D triggers pointercancel
+        !this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop);
+      } else {
+        on(ownerDocument, 'mouseup', _this._onDrop);
+        on(ownerDocument, 'touchend', _this._onDrop);
+        on(ownerDocument, 'touchcancel', _this._onDrop);
+      }
 
       // Make dragEl draggable (must be before delay for FireFox)
       if (FireFox && this.nativeDraggable) {
@@ -1311,9 +1303,14 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         // If the user moves the pointer or let go the click or touch
         // before the delay has been reached:
         // disable the delayed drag
-        on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
-        on(ownerDocument, 'touchend', _this._disableDelayedDrag);
-        on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
+        if (options.supportPointer) {
+          on(ownerDocument, 'pointerup', _this._disableDelayedDrag);
+          on(ownerDocument, 'pointercancel', _this._disableDelayedDrag);
+        } else {
+          on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
+          on(ownerDocument, 'touchend', _this._disableDelayedDrag);
+          on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
+        }
         on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);
         on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);
         options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);
@@ -1339,6 +1336,8 @@ Sortable.prototype = /** @lends Sortable.prototype */{
     off(ownerDocument, 'mouseup', this._disableDelayedDrag);
     off(ownerDocument, 'touchend', this._disableDelayedDrag);
     off(ownerDocument, 'touchcancel', this._disableDelayedDrag);
+    off(ownerDocument, 'pointerup', this._disableDelayedDrag);
+    off(ownerDocument, 'pointercancel', this._disableDelayedDrag);
     off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);
     off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);
     off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);
@@ -1359,7 +1358,6 @@ Sortable.prototype = /** @lends Sortable.prototype */{
     }
     try {
       if (document.selection) {
-        // Timeout neccessary for IE9
         _nextTick(function () {
           document.selection.empty();
         });
@@ -1424,7 +1422,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
           }
           target = parent; // store last element
         }
-        /* jshint boss:true */ while (parent = parent.parentNode);
+        /* jshint boss:true */ while (parent = getParentOrHost(parent));
       }
       _unhideGhostForTarget();
     }
@@ -1581,6 +1579,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
     _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt));
     on(document, 'selectstart', _this);
     moved = true;
+    window.getSelection().removeAllRanges();
     if (Safari) {
       css(document.body, 'user-select', 'none');
     }
@@ -1852,6 +1851,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
     off(ownerDocument, 'mouseup', this._onDrop);
     off(ownerDocument, 'touchend', this._onDrop);
     off(ownerDocument, 'pointerup', this._onDrop);
+    off(ownerDocument, 'pointercancel', this._onDrop);
     off(ownerDocument, 'touchcancel', this._onDrop);
     off(document, 'selectstart', this);
   },
@@ -2003,8 +2003,11 @@ Sortable.prototype = /** @lends Sortable.prototype */{
   _nulling: function _nulling() {
     pluginEvent('nulling', this);
     rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;
-    savedInputChecked.forEach(function (el) {
-      el.checked = true;
+    var el = this.el;
+    savedInputChecked.forEach(function (checkEl) {
+      if (el.contains(checkEl)) {
+        checkEl.checked = true;
+      }
     });
     savedInputChecked.length = lastDx = lastDy = 0;
   },
@@ -2330,7 +2333,8 @@ Sortable.utils = {
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
-  getChild: getChild
+  getChild: getChild,
+  expando: expando
 };
 
 /**
@@ -2649,23 +2653,191 @@ _extends(Remove, {
 Sortable.mount(new AutoScrollPlugin());
 Sortable.mount(Remove, Revert);
 
-const pdsSortableCss = ".pds-sortable.sc-pds-sortable-h{--border-radius:var(--pine-border-radius-050);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-sortable.pds-sortable--bordered.sc-pds-sortable-h{border:var(--border-default);border-radius:var(--border-radius)}";
-const PdsSortableStyle0 = pdsSortableCss;
+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) {
         registerInstance(this, hostRef);
-        this.pdsSortableItemMoved = createEvent(this, "pdsSortableItemMoved", 7);
+        this.pdsSortableItemMoved = createEvent(this, "pdsSortableItemMoved");
+        /**
+         * 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');
         }
@@ -2674,9 +2846,24 @@ const PdsSortable = class {
         }
         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) => {
@@ -2684,17 +2871,217 @@ 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);
         }
-        Sortable.create(this.el, sortableOptions);
+    }
+    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' })));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "handleDisabledChange": 0
+            }],
+        "handleType": [{
+                "handleHandleTypeChange": 0
+            }],
+        "handleLabel": [{
+                "updateItems": 0
+            }]
+    }; }
 };
-PdsSortable.style = PdsSortableStyle0;
+PdsSortable.style = pdsSortableCss();
 
 export { PdsSortable as pds_sortable };
-
-//# sourceMappingURL=pds-sortable.entry.js.map