@ixfx/components 0.14.3 → 0.14.5

package/dist/{checked-select-lDgAQQ7v.js → checked-select-CBUidG7n.js}

@@ -3,7 +3,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as handleStyles } from "./handle-DAXs7kbJ.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import "./checkbox.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";

package/dist/checked-select.js

@@ -1,3 +1,3 @@
 import "./checkbox.js";
-import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
+import { t as CheckedSelect } from "./checked-select-CBUidG7n.js";
 export { CheckedSelect };

package/dist/crumbs.js

@@ -2,8 +2,8 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-ZTh4htzr.js";
-import "./menu-item-BDEekBVy.js";
+import "./interaction-E-uMGHkJ.js";
+import "./menu-item-BUv8An2k.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import "./narrowed-text.js";

package/dist/{data-grid-FHr7wZ_k.js → data-grid-Dx3l3dxw.js}

@@ -5,13 +5,12 @@ import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js"
 import "./icon-1gpwtPx8.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-JIhwB49y.js";
 import { t as handleStyles } from "./handle-DAXs7kbJ.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
-import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
-import "./interaction-ZTh4htzr.js";
+import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
+import "./interaction-E-uMGHkJ.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-CwcXXeLM.js";
+import "./menu-CU9KAm8s.js";
 import "./pan-text-CqtvjPyK.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";

package/dist/data-grid.js

@@ -1,2 +1,2 @@
-import { t as DataGridElement } from "./data-grid-FHr7wZ_k.js";
+import { t as DataGridElement } from "./data-grid-Dx3l3dxw.js";
 export { DataGridElement };

package/dist/{detail-list-BfYHNh6B.js → detail-list-q8bs67BM.js}

@@ -5,9 +5,8 @@ import "./icon-1gpwtPx8.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
 import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-JIhwB49y.js";
 import { a as toGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
-import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./list-group-header.js";

package/dist/detail-list.js

@@ -1,3 +1,3 @@
-import { t as DetailListElement } from "./detail-list-BfYHNh6B.js";
+import { t as DetailListElement } from "./detail-list-q8bs67BM.js";
 import "./list-group-header.js";
 export { DetailListElement };

package/dist/{grid-list-CkU8gHCh.js → grid-list-y6dWJYu3.js}

@@ -4,10 +4,9 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-JIhwB49y.js";
 import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
-import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./pan-text-CqtvjPyK.js";

package/dist/grid-list.js

@@ -1,3 +1,3 @@
 import "./list-group-header.js";
-import { t as GridListElement } from "./grid-list-CkU8gHCh.js";
+import { t as GridListElement } from "./grid-list-y6dWJYu3.js";
 export { GridListElement };

package/dist/index.d.ts

@@ -105,7 +105,8 @@ declare class KeyedElementIndex {
 /** Caption for a drag entry — explicit element labels win, then data values, then generic element text, then the key. */
 declare function captionForEntry(entry: ListDragEntry<unknown>): string;
 /**
- * Uniform built-in HTML+canvas drag preview for all four list components.
+ * Built-in drag preview shared by the list components. `tree-list` gets a
+ * compact row pill (icon + label + count badge); the others get the layouts below.
  *
  * - ≤5 selected → a row of small cards (thumbnail well + caption).
  * - >5 selected → a compact list (`N items` header, up to 5 rows, `+N more`).
@@ -2571,6 +2572,23 @@ interface PillRendererOptions {
   queueDisplay?: PillQueueDisplay;
   /** Extra margin (px) added to the default spacing on each side, letting pills avoid eg. a fixed header/footer/notch. */
   safeArea?: PillSafeArea;
+  /**
+   * Render the toasts in the browser's top layer (via the Popover API), so they
+   * appear above modal `<dialog>` backdrops and other popovers regardless of any
+   * `z-index`. Each time a new toast arrives the container is re-promoted, so a
+   * dialog opened after earlier toasts doesn't keep covering later ones.
+   * Browsers without the Popover API silently fall back to normal stacking.
+   *
+   * Caveat: a modal dialog makes the rest of the page inert, including toasts, so
+   * they show above it but can't be clicked until it closes (timed dismissal is
+   * unaffected). Default `true`. Set `false` to manage stacking yourself with `zIndex`.
+   */
+  topLayer?: boolean;
+  /**
+   * `z-index` for the toast layer when `topLayer` is `false`. Ignored otherwise.
+   * Leave unset to take no part in z-ordering.
+   */
+  zIndex?: number;
 }
 declare function createPillRenderer(options?: PillRendererOptions): NotificationRenderer;
 //#endregion

package/dist/index.js

@@ -17,26 +17,25 @@ import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-B7mgqtxR.js";
 import { a as toGroupKey, i as resolveGroupKey, n as defaultGroupLabel, o as toggleInSet, r as partitionByGroup, t as EMPTY_GROUP_LABEL } from "./grouping-RYPnHkrS.js";
-import { n as captionForEntry, r as createDefaultListDragPreview, t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { a as listItemFadeKeyframes, c as captionForEntry, i as animateListItemOut, l as createDefaultListDragPreview, n as LIST_ITEM_MOTION_MS, o as prefersReducedMotion, r as animateListItemIn, s as startListItemOutAnimation, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
-import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, o as startListItemOutAnimation, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-BUoEKi5s.js";
-import "./interaction-ZTh4htzr.js";
-import "./menu-item-BDEekBVy.js";
+import "./interaction-E-uMGHkJ.js";
+import "./menu-item-BUv8An2k.js";
 import { Checkbox } from "./checkbox.js";
-import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
+import { t as CheckedSelect } from "./checked-select-CBUidG7n.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BCMU7W7R.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-BFoN2Z_P.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-2_TRrLAV.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as DataGridElement } from "./data-grid-FHr7wZ_k.js";
-import { a as menuFromTreeToElements, t as menu_exports } from "./menu-CwcXXeLM.js";
+import { t as DataGridElement } from "./data-grid-Dx3l3dxw.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-CU9KAm8s.js";
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
-import { t as DetailListElement } from "./detail-list-BfYHNh6B.js";
+import { t as DetailListElement } from "./detail-list-q8bs67BM.js";
 import { ListGroupHeaderElement } from "./list-group-header.js";
 import { a as distribute, c as preserveRestoreWeights, d as toSnapshot, f as walk, i as buildModel, l as resolveTracks, n as SplitPanelElement, o as findPanelNode, r as applySnapshot, s as normalise, t as SplitLayoutElement, u as setPanelRestoreWeight } from "./split-layout-Deoxy47d.js";
 import { TabListElement } from "./tabs.js";
@@ -47,7 +46,7 @@ import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider
 import { VerticalListElement } from "./vertical-list.js";
 import { FlatListElement } from "./flat-list.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-CkU8gHCh.js";
+import { t as GridListElement } from "./grid-list-y6dWJYu3.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { t as IxfxHexEditorElement } from "./hex-editor-DiYpgIKs.js";
@@ -10572,11 +10571,15 @@ function restingTransform(edges, dx, dy) {
 	if (edges.horizontal === `middle`) return `translateX(-50%) translate(${dx}px, ${dy}px)`;
 	return `translate(${dx}px, ${dy}px)`;
 }
+function supportsPopover(el) {
+	return typeof el.showPopover === `function` && typeof el.hidePopover === `function`;
+}
 function createPillRenderer(options = {}) {
 	const position = options.position ?? `top-right`;
 	const queueDisplay = options.queueDisplay ?? `list`;
 	const safeArea = options.safeArea ?? {};
 	const edges = edgesOf(position);
+	const useTopLayer = options.topLayer ?? true;
 	let container = null;
 	let hooks = null;
 	const pills = /* @__PURE__ */ new Map();
@@ -10588,9 +10591,20 @@ function createPillRenderer(options = {}) {
 		container.className = `ixfx-notification-container`;
 		container.setAttribute(`role`, `region`);
 		container.setAttribute(`aria-label`, `Notifications`);
+		container.style.cssText = `pointer-events: none;`;
+		if (useTopLayer && supportsPopover(container)) {
+			container.setAttribute(`popover`, `manual`);
+			container.style.cssText += `position: fixed; inset: 0 auto auto 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; overflow: visible; background: transparent; color: inherit;`;
+		} else if (!useTopLayer && options.zIndex !== void 0) container.style.cssText += `position: fixed; inset: 0 auto auto 0; width: 0; height: 0; z-index: ${options.zIndex};`;
 		document.body.appendChild(container);
 		return container;
 	}
+	/** Put the container on top of the top-layer stack (above anything opened since it was last shown). */
+	function promote(cont) {
+		if (!cont.hasAttribute(`popover`)) return;
+		if (cont.matches(`:popover-open`)) cont.hidePopover();
+		cont.showPopover();
+	}
 	function updateAttributes(el, notification) {
 		el.setAttribute(`notification-type`, notification.type);
 		el.setAttribute(`message`, notification.message);
@@ -10675,6 +10689,7 @@ function createPillRenderer(options = {}) {
 	}
 	function setNotifications(notifications, _queueSize) {
 		const cont = ensureContainer();
+		let added = false;
 		const idsToKeep = new Set(notifications.map((n) => n.id));
 		for (const notification of notifications) {
 			const existing = pills.get(notification.id);
@@ -10689,8 +10704,10 @@ function createPillRenderer(options = {}) {
 				notification
 			});
 			cont.appendChild(el);
+			added = true;
 			measureRowHeight(el);
 		}
+		if (added) promote(cont);
 		for (const [id] of pills) if (!idsToKeep.has(id)) dismiss(id);
 		requestAnimationFrame(() => applyLayout(notifications));
 	}

package/dist/{interaction-ZTh4htzr.js → interaction-E-uMGHkJ.js}

@@ -1,3 +1,3 @@
 import "./tickled-controller-D-HZymaZ.js";
 import "./tickled-styles-BrAHEj1q.js";
-import "./list-item-animation-BUoEKi5s.js";
+import "./list-native-drag-controller-CcXoS0YX.js";

package/dist/{list-native-drag-controller-B9xO0XWn.js → list-native-drag-controller-CcXoS0YX.js}

@@ -1,3 +1,84 @@
+import { n as getIconEntry, r as getIconFont } from "./registry-BEtb8_wB.js";
+import { css } from "lit";
+//#region src/interaction/list-drag-preview-row.ts
+const ROW_MIN = 24;
+const ROW_MAX = 36;
+const ROW_DEFAULT = 28;
+const MAX_WIDTH = 280;
+function treeItemOf(entry) {
+	const raw = entry.item;
+	if (raw === null || typeof raw !== `object` || raw instanceof Element) return void 0;
+	const inner = raw.item;
+	return inner !== null && typeof inner === `object` ? inner : void 0;
+}
+function rowHeightOf(ctx) {
+	const raw = ctx.metrics.rowHeight;
+	if (raw !== void 0 && Number.isFinite(raw)) return Math.max(ROW_MIN, Math.min(ROW_MAX, Math.round(raw)));
+	return ROW_DEFAULT;
+}
+/** Synchronous icon (the `<ixfx-icon>` element renders asynchronously, too late for a drag-image snapshot). */
+function iconNode(name, color) {
+	const entry = getIconEntry(name);
+	if (!entry) return void 0;
+	const el = document.createElement(`span`);
+	el.setAttribute(`data-icon`, ``);
+	el.setAttribute(`aria-hidden`, `true`);
+	el.style.cssText = `display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.1em;height:1.1em;${color ? `color:${color};` : ``}`;
+	if (entry.kind === `svg`) {
+		el.innerHTML = entry.svg;
+		const svg = el.querySelector(`svg`);
+		if (svg) {
+			svg.style.width = `100%`;
+			svg.style.height = `100%`;
+		}
+	} else {
+		const family = getIconFont();
+		if (family) el.style.fontFamily = family;
+		el.textContent = entry.char;
+	}
+	return el;
+}
+/**
+* Drag preview for row-shaped lists (the tree): a single compact pill with the
+* dragged row's icon and label, plus a count badge when several rows travel
+* together. Sized from the row height so it reads as "the row you picked up".
+*/
+function createRowDragPreview(ctx, fallbackCaption) {
+	const height = rowHeightOf(ctx);
+	const origin = ctx.origin ?? ctx.selected[0];
+	const tree = treeItemOf(origin);
+	const label = typeof tree?.label === `string` && tree.label.length > 0 ? tree.label : fallbackCaption(origin);
+	const iconName = typeof tree?.icon === `string` ? tree.icon : void 0;
+	const iconColor = typeof tree?.iconColor === `string` ? tree.iconColor : void 0;
+	const root = document.createElement(`div`);
+	root.setAttribute(`data-preview`, `row`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:${height}px;max-width:${MAX_WIDTH}px;padding:0 10px 0 8px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:13px;white-space:nowrap;z-index:999999;pointer-events:none;`;
+	const icon = iconName ? iconNode(iconName, iconColor) : void 0;
+	if (icon) root.appendChild(icon);
+	const text = document.createElement(`span`);
+	text.setAttribute(`data-caption`, ``);
+	text.style.cssText = `min-width:0;overflow:hidden;text-overflow:ellipsis;`;
+	text.textContent = label;
+	root.appendChild(text);
+	const count = ctx.selected.length;
+	if (count > 1) {
+		const badge = document.createElement(`span`);
+		badge.setAttribute(`data-count`, ``);
+		badge.style.cssText = "flex-shrink:0;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--accent, #4da3ff);color:var(--accent-text, #fff);font-size:11px;font-weight:600;line-height:18px;text-align:center;";
+		badge.textContent = String(count);
+		root.appendChild(badge);
+	}
+	return {
+		element: root,
+		hotspot: {
+			x: 14,
+			y: Math.round(height / 2)
+		},
+		dispose: () => {}
+	};
+}
+//#endregion
 //#region src/interaction/list-drag-preview-default.ts
 const CARD_DEFAULT = 72;
 const CARD_MIN = 48;
@@ -318,7 +399,8 @@ function paintList(context, scale, palette, captions, images, rh, cssW, cssH) {
 	context.restore();
 }
 /**
-* Uniform built-in HTML+canvas drag preview for all four list components.
+* Built-in drag preview shared by the list components. `tree-list` gets a
+* compact row pill (icon + label + count badge); the others get the layouts below.
 *
 * - ≤5 selected → a row of small cards (thumbnail well + caption).
 * - >5 selected → a compact list (`N items` header, up to 5 rows, `+N more`).
@@ -336,6 +418,7 @@ function paintList(context, scale, palette, captions, images, rh, cssW, cssH) {
 */
 function createDefaultListDragPreview(context) {
 	const ctx = context;
+	if (ctx.source === `tree-list`) return createRowDragPreview(ctx, captionForEntry);
 	const entries = ctx.selected;
 	const captions = entries.map((entry) => captionForEntry(entry));
 	const images = entries.map((entry) => sourceImage(entry, ctx.resolveDragPreviewSource));
@@ -381,6 +464,133 @@ function createDefaultListDragPreview(context) {
 	};
 }
 //#endregion
+//#region src/interaction/list-item-animation.ts
+/**
+* Shared insertion / removal animation for the list & tree components.
+*
+* Two flavours, because the components split into two layout families:
+*
+* - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —
+*   rows sit in normal flow, so a new row can collapse in from zero height and a
+*   leaving row can collapse back to zero, and the rows around it slide to make
+*   or close the gap for free. Use {@link animateListItemIn} /
+*   {@link animateListItemOut} (Web Animations API, exact measured sizes).
+*
+* - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are
+*   absolutely positioned (`transform` / `top`), so collapsing a row's box moves
+*   nothing. Those components instead fade the entering / leaving row with the
+*   {@link listItemFadeKeyframes} keyframes and slide the survivors by
+*   transitioning their position for a short window after the change.
+*
+* Everything here is a no-op under `prefers-reduced-motion: reduce`.
+*/
+/** Default duration (ms) for both flavours; overridable per call / per component. */
+const LIST_ITEM_MOTION_MS = 200;
+function prefersReducedMotion() {
+	return typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+/**
+* Opacity keyframes for the virtualised components. Each one adds its own
+* one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to
+* these, plus a `prefers-reduced-motion` guard on its own selectors.
+*/
+const listItemFadeKeyframes = css`
+  @keyframes ixfx-list-item-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes ixfx-list-item-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+function measure(el, axis) {
+	const rect = el.getBoundingClientRect();
+	return axis === `inline` ? rect.width : rect.height;
+}
+function resolveDuration(el, explicit) {
+	if (explicit !== void 0) return explicit;
+	const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();
+	if (raw) {
+		const n = Number.parseFloat(raw);
+		if (!Number.isNaN(n)) return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1e3 : n;
+	}
+	return 200;
+}
+function collapsedFrame(axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `0px`,
+		[minProp]: `0px`,
+		opacity: 0,
+		overflow: `hidden`
+	};
+}
+function fullFrame(size, axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `${size}px`,
+		[minProp]: `0px`,
+		opacity: 1,
+		overflow: `hidden`
+	};
+}
+/**
+* Collapse + fade `el` in from nothing to its natural size. Call it just after
+* the element has been inserted (it must already be laid out at full size so it
+* can be measured). No-op under reduced motion.
+*/
+function animateListItemIn(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return void 0;
+	return el.animate([collapsedFrame(axis), fullFrame(size, axis)], {
+		duration,
+		easing
+	});
+}
+function outResult(finished, animation) {
+	return Object.assign(finished, { animation });
+}
+/**
+* Start the collapse + fade-out animation for `el` and return the handle.
+* Returns `undefined` when no animation was started (reduced motion or zero
+* size). The caller owns the handle and must `cancel()` it if the removal is
+* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
+* element's ordinary CSS indefinitely.
+*/
+function startListItemOutAnimation(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return void 0;
+	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
+		duration,
+		easing,
+		fill: `forwards`
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*
+* The returned promise carries an `.animation` handle. If the removal is
+* reversed (the same key becomes visible again), cancel that handle so its
+* filled final frame stops overriding the reused element's style.
+*/
+function animateListItemOut(el, options = {}) {
+	const animation = startListItemOutAnimation(el, options);
+	if (!animation) return outResult(Promise.resolve(), void 0);
+	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
+}
+//#endregion
 //#region src/interaction/list-native-drag-controller.ts
 /**
 * Shared native item/row drag-out for list components.
@@ -609,4 +819,4 @@ var ListNativeDragController = class {
 	};
 };
 //#endregion
-export { captionForEntry as n, createDefaultListDragPreview as r, ListNativeDragController as t };
+export { listItemFadeKeyframes as a, captionForEntry as c, animateListItemOut as i, createDefaultListDragPreview as l, LIST_ITEM_MOTION_MS as n, prefersReducedMotion as o, animateListItemIn as r, startListItemOutAnimation as s, ListNativeDragController as t };

package/dist/{menu-CwcXXeLM.js → menu-CU9KAm8s.js}

@@ -3,8 +3,8 @@ import { t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-1gpwtPx8.js";
-import "./interaction-ZTh4htzr.js";
-import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-BDEekBVy.js";
+import "./interaction-E-uMGHkJ.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-BUv8An2k.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-bar.ts

package/dist/{menu-item-BDEekBVy.js → menu-item-BUv8An2k.js}

@@ -4,7 +4,7 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-1gpwtPx8.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import { LitElement, css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-container.ts

package/dist/menu.js

@@ -1,3 +1,3 @@
-import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-BDEekBVy.js";
-import { a as menuFromTreeToElements, c as MenuSubTrigger, d as MenuBar, i as menuFromTree, l as MenuCommandController, n as MenuRadioGroup, o as MenuHeader, r as MenuRadioItem, s as MenuSeparator, u as MenuCheckItem } from "./menu-CwcXXeLM.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-BUv8An2k.js";
+import { a as menuFromTreeToElements, c as MenuSubTrigger, d as MenuBar, i as menuFromTree, l as MenuCommandController, n as MenuRadioGroup, o as MenuHeader, r as MenuRadioItem, s as MenuSeparator, u as MenuCheckItem } from "./menu-CU9KAm8s.js";
 export { MenuBar, MenuCheckItem, MenuCommandController, MenuContainer, MenuHeader, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubTrigger, MenuTrigger, menuFromTree, menuFromTreeToElements };

package/dist/miller.js

@@ -3,7 +3,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import { LitElement, css, html, nothing } from "lit";

package/dist/narrowed-text.js

@@ -4,7 +4,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { p as createIncrSearch } from "./incr-search-JIhwB49y.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";

package/dist/select-horiz.js

@@ -2,7 +2,7 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-ZTh4htzr.js";
+import "./interaction-E-uMGHkJ.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
 import { LitElement, css, html } from "lit";