@rozie-ui/sortable-list-lit 0.1.5

package/dist/index.mjs

@@ -0,0 +1,744 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { SignalWatcher, signal } from "@lit-labs/preact-signals";
+import { __rozieReconcileAfterDomMutation, createLitControllableProperty, rozieAttr, rozieClass, rozieListeners, rozieSpread, rozieStyle } from "@rozie/runtime-lit";
+import { repeat } from "lit/directives/repeat.js";
+import { keyed } from "lit/directives/keyed.js";
+import SortableJS from "sortablejs";
+//#region src/internal/useSortableJS.ts
+/**
+* useSortableJS — framework-agnostic SortableJS-vs-reconciler bridge.
+*
+* Why this exists
+* ---------------
+* Wrapping SortableJS for cross-framework consumption (Rozie's
+* `examples/SortableList.rozie`) has four recurring fragilities every wrapper
+* library independently re-discovers:
+*
+* 1. **Three-handler ambiguity.** SortableJS fires distinct `onUpdate`,
+*    `onAdd`, and `onRemove` events for the same logical drag in cross-list
+*    moves. Inline handlers in user code can ONLY disambiguate by reading
+*    `e.from === listEl` / `e.to === listEl`, which is the same disambiguation
+*    `onEnd` can perform in a SINGLE handler. Collapsing to one onEnd path
+*    removes the per-handler boilerplate.
+*
+* 2. **Fragile event shapes.** When SortableJS falls back to the mouse-event
+*    drag path (Playwright's mouse.move/down/up sequence; some touch devices;
+*    HTML5 DnD aborts), `e.item` may not be a valid Node by the time the
+*    handler runs (the source-side `onRemove` fires AFTER the destination
+*    has already detached the element). Inline
+*    `listEl.insertBefore(e.item, …)` throws inside SortableJS's
+*    `_dispatchEvent`. SortableJS catches and swallows the throw silently —
+*    the model writeback never runs, leaving the framework's view stale.
+*    THIS is the root cause of the duplicate-on-drop bug surfaced by the
+*    `sortable-nested-solid-deeper` VR spec.
+*
+* 3. **`e.oldIndex` is occasionally null.** Fallback-mode events lose the
+*    index. Identity-based item lookup (`items().indexOf(stashedItem)`) is
+*    strictly more reliable.
+*
+* 4. **Lit lit-html `repeat`-cache desync.** Every reconciler EXCEPT Lit
+*    handles the SortableJS DOM-restore + model writeback dance cleanly.
+*    Lit needs `$reconcileAfterDomMutation()` (a Rozie sigil that lowers to
+*    `__rozieReconcileAfterDomMutation(this)` on Lit + `void 0` elsewhere).
+*    The helper invokes the `afterCommit` callback after each `onCommit`;
+*    users wire `afterCommit: () => $reconcileAfterDomMutation()` to honour
+*    the Lit requirement without leaking lit-html internals into user code.
+*
+* Cross-target API contract
+* -------------------------
+* The helper is vanilla JS. It has NO framework imports. The same exported
+* symbol resolves identically across React, Vue, Svelte, Angular, Solid and
+* Lit consumer builds via the colocated relative `./internal/useSortableJS`
+* copy vendored into each leaf package by scripts/codegen.mjs.
+*
+* Caller contract:
+*   - `items: () => T[]` is called fresh on every event. Wire it to the
+*     current snapshot (`$props.items` etc.).
+*   - `onCommit(next)` is called once per successful drag commit with the
+*     new items array. The caller writes it to whatever reactive surface
+*     drives re-renders.
+*   - `afterCommit?()` is called immediately after each `onCommit`. Used on
+*     Lit to invoke `$reconcileAfterDomMutation()`.
+*
+* Returns `{ destroy, instance }`. The caller wires
+*   - teardown via `return handle.destroy` from `$onMount`
+*   - runtime option updates via `instance.option('disabled', v)` from
+*     `$watch(() => $props.disabled, ...)`.
+*
+* @public
+*/
+/** Symbol stashed on `e.item` between `onStart` and `onEnd` to ferry the
+* dragged item DATA (not just the DOM node) across cross-list moves and
+* survive `e.oldIndex` going null in fallback-mode events. The double
+* underscore prefix signals "Rozie-internal, do not collide with user
+* data". */
+const ROZIE_ITEM_STASH_KEY = "__rozieItem";
+/** Read the stashed item, falling back to a `null`/`undefined` when the
+* element doesn't have the property. Centralised so the cast lives in
+* exactly one place. */
+function readStash(item) {
+	if (item === null || typeof item !== "object") return void 0;
+	return item[ROZIE_ITEM_STASH_KEY];
+}
+/** Try-catch wrapper for DOM operations that may throw on fragile event
+* paths. Returning `false` lets the caller proceed to the model writeback
+* — the framework's re-render off the new model brings the DOM back into
+* sync (may flicker briefly, but vastly better than today's silent drop). */
+function safeDom(op) {
+	try {
+		op();
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* Wire a SortableJS instance to a reactive items array. See module doc
+* for the full rationale + cross-target contract.
+*/
+function useSortableJS(listEl, opts) {
+	const baseOptions = { ...opts.options ?? {} };
+	/** Item-scoped child lookup. `listEl.children` now also includes the
+	* non-draggable `#header` / `#footer` slot holes (direct children of the
+	* list container), so the DOM-restore sites must index ONLY the item rows —
+	* `:scope > .rozie-sortable-item` — to keep the restore index item-relative
+	* and correct (no off-by-one from header/footer). */
+	const itemChildAt = (i) => listEl.querySelectorAll(":scope > .rozie-sortable-item")[i] ?? null;
+	delete baseOptions.onStart;
+	delete baseOptions.onEnd;
+	delete baseOptions.onUpdate;
+	delete baseOptions.onAdd;
+	delete baseOptions.onRemove;
+	delete baseOptions.onClone;
+	/** Stash dragged item DATA on `e.item` so cross-list moves can recover
+	* it on the destination side. */
+	const handleStart = (e) => {
+		const current = opts.items();
+		const fromIdx = typeof e.oldDraggableIndex === "number" ? e.oldDraggableIndex : typeof e.oldIndex === "number" ? e.oldIndex : -1;
+		if (fromIdx >= 0 && fromIdx < current.length) {
+			const item = e.item;
+			if (item !== null && typeof item === "object") item[ROZIE_ITEM_STASH_KEY] = current[fromIdx];
+		}
+		opts.onStart?.(e);
+	};
+	/** The single point of truth for committed drags. Disambiguates via
+	* `e.from` and `e.to`.
+	*
+	* SortableJS's event lifecycle is asymmetric across lists: `onEnd` fires
+	* ONLY on the source list (the one that owned `e.item` at drag start).
+	* The destination list of a cross-list move receives an `onAdd` event,
+	* NOT an `onEnd`. We register this handler against BOTH:
+	*   - source-list `onEnd` — handles same-list reorder + cross-list source
+	*   - destination-list `onAdd` — handles cross-list destination
+	*
+	* The single function services both event names because the
+	* `from === listEl` / `to === listEl` disambiguation is sufficient to
+	* determine our role; SortableJS's event name doesn't carry additional
+	* information we need. Registering both is the load-bearing fix — the
+	* inline-handlers design DID register onAdd; collapsing to onEnd-only
+	* would lose the destination-side commit entirely. */
+	const handleCommit = (e) => {
+		try {
+			const fromUs = e.from === listEl;
+			const toUs = e.to === listEl;
+			const sameList = fromUs && toUs;
+			if (!fromUs && !toUs) return;
+			const current = opts.items();
+			const kind = sameList ? "reorder" : fromUs ? "remove" : "add";
+			const stashedItem = readStash(e.item);
+			const oldIndexHint = typeof e.oldDraggableIndex === "number" ? e.oldDraggableIndex : typeof e.oldIndex === "number" ? e.oldIndex : -1;
+			const newIndexHint = typeof e.newDraggableIndex === "number" ? e.newDraggableIndex : typeof e.newIndex === "number" ? e.newIndex : -1;
+			let next;
+			let oldIndex;
+			let newIndex;
+			let moved;
+			if (sameList) {
+				const movedFromIdx = stashedItem !== void 0 && current.indexOf(stashedItem) !== -1 ? current.indexOf(stashedItem) : oldIndexHint;
+				if (movedFromIdx < 0 || movedFromIdx >= current.length) return;
+				moved = current[movedFromIdx];
+				safeDom(() => {
+					const ref = itemChildAt(movedFromIdx);
+					listEl.insertBefore(e.item, ref);
+				});
+				next = [...current];
+				next.splice(movedFromIdx, 1);
+				const targetIdx = newIndexHint >= 0 && newIndexHint <= next.length ? newIndexHint : next.length;
+				next.splice(targetIdx, 0, moved);
+				oldIndex = movedFromIdx;
+				newIndex = targetIdx;
+			} else if (fromUs) {
+				if (e.pullMode === "clone") return;
+				const movedFromIdx = stashedItem !== void 0 && current.indexOf(stashedItem) !== -1 ? current.indexOf(stashedItem) : oldIndexHint;
+				if (movedFromIdx < 0 || movedFromIdx >= current.length) return;
+				moved = current[movedFromIdx];
+				safeDom(() => {
+					const ref = itemChildAt(movedFromIdx);
+					listEl.insertBefore(e.item, ref);
+				});
+				next = [...current];
+				next.splice(movedFromIdx, 1);
+				oldIndex = movedFromIdx;
+				newIndex = -1;
+			} else {
+				moved = stashedItem;
+				if (moved === void 0) {
+					safeDom(() => {
+						e.item?.remove?.();
+					});
+					return;
+				}
+				safeDom(() => {
+					e.item?.remove?.();
+				});
+				next = [...current];
+				const targetIdx = newIndexHint >= 0 && newIndexHint <= next.length ? newIndexHint : next.length;
+				next.splice(targetIdx, 0, moved);
+				oldIndex = -1;
+				newIndex = targetIdx;
+			}
+			queueMicrotask(() => {
+				opts.onCommit(next);
+				opts.afterCommit?.();
+				opts.onChange?.({
+					kind,
+					oldIndex,
+					newIndex,
+					item: moved
+				});
+			});
+		} finally {
+			if (e.from === listEl) {
+				const item = e.item;
+				if (item !== null && typeof item === "object") delete item[ROZIE_ITEM_STASH_KEY];
+				opts.onEnd?.(e);
+			}
+		}
+	};
+	/** Bridge the `__rozieItem` stash from the original DOM node to its
+	* clone when SortableJS is in clone mode (`group.pull === 'clone'`).
+	*
+	* Clone-mode lifecycle:
+	*   1. `onStart` fires on the source — we stash the dragged item DATA
+	*      on `e.item.__rozieItem`.
+	*   2. SortableJS clones the node — `clone` is the new DOM element
+	*      that physically travels to the destination.
+	*   3. `onClone` fires with `{ item, clone }` — THIS HOOK — we copy
+	*      the stash from `item` to `clone` so step 4 can find it.
+	*   4. `onAdd` fires on the destination with `e.item === clone`
+	*      (NOT the original). Destination-side `handleCommit` reads
+	*      `__rozieItem` off the clone via `readStash` → recovers the
+	*      dragged item DATA, splices it into its array.
+	*   5. `onEnd` fires on the source with `e.item === original`.
+	*      `handleCommit` (clone-mode short-circuit) returns early so
+	*      no spurious `remove` change is fired; the `finally` cleans
+	*      up the stash on the original.
+	*
+	* The `clone` DOM property is not in SortableJS's strict d.ts for
+	* `SortableEvent` (it's documented in their JS source but not the
+	* exported types), so we widen the parameter type locally. */
+	const handleClone = (e) => {
+		const original = e.item;
+		const clone = e.clone;
+		if (original !== null && typeof original === "object" && clone !== null && typeof clone === "object" && ROZIE_ITEM_STASH_KEY in original) clone[ROZIE_ITEM_STASH_KEY] = original[ROZIE_ITEM_STASH_KEY];
+	};
+	const instance = new SortableJS(listEl, {
+		draggable: ".rozie-sortable-item",
+		...baseOptions,
+		onStart: handleStart,
+		onEnd: handleCommit,
+		onAdd: handleCommit,
+		onClone: handleClone
+	});
+	return {
+		destroy: () => {
+			instance.destroy();
+		},
+		instance
+	};
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/SortableList.ts
+let SortableList = class SortableList extends SignalWatcher(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._items_attr = [];
+		this._itemsControllable = createLitControllableProperty({
+			host: this,
+			eventName: "items-change",
+			defaultValue: [],
+			initialControlledValue: void 0
+		});
+		this.itemKey = null;
+		this.handle = null;
+		this.group = null;
+		this.animation = 150;
+		this.disabled = false;
+		this.disableKeyboard = false;
+		this.options = {};
+		this.labelFor = null;
+		this.ghostClass = null;
+		this.chosenClass = null;
+		this.dragClass = null;
+		this.filter = null;
+		this.easing = null;
+		this.forceFallback = false;
+		this.swapThreshold = 1;
+		this.cloneable = false;
+		this.listClass = "";
+		this.itemClass = "";
+		this.itemStyle = null;
+		this._liftedIndex = signal(null);
+		this._ariaLiveText = signal("");
+		this.__rozieFirstUpdateDone = false;
+		this._hasSlotHeader = false;
+		this._hasSlotDefault = false;
+		this._hasSlotFooter = false;
+		this._disconnectCleanups = [];
+		this._rozieTornDown = false;
+		this._rozieReconcileSeq = 0;
+		this.instance = null;
+		this.__rowKey = {
+			map: /* @__PURE__ */ new WeakMap(),
+			seq: 0
+		};
+		this.keyFor = (item, index) => {
+			if (typeof this.itemKey === "function") return this.itemKey(item, index);
+			if (typeof this.itemKey === "string" && item !== null && typeof item === "object" && item[this.itemKey] != null) return item[this.itemKey];
+			if (item !== null && typeof item === "object" || typeof item === "function") {
+				if (!this.__rowKey.map.has(item)) this.__rowKey.map.set(item, "__rk" + this.__rowKey.seq++);
+				return this.__rowKey.map.get(item);
+			}
+			return index;
+		};
+		this.itemClassFor = (item, index) => {
+			const v = this.itemClass;
+			return typeof v === "function" ? v(item, index) : v;
+		};
+		this.itemStyleFor = (item, index) => {
+			const s = typeof this.itemStyle === "function" ? this.itemStyle(item, index) : this.itemStyle;
+			return s == null || s === "" ? null : s;
+		};
+		this.getLabel = (idx) => {
+			const item = this.items[idx];
+			if (this.labelFor !== null) return this.labelFor(item, idx);
+			if (item !== null && typeof item === "object" && "label" in item) return item.label;
+			return String(item);
+		};
+		this.keyboardEnabled = () => !this.disabled && !this.disableKeyboard;
+		this.onRowKeyDown = ($event, index) => {
+			if (!this.keyboardEnabled()) return;
+			const key = $event.key;
+			if (key === " " || key === "Spacebar" || key === "Enter") {
+				$event.preventDefault();
+				if (this._liftedIndex.value === null) {
+					this._liftedIndex.value = index;
+					this._ariaLiveText.value = "Lifted " + this.getLabel(index);
+					return;
+				}
+				const dropped = this.getLabel(this._liftedIndex.value);
+				const at = this._liftedIndex.value;
+				this._liftedIndex.value = null;
+				this._ariaLiveText.value = "Dropped " + dropped + " at position " + (at + 1);
+				return;
+			}
+			if (key === "Escape") {
+				if (this._liftedIndex.value === null) return;
+				$event.preventDefault();
+				const cancelled = this.getLabel(this._liftedIndex.value);
+				this._liftedIndex.value = null;
+				this._ariaLiveText.value = "Cancelled lift of " + cancelled;
+				return;
+			}
+			if (key === "ArrowDown" || key === "ArrowUp") {
+				if (this._liftedIndex.value === null) return;
+				$event.preventDefault();
+				const dir = key === "ArrowDown" ? 1 : -1;
+				const from = this._liftedIndex.value;
+				const to = from + dir;
+				if (to < 0 || to >= this.items.length) return;
+				const next = [...this.items];
+				const [moved] = next.splice(from, 1);
+				next.splice(to, 0, moved);
+				this._itemsControllable.write(next);
+				this._liftedIndex.value = to;
+				this._ariaLiveText.value = "Moved " + this.getLabel(to) + " to position " + (to + 1);
+				queueMicrotask(() => (this.renderRoot.querySelectorAll("[role=\"listitem\"]")?.[to])?.focus?.());
+				this.dispatchEvent(new CustomEvent("change", {
+					detail: {
+						oldIndex: from,
+						newIndex: to,
+						item: moved
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+	}
+	static {
+		this.styles = css`
+.rozie-sortable-wrap[data-rozie-s-0af24eae] { display: block; }
+.rozie-sortable-list[data-rozie-s-0af24eae] { display: block; }
+.rozie-sortable-item[data-rozie-s-0af24eae] { display: block; outline: none; }
+.rozie-sortable-item[data-rozie-s-0af24eae]:focus { outline: 2px solid rgba(0, 102, 204, 0.6); outline-offset: -2px; }
+.rozie-sortable-item-lifted[data-rozie-s-0af24eae] {
+  background: rgba(0, 102, 204, 0.08);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.4) inset;
+}
+.rozie-sortable-aria-live[data-rozie-s-0af24eae] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`;
+	}
+	_armListeners() {
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"header\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotHeader = this._slotHeaderElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot:not([name])");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotDefault = this._slotDefaultElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+		{
+			const slotEl = this.shadowRoot?.querySelector("slot[name=\"footer\"]");
+			if (slotEl !== null && slotEl !== void 0) {
+				const update = () => {
+					this._hasSlotFooter = this._slotFooterElements.length > 0;
+				};
+				slotEl.addEventListener("slotchange", update);
+				this._disconnectCleanups.push(() => slotEl.removeEventListener("slotchange", update));
+				update();
+			}
+		}
+	}
+	connectedCallback() {
+		this._hasSlotHeader = Array.from(this.children).some((el) => el.getAttribute("slot") === "header");
+		this._hasSlotDefault = Array.from(this.children).some((el) => !el.hasAttribute("slot") && (el.nodeType !== 3 || (el.textContent?.trim().length ?? 0) > 0));
+		this._hasSlotFooter = Array.from(this.children).some((el) => el.getAttribute("slot") === "footer");
+		super.connectedCallback();
+		if (this.hasUpdated && this._rozieTornDown) {
+			this._rozieTornDown = false;
+			this._armListeners();
+		}
+	}
+	firstUpdated() {
+		this._armListeners();
+		this._disconnectCleanups.push((() => this.instance?.destroy()));
+		const sortable = useSortableJS(this._refListEl, {
+			items: () => this.items,
+			onCommit: (next) => {
+				this._itemsControllable.write(next);
+			},
+			options: {
+				animation: this.animation,
+				disabled: this.disabled,
+				group: this.cloneable && typeof this.group === "string" ? {
+					name: this.group,
+					pull: "clone",
+					put: true
+				} : this.group,
+				handle: this.handle,
+				ghostClass: this.ghostClass,
+				chosenClass: this.chosenClass,
+				dragClass: this.dragClass,
+				filter: this.filter,
+				forceFallback: this.forceFallback,
+				swapThreshold: this.swapThreshold,
+				easing: this.easing,
+				...this.options
+			},
+			afterCommit: () => __rozieReconcileAfterDomMutation(this),
+			onChange: ({ kind, oldIndex, newIndex, item }) => {
+				if (kind === "reorder") this.dispatchEvent(new CustomEvent("change", {
+					detail: {
+						oldIndex,
+						newIndex,
+						item
+					},
+					bubbles: true,
+					composed: true
+				}));
+				else if (kind === "add") this.dispatchEvent(new CustomEvent("add", {
+					detail: {
+						newIndex,
+						item
+					},
+					bubbles: true,
+					composed: true
+				}));
+				else if (kind === "remove") this.dispatchEvent(new CustomEvent("remove", {
+					detail: {
+						oldIndex,
+						item
+					},
+					bubbles: true,
+					composed: true
+				}));
+			},
+			onStart: (e) => this.dispatchEvent(new CustomEvent("start", {
+				detail: e,
+				bubbles: true,
+				composed: true
+			})),
+			onEnd: (e) => this.dispatchEvent(new CustomEvent("end", {
+				detail: e,
+				bubbles: true,
+				composed: true
+			}))
+		});
+		this.instance = sortable.instance;
+	}
+	updated(changedProperties) {
+		if (this.__rozieFirstUpdateDone && changedProperties.has("disabled")) ((v) => this.instance?.option("disabled", v))(this.disabled);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("group")) ((v) => this.instance?.option("group", v))(this.group);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("handle")) ((v) => this.instance?.option("handle", v))(this.handle);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("ghostClass")) ((v) => this.instance?.option("ghostClass", v))(this.ghostClass);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("chosenClass")) ((v) => this.instance?.option("chosenClass", v))(this.chosenClass);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("dragClass")) ((v) => this.instance?.option("dragClass", v))(this.dragClass);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("filter")) ((v) => this.instance?.option("filter", v))(this.filter);
+		if (this.__rozieFirstUpdateDone && changedProperties.has("easing")) ((v) => this.instance?.option("easing", v))(this.easing);
+		this.__rozieFirstUpdateDone = true;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		queueMicrotask(() => {
+			if (this.isConnected || this._rozieTornDown) return;
+			this._rozieTornDown = true;
+			for (const fn of this._disconnectCleanups) fn();
+			this._disconnectCleanups = [];
+		});
+	}
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "items") this._itemsControllable.notifyAttributeChange(value);
+	}
+	render() {
+		return html`
+<div class="rozie-sortable-wrap" ${rozieSpread(this.$attrs)} ${rozieListeners(this.$listeners)} data-rozie-ref="__rozieRoot" data-rozie-s-0af24eae>
+  <div class="${rozieClass(["rozie-sortable-list", this.listClass])}" part="list" data-rozie-ref="listEl" data-rozie-s-0af24eae>${keyed(this._rozieReconcileSeq ?? 0, html`
+    <slot name="header"></slot>
+    ${repeat(this.items, (item, index) => this.keyFor(item, index), (item, index) => html`<div class="${rozieClass([
+			"rozie-sortable-item",
+			this.itemClassFor(item, index),
+			{ "rozie-sortable-item-lifted": this._liftedIndex.value === index }
+		])}" key=${rozieAttr(this.keyFor(item, index))} style=${rozieStyle(this.itemStyleFor(item, index))} data-id=${rozieAttr(this.keyFor(item, index))} role="listitem" tabindex=${rozieAttr(this.keyboardEnabled() ? 0 : null)} @keydown=${($event) => {
+			this.onRowKeyDown($event, index);
+		}} data-rozie-s-0af24eae>
+      ${this.__rozieDefaultSlot__ !== void 0 ? this.__rozieDefaultSlot__({
+			item,
+			index
+		}) : html`<slot data-rozie-params=${(() => {
+			try {
+				return JSON.stringify({
+					item,
+					index
+				});
+			} catch {
+				return "{}";
+			}
+		})()}></slot>`}
+    </div>`)}
+    <slot name="footer"></slot>
+  `)}</div>
+  <div class="rozie-sortable-aria-live" data-rozie-sortable-aria-live="" aria-live="polite" aria-atomic="true" data-rozie-s-0af24eae>${this._ariaLiveText.value}</div>
+</div>
+`;
+	}
+	getInstance() {
+		return this.instance;
+	}
+	toArray() {
+		return this.instance ? this.instance.toArray() : [];
+	}
+	sort(order, useAnimation = true) {
+		this.instance?.sort(order, useAnimation);
+	}
+	option(name, value) {
+		if (!this.instance) return void 0;
+		if (value === void 0) return this.instance.option(name);
+		this.instance.option(name, value);
+		return value;
+	}
+	get items() {
+		return this._itemsControllable.read();
+	}
+	set items(v) {
+		this._itemsControllable.notifyPropertyWrite(v);
+	}
+	/**
+	* Plan 14-05 — cross-framework attribute fallthrough source. Reads the
+	* host custom element's attributes on each call so a consumer-side bound
+	* attribute flows through on every render. The `rozieSpread` directive
+	* (D-02) does the cross-render diff downstream.
+	*
+	* Phase 15 follow-up Bug A — declared-prop attribute names are filtered
+	* out so `$attrs` returns "rest after declared props" (semantic parity
+	* with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming
+	* forms are folded into the skip set: kebab-case for model props
+	* (explicit `attribute:`) AND lowercased property name (Lit's default).
+	*/
+	get $attrs() {
+		const __skip = new Set([
+			"items",
+			"item-key",
+			"itemkey",
+			"handle",
+			"group",
+			"animation",
+			"disabled",
+			"disable-keyboard",
+			"disablekeyboard",
+			"options",
+			"label-for",
+			"labelfor",
+			"ghost-class",
+			"ghostclass",
+			"chosen-class",
+			"chosenclass",
+			"drag-class",
+			"dragclass",
+			"filter",
+			"easing",
+			"force-fallback",
+			"forcefallback",
+			"swap-threshold",
+			"swapthreshold",
+			"cloneable",
+			"list-class",
+			"listclass",
+			"item-class",
+			"itemclass",
+			"item-style",
+			"itemstyle"
+		]);
+		const out = {};
+		for (const a of Array.from(this.attributes)) {
+			if (__skip.has(a.name)) continue;
+			out[a.name] = a.value;
+		}
+		return out;
+	}
+	/**
+	* Phase 15 D-19 — consumer-passed listener cluster placeholder.
+	* Lit attaches event listeners directly on the host element via
+	* `addEventListener` (no per-instance prop rest binding), so the
+	* runtime value is undefined; the `rozieListeners` directive's
+	* nullish coercion (`obj ?? {}`) handles the no-op cleanly.
+	* The declaration exists to satisfy `tsc --noEmit` on consumer
+	* projects with strict mode — bare `$listeners` in `render()`
+	* would otherwise raise TS2304 (Cannot find name).
+	*/
+	get $listeners() {}
+};
+__decorate([property({
+	type: Array,
+	attribute: "items"
+})], SortableList.prototype, "_items_attr", void 0);
+__decorate([property({ type: String })], SortableList.prototype, "itemKey", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "handle", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "group", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], SortableList.prototype, "animation", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SortableList.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SortableList.prototype, "disableKeyboard", void 0);
+__decorate([property({ type: Object })], SortableList.prototype, "options", void 0);
+__decorate([property({ type: Function })], SortableList.prototype, "labelFor", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "ghostClass", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "chosenClass", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "dragClass", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "filter", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], SortableList.prototype, "easing", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SortableList.prototype, "forceFallback", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], SortableList.prototype, "swapThreshold", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SortableList.prototype, "cloneable", void 0);
+__decorate([property({ type: String })], SortableList.prototype, "listClass", void 0);
+__decorate([property({ type: String })], SortableList.prototype, "itemClass", void 0);
+__decorate([property({ type: String })], SortableList.prototype, "itemStyle", void 0);
+__decorate([query("[data-rozie-ref=\"listEl\"]")], SortableList.prototype, "_refListEl", void 0);
+__decorate([query("[data-rozie-ref=\"__rozieRoot\"]")], SortableList.prototype, "_ref__rozieRoot", void 0);
+__decorate([state()], SortableList.prototype, "_hasSlotHeader", void 0);
+__decorate([queryAssignedElements({
+	slot: "header",
+	flatten: true
+})], SortableList.prototype, "_slotHeaderElements", void 0);
+__decorate([state()], SortableList.prototype, "_hasSlotDefault", void 0);
+__decorate([queryAssignedElements({ flatten: true })], SortableList.prototype, "_slotDefaultElements", void 0);
+__decorate([property({ attribute: false })], SortableList.prototype, "__rozieDefaultSlot__", void 0);
+__decorate([state()], SortableList.prototype, "_hasSlotFooter", void 0);
+__decorate([queryAssignedElements({
+	slot: "footer",
+	flatten: true
+})], SortableList.prototype, "_slotFooterElements", void 0);
+SortableList = __decorate([customElement("rozie-sortable-list")], SortableList);
+var SortableList_default = SortableList;
+//#endregion
+export { SortableList_default as SortableList, SortableList_default as default };