@ixfx/components 0.16.1 → 0.16.3

package/dist/{list-selection-controller-5L0Nj9tR.js → list-selection-controller-D4iIrvJH.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,11 @@ 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,
+				mode: this.#lastMode === `invert` ? `toggle` : this.#lastMode
+			});
 		} catch {}
 		try {
 			this.#config.onPreview(/* @__PURE__ */ new Set(), void 0);
@@ -296,10 +303,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 +416,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,14 +453,23 @@ 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`) {
 		let ordered = this.#config.getOrderedItems();
-		if (ordered.length === 0) return;
+		let groupKey = null;
 		if (this.#clamped()) {
-			const group = (this.#anchor === void 0 ? null : this.#groupOf(this.#anchor)) ?? this.#config.getFallbackGroupKey?.() ?? null;
-			if (group !== null) ordered = ordered.filter((t) => this.#groupOf(t) === group);
+			groupKey = (this.#anchor === void 0 ? null : this.#groupOf(this.#anchor)) ?? this.#config.getFallbackGroupKey?.() ?? null;
+			if (groupKey !== null) ordered = ordered.filter((t) => this.#groupOf(t) === groupKey);
 		}
+		if (this.#intercepted({
+			kind: `all`,
+			keys: [],
+			...groupKey === null ? {} : { groupKey },
+			source
+		})) return;
 		const next = new Set(ordered.filter((t) => this.#config.isSelectable(t)));
 		if (next.size === 0) return;
 		this.#apply(next);
@@ -478,9 +504,22 @@ 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;
+		const mode = info?.mode ?? (info?.additive ? `toggle` : `replace`);
+		if (this.#intercepted({
+			kind: `marquee`,
+			keys: this.#keysOf(covered),
+			additive: mode !== `replace`,
+			mode,
+			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 +542,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 +677,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 +849,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-Dnamh2Lu.d.ts

@@ -0,0 +1,109 @@
+//#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` | `match` | `clear`;
+/**
+ * How a `marquee` combines the covered keys with the current selection:
+ * `replace` (plain drag: the selection becomes the covered keys), `add`
+ * (Shift-drag: covered keys are added), `toggle` (Cmd/Ctrl-drag: each covered
+ * key flips, so a drag can deselect).
+ */
+type ListMarqueeMode = `replace` | `add` | `toggle`;
+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;
+  /** `marquee`: a modifier was held, i.e. `mode` is not `replace`. */
+  readonly additive?: boolean;
+  /** `marquee`: how the covered `keys` combine with the selection. */
+  readonly mode?: ListMarqueeMode;
+  /** `match`: the search text. `keys` holds the current matches (a convenience). */
+  readonly query?: string;
+  /**
+   * `all`: the group the select-all is confined to (grouped lists with
+   * cross-group selection off). Absent when it is not confined to a group.
+   */
+  readonly groupKey?: string | null;
+  /**
+   * `toggle` from a branch checkbox in a tree: the toggle applies to the node
+   * and every loaded node under it (`keys` lists them), as a rule rather than
+   * a key list.
+   */
+  readonly descendants?: boolean;
+  /** `toggle` with `descendants`: the state the branch is being set to (`true` = checked). */
+  readonly checked?: boolean;
+  /** Multi-column lists (`ixfx-multicol-list`): the column the intent is for. Keys are that column's item keys. */
+  readonly columnId?: string;
+  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 { ListTickleEvent as _, ListItemClickDetail as a, ListSelectDetail as c, ListSelectIntentEvent as d, ListSelectIntentKind as f, ListTickleDetail as g, ListSelectionMode as h, ListInteractionMode as i, ListSelectEvent as l, ListSelectKeysDetail as m, ListActivateEvent as n, ListItemClickEvent as o, ListSelectIntentSource as p, ListElementEventMap as r, ListMarqueeMode as s, ListActivateDetail as t, ListSelectIntentDetail 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-BUv8An2k.js → menu-item-oxU1VKiJ.js}

@@ -5,6 +5,7 @@ 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-E-uMGHkJ.js";
+import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { LitElement, css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 //#region src/menu/menu-container.ts
@@ -24,6 +25,7 @@ let MenuContainer = class MenuContainer extends LitElement {
 					const item = items[index];
 					item.tabIndex = 0;
 					item.focus({ preventScroll: true });
+					if (this.tickled.inputMode === `keyboard`) item.scrollIntoView({ block: `nearest` });
 				}
 			},
 			onStateChange: () => {
@@ -78,16 +80,29 @@ let MenuContainer = class MenuContainer extends LitElement {
 			popupSurfaceStyles,
 			themeFallbacks,
 			tickledStyles,
+			scrollFadeStyles(`y`),
 			css`
     :host {
       display: block;
     }
 
+    /* The surface (border, shadow) stays fixed; only the inner scroller
+       scrolls, so the scroll fade masks the items and not the surface edges. */
     .popover {
-      padding: var(--space-xs) 0;
+      display: flex;
+      flex-direction: column;
+      max-height: var(--menu-max-height, min(60vh, 400px));
       min-width: 160px;
     }
 
+    .scroller {
+      min-height: 0;
+      padding: var(--space-s);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      --scroll-fade-width: var(--space-l);
+    }
+
     :host {
       opacity: 1;
       transform: translateY(0) scale(1);
@@ -159,7 +174,9 @@ let MenuContainer = class MenuContainer extends LitElement {
         @keydown=${this._handleKeydown}
         @mouseover=${this._handleMouseOver}
       >
-        <slot @slotchange=${this._updateIconSections}></slot>
+        <div class="scroller scroll-fade-y">
+          <slot @slotchange=${this._updateIconSections}></slot>
+        </div>
       </div>
     `;
 	}
@@ -541,7 +558,6 @@ let MenuTrigger = class MenuTrigger extends LitElement {
     :host {
       display: inline-block;
       position: relative;
-      --ixfx-button-padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
     }
 
     /* Context mode with a context-target: dissolve the host's box so the
@@ -584,7 +600,7 @@ let MenuTrigger = class MenuTrigger extends LitElement {
       border: none;
       color: var(--surface-3-text);
       cursor: pointer;
-      padding: var(--ixfx-button-padding);
+      padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
       font-family: var(--font-family, inherit);
       font-size: var(--text-m);
       font-weight: 600;
@@ -610,18 +626,24 @@ let MenuTrigger = class MenuTrigger extends LitElement {
       position: fixed;
       position-anchor: var(--anchor-name);
       inset: auto;
-      margin: 8px;
+      /* Offset only along the placement axis so the popup's edge lines up
+         with the trigger's; flip fallbacks mirror the margin with it. */
+      margin: var(--menu-popup-offset, var(--space-xs)) 0;
       padding: 0;
       border: none;
       background: transparent;
       z-index: 100;
-      max-height: min(60vh, 400px);
       max-width: min(90vw, 320px);
-      overflow: auto;
-      overscroll-behavior: contain;
+      /* Scrolling happens inside ixfx-menu-container (with a scroll fade).
+         Overriding the UA overflow:auto also stops the menu's shadow being clipped. */
+      overflow: visible;
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
     }
 
+    :host([placement="right-start"]) .popup {
+      margin: 0 var(--menu-popup-offset, var(--space-xs));
+    }
+
     .popup[popover] {
       opacity: 1;
       transform: translateY(0) scale(1);
@@ -670,7 +692,10 @@ __decorate([property({
 })], MenuTrigger.prototype, "iconName", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
-__decorate([property({ type: String })], MenuTrigger.prototype, "placement", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], MenuTrigger.prototype, "placement", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: `tab-stop`