@ixfx/components 0.7.2 → 0.7.4

package/dist/interaction-Cr13azbM.js

@@ -0,0 +1,3 @@
+import "./tickled-controller-C66DgJHl.js";
+import "./tickled-styles-BrAHEj1q.js";
+import "./list-item-animation-DuiwgN3l.js";

package/dist/list-item-animation-DuiwgN3l.js

@@ -0,0 +1,112 @@
+import { css } from "lit";
+//#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
+	});
+}
+/**
+* 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.
+*/
+function animateListItemOut(el, options = {}) {
+	if (prefersReducedMotion()) return Promise.resolve();
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return Promise.resolve();
+	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
+		duration,
+		easing,
+		fill: `forwards`
+	}).finished.then(() => void 0, () => void 0);
+}
+//#endregion
+export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };
+
+//# sourceMappingURL=list-item-animation-DuiwgN3l.js.map

package/dist/list-item-animation-DuiwgN3l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-animation-DuiwgN3l.js","names":[],"sources":["../src/interaction/list-item-animation.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Shared insertion / removal animation for the list & tree components.\n *\n * Two flavours, because the components split into two layout families:\n *\n * - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —\n *   rows sit in normal flow, so a new row can collapse in from zero height and a\n *   leaving row can collapse back to zero, and the rows around it slide to make\n *   or close the gap for free. Use {@link animateListItemIn} /\n *   {@link animateListItemOut} (Web Animations API, exact measured sizes).\n *\n * - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are\n *   absolutely positioned (`transform` / `top`), so collapsing a row's box moves\n *   nothing. Those components instead fade the entering / leaving row with the\n *   {@link listItemFadeKeyframes} keyframes and slide the survivors by\n *   transitioning their position for a short window after the change.\n *\n * Everything here is a no-op under `prefers-reduced-motion: reduce`.\n */\n\n/** Default duration (ms) for both flavours; overridable per call / per component. */\nexport const LIST_ITEM_MOTION_MS = 200;\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== `undefined`\n    && typeof window.matchMedia === `function`\n    && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches\n  );\n}\n\n/**\n * Opacity keyframes for the virtualised components. Each one adds its own\n * one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to\n * these, plus a `prefers-reduced-motion` guard on its own selectors.\n */\nexport const listItemFadeKeyframes = css`\n  @keyframes ixfx-list-item-in {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @keyframes ixfx-list-item-out {\n    from { opacity: 1; }\n    to { opacity: 0; }\n  }\n`;\n\nexport interface ListItemMotionOptions {\n  /**\n   * Animation duration in ms. When omitted, the element's\n   * `--ixfx-list-item-move-duration` custom property is used if set (accepts\n   * `ms` or `s`), otherwise {@link LIST_ITEM_MOTION_MS}.\n   */\n  duration?: number;\n  /** Which axis collapses — `block` (height, default) or `inline` (width). */\n  axis?: `block` | `inline`;\n  easing?: string;\n}\n\nfunction measure(el: HTMLElement, axis: `block` | `inline`): number {\n  const rect = el.getBoundingClientRect();\n  return axis === `inline` ? rect.width : rect.height;\n}\n\nfunction resolveDuration(el: HTMLElement, explicit?: number): number {\n  if (explicit !== undefined)\n    return explicit;\n  const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();\n  if (raw) {\n    const n = Number.parseFloat(raw);\n    if (!Number.isNaN(n))\n      return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1000 : n;\n  }\n  return LIST_ITEM_MOTION_MS;\n}\n\nfunction collapsedFrame(axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `0px`, [minProp]: `0px`, opacity: 0, overflow: `hidden` };\n}\n\nfunction fullFrame(size: number, axis: `block` | `inline`): Keyframe {\n  const prop = axis === `inline` ? `width` : `height`;\n  const minProp = axis === `inline` ? `minWidth` : `minHeight`;\n  return { [prop]: `${size}px`, [minProp]: `0px`, opacity: 1, overflow: `hidden` };\n}\n\n/**\n * Collapse + fade `el` in from nothing to its natural size. Call it just after\n * the element has been inserted (it must already be laid out at full size so it\n * can be measured). No-op under reduced motion.\n */\nexport function animateListItemIn(el: HTMLElement, options: ListItemMotionOptions = {}): Animation | undefined {\n  if (prefersReducedMotion())\n    return undefined;\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return undefined;\n  return el.animate([collapsedFrame(axis), fullFrame(size, axis)], { duration, easing });\n}\n\n/**\n * Collapse + fade `el` out. Resolves once the animation finishes (or straight\n * away under reduced motion); the caller detaches the element after. The final\n * collapsed state is held (`fill: forwards`) so there's no flash back to full\n * size in the gap before removal.\n */\nexport function animateListItemOut(el: HTMLElement, options: ListItemMotionOptions = {}): Promise<void> {\n  if (prefersReducedMotion())\n    return Promise.resolve();\n  const { axis = `block`, easing = `ease` } = options;\n  const duration = resolveDuration(el, options.duration);\n  const size = measure(el, axis);\n  if (size <= 0)\n    return Promise.resolve();\n  const anim = el.animate([fullFrame(size, axis), collapsedFrame(axis)], {\n    duration,\n    easing,\n    fill: `forwards`,\n  });\n  return anim.finished.then(() => undefined, () => undefined);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,sBAAsB;AAEnC,SAAgB,uBAAgC;CAC9C,OACE,OAAO,WAAW,eACf,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAE7D;;;;;;AAOA,MAAa,wBAAwB,GAAG;;;;;;;;;;AAuBxC,SAAS,QAAQ,IAAiB,MAAkC;CAClE,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO,SAAS,WAAW,KAAK,QAAQ,KAAK;AAC/C;AAEA,SAAS,gBAAgB,IAAiB,UAA2B;CACnE,IAAI,aAAa,KAAA,GACf,OAAO;CACT,MAAM,MAAM,iBAAiB,EAAE,CAAC,CAAC,iBAAiB,gCAAgC,CAAC,CAAC,KAAK;CACzF,IAAI,KAAK;EACP,MAAM,IAAI,OAAO,WAAW,GAAG;EAC/B,IAAI,CAAC,OAAO,MAAM,CAAC,GACjB,OAAO,IAAI,SAAS,IAAI,IAAI,IAAI,IAAI,SAAS,GAAG,IAAI,IAAI,MAAO;CACnE;CACA,OAAA;AACF;AAEA,SAAS,eAAe,MAAoC;CAC1D,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO;GAAQ,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AAC3E;AAEA,SAAS,UAAU,MAAc,MAAoC;CACnE,MAAM,OAAO,SAAS,WAAW,UAAU;CAC3C,MAAM,UAAU,SAAS,WAAW,aAAa;CACjD,OAAO;GAAG,OAAO,GAAG,KAAK;GAAM,UAAU;EAAO,SAAS;EAAG,UAAU;CAAS;AACjF;;;;;;AAOA,SAAgB,kBAAkB,IAAiB,UAAiC,CAAC,GAA0B;CAC7G,IAAI,qBAAqB,GACvB,OAAO,KAAA;CACT,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,KAAA;CACT,OAAO,GAAG,QAAQ,CAAC,eAAe,IAAI,GAAG,UAAU,MAAM,IAAI,CAAC,GAAG;EAAE;EAAU;CAAO,CAAC;AACvF;;;;;;;AAQA,SAAgB,mBAAmB,IAAiB,UAAiC,CAAC,GAAkB;CACtG,IAAI,qBAAqB,GACvB,OAAO,QAAQ,QAAQ;CACzB,MAAM,EAAE,OAAO,SAAS,SAAS,WAAW;CAC5C,MAAM,WAAW,gBAAgB,IAAI,QAAQ,QAAQ;CACrD,MAAM,OAAO,QAAQ,IAAI,IAAI;CAC7B,IAAI,QAAQ,GACV,OAAO,QAAQ,QAAQ;CAMzB,OALa,GAAG,QAAQ,CAAC,UAAU,MAAM,IAAI,GAAG,eAAe,IAAI,CAAC,GAAG;EACrE;EACA;EACA,MAAM;CACR,CACU,CAAC,CAAC,SAAS,WAAW,KAAA,SAAiB,KAAA,CAAS;AAC5D"}

package/dist/list-selection-controller-CUo-Hhcm.js

@@ -0,0 +1,338 @@
+//#region src/interaction/keyed-list.ts
+/**
+* Helpers for key-based selection on the Element-flavoured list components
+* (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-grid-list`).
+*
+* A "key" is a stable string the host puts on each item element — `data-key`
+* (preferred) or `data-value`. It survives the host rebuilding the item set
+* (re-fetch, re-sort, filter) where raw `Element` references do not.
+*/
+/**
+* The stable key for an item element: `data-key`, then `data-value`, else
+* `undefined`.
+*/
+function keyForElement(el) {
+	return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? void 0;
+}
+/**
+* A lazily-built key → element index over a container. Rebuilt on first use
+* and after any child-list mutation under `root`; `invalidate()` forces a
+* rebuild on the next `get()`.
+*
+* ```ts
+* #keyIndex = new KeyedElementIndex(this);
+* // ...
+* const el = this.#keyIndex.get(`row-42`);
+* // on disconnect:
+* this.#keyIndex.dispose();
+* ```
+*/
+var KeyedElementIndex = class {
+	#root;
+	#selector;
+	#map = /* @__PURE__ */ new Map();
+	#dirty = true;
+	#observer;
+	/**
+	* @param root Container whose descendants are indexed.
+	* @param itemSelector Which descendants count as items (default: any `[data-key]`).
+	*/
+	constructor(root, itemSelector = `[data-key]`) {
+		this.#root = root;
+		this.#selector = itemSelector;
+		this.#observer = new MutationObserver(() => {
+			this.#dirty = true;
+		});
+		this.#observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+	}
+	/** The element with this key, or `undefined`. First match wins on duplicates. */
+	get(key) {
+		if (this.#dirty) this.#rebuild();
+		return this.#map.get(key);
+	}
+	/** Force a rebuild on the next `get()` — e.g. after a `data-key` attribute change. */
+	invalidate() {
+		this.#dirty = true;
+	}
+	/** Stop observing and drop the cache. */
+	dispose() {
+		this.#observer.disconnect();
+		this.#map.clear();
+	}
+	#rebuild() {
+		this.#map.clear();
+		for (const el of this.#root.querySelectorAll(this.#selector)) {
+			const key = keyForElement(el);
+			if (key !== void 0 && !this.#map.has(key)) this.#map.set(key, el);
+		}
+		this.#dirty = false;
+	}
+};
+//#endregion
+//#region src/interaction/list-selection-controller.ts
+/** Whether the interaction mode allows building a multi-item selection. */
+function isMultiMode(mode) {
+	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
+}
+/**
+* Generic selection state machine shared by list components.
+*
+* Owns the selected set plus the range-selection anchor, the selection
+* primitives (`replace` / `toggle` / `rangeTo` / `clear` / `selectAll` /
+* `selectMany` / `deselect`) and the per-interactionMode gesture routers
+* (`handleClick` / `handleSpace`).
+*
+* Identity is generic: both `ixfx-vertical-list` and `ixfx-detail-list` use
+* `ListSelectionController<Element>`.
+*
+* @example
+* ```ts
+* const selection = new ListSelectionController<Element>({
+*   getOrderedItems: () => this.getVisibleItems(),
+*   isSelectable: el => !el.hasAttribute(`not-checked`),
+*   getModes: () => ({ selectionMode: this.selectionMode, interactionMode: this.interactionMode }),
+*   onChange: (selected, previous) => {
+*     this.syncItemStates();
+*     this.dispatchEvent(new CustomEvent(`list-select`, { detail: { selected, previous } }));
+*   },
+* });
+* ```
+*/
+var ListSelectionController = class {
+	#config;
+	#selected = /* @__PURE__ */ new Set();
+	#anchor;
+	constructor(config) {
+		this.#config = config;
+	}
+	/** The current selection set (read-only). */
+	get selected() {
+		return this.#selected;
+	}
+	/**
+	* The current selection as stable string keys (read-only). Empty unless a
+	* `getKey` was supplied in config. Items whose `getKey` returns `undefined`
+	* are omitted.
+	*/
+	get selectedKeys() {
+		const getKey = this.#config.getKey;
+		const out = /* @__PURE__ */ new Set();
+		if (getKey) for (const item of this.#selected) {
+			const key = getKey(item);
+			if (key !== void 0) out.add(key);
+		}
+		return out;
+	}
+	/** Anchor for range (shift) selection — the last plainly-selected item. */
+	get anchor() {
+		return this.#anchor;
+	}
+	/** Whether "select all" (Cmd/Ctrl+A) is currently permitted. */
+	canSelectAll() {
+		return this.canSelectMultiple() && this.#config.getModes().selectionMode !== `none`;
+	}
+	/** Whether a multi-item selection can be built in the current modes. */
+	canSelectMultiple() {
+		const { selectionMode, interactionMode } = this.#config.getModes();
+		return selectionMode === `multiple` || isMultiMode(interactionMode);
+	}
+	/** Replace the entire selection with a single item; updates the anchor. */
+	replace(item) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		if (!this.#config.isSelectable(item)) return;
+		this.#anchor = item;
+		this.#apply(/* @__PURE__ */ new Set([item]));
+	}
+	/** Toggle a single item in/out of the selection without replacing it. Anchor unchanged. */
+	toggle(item) {
+		const { selectionMode, interactionMode } = this.#config.getModes();
+		if (!this.#config.isSelectable(item)) return;
+		if (selectionMode === `none` && interactionMode !== `checked` && interactionMode !== `sticky`) return;
+		const next = new Set(this.#selected);
+		if (next.has(item)) next.delete(item);
+		else {
+			if (!this.canSelectMultiple()) next.clear();
+			next.add(item);
+		}
+		this.#apply(next);
+	}
+	/** Select the contiguous ordered range from the anchor to `item`. Anchor unchanged. */
+	rangeTo(item) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		if (this.#anchor === void 0) {
+			this.replace(item);
+			return;
+		}
+		const ordered = this.#config.getOrderedItems();
+		const anchorIdx = ordered.indexOf(this.#anchor);
+		const targetIdx = ordered.indexOf(item);
+		if (anchorIdx === -1 || targetIdx === -1) {
+			this.replace(item);
+			return;
+		}
+		const start = Math.min(anchorIdx, targetIdx);
+		const end = Math.max(anchorIdx, targetIdx);
+		this.#apply(new Set(ordered.slice(start, end + 1).filter((t) => this.#config.isSelectable(t))));
+	}
+	/** Clear the selection. No change event when the selection is already empty. */
+	clear() {
+		if (this.#selected.size === 0) return;
+		this.#apply(/* @__PURE__ */ new Set());
+	}
+	/** Select every ordered item that passes `isSelectable`. */
+	selectAll() {
+		const ordered = this.#config.getOrderedItems();
+		if (ordered.length === 0) return;
+		const next = new Set(ordered.filter((t) => this.#config.isSelectable(t)));
+		if (next.size === 0) return;
+		this.#apply(next);
+	}
+	/**
+	* Replace the selection with many items at once. Requires
+	* `selectionMode="multiple"`, throws otherwise. Updates the anchor.
+	*/
+	selectMany(items) {
+		const { selectionMode } = this.#config.getModes();
+		if (selectionMode !== `multiple`) throw new Error(`selectMany requires selectionMode="multiple" (current: "${selectionMode}")`);
+		const next = new Set([...items].filter((t) => this.#config.isSelectable(t)));
+		if (next.size === 0) return;
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
+	/** Remove a single item from the selection. */
+	deselect(item) {
+		if (!this.#selected.has(item)) return;
+		const next = new Set(this.#selected);
+		next.delete(item);
+		this.#apply(next);
+	}
+	/**
+	* Whether the current modes permit a selection of more than one item.
+	* Stricter than `canSelectMultiple()`: `standard` / `implicit` only count
+	* as multi when `selectionMode="multiple"`.
+	*/
+	#effectiveMulti() {
+		const { selectionMode, interactionMode } = this.#config.getModes();
+		return selectionMode === `multiple` || interactionMode === `checked` || interactionMode === `sticky` || interactionMode === `vscode`;
+	}
+	/**
+	* Replace the selection with the items resolved from `keys`. Keys that
+	* `resolve` cannot map, or that resolve to a non-selectable item, are
+	* ignored. `selectionMode="none"` is a no-op. When multi-select is not
+	* available, only the last resolvable key is kept. `onChange` fires once.
+	*/
+	selectKeys(keys, resolve) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		let next = /* @__PURE__ */ new Set();
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && this.#config.isSelectable(item)) next.add(item);
+		}
+		if (!this.#effectiveMulti() && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
+	/**
+	* Add the items resolved from `keys` to the selection (multi-select only;
+	* a no-op otherwise). `onChange` fires once if anything changed.
+	*/
+	addKeys(keys, resolve) {
+		if (!this.#effectiveMulti()) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && !next.has(item) && this.#config.isSelectable(item)) {
+				next.add(item);
+				changed = true;
+			}
+		}
+		if (changed) this.#apply(next);
+	}
+	/**
+	* Remove the items resolved from `keys` from the selection. `onChange`
+	* fires once if anything changed.
+	*/
+	removeKeys(keys, resolve) {
+		if (this.#selected.size === 0) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && next.delete(item)) changed = true;
+		}
+		if (changed) this.#apply(next);
+	}
+	/** Route a click on `item` according to the current interaction mode. */
+	handleClick(item, gesture) {
+		const { selectionMode, interactionMode: mode } = this.#config.getModes();
+		if (mode === `manual`) return;
+		if (selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
+		switch (mode) {
+			case `implicit`:
+				this.replace(item);
+				break;
+			case `standard`:
+			case `vscode`:
+				if (gesture.ctrlKey || gesture.metaKey) {
+					if (selectionMode === `multiple` || mode === `vscode`) this.toggle(item);
+				} else if (gesture.shiftKey && (selectionMode === `multiple` || mode === `vscode`)) this.rangeTo(item);
+				else this.replace(item);
+				break;
+			case `checked`: break;
+			case `sticky`: this.toggle(item);
+		}
+	}
+	/** Route a Space keypress on `item` according to the current interaction mode. */
+	handleSpace(item) {
+		const mode = this.#config.getModes().interactionMode;
+		if (mode === `manual`) return;
+		if (mode === `implicit`) this.replace(item);
+		else this.toggle(item);
+	}
+	/** Drop the range-selection anchor (e.g. when the interaction mode changes). */
+	clearAnchor() {
+		this.#anchor = void 0;
+	}
+	/**
+	* Re-key the selection across an identity boundary — e.g. when items are
+	* wrapped/unwrapped and the selected Element references change. Silent:
+	* no `onChange` is fired.
+	*/
+	remap(fn) {
+		if (this.#selected.size === 0) return;
+		this.#selected = new Set([...this.#selected].map(fn));
+	}
+	/**
+	* Hard reset: empty the selection and clear the anchor without firing
+	* `onChange` (e.g. when all items are removed).
+	*/
+	reset() {
+		this.#selected = /* @__PURE__ */ new Set();
+		this.#anchor = void 0;
+	}
+	/**
+	* Replace the selection and anchor silently (no `onChange`). Used to
+	* re-key the selection when items are rebuilt from data — e.g. matching
+	* new elements to previously selected keys.
+	*/
+	seed(items, anchor) {
+		this.#selected = new Set(items);
+		this.#anchor = anchor;
+	}
+	#apply(next) {
+		const previous = this.#selected;
+		this.#selected = next;
+		this.#config.onChange(next, previous);
+	}
+};
+//#endregion
+export { keyForElement as i, isMultiMode as n, KeyedElementIndex as r, ListSelectionController as t };
+
+//# sourceMappingURL=list-selection-controller-CUo-Hhcm.js.map

package/dist/list-selection-controller-CUo-Hhcm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-selection-controller-CUo-Hhcm.js","names":["#root","#selector","#map","#observer","#dirty","#rebuild","#config","#selected","#anchor","#apply","#effectiveMulti"],"sources":["../src/interaction/keyed-list.ts","../src/interaction/list-selection-controller.ts"],"sourcesContent":["/**\n * Helpers for key-based selection on the Element-flavoured list components\n * (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-grid-list`).\n *\n * A \"key\" is a stable string the host puts on each item element — `data-key`\n * (preferred) or `data-value`. It survives the host rebuilding the item set\n * (re-fetch, re-sort, filter) where raw `Element` references do not.\n */\n\n/**\n * The stable key for an item element: `data-key`, then `data-value`, else\n * `undefined`.\n */\nexport function keyForElement(el: Element): string | undefined {\n  return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? undefined;\n}\n\n/**\n * A lazily-built key → element index over a container. Rebuilt on first use\n * and after any child-list mutation under `root`; `invalidate()` forces a\n * rebuild on the next `get()`.\n *\n * ```ts\n * #keyIndex = new KeyedElementIndex(this);\n * // ...\n * const el = this.#keyIndex.get(`row-42`);\n * // on disconnect:\n * this.#keyIndex.dispose();\n * ```\n */\nexport class KeyedElementIndex {\n  readonly #root: Element;\n  readonly #selector: string;\n  readonly #map = new Map<string, Element>();\n  #dirty = true;\n  readonly #observer: MutationObserver;\n\n  /**\n   * @param root Container whose descendants are indexed.\n   * @param itemSelector Which descendants count as items (default: any `[data-key]`).\n   */\n  constructor(root: Element, itemSelector = `[data-key]`) {\n    this.#root = root;\n    this.#selector = itemSelector;\n    this.#observer = new MutationObserver(() => {\n      this.#dirty = true;\n    });\n    this.#observer.observe(root, { childList: true, subtree: true });\n  }\n\n  /** The element with this key, or `undefined`. First match wins on duplicates. */\n  get(key: string): Element | undefined {\n    if (this.#dirty) {\n      this.#rebuild();\n    }\n    return this.#map.get(key);\n  }\n\n  /** Force a rebuild on the next `get()` — e.g. after a `data-key` attribute change. */\n  invalidate(): void {\n    this.#dirty = true;\n  }\n\n  /** Stop observing and drop the cache. */\n  dispose(): void {\n    this.#observer.disconnect();\n    this.#map.clear();\n  }\n\n  #rebuild(): void {\n    this.#map.clear();\n    for (const el of this.#root.querySelectorAll(this.#selector)) {\n      const key = keyForElement(el);\n      if (key !== undefined && !this.#map.has(key)) {\n        this.#map.set(key, el);\n      }\n    }\n    this.#dirty = false;\n  }\n}\n","import type { ListInteractionMode, ListSelectionMode } from './list-selection-types.js';\n\n/** Modifier state needed to route a click gesture per interaction mode. */\nexport type ListSelectionGesture = {\n  readonly ctrlKey: boolean;\n  readonly metaKey: boolean;\n  readonly shiftKey: boolean;\n};\n\nexport type ListSelectionModes = {\n  readonly selectionMode: ListSelectionMode;\n  readonly interactionMode: ListInteractionMode;\n};\n\n/**\n * Configuration supplied by the host component.\n *\n * The controller owns selection *state* only — everything DOM- or\n * component-specific is expressed through these callbacks.\n */\nexport type ListSelectionControllerConfig<T> = {\n  /** Visible items in navigation order — used for range selection and select-all. */\n  readonly getOrderedItems: () => readonly T[];\n  /** Whether an item may join the selection (e.g. reject `not-checked` rows). */\n  readonly isSelectable: (item: T) => boolean;\n  /** Current modes; read on every gesture so property changes apply immediately. */\n  readonly getModes: () => ListSelectionModes;\n  /**\n   * Fired after every selection change. The host syncs DOM state\n   * (`data-selected` / `data-checked`), dispatches `list-select`, and\n   * requests an update.\n   */\n  readonly onChange: (selected: ReadonlySet<T>, previous: ReadonlySet<T>) => void;\n  /**\n   * Optional: derive a stable string key for an item. Enables `selectedKeys`\n   * and `selectKeys()`. When omitted, `selectedKeys` is always empty.\n   */\n  readonly getKey?: (item: T) => string | undefined;\n};\n\n/** Whether the interaction mode allows building a multi-item selection. */\nexport function isMultiMode(mode: ListInteractionMode): boolean {\n  return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;\n}\n\n/**\n * Generic selection state machine shared by list components.\n *\n * Owns the selected set plus the range-selection anchor, the selection\n * primitives (`replace` / `toggle` / `rangeTo` / `clear` / `selectAll` /\n * `selectMany` / `deselect`) and the per-interactionMode gesture routers\n * (`handleClick` / `handleSpace`).\n *\n * Identity is generic: both `ixfx-vertical-list` and `ixfx-detail-list` use\n * `ListSelectionController<Element>`.\n *\n * @example\n * ```ts\n * const selection = new ListSelectionController<Element>({\n *   getOrderedItems: () => this.getVisibleItems(),\n *   isSelectable: el => !el.hasAttribute(`not-checked`),\n *   getModes: () => ({ selectionMode: this.selectionMode, interactionMode: this.interactionMode }),\n *   onChange: (selected, previous) => {\n *     this.syncItemStates();\n *     this.dispatchEvent(new CustomEvent(`list-select`, { detail: { selected, previous } }));\n *   },\n * });\n * ```\n */\nexport class ListSelectionController<T> {\n  readonly #config: ListSelectionControllerConfig<T>;\n  #selected: ReadonlySet<T> = new Set();\n  #anchor: T | undefined;\n\n  constructor(config: ListSelectionControllerConfig<T>) {\n    this.#config = config;\n  }\n\n  /** The current selection set (read-only). */\n  get selected(): ReadonlySet<T> {\n    return this.#selected;\n  }\n\n  /**\n   * The current selection as stable string keys (read-only). Empty unless a\n   * `getKey` was supplied in config. Items whose `getKey` returns `undefined`\n   * are omitted.\n   */\n  get selectedKeys(): ReadonlySet<string> {\n    const getKey = this.#config.getKey;\n    const out = new Set<string>();\n    if (getKey) {\n      for (const item of this.#selected) {\n        const key = getKey(item);\n        if (key !== undefined) {\n          out.add(key);\n        }\n      }\n    }\n    return out;\n  }\n\n  /** Anchor for range (shift) selection — the last plainly-selected item. */\n  get anchor(): T | undefined {\n    return this.#anchor;\n  }\n\n  /** Whether \"select all\" (Cmd/Ctrl+A) is currently permitted. */\n  canSelectAll(): boolean {\n    return this.canSelectMultiple() && this.#config.getModes().selectionMode !== `none`;\n  }\n\n  /** Whether a multi-item selection can be built in the current modes. */\n  canSelectMultiple(): boolean {\n    const { selectionMode, interactionMode } = this.#config.getModes();\n    return selectionMode === `multiple` || isMultiMode(interactionMode);\n  }\n\n  // --- Selection primitives ---\n\n  /** Replace the entire selection with a single item; updates the anchor. */\n  replace(item: T): void {\n    if (this.#config.getModes().selectionMode === `none`)\n      return;\n    if (!this.#config.isSelectable(item))\n      return;\n    this.#anchor = item;\n    this.#apply(new Set([item]));\n  }\n\n  /** Toggle a single item in/out of the selection without replacing it. Anchor unchanged. */\n  toggle(item: T): void {\n    const { selectionMode, interactionMode } = this.#config.getModes();\n    if (!this.#config.isSelectable(item))\n      return;\n    // checked/vscode/sticky modes imply multiple selection capacity\n    if (selectionMode === `none` && interactionMode !== `checked` && interactionMode !== `sticky`)\n      return;\n\n    const next = new Set(this.#selected);\n    if (next.has(item)) {\n      next.delete(item);\n    } else {\n      if (!this.canSelectMultiple())\n        next.clear();\n      next.add(item);\n    }\n    this.#apply(next);\n  }\n\n  /** Select the contiguous ordered range from the anchor to `item`. Anchor unchanged. */\n  rangeTo(item: T): void {\n    if (this.#config.getModes().selectionMode === `none`)\n      return;\n    if (this.#anchor === undefined) {\n      this.replace(item);\n      return;\n    }\n    const ordered = this.#config.getOrderedItems();\n    const anchorIdx = ordered.indexOf(this.#anchor);\n    const targetIdx = ordered.indexOf(item);\n    if (anchorIdx === -1 || targetIdx === -1) {\n      this.replace(item);\n      return;\n    }\n    const start = Math.min(anchorIdx, targetIdx);\n    const end = Math.max(anchorIdx, targetIdx);\n    this.#apply(new Set(ordered.slice(start, end + 1).filter(t => this.#config.isSelectable(t))));\n  }\n\n  /** Clear the selection. No change event when the selection is already empty. */\n  clear(): void {\n    if (this.#selected.size === 0)\n      return;\n    this.#apply(new Set());\n  }\n\n  /** Select every ordered item that passes `isSelectable`. */\n  selectAll(): void {\n    const ordered = this.#config.getOrderedItems();\n    if (ordered.length === 0)\n      return;\n    const next = new Set(ordered.filter(t => this.#config.isSelectable(t)));\n    if (next.size === 0)\n      return;\n    this.#apply(next);\n  }\n\n  /**\n   * Replace the selection with many items at once. Requires\n   * `selectionMode=\"multiple\"`, throws otherwise. Updates the anchor.\n   */\n  selectMany(items: Iterable<T>): void {\n    const { selectionMode } = this.#config.getModes();\n    if (selectionMode !== `multiple`) {\n      throw new Error(`selectMany requires selectionMode=\"multiple\" (current: \"${selectionMode}\")`);\n    }\n    const next = new Set([...items].filter(t => this.#config.isSelectable(t)));\n    if (next.size === 0)\n      return;\n    this.#anchor = [...next].at(-1);\n    this.#apply(next);\n  }\n\n  /** Remove a single item from the selection. */\n  deselect(item: T): void {\n    if (!this.#selected.has(item))\n      return;\n    const next = new Set(this.#selected);\n    next.delete(item);\n    this.#apply(next);\n  }\n\n  // --- Key-based selection ---\n\n  /**\n   * Whether the current modes permit a selection of more than one item.\n   * Stricter than `canSelectMultiple()`: `standard` / `implicit` only count\n   * as multi when `selectionMode=\"multiple\"`.\n   */\n  #effectiveMulti(): boolean {\n    const { selectionMode, interactionMode } = this.#config.getModes();\n    return selectionMode === `multiple`\n      || interactionMode === `checked`\n      || interactionMode === `sticky`\n      || interactionMode === `vscode`;\n  }\n\n  /**\n   * Replace the selection with the items resolved from `keys`. Keys that\n   * `resolve` cannot map, or that resolve to a non-selectable item, are\n   * ignored. `selectionMode=\"none\"` is a no-op. When multi-select is not\n   * available, only the last resolvable key is kept. `onChange` fires once.\n   */\n  selectKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void {\n    if (this.#config.getModes().selectionMode === `none`)\n      return;\n    let next = new Set<T>();\n    for (const key of new Set(keys)) {\n      const item = resolve(key);\n      if (item !== undefined && this.#config.isSelectable(item)) {\n        next.add(item);\n      }\n    }\n    if (!this.#effectiveMulti() && next.size > 1) {\n      const last = [...next].at(-1);\n      next = last === undefined ? new Set() : new Set([last]);\n    }\n    this.#anchor = [...next].at(-1);\n    this.#apply(next);\n  }\n\n  /**\n   * Add the items resolved from `keys` to the selection (multi-select only;\n   * a no-op otherwise). `onChange` fires once if anything changed.\n   */\n  addKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void {\n    if (!this.#effectiveMulti())\n      return;\n    const next = new Set(this.#selected);\n    let changed = false;\n    for (const key of new Set(keys)) {\n      const item = resolve(key);\n      if (item !== undefined && !next.has(item) && this.#config.isSelectable(item)) {\n        next.add(item);\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.#apply(next);\n    }\n  }\n\n  /**\n   * Remove the items resolved from `keys` from the selection. `onChange`\n   * fires once if anything changed.\n   */\n  removeKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void {\n    if (this.#selected.size === 0)\n      return;\n    const next = new Set(this.#selected);\n    let changed = false;\n    for (const key of new Set(keys)) {\n      const item = resolve(key);\n      if (item !== undefined && next.delete(item)) {\n        changed = true;\n      }\n    }\n    if (changed) {\n      this.#apply(next);\n    }\n  }\n\n  // --- Gesture routers ---\n\n  /** Route a click on `item` according to the current interaction mode. */\n  handleClick(item: T, gesture: ListSelectionGesture): void {\n    const { selectionMode, interactionMode: mode } = this.#config.getModes();\n    if (mode === `manual`)\n      return;\n    if (selectionMode === `none` && mode !== `checked` && mode !== `sticky`)\n      return;\n\n    switch (mode) {\n      case `implicit`:\n        // Single-select only; modifier keys have no effect\n        this.replace(item);\n        break;\n\n      case `standard`:\n      case `vscode`:\n        if (gesture.ctrlKey || gesture.metaKey) {\n          // Ctrl/Cmd+click: toggle item; requires effective multi-select\n          if (selectionMode === `multiple` || mode === `vscode`) {\n            this.toggle(item);\n          }\n        } else if (gesture.shiftKey && (selectionMode === `multiple` || mode === `vscode`)) {\n          // Shift+click: range-select from anchor\n          this.rangeTo(item);\n        } else {\n          // Plain click: replace selection, update anchor\n          this.replace(item);\n        }\n        break;\n\n      case `checked`:\n        // Body clicks do nothing — only the checkbox column toggles.\n        break;\n\n      case `sticky`:\n        // Every tap/click toggles — multi-select without modifier keys (touchscreens).\n        this.toggle(item);\n        break;\n    }\n  }\n\n  /** Route a Space keypress on `item` according to the current interaction mode. */\n  handleSpace(item: T): void {\n    const mode = this.#config.getModes().interactionMode;\n    if (mode === `manual`)\n      return;\n    if (mode === `implicit`) {\n      // Space selects (same as click) in implicit mode\n      this.replace(item);\n    } else {\n      // standard / vscode / checked / sticky: Space toggles\n      this.toggle(item);\n    }\n  }\n\n  // --- Maintenance ---\n\n  /** Drop the range-selection anchor (e.g. when the interaction mode changes). */\n  clearAnchor(): void {\n    this.#anchor = undefined;\n  }\n\n  /**\n   * Re-key the selection across an identity boundary — e.g. when items are\n   * wrapped/unwrapped and the selected Element references change. Silent:\n   * no `onChange` is fired.\n   */\n  remap(fn: (item: T) => T): void {\n    if (this.#selected.size === 0)\n      return;\n    this.#selected = new Set([...this.#selected].map(fn));\n  }\n\n  /**\n   * Hard reset: empty the selection and clear the anchor without firing\n   * `onChange` (e.g. when all items are removed).\n   */\n  reset(): void {\n    this.#selected = new Set();\n    this.#anchor = undefined;\n  }\n\n  /**\n   * Replace the selection and anchor silently (no `onChange`). Used to\n   * re-key the selection when items are rebuilt from data — e.g. matching\n   * new elements to previously selected keys.\n   */\n  seed(items: Iterable<T>, anchor?: T): void {\n    this.#selected = new Set(items);\n    this.#anchor = anchor;\n  }\n\n  #apply(next: ReadonlySet<T>): void {\n    const previous = this.#selected;\n    this.#selected = next;\n    this.#config.onChange(next, previous);\n  }\n}\n"],"mappings":"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"}

package/dist/{list-selection-types-DSuRNWpx.d.ts → list-selection-types-B5ioL-dG.d.ts}

@@ -24,6 +24,11 @@ type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sti
 type ListSelectDetail = {
   readonly selected: ReadonlySet<Element>;
   readonly previous: ReadonlySet<Element>;
+  /**
+   * The selection as stable key strings (`data-key` / `data-value`). Empty
+   * when items carry no key. Additive to `selected`.
+   */
+  readonly selectedKeys: ReadonlySet<string>;
 };
 type ListTickleDetail = {
   readonly item: Element;
@@ -46,4 +51,4 @@ interface ListElementEventMap {
 }
 //#endregion
 export { ListItemClickDetail as a, ListSelectEvent as c, ListTickleEvent as d, ListInteractionMode as i, ListSelectionMode as l, ListActivateEvent as n, ListItemClickEvent as o, ListElementEventMap as r, ListSelectDetail as s, ListActivateDetail as t, ListTickleDetail as u };
-//# sourceMappingURL=list-selection-types-DSuRNWpx.d.ts.map
+//# sourceMappingURL=list-selection-types-B5ioL-dG.d.ts.map

package/dist/list-selection-types-B5ioL-dG.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-selection-types-B5ioL-dG.d.ts","names":[],"sources":["../src/interaction/list-selection-types.ts"],"mappings":";;;;;;;;;KASY;;;;;;;;;;;;;KAcA;KAEA;WACD,UAAU,YAAY;WACtB,UAAU,YAAY;;;;;WAKtB,cAAc;;KAGb;WACD,MAAM;;KAGL;WACD,MAAM;;KAGL;WACD,MAAM;;KAGL,kBAAkB,YAAY;KAC9B,kBAAkB,YAAY;KAC9B,oBAAoB,YAAY;KAChC,qBAAqB,YAAY;UAE5B;EACf,eAAe;EACf,eAAe;EACf,iBAAiB;EACjB,mBAAmB"}

package/dist/{menu-CXDFJxNm.js → menu-Bg90Qr0B.js}

@@ -3,8 +3,8 @@ import { t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-DcEEGQa_.js";
-import "./interaction-D5XdKzbR.js";
-import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-D2S4i8u1.js";
+import "./interaction-Cr13azbM.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-Bx-Fs7jq.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-bar.ts
@@ -175,8 +175,8 @@ let MenuCheckItem = class MenuCheckItem extends LitElement {
     }
 
     .check {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -696,8 +696,8 @@ let MenuRadioItem = class MenuRadioItem extends LitElement {
     }
 
     .radio {
-      width: 16px;
-      margin-right: var(--space-s);
+      width: 1em;
+      margin-left: var(--space-xs);
       font-size: var(--text-m);
       color: var(--accent);
     }
@@ -822,4 +822,4 @@ var menu_exports = /* @__PURE__ */ __exportAll({
 //#endregion
 export { menuFromTreeToElements as a, MenuSubTrigger as c, MenuBar as d, menuFromTree as i, MenuCommandController as l, MenuRadioGroup as n, MenuHeader as o, MenuRadioItem as r, MenuSeparator as s, menu_exports as t, MenuCheckItem as u };
 
-//# sourceMappingURL=menu-CXDFJxNm.js.map
+//# sourceMappingURL=menu-Bg90Qr0B.js.map