@ixfx/components 0.16.0 → 0.16.2

package/dist/item-appearance-Bl6rMIID.js

@@ -0,0 +1,60 @@
+//#region src/interaction/partial-keys.ts
+/**
+* Shared "partial" row state for list-like components: a row whose resource
+* is only partly selected (a time range of an audio file, a region of an
+* image). Set by the caller through a `partialKeys` property; independent of
+* the selection, except that a key which is also selected counts as selected.
+*/
+/** Accessible description for a partial row outside checked mode (no `aria-checked="mixed"` there). */
+const PARTIAL_DESCRIPTION = `Partially selected`;
+/** Whether a row with this key shows the partial state: partial, and not selected (selected wins). */
+function isPartialKey(key, partialKeys, selected) {
+	return !selected && key !== void 0 && partialKeys.has(key);
+}
+/** Whether two key sets hold the same keys. */
+function sameKeySet(a, b) {
+	if (a.size !== b.size) return false;
+	for (const key of a) if (!b.has(key)) return false;
+	return true;
+}
+/**
+* Reflect the partial state onto a row element: `data-partial`, plus an
+* accessible description. Never overwrites an `aria-description` it didn't
+* set itself.
+*/
+function applyPartialAttributes(el, partial) {
+	el.toggleAttribute(`data-partial`, partial);
+	if (partial) {
+		if (!el.hasAttribute(`aria-description`)) el.setAttribute(`aria-description`, PARTIAL_DESCRIPTION);
+	} else if (el.getAttribute(`aria-description`) === PARTIAL_DESCRIPTION) el.removeAttribute(`aria-description`);
+}
+//#endregion
+//#region src/common/item-appearance.ts
+/**
+* Shared helpers for the list components' per-item appearance hooks — the
+* per-item icon colour / text colour / badge that miller-list, detail-list,
+* grid-list, data-grid and vertical-list all accept.
+*
+* Every component takes these three features in its own idiom (plain fields
+* on a `TreeItem`, a property-name lookup, an adapter function, a nominated
+* column) but they all agree on what "not supplied" means, and on never
+* emitting an empty slot for an absent value.
+*/
+/**
+* Whether a per-item appearance value counts as "not supplied". `false` and
+* `''` are included so a consumer can clear a feature without rebuilding the
+* collection — e.g. `badge: flags && tagChip(flags.colour)`.
+*/
+function appearanceAbsent(value) {
+	return value === void 0 || value === null || value === false || value === ``;
+}
+/**
+* A usable CSS colour from a per-item value, or `undefined`. Non-strings and
+* empty strings are ignored rather than stringified, so a stray number or
+* `0` never lands in a `style` attribute.
+*/
+function appearanceColor(value) {
+	return typeof value === `string` && value.length > 0 ? value : void 0;
+}
+//#endregion
+export { isPartialKey as a, applyPartialAttributes as i, appearanceColor as n, sameKeySet as o, PARTIAL_DESCRIPTION as r, appearanceAbsent as t };

package/dist/{labelled-input-base-DiTme1JO.d.ts → labelled-input-base-Dp_9KP0G.d.ts}

@@ -33,7 +33,7 @@ declare abstract class LabelledInputBase extends LitElement {
     value: number;
   }>) => void;
   protected _syncValue(v: number): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   updated(changedProperties: Map<string, unknown>): void;
 }
 //#endregion

package/dist/labelled-radial-input.d.ts

@@ -1,4 +1,4 @@
-import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
+import { t as LabelledInputBase } from "./labelled-input-base-Dp_9KP0G.js";
 import { i as MarkerStyle, l as ValueMode } from "./radial-input-DU6t2hYO.js";
 import { CSSResultGroup, nothing } from "lit";
 //#region src/labelled-radial-input/labelled-radial-input.d.ts
@@ -19,7 +19,7 @@ declare class LabelledRadialInput extends LabelledInputBase {
   private _isWide;
   private _getEffectivePrecision;
   protected _handleResize(entries: ResizeObserverEntry[]): void;
-  protected _renderEditableNumber(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderEditableNumber(): import("lit").TemplateResult<1> | typeof nothing;
   render(): import("lit").TemplateResult<1>;
   private _getTooltipValue;
   static styles: CSSResultGroup;

package/dist/labelled-range-input.d.ts

@@ -1,2 +1,2 @@
-import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
+import { t as LabelledRangeInput } from "./index-BUB5SICW.js";
 export { LabelledRangeInput };

package/dist/labelled-slider-input.d.ts

@@ -1,2 +1,2 @@
-import { t as LabelledSliderInput } from "./index-UvnoZUAo.js";
+import { t as LabelledSliderInput } from "./index-CJ5fshD3.js";
 export { LabelledSliderInput };

package/dist/list-group-header.d.ts

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { LitElement } from "lit";
 //#region src/list-group-header/list-group-header.d.ts
 /**

package/dist/{list-selection-controller-5L0Nj9tR.js → list-selection-controller-CJDdjH7E.js}

@@ -42,6 +42,7 @@ var ListDragSelectController = class {
 	/** Combine mode of the most recent preview (drives the commit flag). */
 	#lastMode = `replace`;
 	#preview = /* @__PURE__ */ new Set();
+	#covered = /* @__PURE__ */ new Set();
 	#raf = 0;
 	constructor(host, config) {
 		this.#host = host;
@@ -129,6 +130,7 @@ var ListDragSelectController = class {
 		this.#suppressClick = false;
 		this.#base = /* @__PURE__ */ new Set();
 		this.#lastMode = `replace`;
+		this.#covered = /* @__PURE__ */ new Set();
 		this.#lastModifiers = {
 			shiftKey: event.shiftKey,
 			ctrlKey: event.ctrlKey,
@@ -211,6 +213,7 @@ var ListDragSelectController = class {
 			preview = toggled;
 		} else preview = hitSet;
 		this.#preview = preview;
+		this.#covered = hitSet;
 		try {
 			this.#config.onPreview(preview, rect);
 		} catch {}
@@ -236,7 +239,10 @@ var ListDragSelectController = class {
 		this.#dragging = false;
 		const final = this.#preview;
 		try {
-			this.#config.onCommit(final, { additive: this.#lastMode !== `replace` });
+			this.#config.onCommit(final, {
+				additive: this.#lastMode !== `replace`,
+				covered: this.#covered
+			});
 		} catch {}
 		try {
 			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
@@ -296,10 +302,20 @@ var ListDragSelectController = class {
 		this.#base = /* @__PURE__ */ new Set();
 		this.#lastMode = `replace`;
 		this.#preview = /* @__PURE__ */ new Set();
+		this.#covered = /* @__PURE__ */ new Set();
 	}
 };
 //#endregion
 //#region src/interaction/list-selection-controller.ts
+/** Capture the modifier / pointer-type state of a click for `handleClick`. */
+function gestureOf(e) {
+	return {
+		ctrlKey: e.ctrlKey,
+		metaKey: e.metaKey,
+		shiftKey: e.shiftKey,
+		pointerType: e.pointerType
+	};
+}
 /** Whether the interaction mode allows building a multi-item selection. */
 function isMultiMode(mode) {
 	return mode === `checked` || mode === `sticky` || mode === `vscode` || mode === `standard`;
@@ -399,36 +415,36 @@ var ListSelectionController = class {
 	/** 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) {
+		const range = this.#rangeItems(item);
+		if (range === void 0) {
 			this.replace(item);
 			return;
 		}
+		this.#apply(new Set(range));
+	}
+	/**
+	* The selectable items between the anchor and `item` (inclusive), or
+	* `undefined` when there is no usable range (no anchor, an unresolved end,
+	* or a different group) and the gesture degrades to a plain `replace`.
+	*/
+	#rangeItems(item) {
+		if (this.#anchor === void 0) return void 0;
 		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;
-		}
+		if (anchorIdx === -1 || targetIdx === -1) return void 0;
+		let scope = ordered;
+		let a = anchorIdx;
+		let b = targetIdx;
 		if (this.#clamped()) {
 			const group = this.#groupOf(this.#anchor);
-			if (group !== this.#groupOf(item)) {
-				this.replace(item);
-				return;
-			}
-			const inGroup = ordered.filter((t) => this.#groupOf(t) === group);
-			const a = inGroup.indexOf(this.#anchor);
-			const b = inGroup.indexOf(item);
-			if (a === -1 || b === -1) {
-				this.replace(item);
-				return;
-			}
-			this.#apply(new Set(inGroup.slice(Math.min(a, b), Math.max(a, b) + 1).filter((t) => this.#config.isSelectable(t))));
-			return;
+			if (group !== this.#groupOf(item)) return void 0;
+			scope = ordered.filter((t) => this.#groupOf(t) === group);
+			a = scope.indexOf(this.#anchor);
+			b = scope.indexOf(item);
+			if (a === -1 || b === -1) return void 0;
 		}
-		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))));
+		return scope.slice(Math.min(a, b), Math.max(a, b) + 1).filter((t) => this.#config.isSelectable(t));
 	}
 	/** Clear the selection. No change event when the selection is already empty. */
 	clear() {
@@ -436,8 +452,16 @@ var ListSelectionController = class {
 		if (this.#selected.size === 0) return;
 		this.#apply(/* @__PURE__ */ new Set());
 	}
-	/** Select every ordered item that passes `isSelectable`. */
-	selectAll() {
+	/**
+	* Select every ordered item that passes `isSelectable`. Fires an `all`
+	* intent first; the caller may take over.
+	*/
+	selectAll(source = `api`) {
+		if (this.#intercepted({
+			kind: `all`,
+			keys: [],
+			source
+		})) return;
 		let ordered = this.#config.getOrderedItems();
 		if (ordered.length === 0) return;
 		if (this.#clamped()) {
@@ -478,9 +502,20 @@ var ListSelectionController = class {
 	* non-empty selection (e.g. a Cmd-drag that toggles everything off) but is
 	* a no-op when nothing is selected.
 	*/
-	applyDragSelection(items) {
+	applyDragSelection(items, info) {
 		if (!this.canDragSelect()) return;
-		const next = this.#clampToFirstGroup(new Set([...items].filter((t) => this.#config.isSelectable(t))));
+		const final = [...items];
+		const covered = info ? [...info.covered].filter((t) => this.#config.isSelectable(t)) : final;
+		if (this.#intercepted({
+			kind: `marquee`,
+			keys: this.#keysOf(covered),
+			additive: info?.additive ?? false,
+			source: `pointer`
+		})) {
+			this.#anchor = final.at(-1) ?? this.#anchor;
+			return;
+		}
+		const next = this.#clampToFirstGroup(new Set(final.filter((t) => this.#config.isSelectable(t))));
 		if (next.size === 0 && this.#selected.size === 0) return;
 		this.#anchor = [...next].at(-1);
 		this.#apply(next);
@@ -503,54 +538,67 @@ var ListSelectionController = class {
 	}
 	/**
 	* 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.
+	* `resolve` cannot map yet are kept pending and selected when their items
+	* appear (see `resolvePending()`); keys that resolve to a non-selectable
+	* item are ignored. `selectionMode="none"` is a no-op. When multi-select is
+	* not available, only the last key is kept. `onChange` fires once.
 	*/
 	selectKeys(keys, resolve) {
 		if (this.#config.getModes().selectionMode === `none`) return;
 		let next = /* @__PURE__ */ new Set();
+		const missing = /* @__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 (item === void 0) missing.add(key);
+			else if (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]);
+		let pending = missing;
+		if (!this.#effectiveMulti()) {
+			if (next.size > 0) {
+				next = new Set([...next].slice(-1));
+				pending = EMPTY_KEYS;
+			} else pending = new Set([...missing].slice(-1));
 		}
 		this.#anchor = [...next].at(-1);
-		this.#apply(next);
+		this.#pending = capKeys(pending);
+		this.#apply(next, true);
 	}
 	/**
 	* Add the items resolved from `keys` to the selection (multi-select only;
-	* a no-op otherwise). `onChange` fires once if anything changed.
+	* a no-op otherwise). Keys not present yet are kept pending. `onChange`
+	* fires once if anything changed.
 	*/
 	addKeys(keys, resolve) {
 		if (!this.#effectiveMulti()) return;
 		const next = new Set(this.#selected);
+		const pending = new Set(this.#pending);
 		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)) {
+			if (item === void 0) pending.add(key);
+			else if (!next.has(item) && this.#config.isSelectable(item)) {
 				next.add(item);
 				changed = true;
 			}
 		}
-		if (changed) this.#apply(next);
+		if (changed) this.#apply(next, true);
+		this.#pending = capKeys(pending);
 	}
 	/**
-	* Remove the items resolved from `keys` from the selection. `onChange`
-	* fires once if anything changed.
+	* Remove the items resolved from `keys` from the selection, and drop them
+	* from the pending keys. `onChange` fires once if anything changed.
 	*/
 	removeKeys(keys, resolve) {
+		const wanted = new Set(keys);
+		if (this.#pending.size > 0) this.#pending = new Set([...this.#pending].filter((k) => !wanted.has(k)));
 		if (this.#selected.size === 0) return;
 		const next = new Set(this.#selected);
 		let changed = false;
-		for (const key of new Set(keys)) {
+		for (const key of wanted) {
 			const item = resolve(key);
 			if (item !== void 0 && next.delete(item)) changed = true;
 		}
-		if (changed) this.#apply(next);
+		if (changed) this.#apply(next, true);
 	}
 	/** Selected keys waiting for their items to appear. */
 	get pendingKeys() {
@@ -625,32 +673,122 @@ var ListSelectionController = class {
 		const item = resolve(key);
 		return item !== void 0 && this.#config.isSelectable(item) ? item : void 0;
 	}
-	/** Route a click on `item` according to the current interaction mode. */
+	/**
+	* Route a click on `item` according to the current interaction mode. In
+	* `manual` mode nothing is selected, but the intent is still reported so
+	* the caller can apply it.
+	*/
 	handleClick(item, gesture) {
 		const { selectionMode, interactionMode: mode } = this.#config.getModes();
-		if (mode === `manual`) return;
 		if (selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
+		const touch = gesture.pointerType === `touch`;
+		const modified = gesture.ctrlKey || gesture.metaKey;
+		const multi = selectionMode === `multiple` || mode === `vscode`;
 		switch (mode) {
 			case `implicit`:
-				this.replace(item);
+				this.#replaceIntent(item, `pointer`);
+				break;
+			case `manual`:
+				if (modified) this.#toggleIntent(item, `pointer`);
+				else if (gesture.shiftKey) this.#extendIntent(item, `pointer`);
+				else this.#replaceIntent(item, `pointer`);
 				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);
+				if (modified) {
+					if (multi) this.#toggleIntent(item, `pointer`);
+				} else if (gesture.shiftKey && multi) this.#extendIntent(item, `pointer`);
+				else this.#replaceIntent(item, `pointer`);
 				break;
 			case `checked`: break;
-			case `sticky`: this.toggle(item);
+			case `sticky`: this.#toggleIntent(item, touch ? `touch` : `pointer`);
 		}
 	}
 	/** 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);
+		if (this.#config.getModes().interactionMode === `implicit`) this.#replaceIntent(item, `keyboard`);
+		else this.#toggleIntent(item, `keyboard`);
+	}
+	/** Route a checkbox (checked-mode) toggle on `item`. */
+	handleCheckbox(item, source = `pointer`) {
+		this.#toggleIntent(item, source);
+	}
+	/** Route a plain "select only this" gesture (Enter, double-click) on `item`. */
+	handleReplace(item, source = `pointer`) {
+		this.#replaceIntent(item, source);
+	}
+	/** Route Shift+Arrow: extend the range from the anchor to the cursor `item`. */
+	handleExtend(item) {
+		this.#extendIntent(item, `keyboard`);
+	}
+	/**
+	* Route Escape / empty-space click: clear the selection. `reportOnly`
+	* suppresses the default action in `manual` mode (the caller owns it).
+	*/
+	handleClear(source = `keyboard`, reportOnly = false) {
+		if (this.#intercepted({
+			kind: `clear`,
+			keys: [],
+			source
+		})) return;
+		if (reportOnly && this.#config.getModes().interactionMode === `manual`) return;
+		this.clear();
+	}
+	#replaceIntent(item, source) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		if (!this.#config.isSelectable(item)) return;
+		if (this.#intercepted({
+			kind: `replace`,
+			keys: this.#keysOf([item]),
+			source
+		})) {
+			this.#anchor = item;
+			return;
+		}
+		if (this.#config.getModes().interactionMode === `manual`) return;
+		this.replace(item);
+	}
+	#toggleIntent(item, source) {
+		if (!this.#config.isSelectable(item)) return;
+		if (this.#intercepted({
+			kind: `toggle`,
+			keys: this.#keysOf([item]),
+			source
+		})) return;
+		if (this.#config.getModes().interactionMode === `manual`) return;
+		this.toggle(item);
+	}
+	#extendIntent(item, source) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		const range = this.#anchor === void 0 ? void 0 : this.#rangeItems(item);
+		const anchorKey = this.#anchor === void 0 ? void 0 : this.#config.getKey?.(this.#anchor);
+		const targetKey = this.#config.getKey?.(item);
+		if (this.#intercepted({
+			kind: `extend`,
+			keys: this.#keysOf(range ?? [item]),
+			...anchorKey === void 0 ? {} : { anchorKey },
+			...targetKey === void 0 ? {} : { targetKey },
+			source
+		})) {
+			if (this.#anchor === void 0) this.#anchor = item;
+			return;
+		}
+		if (this.#config.getModes().interactionMode === `manual`) return;
+		this.rangeTo(item);
+	}
+	#keysOf(items) {
+		const getKey = this.#config.getKey;
+		if (!getKey) return [];
+		const out = [];
+		for (const item of items) {
+			const key = getKey(item);
+			if (key !== void 0) out.push(key);
+		}
+		return out;
+	}
+	/** Report an intent; `true` when the caller took over. */
+	#intercepted(intent) {
+		return this.#config.onIntent?.(intent) ?? false;
 	}
 	/** Drop the range-selection anchor (e.g. when the interaction mode changes). */
 	clearAnchor() {
@@ -707,4 +845,4 @@ var ListSelectionController = class {
 	}
 };
 //#endregion
-export { isMultiMode as n, ListDragSelectController as r, ListSelectionController as t };
+export { ListDragSelectController as i, gestureOf as n, isMultiMode as r, ListSelectionController as t };

package/dist/list-selection-types-hj9Njei3.d.ts

@@ -0,0 +1,83 @@
+//#region src/interaction/list-selection-types.d.ts
+type ListSelectionMode = `none` | `single` | `multiple`;
+/**
+ * Controls how pointer and keyboard gestures map to selection changes.
+ *
+ * - `implicit`  — click always replaces selection (no modifier support)
+ * - `standard`  — click replaces; Ctrl/Cmd+click toggles; Shift+click range-selects (multiple only)
+ * - `manual`    — no auto-selection; drive state via select()/deselect()/clearSelection()
+ * - `checked`   — every click toggles; implies multiple selection regardless of selectionMode
+ * - `sticky`    — every tap/click toggles (no checkbox column); implies multiple selection, for touchscreens
+ * - `vscode`    — like standard for clicks; Shift+Arrow extends range from the keyboard anchor
+ *
+ * Switching interactionMode clears the current selection.
+ */
+type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sticky` | `vscode`;
+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>;
+  /** The previous selection as keys. Additive to `previous`. */
+  readonly previousKeys: ReadonlySet<string>;
+};
+/**
+ * The key-based subset of `list-select` detail common to every list-like
+ * component (including `ixfx-data-grid`), so one adapter can read any of them.
+ */
+type ListSelectKeysDetail = Pick<ListSelectDetail, `selectedKeys` | `previousKeys`>;
+/**
+ * What the user (or API) is trying to do to the selection. See
+ * {@link ListSelectIntentDetail}.
+ */
+type ListSelectIntentKind = `replace` | `toggle` | `extend` | `all` | `marquee` | `clear`;
+type ListSelectIntentSource = `pointer` | `keyboard` | `touch` | `api`;
+/**
+ * Detail of the cancelable `list-select-intent` event: fired *before* a
+ * component changes its selection, in every interaction mode (including
+ * `manual`). Calling `preventDefault()` means "the caller applies this
+ * itself" — the component then changes nothing (cursor and range anchor still
+ * move). Without `preventDefault()` behaviour is unchanged.
+ *
+ * Only gestures and `selectAll()` fire it. The imperative `select()` /
+ * `selectKeys()` / `clearSelection()` family never does, so a handler can
+ * apply its decision through them without re-entering itself.
+ */
+type ListSelectIntentDetail = {
+  readonly kind: ListSelectIntentKind;
+  /** Keys directly affected. Empty for `all` / `clear`. For `extend`, the range (a convenience: callers should use the endpoints). */
+  readonly keys: readonly string[];
+  /** Range anchor, for `extend`. */
+  readonly anchorKey?: string;
+  /** Range end, for `extend`. */
+  readonly targetKey?: string;
+  /** Add to rather than replace the selection (a modifier was held). */
+  readonly additive?: boolean;
+  readonly source: ListSelectIntentSource;
+};
+type ListTickleDetail = {
+  readonly item: Element;
+};
+type ListActivateDetail = {
+  readonly item: Element;
+};
+type ListItemClickDetail = {
+  readonly item: Element;
+};
+type ListSelectEvent = CustomEvent<ListSelectDetail>;
+type ListSelectIntentEvent = CustomEvent<ListSelectIntentDetail>;
+type ListTickleEvent = CustomEvent<ListTickleDetail>;
+type ListActivateEvent = CustomEvent<ListActivateDetail>;
+type ListItemClickEvent = CustomEvent<ListItemClickDetail>;
+interface ListElementEventMap {
+  'list-select': ListSelectEvent;
+  'list-select-intent': ListSelectIntentEvent;
+  'list-tickle': ListTickleEvent;
+  'list-activate': ListActivateEvent;
+  'list-item-click': ListItemClickEvent;
+}
+//#endregion
+export { ListItemClickDetail as a, ListSelectEvent as c, ListSelectIntentKind as d, ListSelectIntentSource as f, ListTickleEvent as g, ListTickleDetail as h, ListInteractionMode as i, ListSelectIntentDetail as l, ListSelectionMode as m, ListActivateEvent as n, ListItemClickEvent as o, ListSelectKeysDetail as p, ListElementEventMap as r, ListSelectDetail as s, ListActivateDetail as t, ListSelectIntentEvent as u };

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

@@ -4,7 +4,7 @@ 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-E-uMGHkJ.js";
-import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-BUv8An2k.js";
+import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-oxU1VKiJ.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-bar.ts
@@ -16,6 +16,15 @@ let MenuBar = class MenuBar extends LitElement {
 		this._handlePointerMove = () => {
 			this._setInputMode(`mouse`);
 		};
+		this._handlePointerOver = (e) => {
+			if (!this._openTrigger || e.pointerType === `touch`) return;
+			const triggers = this._getTriggers();
+			const path = e.composedPath();
+			const trigger = triggers.find((t) => path.includes(t));
+			if (!trigger || trigger === this._openTrigger) return;
+			this._openTrigger.closeMenu();
+			trigger.openMenu();
+		};
 		this._handleTriggerOpen = (e) => {
 			this._openTrigger = e.target;
 		};
@@ -53,6 +62,7 @@ let MenuBar = class MenuBar extends LitElement {
 		this.addEventListener(`focusin`, this._handleFocusIn);
 		this.addEventListener(`keydown`, this._handleKeydown);
 		this.addEventListener(`pointermove`, this._handlePointerMove);
+		this.addEventListener(`pointerover`, this._handlePointerOver);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -61,6 +71,7 @@ let MenuBar = class MenuBar extends LitElement {
 		this.removeEventListener(`focusin`, this._handleFocusIn);
 		this.removeEventListener(`keydown`, this._handleKeydown);
 		this.removeEventListener(`pointermove`, this._handlePointerMove);
+		this.removeEventListener(`pointerover`, this._handlePointerOver);
 	}
 	_setInputMode(mode) {
 		if (this._inputMode === mode) return;
@@ -75,6 +86,8 @@ let MenuBar = class MenuBar extends LitElement {
     :host {
       display: flex;
       align-items: center;
+      gap: var(--menu-bar-gap, var(--space-xs));
+      padding: var(--menu-bar-padding, var(--space-xs));
     }
 
     /* Keyboard mode: suppress hover highlight on trigger buttons */
@@ -385,6 +398,7 @@ let MenuSubTrigger = class MenuSubTrigger extends LitElement {
 	}
 	_handleKeydown(e) {
 		if (this.disabled) return;
+		if (e.target !== this !== (e.key === `ArrowLeft` || e.key === `Escape`)) return;
 		switch (e.key) {
 			case `ArrowRight`:
 			case `Enter`:
@@ -408,6 +422,7 @@ let MenuSubTrigger = class MenuSubTrigger extends LitElement {
 				e.preventDefault();
 				e.stopPropagation();
 				this._hideSubmenu();
+				this._itemEl?.focus();
 		}
 	}
 	static {

package/dist/{menu-item-bF6narIz.d.ts → menu-item-B0zqw2xp.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { LitElement } from "lit";
 import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
 //#region src/menu/menu-container.d.ts