@editora/ui-core 0.1.20 → 0.1.22

package/dist/sortable.esm.js

@@ -1,12 +1,28 @@
 import { E as ee } from "./ElementBase-YlTLMsGk.mjs";
-const te = 1, re = 44, ie = 72, se = `
+function te(l, e, t, r = 56, i = 18) {
+  if (!Number.isFinite(l) || !(t > e)) return 0;
+  const s = Math.min(r, (t - e) / 2);
+  return s <= 0 ? 0 : l < e + s ? -Math.ceil(i * Math.min(1, (e + s - l) / s)) : l > t - s ? Math.ceil(i * Math.min(1, (l - (t - s)) / s)) : 0;
+}
+const re = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
+function ie(l) {
+  let e = l;
+  for (; e; ) {
+    if (e = e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode, !(e instanceof HTMLElement)) continue;
+    if (e === e.ownerDocument.body || e === e.ownerDocument.documentElement) return null;
+    const { overflowY: t } = e.ownerDocument.defaultView?.getComputedStyle(e) ?? { overflowY: "" };
+    if (re.has(t) && e.scrollHeight > e.clientHeight) return e;
+  }
+  return null;
+}
+const se = 1, oe = 44, ne = 72, ae = `
   :host {
     --ui-sortable-accent: var(--ui-color-primary, #2563eb);
     --ui-sortable-surface: var(--ui-color-surface, #ffffff);
     --ui-sortable-surface-muted: color-mix(in srgb, var(--ui-sortable-surface) 92%, #eff6ff);
     --ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
     --ui-sortable-text: var(--ui-color-text, #0f172a);
-    --ui-sortable-muted: var(--ui-color-muted, #64748b);
+    --ui-sortable-muted: var(--ui-color-muted, #526175);
     --ui-sortable-shadow:
       0 1px 3px rgba(15, 23, 42, 0.06),
       0 16px 34px rgba(15, 23, 42, 0.08);
@@ -103,6 +119,20 @@ const te = 1, re = 44, ie = 72, se = `
     align-items: stretch;
   }
 
+  /* The cards live inside one root .tree wrapper, which is a vertical grid. Without this the
+     lane was a flex row holding a single column, so a "horizontal" list rendered vertically. */
+  .list[data-orientation="horizontal"] .items > .tree {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    min-inline-size: min-content;
+  }
+
+  .list[data-orientation="horizontal"] .items > .tree > .item-shell {
+    flex: 0 0 auto;
+    min-inline-size: min(220px, 70vw);
+  }
+
   .list[data-disabled="true"] {
     opacity: 0.68;
   }
@@ -722,7 +752,7 @@ const te = 1, re = 44, ie = 72, se = `
     }
   }
 `;
-function V(l) {
+function K(l) {
   if (!l) return [];
   try {
     const e = JSON.parse(l);
@@ -734,7 +764,7 @@ function V(l) {
 function I(l) {
   return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function D(l, e) {
+function k(l, e) {
   return `${l}::${e ?? "__root__"}`;
 }
 function j(l) {
@@ -743,98 +773,98 @@ function j(l) {
 function B(l, e) {
   return j(l) === j(e);
 }
-function oe(l) {
+function le(l) {
   if (!l || l === "none")
     return { x: 1, y: 1 };
   const e = l.match(/^matrix3d\((.+)\)$/);
   if (e) {
-    const t = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
-    if (t.length === 16 && t.every((i) => Number.isFinite(i)))
+    const r = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
+    if (r.length === 16 && r.every((i) => Number.isFinite(i)))
       return {
-        x: t[0] || 1,
-        y: t[5] || 1
+        x: r[0] || 1,
+        y: r[5] || 1
       };
   }
-  const r = l.match(/^matrix\((.+)\)$/);
-  if (r) {
-    const t = r[1].split(",").map((i) => Number.parseFloat(i.trim()));
-    if (t.length === 6 && t.every((i) => Number.isFinite(i))) {
-      const [i, s, a, n] = t;
+  const t = l.match(/^matrix\((.+)\)$/);
+  if (t) {
+    const r = t[1].split(",").map((i) => Number.parseFloat(i.trim()));
+    if (r.length === 6 && r.every((i) => Number.isFinite(i))) {
+      const [i, s, n, a] = r;
       return {
         x: Math.sqrt(i * i + s * s) || 1,
-        y: Math.sqrt(a * a + n * n) || 1
+        y: Math.sqrt(n * n + a * a) || 1
       };
     }
   }
   return { x: 1, y: 1 };
 }
-function ne(l) {
+function de(l) {
   return l === "item" ? "item" : "handle";
 }
-function A(l) {
+function P(l) {
   return { ...l };
 }
-function ae(l, e, r, t, i, s) {
-  const a = P(l), n = $(l), d = /* @__PURE__ */ new Set(), o = [], u = (g) => {
-    const S = a.get(g);
-    !S || d.has(g) || (d.add(g), o.push(g), (n.get(D(S.listId, g)) || []).forEach(u));
+function ce(l, e, t, r, i, s) {
+  const n = T(l), a = E(l), d = /* @__PURE__ */ new Set(), o = [], u = (g) => {
+    const x = n.get(g);
+    !x || d.has(g) || (d.add(g), o.push(g), (a.get(k(x.listId, g)) || []).forEach(u));
   };
-  t.forEach(u);
-  const p = l.map(A), m = p.filter((g) => d.has(g.id)), _ = i ? p.map(A) : p.filter((g) => !d.has(g.id)), f = i ? m.map((g) => s(g, o)) : m.map(A), v = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new Map();
-  i && m.forEach((g, S) => {
-    v.set(g.id, f[S].id), b.set(f[S].id, g.id);
-  }), f.forEach((g) => {
-    const S = i ? b.get(g.id) : g.id, T = S ? a.get(S) : null;
-    T && (i && (g.parentId = T.parentId && v.has(T.parentId) && v.get(T.parentId) || null), g.listId = r.listId);
+  r.forEach(u);
+  const c = l.map(P), h = c.filter((g) => d.has(g.id)), _ = i ? c.map(P) : c.filter((g) => !d.has(g.id)), b = i ? h.map((g) => s(g, o)) : h.map(P), S = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
+  i && h.forEach((g, x) => {
+    S.set(g.id, b[x].id), m.set(b[x].id, g.id);
+  }), b.forEach((g) => {
+    const x = i ? m.get(g.id) : g.id, M = x ? n.get(x) : null;
+    M && (i && (g.parentId = M.parentId && S.has(M.parentId) && S.get(M.parentId) || null), g.listId = t.listId);
   });
-  const y = t.map((g) => v.get(g) || g), x = [..._, ...f], z = $(_), k = D(r.listId, r.parentId), h = [...z.get(k) || []], E = r.beforeId ? h.indexOf(r.beforeId) : h.length, H = E >= 0 ? E : h.length;
-  h.splice(H, 0, ...y), z.set(k, h), $(f).forEach((g, S) => {
-    const [, T] = S.split("::");
-    (T || "") !== "__root__" && z.set(S, [...g]);
+  const v = r.map((g) => S.get(g) || g), D = [..._, ...b], A = E(_), z = k(t.listId, t.parentId), f = [...A.get(z) || []], y = t.beforeId ? f.indexOf(t.beforeId) : f.length, R = y >= 0 ? y : f.length;
+  f.splice(R, 0, ...v), A.set(z, f), E(b).forEach((g, x) => {
+    const [, M] = x.split("::");
+    (M || "") !== "__root__" && A.set(x, [...g]);
   });
-  const F = P(x);
-  y.forEach((g) => {
-    const S = F.get(g);
-    S && (S.parentId = r.parentId, S.listId = r.listId);
+  const O = T(D);
+  v.forEach((g) => {
+    const x = O.get(g);
+    x && (x.parentId = t.parentId, x.listId = t.listId);
   });
-  const M = [], O = /* @__PURE__ */ new Set(), q = (g, S) => {
-    (z.get(D(g, S)) || []).forEach((R, K) => {
-      const c = F.get(R);
-      !c || O.has(R) || (O.add(R), c.listId = g, c.parentId = S, c.order = K, M.push(c), q(g, R));
+  const L = [], q = /* @__PURE__ */ new Set(), H = (g, x) => {
+    (A.get(k(g, x)) || []).forEach((C, G) => {
+      const p = O.get(C);
+      !p || q.has(C) || (q.add(C), p.listId = g, p.parentId = x, p.order = G, L.push(p), H(g, C));
     });
   };
-  return e.forEach((g) => q(g.id, null)), x.forEach((g) => {
-    O.has(g.id) || (g.parentId = null, M.push(g));
+  return e.forEach((g) => H(g.id, null)), D.forEach((g) => {
+    q.has(g.id) || (g.parentId = null, L.push(g));
   }), {
-    items: M.map(A),
-    insertedRootIds: y
+    items: L.map(P),
+    insertedRootIds: v
   };
 }
-function $(l) {
+function E(l) {
   const e = /* @__PURE__ */ new Map();
-  return l.forEach((r) => {
-    const t = D(r.listId, r.parentId), i = e.get(t);
-    i ? i.push(r.id) : e.set(t, [r.id]);
+  return l.forEach((t) => {
+    const r = k(t.listId, t.parentId), i = e.get(r);
+    i ? i.push(t.id) : e.set(r, [t.id]);
   }), e;
 }
-function P(l) {
+function T(l) {
   return new Map(l.map((e) => [e.id, e]));
 }
-function X(l) {
-  const e = /* @__PURE__ */ new Set(), r = [];
-  return l.forEach((t, i) => {
-    const s = typeof t?.id == "string" && t.id.trim() ? t.id.trim() : `list-${i + 1}`;
-    e.has(s) || (e.add(s), r.push({
+function Y(l) {
+  const e = /* @__PURE__ */ new Set(), t = [];
+  return l.forEach((r, i) => {
+    const s = typeof r?.id == "string" && r.id.trim() ? r.id.trim() : `list-${i + 1}`;
+    e.has(s) || (e.add(s), t.push({
       id: s,
-      label: typeof t?.label == "string" && t.label.trim() ? t.label.trim() : `List ${i + 1}`,
-      description: typeof t?.description == "string" ? t.description : "",
-      emptyLabel: typeof t?.emptyLabel == "string" && t.emptyLabel.trim() ? t.emptyLabel.trim() : "Drop items here.",
-      orientation: t?.orientation === "horizontal" ? "horizontal" : "vertical",
-      disabled: !!t?.disabled,
-      cloneOnDrag: !!t?.cloneOnDrag,
-      accepts: Array.isArray(t?.accepts) ? t.accepts.filter((a) => typeof a == "string" && a.trim().length > 0) : void 0
+      label: typeof r?.label == "string" && r.label.trim() ? r.label.trim() : `List ${i + 1}`,
+      description: typeof r?.description == "string" ? r.description : "",
+      emptyLabel: typeof r?.emptyLabel == "string" && r.emptyLabel.trim() ? r.emptyLabel.trim() : "Drop items here.",
+      orientation: r?.orientation === "horizontal" ? "horizontal" : "vertical",
+      disabled: !!r?.disabled,
+      cloneOnDrag: !!r?.cloneOnDrag,
+      accepts: Array.isArray(r?.accepts) ? r.accepts.filter((n) => typeof n == "string" && n.trim().length > 0) : void 0
     }));
-  }), r.length ? r : [{
+  }), t.length ? t : [{
     id: "default",
     label: "Items",
     description: "",
@@ -844,15 +874,15 @@ function X(l) {
     cloneOnDrag: !1
   }];
 }
-function Y(l, e) {
-  const r = new Set(l.map((o) => o.id)), t = [];
+function U(l, e) {
+  const t = new Set(l.map((o) => o.id)), r = [];
   e.forEach((o, u) => {
-    const p = typeof o?.id == "string" && o.id.trim() ? o.id.trim() : "", m = typeof o?.label == "string" && o.label.trim() ? o.label.trim() : "";
-    if (!p || !m) return;
-    const _ = typeof o?.listId == "string" && r.has(o.listId) ? o.listId : l[0].id;
-    t.push({
-      id: p,
-      label: m,
+    const c = typeof o?.id == "string" && o.id.trim() ? o.id.trim() : "", h = typeof o?.label == "string" && o.label.trim() ? o.label.trim() : "";
+    if (!c || !h) return;
+    const _ = typeof o?.listId == "string" && t.has(o.listId) ? o.listId : l[0].id;
+    r.push({
+      id: c,
+      label: h,
       listId: _,
       parentId: typeof o?.parentId == "string" && o.parentId.trim() ? o.parentId.trim() : null,
       description: typeof o?.description == "string" ? o.description : "",
@@ -863,27 +893,27 @@ function Y(l, e) {
       hidden: !!o?.hidden
     });
   });
-  const i = new Map(t.map((o) => [o.id, o]));
-  t.forEach((o) => {
+  const i = new Map(r.map((o) => [o.id, o]));
+  r.forEach((o) => {
     if (!o.parentId) return;
     const u = i.get(o.parentId);
     (!u || u.id === o.id || u.listId !== o.listId) && (o.parentId = null);
   });
   const s = /* @__PURE__ */ new Map();
-  t.forEach((o) => {
-    const u = D(o.listId, o.parentId), p = s.get(u);
-    p ? p.push(o) : s.set(u, [o]);
-  }), s.forEach((o) => o.sort((u, p) => u.order - p.order || u.label.localeCompare(p.label)));
-  const a = [], n = /* @__PURE__ */ new Set(), d = (o, u) => {
-    (s.get(D(o, u)) || []).forEach((m, _) => {
-      n.has(m.id) || (n.add(m.id), m.order = _, a.push(m), d(o, m.id));
+  r.forEach((o) => {
+    const u = k(o.listId, o.parentId), c = s.get(u);
+    c ? c.push(o) : s.set(u, [o]);
+  }), s.forEach((o) => o.sort((u, c) => u.order - c.order || u.label.localeCompare(c.label)));
+  const n = [], a = /* @__PURE__ */ new Set(), d = (o, u) => {
+    (s.get(k(o, u)) || []).forEach((h, _) => {
+      a.has(h.id) || (a.add(h.id), h.order = _, n.push(h), d(o, h.id));
     });
   };
-  return l.forEach((o) => d(o.id, null)), t.forEach((o) => {
-    n.has(o.id) || (o.parentId = null, a.push(o));
-  }), a.map(A);
+  return l.forEach((o) => d(o.id, null)), r.forEach((o) => {
+    a.has(o.id) || (o.parentId = null, n.push(o));
+  }), n.map(P);
 }
-function de(l) {
+function ue(l) {
   return JSON.stringify(l.map((e) => ({
     id: e.id,
     label: e.label,
@@ -897,7 +927,7 @@ function de(l) {
     hidden: e.hidden
   })));
 }
-function le(l) {
+function pe(l) {
   return JSON.stringify(l.map((e) => ({
     id: e.id,
     label: e.label,
@@ -909,53 +939,65 @@ function le(l) {
     accepts: e.accepts
   })));
 }
-function U(l) {
+function X(l) {
   return JSON.stringify(l);
 }
 function J(l) {
-  const e = /* @__PURE__ */ new Map(), r = l.map((t) => {
-    const i = D(t.listId, t.parentId), s = e.get(i) ?? 0;
+  const e = /* @__PURE__ */ new Map(), t = l.map((r) => {
+    const i = k(r.listId, r.parentId), s = e.get(i) ?? 0;
     return e.set(i, s + 1), {
-      id: t.id,
-      listId: t.listId,
-      parentId: t.parentId,
+      id: r.id,
+      listId: r.listId,
+      parentId: r.parentId,
       index: s
     };
   });
   return {
-    version: te,
-    records: r
+    version: se,
+    records: t
   };
 }
 function W(l, e) {
   return e ? `${l.label} ${l.description}`.toLowerCase().includes(e.toLowerCase()) : !0;
 }
-function Q(l, e, r, t, i) {
-  const s = P(l), a = $(l), n = /* @__PURE__ */ new Map(), d = (p, m) => {
-    const _ = [...a.get(D(p, m)) || []];
-    return i === "label" && _.sort((f, v) => {
-      const b = s.get(f), y = s.get(v);
-      return !b || !y ? 0 : b.label.localeCompare(y.label);
+function Q(l, e, t, r, i) {
+  const s = T(l), n = E(l), a = /* @__PURE__ */ new Map(), d = (c, h) => {
+    const _ = [...n.get(k(c, h)) || []];
+    return i === "label" && _.sort((b, S) => {
+      const m = s.get(b), v = s.get(S);
+      return !m || !v ? 0 : m.label.localeCompare(v.label);
     }), _;
-  }, o = (p, m, _) => {
-    const f = [];
-    return d(p, m).forEach((v) => {
-      const b = s.get(v);
-      if (!b || b.hidden) return;
-      const y = o(p, b.id);
-      !W(b, t) && y.length === 0 || (f.push({
-        id: b.id,
-        disabled: b.disabled
-      }), y.length && f.push(...y));
-    }), f;
+  }, o = (c, h, _) => {
+    const b = [];
+    return d(c, h).forEach((S) => {
+      const m = s.get(S);
+      if (!m || m.hidden) return;
+      const v = o(c, m.id);
+      !W(m, r) && v.length === 0 || (b.push({
+        id: m.id,
+        disabled: m.disabled
+      }), v.length && b.push(...v));
+    }), b;
   };
-  return Array.from(new Set(l.map((p) => p.listId))).forEach((p) => {
-    n.set(p, o(p, null));
-  }), n;
+  return Array.from(new Set(l.map((c) => c.listId))).forEach((c) => {
+    a.set(c, o(c, null));
+  }), a;
 }
-class ce extends ee {
+class he extends ee {
   constructor() {
-    super(), this._lists = X([]), this._items = [], this._selection = [], this._focusedId = null, this._rangeAnchorId = null, this._dragState = null, this._liveMessage = "Sortable list ready.", this._lastListsAttr = null, this._lastItemsAttr = null, this._lastSelectionAttr = null, this._hydratedPersistKey = null, this._cloneSeed = 1, this._dragImage = null, this._dragPreviewOverlay = null, this._pendingFocusId = null, this._pointerGesture = null, this._pendingDropTarget = null, this._suppressAttributeRender = !1, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerCancel = this._onPointerCancel.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this);
+    super(), this._lists = Y([]), this._items = [], this._selection = [], this._focusedId = null, this._rangeAnchorId = null, this._dragState = null, this._liveMessage = "Sortable list ready.", this._lastListsAttr = null, this._lastItemsAttr = null, this._lastSelectionAttr = null, this._hydratedPersistKey = null, this._cloneSeed = 1, this._dragImage = null, this._dragPreviewOverlay = null, this._pendingFocusId = null, this._pointerGesture = null, this._pendingDropTarget = null, this._suppressAttributeRender = !1, this._autoScrollFrame = 0, this._autoScrollPoint = null, this._autoScrollTick = () => {
+      this._autoScrollFrame = 0;
+      const e = this._autoScrollPoint;
+      if (!e || !this._dragState || this._dragState.keyboard) return;
+      const t = this.ownerDocument?.defaultView, r = ie(this), i = r ? r.getBoundingClientRect() : null, s = Math.max(0, i ? i.top : 0), n = Math.min(t?.innerHeight ?? 0, i ? i.bottom : 1 / 0), a = te(e.y, s, n);
+      if (a) {
+        if (r ? r.scrollTop += a : t?.scrollBy(0, a), !this._dragState.committed) {
+          const d = this._dropTargetFromPoint(e.x, e.y), o = d && this._canDrop(d, this._dragState.movedRootIds) ? d : null;
+          this._queueDropTarget(o, performance.now());
+        }
+        this._autoScrollFrame = requestAnimationFrame(this._autoScrollTick);
+      }
+    }, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerCancel = this._onPointerCancel.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -977,27 +1019,27 @@ class ce extends ee {
       "disabled"
     ];
   }
-  shouldRenderOnAttributeChange(e, r, t) {
+  shouldRenderOnAttributeChange(e, t, r) {
     return this._suppressAttributeRender ? !["lists", "items", "selection"].includes(e) : !0;
   }
-  attributeChangedCallback(e, r, t) {
-    if (r !== t && this.isConnected) {
+  attributeChangedCallback(e, t, r) {
+    if (t !== r && this.isConnected) {
       if (e === "selection" && !this._suppressAttributeRender && this._canSyncInteractiveStateInPlace()) {
-        this._syncSelectionFromAttribute(t ?? null), this._syncSelectionVisualState();
+        this._syncSelectionFromAttribute(r ?? null), this._syncSelectionVisualState();
         return;
       }
       if (e === "show-selection-badge" && this._canSyncInteractiveStateInPlace()) {
         this._syncSelectionVisualState();
         return;
       }
-      super.attributeChangedCallback(e, r, t);
+      super.attributeChangedCallback(e, t, r);
     }
   }
   connectedCallback() {
     super.connectedCallback(), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("dragstart", this._onDragStart), this.root.addEventListener("dragover", this._onDragOver), this.root.addEventListener("drop", this._onDrop), this.root.addEventListener("dragend", this._onDragEnd), this.root.addEventListener("pointerdown", this._onPointerDown), this.root.addEventListener("focusin", this._onFocusIn), this.ownerDocument?.addEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.addEventListener("pointermove", this._onPointerMove, !0), this.ownerDocument?.addEventListener("pointerup", this._onPointerUp, !0), this.ownerDocument?.addEventListener("pointercancel", this._onPointerCancel, !0);
   }
   disconnectedCallback() {
-    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("dragstart", this._onDragStart), this.root.removeEventListener("dragover", this._onDragOver), this.root.removeEventListener("drop", this._onDrop), this.root.removeEventListener("dragend", this._onDragEnd), this.root.removeEventListener("pointerdown", this._onPointerDown), this.root.removeEventListener("focusin", this._onFocusIn), this.ownerDocument?.removeEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.removeEventListener("pointermove", this._onPointerMove, !0), this.ownerDocument?.removeEventListener("pointerup", this._onPointerUp, !0), this.ownerDocument?.removeEventListener("pointercancel", this._onPointerCancel, !0), this._removeDragPreviewOverlay(), this._removeDragImage(), super.disconnectedCallback();
+    this.root.removeEventListener("click", this._onClick), this.root.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("dragstart", this._onDragStart), this.root.removeEventListener("dragover", this._onDragOver), this.root.removeEventListener("drop", this._onDrop), this.root.removeEventListener("dragend", this._onDragEnd), this.root.removeEventListener("pointerdown", this._onPointerDown), this.root.removeEventListener("focusin", this._onFocusIn), this.ownerDocument?.removeEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.removeEventListener("pointermove", this._onPointerMove, !0), this.ownerDocument?.removeEventListener("pointerup", this._onPointerUp, !0), this.ownerDocument?.removeEventListener("pointercancel", this._onPointerCancel, !0), this._stopAutoScroll(), this._removeDragPreviewOverlay(), this._removeDragImage(), super.disconnectedCallback();
   }
   get lists() {
     return this._lists.map((e) => ({ ...e }));
@@ -1039,66 +1081,66 @@ class ce extends ee {
     this._cancelDrag(!0);
   }
   focusItem(e) {
-    this._items.some((r) => r.id === e) && (this._focusedId = e, this._pendingFocusId = e, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
+    this._items.some((t) => t.id === e) && (this._focusedId = e, this._pendingFocusId = e, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
   }
   moveSelection(e) {
     this._syncSelectionFromAttribute(this.getAttribute("selection"));
-    const r = this._selectedRootIds();
-    r.length && this._commitMove({
+    const t = this._selectedRootIds();
+    t.length && this._commitMove({
       listId: e.targetListId,
       parentId: e.parentId ?? null,
       beforeId: e.beforeId ?? null,
       mode: e.mode ?? (e.parentId ? "inside" : "before")
-    }, r, !!e.clone, e.source ?? "api");
+    }, t, !!e.clone, e.source ?? "api");
   }
   getPersistenceSnapshot() {
     return J(this._items);
   }
   render() {
     this._syncStateFromAttributes();
-    const e = this._measureItemShellRects(), r = new Set(this._draggingIds()), t = new Set(this._selection), s = !!this._dragState?.keyboard ? this._projectedMoveResult() : null, a = s?.items || this._items, n = new Set(s?.insertedRootIds || []), d = !!this._dragState && !this._dragState.keyboard && !!this._dragState.dropTarget, o = Q(a, t, r, this.filterQuery, this.sort), u = this._resolvedFocusedId(o), p = this._isDragLocked(), m = this._selection.length, _ = this.getAttribute("allow-nesting") !== "false", f = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", v = this._dropzoneStyle(), b = this.getAttribute("show-selection-badge") !== "false", y = this._dragHandleMode(), x = this._usesCustomHandleSelector(), z = p ? this.sort === "label" ? "Dragging is paused while alphabetical sorting is active." : this.filterQuery && !this.hasAttribute("allow-filtered-drag") ? "Dragging is paused while the list is filtered." : "Dragging is currently disabled." : this._dragState?.keyboard ? "Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel." : y === "item" ? "Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering." : x ? "Use your custom drag handle element, or press Space on a focused item to start keyboard reordering." : "Use the handle to drag, or press Space on a focused item to start keyboard reordering.", k = `
-      <style>${se}</style>
+    const e = this._measureItemShellRects(), t = new Set(this._draggingIds()), r = new Set(this._selection), s = !!this._dragState?.keyboard ? this._projectedMoveResult() : null, n = s?.items || this._items, a = new Set(s?.insertedRootIds || []), d = !!this._dragState && !this._dragState.keyboard && !!this._dragState.dropTarget, o = Q(n, r, t, this.filterQuery, this.sort), u = this._resolvedFocusedId(o), c = this._isDragLocked(), h = this._selection.length, _ = this.getAttribute("allow-nesting") !== "false", b = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", S = this._dropzoneStyle(), m = this.getAttribute("show-selection-badge") !== "false", v = this._dragHandleMode(), D = this._usesCustomHandleSelector(), A = c ? this.sort === "label" ? "Dragging is paused while alphabetical sorting is active." : this.filterQuery && !this.hasAttribute("allow-filtered-drag") ? "Dragging is paused while the list is filtered." : "Dragging is currently disabled." : this._dragState?.keyboard ? "Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel." : v === "item" ? "Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering." : D ? "Use your custom drag handle element, or press Space on a focused item to start keyboard reordering." : "Use the handle to drag, or press Space on a focused item to start keyboard reordering.", z = `
+      <style>${ae}</style>
       <div
         class="root"
         part="root"
-        data-drag-locked="${p}"
-        data-drag-preview="${n.size || d ? "true" : "false"}"
-        data-drop-indicator-visibility="${f}"
-        data-dropzone-style="${v}"
+        data-drag-locked="${c}"
+        data-drag-preview="${a.size || d ? "true" : "false"}"
+        data-drop-indicator-visibility="${b}"
+        data-dropzone-style="${S}"
       >
         <div class="toolbar" part="toolbar">
-          <div class="helper">${I(z)}</div>
+          <div class="helper" id="ui-sortable-helper">${I(A)}</div>
           <div class="helper selection-summary">
-            <span class="selection-pill" part="selection-count">${m}</span>
-            <span class="selection-text">${m === 1 ? "item selected" : "items selected"}</span>
+            <span class="selection-pill" part="selection-count">${h}</span>
+            <span class="selection-text">${h === 1 ? "item selected" : "items selected"}</span>
           </div>
         </div>
         <div class="lists" part="lists">
-          ${this._lists.map((h) => {
-      const E = o.get(h.id) || [], H = E.length ? this._renderListTree(a, h, u, r, _, n, b) : "", L = h.disabled ? "This list is read-only." : h.cloneOnDrag ? "Dragging from this list creates a copy." : h.accepts?.length ? `Accepts drops from: ${h.accepts.join(", ")}` : "";
+          ${this._lists.map((f) => {
+      const y = o.get(f.id) || [], R = y.length ? this._renderListTree(n, f, u, t, _, a, m) : "", $ = f.disabled ? "This list is read-only." : f.cloneOnDrag ? "Dragging from this list creates a copy." : f.accepts?.length ? `Accepts drops from: ${f.accepts.join(", ")}` : "";
       return `
               <section
                 class="list"
                 part="list"
-                data-list-id="${I(h.id)}"
-                data-orientation="${h.orientation}"
-                data-disabled="${h.disabled}"
-                aria-label="${I(h.label)}"
+                data-list-id="${I(f.id)}"
+                data-orientation="${f.orientation}"
+                data-disabled="${f.disabled}"
+                aria-label="${I(f.label)}"
               >
                 <header class="list-header">
-                  <div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(h.id)}"></div>
+                  <div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(f.id)}"></div>
                   <div class="list-default-header">
                     <div class="list-topline">
-                      <div class="list-label">${I(h.label)}</div>
-                      <span class="list-count">${E.length}</span>
+                      <div class="list-label">${I(f.label)}</div>
+                      <span class="list-count">${y.length}</span>
                     </div>
-                    ${h.description ? `<div class="list-description">${I(h.description)}</div>` : ""}
-                    ${L ? `<div class="list-helper">${I(L)}</div>` : ""}
+                    ${f.description ? `<div class="list-description">${I(f.description)}</div>` : ""}
+                    ${$ ? `<div class="list-helper">${I($)}</div>` : ""}
                   </div>
                 </header>
-                <div class="items" role="listbox" aria-multiselectable="true">
-                  ${H || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${I(h.id)}"></div><div class="empty">${I(h.emptyLabel)}</div>${this._renderDropzone({
-        listId: h.id,
+                <div class="items" role="${y.length ? "listbox" : "group"}" ${y.length ? 'aria-multiselectable="true"' : ""} aria-label="${I(f.label)}" aria-describedby="ui-sortable-helper">
+                  ${R || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${I(f.id)}"></div><div class="empty">${I(f.emptyLabel)}</div>${this._renderDropzone({
+        listId: f.id,
         parentId: null,
         beforeId: null,
         mode: "before"
@@ -1111,67 +1153,67 @@ class ce extends ee {
         <div class="sr-only" aria-live="polite" aria-atomic="true">${I(this._liveMessage)}</div>
       </div>
     `;
-    this.setContent(k), queueMicrotask(() => {
+    this.setContent(z), queueMicrotask(() => {
       this._restorePendingFocus(), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._updatePointerDragPreview(), this._animateItemShellReflow(e);
     });
   }
   _syncStateFromAttributes() {
     const e = this.getAttribute("lists");
-    e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists = X(V(e)));
-    const r = this.getAttribute("items");
-    if (r !== this._lastItemsAttr) {
-      this._lastItemsAttr = r, this._items = Y(this._lists, V(r));
+    e !== this._lastListsAttr && (this._lastListsAttr = e, this._lists = Y(K(e)));
+    const t = this.getAttribute("items");
+    if (t !== this._lastItemsAttr) {
+      this._lastItemsAttr = t, this._items = U(this._lists, K(t));
       const i = this.getAttribute("persist-key");
       i && this._hydratedPersistKey !== i && (this._items = this._restorePersistedItems(i, this._items), this._hydratedPersistKey = i);
     }
-    const t = this.getAttribute("selection");
-    t !== this._lastSelectionAttr && this._syncSelectionFromAttribute(t), this._focusedId || (this._focusedId = this._items.find((i) => !i.hidden)?.id || null);
+    const r = this.getAttribute("selection");
+    r !== this._lastSelectionAttr && this._syncSelectionFromAttribute(r), this._focusedId || (this._focusedId = this._items.find((i) => !i.hidden)?.id || null);
   }
-  _restorePersistedItems(e, r) {
+  _restorePersistedItems(e, t) {
     try {
-      const t = window.localStorage.getItem(e);
-      if (!t) return r;
-      const i = JSON.parse(t);
-      if (!i || typeof i != "object" || !Array.isArray(i.records)) return r;
-      const s = new Map(i.records.map((n) => [n.id, n])), a = r.map((n, d) => {
-        const o = s.get(n.id);
+      const r = window.localStorage.getItem(e);
+      if (!r) return t;
+      const i = JSON.parse(r);
+      if (!i || typeof i != "object" || !Array.isArray(i.records)) return t;
+      const s = new Map(i.records.map((a) => [a.id, a])), n = t.map((a, d) => {
+        const o = s.get(a.id);
         return o ? {
-          ...n,
-          listId: this._lists.some((u) => u.id === o.listId) ? o.listId : n.listId,
+          ...a,
+          listId: this._lists.some((u) => u.id === o.listId) ? o.listId : a.listId,
           parentId: typeof o.parentId == "string" ? o.parentId : null,
           order: Number.isFinite(o.index) ? o.index : d
-        } : { ...n, order: d };
+        } : { ...a, order: d };
       });
-      return Y(this._lists, a);
+      return U(this._lists, n);
     } catch {
-      return r;
+      return t;
     }
   }
   _resolvedFocusedId(e) {
-    const r = new Set(Array.from(e.values()).flat().map((i) => i.id));
-    return this._focusedId && r.has(this._focusedId) ? this._focusedId : Array.from(e.values()).flat().find((i) => !i.disabled)?.id || null;
+    const t = new Set(Array.from(e.values()).flat().map((i) => i.id));
+    return this._focusedId && t.has(this._focusedId) ? this._focusedId : Array.from(e.values()).flat().find((i) => !i.disabled)?.id || null;
   }
   _restorePendingFocus() {
     const e = this._pendingFocusId || this._focusedId;
     if (!e) return;
-    const r = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"'), t = this.root.querySelector(`.item[data-id="${r}"]`);
-    t && (document.activeElement !== t && t.focus({ preventScroll: !0 }), this._pendingFocusId = null);
+    const t = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"'), r = this.root.querySelector(`.item[data-id="${t}"]`);
+    r && (document.activeElement !== r && r.focus({ preventScroll: !0 }), this._pendingFocusId = null);
   }
   _escapeSelectorValue(e) {
     return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"');
   }
   _findDropzone(e) {
-    const r = this._escapeSelectorValue(e.listId), t = this._escapeSelectorValue(e.parentId ?? ""), i = this._escapeSelectorValue(e.beforeId ?? ""), s = this._escapeSelectorValue(e.mode);
+    const t = this._escapeSelectorValue(e.listId), r = this._escapeSelectorValue(e.parentId ?? ""), i = this._escapeSelectorValue(e.beforeId ?? ""), s = this._escapeSelectorValue(e.mode);
     return this.root.querySelector(
-      `.dropzone[data-list-id="${r}"][data-parent-id="${t}"][data-before-id="${i}"][data-mode="${s}"]`
+      `.dropzone[data-list-id="${t}"][data-parent-id="${r}"][data-before-id="${i}"][data-mode="${s}"]`
     );
   }
   _findItemElement(e) {
-    const r = this._escapeSelectorValue(e);
-    return this.root.querySelector(`.item[data-id="${r}"]`);
+    const t = this._escapeSelectorValue(e);
+    return this.root.querySelector(`.item[data-id="${t}"]`);
   }
   _dragHandleMode() {
-    return ne(this.getAttribute("drag-handle-mode"));
+    return de(this.getAttribute("drag-handle-mode"));
   }
   _dropzoneStyle() {
     return this.getAttribute("dropzone-style") === "container" ? "container" : "indicator";
@@ -1180,15 +1222,15 @@ class ce extends ee {
     return !!this.getAttribute("drag-handle-selector")?.trim();
   }
   _dragActivatorFromPath(e) {
-    const r = e.find((a) => a instanceof HTMLElement && !!a.getAttribute("data-drag-trigger"));
-    if (!r) return null;
-    const t = r.getAttribute("data-drag-trigger"), i = t === "item" ? "item" : t === "custom" ? "custom" : "handle", s = r.getAttribute("data-id") || r.closest(".item[data-id]")?.getAttribute("data-id");
-    return s ? { element: r, id: s, kind: i } : null;
+    const t = e.find((n) => n instanceof HTMLElement && !!n.getAttribute("data-drag-trigger"));
+    if (!t) return null;
+    const r = t.getAttribute("data-drag-trigger"), i = r === "item" ? "item" : r === "custom" ? "custom" : "handle", s = t.getAttribute("data-id") || t.closest(".item[data-id]")?.getAttribute("data-id");
+    return s ? { element: t, id: s, kind: i } : null;
   }
-  _setDropTargetVisualState(e, r) {
+  _setDropTargetVisualState(e, t) {
     if (!e) return;
-    const t = this._findDropzone(e);
-    t && (t.setAttribute("data-active", r ? "true" : "false"), r ? this._syncDropzoneContainerSize(t, e) : this._clearDropzoneContainerSize(t)), e.mode === "inside" && e.parentId && this._findItemElement(e.parentId)?.setAttribute("data-drop-inside-active", r ? "true" : "false");
+    const r = this._findDropzone(e);
+    r && (r.setAttribute("data-active", t ? "true" : "false"), t ? this._syncDropzoneContainerSize(r, e) : this._clearDropzoneContainerSize(r)), e.mode === "inside" && e.parentId && this._findItemElement(e.parentId)?.setAttribute("data-drop-inside-active", t ? "true" : "false");
   }
   _applyCurrentDropTargetVisualState(e) {
     this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(this._dragState?.dropTarget ?? null, !0);
@@ -1208,52 +1250,52 @@ class ce extends ee {
   }
   _syncSelectionFromAttribute(e) {
     this._lastSelectionAttr = e;
-    const r = new Set(this._items.map((t) => t.id));
-    this._selection = V(e).filter((t) => r.has(t)), !this._selection.length && this._focusedId && !r.has(this._focusedId) && (this._focusedId = null);
+    const t = new Set(this._items.map((r) => r.id));
+    this._selection = K(e).filter((r) => t.has(r)), !this._selection.length && this._focusedId && !t.has(this._focusedId) && (this._focusedId = null);
   }
   _syncSelectionVisualState() {
-    const e = new Set(this._selection), r = this.getAttribute("show-selection-badge") !== "false";
+    const e = new Set(this._selection), t = this.getAttribute("show-selection-badge") !== "false";
     this.root.querySelectorAll(".item[data-id]").forEach((s) => {
-      const a = s.getAttribute("data-id");
-      if (!a) return;
-      const n = e.has(a), d = this._focusedId === a;
-      s.setAttribute("data-selected", n ? "true" : "false"), s.setAttribute("aria-selected", n ? "true" : "false"), s.setAttribute("data-focused", d ? "true" : "false"), s.setAttribute("tabindex", d ? "0" : "-1");
+      const n = s.getAttribute("data-id");
+      if (!n) return;
+      const a = e.has(n), d = this._focusedId === n;
+      s.setAttribute("data-selected", a ? "true" : "false"), s.setAttribute("aria-selected", a ? "true" : "false"), s.setAttribute("data-focused", d ? "true" : "false"), s.setAttribute("tabindex", d ? "0" : "-1");
       const o = s.querySelector('[data-selection-badge="true"]');
       if (o) {
-        const u = n && r;
+        const u = a && t;
         o.hidden = !u, o.textContent = u ? "Selected" : "";
       }
     });
-    const t = this.root.querySelector(".selection-pill");
-    t && (t.textContent = String(this._selection.length));
+    const r = this.root.querySelector(".selection-pill");
+    r && (r.textContent = String(this._selection.length));
     const i = this.root.querySelector(".selection-text");
     i && (i.textContent = this._selection.length === 1 ? "item selected" : "items selected");
   }
   _clearDropzoneContainerSize(e) {
     e.style.removeProperty("--ui-sortable-dropzone-match-block-size"), e.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
   }
-  _dropzoneReferenceElement(e, r) {
+  _dropzoneReferenceElement(e, t) {
     if (e.mode === "inside" && e.parentId) return this._findItemElement(e.parentId);
-    let t = r.nextElementSibling;
-    for (; t; ) {
-      if (t instanceof HTMLElement && t.classList.contains("item-shell"))
-        return t.querySelector(".item[data-id]");
-      t = t.nextElementSibling;
+    let r = t.nextElementSibling;
+    for (; r; ) {
+      if (r instanceof HTMLElement && r.classList.contains("item-shell"))
+        return r.querySelector(".item[data-id]");
+      r = r.nextElementSibling;
     }
-    let i = r.previousElementSibling;
+    let i = t.previousElementSibling;
     for (; i; ) {
       if (i instanceof HTMLElement && i.classList.contains("item-shell"))
         return i.querySelector(".item[data-id]");
       i = i.previousElementSibling;
     }
-    const s = this._escapeSelectorValue(e.listId), a = this.root.querySelector(`.list[data-list-id="${s}"] .items`), n = a?.querySelector(".item[data-id]");
-    return n || a || null;
+    const s = this._escapeSelectorValue(e.listId), n = this.root.querySelector(`.list[data-list-id="${s}"] .items`), a = n?.querySelector(".item[data-id]");
+    return a || n || null;
   }
-  _syncDropzoneContainerSize(e, r) {
+  _syncDropzoneContainerSize(e, t) {
     if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container") return;
-    const t = this._dropzoneReferenceElement(r, e);
-    if (!t) return;
-    const i = t.getBoundingClientRect();
+    const r = this._dropzoneReferenceElement(t, e);
+    if (!r) return;
+    const i = r.getBoundingClientRect();
     e.style.setProperty("--ui-sortable-dropzone-match-block-size", `${Math.max(76, Math.round(i.height))}px`), e.style.setProperty("--ui-sortable-dropzone-match-inline-size", `${Math.max(180, Math.round(i.width))}px`);
   }
   _ensureDragPreviewOverlay() {
@@ -1268,21 +1310,21 @@ class ce extends ee {
   }
   _pointerPreviewContent() {
     if (!this._dragState || this._dragState.keyboard) return null;
-    const e = this._dragState.movedRootIds[0], r = this._items.find((t) => t.id === e);
-    return r ? {
+    const e = this._dragState.movedRootIds[0], t = this._items.find((r) => r.id === e);
+    return t ? {
       kicker: this._dragState.clone ? "Copy preview" : "Drop preview",
-      title: this._dragState.clone ? `${r.label} copy` : r.label,
+      title: this._dragState.clone ? `${t.label} copy` : t.label,
       description: this._dragState.clone ? "Release to add a copy here." : this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here."
     } : null;
   }
   _pointerPreviewSize() {
     if (this.getAttribute("drag-preview-size") === "compact" || !this._dragState || this._dragState.keyboard) return null;
-    const e = this._dragState.movedRootIds[0], r = e ? this._findItemElement(e) : null;
-    if (!r) return null;
-    const t = window.getComputedStyle(r), i = oe(t.transform);
+    const e = this._dragState.movedRootIds[0], t = e ? this._findItemElement(e) : null;
+    if (!t) return null;
+    const r = window.getComputedStyle(t), i = le(r.transform);
     return {
-      width: r.offsetWidth * i.x,
-      height: r.offsetHeight * i.y
+      width: t.offsetWidth * i.x,
+      height: t.offsetHeight * i.y
     };
   }
   _updatePointerDragPreview() {
@@ -1295,52 +1337,52 @@ class ce extends ee {
       this._clearPointerDragPreview();
       return;
     }
-    const r = this.root.querySelector(".root"), i = this._dragPreviewOverlay?.getAttribute("data-visible") === "true", s = this._pointerPreviewSize();
+    const t = this.root.querySelector(".root"), i = this._dragPreviewOverlay?.getAttribute("data-visible") === "true", s = this._pointerPreviewSize();
     if (!this._dragState.dropTarget) {
-      i && r && r.setAttribute("data-drag-preview", "true");
+      i && t && t.setAttribute("data-drag-preview", "true");
       return;
     }
-    const a = this._findDropzone(this._dragState.dropTarget);
-    if (!a) {
-      i && r && r.setAttribute("data-drag-preview", "true");
+    const n = this._findDropzone(this._dragState.dropTarget);
+    if (!n) {
+      i && t && t.setAttribute("data-drag-preview", "true");
       return;
     }
-    const n = this._ensureDragPreviewOverlay();
-    n.innerHTML = `
+    const a = this._ensureDragPreviewOverlay();
+    a.innerHTML = `
       <div class="placeholder-content">
         <div class="placeholder-kicker">${I(e.kicker)}</div>
         <div class="placeholder-title">${I(e.title)}</div>
         <div class="placeholder-description">${I(e.description)}</div>
       </div>
     `;
-    const d = a.getBoundingClientRect();
-    r && r.setAttribute("data-drag-preview", "true"), n.style.setProperty("left", "-9999px"), n.style.setProperty("top", "-9999px"), s ? (n.style.setProperty("inline-size", `${s.width}px`), n.style.setProperty("block-size", `${s.height}px`)) : (n.style.removeProperty("inline-size"), n.style.removeProperty("block-size")), n.setAttribute("data-visible", "true");
-    const o = n.getBoundingClientRect(), u = s?.width ?? o.width, p = s?.height ?? o.height, m = Math.max(16, Math.min(d.left, window.innerWidth - u - 16)), _ = Math.max(
+    const d = n.getBoundingClientRect();
+    t && t.setAttribute("data-drag-preview", "true"), a.style.setProperty("left", "-9999px"), a.style.setProperty("top", "-9999px"), s ? (a.style.setProperty("inline-size", `${s.width}px`), a.style.setProperty("block-size", `${s.height}px`)) : (a.style.removeProperty("inline-size"), a.style.removeProperty("block-size")), a.setAttribute("data-visible", "true");
+    const o = a.getBoundingClientRect(), u = s?.width ?? o.width, c = s?.height ?? o.height, h = Math.max(16, Math.min(d.left, window.innerWidth - u - 16)), _ = Math.max(
       16,
       Math.min(
-        d.top + (d.height - p) / 2,
-        window.innerHeight - p - 16
+        d.top + (d.height - c) / 2,
+        window.innerHeight - c - 16
       )
     );
-    n.style.setProperty("left", `${Math.round(m)}px`), n.style.setProperty("top", `${Math.round(_)}px`);
+    a.style.setProperty("left", `${Math.round(h)}px`), a.style.setProperty("top", `${Math.round(_)}px`);
   }
-  _setDraggingVisualState(e, r) {
-    e.forEach((t) => {
-      const i = this._findItemElement(t);
-      i && (i.setAttribute("data-dragging", r ? "true" : "false"), i.setAttribute("aria-grabbed", r ? "true" : "false"), r && i.getBoundingClientRect());
+  _setDraggingVisualState(e, t) {
+    e.forEach((r) => {
+      const i = this._findItemElement(r);
+      i && (i.setAttribute("data-dragging", t ? "true" : "false"), t && i.getBoundingClientRect());
     });
   }
-  _setDropTarget(e, r) {
-    const t = this._dragState?.dropTarget ?? null;
-    if (!(!this._dragState || B(t, e))) {
-      if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(t), r?.announceLabel && this._announce(r.announceLabel), this._dragState.keyboard) {
+  _setDropTarget(e, t) {
+    const r = this._dragState?.dropTarget ?? null;
+    if (!(!this._dragState || B(r, e))) {
+      if (this._pendingDropTarget = null, this._dragState.dropTarget = e, this._applyCurrentDropTargetVisualState(r), t?.announceLabel && this._announce(t.announceLabel), this._dragState.keyboard) {
         this.requestRender();
         return;
       }
       this._updatePointerDragPreview();
     }
   }
-  _queueDropTarget(e, r, t) {
+  _queueDropTarget(e, t, r) {
     if (!this._dragState) return;
     const i = this._dragState.dropTarget ?? null;
     if (B(i, e)) {
@@ -1348,164 +1390,172 @@ class ce extends ee {
       return;
     }
     if (!i && e) {
-      this._setDropTarget(e, t);
+      this._setDropTarget(e, r);
       return;
     }
-    const s = typeof r == "number" && Number.isFinite(r) ? r : performance.now(), a = this._pendingDropTarget;
-    if (a && B(a.target, e)) {
-      const n = e ? re : ie;
-      s - a.startedAt >= n && this._setDropTarget(e, a.announceLabel ? { announceLabel: a.announceLabel } : t);
+    const s = typeof t == "number" && Number.isFinite(t) ? t : performance.now(), n = this._pendingDropTarget;
+    if (n && B(n.target, e)) {
+      const a = e ? oe : ne;
+      s - n.startedAt >= a && this._setDropTarget(e, n.announceLabel ? { announceLabel: n.announceLabel } : r);
       return;
     }
     this._pendingDropTarget = {
       target: e,
       startedAt: s,
-      announceLabel: t?.announceLabel
+      announceLabel: r?.announceLabel
     };
   }
-  _releaseDropTarget(e, r) {
+  _releaseDropTarget(e, t) {
     if (!this._dragState) return null;
-    if (Number.isFinite(e) && Number.isFinite(r)) {
-      const s = this._dropTargetFromPoint(e, r);
-      if (s && this._canDrop(s, this._dragState.movedRootIds))
-        return this._pendingDropTarget = null, s;
+    if (Number.isFinite(e) && Number.isFinite(t)) {
+      const n = this._dropTargetFromPoint(e, t);
+      if (n && this._canDrop(n, this._dragState.movedRootIds))
+        return this._pendingDropTarget = null, n;
     }
-    const t = this._pendingDropTarget?.target ?? null;
-    if (this._pendingDropTarget = null, t && this._canDrop(t, this._dragState.movedRootIds)) return t;
-    const i = this._dragState.dropTarget ?? null;
-    return i && this._canDrop(i, this._dragState.movedRootIds) ? i : null;
-  }
-  _pathFromPoint(e, r) {
-    const t = [], i = this.root;
-    let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, r) : this.ownerDocument?.elementFromPoint(e, r) ?? null;
-    for (; s && (s instanceof HTMLElement && t.push(s), s !== this); ) {
+    const r = this._pendingDropTarget?.target ?? null;
+    this._pendingDropTarget = null;
+    const i = (n) => this._pointerIsOverList(n.listId, e, t);
+    if (r && this._canDrop(r, this._dragState.movedRootIds) && i(r)) return r;
+    const s = this._dragState.dropTarget ?? null;
+    return s && this._canDrop(s, this._dragState.movedRootIds) && i(s) ? s : null;
+  }
+  _pointerIsOverList(e, t, r) {
+    if (!Number.isFinite(t) || !Number.isFinite(r)) return !0;
+    const s = Array.from(this.root.querySelectorAll(".list[data-list-id]")).find((a) => a.getAttribute("data-list-id") === e);
+    if (!s) return !0;
+    const n = s.getBoundingClientRect();
+    return t >= n.left && t <= n.right && r >= n.top && r <= n.bottom;
+  }
+  _pathFromPoint(e, t) {
+    const r = [], i = this.root;
+    let s = typeof i.elementFromPoint == "function" ? i.elementFromPoint(e, t) : this.ownerDocument?.elementFromPoint(e, t) ?? null;
+    for (; s && (s instanceof HTMLElement && r.push(s), s !== this); ) {
       if (s instanceof ShadowRoot) {
         s = s.host;
         continue;
       }
-      s = s.parentNode, !s && t[t.length - 1]?.getRootNode() instanceof ShadowRoot && (s = t[t.length - 1].getRootNode().host);
+      s = s.parentNode, !s && r[r.length - 1]?.getRootNode() instanceof ShadowRoot && (s = r[r.length - 1].getRootNode().host);
     }
-    return t;
+    return r;
   }
   _measureItemShellRects() {
     const e = /* @__PURE__ */ new Map();
-    return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((r) => {
-      const t = r.getAttribute("data-item-shell");
-      if (!t) return;
-      const i = r.getBoundingClientRect();
-      e.set(t, { top: i.top, left: i.left });
+    return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((t) => {
+      const r = t.getAttribute("data-item-shell");
+      if (!r) return;
+      const i = t.getBoundingClientRect();
+      e.set(r, { top: i.top, left: i.left });
     }), e;
   }
   _animateItemShellReflow(e) {
     if (!e.size) return;
-    const r = new Set(this._draggingIds());
-    this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((t) => {
-      const i = t.getAttribute("data-item-shell");
-      if (!i || r.has(i)) return;
+    const t = new Set(this._draggingIds());
+    this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((r) => {
+      const i = r.getAttribute("data-item-shell");
+      if (!i || t.has(i)) return;
       const s = e.get(i);
       if (!s) return;
-      const a = t.getBoundingClientRect(), n = s.left - a.left, d = s.top - a.top;
-      Math.abs(n) < 0.5 && Math.abs(d) < 0.5 || (t.style.transition = "none", t.style.transform = `translate(${n}px, ${d}px)`, t.style.willChange = "transform", t.getBoundingClientRect(), requestAnimationFrame(() => {
-        t.style.transition = "transform 180ms ease", t.style.transform = "";
+      const n = r.getBoundingClientRect(), a = s.left - n.left, d = s.top - n.top;
+      Math.abs(a) < 0.5 && Math.abs(d) < 0.5 || (r.style.transition = "none", r.style.transform = `translate(${a}px, ${d}px)`, r.style.willChange = "transform", r.getBoundingClientRect(), requestAnimationFrame(() => {
+        r.style.transition = "transform 180ms ease", r.style.transform = "";
         const o = () => {
-          t.style.transition = "", t.style.willChange = "", t.removeEventListener("transitionend", o);
+          r.style.transition = "", r.style.willChange = "", r.removeEventListener("transitionend", o);
         };
-        t.addEventListener("transitionend", o), window.setTimeout(o, 220);
+        r.addEventListener("transitionend", o), window.setTimeout(o, 220);
       }));
     });
   }
-  _previewCloneSubtreeItem(e, r) {
-    const t = e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id;
+  _previewCloneSubtreeItem(e, t) {
+    const r = e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id;
     return {
       ...e,
-      id: `${t}--preview`,
-      label: r[0] === e.id ? `${e.label} copy` : e.label
+      id: `${r}--preview`,
+      label: t[0] === e.id ? `${e.label} copy` : e.label
     };
   }
   _projectedMoveResult() {
-    return !this._dragState?.dropTarget || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ae(
+    return !this._dragState?.dropTarget || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ce(
       this._items,
       this._lists,
       this._dragState.dropTarget,
       this._dragState.movedRootIds,
       this._dragState.clone,
-      (e, r) => this._previewCloneSubtreeItem(e, r)
+      (e, t) => this._previewCloneSubtreeItem(e, t)
     );
   }
-  _renderListTree(e, r, t, i, s, a, n) {
-    const d = P(e), o = $(e), u = (p) => {
-      const m = o.get(D(r.id, p)) || [], _ = this.sort === "label" ? [...m].sort((v, b) => {
-        const y = d.get(v), x = d.get(b);
-        return !y || !x ? 0 : y.label.localeCompare(x.label);
-      }) : m;
-      let f = "";
-      return _.forEach((v) => {
-        const b = d.get(v);
-        if (!b || b.hidden) return;
-        const y = this._renderChildBranch(
-          b,
-          t,
+  _renderListTree(e, t, r, i, s, n, a) {
+    const d = T(e), o = E(e), u = (c) => {
+      const h = o.get(k(t.id, c)) || [], _ = this.sort === "label" ? [...h].sort((S, m) => {
+        const v = d.get(S), D = d.get(m);
+        return !v || !D ? 0 : v.label.localeCompare(D.label);
+      }) : h;
+      let b = "";
+      return _.forEach((S) => {
+        const m = d.get(S);
+        if (!m || m.hidden) return;
+        const v = this._renderChildBranch(
+          m,
+          r,
           i,
           u,
           s,
-          a,
-          n
+          n,
+          a
         );
-        !W(b, this.filterQuery) && !y.includes('class="item"') || (f += this._renderDropzone({
-          listId: r.id,
-          parentId: p,
-          beforeId: v,
+        !W(m, this.filterQuery) && !v.includes('class="item"') || (b += this._renderDropzone({
+          listId: t.id,
+          parentId: c,
+          beforeId: S,
           mode: "before"
-        }, "Drop here"), f += y);
-      }), f += this._renderDropzone({
-        listId: r.id,
-        parentId: p,
+        }, "Drop here"), b += v);
+      }), b += this._renderDropzone({
+        listId: t.id,
+        parentId: c,
         beforeId: null,
         mode: "before"
-      }, "Drop here"), f;
+      }, "Drop here"), b;
     };
     return `<div class="tree">${u(null)}</div>`;
   }
-  _renderChildBranch(e, r, t, i, s, a, n) {
-    const d = I(e.id), o = a.has(e.id), u = o ? "" : i(e.id), p = u.includes('class="item"'), m = o ? !1 : this._selection.includes(e.id), _ = o ? !1 : t.has(e.id), f = e.disabled, v = f || e.dragDisabled || this._isDragLocked(), b = this._dragState?.dropTarget?.mode === "inside" && this._dragState.dropTarget.parentId === e.id, y = this._dragState?.clone ? "Copy preview" : "Drop preview", x = this._dragState?.clone ? "Release to add a copy here." : this._dragState && this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here.", z = this._dragHandleMode(), k = this._usesCustomHandleSelector(), h = k ? "custom" : z, E = !k && z === "handle";
+  _renderChildBranch(e, t, r, i, s, n, a) {
+    const d = I(e.id), o = n.has(e.id), u = o ? "" : i(e.id), c = u.includes('class="item"'), h = o ? !1 : this._selection.includes(e.id), _ = o ? !1 : r.has(e.id), b = e.disabled, S = b || e.dragDisabled || this._isDragLocked(), m = this._dragState?.dropTarget?.mode === "inside" && this._dragState.dropTarget.parentId === e.id, v = this._dragState?.clone ? "Copy preview" : "Drop preview", D = this._dragState?.clone ? "Release to add a copy here." : this._dragState && this._dragState.movedRootIds.length > 1 ? "Release to place this selection here." : "Release to place this item here.", A = this._dragHandleMode(), z = this._usesCustomHandleSelector(), f = z ? "custom" : A, y = !z && A === "handle";
     return `
       <div class="item-shell" data-item-shell="${d}">
-        <article
+        <div
           class="item${o ? " item-placeholder" : ""}"
           part="item"
           data-id="${d}"
-          data-drag-handle-mode="${h}"
-          ${!o && h === "item" ? 'data-drag-trigger="item"' : ""}
-          data-selected="${m}"
-          data-focused="${o ? "false" : r === e.id}"
+          data-drag-handle-mode="${f}"
+          ${!o && f === "item" ? 'data-drag-trigger="item"' : ""}
+          data-selected="${h}"
+          data-focused="${o ? "false" : t === e.id}"
           data-dragging="${_}"
-          data-disabled="${f}"
-          data-drop-inside-active="${b ? "true" : "false"}"
+          data-disabled="${b}"
+          data-drop-inside-active="${m ? "true" : "false"}"
           role="${o ? "presentation" : "option"}"
-          aria-selected="${o ? "false" : m}"
-          aria-disabled="${f}"
-          aria-grabbed="${o ? "false" : _}"
+          aria-selected="${o ? "false" : h}"
+          aria-disabled="${b}"
           aria-hidden="${o ? "true" : "false"}"
-          tabindex="${o ? "-1" : r === e.id ? "0" : "-1"}"
+          tabindex="${o ? "-1" : t === e.id ? "0" : "-1"}"
         >
           ${o ? `
               <div class="placeholder-content">
-                <div class="placeholder-kicker">${I(y)}</div>
+                <div class="placeholder-kicker">${I(v)}</div>
                 <div class="placeholder-title">${I(e.label)}</div>
-                <div class="placeholder-description">${I(x)}</div>
+                <div class="placeholder-description">${I(D)}</div>
               </div>
             ` : `
-              ${E ? `
-                  <button
+              ${y ? `
+                  <span
                     class="handle"
                     part="handle"
-                    type="button"
+                    role="presentation"
+                    aria-hidden="true"
                     data-action="handle"
                     data-drag-trigger="handle"
                     data-id="${d}"
                     draggable="false"
-                    ${v ? "disabled" : ""}
-                    aria-label="Drag ${I(e.label)}"
+                    ${S ? "disabled" : ""}
                   >
                     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                       <circle cx="5" cy="4" r="1.25"></circle>
@@ -1515,7 +1565,7 @@ class ce extends ee {
                       <circle cx="5" cy="12" r="1.25"></circle>
                       <circle cx="11" cy="12" r="1.25"></circle>
                     </svg>
-                  </button>
+                  </span>
                 ` : ""}
               <div class="item-content" data-action="select" data-id="${d}">
                 <div class="item-custom-content" part="item-custom-content" data-item-content-target="${d}"></div>
@@ -1523,7 +1573,7 @@ class ce extends ee {
                   <div class="item-title">${I(e.label)}</div>
                   ${e.description ? `<div class="item-description">${I(e.description)}</div>` : ""}
                   <div class="item-meta">
-                    <span class="item-badge selection-badge" data-selection-badge="true" ${m && n ? "" : "hidden"}>${m && n ? "Selected" : ""}</span>
+                    <span class="item-badge selection-badge" data-selection-badge="true" ${h && a ? "" : "hidden"}>${h && a ? "Selected" : ""}</span>
                     ${e.cloneOnDrag ? '<span class="item-badge">Clone on drag</span>' : ""}
                     ${e.dragDisabled ? '<span class="item-badge">Pinned</span>' : ""}
                     ${s ? '<span class="item-badge drop-badge">Nest here</span>' : ""}
@@ -1531,19 +1581,19 @@ class ce extends ee {
                 </div>
               </div>
             `}
-        </article>
+        </div>
         ${s && !o ? this._renderDropzone({
       listId: e.listId,
       parentId: e.id,
       beforeId: null,
       mode: "inside"
     }, "Nest here") : ""}
-        ${p ? `<div class="children">${u}</div>` : ""}
+        ${c ? `<div class="children">${u}</div>` : ""}
       </div>
     `;
   }
-  _renderDropzone(e, r) {
-    const t = this._dragState?.dropTarget && this._dragState.dropTarget.listId === e.listId && this._dragState.dropTarget.parentId === e.parentId && this._dragState.dropTarget.beforeId === e.beforeId && this._dragState.dropTarget.mode === e.mode;
+  _renderDropzone(e, t) {
+    const r = this._dragState?.dropTarget && this._dragState.dropTarget.listId === e.listId && this._dragState.dropTarget.parentId === e.parentId && this._dragState.dropTarget.beforeId === e.beforeId && this._dragState.dropTarget.mode === e.mode;
     return `
       <div
         class="dropzone"
@@ -1552,52 +1602,60 @@ class ce extends ee {
         data-parent-id="${I(e.parentId ?? "")}"
         data-before-id="${I(e.beforeId ?? "")}"
         data-mode="${e.mode}"
-        data-active="${t ? "true" : "false"}"
+        data-active="${r ? "true" : "false"}"
         aria-hidden="true"
       >
-        <span class="dropzone-label">${I(r)}</span>
+        <span class="dropzone-label">${I(t)}</span>
       </div>
     `;
   }
   _onClick(e) {
-    const r = e.composedPath(), t = r.find((o) => o instanceof HTMLElement && o.classList?.contains("toolbar")), i = this._dragActivatorFromPath(r), s = r.find((o) => o instanceof HTMLElement && o.classList.contains("item"));
+    const t = e.composedPath(), r = t.find((o) => o instanceof HTMLElement && o.classList?.contains("toolbar")), i = this._dragActivatorFromPath(t), s = t.find((o) => o instanceof HTMLElement && o.classList.contains("item"));
     if (i && i.kind !== "item") return;
     if (!s)
-      return t && !(e.target instanceof HTMLButtonElement), void 0;
-    const a = s.getAttribute("data-id");
-    if (!a) return;
-    const n = this._items.find((o) => o.id === a);
-    if (!n || n.disabled) return;
+      return r && !(e.target instanceof HTMLButtonElement), void 0;
+    const n = s.getAttribute("data-id");
+    if (!n) return;
+    const a = this._items.find((o) => o.id === n);
+    if (!a || a.disabled) return;
     const d = e;
-    if (d.shiftKey ? this._selectRangeTo(a) : d.metaKey || d.ctrlKey ? this._toggleSelection(a) : this._setSelection([a], "pointer"), this._focusedId = a, this._rangeAnchorId = a, this._pendingFocusId = a, this._hasCustomItemRendering()) {
+    if (d.shiftKey ? this._selectRangeTo(n) : d.metaKey || d.ctrlKey ? this._toggleSelection(n) : this._setSelection([n], "pointer"), this._focusedId = n, this._rangeAnchorId = n, this._pendingFocusId = n, this._hasCustomItemRendering()) {
       this._syncSelectionVisualState(), this._restorePendingFocus();
       return;
     }
     this.requestRender();
   }
   _onFocusIn(e) {
-    const t = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item"))?.getAttribute("data-id");
-    t && (this._focusedId = t, this._syncSelectionVisualState());
+    const r = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item"))?.getAttribute("data-id");
+    r && (this._focusedId = r, this._syncSelectionVisualState());
+  }
+  // Keys typed into a control that lives inside an item (an <input> or <button> in a custom card)
+  // belong to that control: swallowing Space/Enter/arrows there made it impossible to type a space
+  // or press the button from the keyboard. The drag handle is part of the item, not a foreign control.
+  _isForeignControl(e) {
+    const t = e.composedPath()[0];
+    return !(t instanceof HTMLElement) || t.classList.contains("handle") || t.classList.contains("item") ? !1 : t.isContentEditable || t.matches('input, textarea, select, button, summary, a[href], [role="button"], [role="textbox"], [role="combobox"]');
   }
   _onKeyDown(e) {
-    const r = this._visibleItemIds();
-    if (!r.length) return;
-    const t = this._focusedId && r.includes(this._focusedId) ? this._focusedId : r[0], i = r.indexOf(t), s = this._items.find((d) => d.id === t), n = (s ? this._lists.find((d) => d.id === s.listId) : null)?.orientation === "horizontal";
+    if (this._isForeignControl(e)) return;
+    const t = this._visibleItemIds();
+    if (!t.length) return;
+    const r = this._focusedId && t.includes(this._focusedId) ? this._focusedId : t[0], i = t.indexOf(r), s = this._items.find((c) => c.id === r), a = (s ? this._lists.find((c) => c.id === s.listId) : null)?.orientation === "horizontal", d = this._isRtl(), o = a ? d ? "ArrowLeft" : "ArrowRight" : "ArrowDown", u = a ? d ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
     if (!this._dragState?.keyboard) {
-      if (e.key === "ArrowDown" && !n || e.key === "ArrowRight" && n) {
-        e.preventDefault(), this._moveFocusBy(r, i, 1);
+      if (e.key === o) {
+        e.preventDefault(), this._moveFocusBy(t, i, 1);
         return;
       }
-      if (e.key === "ArrowUp" && !n || e.key === "ArrowLeft" && n) {
-        e.preventDefault(), this._moveFocusBy(r, i, -1);
+      if (e.key === u) {
+        e.preventDefault(), this._moveFocusBy(t, i, -1);
         return;
       }
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
-        e.preventDefault(), this._setSelection(r, "keyboard"), this._announce(`${r.length} items selected.`);
+        e.preventDefault(), this._setSelection(t, "keyboard"), this._announce(`${t.length} items selected.`);
         return;
       }
       if (e.key === "Enter") {
-        e.preventDefault(), this._setSelection([t], "keyboard");
+        e.preventDefault(), this._setSelection([r], "keyboard");
         return;
       }
       if (e.key === " " || e.code === "Space") {
@@ -1605,20 +1663,20 @@ class ce extends ee {
           this._announce("Dragging is disabled right now.");
           return;
         }
-        const d = this._selectedRootIds(t);
-        if (!d.length) return;
-        const o = this._itemClonesOnDrag(t);
+        const c = this._selectedRootIds(r);
+        if (!c.length) return;
+        const h = this._itemClonesOnDrag(r);
         this._dragState = {
-          snapshot: this._items.map(A),
-          movedRootIds: d,
-          originId: t,
-          clone: o,
+          snapshot: this._items.map(P),
+          movedRootIds: c,
+          originId: r,
+          clone: h,
           keyboard: !0,
-          dropTarget: this._initialKeyboardDropTarget(t),
+          dropTarget: this._initialKeyboardDropTarget(r),
           committed: !1
         };
-        const u = d.length === 1 ? `Lifted ${s?.label || "item"}.` : `Lifted ${d.length} items.`;
-        this._announce(`${u} Use arrow keys to choose a destination.`), this.requestRender();
+        const _ = c.length === 1 ? `Lifted ${s?.label || "item"}.` : `Lifted ${c.length} items.`;
+        this._announce(`${_} Use arrow keys to choose a destination.`), this.requestRender();
         return;
       }
       if (e.key === "Escape") {
@@ -1633,24 +1691,28 @@ class ce extends ee {
     }
     if (e.key === "Enter" || e.key === " " || e.code === "Space") {
       e.preventDefault();
-      const d = this._dragState.dropTarget;
-      if (!d) return;
-      this._commitMove(d, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
+      const c = this._dragState.dropTarget;
+      if (!c) return;
+      this._commitMove(c, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
       return;
     }
     if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
       e.preventDefault();
-      const d = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : -1;
-      this._moveKeyboardDropTarget(d);
+      const c = d ? "ArrowLeft" : "ArrowRight", h = e.key === "ArrowDown" || e.key === c ? 1 : -1;
+      this._moveKeyboardDropTarget(h);
     }
   }
-  _moveFocusBy(e, r, t) {
-    const i = Math.max(0, Math.min(e.length - 1, r + t)), s = e[i];
+  _isRtl() {
+    const e = this.ownerDocument?.defaultView?.getComputedStyle(this).direction;
+    return e ? e === "rtl" : this.closest("[dir]")?.getAttribute("dir") === "rtl";
+  }
+  _moveFocusBy(e, t, r) {
+    const i = Math.max(0, Math.min(e.length - 1, t + r)), s = e[i];
     this._focusedId = s, this._pendingFocusId = s, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender();
   }
   _onDragStart(e) {
-    const r = this._dragActivatorFromPath(e.composedPath()), t = r?.id;
-    if (!r || !t) {
+    const t = this._dragActivatorFromPath(e.composedPath()), r = t?.id;
+    if (!t || !r) {
       e.preventDefault();
       return;
     }
@@ -1658,97 +1720,102 @@ class ce extends ee {
       e.preventDefault(), this._announce("Dragging is disabled right now.");
       return;
     }
-    const i = this._items.find((n) => n.id === t);
+    const i = this._items.find((a) => a.id === r);
     if (!i || i.disabled || i.dragDisabled) {
       e.preventDefault();
       return;
     }
-    const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
-    this._selection.includes(t) || this._setSelection([t], "pointer");
-    const a = this._itemClonesOnDrag(t);
+    const s = this._selection.includes(r) ? this._selectedRootIds(r) : [r];
+    this._selection.includes(r) || this._setSelection([r], "pointer");
+    const n = this._itemClonesOnDrag(r);
     this._dragState = {
-      snapshot: this._items.map(A),
+      snapshot: this._items.map(P),
       movedRootIds: s,
-      originId: t,
-      clone: a,
+      originId: r,
+      clone: n,
       keyboard: !1,
       dropTarget: null,
       committed: !1
-    }, e.dataTransfer && (e.dataTransfer.effectAllowed = a ? "copyMove" : "move", e.dataTransfer.setData("text/plain", s.join(",")), this._applyDragImage(e.dataTransfer, s.length)), this._announce(
-      a ? `Dragging ${s.length === 1 ? i.label : `${s.length} items`} as a copy.` : `Dragging ${s.length === 1 ? i.label : `${s.length} items`}.`
+    }, e.dataTransfer && (e.dataTransfer.effectAllowed = n ? "copyMove" : "move", e.dataTransfer.setData("text/plain", s.join(",")), this._applyDragImage(e.dataTransfer, s.length)), this._announce(
+      n ? `Dragging ${s.length === 1 ? i.label : `${s.length} items`} as a copy.` : `Dragging ${s.length === 1 ? i.label : `${s.length} items`}.`
     ), this.requestRender();
   }
   _onDragOver(e) {
     if (!this._dragState || this._dragState.keyboard) return;
-    const r = this._dropTargetFromEvent(e);
-    if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
+    const t = this._dropTargetFromEvent(e);
+    if (!t || !this._canDrop(t, this._dragState.movedRootIds)) {
       this._queueDropTarget(null, e.timeStamp);
       return;
     }
-    e.preventDefault(), this._queueDropTarget(r, e.timeStamp), e.dataTransfer && (e.dataTransfer.dropEffect = this._dragState.clone ? "copy" : "move");
+    e.preventDefault(), this._queueDropTarget(t, e.timeStamp), e.dataTransfer && (e.dataTransfer.dropEffect = this._dragState.clone ? "copy" : "move");
   }
   _onDrop(e) {
     if (!this._dragState || this._dragState.keyboard) return;
-    const r = this._dropTargetFromEvent(e);
-    !r || !this._canDrop(r, this._dragState.movedRootIds) || (e.preventDefault(), this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer"));
+    const t = this._dropTargetFromEvent(e);
+    !t || !this._canDrop(t, this._dragState.movedRootIds) || (e.preventDefault(), this._commitMove(t, this._dragState.movedRootIds, this._dragState.clone, "pointer"));
   }
   _onDocumentKeyDown(e) {
     e.key === "Escape" && (!this._dragState || this._dragState.keyboard || (e.preventDefault(), this._cancelDrag(!0)));
   }
   _onDragEnd() {
-    !this._dragState || this._dragState.keyboard || this._dragState.committed || (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this._announce("Drag cancelled."), this.requestRender());
+    !this._dragState || this._dragState.keyboard || this._dragState.committed || (this._setDraggingVisualState(this._draggingIds(), !1), this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this._announce("Drag cancelled."), this.requestRender());
   }
   _dropTargetFromEvent(e) {
     return this._dropTargetFromPath(e.composedPath(), e.clientX, e.clientY);
   }
-  _dropTargetFromPath(e, r, t) {
-    const i = e.find((h) => h instanceof HTMLElement && h.classList.contains("dropzone"));
+  _dropTargetFromPath(e, t, r) {
+    const i = e.find((y) => y instanceof HTMLElement && y.classList.contains("dropzone"));
     if (i) {
-      const h = {
+      const y = {
         listId: i.getAttribute("data-list-id") || "",
         parentId: i.getAttribute("data-parent-id") || null,
         beforeId: i.getAttribute("data-before-id") || null,
         mode: i.getAttribute("data-mode") === "inside" ? "inside" : "before"
       };
-      if (h.listId) return h;
+      if (y.listId) return y;
     }
-    const s = e.find((h) => h instanceof HTMLElement && h.classList.contains("item"));
-    if (!s) return null;
-    const a = s.getAttribute("data-id");
-    if (!a) return null;
-    const n = this._items.find((h) => h.id === a);
+    const s = e.find((y) => y instanceof HTMLElement && y.classList.contains("item"));
+    if (!s) {
+      const R = e.find(
+        ($) => $ instanceof HTMLElement && $.classList.contains("list") && $.hasAttribute("data-list-id")
+      )?.getAttribute("data-list-id");
+      return R ? { listId: R, parentId: null, beforeId: null, mode: "before" } : null;
+    }
+    const n = s.getAttribute("data-id");
     if (!n) return null;
-    const d = this._lists.find((h) => h.id === n.listId), o = s.getBoundingClientRect(), u = d?.orientation === "horizontal", p = u ? o.left : o.top, m = u ? o.right : o.bottom, _ = u ? r : t, f = Math.max(1, m - p), v = (_ - p) / f, b = this.getAttribute("allow-nesting") !== "false" && !n.disabled;
-    if (v <= 0.34)
+    const a = this._items.find((y) => y.id === n);
+    if (!a) return null;
+    const d = this._lists.find((y) => y.id === a.listId), o = s.getBoundingClientRect(), u = d?.orientation === "horizontal", c = u ? o.left : o.top, h = u ? o.right : o.bottom, _ = u ? t : r, b = Math.max(1, h - c), S = (_ - c) / b, m = u && this._isRtl() ? 1 - S : S, v = this.getAttribute("allow-nesting") !== "false" && !a.disabled;
+    if (m <= 0.34)
       return {
-        listId: n.listId,
-        parentId: n.parentId,
-        beforeId: n.id,
+        listId: a.listId,
+        parentId: a.parentId,
+        beforeId: a.id,
         mode: "before"
       };
-    if (b && v >= 0.34 && v <= 0.74)
+    if (v && m >= 0.34 && m <= 0.74)
       return {
-        listId: n.listId,
-        parentId: n.id,
+        listId: a.listId,
+        parentId: a.id,
         beforeId: null,
         mode: "inside"
       };
-    const x = $(this._items).get(D(n.listId, n.parentId)) || [], z = x.indexOf(n.id), k = z >= 0 && x[z + 1] || null;
+    const A = E(this._items).get(k(a.listId, a.parentId)) || [], z = A.indexOf(a.id), f = z >= 0 && A[z + 1] || null;
     return {
-      listId: n.listId,
-      parentId: n.parentId,
-      beforeId: k,
+      listId: a.listId,
+      parentId: a.parentId,
+      beforeId: f,
       mode: "before"
     };
   }
-  _dropTargetFromPoint(e, r) {
-    return this._dropTargetFromPath(this._pathFromPoint(e, r), e, r);
+  _dropTargetFromPoint(e, t) {
+    return this._dropTargetFromPath(this._pathFromPoint(e, t), e, t);
   }
-  _beginPointerDrag(e, r) {
+  _beginPointerDrag(e, t) {
     if (!this._pointerGesture || this._dragState) return;
-    const t = this._items.find((i) => i.id === this._pointerGesture?.originId);
-    t && (this._dragState = {
-      snapshot: this._items.map(A),
+    const r = this._items.find((i) => i.id === this._pointerGesture?.originId);
+    r && (this._dragState = {
+      snapshot: this._items.map(P),
       movedRootIds: [...this._pointerGesture.movedRootIds],
       originId: this._pointerGesture.originId,
       clone: this._pointerGesture.clone,
@@ -1757,41 +1824,41 @@ class ce extends ee {
       committed: !1
     }, this._pendingDropTarget = null, this._applyPointerPreview(
       e,
-      r,
+      t,
       this._dragState.movedRootIds.length,
       this._dragState.clone
     ), this._setDraggingVisualState(this._draggingIds(), !0), this._announce(
-      this._dragState.clone ? `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`} as a copy.` : `Dragging ${this._dragState.movedRootIds.length === 1 ? t.label : `${this._dragState.movedRootIds.length} items`}.`
+      this._dragState.clone ? `Dragging ${this._dragState.movedRootIds.length === 1 ? r.label : `${this._dragState.movedRootIds.length} items`} as a copy.` : `Dragging ${this._dragState.movedRootIds.length === 1 ? r.label : `${this._dragState.movedRootIds.length} items`}.`
     ));
   }
   _onPointerDown(e) {
-    const r = this._dragActivatorFromPath(e.composedPath()), t = r?.id;
-    if (!r || !t) return;
+    const t = this._dragActivatorFromPath(e.composedPath()), r = t?.id;
+    if (!t || !r) return;
     if (this._isDragLocked()) {
       e.preventDefault(), this._announce("Dragging is disabled right now.");
       return;
     }
-    const i = this._items.find((a) => a.id === t);
+    const i = this._items.find((n) => n.id === r);
     if (!i || i.disabled || i.dragDisabled) {
       e.preventDefault();
       return;
     }
     e.preventDefault();
     try {
-      r.element.setPointerCapture?.(e.pointerId);
+      t.element.setPointerCapture?.(e.pointerId);
     } catch {
     }
-    const s = this._selection.includes(t) ? this._selectedRootIds(t) : [t];
+    const s = this._selection.includes(r) ? this._selectedRootIds(r) : [r];
     this._pointerGesture = {
       pointerId: e.pointerId,
       pointerType: e.pointerType,
-      originId: t,
+      originId: r,
       movedRootIds: s,
-      clone: this._itemClonesOnDrag(t),
+      clone: this._itemClonesOnDrag(r),
       startX: e.clientX,
       startY: e.clientY,
       moved: !1,
-      captureTarget: r.element
+      captureTarget: t.element
     };
   }
   _onPointerMove(e) {
@@ -1800,16 +1867,24 @@ class ce extends ee {
         if (Math.hypot(e.clientX - this._pointerGesture.startX, e.clientY - this._pointerGesture.startY) < 6) return;
         this._pointerGesture.moved = !0, this._beginPointerDrag(e.clientX, e.clientY);
       }
-      if (!(!this._dragState || this._dragState.keyboard) && (this._movePointerPreview(e.clientX, e.clientY), !this._dragState.committed)) {
-        const r = this._dropTargetFromPoint(e.clientX, e.clientY);
-        if (!r || !this._canDrop(r, this._dragState.movedRootIds)) {
+      if (!(!this._dragState || this._dragState.keyboard) && (this._movePointerPreview(e.clientX, e.clientY), this._updateAutoScroll(e.clientX, e.clientY), !this._dragState.committed)) {
+        const t = this._dropTargetFromPoint(e.clientX, e.clientY);
+        if (!t || !this._canDrop(t, this._dragState.movedRootIds)) {
           this._queueDropTarget(null, e.timeStamp);
           return;
         }
-        this._queueDropTarget(r, e.timeStamp);
+        this._queueDropTarget(t, e.timeStamp);
       }
     }
   }
+  // Holding a dragged card near the top or bottom edge scrolls the page (or the nearest scrolling
+  // container), so lists and positions that are off screen can be reached with the pointer.
+  _updateAutoScroll(e, t) {
+    this._autoScrollPoint = { x: e, y: t }, !this._autoScrollFrame && typeof requestAnimationFrame == "function" && (this._autoScrollFrame = requestAnimationFrame(this._autoScrollTick));
+  }
+  _stopAutoScroll() {
+    this._autoScrollFrame && typeof cancelAnimationFrame == "function" && cancelAnimationFrame(this._autoScrollFrame), this._autoScrollFrame = 0, this._autoScrollPoint = null;
+  }
   _onPointerUp(e) {
     if (!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId) return;
     e.preventDefault();
@@ -1817,26 +1892,26 @@ class ce extends ee {
       this._pointerGesture.captureTarget?.releasePointerCapture?.(e.pointerId);
     } catch {
     }
-    const r = this._pointerGesture;
-    if (this._pointerGesture = null, !this._dragState || this._dragState.keyboard) return;
-    const t = r.moved ? this._releaseDropTarget(e.clientX, e.clientY) : null;
-    if (r.moved && t) {
-      this._commitMove(t, this._dragState.movedRootIds, this._dragState.clone, "pointer");
+    const t = this._pointerGesture;
+    if (this._pointerGesture = null, this._stopAutoScroll(), !this._dragState || this._dragState.keyboard) return;
+    const r = t.moved ? this._releaseDropTarget(e.clientX, e.clientY) : null;
+    if (t.moved && r) {
+      this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer");
       return;
     }
-    r.moved ? this._cancelDrag(!0) : (this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender());
+    t.moved ? this._cancelDrag(!0) : (this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender());
   }
   _onPointerCancel(e) {
-    !this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId || (this._pointerGesture = null, this._dragState && this._cancelDrag(!0));
+    !this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId || (this._pointerGesture = null, this._stopAutoScroll(), this._dragState && this._cancelDrag(!0));
   }
-  _setSelection(e, r) {
-    const t = new Set(this._items.map((n) => n.id)), i = Array.from(new Set(e.filter((n) => t.has(n)))), s = [...this._selection];
+  _setSelection(e, t) {
+    const r = new Set(this._items.map((a) => a.id)), i = Array.from(new Set(e.filter((a) => r.has(a)))), s = [...this._selection];
     this._selection = i, this._rangeAnchorId = i[i.length - 1] || null, this._focusedId = i[i.length - 1] || this._focusedId;
-    const a = U(i);
-    if (this.getAttribute("selection") !== a) {
-      this._lastSelectionAttr = a, this._suppressAttributeRender = !0;
+    const n = X(i);
+    if (this.getAttribute("selection") !== n) {
+      this._lastSelectionAttr = n, this._suppressAttributeRender = !0;
       try {
-        i.length ? this.setAttribute("selection", a) : this.removeAttribute("selection");
+        i.length ? this.setAttribute("selection", n) : this.removeAttribute("selection");
       } finally {
         this._suppressAttributeRender = !1;
       }
@@ -1848,154 +1923,154 @@ class ce extends ee {
       },
       bubbles: !0,
       composed: !0
-    })), r !== "restore") {
+    })), t !== "restore") {
       if (this._applyInteractiveStateInPlace({ restoreFocus: !0 })) return;
       this.requestRender();
     }
   }
   _toggleSelection(e) {
-    const r = this._selection.includes(e) ? this._selection.filter((t) => t !== e) : [...this._selection, e];
-    this._setSelection(r, "pointer"), this._announce(`${r.length} items selected.`);
+    const t = this._selection.includes(e) ? this._selection.filter((r) => r !== e) : [...this._selection, e];
+    this._setSelection(t, "pointer"), this._announce(`${t.length} items selected.`);
   }
   _selectRangeTo(e) {
-    const r = this._visibleItemIds(), t = this._rangeAnchorId || this._focusedId || e, i = r.indexOf(t), s = r.indexOf(e);
+    const t = this._visibleItemIds(), r = this._rangeAnchorId || this._focusedId || e, i = t.indexOf(r), s = t.indexOf(e);
     if (i < 0 || s < 0) {
       this._setSelection([e], "pointer");
       return;
     }
-    const [a, n] = i <= s ? [i, s] : [s, i];
-    this._setSelection(r.slice(a, n + 1), "pointer"), this._announce(`${n - a + 1} items selected.`);
+    const [n, a] = i <= s ? [i, s] : [s, i];
+    this._setSelection(t.slice(n, a + 1), "pointer"), this._announce(`${a - n + 1} items selected.`);
   }
   _visibleItemIds() {
     const e = Q(this._items, new Set(this._selection), new Set(this._draggingIds()), this.filterQuery, this.sort);
-    return Array.from(e.values()).flat().filter((r) => !r.disabled).map((r) => r.id);
+    return Array.from(e.values()).flat().filter((t) => !t.disabled).map((t) => t.id);
   }
   _selectedRootIds(e) {
-    const r = this._selection.length ? [...this._selection] : e ? [e] : [], t = P(this._items), i = new Set(r);
-    return r.filter((s) => {
-      const a = t.get(s);
-      if (!a) return !1;
-      let n = a.parentId;
-      for (; n; ) {
-        if (i.has(n)) return !1;
-        n = t.get(n)?.parentId ?? null;
+    const t = this._selection.length ? [...this._selection] : e ? [e] : [], r = T(this._items), i = new Set(t);
+    return t.filter((s) => {
+      const n = r.get(s);
+      if (!n) return !1;
+      let a = n.parentId;
+      for (; a; ) {
+        if (i.has(a)) return !1;
+        a = r.get(a)?.parentId ?? null;
       }
-      return !a.disabled;
+      return !n.disabled;
     });
   }
   _draggingIds() {
     if (!this._dragState) return [];
-    const e = P(this._items), r = $(this._items), t = [], i = (s) => {
-      t.push(s);
-      const a = e.get(s);
-      if (!a) return;
-      (r.get(D(a.listId, s)) || []).forEach(i);
+    const e = T(this._items), t = E(this._items), r = [], i = (s) => {
+      r.push(s);
+      const n = e.get(s);
+      if (!n) return;
+      (t.get(k(n.listId, s)) || []).forEach(i);
     };
-    return this._dragState.movedRootIds.forEach(i), t;
+    return this._dragState.movedRootIds.forEach(i), r;
   }
   _itemClonesOnDrag(e) {
-    const r = this._items.find((i) => i.id === e);
-    return r ? r.cloneOnDrag ? !0 : !!this._lists.find((i) => i.id === r.listId)?.cloneOnDrag : !1;
+    const t = this._items.find((i) => i.id === e);
+    return t ? t.cloneOnDrag ? !0 : !!this._lists.find((i) => i.id === t.listId)?.cloneOnDrag : !1;
   }
   _isDragLocked() {
     return !!(this.hasAttribute("disabled") || this.sort !== "manual" || this.filterQuery && !this.hasAttribute("allow-filtered-drag"));
   }
-  _canDrop(e, r) {
+  _canDrop(e, t) {
     if (this._isDragLocked()) return !1;
-    const t = this._lists.find((o) => o.id === e.listId);
-    if (!t || t.disabled) return !1;
-    const i = P(this._items), s = /* @__PURE__ */ new Set(), a = $(this._items), n = (o) => {
+    const r = this._lists.find((o) => o.id === e.listId);
+    if (!r || r.disabled) return !1;
+    const i = T(this._items), s = /* @__PURE__ */ new Set(), n = E(this._items), a = (o) => {
       s.add(o);
       const u = i.get(o);
-      u && (a.get(D(u.listId, o)) || []).forEach(n);
+      u && (n.get(k(u.listId, o)) || []).forEach(a);
     };
-    if (r.forEach(n), e.parentId && s.has(e.parentId) || e.beforeId && s.has(e.beforeId)) return !1;
-    const d = Array.from(new Set(r.map((o) => i.get(o)?.listId).filter(Boolean)));
-    return !(t.accepts?.length && d.some((o) => !t.accepts?.includes(o)) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
-  }
-  _commitMove(e, r, t, i) {
-    if (!this._canDrop(e, r)) return;
-    const s = P(this._items), a = $(this._items), n = /* @__PURE__ */ new Set(), d = [], o = (c) => {
-      const w = s.get(c);
-      !w || n.has(c) || (n.add(c), d.push(c), (a.get(D(w.listId, c)) || []).forEach(o));
+    if (t.forEach(a), e.parentId && s.has(e.parentId) || e.beforeId && s.has(e.beforeId)) return !1;
+    const d = Array.from(new Set(t.map((o) => i.get(o)?.listId).filter(Boolean)));
+    return !(r.accepts?.length && d.some((o) => !r.accepts?.includes(o)) || e.mode === "inside" && this.getAttribute("allow-nesting") === "false");
+  }
+  _commitMove(e, t, r, i) {
+    if (!this._canDrop(e, t)) return;
+    const s = T(this._items), n = E(this._items), a = /* @__PURE__ */ new Set(), d = [], o = (p) => {
+      const w = s.get(p);
+      !w || a.has(p) || (a.add(p), d.push(p), (n.get(k(w.listId, p)) || []).forEach(o));
     };
-    r.forEach(o);
-    const u = this._items.map(A), p = u.filter((c) => n.has(c.id)), m = t ? u.map(A) : u.filter((c) => !n.has(c.id)), _ = t ? p.map((c) => this._cloneSubtreeItem(c, d)) : p.map(A), f = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
-    t && p.forEach((c, w) => {
-      f.set(c.id, _[w].id), v.set(_[w].id, c.id);
-    }), _.forEach((c) => {
-      const w = t ? v.get(c.id) : c.id, C = w ? s.get(w) : null;
-      C && (t && (c.parentId = C.parentId && f.has(C.parentId) && f.get(C.parentId) || null), c.listId = e.listId);
+    t.forEach(o);
+    const u = this._items.map(P), c = u.filter((p) => a.has(p.id)), h = r ? u.map(P) : u.filter((p) => !a.has(p.id)), _ = r ? c.map((p) => this._cloneSubtreeItem(p, d)) : c.map(P), b = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map();
+    r && c.forEach((p, w) => {
+      b.set(p.id, _[w].id), S.set(_[w].id, p.id);
+    }), _.forEach((p) => {
+      const w = r ? S.get(p.id) : p.id, F = w ? s.get(w) : null;
+      F && (r && (p.parentId = F.parentId && b.has(F.parentId) && b.get(F.parentId) || null), p.listId = e.listId);
     });
-    const b = r.map((c) => f.get(c) || c), y = [...m, ..._], x = $(m), z = D(e.listId, e.parentId), k = [...x.get(z) || []], h = e.beforeId ? k.indexOf(e.beforeId) : k.length, E = h >= 0 ? h : k.length;
-    k.splice(E, 0, ...b), x.set(z, k), $(_).forEach((c, w) => {
-      const [, C] = w.split("::");
-      (C || "") !== "__root__" && x.set(w, [...c]);
+    const m = t.map((p) => b.get(p) || p), v = [...h, ..._], D = E(h), A = k(e.listId, e.parentId), z = [...D.get(A) || []], f = e.beforeId ? z.indexOf(e.beforeId) : z.length, y = f >= 0 ? f : z.length;
+    z.splice(y, 0, ...m), D.set(A, z), E(_).forEach((p, w) => {
+      const [, F] = w.split("::");
+      (F || "") !== "__root__" && D.set(w, [...p]);
     });
-    const L = P(y);
-    b.forEach((c) => {
-      const w = L.get(c);
+    const $ = T(v);
+    m.forEach((p) => {
+      const w = $.get(p);
       w && (w.parentId = e.parentId, w.listId = e.listId);
     });
-    const F = [], M = /* @__PURE__ */ new Set(), O = (c, w) => {
-      (x.get(D(c, w)) || []).forEach((N, Z) => {
-        const G = L.get(N);
-        !G || M.has(N) || (M.add(N), G.listId = c, G.parentId = w, G.order = Z, F.push(G), O(c, N));
+    const O = [], L = /* @__PURE__ */ new Set(), q = (p, w) => {
+      (D.get(k(p, w)) || []).forEach((V, Z) => {
+        const N = $.get(V);
+        !N || L.has(V) || (L.add(V), N.listId = p, N.parentId = w, N.order = Z, O.push(N), q(p, V));
       });
     };
-    this._lists.forEach((c) => O(c.id, null)), y.forEach((c) => {
-      M.has(c.id) || (c.parentId = null, F.push(c));
-    }), this._dragState && (this._dragState.committed = !0), this._items = F.map(A), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage();
-    const q = [...b], g = [...this._selection];
-    this._selection = q, this._focusedId = q[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
-    const S = J(this._items);
-    this._persistSnapshot(S);
-    const T = r.map((c) => s.get(c)).filter((c) => !!c), R = t ? "clone" : e.mode === "inside" ? "nest" : T.some((c) => c.listId !== e.listId) ? "transfer" : "reorder", K = {
+    this._lists.forEach((p) => q(p.id, null)), v.forEach((p) => {
+      L.has(p.id) || (p.parentId = null, O.push(p));
+    }), this._dragState && (this._dragState.committed = !0), this._items = O.map(P), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage();
+    const H = [...m], g = [...this._selection];
+    this._selection = H, this._focusedId = H[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
+    const x = J(this._items);
+    this._persistSnapshot(x);
+    const M = t.map((p) => s.get(p)).filter((p) => !!p), C = r ? "clone" : e.mode === "inside" ? "nest" : M.some((p) => p.listId !== e.listId) ? "transfer" : "reorder", G = {
       items: this.items,
       lists: this.lists,
-      selection: [...q],
+      selection: [...H],
       previousSelection: g,
-      movedIds: [...b],
+      movedIds: [...m],
       source: i,
-      operation: R,
-      persistence: S
+      operation: C,
+      persistence: x
     };
     this.dispatchEvent(new CustomEvent("change", {
-      detail: K,
+      detail: G,
       bubbles: !0,
       composed: !0
     })), this.dispatchEvent(new CustomEvent("persist-request", {
-      detail: K,
+      detail: G,
       bubbles: !0,
       composed: !0
-    })), this._announce(this._messageForMove(R, b.length, e)), this.requestRender();
+    })), this._announce(this._messageForMove(C, m.length, e)), this.requestRender();
   }
   _syncAttributesFromState() {
-    const e = le(this._lists), r = de(this._items), t = U(this._selection);
-    this._lastListsAttr = e, this._lastItemsAttr = r, this._lastSelectionAttr = t, this._suppressAttributeRender = !0;
+    const e = pe(this._lists), t = ue(this._items), r = X(this._selection);
+    this._lastListsAttr = e, this._lastItemsAttr = t, this._lastSelectionAttr = r, this._suppressAttributeRender = !0;
     try {
-      this.setAttribute("lists", e), this.setAttribute("items", r), this._selection.length ? this.setAttribute("selection", t) : this.removeAttribute("selection");
+      this.setAttribute("lists", e), this.setAttribute("items", t), this._selection.length ? this.setAttribute("selection", r) : this.removeAttribute("selection");
     } finally {
       this._suppressAttributeRender = !1;
     }
   }
-  _cloneSubtreeItem(e, r) {
-    const i = `copy-${this._cloneSeed++}`, a = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
+  _cloneSubtreeItem(e, t) {
+    const i = `copy-${this._cloneSeed++}`, n = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
     return {
       ...e,
-      id: a,
-      label: r[0] === e.id ? `${e.label} copy` : e.label
+      id: n,
+      label: t[0] === e.id ? `${e.label} copy` : e.label
     };
   }
-  _messageForMove(e, r, t) {
-    const s = this._lists.find((a) => a.id === t.listId)?.label || t.listId;
-    return e === "clone" ? `${r === 1 ? "Item copied" : `${r} items copied`} into ${s}.` : e === "nest" ? `${r === 1 ? "Item nested" : `${r} items nested`} in ${s}.` : e === "transfer" ? `${r === 1 ? "Item moved" : `${r} items moved`} to ${s}.` : `${r === 1 ? "Item reordered" : `${r} items reordered`} in ${s}.`;
+  _messageForMove(e, t, r) {
+    const s = this._lists.find((n) => n.id === r.listId)?.label || r.listId;
+    return e === "clone" ? `${t === 1 ? "Item copied" : `${t} items copied`} into ${s}.` : e === "nest" ? `${t === 1 ? "Item nested" : `${t} items nested`} in ${s}.` : e === "transfer" ? `${t === 1 ? "Item moved" : `${t} items moved`} to ${s}.` : `${t === 1 ? "Item reordered" : `${t} items reordered`} in ${s}.`;
   }
   _persistSnapshot(e) {
-    const r = this.getAttribute("persist-key");
-    if (r)
+    const t = this.getAttribute("persist-key");
+    if (t)
       try {
-        window.localStorage.setItem(r, JSON.stringify(e));
+        window.localStorage.setItem(t, JSON.stringify(e));
       } catch {
       }
   }
@@ -2003,12 +2078,12 @@ class ce extends ee {
     this._liveMessage = e, this._applyLiveMessage();
   }
   _cancelDrag(e) {
-    this._dragState && (this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(A), this._dragState = null, this._pointerGesture = null, this._removeDragImage(), e && this._announce("Drag cancelled."), this._syncAttributesFromState(), this.requestRender());
+    this._stopAutoScroll(), this._dragState && (this._setDraggingVisualState(this._draggingIds(), !1), this._pendingDropTarget = null, this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(P), this._dragState = null, this._pointerGesture = null, this._removeDragImage(), e && this._announce("Drag cancelled."), this._syncAttributesFromState(), this.requestRender());
   }
-  _applyDragImage(e, r) {
+  _applyDragImage(e, t) {
     this._removeDragImage();
-    const t = document.createElement("div");
-    t.textContent = r === 1 ? "Dragging item" : `Dragging ${r} items`, t.style.position = "fixed", t.style.top = "-999px", t.style.left = "-999px", t.style.padding = "8px 12px", t.style.borderRadius = "999px", t.style.background = "rgba(15, 23, 42, 0.92)", t.style.color = "#f8fafc", t.style.font = "600 12px/1 Inter, sans-serif", t.style.pointerEvents = "none", document.body.appendChild(t), e.setDragImage(t, 12, 12), this._dragImage = t;
+    const r = document.createElement("div");
+    r.textContent = t === 1 ? "Dragging item" : `Dragging ${t} items`, r.style.position = "fixed", r.style.top = "-999px", r.style.left = "-999px", r.style.padding = "8px 12px", r.style.borderRadius = "999px", r.style.background = "rgba(15, 23, 42, 0.92)", r.style.color = "#f8fafc", r.style.font = "600 12px/1 Inter, sans-serif", r.style.pointerEvents = "none", document.body.appendChild(r), e.setDragImage(r, 12, 12), this._dragImage = r;
   }
   _removeDragImage() {
     this._dragImage?.remove(), this._dragImage = null;
@@ -2016,61 +2091,68 @@ class ce extends ee {
   _removeDragPreviewOverlay() {
     this._dragPreviewOverlay?.remove(), this._dragPreviewOverlay = null;
   }
-  _applyPointerPreview(e, r, t, i) {
+  _applyPointerPreview(e, t, r, i) {
     this._removeDragImage();
     const s = document.createElement("div");
-    s.textContent = i ? t === 1 ? "Copying item" : `Copying ${t} items` : t === 1 ? "Moving item" : `Moving ${t} items`, s.style.position = "fixed", s.style.top = "0", s.style.left = "0", s.style.zIndex = "2147483647", s.style.padding = "8px 12px", s.style.borderRadius = "999px", s.style.background = "rgba(15, 23, 42, 0.92)", s.style.color = "#f8fafc", s.style.font = "600 12px/1 Inter, sans-serif", s.style.pointerEvents = "none", s.style.boxShadow = "0 12px 28px rgba(15, 23, 42, 0.22)", document.body.appendChild(s), this._dragImage = s, this._movePointerPreview(e, r);
+    s.textContent = i ? r === 1 ? "Copying item" : `Copying ${r} items` : r === 1 ? "Moving item" : `Moving ${r} items`, s.style.position = "fixed", s.style.top = "0", s.style.left = "0", s.style.zIndex = "2147483647", s.style.padding = "8px 12px", s.style.borderRadius = "999px", s.style.background = "rgba(15, 23, 42, 0.92)", s.style.color = "#f8fafc", s.style.font = "600 12px/1 Inter, sans-serif", s.style.pointerEvents = "none", s.style.boxShadow = "0 12px 28px rgba(15, 23, 42, 0.22)", document.body.appendChild(s), this._dragImage = s, this._movePointerPreview(e, t);
   }
-  _movePointerPreview(e, r) {
-    this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(r + 14)}px)`);
+  _movePointerPreview(e, t) {
+    this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(t + 14)}px)`);
   }
   _keyboardDropTargets() {
-    const e = P(this._items), r = $(this._items), t = [], i = (s, a) => {
-      (r.get(D(s, a)) || []).forEach((d) => {
-        const o = e.get(d);
-        !o || o.hidden || (t.push({
-          listId: s,
+    const e = T(this._items), t = E(this._items), r = [], i = this.getAttribute("allow-nesting") !== "false", s = (n, a) => {
+      const d = t.get(k(n, a)) || [];
+      d.forEach((o) => {
+        const u = e.get(o);
+        !u || u.hidden || (r.push({
+          listId: n,
           parentId: a,
-          beforeId: d,
+          beforeId: o,
           mode: "before",
-          label: `Before ${o.label}`
-        }), this.getAttribute("allow-nesting") !== "false" && t.push({
-          listId: s,
-          parentId: d,
+          label: `Before ${u.label}`
+        }), i && r.push({
+          listId: n,
+          parentId: o,
           beforeId: null,
           mode: "inside",
-          label: `Nest inside ${o.label}`
-        }), i(s, d));
-      }), t.push({
-        listId: s,
+          label: `Nest inside ${u.label}`
+        }), s(n, o));
+      }), a ? i && d.length > 0 && r.push({
+        listId: n,
+        parentId: a,
+        beforeId: null,
+        mode: "before",
+        label: "After children"
+      }) : r.push({
+        listId: n,
         parentId: a,
         beforeId: null,
         mode: "before",
-        label: a ? "After children" : `End of ${this._lists.find((d) => d.id === s)?.label || s}`
+        label: `End of ${this._lists.find((o) => o.id === n)?.label || n}`
       });
     };
-    return this._lists.forEach((s) => i(s.id, null)), t.filter((s) => this._canDrop(s, this._dragState?.movedRootIds || []));
+    return this._lists.forEach((n) => s(n.id, null)), r.filter((n) => this._canDrop(n, this._dragState?.movedRootIds || []));
   }
   _initialKeyboardDropTarget(e) {
-    const r = this._items.find((t) => t.id === e);
-    return r ? {
-      listId: r.listId,
-      parentId: r.parentId,
+    const t = this._items.find((r) => r.id === e);
+    return t ? {
+      listId: t.listId,
+      parentId: t.parentId,
       beforeId: e,
       mode: "before"
     } : null;
   }
   _moveKeyboardDropTarget(e) {
     if (!this._dragState) return;
-    const r = this._keyboardDropTargets();
-    if (!r.length) return;
-    const t = Math.max(0, r.findIndex(
+    const t = this._keyboardDropTargets();
+    if (!t.length) return;
+    const r = Math.max(0, t.findIndex(
       (s) => s.listId === this._dragState?.dropTarget?.listId && s.parentId === this._dragState?.dropTarget?.parentId && s.beforeId === this._dragState?.dropTarget?.beforeId && s.mode === this._dragState?.dropTarget?.mode
-    )), i = Math.max(0, Math.min(r.length - 1, t + e));
-    this._setDropTarget(r[i], { announceLabel: r[i].label });
+    )), i = Math.max(0, Math.min(t.length - 1, r + e));
+    this._setDropTarget(t[i], { announceLabel: t[i].label });
   }
 }
-typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", ce);
+typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", he);
 export {
-  ce as UISortable
+  he as UISortable
 };