@editora/ui-core 0.1.22 → 0.1.24

package/dist/sortable.esm.js

@@ -1,43 +1,106 @@
-import { E as ee } from "./ElementBase-YlTLMsGk.mjs";
-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;
+import { E as dt } from "./ElementBase-BeZT54Hj.mjs";
+function K(u, t, e, i = 56, r = 18) {
+  if (!Number.isFinite(u) || !(e > t)) return 0;
+  const s = Math.min(i, (e - t) / 2);
+  return s <= 0 ? 0 : u < t + s ? -Math.ceil(r * Math.min(1, (t + s - u) / s)) : u > e - s ? Math.ceil(r * Math.min(1, (u - (e - 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;
+const ct = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
+function ut(u) {
+  let t = u;
+  for (; t; ) {
+    if (t = t.parentNode instanceof ShadowRoot ? t.parentNode.host : t.parentNode, !(t instanceof HTMLElement)) continue;
+    if (t === t.ownerDocument.body || t === t.ownerDocument.documentElement) return null;
+    const { overflowY: e } = t.ownerDocument.defaultView?.getComputedStyle(t) ?? { overflowY: "" };
+    if (ct.has(e) && t.scrollHeight > t.clientHeight) return t;
   }
   return null;
 }
-const se = 1, oe = 44, ne = 72, ae = `
+const ht = 1, Y = {
+  hintHandle: "Use the handle to drag, or press Space on a focused item to start keyboard reordering.",
+  hintItem: "Drag from anywhere on an item, or press Space on a focused item to start keyboard reordering.",
+  hintCustom: "Use your custom drag handle element, or press Space on a focused item to start keyboard reordering.",
+  hintKeyboard: "Keyboard drag active. Use arrow keys to choose a drop target, Space or Enter to drop, and Escape to cancel.",
+  hintNestGutter: "To nest an item, hold Alt or drop it on the far side of another.",
+  hintNestModifier: "To nest an item, hold Alt while you drop it on another.",
+  hintNestArea: "To nest an item, drop it on the middle of another.",
+  hintPausedSort: "Dragging is paused while alphabetical sorting is active.",
+  hintPausedFilter: "Dragging is paused while the list is filtered.",
+  hintDisabled: "Dragging is currently disabled.",
+  selectedOne: "item selected",
+  selectedMany: "items selected",
+  listReadOnly: "This list is read-only.",
+  listClone: "Dragging from this list creates a copy.",
+  listAccepts: "Accepts drops from: {lists}",
+  listFull: "This list is full ({max} items).",
+  emptyList: "Drop items here.",
+  dropHere: "Drop here",
+  nestHere: "Nest here",
+  badgeSelected: "Selected",
+  badgeClone: "Clone on drag",
+  badgePinned: "Pinned",
+  dropPreview: "Drop preview",
+  copyPreview: "Copy preview",
+  releaseMove: "Release to place this item here.",
+  releaseMoveMany: "Release to place this selection here.",
+  releaseCopy: "Release to add a copy here.",
+  movingOne: "Moving item",
+  movingMany: "Moving {count} items",
+  copyingOne: "Copying item",
+  copyingMany: "Copying {count} items",
+  announceSelectedMany: "{count} items selected.",
+  announceDragDisabled: "Dragging is disabled right now.",
+  announceDragging: "Dragging {label}.",
+  announceDraggingMany: "Dragging {count} items.",
+  announceDraggingCopy: "Dragging {label} as a copy.",
+  announceDraggingCopyMany: "Dragging {count} items as a copy.",
+  announceCancelled: "Drag cancelled.",
+  announceRejected: "That move is not allowed.",
+  announceLifted: "Lifted {label}.",
+  announceLiftedMany: "Lifted {count} items.",
+  announceLiftedHelp: "Use arrow keys to choose a destination.",
+  announceCopiedOne: "Item copied into {list}.",
+  announceCopiedMany: "{count} items copied into {list}.",
+  announceNestedOne: "Item nested in {list}.",
+  announceNestedMany: "{count} items nested in {list}.",
+  announceMovedOne: "Item moved to {list}.",
+  announceMovedMany: "{count} items moved to {list}.",
+  announceReorderedOne: "Item reordered in {list}.",
+  announceReorderedMany: "{count} items reordered in {list}.",
+  targetBefore: "Before {label}",
+  targetInside: "Nest inside {label}",
+  targetEnd: "End of {list}",
+  targetAfterChildren: "After children"
+}, W = 44, Q = 72, Z = 350, pt = 10, gt = `
   :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, #526175);
-    --ui-sortable-shadow:
-      0 1px 3px rgba(15, 23, 42, 0.06),
-      0 16px 34px rgba(15, 23, 42, 0.08);
-    --ui-sortable-radius: 24px;
-    --ui-sortable-panel-radius: 18px;
-    --ui-sortable-item-radius: 16px;
-    --ui-sortable-handle-radius: 12px;
-    --ui-sortable-gap: 16px;
-    --ui-sortable-list-gap: 8px;
-    --ui-sortable-item-gap: 12px;
-    --ui-sortable-dropzone-size: 10px;
-    --ui-sortable-dropzone-inside-size: 16px;
-    --ui-sortable-dropzone-container-min-block-size: 76px;
+    --ui-sortable-muted: var(--ui-color-muted, #5b6778);
+    --ui-sortable-lane: color-mix(in srgb, var(--ui-sortable-text) 3.5%, var(--ui-sortable-surface));
+    --ui-sortable-card: var(--ui-sortable-surface);
+    --ui-sortable-surface-muted: var(--ui-sortable-lane);
+    --ui-sortable-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 62%, transparent);
+    --ui-sortable-border-strong: color-mix(in srgb, var(--ui-sortable-text) 24%, var(--ui-sortable-surface));
+    --ui-sortable-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    --ui-sortable-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+    --ui-sortable-card-shadow-hover: 0 3px 10px rgba(15, 23, 42, 0.1);
+    --ui-sortable-lift-shadow:
+      0 22px 44px -10px rgba(15, 23, 42, 0.32),
+      0 8px 16px rgba(15, 23, 42, 0.14);
+    --ui-sortable-radius: 14px;
+    --ui-sortable-panel-radius: 14px;
+    --ui-sortable-item-radius: 10px;
+    --ui-sortable-handle-radius: 6px;
+    --ui-sortable-gap: 12px;
+    --ui-sortable-list-gap: 6px;
+    --ui-sortable-item-gap: 6px;
+    --ui-sortable-list-min-size: 260px;
+    --ui-sortable-dropzone-size: 0px;
+    --ui-sortable-dropzone-hit-size: 7px;
+    --ui-sortable-dropzone-inside-size: 0px;
+    --ui-sortable-dropzone-container-min-block-size: 56px;
     --ui-sortable-dropzone-container-min-inline-size: 180px;
-    --ui-sortable-indent: 22px;
+    --ui-sortable-indent: 16px;
     display: block;
     min-inline-size: 0;
     color: var(--ui-sortable-text);
@@ -52,7 +115,7 @@ const se = 1, oe = 44, ne = 72, ae = `
 
   .root {
     display: grid;
-    gap: 14px;
+    gap: 10px;
     min-inline-size: 0;
   }
 
@@ -61,13 +124,25 @@ const se = 1, oe = 44, ne = 72, ae = `
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 10px 16px;
+    gap: 6px 16px;
     padding: 0 2px;
     color: var(--ui-sortable-muted);
-    font-size: 13px;
+    font-size: 12px;
     line-height: 1.5;
   }
 
+  /* hide-toolbar: the hint is still what the lists are described by, so it is hidden from sight only. */
+  .toolbar[data-hidden="true"] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
   .helper {
     display: inline-flex;
     align-items: center;
@@ -75,40 +150,54 @@ const se = 1, oe = 44, ne = 72, ae = `
     min-inline-size: 0;
   }
 
+  .selection-summary[data-count="0"] {
+    display: none;
+  }
+
   .selection-pill {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: 28px;
-    min-block-size: 24px;
-    padding-inline: 8px;
+    min-inline-size: 22px;
+    min-block-size: 20px;
+    padding-inline: 7px;
     border-radius: 999px;
     background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
     color: color-mix(in srgb, var(--ui-sortable-accent) 84%, var(--ui-sortable-text));
+    font-size: 11.5px;
     font-weight: 700;
   }
 
+  /* Lists sit side by side and scroll sideways when they do not fit (a board), instead of wrapping onto
+     rows. One list fills the width. The padding gives card shadows and focus rings room inside the
+     scroller; the negative margin hands that room back to the layout. */
   .lists {
     display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(min(var(--ui-sortable-list-min-size), 100%), 1fr);
     gap: var(--ui-sortable-gap);
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     min-inline-size: 0;
+    padding: 4px;
+    margin: -4px;
+    overflow: auto hidden;
+    overscroll-behavior-x: contain;
+  }
+
+  .lists,
+  .items {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--ui-sortable-text) 28%, transparent) transparent;
   }
 
   .list {
     display: grid;
     grid-template-rows: auto 1fr;
-    gap: 12px;
+    gap: 10px;
     min-inline-size: 0;
-    padding: 16px;
+    padding: 12px;
     border: 1px solid var(--ui-sortable-border);
     border-radius: var(--ui-sortable-radius);
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-surface) 96%, transparent),
-        color-mix(in srgb, var(--ui-sortable-accent) 4%, var(--ui-sortable-surface))
-      );
+    background: var(--ui-sortable-lane);
     box-shadow: var(--ui-sortable-shadow);
   }
 
@@ -117,6 +206,7 @@ const se = 1, oe = 44, ne = 72, ae = `
     flex-wrap: nowrap;
     overflow: auto hidden;
     align-items: stretch;
+    min-block-size: 0;
   }
 
   /* The cards live inside one root .tree wrapper, which is a vertical grid. Without this the
@@ -126,20 +216,26 @@ const se = 1, oe = 44, ne = 72, ae = `
     flex-wrap: nowrap;
     align-items: stretch;
     min-inline-size: min-content;
+    margin-block: 0;
+    margin-inline: calc(var(--ui-sortable-list-gap) / -2);
   }
 
   .list[data-orientation="horizontal"] .items > .tree > .item-shell {
     flex: 0 0 auto;
     min-inline-size: min(220px, 70vw);
+    align-content: start;
+    padding-block: 0;
+    padding-inline: calc(var(--ui-sortable-list-gap) / 2);
   }
 
   .list[data-disabled="true"] {
-    opacity: 0.68;
+    opacity: 0.62;
   }
 
   .list-header {
     display: grid;
-    gap: 4px;
+    gap: 2px;
+    padding: 2px 4px 0;
   }
 
   .list-custom-header:empty {
@@ -162,9 +258,10 @@ const se = 1, oe = 44, ne = 72, ae = `
   }
 
   .list-label {
-    font-size: 14px;
+    font-size: 13px;
     line-height: 1.4;
-    font-weight: 700;
+    font-weight: 650;
+    letter-spacing: 0.005em;
     color: var(--ui-sortable-text);
   }
 
@@ -172,36 +269,85 @@ const se = 1, oe = 44, ne = 72, ae = `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: 28px;
-    min-block-size: 24px;
-    padding-inline: 8px;
+    min-inline-size: 22px;
+    min-block-size: 20px;
+    padding-inline: 7px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
+    background: color-mix(in srgb, var(--ui-sortable-text) 7%, transparent);
     color: var(--ui-sortable-muted);
-    font-size: 12px;
-    font-weight: 700;
+    font-size: 11.5px;
+    font-weight: 650;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A list at its maxItems takes nothing more: the count turns to a warning colour. */
+  .list[data-full="true"] .list-count {
+    background: color-mix(in srgb, var(--ui-sortable-warning, #d97706) 16%, transparent);
+    color: color-mix(in srgb, var(--ui-sortable-warning, #d97706) 80%, var(--ui-sortable-text));
   }
 
   .list-description,
-  .list-helper,
-  .empty {
+  .list-helper {
     color: var(--ui-sortable-muted);
     font-size: 12px;
-    line-height: 1.55;
+    line-height: 1.5;
+  }
+
+  .list-helper {
+    font-size: 11.5px;
+    opacity: 0.85;
+  }
+
+  .empty {
+    display: grid;
+    place-items: center;
+    min-block-size: 64px;
+    margin-block: calc(var(--ui-sortable-list-gap) / 2);
+    padding: 14px;
+    border: 1px dashed var(--ui-sortable-border-strong);
+    border-radius: var(--ui-sortable-item-radius);
+    color: var(--ui-sortable-muted);
+    font-size: 12.5px;
+    line-height: 1.5;
+    text-align: center;
+    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
+  }
+
+  .empty:has(+ .dropzone[data-active="true"]) {
+    border-color: var(--ui-sortable-accent);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 7%, transparent);
+    color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
   }
 
   .items {
     display: grid;
     align-content: start;
-    gap: var(--ui-sortable-list-gap);
-    min-block-size: 140px;
+    gap: 0;
+    min-block-size: 88px;
     min-inline-size: 0;
   }
 
+  /* A list with a height of its own scrolls by itself. The padding (and the cards' own spacing) gives shadows and
+     focus rings room inside the scroller; the negative margin hands that room back to the layout. The wrapper's
+     negative margin is dropped here: inside a scroller it would count as overflow, and a list whose cards all fit
+     would still scroll by a few pixels. */
+  .items[data-scroll="true"] {
+    max-block-size: var(--ui-sortable-list-max-block-size);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 1px 4px;
+    margin: -4px;
+  }
+
+  .items[data-scroll="true"] > .tree {
+    margin-block: 0;
+  }
+
   .tree {
     display: grid;
-    gap: var(--ui-sortable-list-gap);
+    gap: 0;
     min-inline-size: 0;
+    margin-block: calc(var(--ui-sortable-list-gap) / -2);
   }
 
   .list-custom-empty:empty {
@@ -216,169 +362,235 @@ const se = 1, oe = 44, ne = 72, ae = `
     display: none;
   }
 
+  /* The cards are spaced by the shell's padding, not by a grid gap: the drop rails between them take
+     no height, so the list is as tall as its cards. */
   .item-shell {
     display: grid;
-    gap: 8px;
+    gap: 0;
     min-inline-size: 0;
+    padding-block: calc(var(--ui-sortable-list-gap) / 2);
   }
 
   .item {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
+    align-items: center;
     gap: var(--ui-sortable-item-gap);
     min-inline-size: 0;
-    padding: 12px;
-    border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 82%, transparent);
+    padding: 9px 12px 9px 6px;
+    border: 1px solid var(--ui-sortable-border);
     border-radius: var(--ui-sortable-item-radius);
-    background: var(--ui-sortable-surface-muted);
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-    will-change: transform, opacity, box-shadow, border-color, background;
+    background: var(--ui-sortable-card);
+    box-shadow: var(--ui-sortable-card-shadow);
     transition:
-      transform 180ms ease,
-      opacity 180ms ease,
-      box-shadow 180ms ease,
-      border-color 180ms ease,
-      background 180ms ease;
+      opacity 160ms ease,
+      box-shadow 160ms ease,
+      border-color 160ms ease,
+      background 160ms ease;
+  }
+
+  .item:hover {
+    border-color: var(--ui-sortable-border-strong);
+    box-shadow: var(--ui-sortable-card-shadow-hover);
+  }
+
+  .item:focus {
+    outline: none;
+  }
+
+  .item:focus-visible {
+    outline: 2px solid var(--ui-sortable-accent);
+    outline-offset: 2px;
   }
 
   .item[data-drag-handle-mode="item"],
   .item[data-drag-handle-mode="custom"] {
     grid-template-columns: minmax(0, 1fr);
+    padding-inline-start: 12px;
   }
 
   .item[data-drag-handle-mode="item"] {
     cursor: grab;
   }
 
+  /* A card that is dragged by its body is held to lift on touch: no text selection or callout while holding. */
+  .item[data-drag-handle-mode="item"],
+  .item[data-drag-handle-mode="custom"] {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+
   .item[data-drag-handle-mode="item"][data-dragging="true"] {
     cursor: grabbing;
   }
 
   .item[data-selected="true"] {
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 32%, var(--ui-sortable-border));
-    background: color-mix(in srgb, var(--ui-sortable-accent) 11%, var(--ui-sortable-surface));
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 60%, var(--ui-sortable-border));
+    background: color-mix(in srgb, var(--ui-sortable-accent) 7%, var(--ui-sortable-card));
     box-shadow:
-      0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent),
-      0 10px 24px rgba(15, 23, 42, 0.08);
-  }
-
-  .item[data-focused="true"] {
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 42%, var(--ui-sortable-border));
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
-      0 10px 24px rgba(15, 23, 42, 0.08);
+      0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 28%, transparent),
+      var(--ui-sortable-card-shadow);
   }
 
   .item[data-drop-inside-active="true"] {
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 48%, var(--ui-sortable-border));
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
-        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
-      );
+    border-color: var(--ui-sortable-accent);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
-      0 14px 30px rgba(15, 23, 42, 0.1);
+      0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent),
+      var(--ui-sortable-card-shadow);
   }
 
+  /* While a card is being dragged its place in the list stays as an empty slot, so the list does not
+     jump; the card itself is the ghost that follows the pointer. */
   .item[data-dragging="true"] {
-    opacity: 0.48;
-    transform: scale(0.985);
-    transition-duration: 0ms, 180ms, 180ms, 180ms, 180ms;
+    border-style: dashed;
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 45%, var(--ui-sortable-border));
+    background: color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-card));
+    box-shadow: none;
+  }
+
+  .item[data-dragging="true"] > * {
+    visibility: hidden;
   }
 
+  /* The keyboard drag shows the card at its destination as a quiet dashed card. */
   .item.item-placeholder {
     grid-template-columns: 1fr;
+    padding-inline-start: 12px;
     border-style: dashed;
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
-        color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
-      );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
-      0 12px 26px rgba(15, 23, 42, 0.08);
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 55%, var(--ui-sortable-border));
+    background: color-mix(in srgb, var(--ui-sortable-accent) 7%, var(--ui-sortable-card));
+    box-shadow: none;
   }
 
   .placeholder-content {
     display: grid;
-    gap: 6px;
+    gap: 3px;
     min-inline-size: 0;
   }
 
   .placeholder-kicker {
-    font-size: 11px;
+    font-size: 10.5px;
     line-height: 1.4;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: color-mix(in srgb, var(--ui-sortable-accent) 72%, var(--ui-sortable-text));
+    color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
   }
 
   .placeholder-title {
-    font-size: 14px;
+    font-size: 13.5px;
     line-height: 1.4;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-sortable-text);
   }
 
   .placeholder-description {
     color: var(--ui-sortable-muted);
     font-size: 12px;
-    line-height: 1.55;
+    line-height: 1.5;
   }
 
-  .drag-preview-overlay {
+  /* The card that follows the pointer: a copy of the real card, lifted. */
+  .item.item-ghost {
     position: fixed;
-    inset: auto auto auto auto;
-    top: -9999px;
-    left: -9999px;
-    z-index: 2147483646;
+    inset: 0 auto auto 0;
+    z-index: 2147483647;
     box-sizing: border-box;
-    inline-size: min(320px, calc(100vw - 32px));
-    padding: 12px;
-    border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 50%, var(--ui-sortable-border));
-    border-radius: var(--ui-sortable-item-radius);
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface)),
-        color-mix(in srgb, var(--ui-sortable-accent) 6%, var(--ui-sortable-surface-muted))
-      );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 18%, transparent),
-      0 18px 40px rgba(15, 23, 42, 0.12);
+    max-inline-size: calc(100vw - 16px);
+    margin: 0;
     pointer-events: none;
-    opacity: 0;
-    transition: opacity 120ms ease;
+    cursor: grabbing;
+    border-color: color-mix(in srgb, var(--ui-sortable-accent) 55%, var(--ui-sortable-border));
+    background: var(--ui-sortable-card);
+    box-shadow: var(--ui-sortable-lift-shadow);
+    rotate: 1.2deg;
+    scale: 1.025;
+    transition: none;
+    will-change: transform;
+    animation: ui-sortable-lift 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
   }
 
-  .drag-preview-overlay[data-visible="true"] {
+  .item.item-ghost[data-count="stack"] {
+    box-shadow:
+      5px 5px 0 -1px var(--ui-sortable-card),
+      5px 5px 0 0 var(--ui-sortable-border-strong),
+      10px 10px 0 -2px var(--ui-sortable-card),
+      10px 10px 0 -1px var(--ui-sortable-border-strong),
+      var(--ui-sortable-lift-shadow);
+  }
+
+  .item.item-ghost[data-refused] {
+    border-color: var(--ui-sortable-danger, #dc2626);
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-sortable-danger, #dc2626) 22%, transparent),
+      var(--ui-sortable-lift-shadow);
+  }
+
+  .item.item-ghost[data-refused] .handle {
+    color: var(--ui-sortable-danger, #dc2626);
+  }
+
+  .item.item-ghost .handle {
     opacity: 1;
+    color: var(--ui-sortable-accent);
+    cursor: grabbing;
   }
 
-  .drag-preview-overlay .placeholder-description {
-    display: inline-block;
-    max-inline-size: 190px;
-    padding: 4px 8px;
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--ui-sortable-surface) 94%, white 6%);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-border) 72%, transparent);
-    color: color-mix(in srgb, var(--ui-sortable-text) 84%, var(--ui-sortable-accent));
-    font-weight: 500;
+  .item.item-ghost[data-compact="true"] .item-description,
+  .item.item-ghost[data-compact="true"] .item-meta {
+    display: none;
+  }
+
+  .ghost-badge {
+    position: absolute;
+    inset-block-start: -9px;
+    inset-inline-end: -9px;
+    min-inline-size: 22px;
+    block-size: 22px;
+    padding-inline: 6px;
+    box-sizing: border-box;
+    border-radius: 999px;
+    background: var(--ui-sortable-accent);
+    color: var(--ui-sortable-accent-contrast, #ffffff);
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 22px;
+    text-align: center;
+    box-shadow: 0 0 0 2px var(--ui-sortable-card);
+  }
+
+  /* Fallback when the dragged card cannot be copied. */
+  .drag-pill {
+    position: fixed;
+    inset: 0 auto auto 0;
+    z-index: 2147483647;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: var(--ui-sortable-text);
+    color: var(--ui-sortable-surface);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    pointer-events: none;
+    box-shadow: var(--ui-sortable-lift-shadow);
+  }
+
+  @keyframes ui-sortable-lift {
+    from {
+      rotate: 0deg;
+      scale: 1;
+    }
   }
 
   .item[data-disabled="true"] {
-    opacity: 0.58;
+    opacity: 0.55;
   }
 
   .item-content {
     display: grid;
-    gap: 4px;
+    gap: 2px;
     min-inline-size: 0;
   }
 
@@ -409,9 +621,9 @@ const se = 1, oe = 44, ne = 72, ae = `
   }
 
   .item-title {
-    font-size: 14px;
+    font-size: 13.5px;
     line-height: 1.4;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-sortable-text);
     overflow-wrap: anywhere;
   }
@@ -419,35 +631,41 @@ const se = 1, oe = 44, ne = 72, ae = `
   .item-description {
     color: var(--ui-sortable-muted);
     font-size: 12px;
-    line-height: 1.55;
+    line-height: 1.5;
     overflow-wrap: anywhere;
   }
 
   .item-meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 6px;
+    gap: 4px;
+  }
+
+  .item-meta:has(.item-badge:not([hidden]):not(.drop-badge)),
+  .item[data-drop-inside-active="true"] .item-meta {
+    margin-block-start: 4px;
   }
 
   .item-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 4px 8px;
+    padding: 1px 7px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, transparent);
+    background: color-mix(in srgb, var(--ui-sortable-text) 6%, transparent);
     color: var(--ui-sortable-muted);
-    font-size: 11px;
+    font-size: 10.5px;
     font-weight: 600;
+    line-height: 1.6;
   }
 
-  .item-badge[hidden] {
-    display: none;
+  .item-badge.selection-badge {
+    background: color-mix(in srgb, var(--ui-sortable-accent) 14%, transparent);
+    color: color-mix(in srgb, var(--ui-sortable-accent) 82%, var(--ui-sortable-text));
   }
 
-  .item[data-drop-inside-active="true"] .item-badge.drop-badge {
-    background: color-mix(in srgb, var(--ui-sortable-accent) 18%, var(--ui-sortable-surface));
-    color: color-mix(in srgb, var(--ui-sortable-accent) 78%, var(--ui-sortable-text));
+  .item-badge[hidden] {
+    display: none;
   }
 
   .item-badge.drop-badge {
@@ -456,263 +674,220 @@ const se = 1, oe = 44, ne = 72, ae = `
 
   .item[data-drop-inside-active="true"] .item-badge.drop-badge {
     display: inline-flex;
+    background: color-mix(in srgb, var(--ui-sortable-accent) 18%, var(--ui-sortable-card));
+    color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
   }
 
+  /* A quiet grip: faint until the card is hovered, focused, selected or dragged. */
   .handle {
     display: inline-grid;
     place-items: center;
-    inline-size: 34px;
-    block-size: 34px;
+    inline-size: 22px;
+    block-size: 28px;
     margin: 0;
     padding: 0;
-    border: 1px solid color-mix(in srgb, var(--ui-sortable-border) 86%, transparent);
+    border: 0;
     border-radius: var(--ui-sortable-handle-radius);
-    background: color-mix(in srgb, var(--ui-sortable-surface) 92%, transparent);
+    background: transparent;
     color: var(--ui-sortable-muted);
+    opacity: 0.4;
     cursor: grab;
     touch-action: none;
     user-select: none;
     -webkit-user-select: none;
     transition:
-      transform 160ms ease,
-      color 160ms ease,
-      border-color 160ms ease,
-      background 160ms ease;
+      opacity 140ms ease,
+      color 140ms ease,
+      background 140ms ease;
+  }
+
+  .item:hover .handle,
+  .item:focus-visible .handle,
+  .item[data-selected="true"] .handle {
+    opacity: 1;
   }
 
   .handle:hover {
-    color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 26%, var(--ui-sortable-border));
-    background: color-mix(in srgb, var(--ui-sortable-accent) 8%, var(--ui-sortable-surface));
+    color: var(--ui-sortable-text);
+    background: color-mix(in srgb, var(--ui-sortable-text) 8%, transparent);
   }
 
   .handle:active {
     cursor: grabbing;
-    transform: scale(0.96);
   }
 
   .handle[disabled] {
     cursor: not-allowed;
-    opacity: 0.48;
+    opacity: 0.25;
   }
 
   .handle svg {
-    inline-size: 16px;
-    block-size: 16px;
+    inline-size: 14px;
+    block-size: 14px;
+    fill: currentColor;
   }
 
+  /* Nested cards hang off a guide line under their parent. */
   .children {
     display: grid;
-    gap: var(--ui-sortable-list-gap);
-    padding-inline-start: var(--ui-sortable-indent);
+    gap: 0;
     min-inline-size: 0;
+    margin-inline-start: 11px;
+    padding-block-start: calc(var(--ui-sortable-list-gap) / 2);
+    padding-inline-start: var(--ui-sortable-indent);
+    border-inline-start: 1px solid var(--ui-sortable-border-strong);
   }
 
+  /* Drop rails take no height: they are the thin lines between cards, with an invisible hit area
+     around them. The line shows only on the rail the pointer is over. */
   .dropzone {
     position: relative;
     display: block;
+    block-size: var(--ui-sortable-dropzone-size);
     min-block-size: var(--ui-sortable-dropzone-size);
     min-inline-size: 0;
-    border-radius: 999px;
-    will-change: opacity, background;
-    transition: opacity 140ms ease, background 140ms ease;
-  }
-
-  .root[data-dropzone-style="container"] .dropzone {
-    display: grid;
-    place-items: center;
-    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
-    inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
-    max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
-    padding: 12px;
-    border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 40%, var(--ui-sortable-border));
-    border-radius: var(--ui-sortable-item-radius);
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-accent) 9%, var(--ui-sortable-surface)),
-        color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-surface-muted))
-      );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 12%, transparent),
-      0 8px 18px rgba(15, 23, 42, 0.05);
-    opacity: 0.82;
-    overflow: hidden;
-  }
-
-  .list[data-orientation="horizontal"] .dropzone {
-    min-block-size: auto;
-    min-inline-size: 16px;
-    align-self: stretch;
-  }
-
-  .root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
-    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
-    min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
-    inline-size: auto;
-    align-self: stretch;
   }
 
   .dropzone::before {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
+    inset-block-start: 0;
     inset-inline: 0;
     block-size: 2px;
-    transform: translateY(-50%) scaleX(0.42);
-    transform-origin: center;
+    margin-block-start: -1px;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-sortable-accent) 22%, transparent);
-    transition: transform 160ms ease, background 160ms ease;
+    background: var(--ui-sortable-accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
+    opacity: 0;
+    transform: scaleX(0.35);
+    transform-origin: center;
+    transition: opacity 120ms ease, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
-  .list[data-orientation="horizontal"] .dropzone::before {
-    inset-block: 0;
-    inset-inline-start: 50%;
-    inset-inline-end: auto;
-    inline-size: 2px;
-    block-size: 100%;
-    transform: translateX(-50%) scaleY(0.24);
+  .dropzone::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block: calc(var(--ui-sortable-dropzone-hit-size) * -1);
   }
 
-  .dropzone[data-active="true"] {
-    opacity: 1;
+  /* The last rail of a group only reaches up: below the last card the list body is already a drop area, and a
+     hit area hanging out of the bottom would count as overflow in a list that scrolls. */
+  .dropzone:last-child::after {
+    inset-block-end: 0;
   }
 
-  .root[data-dropzone-style="container"] .dropzone[data-active="true"] {
-    border-color: color-mix(in srgb, var(--ui-sortable-accent) 56%, var(--ui-sortable-border));
-    background:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-sortable-accent) 14%, var(--ui-sortable-surface)),
-        color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-surface-muted))
-      );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in srgb, var(--ui-sortable-accent) 16%, transparent),
-      0 12px 24px rgba(15, 23, 42, 0.08);
+  .dropzone[data-active="true"]::before {
+    opacity: 1;
+    transform: scaleX(1);
   }
 
-  .list[data-orientation="horizontal"] .dropzone[data-active="true"] {
+  .root[data-drop-indicator-visibility="always"] .dropzone::before {
     opacity: 1;
+    transform: scaleX(1);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 22%, transparent);
+    box-shadow: none;
   }
 
-  .dropzone[data-active="true"]::before {
-    transform: translateY(-50%) scaleX(1);
-    background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
+  .root[data-drop-indicator-visibility="always"] .dropzone[data-active="true"]::before {
+    background: var(--ui-sortable-accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-sortable-accent) 20%, transparent);
   }
 
-  .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
-    transform: translateX(-50%) scaleY(1);
+  /* A card shows "drop inside" by highlighting itself, so its inside rail draws nothing. */
+  .root[data-dropzone-style="indicator"] .dropzone[data-mode="inside"]::before,
+  .root[data-dropzone-style="indicator"] .dropzone[data-mode="inside"]::after {
+    display: none;
   }
 
-  .dropzone[data-mode="inside"] {
-    min-block-size: var(--ui-sortable-dropzone-inside-size);
-    margin-block-start: -2px;
-    padding-inline-start: 6px;
+  .list[data-orientation="horizontal"] .dropzone {
+    align-self: stretch;
+    block-size: auto;
+    min-block-size: 0;
+    inline-size: var(--ui-sortable-dropzone-size);
+    min-inline-size: var(--ui-sortable-dropzone-size);
   }
 
-  .root[data-dropzone-style="container"] .dropzone[data-mode="inside"] {
-    min-block-size: max(
-      calc(var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size)) * 0.78),
-      var(--ui-sortable-dropzone-container-min-block-size)
-    );
+  .list[data-orientation="horizontal"] .dropzone::before {
+    inset-block: 0;
+    inset-inline: auto;
+    inset-inline-start: 0;
+    inline-size: 2px;
+    block-size: auto;
     margin-block-start: 0;
-    padding-inline-start: 12px;
+    margin-inline-start: -1px;
+    transform: scaleY(0.35);
   }
 
-  .dropzone[data-mode="inside"]::before {
-    inset-inline-start: 8px;
-    inset-inline-end: auto;
-    inline-size: 42px;
+  .list[data-orientation="horizontal"] .dropzone::after {
+    inset-block: 0;
+    inset-inline: calc(var(--ui-sortable-dropzone-hit-size) * -1);
   }
 
-  .dropzone-label {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    inset-inline-end: auto;
-    transform: translate(-50%, -50%) scale(0.98);
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--ui-sortable-surface) 84%, transparent);
-    color: var(--ui-sortable-muted);
-    font-size: 11px;
-    opacity: 0;
-    transition: opacity 120ms ease, transform 120ms ease;
-    pointer-events: none;
+  .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before,
+  .root[data-drop-indicator-visibility="always"] .list[data-orientation="horizontal"] .dropzone::before {
+    transform: scaleY(1);
   }
 
-  .root[data-dropzone-style="container"] .dropzone::before {
+  .dropzone-label {
     display: none;
   }
 
-  .root[data-dropzone-style="container"] .dropzone-label {
-    position: static;
-    inset: auto;
-    transform: none;
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-    color: color-mix(in srgb, var(--ui-sortable-accent) 76%, var(--ui-sortable-text));
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-    opacity: 1;
-    white-space: nowrap;
+  /* dropzone-style="container": the target is drawn as a whole dashed card in place. */
+  .root[data-dropzone-style="container"] .dropzone {
+    display: grid;
+    place-items: center;
+    block-size: auto;
+    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
+    inline-size: min(100%, var(--ui-sortable-dropzone-match-inline-size, 100%));
+    max-inline-size: var(--ui-sortable-dropzone-container-max-inline-size, none);
+    padding: 10px;
+    border: 1px dashed color-mix(in srgb, var(--ui-sortable-accent) 45%, var(--ui-sortable-border));
+    border-radius: var(--ui-sortable-item-radius);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 5%, var(--ui-sortable-card));
+    opacity: 0.85;
+    overflow: hidden;
   }
 
-  .dropzone[data-active="true"] .dropzone-label {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+  .root[data-dropzone-style="container"] .list[data-orientation="horizontal"] .dropzone {
+    min-block-size: var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size));
+    min-inline-size: var(--ui-sortable-dropzone-match-inline-size, var(--ui-sortable-dropzone-container-min-inline-size));
+    inline-size: auto;
   }
 
-  .root[data-drag-preview="true"] .dropzone-label {
-    opacity: 0;
+  .root[data-dropzone-style="container"] .dropzone::before,
+  .root[data-dropzone-style="container"] .dropzone::after {
+    display: none;
   }
 
-  .root[data-dropzone-style="container"][data-drag-preview="true"] .dropzone-label {
+  .root[data-dropzone-style="container"] .dropzone[data-active="true"] {
     opacity: 1;
+    border-color: var(--ui-sortable-accent);
+    background: color-mix(in srgb, var(--ui-sortable-accent) 10%, var(--ui-sortable-card));
   }
 
-  .root[data-drop-indicator-visibility="active"] .dropzone {
-    opacity: 0;
+  .root[data-dropzone-style="container"] .dropzone[data-mode="inside"] {
+    min-block-size: max(
+      calc(var(--ui-sortable-dropzone-match-block-size, var(--ui-sortable-dropzone-container-min-block-size)) * 0.78),
+      var(--ui-sortable-dropzone-container-min-block-size)
+    );
+  }
+
+  .root[data-dropzone-style="container"] .dropzone-label {
+    display: block;
+    color: color-mix(in srgb, var(--ui-sortable-accent) 80%, var(--ui-sortable-text));
+    font-size: 12px;
+    font-weight: 650;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
   }
 
   .root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone {
     display: none;
-    opacity: 0;
   }
 
   .root[data-dropzone-style="container"][data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
     display: grid;
-    opacity: 1;
-  }
-
-  .root[data-drop-indicator-visibility="active"] .dropzone::before {
-    background: transparent;
-    transform: translateY(-50%) scaleX(0.16);
-  }
-
-  .root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone::before {
-    transform: translateX(-50%) scaleY(0.16);
-  }
-
-  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] {
-    opacity: 1;
-  }
-
-  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"]::before {
-    transform: translateY(-50%) scaleX(1);
-    background: color-mix(in srgb, var(--ui-sortable-accent) 86%, var(--ui-sortable-text));
-  }
-
-  .root[data-drop-indicator-visibility="active"] .list[data-orientation="horizontal"] .dropzone[data-active="true"]::before {
-    transform: translateX(-50%) scaleY(1);
-  }
-
-  .root[data-drop-indicator-visibility="active"] .dropzone[data-active="true"] .dropzone-label {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
   }
 
   .sr-only {
@@ -727,14 +902,26 @@ const se = 1, oe = 44, ne = 72, ae = `
     border: 0;
   }
 
+  /* Touch screens have no hover: keep the grip clearly visible. */
+  @media (hover: none) {
+    .handle {
+      opacity: 1;
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .item,
     .handle,
-    .dropzone,
-    .dropzone::before,
-    .dropzone-label {
+    .empty,
+    .dropzone::before {
       transition: none;
     }
+
+    .item.item-ghost {
+      animation: none;
+      rotate: 0deg;
+      scale: 1;
+    }
   }
 
   @media (forced-colors: active) {
@@ -747,257 +934,294 @@ const se = 1, oe = 44, ne = 72, ae = `
       border-color: CanvasText;
     }
 
+    .item[data-selected="true"],
+    .item:focus-visible {
+      outline: 2px solid Highlight;
+    }
+
     .dropzone::before {
       background: Highlight;
+      box-shadow: none;
     }
   }
 `;
-function K(l) {
-  if (!l) return [];
+function V(u) {
+  if (!u) return [];
   try {
-    const e = JSON.parse(l);
-    return Array.isArray(e) ? e : [];
+    const t = JSON.parse(u);
+    return Array.isArray(t) ? t : [];
   } catch {
     return [];
   }
 }
-function I(l) {
-  return l.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function tt(u) {
+  if (u === void 0) return "";
+  let t;
+  try {
+    t = JSON.stringify(u) ?? "";
+  } catch {
+    return "";
+  }
+  let e = 5381;
+  for (let i = 0; i < t.length; i += 1) e = (e << 5) + e + t.charCodeAt(i) | 0;
+  return (e >>> 0).toString(36);
 }
-function k(l, e) {
-  return `${l}::${e ?? "__root__"}`;
+function mt(u) {
+  if (!u) return {};
+  try {
+    const t = JSON.parse(u);
+    if (!t || typeof t != "object" || Array.isArray(t)) return {};
+    const e = {};
+    return Object.keys(Y).forEach((i) => {
+      typeof t[i] == "string" && (e[i] = t[i]);
+    }), e;
+  } catch {
+    return {};
+  }
 }
-function j(l) {
-  return l ? [l.listId, l.parentId ?? "", l.beforeId ?? "", l.mode].join("::") : "";
+function ot(u) {
+  if (typeof u == "number") return Number.isFinite(u) && u > 0 ? `${u}px` : void 0;
+  if (typeof u != "string") return;
+  const t = u.trim();
+  return /^(?:\d+\.?\d*|\.\d+)(?:px|rem|em|ch|vh|svh|dvh|vw|%)$/.test(t) ? t : void 0;
 }
-function B(l, e) {
-  return j(l) === j(e);
+function v(u) {
+  return u.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function le(l) {
-  if (!l || l === "none")
-    return { x: 1, y: 1 };
-  const e = l.match(/^matrix3d\((.+)\)$/);
-  if (e) {
-    const r = e[1].split(",").map((i) => Number.parseFloat(i.trim()));
-    if (r.length === 16 && r.every((i) => Number.isFinite(i)))
-      return {
-        x: r[0] || 1,
-        y: r[5] || 1
-      };
-  }
-  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(n * n + a * a) || 1
-      };
-    }
+function w(u, t) {
+  return `${u}::${t ?? "__root__"}`;
+}
+function et(u) {
+  return u ? [u.listId, u.parentId ?? "", u.beforeId ?? "", u.mode].join("::") : "";
+}
+function H(u, t) {
+  return et(u) === et(t);
+}
+function ft(u) {
+  return u === "item" ? "item" : "handle";
+}
+function A(u) {
+  return { ...u };
+}
+function B(u) {
+  if (u == null || typeof u != "object") return u;
+  try {
+    return JSON.parse(JSON.stringify(u));
+  } catch {
+    return u;
   }
-  return { x: 1, y: 1 };
 }
-function de(l) {
-  return l === "item" ? "item" : "handle";
+function q(u) {
+  const t = { ...u };
+  return u.data !== void 0 && (t.data = B(u.data)), t;
 }
-function P(l) {
-  return { ...l };
+function G(u) {
+  const t = { ...u };
+  return u.data !== void 0 && (t.data = B(u.data)), t;
 }
-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));
+function j(u, t, e, i, r, s) {
+  const n = T(u), a = M(u), d = /* @__PURE__ */ new Set(), o = [], c = (m) => {
+    const S = n.get(m);
+    !S || d.has(m) || (d.add(m), o.push(m), (a.get(w(S.listId, m)) || []).forEach(c));
   };
-  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);
+  i.forEach(c);
+  const l = u.map(A), p = l.filter((m) => d.has(m.id)), g = r ? l.map(A) : l.filter((m) => !d.has(m.id)), b = r ? p.map((m) => s(m, o)) : p.map(A), y = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map();
+  r && p.forEach((m, S) => {
+    y.set(m.id, b[S].id), h.set(b[S].id, m.id);
+  }), b.forEach((m) => {
+    const S = r ? h.get(m.id) : m.id, L = S ? n.get(S) : null;
+    L && (r && (m.parentId = L.parentId && y.has(L.parentId) && y.get(L.parentId) || null), m.listId = e.listId);
   });
-  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 = i.map((m) => y.get(m) || m), x = [...g, ...b], D = M(g), C = w(e.listId, e.parentId), z = [...D.get(C) || []], E = e.beforeId ? z.indexOf(e.beforeId) : z.length, F = E >= 0 ? E : z.length;
+  z.splice(F, 0, ...f), D.set(C, z), M(b).forEach((m, S) => {
+    const [, L] = S.split("::");
+    (L || "") !== "__root__" && D.set(S, [...m]);
   });
-  const O = T(D);
-  v.forEach((g) => {
-    const x = O.get(g);
-    x && (x.parentId = t.parentId, x.listId = t.listId);
+  const I = T(x);
+  f.forEach((m) => {
+    const S = I.get(m);
+    S && (S.parentId = e.parentId, S.listId = e.listId);
   });
-  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));
+  const P = [], k = /* @__PURE__ */ new Set(), R = (m, S) => {
+    (D.get(w(m, S)) || []).forEach((N, lt) => {
+      const O = I.get(N);
+      !O || k.has(N) || (k.add(N), O.listId = m, O.parentId = S, O.order = lt, P.push(O), R(m, N));
     });
   };
-  return e.forEach((g) => H(g.id, null)), D.forEach((g) => {
-    q.has(g.id) || (g.parentId = null, L.push(g));
+  return t.forEach((m) => R(m.id, null)), x.forEach((m) => {
+    k.has(m.id) || (m.parentId = null, P.push(m));
   }), {
-    items: L.map(P),
-    insertedRootIds: v
+    items: P.map(A),
+    insertedRootIds: f
   };
 }
-function E(l) {
-  const e = /* @__PURE__ */ new Map();
-  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 M(u) {
+  const t = /* @__PURE__ */ new Map();
+  return u.forEach((e) => {
+    const i = w(e.listId, e.parentId), r = t.get(i);
+    r ? r.push(e.id) : t.set(i, [e.id]);
+  }), t;
 }
-function T(l) {
-  return new Map(l.map((e) => [e.id, e]));
+function T(u) {
+  return new Map(u.map((t) => [t.id, t]));
 }
-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({
+function it(u) {
+  const t = /* @__PURE__ */ new Set(), e = [];
+  return u.forEach((i, r) => {
+    const s = typeof i?.id == "string" && i.id.trim() ? i.id.trim() : `list-${r + 1}`;
+    t.has(s) || (t.add(s), e.push({
       id: s,
-      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
+      label: typeof i?.label == "string" && i.label.trim() ? i.label.trim() : `List ${r + 1}`,
+      description: typeof i?.description == "string" ? i.description : "",
+      emptyLabel: typeof i?.emptyLabel == "string" && i.emptyLabel.trim() ? i.emptyLabel.trim() : "",
+      orientation: i?.orientation === "horizontal" ? "horizontal" : "vertical",
+      disabled: !!i?.disabled,
+      cloneOnDrag: !!i?.cloneOnDrag,
+      accepts: Array.isArray(i?.accepts) ? i.accepts.filter((n) => typeof n == "string" && n.trim().length > 0) : void 0,
+      maxItems: Number.isFinite(i?.maxItems) && Number(i.maxItems) >= 0 ? Math.floor(Number(i.maxItems)) : void 0,
+      maxHeight: ot(i?.maxHeight),
+      ...i?.data !== void 0 ? { data: i.data } : {}
     }));
-  }), t.length ? t : [{
+  }), e.length ? e : [{
     id: "default",
     label: "Items",
     description: "",
-    emptyLabel: "Drop items here.",
+    emptyLabel: "",
     orientation: "vertical",
     disabled: !1,
     cloneOnDrag: !1
   }];
 }
-function U(l, e) {
-  const t = new Set(l.map((o) => o.id)), r = [];
-  e.forEach((o, u) => {
-    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: _,
+function U(u, t) {
+  const e = new Set(u.map((o) => o.id)), i = [];
+  t.forEach((o, c) => {
+    const l = typeof o?.id == "string" && o.id.trim() ? o.id.trim() : "", p = typeof o?.label == "string" && o.label.trim() ? o.label.trim() : "";
+    if (!l || !p) return;
+    const g = typeof o?.listId == "string" && e.has(o.listId) ? o.listId : u[0].id;
+    i.push({
+      id: l,
+      label: p,
+      listId: g,
       parentId: typeof o?.parentId == "string" && o.parentId.trim() ? o.parentId.trim() : null,
       description: typeof o?.description == "string" ? o.description : "",
-      order: Number.isFinite(o?.order) ? Number(o.order) : u,
+      order: Number.isFinite(o?.order) ? Number(o.order) : c,
       disabled: !!o?.disabled,
       dragDisabled: !!o?.dragDisabled,
       cloneOnDrag: !!o?.cloneOnDrag,
-      hidden: !!o?.hidden
+      hidden: !!o?.hidden,
+      ...o?.data !== void 0 ? { data: o.data } : {}
     });
   });
-  const i = new Map(r.map((o) => [o.id, o]));
-  r.forEach((o) => {
+  const r = new Map(i.map((o) => [o.id, o]));
+  i.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 c = r.get(o.parentId);
+    (!c || c.id === o.id || c.listId !== o.listId) && (o.parentId = null);
   });
   const s = /* @__PURE__ */ new Map();
-  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));
+  i.forEach((o) => {
+    const c = w(o.listId, o.parentId), l = s.get(c);
+    l ? l.push(o) : s.set(c, [o]);
+  }), s.forEach((o) => o.sort((c, l) => c.order - l.order || c.label.localeCompare(l.label)));
+  const n = [], a = /* @__PURE__ */ new Set(), d = (o, c) => {
+    (s.get(w(o, c)) || []).forEach((p, g) => {
+      a.has(p.id) || (a.add(p.id), p.order = g, n.push(p), d(o, p.id));
     });
   };
-  return l.forEach((o) => d(o.id, null)), r.forEach((o) => {
+  return u.forEach((o) => d(o.id, null)), i.forEach((o) => {
     a.has(o.id) || (o.parentId = null, n.push(o));
-  }), n.map(P);
+  }), n.map(A);
 }
-function ue(l) {
-  return JSON.stringify(l.map((e) => ({
-    id: e.id,
-    label: e.label,
-    listId: e.listId,
-    parentId: e.parentId,
-    description: e.description,
-    order: e.order,
-    disabled: e.disabled,
-    dragDisabled: e.dragDisabled,
-    cloneOnDrag: e.cloneOnDrag,
-    hidden: e.hidden
+function bt(u) {
+  return JSON.stringify(u.map((t) => ({
+    id: t.id,
+    label: t.label,
+    listId: t.listId,
+    parentId: t.parentId,
+    description: t.description,
+    order: t.order,
+    disabled: t.disabled,
+    dragDisabled: t.dragDisabled,
+    cloneOnDrag: t.cloneOnDrag,
+    hidden: t.hidden,
+    data: t.data
   })));
 }
-function pe(l) {
-  return JSON.stringify(l.map((e) => ({
-    id: e.id,
-    label: e.label,
-    description: e.description,
-    emptyLabel: e.emptyLabel,
-    orientation: e.orientation,
-    disabled: e.disabled,
-    cloneOnDrag: e.cloneOnDrag,
-    accepts: e.accepts
+function _t(u) {
+  return JSON.stringify(u.map((t) => ({
+    id: t.id,
+    label: t.label,
+    description: t.description,
+    emptyLabel: t.emptyLabel,
+    orientation: t.orientation,
+    disabled: t.disabled,
+    cloneOnDrag: t.cloneOnDrag,
+    accepts: t.accepts,
+    maxItems: t.maxItems,
+    maxHeight: t.maxHeight,
+    data: t.data
   })));
 }
-function X(l) {
-  return JSON.stringify(l);
+function rt(u) {
+  return JSON.stringify(u);
 }
-function J(l) {
-  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: r.id,
-      listId: r.listId,
-      parentId: r.parentId,
+function J(u) {
+  const t = /* @__PURE__ */ new Map(), e = u.map((i) => {
+    const r = w(i.listId, i.parentId), s = t.get(r) ?? 0;
+    return t.set(r, s + 1), {
+      id: i.id,
+      listId: i.listId,
+      parentId: i.parentId,
       index: s
     };
   });
   return {
-    version: se,
-    records: t
+    version: ht,
+    records: e
   };
 }
-function W(l, e) {
-  return e ? `${l.label} ${l.description}`.toLowerCase().includes(e.toLowerCase()) : !0;
+function st(u) {
+  return /class="item[\s"]/.test(u);
 }
-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 = (c, h, _) => {
+function at(u, t) {
+  return t ? `${u.label} ${u.description}`.toLowerCase().includes(t.toLowerCase()) : !0;
+}
+function nt(u, t, e, i, r) {
+  const s = T(u), n = M(u), a = /* @__PURE__ */ new Map(), d = (l, p) => {
+    const g = [...n.get(w(l, p)) || []];
+    return r === "label" && g.sort((b, y) => {
+      const h = s.get(b), f = s.get(y);
+      return !h || !f ? 0 : h.label.localeCompare(f.label);
+    }), g;
+  }, o = (l, p, g) => {
     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));
+    return d(l, p).forEach((y) => {
+      const h = s.get(y);
+      if (!h || h.hidden) return;
+      const f = o(l, h.id);
+      !at(h, i) && f.length === 0 || (b.push({
+        id: h.id,
+        disabled: h.disabled
+      }), f.length && b.push(...f));
     }), b;
   };
-  return Array.from(new Set(l.map((c) => c.listId))).forEach((c) => {
-    a.set(c, o(c, null));
+  return Array.from(new Set(u.map((l) => l.listId))).forEach((l) => {
+    a.set(l, o(l, null));
   }), a;
 }
-class he extends ee {
+const $ = class $ extends dt {
   constructor() {
-    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 = () => {
+    super(), this._lists = it([]), 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._lastLabelsAttr = null, this._canDropCallback = null, this._renderItemFn = null, this._renderListHeaderFn = null, this._renderEmptyStateFn = null, this._labels = {}, this._hydratedPersistKey = null, this._cloneSeed = 1, this._dragImage = null, this._dragImageOffset = { x: -14, y: -14 }, this._pendingFocusId = null, this._pointerGesture = null, this._pendingDropTarget = null, this._pendingTimer = null, this._focusWasInside = !1, this._revealPending = !1, this._externalTarget = null, this._nestModifier = !1, this._lastPointer = 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);
+      const t = this._autoScrollPoint;
+      if (!t || !this._dragState || this._dragState.keyboard) return;
+      const e = this.ownerDocument?.defaultView;
+      let i = this._scrollOwn(t.x, t.y);
+      const r = this._peerUnder(t.x, t.y);
+      r && r._scrollOwn(t.x, t.y) && (i = !0);
+      const s = ut(this), n = s ? s.getBoundingClientRect() : null, a = Math.max(0, n ? n.top : 0), d = Math.min(e?.innerHeight ?? 0, n ? n.bottom : 1 / 0), o = K(t.y, a, d);
+      o && (s ? s.scrollTop += o : e?.scrollBy(0, o), i = !0), i && (this._retarget(t.x, t.y, { timestamp: 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._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._onTouchMove = this._onTouchMove.bind(this), this._onContextMenu = this._onContextMenu.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onDocumentKeyUp = this._onDocumentKeyUp.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -1016,63 +1240,128 @@ class he extends ee {
       "drag-handle-selector",
       "custom-item-rendering",
       "show-selection-badge",
+      "nest-trigger",
+      "touch-hold-delay",
+      "list-max-height",
+      "group",
+      "labels",
+      "hide-toolbar",
       "disabled"
     ];
   }
-  shouldRenderOnAttributeChange(e, t, r) {
-    return this._suppressAttributeRender ? !["lists", "items", "selection"].includes(e) : !0;
+  shouldRenderOnAttributeChange(t, e, i) {
+    return this._suppressAttributeRender ? !["lists", "items", "selection"].includes(t) : !0;
   }
-  attributeChangedCallback(e, t, r) {
-    if (t !== r && this.isConnected) {
-      if (e === "selection" && !this._suppressAttributeRender && this._canSyncInteractiveStateInPlace()) {
-        this._syncSelectionFromAttribute(r ?? null), this._syncSelectionVisualState();
+  attributeChangedCallback(t, e, i) {
+    if (e !== i && this.isConnected) {
+      if (t === "selection" && !this._suppressAttributeRender && this._canSyncInteractiveStateInPlace()) {
+        this._syncSelectionFromAttribute(i ?? null), this._syncSelectionVisualState();
         return;
       }
-      if (e === "show-selection-badge" && this._canSyncInteractiveStateInPlace()) {
+      if (t === "show-selection-badge" && this._canSyncInteractiveStateInPlace()) {
         this._syncSelectionVisualState();
         return;
       }
-      super.attributeChangedCallback(e, t, r);
+      super.attributeChangedCallback(t, e, i);
     }
   }
   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);
+    super.connectedCallback(), $._instances.add(this), this.root.addEventListener("click", this._onClick), this.root.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("dragstart", this._onDragStart), this.root.addEventListener("pointerdown", this._onPointerDown), this.root.addEventListener("focusin", this._onFocusIn), this.root.addEventListener("touchmove", this._onTouchMove, { passive: !1 }), this.root.addEventListener("contextmenu", this._onContextMenu), this.ownerDocument?.addEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.addEventListener("keyup", this._onDocumentKeyUp, !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._stopAutoScroll(), 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("pointerdown", this._onPointerDown), this.root.removeEventListener("focusin", this._onFocusIn), this.root.removeEventListener("touchmove", this._onTouchMove), this.root.removeEventListener("contextmenu", this._onContextMenu), this._clearHoldTimer(), this.ownerDocument?.removeEventListener("keydown", this._onDocumentKeyDown, !0), this.ownerDocument?.removeEventListener("keyup", this._onDocumentKeyUp, !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._removeDragImage(), this._pendingTimer && clearTimeout(this._pendingTimer), this._pendingTimer = null, $._instances.delete(this), this._setExternal(null), this._showExternalTarget(null), super.disconnectedCallback();
   }
   get lists() {
-    return this._lists.map((e) => ({ ...e }));
+    return this._lists.map(G);
   }
-  set lists(e) {
-    this.setAttribute("lists", JSON.stringify(e ?? []));
+  set lists(t) {
+    this.setAttribute("lists", JSON.stringify(t ?? []));
   }
   get items() {
-    return this._items.map((e) => ({ ...e }));
+    return this._items.map(q);
+  }
+  set items(t) {
+    this.setAttribute("items", JSON.stringify(t ?? []));
+  }
+  /**
+   * Decides whether items may go somewhere. It is asked wherever a place is considered: a refused place is not
+   * highlighted, the keyboard skips it, a drop on it does nothing, and `moveSelection` returns false. Return
+   * true to allow. It runs on every pointer move: keep it quick.
+   */
+  get canDrop() {
+    return this._canDropCallback;
   }
-  set items(e) {
-    this.setAttribute("items", JSON.stringify(e ?? []));
+  set canDrop(t) {
+    this._canDropCallback = typeof t == "function" ? t : null;
+  }
+  /**
+   * Draws the inside of a card yourself, in plain JavaScript (React has `renderItem` on the wrapper). Return a
+   * fresh DOM node, or a string of HTML; return nothing to keep the built-in card. It is called again whenever
+   * the card is drawn anew, when its `data` changes, and when it is selected or deselected.
+   */
+  get renderItem() {
+    return this._renderItemFn;
+  }
+  set renderItem(t) {
+    this._renderItemFn = typeof t == "function" ? t : null, this.requestRender();
+  }
+  /** Draws a list's header yourself. Return a fresh DOM node or a string of HTML; nothing keeps the built-in header. */
+  get renderListHeader() {
+    return this._renderListHeaderFn;
+  }
+  set renderListHeader(t) {
+    this._renderListHeaderFn = typeof t == "function" ? t : null, this.requestRender();
+  }
+  /** Draws what an empty list shows. Return a fresh DOM node or a string of HTML; nothing keeps the built-in message. */
+  get renderEmptyState() {
+    return this._renderEmptyStateFn;
+  }
+  set renderEmptyState(t) {
+    this._renderEmptyStateFn = typeof t == "function" ? t : null, this.requestRender();
+  }
+  /**
+   * Elements with the same non-empty `group` can exchange items: a card held over another of them can be
+   * dropped there, and both report it (`change`, with `external`). Ids must be unique across the group.
+   */
+  get group() {
+    return this._group();
+  }
+  set group(t) {
+    t ? this.setAttribute("group", t) : this.removeAttribute("group");
+  }
+  _group() {
+    return this.getAttribute("group")?.trim() || "";
+  }
+  /** The text the component shows, with any `labels` you set applied over the English defaults. */
+  get labels() {
+    return { ...Y, ...this._labels };
+  }
+  set labels(t) {
+    !t || !Object.keys(t).length ? this.removeAttribute("labels") : this.setAttribute("labels", JSON.stringify(t));
+  }
+  _t(t, e) {
+    return (this._labels[t] ?? Y[t]).replace(/\{(\w+)\}/g, (r, s) => String(e?.[s] ?? ""));
   }
   get selection() {
     return [...this._selection];
   }
-  set selection(e) {
-    this.setAttribute("selection", JSON.stringify(e ?? []));
+  set selection(t) {
+    this.setAttribute("selection", JSON.stringify(t ?? []));
   }
   get sort() {
     return this.getAttribute("sort") === "label" ? "label" : "manual";
   }
-  set sort(e) {
-    !e || e === "manual" ? this.removeAttribute("sort") : this.setAttribute("sort", e);
+  set sort(t) {
+    !t || t === "manual" ? this.removeAttribute("sort") : this.setAttribute("sort", t);
   }
   get filterQuery() {
     return this.getAttribute("filter-query") || "";
   }
-  set filterQuery(e) {
-    e ? this.setAttribute("filter-query", e) : this.removeAttribute("filter-query");
+  set filterQuery(t) {
+    t ? this.setAttribute("filter-query", t) : this.removeAttribute("filter-query");
   }
-  select(e) {
-    this._setSelection(e, "api");
+  select(t) {
+    this._setSelection(t, "api");
   }
   clearSelection() {
     this._setSelection([], "api");
@@ -1080,140 +1369,192 @@ class he extends ee {
   cancelDrag() {
     this._cancelDrag(!0);
   }
-  focusItem(e) {
-    this._items.some((t) => t.id === e) && (this._focusedId = e, this._pendingFocusId = e, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
+  focusItem(t) {
+    this._items.some((e) => e.id === t) && (this._focusedId = t, this._pendingFocusId = t, this._revealPending = !0, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender());
   }
-  moveSelection(e) {
+  /** Moves (or copies) the selected items. Returns false when nothing moved: no selection, a place that is not allowed, or `before-change` cancelled. */
+  moveSelection(t) {
     this._syncSelectionFromAttribute(this.getAttribute("selection"));
-    const t = this._selectedRootIds();
-    t.length && this._commitMove({
+    const e = this._selectedRootIds();
+    return e.length ? this._commitMove({
+      listId: t.targetListId,
+      parentId: t.parentId ?? null,
+      beforeId: t.beforeId ?? null,
+      mode: t.mode ?? (t.parentId ? "inside" : "before")
+    }, e, !!t.clone, t.source ?? "api") : !1;
+  }
+  /**
+   * Moves (or, with `clone`, copies) the selected items into another `<ui-sortable>`: the same as dragging them
+   * there, for code and for keyboard users. `options` is the place in `peer`. Returns false when nothing moved.
+   */
+  moveSelectionTo(t, e) {
+    if (!t || !(t instanceof $)) return !1;
+    if (t === this) return this.moveSelection(e);
+    this._syncSelectionFromAttribute(this.getAttribute("selection"));
+    const i = this._selectedRootIds();
+    return i.length ? this._transferTo(t, {
       listId: e.targetListId,
       parentId: e.parentId ?? null,
       beforeId: e.beforeId ?? null,
       mode: e.mode ?? (e.parentId ? "inside" : "before")
-    }, t, !!e.clone, e.source ?? "api");
+    }, i, !!e.clone, e.source ?? "api") : !1;
   }
   getPersistenceSnapshot() {
     return J(this._items);
   }
   render() {
     this._syncStateFromAttributes();
-    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>
+    const t = this._measureItemShellRects(), e = new Set(this._draggingIds()), i = 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 = nt(n, i, e, this.filterQuery, this.sort), c = this._resolvedFocusedId(o), l = this._isDragLocked(), p = this._selection.length, g = this.getAttribute("allow-nesting") !== "false", b = this.getAttribute("drop-indicator-visibility") === "always" ? "always" : "active", y = this._dropzoneStyle(), h = this.getAttribute("show-selection-badge") !== "false", f = this._dragHandleMode(), x = this._usesCustomHandleSelector(), D = l ? this.sort === "label" ? this._t("hintPausedSort") : this.filterQuery && !this.hasAttribute("allow-filtered-drag") ? this._t("hintPausedFilter") : this._t("hintDisabled") : this._dragState?.keyboard ? this._t("hintKeyboard") : f === "item" ? this._t("hintItem") : x ? this._t("hintCustom") : this._t("hintHandle"), C = this.hasAttribute("hide-toolbar"), z = g && !l && !this._dragState?.keyboard ? this._t(this._nestTrigger() === "area" ? "hintNestArea" : this._nestTrigger() === "modifier" ? "hintNestModifier" : "hintNestGutter") : "", E = `
+      <style>${gt}</style>
       <div
         class="root"
         part="root"
-        data-drag-locked="${c}"
+        data-drag-locked="${l}"
         data-drag-preview="${a.size || d ? "true" : "false"}"
         data-drop-indicator-visibility="${b}"
-        data-dropzone-style="${S}"
+        data-dropzone-style="${y}"
       >
-        <div class="toolbar" part="toolbar">
-          <div class="helper" id="ui-sortable-helper">${I(A)}</div>
-          <div class="helper selection-summary">
-            <span class="selection-pill" part="selection-count">${h}</span>
-            <span class="selection-text">${h === 1 ? "item selected" : "items selected"}</span>
+        <div class="toolbar" part="toolbar"${C ? ' data-hidden="true"' : ""}>
+          <div class="helper" id="ui-sortable-helper">${v(z ? `${D} ${z}` : D)}</div>
+          <div class="helper selection-summary" data-count="${p}">
+            <span class="selection-pill" part="selection-count">${p}</span>
+            <span class="selection-text">${v(p === 1 ? this._t("selectedOne") : this._t("selectedMany"))}</span>
           </div>
         </div>
         <div class="lists" part="lists">
-          ${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(", ")}` : "";
+          ${this._lists.map((_) => {
+      const I = o.get(_.id) || [], P = I.length ? this._renderListTree(n, _, c, e, g, a, h) : "", k = _.orientation === "horizontal" ? void 0 : _.maxHeight ?? ot(this.getAttribute("list-max-height")), R = this._items.filter((L) => L.listId === _.id).length, m = _.maxItems !== void 0 && R >= _.maxItems, S = _.disabled ? this._t("listReadOnly") : m ? this._t("listFull", { max: _.maxItems ?? 0 }) : _.cloneOnDrag ? this._t("listClone") : _.accepts?.length ? this._t("listAccepts", { lists: _.accepts.join(", ") }) : "";
       return `
               <section
                 class="list"
                 part="list"
-                data-list-id="${I(f.id)}"
-                data-orientation="${f.orientation}"
-                data-disabled="${f.disabled}"
-                aria-label="${I(f.label)}"
+                data-list-id="${v(_.id)}"
+                data-orientation="${_.orientation}"
+                data-disabled="${_.disabled}"
+                data-full="${m}"
+                ${this._renderListHeaderFn || this._renderEmptyStateFn ? `data-rev="${tt(_.data)}"` : ""}
+                aria-label="${v(_.label)}"
               >
                 <header class="list-header">
-                  <div class="list-custom-header" part="list-custom-header" data-list-header-target="${I(f.id)}"></div>
+                  <div class="list-custom-header" part="list-custom-header" data-list-header-target="${v(_.id)}"></div>
                   <div class="list-default-header">
                     <div class="list-topline">
-                      <div class="list-label">${I(f.label)}</div>
-                      <span class="list-count">${y.length}</span>
+                      <div class="list-label">${v(_.label)}</div>
+                      <span class="list-count">${_.maxItems !== void 0 ? `${R}/${_.maxItems}` : I.length}</span>
                     </div>
-                    ${f.description ? `<div class="list-description">${I(f.description)}</div>` : ""}
-                    ${$ ? `<div class="list-helper">${I($)}</div>` : ""}
+                    ${_.description ? `<div class="list-description">${v(_.description)}</div>` : ""}
+                    ${S ? `<div class="list-helper">${v(S)}</div>` : ""}
                   </div>
                 </header>
-                <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,
+                <div class="items" part="items"${k ? ` data-scroll="true" style="--ui-sortable-list-max-block-size: ${k}"` : ""} role="${I.length ? "listbox" : "group"}" ${I.length ? 'aria-multiselectable="true"' : ""} aria-label="${v(_.label)}" aria-describedby="ui-sortable-helper">
+                  ${P || `<div class="list-custom-empty" part="list-custom-empty" data-list-empty-target="${v(_.id)}"></div><div class="empty">${v(_.emptyLabel || this._t("emptyList"))}</div>${this._renderDropzone({
+        listId: _.id,
         parentId: null,
         beforeId: null,
         mode: "before"
-      }, "Drop here")}`}
+      }, this._t("dropHere"))}`}
                 </div>
               </section>
             `;
     }).join("")}
         </div>
-        <div class="sr-only" aria-live="polite" aria-atomic="true">${I(this._liveMessage)}</div>
+        <div class="sr-only" aria-live="polite" aria-atomic="true">${v(this._liveMessage)}</div>
       </div>
-    `;
-    this.setContent(z), queueMicrotask(() => {
-      this._restorePendingFocus(), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._updatePointerDragPreview(), this._animateItemShellReflow(e);
+    `, F = this._captureScroll();
+    this._focusWasInside = !!this.root.activeElement, this.setContent(E), this._restoreScroll(F), this._fillCustomTargets(), queueMicrotask(() => {
+      this._restorePendingFocus(), this._dragState?.keyboard && this.root.querySelector(".item-placeholder")?.scrollIntoView?.({ block: "nearest", inline: "nearest" }), this._applyCurrentDropTargetVisualState(), this._applyLiveMessage(), this._animateItemShellReflow(t);
     });
   }
   _syncStateFromAttributes() {
-    const e = this.getAttribute("lists");
-    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("lists");
+    t !== this._lastListsAttr && (this._lastListsAttr = t, this._lists = it(V(t)));
+    const e = this.getAttribute("items");
+    if (e !== this._lastItemsAttr) {
+      this._lastItemsAttr = e, this._items = U(this._lists, V(e)), this._lastSelectionAttr = null;
+      const s = this.getAttribute("persist-key");
+      s && this._hydratedPersistKey !== s && (this._items = this._restorePersistedItems(s, this._items), this._hydratedPersistKey = s);
     }
-    const r = this.getAttribute("selection");
-    r !== this._lastSelectionAttr && this._syncSelectionFromAttribute(r), this._focusedId || (this._focusedId = this._items.find((i) => !i.hidden)?.id || null);
+    const i = this.getAttribute("selection");
+    i !== this._lastSelectionAttr && this._syncSelectionFromAttribute(i);
+    const r = this.getAttribute("labels");
+    r !== this._lastLabelsAttr && (this._lastLabelsAttr = r, this._labels = mt(r)), this._focusedId || (this._focusedId = this._items.find((s) => !s.hidden)?.id || null);
   }
-  _restorePersistedItems(e, t) {
+  _restorePersistedItems(t, e) {
     try {
-      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 i = window.localStorage.getItem(t);
+      if (!i) return e;
+      const r = JSON.parse(i);
+      if (!r || typeof r != "object" || !Array.isArray(r.records)) return e;
+      const s = new Map(r.records.map((a) => [a.id, a])), n = e.map((a, d) => {
         const o = s.get(a.id);
         return o ? {
           ...a,
-          listId: this._lists.some((u) => u.id === o.listId) ? o.listId : a.listId,
+          listId: this._lists.some((c) => c.id === o.listId) ? o.listId : a.listId,
           parentId: typeof o.parentId == "string" ? o.parentId : null,
           order: Number.isFinite(o.index) ? o.index : d
         } : { ...a, order: d };
       });
       return U(this._lists, n);
     } catch {
-      return t;
+      return e;
     }
   }
-  _resolvedFocusedId(e) {
-    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;
+  _resolvedFocusedId(t) {
+    const e = new Set(Array.from(t.values()).flat().map((r) => r.id));
+    return this._focusedId && e.has(this._focusedId) ? this._focusedId : Array.from(t.values()).flat().find((r) => !r.disabled)?.id || null;
   }
   _restorePendingFocus() {
-    const e = this._pendingFocusId || this._focusedId;
-    if (!e) return;
-    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);
+    const t = this._pendingFocusId || (this._focusWasInside ? this._focusedId : null);
+    if (this._focusWasInside = !1, !t) return;
+    const e = typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(t) : t.replace(/"/g, '\\"'), i = this.root.querySelector(`.item[data-id="${e}"]`);
+    i && (document.activeElement !== i && i.focus({ preventScroll: !0 }), this._revealPending ? (this._revealPending = !1, i.scrollIntoView?.({ block: "nearest", inline: "nearest" })) : this._revealInBoard(i), this._pendingFocusId = null);
+  }
+  // Every render replaces the shadow content, which would send the board (and any list with its own
+  // scrollbar) back to the start.
+  _captureScroll() {
+    const t = this.root.querySelector(".lists");
+    if (!t) return null;
+    const e = /* @__PURE__ */ new Map();
+    return this.root.querySelectorAll(".list[data-list-id]").forEach((i) => {
+      const r = i.querySelector(".items"), s = i.getAttribute("data-list-id");
+      r && s && (r.scrollLeft || r.scrollTop) && e.set(s, { left: r.scrollLeft, top: r.scrollTop });
+    }), { board: t.scrollLeft, lists: e };
+  }
+  _restoreScroll(t) {
+    if (!t) return;
+    const e = this.root.querySelector(".lists");
+    e && t.board && (e.scrollLeft = t.board), t.lists.size && this.root.querySelectorAll(".list[data-list-id]").forEach((i) => {
+      const r = t.lists.get(i.getAttribute("data-list-id") || ""), s = i.querySelector(".items");
+      !r || !s || (s.scrollLeft = r.left, s.scrollTop = r.top);
+    });
+  }
+  // A board that scrolls sideways can hold the focused card off screen (after a drop into a far list,
+  // or when the keyboard moves into one): bring that list into view.
+  _revealInBoard(t) {
+    const e = this.root.querySelector(".lists"), i = t.closest(".list");
+    if (!e || !i || e.scrollWidth <= e.clientWidth + 1) return;
+    const r = e.getBoundingClientRect(), s = i.getBoundingClientRect();
+    s.left < r.left ? e.scrollLeft -= r.left - s.left + 4 : s.right > r.right && (e.scrollLeft += Math.min(s.right - r.right + 4, s.left - r.left));
   }
-  _escapeSelectorValue(e) {
-    return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/"/g, '\\"');
+  _escapeSelectorValue(t) {
+    return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(t) : t.replace(/"/g, '\\"');
   }
-  _findDropzone(e) {
-    const t = this._escapeSelectorValue(e.listId), r = this._escapeSelectorValue(e.parentId ?? ""), i = this._escapeSelectorValue(e.beforeId ?? ""), s = this._escapeSelectorValue(e.mode);
+  _findDropzone(t) {
+    const e = this._escapeSelectorValue(t.listId), i = this._escapeSelectorValue(t.parentId ?? ""), r = this._escapeSelectorValue(t.beforeId ?? ""), s = this._escapeSelectorValue(t.mode);
     return this.root.querySelector(
-      `.dropzone[data-list-id="${t}"][data-parent-id="${r}"][data-before-id="${i}"][data-mode="${s}"]`
+      `.dropzone[data-list-id="${e}"][data-parent-id="${i}"][data-before-id="${r}"][data-mode="${s}"]`
     );
   }
-  _findItemElement(e) {
-    const t = this._escapeSelectorValue(e);
-    return this.root.querySelector(`.item[data-id="${t}"]`);
+  _findItemElement(t) {
+    const e = this._escapeSelectorValue(t);
+    return this.root.querySelector(`.item[data-id="${e}"]`);
   }
   _dragHandleMode() {
-    return de(this.getAttribute("drag-handle-mode"));
+    return ft(this.getAttribute("drag-handle-mode"));
+  }
+  _nestTrigger() {
+    const t = this.getAttribute("nest-trigger");
+    return t === "modifier" || t === "area" ? t : "gutter";
   }
   _dropzoneStyle() {
     return this.getAttribute("dropzone-style") === "container" ? "container" : "indicator";
@@ -1221,331 +1562,343 @@ class he extends ee {
   _usesCustomHandleSelector() {
     return !!this.getAttribute("drag-handle-selector")?.trim();
   }
-  _dragActivatorFromPath(e) {
-    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;
+  _dragActivatorFromPath(t) {
+    const e = t.find((n) => n instanceof HTMLElement && !!n.getAttribute("data-drag-trigger"));
+    if (!e) return null;
+    const i = e.getAttribute("data-drag-trigger"), r = i === "item" ? "item" : i === "custom" ? "custom" : "handle", s = e.getAttribute("data-id") || e.closest(".item[data-id]")?.getAttribute("data-id");
+    return s ? { element: e, id: s, kind: r } : null;
   }
-  _setDropTargetVisualState(e, t) {
-    if (!e) return;
-    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");
+  _setDropTargetVisualState(t, e) {
+    if (!t) return;
+    const i = this._findDropzone(t);
+    i && (i.setAttribute("data-active", e ? "true" : "false"), e ? this._syncDropzoneContainerSize(i, t) : this._clearDropzoneContainerSize(i)), t.mode === "inside" && t.parentId && this._findItemElement(t.parentId)?.setAttribute("data-drop-inside-active", e ? "true" : "false");
   }
-  _applyCurrentDropTargetVisualState(e) {
-    this._setDropTargetVisualState(e ?? null, !1), this._setDropTargetVisualState(this._dragState?.dropTarget ?? null, !0);
+  _applyCurrentDropTargetVisualState(t) {
+    this._setDropTargetVisualState(t ?? null, !1), this._setDropTargetVisualState(this._dragState?.dropTarget ?? null, !0);
   }
   _applyLiveMessage() {
-    const e = this.root.querySelector(".sr-only[aria-live]");
-    e && (e.textContent = this._liveMessage);
+    const t = this.root.querySelector(".sr-only[aria-live]");
+    t && (t.textContent = this._liveMessage);
   }
   _canSyncInteractiveStateInPlace() {
     return !!this.root.querySelector(".root") && !this._dragState;
   }
-  _applyInteractiveStateInPlace(e) {
-    return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), e?.restoreFocus && this._restorePendingFocus(), this._applyLiveMessage(), !0) : !1;
+  _applyInteractiveStateInPlace(t) {
+    return this._canSyncInteractiveStateInPlace() ? (this._syncSelectionVisualState(), t?.restoreFocus && this._restorePendingFocus(), this._applyLiveMessage(), !0) : !1;
+  }
+  // Fills the places the markup leaves for custom content (the inside of a card, a list header, an empty state)
+  // from the render functions. Fresh markup has them empty; `itemIds` redraws just those cards.
+  _fillCustomTargets(t) {
+    if (!this._renderItemFn && !this._renderListHeaderFn && !this._renderEmptyStateFn) return;
+    const e = this._isDragLocked(), i = new Map(this._lists.map((d) => [d.id, d])), r = (d, o) => {
+      let c;
+      try {
+        c = o();
+      } catch (l) {
+        console.error("ui-sortable: a render function threw; the built-in markup is shown.", l);
+        return;
+      }
+      typeof c == "string" ? d.innerHTML = c : c && typeof c.nodeType == "number" && d.replaceChildren(c);
+    }, s = this._renderItemFn;
+    if (s) {
+      const d = new Map(this._items.map((l) => [l.id, l])), o = new Set(this._selection), c = this.getAttribute("drag-handle-selector")?.trim() || "";
+      this.root.querySelectorAll(".item-custom-content[data-item-content-target]").forEach((l) => {
+        const p = l.getAttribute("data-item-content-target") || "";
+        if (t ? !t.itemIds.has(p) : l.hasChildNodes()) return;
+        const g = d.get(p);
+        if (!g) return;
+        t && l.replaceChildren();
+        const b = i.get(g.listId);
+        r(l, () => s(q(g), {
+          selected: o.has(p),
+          disabled: g.disabled,
+          dragDisabled: g.dragDisabled,
+          cloneOnDrag: g.cloneOnDrag || !!b?.cloneOnDrag,
+          list: b ? G(b) : void 0
+        })), c && this._markCustomHandles(l, p, c);
+      });
+    }
+    if (t) return;
+    const n = this._renderListHeaderFn;
+    n && this.root.querySelectorAll(".list-custom-header[data-list-header-target]").forEach((d) => {
+      if (d.hasChildNodes()) return;
+      const o = i.get(d.getAttribute("data-list-header-target") || "");
+      if (!o) return;
+      const c = this._items.filter((l) => l.listId === o.id).length;
+      r(d, () => n(G(o), { itemCount: c, dragLocked: e }));
+    });
+    const a = this._renderEmptyStateFn;
+    a && this.root.querySelectorAll(".list-custom-empty[data-list-empty-target]").forEach((d) => {
+      if (d.hasChildNodes()) return;
+      const o = i.get(d.getAttribute("data-list-empty-target") || "");
+      if (!o) return;
+      const c = this._items.filter((l) => l.listId === o.id).length;
+      r(d, () => a(G(o), { itemCount: c, dragLocked: e, filterQuery: this.filterQuery }));
+    });
+  }
+  // The parts of a custom card that match `drag-handle-selector` start a drag, the way the built-in grip does.
+  _markCustomHandles(t, e, i) {
+    let r;
+    try {
+      r = t.querySelectorAll(i);
+    } catch {
+      return;
+    }
+    r.forEach((s) => {
+      s.setAttribute("data-sortable-custom-handle", ""), s.setAttribute("data-drag-trigger", "custom"), s.setAttribute("data-id", e), s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+    });
   }
   _hasCustomItemRendering() {
-    return this.hasAttribute("custom-item-rendering");
+    return this.hasAttribute("custom-item-rendering") || !!this._renderItemFn;
   }
-  _syncSelectionFromAttribute(e) {
-    this._lastSelectionAttr = e;
-    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);
+  _syncSelectionFromAttribute(t) {
+    this._lastSelectionAttr = t;
+    const e = new Set(this._items.map((i) => i.id));
+    this._selection = V(t).filter((i) => e.has(i)), !this._selection.length && this._focusedId && !e.has(this._focusedId) && (this._focusedId = null);
   }
   _syncSelectionVisualState() {
-    const e = new Set(this._selection), t = this.getAttribute("show-selection-badge") !== "false";
-    this.root.querySelectorAll(".item[data-id]").forEach((s) => {
-      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 = a && t;
-        o.hidden = !u, o.textContent = u ? "Selected" : "";
+    const t = new Set(this._selection), e = this.getAttribute("show-selection-badge") !== "false", i = /* @__PURE__ */ new Set();
+    this.root.querySelectorAll(".item[data-id]").forEach((n) => {
+      const a = n.getAttribute("data-id");
+      if (!a) return;
+      const d = t.has(a);
+      n.getAttribute("data-selected") === "true" !== d && i.add(a);
+      const o = this._focusedId === a;
+      n.setAttribute("data-selected", d ? "true" : "false"), n.setAttribute("aria-selected", d ? "true" : "false"), n.setAttribute("data-focused", o ? "true" : "false"), n.setAttribute("tabindex", o ? "0" : "-1");
+      const c = n.querySelector('[data-selection-badge="true"]');
+      if (c) {
+        const l = d && e;
+        c.hidden = !l, c.textContent = l ? this._t("badgeSelected") : "";
       }
-    });
+    }), i.size && this._renderItemFn && this._fillCustomTargets({ itemIds: i }), this.root.querySelector(".selection-summary")?.setAttribute("data-count", 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");
+    const s = this.root.querySelector(".selection-text");
+    s && (s.textContent = this._selection.length === 1 ? this._t("selectedOne") : this._t("selectedMany"));
   }
-  _clearDropzoneContainerSize(e) {
-    e.style.removeProperty("--ui-sortable-dropzone-match-block-size"), e.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
+  _clearDropzoneContainerSize(t) {
+    t.style.removeProperty("--ui-sortable-dropzone-match-block-size"), t.style.removeProperty("--ui-sortable-dropzone-match-inline-size");
   }
-  _dropzoneReferenceElement(e, t) {
-    if (e.mode === "inside" && e.parentId) return this._findItemElement(e.parentId);
-    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 = t.previousElementSibling;
+  _dropzoneReferenceElement(t, e) {
+    if (t.mode === "inside" && t.parentId) return this._findItemElement(t.parentId);
+    let i = e.nextElementSibling;
     for (; i; ) {
       if (i instanceof HTMLElement && i.classList.contains("item-shell"))
         return i.querySelector(".item[data-id]");
-      i = i.previousElementSibling;
+      i = i.nextElementSibling;
     }
-    const s = this._escapeSelectorValue(e.listId), n = this.root.querySelector(`.list[data-list-id="${s}"] .items`), a = n?.querySelector(".item[data-id]");
+    let r = e.previousElementSibling;
+    for (; r; ) {
+      if (r instanceof HTMLElement && r.classList.contains("item-shell"))
+        return r.querySelector(".item[data-id]");
+      r = r.previousElementSibling;
+    }
+    const s = this._escapeSelectorValue(t.listId), n = this.root.querySelector(`.list[data-list-id="${s}"] .items`), a = n?.querySelector(".item[data-id]");
     return a || n || null;
   }
-  _syncDropzoneContainerSize(e, t) {
-    if (this._clearDropzoneContainerSize(e), this._dropzoneStyle() !== "container") return;
-    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() {
-    if (this._dragPreviewOverlay && this._dragPreviewOverlay.isConnected) return this._dragPreviewOverlay;
-    const e = document.createElement("div");
-    return e.className = "drag-preview-overlay", e.setAttribute("data-visible", "false"), this.root.appendChild(e), this._dragPreviewOverlay = e, e;
+  _syncDropzoneContainerSize(t, e) {
+    if (this._clearDropzoneContainerSize(t), this._dropzoneStyle() !== "container") return;
+    const i = this._dropzoneReferenceElement(e, t);
+    if (!i) return;
+    const r = i.getBoundingClientRect();
+    t.style.setProperty("--ui-sortable-dropzone-match-block-size", `${Math.max(76, Math.round(r.height))}px`), t.style.setProperty("--ui-sortable-dropzone-match-inline-size", `${Math.max(180, Math.round(r.width))}px`);
   }
   _clearPointerDragPreview() {
-    this._dragPreviewOverlay?.setAttribute("data-visible", "false"), this._dragPreviewOverlay?.style.setProperty("left", "-9999px"), this._dragPreviewOverlay?.style.setProperty("top", "-9999px");
-    const e = this.root.querySelector(".root");
-    e && !this._dragState?.keyboard && e.setAttribute("data-drag-preview", "false");
-  }
-  _pointerPreviewContent() {
-    if (!this._dragState || this._dragState.keyboard) return null;
-    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 ? `${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], t = e ? this._findItemElement(e) : null;
-    if (!t) return null;
-    const r = window.getComputedStyle(t), i = le(r.transform);
-    return {
-      width: t.offsetWidth * i.x,
-      height: t.offsetHeight * i.y
-    };
+    const t = this.root.querySelector(".root");
+    t && !this._dragState?.keyboard && t.setAttribute("data-drag-preview", "false");
   }
-  _updatePointerDragPreview() {
-    if (!this._dragState || this._dragState.keyboard) {
-      this._clearPointerDragPreview();
-      return;
-    }
-    const e = this._pointerPreviewContent();
-    if (!e) {
-      this._clearPointerDragPreview();
-      return;
-    }
-    const t = this.root.querySelector(".root"), i = this._dragPreviewOverlay?.getAttribute("data-visible") === "true", s = this._pointerPreviewSize();
-    if (!this._dragState.dropTarget) {
-      i && t && t.setAttribute("data-drag-preview", "true");
-      return;
-    }
-    const n = this._findDropzone(this._dragState.dropTarget);
-    if (!n) {
-      i && t && t.setAttribute("data-drag-preview", "true");
-      return;
-    }
-    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 = 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 - c) / 2,
-        window.innerHeight - c - 16
-      )
-    );
-    a.style.setProperty("left", `${Math.round(h)}px`), a.style.setProperty("top", `${Math.round(_)}px`);
-  }
-  _setDraggingVisualState(e, t) {
-    e.forEach((r) => {
-      const i = this._findItemElement(r);
-      i && (i.setAttribute("data-dragging", t ? "true" : "false"), t && i.getBoundingClientRect());
+  _setDraggingVisualState(t, e) {
+    e && this._dragState?.clone && !this._dragState.keyboard || t.forEach((i) => {
+      const r = this._findItemElement(i);
+      r && (r.setAttribute("data-dragging", e ? "true" : "false"), e && r.getBoundingClientRect());
     });
   }
-  _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) {
+  _setDropTarget(t, e) {
+    const i = this._dragState?.dropTarget ?? null;
+    if (!(!this._dragState || H(i, t))) {
+      if (this._pendingDropTarget = null, this._dragState.dropTarget = t, this._applyCurrentDropTargetVisualState(i), e?.announceLabel && this._announce(e.announceLabel), this._dragState.keyboard) {
         this.requestRender();
         return;
       }
-      this._updatePointerDragPreview();
+      this.root.querySelector(".root")?.setAttribute("data-drag-preview", t ? "true" : "false");
     }
   }
-  _queueDropTarget(e, t, r) {
+  _queueDropTarget(t, e, i) {
     if (!this._dragState) return;
-    const i = this._dragState.dropTarget ?? null;
-    if (B(i, e)) {
+    const r = this._dragState.dropTarget ?? null;
+    if (H(r, t)) {
       this._pendingDropTarget = null;
       return;
     }
-    if (!i && e) {
-      this._setDropTarget(e, r);
+    if (!r && t) {
+      this._setDropTarget(t, i);
       return;
     }
-    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);
+    const s = typeof e == "number" && Number.isFinite(e) ? e : performance.now(), n = this._pendingDropTarget;
+    if (n && H(n.target, t)) {
+      const a = t ? W : Q;
+      s - n.startedAt >= a && this._setDropTarget(t, n.announceLabel ? { announceLabel: n.announceLabel } : i);
       return;
     }
     this._pendingDropTarget = {
-      target: e,
+      target: t,
       startedAt: s,
-      announceLabel: r?.announceLabel
-    };
-  }
-  _releaseDropTarget(e, t) {
+      announceLabel: i?.announceLabel
+    }, this._schedulePendingFlush(t ? W : Q);
+  }
+  // The settle delay is judged on the next pointer event, so a pointer that has stopped (over a place that
+  // refuses the drop, say) would leave the old highlight on. This applies the change once the delay is up.
+  _schedulePendingFlush(t) {
+    this._pendingTimer && clearTimeout(this._pendingTimer), this._pendingTimer = setTimeout(() => {
+      this._pendingTimer = null;
+      const e = this._pendingDropTarget;
+      !e || !this._dragState || this._dragState.committed || this._dragState.keyboard || this._setDropTarget(e.target, e.announceLabel ? { announceLabel: e.announceLabel } : void 0);
+    }, t + 8);
+  }
+  _releaseDropTarget(t, e) {
     if (!this._dragState) return null;
-    if (Number.isFinite(e) && Number.isFinite(t)) {
-      const n = this._dropTargetFromPoint(e, t);
+    if (Number.isFinite(t) && Number.isFinite(e)) {
+      const n = this._dropTargetFromPoint(t, e);
       if (n && this._canDrop(n, this._dragState.movedRootIds))
         return this._pendingDropTarget = null, n;
     }
-    const r = this._pendingDropTarget?.target ?? null;
+    const i = 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 r = (n) => this._pointerIsOverList(n.listId, t, e);
+    if (i && this._canDrop(i, this._dragState.movedRootIds) && r(i)) return i;
     const s = this._dragState.dropTarget ?? null;
-    return s && this._canDrop(s, this._dragState.movedRootIds) && i(s) ? s : null;
+    return s && this._canDrop(s, this._dragState.movedRootIds) && r(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);
+  _pointerIsOverList(t, e, i) {
+    if (!Number.isFinite(e) || !Number.isFinite(i)) return !0;
+    const s = Array.from(this.root.querySelectorAll(".list[data-list-id]")).find((a) => a.getAttribute("data-list-id") === t);
     if (!s) return !0;
     const n = s.getBoundingClientRect();
-    return t >= n.left && t <= n.right && r >= n.top && r <= n.bottom;
+    return e >= n.left && e <= n.right && i >= n.top && i <= 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); ) {
+  _pathFromPoint(t, e) {
+    const i = [], r = this.root;
+    let s = typeof r.elementFromPoint == "function" ? r.elementFromPoint(t, e) : this.ownerDocument?.elementFromPoint?.(t, e) ?? null;
+    for (; s && (s instanceof HTMLElement && i.push(s), s !== this); ) {
       if (s instanceof ShadowRoot) {
         s = s.host;
         continue;
       }
-      s = s.parentNode, !s && r[r.length - 1]?.getRootNode() instanceof ShadowRoot && (s = r[r.length - 1].getRootNode().host);
+      s = s.parentNode, !s && i[i.length - 1]?.getRootNode() instanceof ShadowRoot && (s = i[i.length - 1].getRootNode().host);
     }
-    return r;
+    return i;
   }
   _measureItemShellRects() {
-    const e = /* @__PURE__ */ new Map();
-    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 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);
+    const t = /* @__PURE__ */ new Map();
+    return this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((e) => {
+      const i = e.getAttribute("data-item-shell");
+      if (!i) return;
+      const r = e.getBoundingClientRect();
+      t.set(i, { top: r.top, left: r.left });
+    }), t;
+  }
+  _animateItemShellReflow(t) {
+    if (!t.size) return;
+    const e = new Set(this._draggingIds());
+    this.root.querySelectorAll(".item-shell[data-item-shell]").forEach((i) => {
+      const r = i.getAttribute("data-item-shell");
+      if (!r || e.has(r)) return;
+      const s = t.get(r);
       if (!s) return;
-      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 n = i.getBoundingClientRect(), a = s.left - n.left, d = s.top - n.top;
+      Math.abs(a) < 0.5 && Math.abs(d) < 0.5 || (i.style.transition = "none", i.style.transform = `translate(${a}px, ${d}px)`, i.style.willChange = "transform", i.getBoundingClientRect(), requestAnimationFrame(() => {
+        i.style.transition = "transform 180ms ease", i.style.transform = "";
         const o = () => {
-          r.style.transition = "", r.style.willChange = "", r.removeEventListener("transitionend", o);
+          i.style.transition = "", i.style.willChange = "", i.removeEventListener("transitionend", o);
         };
-        r.addEventListener("transitionend", o), window.setTimeout(o, 220);
+        i.addEventListener("transitionend", o), window.setTimeout(o, 220);
       }));
     });
   }
-  _previewCloneSubtreeItem(e, t) {
-    const r = e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id;
+  _previewCloneSubtreeItem(t, e) {
+    const i = t.id.includes("--copy-") ? t.id.split("--copy-")[0] : t.id;
     return {
-      ...e,
-      id: `${r}--preview`,
-      label: t[0] === e.id ? `${e.label} copy` : e.label
+      ...t,
+      id: `${i}--preview`,
+      label: e[0] === t.id ? `${t.label} copy` : t.label
     };
   }
   _projectedMoveResult() {
-    return !this._dragState?.dropTarget || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : ce(
+    return !this._dragState?.dropTarget || !this._canDrop(this._dragState.dropTarget, this._dragState.movedRootIds) ? null : j(
       this._items,
       this._lists,
       this._dragState.dropTarget,
       this._dragState.movedRootIds,
       this._dragState.clone,
-      (e, t) => this._previewCloneSubtreeItem(e, t)
+      (t, e) => this._previewCloneSubtreeItem(t, e)
     );
   }
-  _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;
+  _renderListTree(t, e, i, r, s, n, a) {
+    const d = T(t), o = M(t), c = (l) => {
+      const p = o.get(w(e.id, l)) || [], g = this.sort === "label" ? [...p].sort((y, h) => {
+        const f = d.get(y), x = d.get(h);
+        return !f || !x ? 0 : f.label.localeCompare(x.label);
+      }) : p;
       let b = "";
-      return _.forEach((S) => {
-        const m = d.get(S);
-        if (!m || m.hidden) return;
-        const v = this._renderChildBranch(
-          m,
-          r,
+      return g.forEach((y) => {
+        const h = d.get(y);
+        if (!h || h.hidden) return;
+        const f = this._renderChildBranch(
+          h,
           i,
-          u,
+          r,
+          c,
           s,
           n,
           a
         );
-        !W(m, this.filterQuery) && !v.includes('class="item"') || (b += this._renderDropzone({
-          listId: t.id,
-          parentId: c,
-          beforeId: S,
+        !at(h, this.filterQuery) && !st(f) || (b += this._renderDropzone({
+          listId: e.id,
+          parentId: l,
+          beforeId: y,
           mode: "before"
-        }, "Drop here"), b += v);
+        }, this._t("dropHere")), b += f);
       }), b += this._renderDropzone({
-        listId: t.id,
-        parentId: c,
+        listId: e.id,
+        parentId: l,
         beforeId: null,
         mode: "before"
-      }, "Drop here"), b;
+      }, this._t("dropHere")), b;
     };
-    return `<div class="tree">${u(null)}</div>`;
+    return `<div class="tree">${c(null)}</div>`;
   }
-  _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";
+  _renderChildBranch(t, e, i, r, s, n, a) {
+    const d = v(t.id), o = n.has(t.id), c = o ? "" : r(t.id), l = st(c), p = o ? !1 : this._selection.includes(t.id), g = o ? !1 : i.has(t.id), b = t.disabled, y = b || t.dragDisabled || this._isDragLocked(), h = this._dragState?.dropTarget?.mode === "inside" && this._dragState.dropTarget.parentId === t.id, f = this._t(this._dragState?.clone ? "copyPreview" : "dropPreview"), x = this._t(
+      this._dragState?.clone ? "releaseCopy" : this._dragState && this._dragState.movedRootIds.length > 1 ? "releaseMoveMany" : "releaseMove"
+    ), D = this._dragHandleMode(), C = this._usesCustomHandleSelector(), z = C ? "custom" : D, E = !C && D === "handle";
     return `
       <div class="item-shell" data-item-shell="${d}">
         <div
           class="item${o ? " item-placeholder" : ""}"
           part="item"
           data-id="${d}"
-          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-drag-handle-mode="${z}"
+          ${!o && z === "item" ? 'data-drag-trigger="item"' : ""}
+          data-selected="${p}"
+          data-focused="${o ? "false" : e === t.id}"
+          data-dragging="${g}"
           data-disabled="${b}"
-          data-drop-inside-active="${m ? "true" : "false"}"
+          data-drop-inside-active="${h ? "true" : "false"}"
+          ${this._renderItemFn && !o ? `data-rev="${tt(t.data)}"` : ""}
           role="${o ? "presentation" : "option"}"
-          aria-selected="${o ? "false" : h}"
+          aria-selected="${o ? "false" : p}"
           aria-disabled="${b}"
           aria-hidden="${o ? "true" : "false"}"
-          tabindex="${o ? "-1" : t === e.id ? "0" : "-1"}"
+          tabindex="${o ? "-1" : e === t.id ? "0" : "-1"}"
         >
           ${o ? `
               <div class="placeholder-content">
-                <div class="placeholder-kicker">${I(v)}</div>
-                <div class="placeholder-title">${I(e.label)}</div>
-                <div class="placeholder-description">${I(D)}</div>
+                <div class="placeholder-kicker">${v(f)}</div>
+                <div class="placeholder-title">${v(t.label)}</div>
+                <div class="placeholder-description">${v(x)}</div>
               </div>
             ` : `
-              ${y ? `
+              ${E ? `
                   <span
                     class="handle"
                     part="handle"
@@ -1555,7 +1908,7 @@ class he extends ee {
                     data-drag-trigger="handle"
                     data-id="${d}"
                     draggable="false"
-                    ${S ? "disabled" : ""}
+                    ${y ? "disabled" : ""}
                   >
                     <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                       <circle cx="5" cy="4" r="1.25"></circle>
@@ -1570,252 +1923,367 @@ class he extends ee {
               <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>
                 <div class="item-default-content">
-                  <div class="item-title">${I(e.label)}</div>
-                  ${e.description ? `<div class="item-description">${I(e.description)}</div>` : ""}
+                  <div class="item-title">${v(t.label)}</div>
+                  ${t.description ? `<div class="item-description">${v(t.description)}</div>` : ""}
                   <div class="item-meta">
-                    <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>' : ""}
+                    <span class="item-badge selection-badge" data-selection-badge="true" ${p && a ? "" : "hidden"}>${p && a ? v(this._t("badgeSelected")) : ""}</span>
+                    ${t.cloneOnDrag ? `<span class="item-badge">${v(this._t("badgeClone"))}</span>` : ""}
+                    ${t.dragDisabled ? `<span class="item-badge">${v(this._t("badgePinned"))}</span>` : ""}
+                    ${s ? `<span class="item-badge drop-badge">${v(this._t("nestHere"))}</span>` : ""}
                   </div>
                 </div>
               </div>
             `}
         </div>
         ${s && !o ? this._renderDropzone({
-      listId: e.listId,
-      parentId: e.id,
+      listId: t.listId,
+      parentId: t.id,
       beforeId: null,
       mode: "inside"
-    }, "Nest here") : ""}
-        ${c ? `<div class="children">${u}</div>` : ""}
+    }, this._t("nestHere")) : ""}
+        ${l ? `<div class="children">${c}</div>` : ""}
       </div>
     `;
   }
-  _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;
+  _renderDropzone(t, e) {
+    const i = this._dragState?.dropTarget ?? this._externalTarget, r = i && i.listId === t.listId && i.parentId === t.parentId && i.beforeId === t.beforeId && i.mode === t.mode;
     return `
       <div
         class="dropzone"
         part="dropzone"
-        data-list-id="${I(e.listId)}"
-        data-parent-id="${I(e.parentId ?? "")}"
-        data-before-id="${I(e.beforeId ?? "")}"
-        data-mode="${e.mode}"
+        data-list-id="${v(t.listId)}"
+        data-parent-id="${v(t.parentId ?? "")}"
+        data-before-id="${v(t.beforeId ?? "")}"
+        data-mode="${t.mode}"
         data-active="${r ? "true" : "false"}"
         aria-hidden="true"
       >
-        <span class="dropzone-label">${I(t)}</span>
+        <span class="dropzone-label">${v(e)}</span>
       </div>
     `;
   }
-  _onClick(e) {
-    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;
+  _onClick(t) {
+    const e = t.composedPath(), i = e.find((o) => o instanceof HTMLElement && o.classList?.contains("toolbar")), r = this._dragActivatorFromPath(e), s = e.find((o) => o instanceof HTMLElement && o.classList.contains("item"));
+    if (r && r.kind !== "item") return;
     if (!s)
-      return r && !(e.target instanceof HTMLButtonElement), void 0;
+      return i && !(t.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;
+    const d = t;
     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 r = e.composedPath().find((i) => i instanceof HTMLElement && i.classList.contains("item"))?.getAttribute("data-id");
-    r && (this._focusedId = r, this._syncSelectionVisualState());
+  _onFocusIn(t) {
+    const i = t.composedPath().find((r) => r instanceof HTMLElement && r.classList.contains("item"))?.getAttribute("data-id");
+    i && (this._focusedId = i, 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) {
-    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";
+  _isForeignControl(t) {
+    const e = t.composedPath()[0];
+    return !(e instanceof HTMLElement) || e.classList.contains("handle") || e.classList.contains("item") ? !1 : e.isContentEditable || e.matches('input, textarea, select, button, summary, a[href], [role="button"], [role="textbox"], [role="combobox"]');
+  }
+  _onKeyDown(t) {
+    if (this._isForeignControl(t)) return;
+    const e = this._visibleItemIds();
+    if (!e.length) return;
+    const i = this._focusedId && e.includes(this._focusedId) ? this._focusedId : e[0], r = e.indexOf(i), s = this._items.find((l) => l.id === i), a = (s ? this._lists.find((l) => l.id === s.listId) : null)?.orientation === "horizontal", d = this._isRtl(), o = a ? d ? "ArrowLeft" : "ArrowRight" : "ArrowDown", c = a ? d ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
     if (!this._dragState?.keyboard) {
-      if (e.key === o) {
-        e.preventDefault(), this._moveFocusBy(t, i, 1);
+      if (t.key === o) {
+        t.preventDefault(), this._moveFocusBy(e, r, 1);
         return;
       }
-      if (e.key === u) {
-        e.preventDefault(), this._moveFocusBy(t, i, -1);
+      if (t.key === c) {
+        t.preventDefault(), this._moveFocusBy(e, r, -1);
         return;
       }
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
-        e.preventDefault(), this._setSelection(t, "keyboard"), this._announce(`${t.length} items selected.`);
+      if ((t.ctrlKey || t.metaKey) && t.key.toLowerCase() === "a") {
+        t.preventDefault(), this._setSelection(e, "keyboard"), this._announce(this._t("announceSelectedMany", { count: e.length }));
         return;
       }
-      if (e.key === "Enter") {
-        e.preventDefault(), this._setSelection([r], "keyboard");
+      if (t.key === "Enter") {
+        t.preventDefault(), this._setSelection([i], "keyboard");
         return;
       }
-      if (e.key === " " || e.code === "Space") {
-        if (e.preventDefault(), this._isDragLocked()) {
-          this._announce("Dragging is disabled right now.");
+      if (t.key === " " || t.code === "Space") {
+        if (t.preventDefault(), this._isDragLocked()) {
+          this._announce(this._t("announceDragDisabled"));
           return;
         }
-        const c = this._selectedRootIds(r);
-        if (!c.length) return;
-        const h = this._itemClonesOnDrag(r);
+        const l = this._selectedRootIds(i);
+        if (!l.length) return;
+        const p = this._itemClonesOnDrag(i);
         this._dragState = {
-          snapshot: this._items.map(P),
-          movedRootIds: c,
-          originId: r,
-          clone: h,
+          snapshot: this._items.map(A),
+          movedRootIds: l,
+          originId: i,
+          clone: p,
           keyboard: !0,
-          dropTarget: this._initialKeyboardDropTarget(r),
+          dropTarget: this._initialKeyboardDropTarget(i),
           committed: !1
         };
-        const _ = c.length === 1 ? `Lifted ${s?.label || "item"}.` : `Lifted ${c.length} items.`;
-        this._announce(`${_} Use arrow keys to choose a destination.`), this.requestRender();
+        const g = l.length === 1 ? this._t("announceLifted", { label: s?.label || "item" }) : this._t("announceLiftedMany", { count: l.length });
+        this._announce(`${g} ${this._t("announceLiftedHelp")}`), this.requestRender();
         return;
       }
-      if (e.key === "Escape") {
+      if (t.key === "Escape") {
         this._setSelection([], "keyboard");
         return;
       }
       return;
     }
-    if (e.key === "Escape") {
-      e.preventDefault(), this._cancelDrag(!0);
+    if (t.key === "Escape") {
+      t.preventDefault(), this._cancelDrag(!0);
       return;
     }
-    if (e.key === "Enter" || e.key === " " || e.code === "Space") {
-      e.preventDefault();
-      const c = this._dragState.dropTarget;
-      if (!c) return;
-      this._commitMove(c, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
+    if (t.key === "Enter" || t.key === " " || t.code === "Space") {
+      t.preventDefault();
+      const l = this._dragState.dropTarget;
+      if (!l) return;
+      this._commitMove(l, this._dragState.movedRootIds, this._dragState.clone, "keyboard");
       return;
     }
-    if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
-      e.preventDefault();
-      const c = d ? "ArrowLeft" : "ArrowRight", h = e.key === "ArrowDown" || e.key === c ? 1 : -1;
-      this._moveKeyboardDropTarget(h);
+    if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(t.key)) {
+      t.preventDefault();
+      const l = d ? "ArrowLeft" : "ArrowRight", p = t.key === "ArrowDown" || t.key === l ? 1 : -1;
+      this._moveKeyboardDropTarget(p);
     }
   }
   _isRtl() {
-    const e = this.ownerDocument?.defaultView?.getComputedStyle(this).direction;
-    return e ? e === "rtl" : this.closest("[dir]")?.getAttribute("dir") === "rtl";
+    const t = this.ownerDocument?.defaultView?.getComputedStyle(this).direction;
+    return t ? t === "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();
+  _moveFocusBy(t, e, i) {
+    const r = Math.max(0, Math.min(t.length - 1, e + i)), s = t[r];
+    this._focusedId = s, this._pendingFocusId = s, this._revealPending = !0, !this._applyInteractiveStateInPlace({ restoreFocus: !0 }) && this.requestRender();
   }
-  _onDragStart(e) {
-    const t = this._dragActivatorFromPath(e.composedPath()), r = t?.id;
-    if (!t || !r) {
-      e.preventDefault();
-      return;
-    }
-    if (this._isDragLocked()) {
-      e.preventDefault(), this._announce("Dragging is disabled right now.");
-      return;
-    }
-    const i = this._items.find((a) => a.id === r);
-    if (!i || i.disabled || i.dragDisabled) {
-      e.preventDefault();
+  // The browser must not start a native drag while a card is being dragged with the pointer (an image or a
+  // link inside a card would): the pointer drag is the only drag.
+  _onDragStart(t) {
+    (this._pointerGesture || this._dragState && !this._dragState.keyboard) && t.preventDefault();
+  }
+  _onDocumentKeyDown(t) {
+    if (t.key === "Alt") {
+      this._setNestModifier(!0);
       return;
     }
-    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(P),
-      movedRootIds: s,
-      originId: r,
-      clone: n,
-      keyboard: !1,
-      dropTarget: null,
-      committed: !1
-    }, 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 t = this._dropTargetFromEvent(e);
-    if (!t || !this._canDrop(t, this._dragState.movedRootIds)) {
-      this._queueDropTarget(null, e.timeStamp);
+    t.key === "Escape" && (!this._dragState || this._dragState.keyboard || (t.preventDefault(), this._cancelDrag(!0)));
+  }
+  _onDocumentKeyUp(t) {
+    t.key === "Alt" && this._setNestModifier(!1);
+  }
+  // Pressing or releasing Alt changes where a card would land without the pointer moving, so the target is
+  // worked out again straight away.
+  _setNestModifier(t) {
+    this._nestModifier !== t && (this._nestModifier = t, !(!this._dragState || this._dragState.keyboard || this._dragState.committed || !this._lastPointer) && this._retarget(this._lastPointer.x, this._lastPointer.y, { immediate: !0 }));
+  }
+  // Works out where the held card would land at (x, y): in this element, or, when it is over another element of the
+  // same group, in that one. `immediate` skips the short delay that stops the highlight flickering.
+  _retarget(t, e, i) {
+    const r = this._dragState;
+    if (!r || r.keyboard || r.committed) return;
+    const s = this._externalAt(t, e);
+    if (s) {
+      r.dropTarget && this._setDropTarget(null), this._pendingDropTarget = null, this._noteRefusal(!!s.target && !s.usable), this._setExternal(s.usable && s.target ? { peer: s.peer, target: s.target } : null);
       return;
     }
-    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 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._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());
+    this._setExternal(null);
+    const n = this._dropTargetFromPoint(t, e), a = n && this._canDrop(n, r.movedRootIds) ? n : null;
+    this._noteRefusal(!!n && !a), i.immediate ? this._setDropTarget(a) : this._queueDropTarget(a, i.timestamp ?? performance.now());
+  }
+  // The other element of the same group under the pointer (this one wins where they overlap), and whether it
+  // takes the held items at the place it found.
+  _peerUnder(t, e) {
+    const i = this._group();
+    if (!i) return null;
+    const r = (s) => {
+      const n = s.getBoundingClientRect();
+      return t >= n.left && t <= n.right && e >= n.top && e <= n.bottom && n.width > 0 && n.height > 0;
+    };
+    if (r(this)) return null;
+    for (const s of $._instances)
+      if (!(s === this || s._group() !== i || !s.isConnected || s.ownerDocument !== this.ownerDocument) && r(s))
+        return s;
+    return null;
   }
-  _dropTargetFromEvent(e) {
-    return this._dropTargetFromPath(e.composedPath(), e.clientX, e.clientY);
+  _externalAt(t, e) {
+    if (!this._dragState || this._dragState.keyboard) return null;
+    const i = this._peerUnder(t, e);
+    if (!i) return null;
+    const r = this._sessionFor(this._dragState.movedRootIds, this._dragState.clone);
+    i._nestModifier = this._nestModifier;
+    const s = i._dropTargetFromPoint(t, e), n = !!s && i._canDrop(s, r.rootIds, r.clone, r);
+    return { peer: i, target: s, usable: n };
+  }
+  _setExternal(t) {
+    const e = this._dragState;
+    if (!e) return;
+    const i = e.external ?? null;
+    if (!(i && t && i.peer === t.peer && H(i.target, t.target))) {
+      if (!i && !t) {
+        e.external = null;
+        return;
+      }
+      i?.peer._showExternalTarget(null), e.external = t, t?.peer._showExternalTarget(t.target);
+    }
   }
-  _dropTargetFromPath(e, t, r) {
-    const i = e.find((y) => y instanceof HTMLElement && y.classList.contains("dropzone"));
-    if (i) {
-      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"
+  // Marks the place in this element where a card held over it from another element would land.
+  _showExternalTarget(t) {
+    H(this._externalTarget, t) || (this._setDropTargetVisualState(this._externalTarget, !1), this._externalTarget = t, this._setDropTargetVisualState(t, !0));
+  }
+  // The held items, with all their children, as they leave this element.
+  _sessionFor(t, e) {
+    const i = this._dragState?.session;
+    if (i && i.clone === e && i.rootIds.join() === t.join()) return i;
+    const r = T(this._items), s = M(this._items), n = /* @__PURE__ */ new Set(), a = [], d = (c) => {
+      const l = r.get(c);
+      !l || n.has(c) || (n.add(c), a.push(A(l)), (s.get(w(l.listId, c)) || []).forEach(d));
+    };
+    t.forEach(d);
+    const o = {
+      source: this,
+      rootIds: [...t],
+      items: a,
+      clone: e,
+      sourceListIds: Array.from(new Set(t.map((c) => r.get(c)?.listId).filter((c) => !!c)))
+    };
+    return this._dragState && (this._dragState.session = o), o;
+  }
+  // Moves (or copies) items into another element: both report it, and either can cancel it first.
+  _transferTo(t, e, i, r, s) {
+    const n = () => (this._dragState && this._cancelDrag(!1), this._announce(this._t("announceRejected")), !1), a = this._sessionFor(i, r);
+    if (!t._canDrop(e, a.rootIds, a.clone, a)) return n();
+    const d = new Set(t._items.map((h) => h.id)), o = /* @__PURE__ */ new Map();
+    a.items.forEach((h) => {
+      if (!r) {
+        o.set(h.id, h.id);
+        return;
+      }
+      const f = h.id.includes("--copy-") ? h.id.split("--copy-")[0] : h.id;
+      let x = "";
+      do
+        x = `${f}--copy-${this._cloneSeed++}`;
+      while (d.has(x));
+      d.add(x), o.set(h.id, x);
+    });
+    const c = a.items.map((h) => {
+      const f = a.rootIds.indexOf(h.id);
+      return {
+        ...A(h),
+        id: o.get(h.id) || h.id,
+        parentId: h.parentId && o.has(h.parentId) && o.get(h.parentId) || null,
+        listId: e.listId,
+        label: r && f === 0 ? `${h.label} copy` : h.label,
+        ...h.data !== void 0 ? { data: B(h.data) } : {}
       };
-      if (y.listId) return y;
+    }), l = a.rootIds.map((h) => o.get(h) || h), p = j(
+      [...t._items, ...c],
+      t._lists,
+      e,
+      l,
+      !1,
+      (h) => h
+    ), g = t._lists.find((h) => h.id === e.listId), b = {
+      items: p.items,
+      movedIds: l,
+      nextSelection: [...l],
+      operation: r ? "clone" : e.mode === "inside" ? "nest" : "transfer",
+      target: e,
+      clone: r,
+      source: s,
+      external: { direction: "in", peer: this }
+    };
+    let y = null;
+    if (!r) {
+      const h = new Set(a.items.map((f) => f.id));
+      y = {
+        items: U(this._lists, this._items.filter((f) => !h.has(f.id)).map(A)),
+        movedIds: [...a.rootIds],
+        nextSelection: this._selection.filter((f) => !h.has(f)),
+        operation: "transfer",
+        target: e,
+        clone: !1,
+        source: s,
+        external: { direction: "out", peer: t },
+        destination: g?.label || e.listId
+      };
+    }
+    return !t._askBeforeChange(b) || y && !this._askBeforeChange(y) ? n() : (this._setExternal(null), t._showExternalTarget(null), y ? this._applyPlan(y) : (this._dragState && (this._dragState.committed = !0), this._stopAutoScroll(), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender()), t._applyPlan(b), !0);
+  }
+  // Over a place that exists but will not take the drop (a full list, a read-only one, canDrop said no) the
+  // lifted card says so.
+  _noteRefusal(t) {
+    this._dragImage?.toggleAttribute && this._dragImage.toggleAttribute("data-refused", t);
+  }
+  _dropTargetFromPath(t, e, i) {
+    const r = t.find((I) => I instanceof HTMLElement && I.classList.contains("dropzone"));
+    if (r) {
+      const I = {
+        listId: r.getAttribute("data-list-id") || "",
+        parentId: r.getAttribute("data-parent-id") || null,
+        beforeId: r.getAttribute("data-before-id") || null,
+        mode: r.getAttribute("data-mode") === "inside" ? "inside" : "before"
+      };
+      if (I.listId) return I;
     }
-    const s = e.find((y) => y instanceof HTMLElement && y.classList.contains("item"));
+    const s = t.find((I) => I instanceof HTMLElement && I.classList.contains("item"));
     if (!s) {
-      const R = e.find(
-        ($) => $ instanceof HTMLElement && $.classList.contains("list") && $.hasAttribute("data-list-id")
+      const P = t.find(
+        (k) => k instanceof HTMLElement && k.classList.contains("list") && k.hasAttribute("data-list-id")
       )?.getAttribute("data-list-id");
-      return R ? { listId: R, parentId: null, beforeId: null, mode: "before" } : null;
+      return P ? { listId: P, parentId: null, beforeId: null, mode: "before" } : null;
     }
     const n = s.getAttribute("data-id");
     if (!n) return null;
-    const a = this._items.find((y) => y.id === n);
+    const a = this._items.find((I) => I.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: a.listId,
-        parentId: a.parentId,
-        beforeId: a.id,
-        mode: "before"
-      };
-    if (v && m >= 0.34 && m <= 0.74)
+    const d = this._lists.find((I) => I.id === a.listId), o = s.getBoundingClientRect(), c = d?.orientation === "horizontal", l = c ? o.left : o.top, p = c ? o.right : o.bottom, g = c ? e : i, b = Math.max(1, p - l), y = (g - l) / b, h = c && this._isRtl() ? 1 - y : y, f = this.getAttribute("allow-nesting") !== "false" && !a.disabled, x = this._nestTrigger(), D = f && (x === "area" ? h > 0.34 && h <= 0.74 : h >= 0.25 && h <= 0.75 && (this._nestModifier || x === "gutter" && this._inNestGutter(o, e, i, c))), C = x === "area" ? h <= 0.34 : h < 0.5;
+    if (D)
       return {
         listId: a.listId,
         parentId: a.id,
         beforeId: null,
         mode: "inside"
       };
-    const A = E(this._items).get(k(a.listId, a.parentId)) || [], z = A.indexOf(a.id), f = z >= 0 && A[z + 1] || null;
+    if (C)
+      return {
+        listId: a.listId,
+        parentId: a.parentId,
+        beforeId: a.id,
+        mode: "before"
+      };
+    const E = M(this._items).get(w(a.listId, a.parentId)) || [], F = E.indexOf(a.id), _ = F >= 0 && E[F + 1] || null;
     return {
       listId: a.listId,
       parentId: a.parentId,
-      beforeId: f,
+      beforeId: _,
       mode: "before"
     };
   }
-  _dropTargetFromPoint(e, t) {
-    return this._dropTargetFromPath(this._pathFromPoint(e, t), e, t);
+  // The far side of a card (its right in a left-to-right list, the bottom of a card in a horizontal lane):
+  // somewhere a pointer only goes on purpose, and the only way to nest without a keyboard.
+  _inNestGutter(t, e, i, r) {
+    if (r) {
+      const a = t.bottom - t.top;
+      return i >= t.bottom - Math.max(24, Math.min(70, a * 0.3));
+    }
+    const s = t.right - t.left, n = Math.max(48, Math.min(140, s * 0.3));
+    return this._isRtl() ? e <= t.left + n : e >= t.right - n;
+  }
+  _dropTargetFromPoint(t, e) {
+    return this._dropTargetFromPath(this._pathFromPoint(t, e), t, e);
   }
-  _beginPointerDrag(e, t) {
+  _beginPointerDrag(t, e) {
     if (!this._pointerGesture || this._dragState) return;
-    const r = this._items.find((i) => i.id === this._pointerGesture?.originId);
-    r && (this._dragState = {
-      snapshot: this._items.map(P),
+    const i = this._items.find((r) => r.id === this._pointerGesture?.originId);
+    i && (this._dragState = {
+      snapshot: this._items.map(A),
       movedRootIds: [...this._pointerGesture.movedRootIds],
       originId: this._pointerGesture.originId,
       clone: this._pointerGesture.clone,
@@ -1823,336 +2291,458 @@ class he extends ee {
       dropTarget: null,
       committed: !1
     }, this._pendingDropTarget = null, this._applyPointerPreview(
-      e,
       t,
+      e,
       this._dragState.movedRootIds.length,
-      this._dragState.clone
-    ), this._setDraggingVisualState(this._draggingIds(), !0), this._announce(
-      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 t = this._dragActivatorFromPath(e.composedPath()), r = t?.id;
-    if (!t || !r) return;
+      this._dragState.clone,
+      { x: this._pointerGesture.startX, y: this._pointerGesture.startY }
+    ), this._setDraggingVisualState(this._draggingIds(), !0), this._announceDragging(i.label, this._dragState.movedRootIds.length, this._dragState.clone));
+  }
+  _onPointerDown(t) {
+    const e = this._dragActivatorFromPath(t.composedPath()), i = e?.id;
+    if (!e || !i) return;
     if (this._isDragLocked()) {
-      e.preventDefault(), this._announce("Dragging is disabled right now.");
+      t.preventDefault(), this._announce(this._t("announceDragDisabled"));
       return;
     }
-    const i = this._items.find((n) => n.id === r);
-    if (!i || i.disabled || i.dragDisabled) {
-      e.preventDefault();
+    const r = this._items.find((a) => a.id === i);
+    if (!r || r.disabled || r.dragDisabled) {
+      t.preventDefault();
       return;
     }
-    e.preventDefault();
+    const s = t.pointerType === "touch" && e.kind !== "handle" && this._touchHoldDelay() > 0;
+    s || t.preventDefault();
     try {
-      t.element.setPointerCapture?.(e.pointerId);
+      e.element.setPointerCapture?.(t.pointerId);
     } catch {
     }
-    const s = this._selection.includes(r) ? this._selectedRootIds(r) : [r];
-    this._pointerGesture = {
-      pointerId: e.pointerId,
-      pointerType: e.pointerType,
-      originId: r,
-      movedRootIds: s,
-      clone: this._itemClonesOnDrag(r),
-      startX: e.clientX,
-      startY: e.clientY,
+    this._clearHoldTimer();
+    const n = this._selection.includes(i) ? this._selectedRootIds(i) : [i];
+    if (this._pointerGesture = {
+      pointerId: t.pointerId,
+      pointerType: t.pointerType,
+      originId: i,
+      movedRootIds: n,
+      clone: this._itemClonesOnDrag(i),
+      startX: t.clientX,
+      startY: t.clientY,
       moved: !1,
-      captureTarget: t.element
-    };
+      captureTarget: e.element,
+      hold: s,
+      holdTimer: null
+    }, s) {
+      const a = this._pointerGesture;
+      a.holdTimer = setTimeout(() => {
+        if (a.holdTimer = null, !(this._pointerGesture !== a || a.moved)) {
+          a.hold = !1, a.moved = !0, this._beginPointerDrag(a.startX, a.startY), this._lastPointer = { x: a.startX, y: a.startY };
+          try {
+            this.ownerDocument?.defaultView?.navigator?.vibrate?.(8);
+          } catch {
+          }
+        }
+      }, this._touchHoldDelay());
+    }
+  }
+  _touchHoldDelay() {
+    const t = this.getAttribute("touch-hold-delay");
+    if (t === null || t.trim() === "") return Z;
+    const e = Number(t);
+    return Number.isFinite(e) ? Math.min(2e3, Math.max(0, e)) : Z;
+  }
+  _clearHoldTimer() {
+    this._pointerGesture?.holdTimer && clearTimeout(this._pointerGesture.holdTimer), this._pointerGesture && (this._pointerGesture.holdTimer = null);
+  }
+  // While a card is lifted (or about to be) the finger must drag it, not scroll the page.
+  _onTouchMove(t) {
+    this._dragState && !this._dragState.keyboard && t.cancelable && t.preventDefault();
+  }
+  // A long press raises the system's context menu (copy, save image): not while a card is held.
+  _onContextMenu(t) {
+    (this._pointerGesture?.pointerType === "touch" || this._dragState && !this._dragState.keyboard) && t.preventDefault();
   }
-  _onPointerMove(e) {
-    if (!(!this._pointerGesture || e.pointerId !== this._pointerGesture.pointerId)) {
-      if (e.preventDefault(), !this._pointerGesture.moved) {
-        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);
+  _onPointerMove(t) {
+    if (!(!this._pointerGesture || t.pointerId !== this._pointerGesture.pointerId)) {
+      if (this._pointerGesture.hold) {
+        Math.hypot(t.clientX - this._pointerGesture.startX, t.clientY - this._pointerGesture.startY) > pt && (this._clearHoldTimer(), this._pointerGesture = null);
+        return;
       }
-      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(t, e.timeStamp);
+      if (t.preventDefault(), !this._pointerGesture.moved) {
+        if (Math.hypot(t.clientX - this._pointerGesture.startX, t.clientY - this._pointerGesture.startY) < 6) return;
+        this._pointerGesture.moved = !0, this._beginPointerDrag(t.clientX, t.clientY);
       }
+      !this._dragState || this._dragState.keyboard || (this._nestModifier = !!t.altKey, this._lastPointer = { x: t.clientX, y: t.clientY }, this._movePointerPreview(t.clientX, t.clientY), this._updateAutoScroll(t.clientX, t.clientY), this._retarget(t.clientX, t.clientY, { timestamp: t.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));
+  // Holding a dragged card near an edge scrolls what is under it: the board sideways, the list under
+  // the pointer when it has its own scrollbar, and the page (or the nearest scrolling container) up
+  // and down, so lists and positions that are off screen can be reached with the pointer.
+  _updateAutoScroll(t, e) {
+    this._autoScrollPoint = { x: t, y: e }, !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();
+  // Scrolls this element's own board sideways, and the list under (x, y) when it has a scrollbar of its own, if the
+  // pointer is at their edge. True when something moved.
+  _scrollOwn(t, e) {
+    const i = this.ownerDocument?.defaultView;
+    let r = !1;
+    const s = this.root.querySelector(".lists");
+    if (s && s.scrollWidth > s.clientWidth + 1) {
+      const a = s.getBoundingClientRect(), d = K(t, Math.max(0, a.left), Math.min(i?.innerWidth ?? 1 / 0, a.right));
+      d && (s.scrollLeft += d, r = !0);
+    }
+    const n = this._pathFromPoint(t, e).find((a) => a.classList?.contains("items"));
+    if (n && n.scrollHeight > n.clientHeight + 1 && i?.getComputedStyle(n).overflowY !== "visible") {
+      const a = n.getBoundingClientRect(), d = K(e, a.top, a.bottom);
+      d && (n.scrollTop += d, r = !0);
+    }
+    return r;
+  }
+  _onPointerUp(t) {
+    if (!this._pointerGesture || t.pointerId !== this._pointerGesture.pointerId) return;
+    t.preventDefault();
     try {
-      this._pointerGesture.captureTarget?.releasePointerCapture?.(e.pointerId);
+      this._pointerGesture.captureTarget?.releasePointerCapture?.(t.pointerId);
     } catch {
     }
-    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) {
+    const e = this._pointerGesture;
+    if (this._clearHoldTimer(), this._pointerGesture = null, this._stopAutoScroll(), !this._dragState || this._dragState.keyboard) return;
+    this._nestModifier = !!t.altKey;
+    const i = e.moved ? this._externalAt(t.clientX, t.clientY) : null;
+    if (i) {
+      i.usable && i.target ? this._transferTo(i.peer, i.target, this._dragState.movedRootIds, this._dragState.clone, "pointer") : this._cancelDrag(!0);
+      return;
+    }
+    const r = e.moved ? this._releaseDropTarget(t.clientX, t.clientY) : null;
+    if (e.moved && r) {
       this._commitMove(r, this._dragState.movedRootIds, this._dragState.clone, "pointer");
       return;
     }
-    t.moved ? this._cancelDrag(!0) : (this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this.requestRender());
+    e.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._stopAutoScroll(), this._dragState && this._cancelDrag(!0));
+  _onPointerCancel(t) {
+    !this._pointerGesture || t.pointerId !== this._pointerGesture.pointerId || (this._clearHoldTimer(), this._pointerGesture = null, this._stopAutoScroll(), this._dragState && this._cancelDrag(!0));
   }
-  _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 n = X(i);
+  _setSelection(t, e) {
+    const i = new Set(this._items.map((a) => a.id)), r = Array.from(new Set(t.filter((a) => i.has(a)))), s = [...this._selection];
+    this._selection = r, this._rangeAnchorId = r[r.length - 1] || null, this._focusedId = r[r.length - 1] || this._focusedId;
+    const n = rt(r);
     if (this.getAttribute("selection") !== n) {
       this._lastSelectionAttr = n, this._suppressAttributeRender = !0;
       try {
-        i.length ? this.setAttribute("selection", n) : this.removeAttribute("selection");
+        r.length ? this.setAttribute("selection", n) : this.removeAttribute("selection");
       } finally {
         this._suppressAttributeRender = !1;
       }
     }
     if (this.dispatchEvent(new CustomEvent("selection-change", {
       detail: {
-        selection: [...i],
+        selection: [...r],
         previousSelection: s
       },
       bubbles: !0,
       composed: !0
-    })), t !== "restore") {
+    })), e !== "restore") {
       if (this._applyInteractiveStateInPlace({ restoreFocus: !0 })) return;
       this.requestRender();
     }
   }
-  _toggleSelection(e) {
-    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.`);
+  _toggleSelection(t) {
+    const e = this._selection.includes(t) ? this._selection.filter((i) => i !== t) : [...this._selection, t];
+    this._setSelection(e, "pointer"), this._announce(this._t("announceSelectedMany", { count: e.length }));
   }
-  _selectRangeTo(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");
+  _selectRangeTo(t) {
+    const e = this._visibleItemIds(), i = this._rangeAnchorId || this._focusedId || t, r = e.indexOf(i), s = e.indexOf(t);
+    if (r < 0 || s < 0) {
+      this._setSelection([t], "pointer");
       return;
     }
-    const [n, a] = i <= s ? [i, s] : [s, i];
-    this._setSelection(t.slice(n, a + 1), "pointer"), this._announce(`${a - n + 1} items selected.`);
+    const [n, a] = r <= s ? [r, s] : [s, r];
+    this._setSelection(e.slice(n, a + 1), "pointer"), this._announce(this._t("announceSelectedMany", { count: a - n + 1 }));
   }
   _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((t) => !t.disabled).map((t) => t.id);
+    const t = nt(this._items, new Set(this._selection), new Set(this._draggingIds()), this.filterQuery, this.sort);
+    return Array.from(t.values()).flat().filter((e) => !e.disabled).map((e) => e.id);
   }
-  _selectedRootIds(e) {
-    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);
+  _selectedRootIds(t) {
+    const e = this._selection.length ? [...this._selection] : t ? [t] : [], i = T(this._items), r = new Set(e);
+    return e.filter((s) => {
+      const n = i.get(s);
       if (!n) return !1;
       let a = n.parentId;
       for (; a; ) {
-        if (i.has(a)) return !1;
-        a = r.get(a)?.parentId ?? null;
+        if (r.has(a)) return !1;
+        a = i.get(a)?.parentId ?? null;
       }
       return !n.disabled;
     });
   }
   _draggingIds() {
     if (!this._dragState) return [];
-    const e = T(this._items), t = E(this._items), r = [], i = (s) => {
-      r.push(s);
-      const n = e.get(s);
+    const t = T(this._items), e = M(this._items), i = [], r = (s) => {
+      i.push(s);
+      const n = t.get(s);
       if (!n) return;
-      (t.get(k(n.listId, s)) || []).forEach(i);
+      (e.get(w(n.listId, s)) || []).forEach(r);
     };
-    return this._dragState.movedRootIds.forEach(i), r;
+    return this._dragState.movedRootIds.forEach(r), i;
   }
-  _itemClonesOnDrag(e) {
-    const t = this._items.find((i) => i.id === e);
-    return t ? t.cloneOnDrag ? !0 : !!this._lists.find((i) => i.id === t.listId)?.cloneOnDrag : !1;
+  _itemClonesOnDrag(t) {
+    const e = this._items.find((r) => r.id === t);
+    return e ? e.cloneOnDrag ? !0 : !!this._lists.find((r) => r.id === e.listId)?.cloneOnDrag : !1;
   }
   _isDragLocked() {
     return !!(this.hasAttribute("disabled") || this.sort !== "manual" || this.filterQuery && !this.hasAttribute("allow-filtered-drag"));
   }
-  _canDrop(e, t) {
+  // `incoming` is set when the items come from another element: they are not in this one yet, so the checks
+  // that refer to them (they cannot be dropped inside themselves) are replaced by the ones that matter for
+  // newcomers (their ids must be free here).
+  _canDrop(t, e, i = this._dragState?.clone ?? !1, r) {
     if (this._isDragLocked()) return !1;
-    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 && (n.get(k(u.listId, o)) || []).forEach(a);
-    };
-    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));
-    };
-    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 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 $ = T(v);
-    m.forEach((p) => {
-      const w = $.get(p);
-      w && (w.parentId = e.parentId, w.listId = e.listId);
-    });
-    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));
-      });
+    const s = this._lists.find((l) => l.id === t.listId);
+    if (!s || s.disabled) return !1;
+    const n = T(this._items), a = /* @__PURE__ */ new Set(), d = M(this._items);
+    if (r)
+      r.items.forEach((l) => a.add(l.id));
+    else {
+      const l = (p) => {
+        a.add(p);
+        const g = n.get(p);
+        g && (d.get(w(g.listId, p)) || []).forEach(l);
+      };
+      if (e.forEach(l), t.parentId && a.has(t.parentId) || t.beforeId && a.has(t.beforeId)) return !1;
+    }
+    if (r && !r.clone && r.items.some((l) => n.has(l.id))) return !1;
+    const o = r ? r.sourceListIds : Array.from(new Set(e.map((l) => n.get(l)?.listId).filter(Boolean)));
+    if (s.accepts?.length && o.some((l) => !s.accepts?.includes(l)) || t.mode === "inside" && this.getAttribute("allow-nesting") === "false") return !1;
+    if (s.maxItems !== void 0) {
+      const l = this._items.filter((g) => g.listId === t.listId), p = r ? r.items.length : i ? a.size : Array.from(a).filter((g) => n.get(g)?.listId !== t.listId).length;
+      if (p > 0 && l.length + p > s.maxItems) return !1;
+    }
+    const c = this._canDropCallback;
+    if (c)
+      try {
+        const l = r ? r.items.filter((g) => r.rootIds.includes(g.id)) : e.map((g) => n.get(g)).filter((g) => !!g);
+        if (!c({
+          items: l.map(q),
+          movedIds: [...e],
+          targetListId: t.listId,
+          parentId: t.parentId,
+          beforeId: t.beforeId,
+          mode: t.mode,
+          clone: i,
+          ...r ? { from: r.source } : {}
+        })) return !1;
+      } catch (l) {
+        return console.error("ui-sortable: canDrop threw; the drop is refused.", l), !1;
+      }
+    return !0;
+  }
+  _commitMove(t, e, i, r) {
+    if (!this._canDrop(t, e, i)) return !1;
+    const s = T(this._items), n = j(
+      this._items,
+      this._lists,
+      t,
+      e,
+      i,
+      (c, l) => this._cloneSubtreeItem(c, l)
+    ), a = e.map((c) => s.get(c)).filter((c) => !!c), d = i ? "clone" : t.mode === "inside" ? "nest" : a.some((c) => c.listId !== t.listId) ? "transfer" : "reorder", o = {
+      items: n.items,
+      movedIds: n.insertedRootIds,
+      nextSelection: [...n.insertedRootIds],
+      operation: d,
+      target: t,
+      clone: i,
+      source: r
     };
-    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 = {
+    return this._askBeforeChange(o) ? (this._applyPlan(o), !0) : (this._dragState && this._cancelDrag(!1), this._announce(this._t("announceRejected")), !1);
+  }
+  // The last word before anything changes: a listener of `before-change` can cancel the move.
+  _askBeforeChange(t) {
+    return this.dispatchEvent(new CustomEvent("before-change", {
+      detail: {
+        items: t.items.map(q),
+        lists: this.lists,
+        selection: [...t.nextSelection],
+        previousSelection: [...this._selection],
+        movedIds: [...t.movedIds],
+        source: t.source,
+        operation: t.operation,
+        persistence: J(t.items),
+        target: { listId: t.target.listId, parentId: t.target.parentId, beforeId: t.target.beforeId, mode: t.target.mode },
+        clone: t.clone,
+        ...t.external ? { external: t.external } : {}
+      },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    }));
+  }
+  // Makes a move that was accepted real: the items, the selection, the attributes, the saved positions, the
+  // events and the announcement.
+  _applyPlan(t) {
+    const e = [...this._selection];
+    this._dragState && (this._dragState.committed = !0), this._items = t.items.map(A), this._clearPointerDragPreview(), this._dragState = null, this._removeDragImage(), this._selection = [...t.nextSelection], this._focusedId = t.nextSelection[0] || null, this._pendingFocusId = this._focusedId, this._syncAttributesFromState();
+    const i = J(this._items);
+    this._persistSnapshot(i);
+    const r = {
       items: this.items,
       lists: this.lists,
-      selection: [...H],
-      previousSelection: g,
-      movedIds: [...m],
-      source: i,
-      operation: C,
-      persistence: x
+      selection: [...t.nextSelection],
+      previousSelection: e,
+      movedIds: [...t.movedIds],
+      source: t.source,
+      operation: t.operation,
+      persistence: i,
+      ...t.external ? { external: t.external } : {}
     };
     this.dispatchEvent(new CustomEvent("change", {
-      detail: G,
+      detail: r,
       bubbles: !0,
       composed: !0
     })), this.dispatchEvent(new CustomEvent("persist-request", {
-      detail: G,
+      detail: r,
       bubbles: !0,
       composed: !0
-    })), this._announce(this._messageForMove(C, m.length, e)), this.requestRender();
+    })), this._announce(this._messageForMove(t.operation, t.movedIds.length, t.target, t.destination)), this.requestRender();
   }
   _syncAttributesFromState() {
-    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;
+    const t = _t(this._lists), e = bt(this._items), i = rt(this._selection);
+    this._lastListsAttr = t, this._lastItemsAttr = e, this._lastSelectionAttr = i, this._suppressAttributeRender = !0;
     try {
-      this.setAttribute("lists", e), this.setAttribute("items", t), this._selection.length ? this.setAttribute("selection", r) : this.removeAttribute("selection");
+      this.setAttribute("lists", t), this.setAttribute("items", e), this._selection.length ? this.setAttribute("selection", i) : this.removeAttribute("selection");
     } finally {
       this._suppressAttributeRender = !1;
     }
   }
-  _cloneSubtreeItem(e, t) {
-    const i = `copy-${this._cloneSeed++}`, n = `${e.id.includes("--copy-") ? e.id.split("--copy-")[0] : e.id}--${i}`;
+  _cloneSubtreeItem(t, e) {
+    const r = `copy-${this._cloneSeed++}`, n = `${t.id.includes("--copy-") ? t.id.split("--copy-")[0] : t.id}--${r}`;
     return {
-      ...e,
+      ...t,
       id: n,
-      label: t[0] === e.id ? `${e.label} copy` : e.label
+      label: e[0] === t.id ? `${t.label} copy` : t.label,
+      data: B(t.data)
     };
   }
-  _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}.`;
+  _messageForMove(t, e, i, r) {
+    const s = this._lists.find((d) => d.id === i.listId), n = r || s?.label || i.listId, a = { count: e, list: n };
+    return t === "clone" ? this._t(e === 1 ? "announceCopiedOne" : "announceCopiedMany", a) : t === "nest" ? this._t(e === 1 ? "announceNestedOne" : "announceNestedMany", a) : t === "transfer" ? this._t(e === 1 ? "announceMovedOne" : "announceMovedMany", a) : this._t(e === 1 ? "announceReorderedOne" : "announceReorderedMany", a);
+  }
+  _announceDragging(t, e, i) {
+    e === 1 ? this._announce(this._t(i ? "announceDraggingCopy" : "announceDragging", { label: t })) : this._announce(this._t(i ? "announceDraggingCopyMany" : "announceDraggingMany", { count: e }));
   }
-  _persistSnapshot(e) {
-    const t = this.getAttribute("persist-key");
-    if (t)
+  _persistSnapshot(t) {
+    const e = this.getAttribute("persist-key");
+    if (e)
       try {
-        window.localStorage.setItem(t, JSON.stringify(e));
+        window.localStorage.setItem(e, JSON.stringify(t));
       } catch {
       }
   }
-  _announce(e) {
-    this._liveMessage = e, this._applyLiveMessage();
+  _announce(t) {
+    this._liveMessage = t, this._applyLiveMessage();
   }
-  _cancelDrag(e) {
-    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, t) {
-    this._removeDragImage();
-    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;
+  _cancelDrag(t) {
+    this._stopAutoScroll(), this._dragState && (this._setDraggingVisualState(this._draggingIds(), !1), this._pendingDropTarget = null, this._setExternal(null), this._setDropTargetVisualState(this._dragState.dropTarget, !1), this._clearPointerDragPreview(), this._items = this._dragState.snapshot.map(A), this._dragState = null, this._clearHoldTimer(), this._pointerGesture = null, this._removeDragImage(), t && this._announce(this._t("announceCancelled")), this._syncAttributesFromState(), this.requestRender());
   }
   _removeDragImage() {
     this._dragImage?.remove(), this._dragImage = null;
   }
-  _removeDragPreviewOverlay() {
-    this._dragPreviewOverlay?.remove(), this._dragPreviewOverlay = null;
-  }
-  _applyPointerPreview(e, t, r, i) {
+  _applyPointerPreview(t, e, i, r, s) {
     this._removeDragImage();
-    const s = document.createElement("div");
-    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, t) {
-    this._dragImage && (this._dragImage.style.transform = `translate(${Math.round(e + 14)}px, ${Math.round(t + 14)}px)`);
+    const n = this._dragState ? this._findItemElement(this._dragState.originId) : null, a = n ? this._buildDragGhost(n, i, r, s) : null;
+    if (a)
+      this.root.appendChild(a), this._dragImage = a;
+    else {
+      const d = document.createElement("div");
+      d.className = "drag-pill", d.textContent = r ? i === 1 ? this._t("copyingOne") : this._t("copyingMany", { count: i }) : i === 1 ? this._t("movingOne") : this._t("movingMany", { count: i }), this.root.appendChild(d), this._dragImage = d, this._dragImageOffset = { x: -14, y: -14 };
+    }
+    this._movePointerPreview(t, e);
+  }
+  // The ghost is a copy of the card being dragged, so it looks like the thing you picked up. It is
+  // inert and carries no ids, so nothing that looks cards up by id can find it.
+  _buildDragGhost(t, e, i, r) {
+    const s = t.getBoundingClientRect(), n = t.cloneNode(!0);
+    if (n.classList.add("item-ghost"), ["id", "data-id", "data-drag-trigger", "tabindex", "role", "aria-selected", "aria-disabled"].forEach((c) => {
+      n.removeAttribute(c);
+    }), n.querySelectorAll("[id], [data-id], [data-drag-trigger], [tabindex]").forEach((c) => {
+      ["id", "data-id", "data-drag-trigger", "tabindex"].forEach((l) => c.removeAttribute(l));
+    }), n.setAttribute("part", "drag-ghost"), n.setAttribute("aria-hidden", "true"), n.setAttribute("inert", ""), n.setAttribute("data-dragging", "false"), n.setAttribute("data-focused", "false"), n.setAttribute("data-drop-inside-active", "false"), e > 1 && n.setAttribute("data-count", "stack"), e > 1 || i) {
+      const c = document.createElement("span");
+      c.className = "ghost-badge", c.textContent = e > 1 ? String(e) : "+", n.appendChild(c);
+    }
+    const a = this.getAttribute("drag-preview-size") === "compact";
+    a && n.setAttribute("data-compact", "true");
+    const d = a ? Math.min(s.width, 240) : s.width;
+    n.style.inlineSize = `${Math.round(d)}px`;
+    const o = !!r && Number.isFinite(r.x) && Number.isFinite(r.y);
+    return this._dragImageOffset = {
+      x: o ? Math.min(Math.max(r.x - s.left, 0), d) : d / 2,
+      y: o ? Math.min(Math.max(r.y - s.top, 0), s.height) : s.height / 2
+    }, n;
+  }
+  _movePointerPreview(t, e) {
+    const i = this._dragImage;
+    i && (i.isConnected || this.root.appendChild(i), i.style.transform = `translate(${Math.round(t - this._dragImageOffset.x)}px, ${Math.round(e - this._dragImageOffset.y)}px)`);
   }
   _keyboardDropTargets() {
-    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)) || [];
+    const t = T(this._items), e = M(this._items), i = [], r = this.getAttribute("allow-nesting") !== "false", s = (n, a) => {
+      const d = e.get(w(n, a)) || [];
       d.forEach((o) => {
-        const u = e.get(o);
-        !u || u.hidden || (r.push({
+        const c = t.get(o);
+        !c || c.hidden || (i.push({
           listId: n,
           parentId: a,
           beforeId: o,
           mode: "before",
-          label: `Before ${u.label}`
-        }), i && r.push({
+          label: this._t("targetBefore", { label: c.label })
+        }), r && i.push({
           listId: n,
           parentId: o,
           beforeId: null,
           mode: "inside",
-          label: `Nest inside ${u.label}`
+          label: this._t("targetInside", { label: c.label })
         }), s(n, o));
-      }), a ? i && d.length > 0 && r.push({
+      }), a ? r && d.length > 0 && i.push({
         listId: n,
         parentId: a,
         beforeId: null,
         mode: "before",
-        label: "After children"
-      }) : r.push({
+        label: this._t("targetAfterChildren")
+      }) : i.push({
         listId: n,
         parentId: a,
         beforeId: null,
         mode: "before",
-        label: `End of ${this._lists.find((o) => o.id === n)?.label || n}`
+        label: this._t("targetEnd", { list: this._lists.find((o) => o.id === n)?.label || n })
       });
     };
-    return this._lists.forEach((n) => s(n.id, null)), r.filter((n) => this._canDrop(n, this._dragState?.movedRootIds || []));
+    return this._lists.forEach((n) => s(n.id, null)), i.filter((n) => this._canDrop(n, this._dragState?.movedRootIds || []));
   }
-  _initialKeyboardDropTarget(e) {
-    const t = this._items.find((r) => r.id === e);
-    return t ? {
-      listId: t.listId,
-      parentId: t.parentId,
-      beforeId: e,
+  _initialKeyboardDropTarget(t) {
+    const e = this._items.find((i) => i.id === t);
+    return e ? {
+      listId: e.listId,
+      parentId: e.parentId,
+      beforeId: t,
       mode: "before"
     } : null;
   }
-  _moveKeyboardDropTarget(e) {
+  _moveKeyboardDropTarget(t) {
     if (!this._dragState) return;
-    const t = this._keyboardDropTargets();
-    if (!t.length) return;
-    const r = Math.max(0, t.findIndex(
+    const e = this._keyboardDropTargets();
+    if (!e.length) return;
+    const i = Math.max(0, e.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(t.length - 1, r + e));
-    this._setDropTarget(t[i], { announceLabel: t[i].label });
+    )), r = Math.max(0, Math.min(e.length - 1, i + t));
+    this._setDropTarget(e[r], { announceLabel: e[r].label });
   }
-}
-typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", he);
+};
+$._instances = /* @__PURE__ */ new Set();
+let X = $;
+typeof customElements < "u" && !customElements.get("ui-sortable") && customElements.define("ui-sortable", X);
 export {
-  he as UISortable
+  X as UISortable
 };