@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-dnd.mjs

@@ -0,0 +1,1073 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, ElementRef, Directive, input, booleanAttribute, numberAttribute, contentChildren, computed, signal, ChangeDetectionStrategy, Component, output, effect, model, contentChild, TemplateRef } from '@angular/core';
+import { MkLiveAnnouncer, MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Pure array helpers for applying an {@link MkDropEvent}. They mutate the passed
+ * array(s) in place and also return the (target) array, mirroring the behaviour
+ * of Angular CDK's `moveItemInArray` / `transferArrayItem`.
+ */
+function clampIndex(index, max) {
+    return Math.max(0, Math.min(index, max));
+}
+/**
+ * Move an item within a single array from `fromIndex` to `toIndex`.
+ * Mutates and returns `array`.
+ *
+ * ```ts
+ * mkMoveItemInArray(rows, e.previousIndex, e.currentIndex);
+ * ```
+ */
+function mkMoveItemInArray(array, fromIndex, toIndex) {
+    if (array.length === 0)
+        return array;
+    const from = clampIndex(fromIndex, array.length - 1);
+    const to = clampIndex(toIndex, array.length - 1);
+    if (from === to)
+        return array;
+    const item = array[from];
+    const delta = to < from ? -1 : 1;
+    for (let i = from; i !== to; i += delta) {
+        array[i] = array[i + delta];
+    }
+    array[to] = item;
+    return array;
+}
+/**
+ * Move an item from one array (`from`) to another (`to`), removing it from
+ * `from[fromIndex]` and inserting it at `to[toIndex]`. Mutates both arrays and
+ * returns the target (`to`) array.
+ *
+ * ```ts
+ * mkTransferArrayItem(todo, done, e.previousIndex, e.currentIndex);
+ * ```
+ */
+function mkTransferArrayItem(from, to, fromIndex, toIndex) {
+    if (from.length === 0)
+        return to;
+    const source = clampIndex(fromIndex, from.length - 1);
+    const target = clampIndex(toIndex, to.length);
+    const [item] = from.splice(source, 1);
+    to.splice(target, 0, item);
+    return to;
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any -- lists hold heterogeneous
+   item types; `any` here avoids generic-variance friction across the registry. */
+/**
+ * Central registry of every live `[mkDropList]` on the page, keyed by id.
+ *
+ * Connected lists (kanban "buckets") use it to resolve the sibling lists named
+ * in `mkDropListConnectedTo`, and both pointer and keyboard dragging use it to
+ * find the group of lists an item may travel between.
+ *
+ * Registration is automatic — you never call this service directly; it is
+ * documented so tooling/tests can inspect the wiring.
+ */
+class MkDragDropRegistry {
+    lists = new Map();
+    /** Register (or replace) the list published under `id`. */
+    register(id, list) {
+        this.lists.set(id, list);
+    }
+    /** Remove `list` from the registry if it is still the holder of `id`. */
+    unregister(id, list) {
+        if (this.lists.get(id) === list)
+            this.lists.delete(id);
+    }
+    /** Look up a list by its `mkDropListId`. */
+    get(id) {
+        return this.lists.get(id);
+    }
+    /** All registered lists, in registration order. */
+    all() {
+        return [...this.lists.values()];
+    }
+    /**
+     * The ordered travel group for `list`: `list` itself plus every enabled list
+     * it is `mkDropListConnectedTo`, in registration (roughly DOM) order. Used to
+     * resolve "adjacent" lists for keyboard column-to-column movement and to
+     * hit-test the pointer against candidate targets.
+     */
+    connectedGroup(list) {
+        const connected = list.connectedTo();
+        return this.all().filter((l) => l === list || (connected.includes(l.id()) && !l.mkDropListDisabled()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragDropRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragDropRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragDropRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Optional grip that restricts where a pointer drag of the enclosing
+ * `[mkDrag]` may begin. Place it on the element the user should press to drag;
+ * without any handle the whole item is draggable.
+ *
+ * A directive (not a component), so it composes onto anything — a `<span>`,
+ * a `<button>`, or another component's host such as `<mk-icon mkDragHandle />`.
+ * Its look (grab cursor, muted colour, `touch-action: none`) ships as the
+ * global `.mk-drag-handle` class in the theme stylesheet.
+ *
+ * ```html
+ * <div mkDrag [mkDragData]="row">
+ *   <span mkDragHandle aria-hidden="true">⠿</span>
+ *   {{ row.name }}
+ * </div>
+ * ```
+ */
+class MkDragHandle {
+    /** The handle's host element. */
+    element = inject(ElementRef).nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MkDragHandle, isStandalone: true, selector: "[mkDragHandle]", host: { classAttribute: "mk-drag-handle" }, exportAs: ["mkDragHandle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDragHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkDragHandle]',
+                    exportAs: 'mkDragHandle',
+                    host: {
+                        class: 'mk-drag-handle',
+                    },
+                }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any -- cross-list references
+   use `any` for the item type to avoid generic-variance friction. */
+/** Pixels the pointer must travel before a press turns into a drag. */
+const DRAG_THRESHOLD = 5;
+/**
+ * Pixels a *touch* pointer may wander during the long-press delay before the
+ * press is treated as a scroll and the pending drag is abandoned.
+ */
+const TOUCH_SLOP = 10;
+/** Settle animation duration for the pointer preview (ms). */
+const SETTLE_MS = 180;
+/**
+ * Makes an item inside a `[mkDropList]` draggable — by pointer (mouse / touch /
+ * pen) **and** by keyboard (WCAG 2.1.1). The item is focusable, exposes
+ * `role="button"` + `aria-roledescription="Draggable item"`, and every move is
+ * announced via {@link MkLiveAnnouncer}.
+ *
+ * Keyboard: focus an item and press **Space/Enter** to pick it up, **Arrow**
+ * keys to move it (crossing into connected lists at the ends / across the
+ * perpendicular axis), **Space/Enter** to drop, **Escape** to cancel.
+ *
+ * Touch: a swipe scrolls the page as usual — the drag only arms after a
+ * long-press ({@link mkDragTouchDelay}, default 300 ms). While armed the item
+ * gets the `mk-drag--armed` class so consumers can style the lift moment.
+ * Mouse and pen drags start immediately, as before.
+ *
+ * Performance: pointer moves are rAF-coalesced (one hit-test + one set of
+ * style/DOM writes per frame) against list/item rects snapshotted when the
+ * drag lifts, so a move never forces layout. The pending frame is flushed
+ * synchronously on release so drops land exactly where the pointer ended.
+ *
+ * ```html
+ * <li mkDrag [mkDragData]="row" [mkDragDisabled]="row.locked">
+ *   <span mkDragHandle aria-hidden="true">⠿</span> {{ row.title }}
+ * </li>
+ * ```
+ *
+ * @typeParam T item data type.
+ */
+class MkDrag {
+    doc = inject(DOCUMENT);
+    registry = inject(MkDragDropRegistry);
+    announcer = inject(MkLiveAnnouncer);
+    i18n = inject(MK_I18N);
+    home = inject(MkDropList, { optional: true });
+    /** The item's host element. */
+    element = inject(ElementRef).nativeElement;
+    /** Arbitrary payload associated with this item. */
+    mkDragData = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mkDragData" }] : /* istanbul ignore next */ []));
+    /** Disable dragging this specific item. */
+    mkDragDisabled = input(false, { ...(ngDevMode ? { debugName: "mkDragDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Long-press delay (ms) before a *touch* pointer arms the drag. Until it
+     * elapses a swipe scrolls natively; moving more than {@link TOUCH_SLOP}
+     * pixels abandons the pending drag. `0` arms immediately (legacy behavior).
+     * Mouse and pen are never delayed.
+     */
+    mkDragTouchDelay = input(300, { ...(ngDevMode ? { debugName: "mkDragTouchDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Every handle in the projected subtree, including those of nested drags. */
+    handles = contentChildren(MkDragHandle, { ...(ngDevMode ? { debugName: "handles" } : /* istanbul ignore next */ {}), descendants: true });
+    /**
+     * Handles that belong to *this* drag — i.e. whose nearest `[mkDrag]` ancestor
+     * is this item, not a nested one. A nested `[mkDropList]`/`[mkDrag]` (a
+     * product list inside a draggable category, say) would otherwise have its
+     * handles captured by the outer item via `descendants: true`, so pressing an
+     * inner handle would start the outer drag and inner dnd would never work.
+     */
+    ownHandles = computed(() => this.handles().filter((h) => h.element.closest('[mkDrag]') === this.element), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ownHandles" }] : /* istanbul ignore next */ []));
+    /** True while a pointer drag is in progress. */
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /** True while the item is "picked up" for keyboard movement. */
+    lifted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lifted" }] : /* istanbul ignore next */ []));
+    /** True from the moment a touch long-press arms the drag until release. */
+    armed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "armed" }] : /* istanbul ignore next */ []));
+    /** Whether the home list lays items out horizontally (scopes touch-action). */
+    inHorizontalList = computed(() => this.home?.mkDropListOrientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inHorizontalList" }] : /* istanbul ignore next */ []));
+    /** Effective disabled state (item- or list-level). */
+    disabled = computed(() => this.mkDragDisabled() || (this.home?.mkDropListDisabled() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    // --- shared drag session state (only one item is ever active at a time) ---
+    targetList = null;
+    targetIndex = 0;
+    homeIndex = 0;
+    placeholder = null;
+    // --- pointer session state ---
+    pointerId = null;
+    started = false;
+    startX = 0;
+    startY = 0;
+    offsetX = 0;
+    offsetY = 0;
+    originLeft = 0;
+    originTop = 0;
+    preview = null;
+    moveHandler = (e) => this.onPointerMove(e);
+    upHandler = (e) => this.onPointerUp(e);
+    cancelHandler = () => this.finishPointer(true);
+    // --- touch long-press state ---
+    /** Gate for the move handler: mouse/pen arm on pointerdown, touch on timer. */
+    pointerArmed = false;
+    touchTimer = null;
+    /** Inline `touch-action` to restore after a drag locked it (null = not locked). */
+    savedTouchAction = null;
+    /**
+     * `touch-action: pan-y` (see drag.scss) keeps native scrolling alive while
+     * the long-press is pending, but that also means the browser may still start
+     * a scroll once we *are* dragging — so the armed drag must eat `touchmove`.
+     * Registered with `passive: false` for `preventDefault` to register.
+     */
+    touchMoveHandler = (e) => {
+        if (this.pointerArmed && e.cancelable)
+            e.preventDefault();
+    };
+    /** Android fires `contextmenu` on long-press — keep it off the gesture. */
+    contextMenuHandler = (e) => e.preventDefault();
+    // --- frame-coalesced move state (perf) ------------------------------
+    //
+    // Every `pointermove` used to force layout O(lists + items) times via
+    // getBoundingClientRect. Instead, moves now only record the latest
+    // coordinates and schedule ONE rAF (same pattern as the table's column
+    // resize); the frame resolves list/index from rects snapshotted at lift
+    // and does all style/DOM writes in one pass. The pending frame is flushed
+    // synchronously on pointerup so drops land exactly where the pointer ended.
+    /** Pending rAF id for the coalesced move pass, if any. */
+    moveRaf = null;
+    pendingX = 0;
+    pendingY = 0;
+    hasPendingMove = false;
+    /** Connected lists resolved once at lift (stable for the drag's duration). */
+    cachedGroup = [];
+    /** List bounds snapshotted at lift / after invalidation. */
+    listRects = new Map();
+    /** Item bounds per list, aligned with `itemElementsExcept(this)`. */
+    itemRects = new Map();
+    /** Lists whose snapshots a placeholder move invalidated (re-measured next frame). */
+    dirtyLists = new Set();
+    /** Any scroll moves everything — re-snapshot every list on the next frame. */
+    scrollDirty = false;
+    scrollHandler = () => {
+        this.scrollDirty = true;
+    };
+    /** Last placeholder sync target — makes `syncPlaceholder` idempotent. */
+    lastSyncList = null;
+    lastSyncIndex = -1;
+    // ===================================================================
+    // Pointer dragging
+    // ===================================================================
+    onPointerDown(event) {
+        const e = event;
+        if (this.disabled() || !this.home || this.lifted())
+            return;
+        if (e.button !== undefined && e.button !== 0)
+            return;
+        if (this.ownHandles().length && !this.isHandleTarget(e.target))
+            return;
+        this.pointerId = e.pointerId;
+        this.started = false;
+        this.startX = e.clientX;
+        this.startY = e.clientY;
+        const el = this.element;
+        try {
+            el.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // Pointer already lifted (fast tap) — nothing left to capture.
+        }
+        el.addEventListener('pointermove', this.moveHandler);
+        el.addEventListener('pointerup', this.upHandler);
+        el.addEventListener('pointercancel', this.cancelHandler);
+        if (e.pointerType === 'touch') {
+            el.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
+            el.addEventListener('contextmenu', this.contextMenuHandler);
+            const delay = this.mkDragTouchDelay();
+            if (delay > 0) {
+                // Long-press lift: do NOT preventDefault and do NOT arm yet — until
+                // the timer fires this press may just be the start of a scroll.
+                this.touchTimer =
+                    this.doc.defaultView?.setTimeout(() => this.armTouch(), delay) ?? null;
+            }
+            else {
+                // Legacy immediate mode.
+                this.pointerArmed = true;
+                this.lockTouchAction();
+            }
+        }
+        else {
+            // Mouse / pen: armed immediately, the 5px threshold does the rest.
+            this.pointerArmed = true;
+        }
+    }
+    onPointerMove(e) {
+        if (this.pointerId === null || e.pointerId !== this.pointerId)
+            return;
+        if (!this.pointerArmed) {
+            // Long-press still pending: real movement means the user is scrolling —
+            // abandon the pending drag and leave the gesture to the browser.
+            if (Math.hypot(e.clientX - this.startX, e.clientY - this.startY) > TOUCH_SLOP) {
+                this.finishPointer(true);
+            }
+            return;
+        }
+        if (!this.started) {
+            if (Math.hypot(e.clientX - this.startX, e.clientY - this.startY) < DRAG_THRESHOLD) {
+                return;
+            }
+            this.beginPointer();
+        }
+        e.preventDefault();
+        // Only record the coordinates here — the heavy work (hit-testing,
+        // placeholder sync, preview transform) is coalesced to one rAF.
+        this.pendingX = e.clientX;
+        this.pendingY = e.clientY;
+        this.hasPendingMove = true;
+        this.scheduleMoveFrame();
+    }
+    /** The long-press delay elapsed with the finger still down — lift. */
+    armTouch() {
+        this.touchTimer = null;
+        this.pointerArmed = true;
+        this.armed.set(true);
+        // `pan-y` would still let the browser start a vertical scroll mid-drag;
+        // lock the element down for the rest of the gesture.
+        this.lockTouchAction();
+    }
+    lockTouchAction() {
+        this.savedTouchAction = this.element.style.touchAction;
+        this.element.style.touchAction = 'none';
+    }
+    unlockTouchAction() {
+        if (this.savedTouchAction === null)
+            return;
+        this.element.style.touchAction = this.savedTouchAction;
+        this.savedTouchAction = null;
+    }
+    /** Undo everything the touch path set up (timer, listeners, lock, class). */
+    clearTouchState() {
+        const el = this.element;
+        el.removeEventListener('touchmove', this.touchMoveHandler);
+        el.removeEventListener('contextmenu', this.contextMenuHandler);
+        if (this.touchTimer !== null) {
+            this.doc.defaultView?.clearTimeout(this.touchTimer);
+            this.touchTimer = null;
+        }
+        this.pointerArmed = false;
+        this.armed.set(false);
+        this.unlockTouchAction();
+    }
+    onPointerUp(e) {
+        if (this.pointerId === null || e.pointerId !== this.pointerId)
+            return;
+        this.finishPointer(!this.started);
+    }
+    beginPointer() {
+        if (!this.home)
+            return;
+        this.started = true;
+        this.dragging.set(true);
+        this.homeIndex = this.home.indexOf(this);
+        this.targetList = this.home;
+        this.targetIndex = this.homeIndex;
+        const rect = this.element.getBoundingClientRect();
+        this.originLeft = rect.left;
+        this.originTop = rect.top;
+        this.offsetX = this.startX - rect.left;
+        this.offsetY = this.startY - rect.top;
+        this.createPlaceholder(rect);
+        this.element.parentNode?.insertBefore(this.placeholder, this.element);
+        this.element.style.display = 'none';
+        this.createPreview(rect);
+        this.home.setReceiving(true);
+        // The manual insert above already placed the placeholder at homeIndex.
+        this.lastSyncList = this.home;
+        this.lastSyncIndex = this.homeIndex;
+        // One-time layout snapshot at lift; every move hits the cache instead of
+        // forcing layout. Scrolling anywhere invalidates the whole snapshot.
+        this.snapshotRects();
+        this.doc.addEventListener('scroll', this.scrollHandler, {
+            capture: true,
+            passive: true,
+        });
+    }
+    /** Coalesce move handling to at most one layout pass per animation frame. */
+    scheduleMoveFrame() {
+        if (this.moveRaf !== null)
+            return;
+        const raf = this.doc.defaultView?.requestAnimationFrame(() => {
+            this.moveRaf = null;
+            this.applyPendingMove();
+        });
+        if (raf === undefined)
+            this.applyPendingMove(); // no window — degrade to sync
+        else
+            this.moveRaf = raf;
+    }
+    /**
+     * Cancel the scheduled frame; when `apply` is set, process the pending
+     * coordinates synchronously (flush-on-end, like the table column resize) so
+     * a drop lands exactly where the pointer stopped.
+     */
+    flushMoveFrame(apply) {
+        if (this.moveRaf !== null) {
+            this.doc.defaultView?.cancelAnimationFrame(this.moveRaf);
+            this.moveRaf = null;
+        }
+        if (apply)
+            this.applyPendingMove();
+        this.hasPendingMove = false;
+    }
+    /**
+     * The per-frame move pass. Ordered reads → writes: refresh invalidated
+     * snapshots first, resolve the hovered list/index from the cache, then do
+     * all style/DOM writes — no read ever follows a write within the frame.
+     */
+    applyPendingMove() {
+        if (!this.started || !this.hasPendingMove)
+            return;
+        this.hasPendingMove = false;
+        // Reads: re-measure only what was invalidated since the last frame.
+        if (this.scrollDirty) {
+            this.scrollDirty = false;
+            this.dirtyLists.clear();
+            this.snapshotRects();
+        }
+        else if (this.dirtyLists.size) {
+            for (const list of this.dirtyLists)
+                this.measureList(list);
+            this.dirtyLists.clear();
+        }
+        const x = this.pendingX;
+        const y = this.pendingY;
+        const list = this.listUnderPoint(x, y) ?? this.targetList;
+        const index = list ? this.indexInList(list, x, y) : this.targetIndex;
+        // Writes: follow the cursor, then settle the placeholder.
+        if (this.preview) {
+            const dx = x - this.offsetX - this.originLeft;
+            const dy = y - this.offsetY - this.originTop;
+            this.preview.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+        }
+        if (!list)
+            return;
+        if (list !== this.targetList) {
+            this.targetList?.setReceiving(false);
+            this.targetList = list;
+            list.setReceiving(true);
+        }
+        this.targetIndex = index;
+        this.syncPlaceholder();
+    }
+    finishPointer(cancel) {
+        if (this.pointerId !== null) {
+            try {
+                this.element.releasePointerCapture(this.pointerId);
+            }
+            catch {
+                /* capture may already be gone */
+            }
+        }
+        const el = this.element;
+        el.removeEventListener('pointermove', this.moveHandler);
+        el.removeEventListener('pointerup', this.upHandler);
+        el.removeEventListener('pointercancel', this.cancelHandler);
+        this.pointerId = null;
+        this.clearTouchState();
+        if (!this.started)
+            return; // was a click, never a drag
+        // Flush the last coalesced move (unless cancelling) so the drop target
+        // reflects exactly where the pointer ended, not the last painted frame.
+        this.flushMoveFrame(!cancel);
+        const settle = () => this.commitPointer(cancel);
+        if (cancel || this.prefersReducedMotion() || !this.preview) {
+            settle();
+            return;
+        }
+        // Animate the preview onto the placeholder, then commit.
+        const dest = this.placeholder?.getBoundingClientRect();
+        const preview = this.preview;
+        if (dest) {
+            const dx = dest.left - this.originLeft;
+            const dy = dest.top - this.originTop;
+            preview.style.transition = `transform ${SETTLE_MS}ms var(--mk-ease-emphasized)`;
+            preview.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+            let done = false;
+            const end = () => {
+                if (done)
+                    return;
+                done = true;
+                settle();
+            };
+            preview.addEventListener('transitionend', end, { once: true });
+            this.doc.defaultView?.setTimeout(end, SETTLE_MS + 40);
+        }
+        else {
+            settle();
+        }
+    }
+    commitPointer(cancel) {
+        if (this.destroyed)
+            return;
+        const container = this.targetList;
+        const previousContainer = this.home;
+        const currentIndex = this.targetIndex;
+        const previousIndex = this.homeIndex;
+        this.cleanupDom();
+        this.dragging.set(false);
+        if (cancel || !container || !previousContainer) {
+            this.announceCancelled('polite');
+            return;
+        }
+        this.emit(previousContainer, container, previousIndex, currentIndex, true);
+        this.announceDropped(currentIndex, 'polite');
+    }
+    // ===================================================================
+    // Keyboard dragging (WCAG 2.1.1)
+    // ===================================================================
+    onKeyDown(event) {
+        const e = event;
+        const key = e.key;
+        if (!this.lifted()) {
+            if ((key === ' ' || key === 'Enter') && !this.disabled() && this.home && !this.dragging()) {
+                e.preventDefault();
+                this.pickUp();
+            }
+            return;
+        }
+        // Picked up: capture the movement / drop / cancel keys.
+        const horizontal = this.targetList?.mkDropListOrientation() === 'horizontal';
+        switch (key) {
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                this.dropKeyboard();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.cancelKeyboard();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                horizontal ? this.stepList(-1) : this.stepPrimary(-1);
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                horizontal ? this.stepList(1) : this.stepPrimary(1);
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                horizontal ? this.stepPrimary(-1) : this.stepList(-1);
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                horizontal ? this.stepPrimary(1) : this.stepList(1);
+                break;
+            default:
+                break;
+        }
+    }
+    onBlur() {
+        // Losing focus mid-lift cancels the keyboard drag to avoid a stuck state.
+        if (this.lifted())
+            this.cancelKeyboard();
+    }
+    pickUp() {
+        if (!this.home)
+            return;
+        this.lifted.set(true);
+        this.homeIndex = this.home.indexOf(this);
+        this.targetList = this.home;
+        this.targetIndex = this.homeIndex;
+        const rect = this.element.getBoundingClientRect();
+        this.createPlaceholder(rect);
+        this.home.setReceiving(true);
+        // Fresh placeholder — force the first sync through the idempotence guard.
+        this.lastSyncList = null;
+        this.lastSyncIndex = -1;
+        this.syncPlaceholder();
+        this.announcePickedUp(this.homeIndex, this.home.size());
+    }
+    stepPrimary(step) {
+        const list = this.targetList;
+        if (!list)
+            return;
+        const max = this.maxIndex(list);
+        let idx = this.targetIndex + step;
+        if (idx < 0) {
+            const prev = this.adjacentList(list, -1);
+            if (prev)
+                return this.moveToList(prev, this.maxIndex(prev), true);
+            idx = 0;
+        }
+        else if (idx > max) {
+            const next = this.adjacentList(list, 1);
+            if (next)
+                return this.moveToList(next, 0, true);
+            idx = max;
+        }
+        if (idx === this.targetIndex)
+            return;
+        this.targetIndex = idx;
+        this.syncPlaceholder();
+        this.announceMove(false);
+    }
+    stepList(step) {
+        const list = this.targetList;
+        if (!list)
+            return;
+        const adj = this.adjacentList(list, step);
+        if (!adj)
+            return;
+        this.moveToList(adj, Math.min(this.targetIndex, this.maxIndex(adj)), true);
+    }
+    moveToList(list, index, crossed) {
+        this.targetList?.setReceiving(false);
+        this.targetList = list;
+        this.targetIndex = index;
+        list.setReceiving(true);
+        this.syncPlaceholder();
+        this.announceMove(crossed);
+    }
+    dropKeyboard() {
+        const container = this.targetList;
+        const previousContainer = this.home;
+        const currentIndex = this.targetIndex;
+        const previousIndex = this.homeIndex;
+        this.cleanupDom();
+        this.lifted.set(false);
+        if (!container || !previousContainer)
+            return;
+        this.emit(previousContainer, container, previousIndex, currentIndex, false);
+        this.announceDropped(currentIndex, 'assertive');
+    }
+    cancelKeyboard() {
+        this.cleanupDom();
+        this.lifted.set(false);
+        this.announceCancelled('assertive');
+    }
+    // ===================================================================
+    // Screen-reader announcements
+    //
+    // All user-facing strings come from MK_I18N so consumers can localize them.
+    // ===================================================================
+    /** "Picked up…" instructions when a keyboard drag starts. */
+    announcePickedUp(index, total) {
+        this.announcer.announce(this.i18n.dndPickedUp(index + 1, total), 'assertive');
+    }
+    /** Position update after each keyboard step (names the list when crossing). */
+    announceMove(crossed) {
+        const list = this.targetList;
+        if (!list)
+            return;
+        const total = list === this.home ? list.size() : list.size() + 1;
+        this.announcer.announce(crossed
+            ? this.i18n.dndMovedToList(list.label(), this.targetIndex + 1, total)
+            : this.i18n.dndMoved(this.targetIndex + 1, total), 'assertive');
+    }
+    /** Confirmation after a successful drop (pointer: polite; keyboard: assertive). */
+    announceDropped(index, politeness) {
+        this.announcer.announce(this.i18n.dndDropped(index + 1), politeness);
+    }
+    /** The drag was cancelled and the item snapped back. */
+    announceCancelled(politeness) {
+        this.announcer.announce(this.i18n.dndCancelled, politeness);
+    }
+    // ===================================================================
+    // Shared helpers
+    // ===================================================================
+    /** Highest valid target index for `list` given the item is being removed. */
+    maxIndex(list) {
+        return list === this.home ? Math.max(0, list.size() - 1) : list.size();
+    }
+    adjacentList(list, step) {
+        const group = this.registry.connectedGroup(list);
+        const i = group.indexOf(list);
+        const target = group[i + step];
+        return target ?? null;
+    }
+    /** Snapshot every connected list's bounds + item bounds (at lift / scroll). */
+    snapshotRects() {
+        this.cachedGroup = this.home ? this.registry.connectedGroup(this.home) : [];
+        this.listRects.clear();
+        this.itemRects.clear();
+        for (const list of this.cachedGroup)
+            this.measureList(list);
+    }
+    /** (Re)measure one list's bounds and item bounds into the cache. */
+    measureList(list) {
+        this.listRects.set(list, list.element.getBoundingClientRect());
+        this.itemRects.set(list, list.itemElementsExcept(this).map((el) => el.getBoundingClientRect()));
+    }
+    /**
+     * Which connected list (if any) the pointer is currently over. Pointer path
+     * only — reads the rects snapshotted at lift, not live layout.
+     */
+    listUnderPoint(x, y) {
+        for (const list of this.cachedGroup) {
+            const r = this.listRects.get(list) ?? list.element.getBoundingClientRect();
+            if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom)
+                return list;
+        }
+        return null;
+    }
+    /**
+     * Insertion index for the pointer position within `list`. Pointer path only
+     * — reads the cached item rects (live measurement is the fallback for a
+     * list that somehow joined the group mid-drag).
+     */
+    indexInList(list, x, y) {
+        const rects = this.itemRects.get(list) ??
+            list.itemElementsExcept(this).map((el) => el.getBoundingClientRect());
+        const horizontal = list.mkDropListOrientation() === 'horizontal';
+        const pos = horizontal ? x : y;
+        for (let i = 0; i < rects.length; i++) {
+            const r = rects[i];
+            const mid = horizontal ? r.left + r.width / 2 : r.top + r.height / 2;
+            if (pos < mid)
+                return i;
+        }
+        return rects.length;
+    }
+    syncPlaceholder() {
+        const list = this.targetList;
+        const ph = this.placeholder;
+        if (!list || !ph)
+            return;
+        // Idempotent: same list and index → the placeholder is already in place.
+        if (list === this.lastSyncList && this.targetIndex === this.lastSyncIndex) {
+            return;
+        }
+        const prevList = this.lastSyncList;
+        this.lastSyncList = list;
+        this.lastSyncIndex = this.targetIndex;
+        const items = list.itemElementsExcept(this);
+        ph.remove();
+        if (this.targetIndex >= items.length) {
+            if (items.length)
+                items[items.length - 1].after(ph);
+            else
+                list.element.appendChild(ph);
+        }
+        else {
+            items[this.targetIndex].before(ph);
+        }
+        // Moving the placeholder shifted the affected lists' layout — re-measure
+        // just those lists on the next frame (no-op for the cache-less keyboard path).
+        this.dirtyLists.add(list);
+        if (prevList && prevList !== list)
+            this.dirtyLists.add(prevList);
+    }
+    createPlaceholder(rect) {
+        const ph = this.doc.createElement('div');
+        ph.className = 'mk-drop-placeholder';
+        ph.setAttribute('aria-hidden', 'true');
+        const s = ph.style;
+        s.boxSizing = 'border-box';
+        s.width = `${rect.width}px`;
+        s.height = `${rect.height}px`;
+        s.border = 'var(--mk-border-width-strong) dashed var(--mk-primary)';
+        s.borderRadius = 'var(--mk-radius-md)';
+        s.background = 'color-mix(in srgb, var(--mk-primary) 8%, transparent)';
+        this.placeholder = ph;
+    }
+    createPreview(rect) {
+        const clone = this.element.cloneNode(true);
+        clone.classList.add('mk-drag-preview');
+        clone.removeAttribute('tabindex');
+        clone.setAttribute('aria-hidden', 'true');
+        const s = clone.style;
+        s.display = '';
+        s.position = 'fixed';
+        s.margin = '0';
+        s.left = `${rect.left}px`;
+        s.top = `${rect.top}px`;
+        s.width = `${rect.width}px`;
+        s.height = `${rect.height}px`;
+        s.pointerEvents = 'none';
+        s.zIndex = 'var(--mk-z-tooltip)';
+        s.boxShadow = 'var(--mk-shadow-lg)';
+        s.borderRadius = 'var(--mk-radius-md)';
+        s.transform = 'translate3d(0, 0, 0)';
+        this.doc.body.appendChild(clone);
+        this.preview = clone;
+    }
+    /** Remove the body-level preview + placeholder if destroyed mid-drag. */
+    ngOnDestroy() {
+        this.destroyed = true;
+        if (this.pointerId !== null) {
+            try {
+                this.element.releasePointerCapture(this.pointerId);
+            }
+            catch {
+                /* capture may already be gone */
+            }
+            this.pointerId = null;
+        }
+        this.clearTouchState();
+        this.cleanupDom();
+    }
+    destroyed = false;
+    cleanupDom() {
+        this.flushMoveFrame(false); // drop any scheduled frame, never apply it
+        this.doc.removeEventListener('scroll', this.scrollHandler, { capture: true });
+        this.placeholder?.remove();
+        this.placeholder = null;
+        this.preview?.remove();
+        this.preview = null;
+        this.element.style.display = '';
+        this.home?.setReceiving(false);
+        this.targetList?.setReceiving(false);
+        this.cachedGroup = [];
+        this.listRects.clear();
+        this.itemRects.clear();
+        this.dirtyLists.clear();
+        this.scrollDirty = false;
+        this.lastSyncList = null;
+        this.lastSyncIndex = -1;
+    }
+    emit(previousContainer, container, previousIndex, currentIndex, isPointerEvent) {
+        const event = {
+            previousIndex,
+            currentIndex,
+            item: this,
+            previousContainer,
+            container,
+            isPointerEvent,
+        };
+        container.emitDrop(event);
+    }
+    isHandleTarget(target) {
+        if (!(target instanceof Node))
+            return false;
+        return this.ownHandles().some((h) => h.element.contains(target));
+    }
+    prefersReducedMotion() {
+        return (this.doc.defaultView?.matchMedia('(prefers-reduced-motion: reduce)')
+            .matches ?? false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDrag, isStandalone: true, selector: "[mkDrag]", inputs: { mkDragData: { classPropertyName: "mkDragData", publicName: "mkDragData", isSignal: true, isRequired: false, transformFunction: null }, mkDragDisabled: { classPropertyName: "mkDragDisabled", publicName: "mkDragDisabled", isSignal: true, isRequired: false, transformFunction: null }, mkDragTouchDelay: { classPropertyName: "mkDragTouchDelay", publicName: "mkDragTouchDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button", "aria-roledescription": "Draggable item", "draggable": "false" }, listeners: { "pointerdown": "onPointerDown($event)", "keydown": "onKeyDown($event)", "blur": "onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : 0", "attr.aria-disabled": "disabled() || null", "attr.aria-pressed": "lifted() || null", "attr.aria-grabbed": "dragging() || lifted()", "class.mk-drag--disabled": "disabled()", "class.mk-drag--dragging": "dragging()", "class.mk-drag--lifted": "lifted()", "class.mk-drag--armed": "armed()", "class.mk-drag--has-handle": "ownHandles().length > 0", "class.mk-drag--horizontal": "inHorizontalList()" }, classAttribute: "mk-drag" }, queries: [{ propertyName: "handles", predicate: MkDragHandle, descendants: true, isSignal: true }], exportAs: ["mkDrag"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}:host(.mk-drag--horizontal){touch-action:manipulation}:host(.mk-drag--has-handle){cursor:default;touch-action:auto}:host(.mk-drag--dragging){cursor:grabbing}:host(.mk-drag--armed){cursor:grabbing;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md)}:host(.mk-drag--lifted){outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md);background-color:var(--mk-surface-2);box-shadow:var(--mk-shadow-lg);z-index:var(--mk-z-sticky)}:host(.mk-drag--disabled){cursor:not-allowed;opacity:.55;touch-action:auto}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDrag, decorators: [{
+            type: Component,
+            args: [{ selector: '[mkDrag]', exportAs: 'mkDrag', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-drag',
+                        role: 'button',
+                        'aria-roledescription': 'Draggable item',
+                        draggable: 'false',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                        '[attr.aria-pressed]': 'lifted() || null',
+                        '[attr.aria-grabbed]': 'dragging() || lifted()',
+                        '[class.mk-drag--disabled]': 'disabled()',
+                        '[class.mk-drag--dragging]': 'dragging()',
+                        '[class.mk-drag--lifted]': 'lifted()',
+                        '[class.mk-drag--armed]': 'armed()',
+                        '[class.mk-drag--has-handle]': 'ownHandles().length > 0',
+                        '[class.mk-drag--horizontal]': 'inHorizontalList()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(blur)': 'onBlur()',
+                    }, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}:host(.mk-drag--horizontal){touch-action:manipulation}:host(.mk-drag--has-handle){cursor:default;touch-action:auto}:host(.mk-drag--dragging){cursor:grabbing}:host(.mk-drag--armed){cursor:grabbing;border-radius:var(--mk-radius-md);box-shadow:var(--mk-shadow-md)}:host(.mk-drag--lifted){outline:var(--mk-border-width-strong) solid var(--mk-primary);outline-offset:var(--mk-focus-ring-offset);border-radius:var(--mk-radius-md);background-color:var(--mk-surface-2);box-shadow:var(--mk-shadow-lg);z-index:var(--mk-z-sticky)}:host(.mk-drag--disabled){cursor:not-allowed;opacity:.55;touch-action:auto}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}\n"] }]
+        }], propDecorators: { mkDragData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragData", required: false }] }], mkDragDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragDisabled", required: false }] }], mkDragTouchDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDragTouchDelay", required: false }] }], handles: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDragHandle), { ...{ descendants: true }, isSignal: true }] }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any -- item-type params use
+   `any` to accept drags of any data type without generic-variance friction. */
+/**
+ * A drop container for reorderable `[mkDrag]` items.
+ *
+ * - **Sort list:** a single `[mkDropList]` over an array — items reorder within it.
+ * - **Buckets / kanban:** several `[mkDropList]`s wired together with
+ *   `mkDropListConnectedTo` so items transfer between them (both by pointer and
+ *   by keyboard at the ends of a list).
+ *
+ * The array bound to `mkDropListData` is **not** mutated for you — handle
+ * `mkDropListDropped` and call {@link mkMoveItemInArray} / {@link mkTransferArrayItem}.
+ *
+ * ```html
+ * <ul mkDropList [mkDropListData]="todo()"
+ *     mkDropListId="todo" [mkDropListConnectedTo]="['done']"
+ *     (mkDropListDropped)="drop($event)">
+ *   @for (t of todo(); track t.id) {
+ *     <li mkDrag [mkDragData]="t">{{ t.title }}</li>
+ *   }
+ * </ul>
+ * ```
+ *
+ * @typeParam T item data type.
+ */
+class MkDropList {
+    registry = inject(MkDragDropRegistry);
+    /** The list's host element (drop target bounds). */
+    element = inject(ElementRef).nativeElement;
+    /** The array backing the list. Bound, never mutated by the directive. */
+    mkDropListData = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropListData" }] : /* istanbul ignore next */ []));
+    /** Stable id used to connect lists. Auto-generated when omitted. */
+    mkDropListId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "mkDropListId" }] : /* istanbul ignore next */ []));
+    /** Ids of other lists items may be transferred into. */
+    mkDropListConnectedTo = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropListConnectedTo" }] : /* istanbul ignore next */ []));
+    /**
+     * Human-readable name used in screen-reader announcements when an item is
+     * moved into this list (e.g. `"In progress"`). Falls back to the list `id`
+     * — which may be auto-generated gibberish — so set it wherever users can
+     * move items across lists by keyboard.
+     */
+    mkDropListLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropListLabel" }] : /* istanbul ignore next */ []));
+    /** Layout axis; controls pointer hit-testing and arrow-key direction. */
+    mkDropListOrientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkDropListOrientation" }] : /* istanbul ignore next */ []));
+    /** Disable dropping into (and dragging out of) this list. */
+    mkDropListDisabled = input(false, { ...(ngDevMode ? { debugName: "mkDropListDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Fires when an item is dropped into this list (pointer or keyboard). */
+    mkDropListDropped = output();
+    /** Resolved id (input or generated). */
+    id = computed(() => this.mkDropListId() ?? this.autoId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    autoId = mkUniqueId('mk-drop-list');
+    /** Announceable name: the label when set, otherwise the resolved id. */
+    label = computed(() => this.mkDropListLabel() || this.id(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Connected-list ids, normalised to a plain array. */
+    connectedTo = computed(() => this.mkDropListConnectedTo() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectedTo" }] : /* istanbul ignore next */ []));
+    /** The `mkDrag` items projected into this list, in DOM order. */
+    drags = contentChildren(MkDrag, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drags" }] : /* istanbul ignore next */ []));
+    /** Highlight while a drag is hovering this list. */
+    _receiving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_receiving" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const id = this.id();
+            this.registry.register(id, this);
+            onCleanup(() => this.registry.unregister(id, this));
+        });
+    }
+    /** Number of drag items currently in the list. */
+    size() {
+        return this.drags().length;
+    }
+    /** Index of `drag` among this list's items, or -1. */
+    indexOf(drag) {
+        return this.drags().indexOf(drag);
+    }
+    /** Host elements of this list's items, excluding `exclude`, in DOM order. */
+    itemElementsExcept(exclude) {
+        return this.drags()
+            .filter((d) => d !== exclude)
+            .map((d) => d.element);
+    }
+    /** Toggle the "receiving" highlight (called by the active drag). */
+    setReceiving(value) {
+        this._receiving.set(value);
+    }
+    /** Emit a drop into this list. Called by the active `MkDrag`. */
+    emitDrop(event) {
+        this.mkDropListDropped.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: MkDropList, isStandalone: true, selector: "[mkDropList]", inputs: { mkDropListData: { classPropertyName: "mkDropListData", publicName: "mkDropListData", isSignal: true, isRequired: false, transformFunction: null }, mkDropListId: { classPropertyName: "mkDropListId", publicName: "mkDropListId", isSignal: true, isRequired: false, transformFunction: null }, mkDropListConnectedTo: { classPropertyName: "mkDropListConnectedTo", publicName: "mkDropListConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, mkDropListLabel: { classPropertyName: "mkDropListLabel", publicName: "mkDropListLabel", isSignal: true, isRequired: false, transformFunction: null }, mkDropListOrientation: { classPropertyName: "mkDropListOrientation", publicName: "mkDropListOrientation", isSignal: true, isRequired: false, transformFunction: null }, mkDropListDisabled: { classPropertyName: "mkDropListDisabled", publicName: "mkDropListDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkDropListDropped: "mkDropListDropped" }, host: { properties: { "attr.aria-orientation": "mkDropListOrientation()", "attr.aria-disabled": "mkDropListDisabled() || null", "class.mk-drop-list--horizontal": "mkDropListOrientation() === 'horizontal'", "class.mk-drop-list--disabled": "mkDropListDisabled()", "class.mk-drop-list--receiving": "_receiving()" }, classAttribute: "mk-drop-list" }, queries: [{ propertyName: "drags", predicate: MkDrag, isSignal: true }], exportAs: ["mkDropList"], ngImport: i0, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-list--receiving){outline:var(--mk-border-width-strong) solid var(--mk-primary-subtle-text);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 6%,transparent)}:host(.mk-drop-list--disabled){cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkDropList, decorators: [{
+            type: Component,
+            args: [{ selector: '[mkDropList]', exportAs: 'mkDropList', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-drop-list',
+                        '[attr.aria-orientation]': 'mkDropListOrientation()',
+                        '[attr.aria-disabled]': 'mkDropListDisabled() || null',
+                        '[class.mk-drop-list--horizontal]': "mkDropListOrientation() === 'horizontal'",
+                        '[class.mk-drop-list--disabled]': 'mkDropListDisabled()',
+                        '[class.mk-drop-list--receiving]': '_receiving()',
+                    }, template: "<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:block;position:relative}:host(.mk-drop-list--receiving){outline:var(--mk-border-width-strong) solid var(--mk-primary-subtle-text);outline-offset:calc(-1 * var(--mk-border-width-strong));border-radius:var(--mk-radius-md);background-color:color-mix(in srgb,var(--mk-primary) 6%,transparent)}:host(.mk-drop-list--disabled){cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mkDropListData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListData", required: false }] }], mkDropListId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListId", required: false }] }], mkDropListConnectedTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListConnectedTo", required: false }] }], mkDropListLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListLabel", required: false }] }], mkDropListOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListOrientation", required: false }] }], mkDropListDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkDropListDisabled", required: false }] }], mkDropListDropped: [{ type: i0.Output, args: ["mkDropListDropped"] }], drags: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MkDrag), { isSignal: true }] }] } });
+
+/**
+ * Thin convenience wrapper over a single `[mkDropList]` for the common
+ * "reorderable list" case. Bind `items` two-way and provide an `<ng-template>`
+ * to render each row; drops are applied to the model for you (via
+ * {@link mkMoveItemInArray}).
+ *
+ * For connected buckets / kanban, use `[mkDropList]` + `[mkDrag]` directly.
+ *
+ * ```html
+ * <mk-sortable-list [(items)]="rows">
+ *   <ng-template let-row let-i="index">
+ *     <span mkDragHandle aria-hidden="true">⠿</span> {{ i + 1 }}. {{ row.name }}
+ *   </ng-template>
+ * </mk-sortable-list>
+ * ```
+ *
+ * @typeParam T item data type.
+ */
+class MkSortableList {
+    /** The ordered items (two-way). Reordered in place on drop. */
+    items = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Layout axis of the list. */
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Disable reordering. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** `@for` tracking function. Defaults to identity (track by item). */
+    trackBy = input((_, item) => item, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    /** Emitted after the model has been reordered. */
+    sorted = output();
+    /** The row template projected as `<ng-template>`. */
+    itemTemplate = contentChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    onDrop(event) {
+        const next = [...this.items()];
+        mkMoveItemInArray(next, event.previousIndex, event.currentIndex);
+        this.items.set(next);
+        this.sorted.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkSortableList, isStandalone: true, selector: "mk-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", sorted: "sorted" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  mkDropList\n  class=\"mk-sortable-list__list\"\n  [mkDropListData]=\"items()\"\n  [mkDropListOrientation]=\"orientation()\"\n  [mkDropListDisabled]=\"disabled()\"\n  (mkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div mkDrag class=\"mk-sortable-list__item\" [mkDragData]=\"item\">\n      <ng-container\n        [ngTemplateOutlet]=\"itemTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n      />\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-sortable-list__list{display:flex;flex-direction:column;gap:var(--mk-space-2)}:host([data-orientation=horizontal]) .mk-sortable-list__list,.mk-sortable-list__list.mk-drop-list--horizontal{flex-direction:row}.mk-sortable-list__item{display:block}\n"], dependencies: [{ kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkSortableList, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MkDropList, MkDrag, NgTemplateOutlet], template: "<div\n  mkDropList\n  class=\"mk-sortable-list__list\"\n  [mkDropListData]=\"items()\"\n  [mkDropListOrientation]=\"orientation()\"\n  [mkDropListDisabled]=\"disabled()\"\n  (mkDropListDropped)=\"onDrop($event)\"\n>\n  @for (item of items(); track trackBy()($index, item)) {\n    <div mkDrag class=\"mk-sortable-list__item\" [mkDragData]=\"item\">\n      <ng-container\n        [ngTemplateOutlet]=\"itemTemplate()\"\n        [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n      />\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.mk-sortable-list__list{display:flex;flex-direction:column;gap:var(--mk-space-2)}:host([data-orientation=horizontal]) .mk-sortable-list__list,.mk-sortable-list__list.mk-drop-list--horizontal{flex-direction:row}.mk-sortable-list__item{display:block}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], sorted: [{ type: i0.Output, args: ["sorted"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkDrag, MkDragDropRegistry, MkDragHandle, MkDropList, MkSortableList, mkMoveItemInArray, mkTransferArrayItem };
+//# sourceMappingURL=mk-kit-ui-dnd.mjs.map