@ixfx/components 0.5.16 → 0.5.17

package/dist/crumb-navigation-DFqTzElw.js

@@ -0,0 +1,1149 @@
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
+import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./interaction-D6efrBLo.js";
+import "./menu-item-BYRvfyXK.js";
+import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import "./narrowed-text.js";
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/styles/scroll-fade.ts
+/**
+* Zero-JS scroll edge fade.
+*
+* A CSS alpha mask driven by a scroll-linked animation (`scroll-timeline`),
+* rather than a JS scroll/resize listener - so it can never go stale after
+* a resize (widening a scroller so content fully fits clears the fade
+* immediately, with no JS involved), and it fades the whole element
+* including its children, not just a background layer that an opaque
+* item background would hide.
+*
+* Apply the returned `.scroll-fade-x` / `.scroll-fade-y` class to
+* whichever element actually has `overflow` scrolling on that axis.
+*
+* CSS variables:
+* - `--scroll-fade-width` (default `30px`): how far the fade extends from each edge.
+*
+* ```ts
+* import { scrollFadeStyles } from '../styles/scroll-fade.js';
+*
+* static styles = [scrollFadeStyles(`x`), css`...`];
+* ```
+* ```html
+* <div class="scroll-fade-x" style="overflow-x: scroll">...</div>
+* ```
+*/
+function scrollFadeStyles(axis) {
+	const className = `scroll-fade-${axis}`;
+	const start = `--${className}-start`;
+	const end = `--${className}-end`;
+	const timeline = `--${className}-timeline`;
+	const keyframesName = `${className}-fade`;
+	const gradientDirection = axis === `x` ? `to right` : `to bottom`;
+	return css`
+    @property ${unsafeCSS(start)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @property ${unsafeCSS(end)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @keyframes ${unsafeCSS(keyframesName)} {
+      0% { ${unsafeCSS(start)}: 0px; }
+      10%, 100% { ${unsafeCSS(start)}: var(--scroll-fade-width, 30px); }
+      0%, 90% { ${unsafeCSS(end)}: var(--scroll-fade-width, 30px); }
+      100% { ${unsafeCSS(end)}: 0px; }
+    }
+
+    .${unsafeCSS(className)} {
+      scroll-timeline: ${unsafeCSS(timeline)} ${unsafeCSS(axis)};
+      animation: ${unsafeCSS(keyframesName)};
+      animation-timeline: ${unsafeCSS(timeline)};
+      mask-image: linear-gradient(${unsafeCSS(gradientDirection)},
+        transparent,
+        black var(${unsafeCSS(start)}, 0px) calc(100% - var(${unsafeCSS(end)}, 0px)),
+        transparent
+      );
+    }
+  `;
+}
+//#endregion
+//#region src/crumbs/crumb-navigation.ts
+let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.exclusivity = `none`;
+		this.selectionFilter = `leaf`;
+		this._openIdx = -1;
+		this._isFocused = false;
+		this._menuOpen = false;
+		this._focusOnNarrowedText = false;
+		this.inputMode = ``;
+		this.noTruncate = false;
+		this.showSuggestions = false;
+		this.leadingCaret = false;
+		this.caretEmbedded = true;
+		this.hideRoot = false;
+		this.#previousSelectionKey = ``;
+		this.#menuOpenedByKeyboard = false;
+		this.#currentOpenTrigger = null;
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#getTickledItems(),
+			onTickle: (index) => {
+				if (index !== void 0) this.#onTickled(index);
+			}
+		});
+		this.#onFocus = () => {
+			this._isFocused = true;
+		};
+		this.#onBlur = () => {
+			this._isFocused = false;
+		};
+		this.#onHostClick = () => {
+			this.#getHostContainer()?.focus();
+		};
+		this.#onMenuTriggerClose = () => {
+			document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+			this.#currentOpenTrigger = null;
+			this.#menuOpenedByKeyboard = false;
+			requestAnimationFrame(() => {
+				this.#getHostContainer()?.focus();
+			});
+		};
+		this.#onMenuKeyNav = (e) => {
+			if (!this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`) || !this.#currentOpenTrigger?.isOpen) return;
+			switch (e.key) {
+				case `ArrowLeft`:
+				case `ArrowRight`: {
+					e.preventDefault();
+					e.stopPropagation();
+					this.#currentOpenTrigger.closeMenu();
+					const r = this.root;
+					const sel = this.selectedNode;
+					if (!r || !sel) break;
+					const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+					const currentTickled = this.tickled.tickledId ?? -1;
+					if (e.key === `ArrowLeft`) {
+						if (currentTickled > 0) this.tickled.handleKeyboardNavigation(`previous`);
+					} else if (currentTickled < totalItems - 1) this.tickled.handleKeyboardNavigation(`next`);
+					break;
+				}
+			}
+		};
+		this.#onKeyDown = (e) => {
+			const r = this.root;
+			const sel = this.selectedNode;
+			if (!r || !sel) return;
+			const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+			const currentTickled = this.tickled.tickledId ?? -1;
+			switch (e.key) {
+				case `ArrowRight`:
+					e.preventDefault();
+					if (currentTickled < totalItems - 1) this.tickled.handleKeyboardNavigation(`next`);
+					else if (currentTickled === totalItems - 1) this.#shiftFocusToNarrowedText();
+					break;
+				case `ArrowLeft`:
+					e.preventDefault();
+					if (currentTickled > 0) this.tickled.handleKeyboardNavigation(`previous`);
+					break;
+				case `ArrowDown`:
+				case `ArrowUp`:
+					if (this.tickled.tickledId !== void 0) {
+						e.preventDefault();
+						if (this.#currentOpenTrigger?.isOpen) {
+							const popover = this.#currentOpenTrigger.querySelector(`ixfx-menu-container`)?.shadowRoot?.querySelector(`.popover`);
+							if (popover) popover.dispatchEvent(new KeyboardEvent(`keydown`, {
+								key: e.key,
+								bubbles: true
+							}));
+						} else this.#handleOpenCaretMenu();
+					}
+					break;
+				case `Enter`:
+					e.preventDefault();
+					this.#handleEnter();
+					break;
+				case `Escape`:
+					e.preventDefault();
+					this._menuOpen = false;
+					this.tickled.clearTickled();
+					this.blur();
+					break;
+				case `Tab`: if (e.shiftKey) {
+					e.preventDefault();
+					this.#shiftFocusToPath();
+				} else if (currentTickled === totalItems - 1) {
+					e.preventDefault();
+					this._menuOpen = false;
+					this._focusOnNarrowedText = true;
+					const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
+					if (narrowedText) narrowedText.focus();
+				}
+			}
+		};
+		this.#onNarrowedTextBlur = () => {
+			this._focusOnNarrowedText = false;
+			this.#shiftFocusToPath();
+		};
+		this.#onNarrowedTextShiftTab = () => {
+			this._focusOnNarrowedText = false;
+			this.#shiftFocusToPath();
+		};
+		this.#isWheelScrolling = false;
+		this.#onWheel = (e) => {
+			const wheelEvent = e;
+			if (wheelEvent.deltaX !== 0 || wheelEvent.deltaY !== 0) {
+				e.preventDefault();
+				if (!this.#isWheelScrolling) {
+					this.#isWheelScrolling = true;
+					this.tickled.clearTickled();
+				}
+				const hostContainer = this.#getHostContainer();
+				if (hostContainer) hostContainer.scrollLeft += wheelEvent.deltaX + wheelEvent.deltaY;
+				clearTimeout(this.#wheelScrollTimeout);
+				this.#wheelScrollTimeout = setTimeout(() => {
+					this.#isWheelScrolling = false;
+				}, 150);
+			}
+		};
+		this.#currentLeadingSiblings = void 0;
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	#pendingNode;
+	#pendingController;
+	#modelUnsubscribe;
+	#previousSelectionKey;
+	#menuOpenedByKeyboard;
+	#currentOpenTrigger;
+	#getTickledItems() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return [];
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		const items = [];
+		if (this.caretEmbedded) {
+			pathNodes.forEach((_node, i) => {
+				items.push({
+					id: i,
+					enabled: true
+				});
+			});
+			if (this.#hasChildOptions()) items.push({
+				id: pathNodes.length,
+				enabled: true
+			});
+		} else {
+			let segmentId = 0;
+			pathNodes.forEach((node, i) => {
+				const isLast = i === pathNodes.length - 1;
+				const hasChildren = node.item.isLeaf !== true && (node.children === void 0 || node.children.length > 0);
+				const showLeadingCaret = this.leadingCaret && (i > 0 || this.hideRoot) && hasChildren;
+				const showTrailingCaret = !this.leadingCaret && hasChildren || this.leadingCaret && isLast && hasChildren;
+				if (showLeadingCaret) items.push({
+					id: segmentId++,
+					enabled: true
+				});
+				items.push({
+					id: segmentId++,
+					enabled: true
+				});
+				if (showTrailingCaret) items.push({
+					id: segmentId++,
+					enabled: true
+				});
+			});
+		}
+		return items;
+	}
+	#onTickled(index) {
+		if (this.tickled.inputMode === `keyboard`) this.#scrollTickledIntoView(index);
+	}
+	#scrollTickledIntoView(index) {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		let el = null;
+		if (index < pathNodes.length) el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
+		else if (index === pathNodes.length) el = this.shadowRoot?.querySelector(`#child-options-trigger`) ?? null;
+		el?.scrollIntoView({
+			inline: `nearest`,
+			block: `nearest`,
+			behavior: `smooth`
+		});
+	}
+	#hasChildOptions() {
+		const s = this.selectedNode;
+		if (s === void 0) return false;
+		const isPending = this.#pendingNode === s;
+		return (s.children ?? []).length > 0 || isPending;
+	}
+	#onFocus;
+	#onBlur;
+	#getHostContainer() {
+		return this.shadowRoot?.querySelector(`.host-container`) ?? null;
+	}
+	#onHostClick;
+	#handleOpenCaretMenu() {
+		const currentTickled = this.tickled.tickledId;
+		if (currentTickled === void 0) return;
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		if (currentTickled < (this.#findPath(r, sel) ?? [r]).length - 1) {
+			const trigger = (this.shadowRoot?.querySelectorAll(`.crumb-segment`))?.[currentTickled]?.querySelector(`.caret ixfx-menu-trigger`);
+			if (trigger) {
+				this.#menuOpenedByKeyboard = true;
+				this.#currentOpenTrigger = trigger;
+				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+				trigger.openMenu();
+				this.#propagateInputModeToMenu();
+				return;
+			}
+		}
+		if (this.#hasChildOptions()) {
+			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
+			if (trigger) {
+				this.#menuOpenedByKeyboard = true;
+				this.#currentOpenTrigger = trigger;
+				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+				trigger.openMenu();
+				this.#propagateInputModeToMenu();
+			}
+		}
+	}
+	#propagateInputModeToMenu() {
+		const inputMode = this.tickled.inputMode;
+		requestAnimationFrame(() => {
+			const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);
+			if (container) container.setAttribute(`data-input-mode`, inputMode);
+		});
+	}
+	#onMenuTriggerClose;
+	#onMenuKeyNav;
+	#onKeyDown;
+	#handleEnter() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		const hasChildOptions = this.#hasChildOptions();
+		const currentTickled = this.tickled.tickledId ?? -1;
+		if (currentTickled < pathNodes.length) {
+			const node = pathNodes[currentTickled];
+			this.#setSelected(node);
+			this._menuOpen = false;
+			this.dispatchEvent(new CustomEvent(`item-click`, {
+				detail: {
+					node,
+					depth: currentTickled
+				},
+				bubbles: true,
+				composed: true
+			}));
+		} else if (hasChildOptions && currentTickled === pathNodes.length) {
+			this._menuOpen = true;
+			this.#menuOpenedByKeyboard = true;
+			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
+			if (trigger) {
+				this.#currentOpenTrigger = trigger;
+				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+				trigger.openMenu();
+				this.#propagateInputModeToMenu();
+			}
+		}
+	}
+	#shiftFocusToNarrowedText() {
+		const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
+		if (narrowedText) {
+			this._focusOnNarrowedText = true;
+			narrowedText.focus();
+		}
+	}
+	#shiftFocusToPath() {
+		this._focusOnNarrowedText = false;
+		const hostContainer = this.#getHostContainer();
+		if (hostContainer) hostContainer.focus();
+	}
+	#onNarrowedTextBlur;
+	#onNarrowedTextShiftTab;
+	select(node) {
+		this.#setSelected(node);
+	}
+	deselect(_node) {}
+	clearSelection() {
+		if (this.root) this.#setSelected(this.root);
+	}
+	/** Not implemented on crumb-navigation. */
+	selectAll() {}
+	/** Not implemented on crumb-navigation. */
+	deselectAll() {}
+	getNodes() {
+		if (!this.root) return [];
+		const result = [];
+		const visit = (node, depth) => {
+			result.push({
+				node,
+				depth
+			});
+			if (node.children) for (const child of node.children) visit(child, depth + 1);
+		};
+		for (const child of this.root.children ?? []) visit(child, 0);
+		return result;
+	}
+	updated(changedProps) {
+		if (changedProps.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = void 0;
+			const model = this.model;
+			if (model) {
+				this.root = model.root;
+				this.#modelUnsubscribe = model._subscribe((event) => {
+					if (event.type === `root`) {
+						this.root = event.root;
+						this.requestUpdate();
+					}
+				});
+			}
+		}
+		this.#runLayoutUpdate(changedProps);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`click`, this.#onHostClick);
+		this.addEventListener(`wheel`, this.#onWheel, { passive: false });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`click`, this.#onHostClick);
+		this.removeEventListener(`wheel`, this.#onWheel);
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+		this.#currentOpenTrigger = null;
+	}
+	firstUpdated() {
+		const hostContainer = this.#getHostContainer();
+		if (hostContainer) hostContainer.scrollLeft = hostContainer.scrollWidth - hostContainer.clientWidth;
+	}
+	#isWheelScrolling;
+	#onWheel;
+	#wheelScrollTimeout;
+	#runLayoutUpdate(_changedProperties) {
+		if (!this.shadowRoot) return;
+		const hsiElement = this.shadowRoot.querySelector(`.horiz-select-items`);
+		if (!hsiElement) return;
+		const ulElement = hsiElement.querySelector(`ul`);
+		if (!ulElement) return;
+		const menuTrigger = this.shadowRoot.querySelector(`ixfx-menu-trigger`);
+		if (!menuTrigger) return;
+		if (ulElement.getBoundingClientRect().width > hsiElement.getBoundingClientRect().width) menuTrigger.style.display = `inline-flex`;
+		else menuTrigger.style.display = `none`;
+		for (const li of ulElement.querySelectorAll(`li`)) if ((li.getAttribute(`data-key`) ?? ``) === this.#previousSelectionKey) {
+			this.#scrollToValue(li);
+			break;
+		}
+	}
+	#scrollToValue(li) {
+		let l = li.offsetLeft;
+		const ul = li.parentElement;
+		if (!ul) return;
+		l -= ul.offsetLeft;
+		const horizSelectItems = ul.parentElement;
+		if (!horizSelectItems) return;
+		horizSelectItems.scroll({
+			left: l,
+			top: 0,
+			behavior: `smooth`
+		});
+		const horizSelect = horizSelectItems.parentElement;
+		if (!horizSelect) return;
+		horizSelect.style.minWidth = `${li.getBoundingClientRect().width}px`;
+	}
+	#abortPending() {
+		if (this.#pendingController) {
+			this.#pendingController.abort();
+			this.#pendingController = void 0;
+			this.#pendingNode = void 0;
+		}
+	}
+	#findPath(node, target, acc = []) {
+		const path = [...acc, node];
+		if (node === target) return path;
+		if (!node.children) return void 0;
+		for (const child of node.children) {
+			const result = this.#findPath(child, target, path);
+			if (result) return result;
+		}
+	}
+	#scrollSegmentIntoView(depth) {
+		if (!this.shadowRoot) return;
+		this.shadowRoot.querySelectorAll(`.crumb-segment`)[depth]?.scrollIntoView({
+			block: `nearest`,
+			inline: `start`
+		});
+	}
+	#setSelected(node) {
+		const previous = this.selectedNode;
+		if (previous) this.#previousSelectionKey = previous.item?.key ?? ``;
+		else this.#previousSelectionKey = ``;
+		const previousSet = previous ? /* @__PURE__ */ new Set([previous]) : /* @__PURE__ */ new Set();
+		this.selectedNode = node;
+		this._selectedNodes = /* @__PURE__ */ new Set([node]);
+		if (this.leadingCaret && this.root) {
+			const path = this.#findPath(this.root, node);
+			if (path) {
+				const depth = this.hideRoot && path.length > 1 ? path.length - 2 : path.length - 1;
+				requestAnimationFrame(() => {
+					this.#scrollSegmentIntoView(depth);
+				});
+			}
+		}
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: /* @__PURE__ */ new Set([node]),
+				previous: previousSet
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onLabelClick(node, depth) {
+		this._openIdx = -1;
+		this.#setSelected(node);
+		if (this.leadingCaret) this.#scrollSegmentIntoView(depth);
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onCaretClick(node, depth, e) {
+		e.preventDefault();
+		e.stopPropagation();
+		if (this._openIdx === depth) {
+			this._openIdx = -1;
+			return;
+		}
+		this._openIdx = depth;
+		if (node.children === void 0 && this.#pendingNode !== node) {
+			this.#abortPending();
+			this.#pendingNode = node;
+			const controller = new AbortController();
+			this.#pendingController = controller;
+			if (this.loadChildren) this.#invokeLoadChildren(node, depth, controller).catch(() => {});
+		}
+		this.requestUpdate();
+	}
+	async #invokeLoadChildren(node, depth, controller) {
+		try {
+			const children = [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = children;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this.dispatchEvent(new CustomEvent(`expand`, {
+				detail: {
+					node,
+					depth
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.requestUpdate();
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this.requestUpdate();
+		}
+	}
+	#onSegmentMenuCommand(e, node, depth) {
+		const key = e.detail.command;
+		if (this.leadingCaret) {
+			const child = node.children?.find((c) => c.item.key === key);
+			if (child) {
+				this.#onChildClick(child, depth + 1);
+				return;
+			}
+			if (this.#currentLeadingSiblings) {
+				const sibling = this.#currentLeadingSiblings.find((c) => c.item.key === key);
+				if (sibling) this.#onChildClick(sibling, depth);
+				this.#currentLeadingSiblings = void 0;
+				return;
+			}
+		}
+		const child = node.children?.find((c) => c.item.key === key);
+		if (child) this.#onChildClick(child, depth + 1);
+	}
+	#currentLeadingSiblings;
+	#getSiblingMenuItems(pathNodes, index) {
+		if (index === 0) {
+			if (!this.hideRoot || !this.root) return [];
+			const siblings = [...this.root.children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+			this.#currentLeadingSiblings = siblings;
+			return siblings.map((sibling) => html`
+        <ixfx-menu-item
+          label="${sibling.item.label}"
+          command="${sibling.item.key}"
+          icon-name="${sibling.item.icon ?? nothing}"
+          @click=${() => {
+				this.#onChildClick(sibling, index);
+			}}
+        ></ixfx-menu-item>
+      `);
+		}
+		const siblings = [...pathNodes[index - 1].children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+		this.#currentLeadingSiblings = siblings;
+		return siblings.map((sibling) => html`
+      <ixfx-menu-item
+        label="${sibling.item.label}"
+        command="${sibling.item.key}"
+        icon-name="${sibling.item.icon ?? nothing}"
+        @click=${() => {
+			this.#onChildClick(sibling, index);
+		}}
+      ></ixfx-menu-item>
+    `);
+	}
+	#onChildClick(node, depth) {
+		this._openIdx = -1;
+		this.#setSelected(node);
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */
+	navigateTo(keys) {
+		if (!this.root?.children) return false;
+		let current = this.root;
+		for (const key of keys) {
+			const found = current?.children?.find((n) => n.item.key === key);
+			if (!found) return false;
+			current = found;
+		}
+		if (current && current !== this.root) this.#setSelected(current);
+		return true;
+	}
+	/** Navigate to the first node matching the predicate. Returns false if not found. */
+	navigateToNode(predicate) {
+		if (!this.root) return false;
+		const keyPath = this.#findNodePath(this.root.children ?? [], predicate);
+		if (!keyPath) return false;
+		return this.navigateTo(keyPath);
+	}
+	#findNodePath(nodes, predicate, prefix = []) {
+		for (const node of nodes) {
+			const path = [...prefix, node.item.key];
+			if (predicate(node)) return path;
+			if (node.children?.length) {
+				const result = this.#findNodePath(node.children, predicate, path);
+				if (result) return result;
+			}
+		}
+	}
+	#onMenuCommand(e) {
+		const node = this.selectedNode;
+		if (!node?.children) return;
+		const key = e.detail.command;
+		const child = node.children.find((c) => c.item.key === key);
+		if (child) {
+			const depth = this.root ? this.#findPath(this.root, node)?.length ?? 1 : 1;
+			this.#onChildClick(child, depth);
+		}
+	}
+	render() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return html``;
+		this.inputMode = this.tickled.inputMode;
+		let pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.hideRoot && pathNodes.length > 1) pathNodes = pathNodes.slice(1);
+		this.#hasChildOptions();
+		const parts = [];
+		let segmentId = 0;
+		pathNodes.forEach((node, i) => {
+			const isLast = i === pathNodes.length - 1;
+			const isPending = this.#pendingNode === node;
+			const isOpen = this._openIdx === i;
+			const hasChildren = node.item.isLeaf !== true && (node.children === void 0 || node.children.length > 0);
+			const isTickled = this.tickled.isTickled(i);
+			const showLeadingCaret = this.leadingCaret && (i > 0 || this.hideRoot) && hasChildren;
+			const showTrailingCaret = !this.leadingCaret && hasChildren || this.leadingCaret && isLast && hasChildren;
+			const siblingMenuItems = showLeadingCaret ? this.#getSiblingMenuItems(pathNodes, i) : [];
+			const childMenuItems = (node.children ?? []).map((c) => html`
+        <ixfx-menu-item
+          label="${c.item.label}"
+          command="${c.item.key}"
+          icon-name="${c.item.icon ?? nothing}"
+        ></ixfx-menu-item>
+      `);
+			if (this.caretEmbedded) {
+				const canTruncate = !this.noTruncate && !isLast && !isTickled;
+				parts.push(html`
+          <div class="item crumb-segment ${isTickled ? `tickled` : ``} ${canTruncate ? `truncatable` : ``} ${this.leadingCaret ? `leading-caret` : ``} ${isLast ? `last-label` : ``}" data-segment-id="${i}" data-path-index="${i}"
+            @click=${(e) => {
+					if (e.target.closest(`.caret`)) return;
+					this.#onLabelClick(node, i);
+				}}
+          >
+            ${showLeadingCaret ? html`
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? html`<span class="loading-spinner"></span>` : html`
+                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${siblingMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+              ` : nothing}
+            <span class="label">${node.item.label}</span>
+            ${showTrailingCaret ? html`
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? html`<span class="loading-spinner"></span>` : html`
+                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${childMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+              ` : nothing}
+          </div>
+        `);
+			} else {
+				const leadingCaretTickled = showLeadingCaret ? this.tickled.isTickled(segmentId) : false;
+				if (showLeadingCaret) {
+					parts.push(html`
+            <div class="item crumb-segment ${leadingCaretTickled ? `tickled` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+              @click=${(e) => {
+						const trigger = e.target.closest(`.crumb-segment`)?.querySelector(`ixfx-menu-trigger`);
+						if (trigger) trigger.openMenu();
+					}}
+            >
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? html`<span class="loading-spinner"></span>` : html`
+                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${siblingMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+            </div>
+          `);
+					segmentId++;
+				}
+				const labelTickled = this.tickled.isTickled(segmentId);
+				const canTruncate = !this.noTruncate && !isLast && !labelTickled;
+				parts.push(html`
+          <div class="item crumb-segment ${labelTickled ? `tickled` : ``} ${canTruncate ? `truncatable` : ``} ${isLast ? `last-label` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+            @click=${(e) => {
+					if (e.target.closest(`.caret`)) return;
+					this.#onLabelClick(node, i);
+				}}
+          >
+            <span class="label">${node.item.label}</span>
+          </div>
+        `);
+				segmentId++;
+				if (showTrailingCaret) {
+					const trailingCaretTickled = this.tickled.isTickled(segmentId);
+					parts.push(html`
+            <div class="item crumb-segment ${trailingCaretTickled ? `tickled` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+              @click=${(e) => {
+						const trigger = e.target.closest(`.crumb-segment`)?.querySelector(`ixfx-menu-trigger`);
+						if (trigger) trigger.openMenu();
+					}}
+            >
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? html`<span class="loading-spinner"></span>` : html`
+                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${childMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+            </div>
+          `);
+					segmentId++;
+				}
+			}
+		});
+		return html`
+      <div
+        class="host-container scroll-fade-x"
+        tabindex="0"
+        @focus=${this.#onFocus}
+        @blur=${this.#onBlur}
+        @keydown=${this.#onKeyDown}
+        @click=${this.#onHostClick}
+        @menu-trigger-close=${this.#onMenuTriggerClose}
+        @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
+      >
+        <div class="parts"
+          @mouseover=${(e) => {
+			if (this.#isWheelScrolling) return;
+			const target = e.target;
+			if (!(target instanceof HTMLElement)) return;
+			const segment = target.closest(`.crumb-segment`);
+			if (!segment) return;
+			const segmentId = parseInt(segment.dataset.segmentId ?? ``, 10);
+			if (Number.isNaN(segmentId)) return;
+			const pathIndex = parseInt(segment.dataset.pathIndex ?? ``, 10);
+			const node = pathNodes[pathIndex];
+			if (!node) return;
+			this.tickled.handlePointerEnter(segmentId);
+			this.dispatchEvent(new CustomEvent(`tickle`, {
+				detail: {
+					node,
+					depth: pathIndex
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}}
+        >${parts}<div class="trailing"></div></div>
+        ${this.showSuggestions ? this.#renderChildOptions() : nothing}
+      </div>
+    `;
+	}
+	#renderChildOptions() {
+		const s = this.selectedNode;
+		if (s === void 0) return nothing;
+		const isPending = this.#pendingNode === s;
+		const children = s.children ?? [];
+		if (children.length === 0 && !isPending) return nothing;
+		if (isPending) return html`
+        <div class="horiz-select">
+          <div class="horiz-select-items">
+            <span class="loading-spinner"></span>
+          </div>
+        </div>
+      `;
+		return html`
+      <ixfx-narrowed-text
+        class="horiz-select"
+        selection-mode="single"
+        orientation="horizontal"
+        nowrap
+        width=${this.#getChildOptionsWidth()}
+        @change=${this.#onNarrowedTextChange}
+        @narrowed-text-blur=${this.#onNarrowedTextBlur}
+        @narrowed-text-shift-tab=${this.#onNarrowedTextShiftTab}
+      >
+        ${children.map((c) => html`
+          <span data-value="${c.item.key}" data-label="${c.item.label}"></span>
+        `)}
+      </ixfx-narrowed-text>
+    `;
+	}
+	#onNarrowedTextChange(e) {
+		e.stopPropagation();
+		const detail = e.detail;
+		const node = this.selectedNode;
+		if (!node?.children) return;
+		const child = node.children.find((c) => c.item.key === detail.item.value);
+		if (child) {
+			const depth = this.root ? this.#findPath(this.root, node)?.length ?? 1 : 1;
+			this.#onChildClick(child, depth);
+		}
+	}
+	#getChildOptionsWidth() {
+		return `var(--child-options-width, 50ch)`;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			css`
+    :host {
+      --crumb-item-bg: var(--item-bg, transparent);
+      --crumb-item-bg-tickled: var(--item-bg-tickled);
+      --crumb-item-text-tickled: var(--item-text-tickled);
+      --crumb-item-border: var(--item-border);
+      --crumb-item-border-tickled: var(--item-border-tickled);
+      --crumb-item-padding: var(--item-padding, var(--space-xs));
+      --crumb-item-border-radius: var(--item-border-radius);
+      --crumb-item-gap: var(--item-gap, var(--space-xs));
+      --crumb-separator: var(--surface-muted-text);
+      --crumb-truncate-min-width: 10ch;
+      display: flex;
+      width: 100%;
+    }
+
+    :host(.focused) {
+      outline: none;
+    }
+
+    :host(:focus-within) .host-container {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    /* Edge fade (shows/hides based on scroll position) comes from the
+     * shared .scroll-fade-x class - see ../styles/scroll-fade.ts */
+    .host-container {
+      display: flex;
+      width: 100%;
+      outline: none;
+      overflow: scroll;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+    }
+
+    .parts {
+      display: flex;
+      gap: var(--space-s);
+    }
+
+    .trailing {
+      flex: 1;
+      min-width: 1em;
+      cursor: pointer;
+    }
+
+    .crumb-segment {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      background: var(--crumb-item-bg);
+      border: var(--crumb-item-border);
+      border-radius: var(--crumb-item-border-radius);
+    }
+
+    .crumb-segment.leading-caret {
+      flex-direction: row;
+    }
+
+    .crumb-segment.tickled {
+      background: var(--crumb-item-bg-tickled);
+      border-color: var(--crumb-item-border-tickled);
+      color: var(--crumb-item-text-tickled);
+      flex-shrink: 0;
+      min-width: auto;
+    }
+
+    .crumb-segment.truncatable {
+      flex-shrink: 1;
+      min-width: min(var(--crumb-truncate-min-width), auto);
+      overflow: hidden;
+    }
+
+    .crumb-segment.truncatable .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .label {
+      cursor: pointer;
+      white-space: nowrap;
+      color: inherit;
+    }
+
+    .crumb-segment.last-label .label {
+      color: var(--crumb-last-label-color, inherit);
+      font-style: var(--crumb-last-label-font-style, inherit);
+      font-weight: var(--crumb-last-label-font-weight, inherit);
+      text-decoration: var(--crumb-last-label-text-decoration, inherit);
+      text-underline-offset: var(--crumb-last-label-text-underline-offset, auto);
+    }
+
+    .crumb-segment.tickled .label {
+      color: var(--crumb-item-text-tickled);
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .crumb-segment ixfx-menu-trigger {
+      --ixfx-button-padding: var(--space-xs) 8px;
+    }
+
+    .caret {
+      position: relative;
+      cursor: pointer;
+      padding: var(--crumb-item-padding);
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
+      color: var(--crumb-separator);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .caret.open {
+      background: color-mix(in srgb, var(--surface-5) 40%, transparent);
+    }
+
+    .caret.pending {
+      display: inline-flex;
+    }
+
+    .caret > ixfx-menu-trigger {
+      display: inline-flex;
+      margin: 0;
+      --_trigger-hover-bg: transparent;
+      --_trigger-hover-opacity: 0.6;
+    }
+
+    .caret > ixfx-menu-trigger::part(base) {
+      background: none;
+      border: none;
+      color: inherit;
+      padding: 0;
+      cursor: pointer;
+      font-size: inherit;
+      line-height: 1;
+    }
+
+    .caret > ixfx-menu-trigger::part(base):hover {
+      background: none;
+      opacity: 0.6;
+    }
+
+    .separator {
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
+      color: var(--crumb-separator);
+    }
+
+    .separator-trigger {
+      display: inline-flex;
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
+      --_trigger-hover-bg: transparent;
+      --_trigger-hover-opacity: 0.6;
+    }
+
+    .separator-trigger::part(base) {
+      background: none;
+      border: none;
+      color: var(--crumb-separator);
+      padding: 0;
+      cursor: pointer;
+      font-size: inherit;
+      line-height: 1;
+    }
+
+    .separator-trigger::part(base):hover {
+      background: none;
+      opacity: 0.6;
+    }
+
+    .separator-trigger.tickled::part(base) {
+    }
+
+    ixfx-menu-trigger {
+      display: none;
+    }
+
+    .horiz-select > ixfx-menu-trigger {
+      display: inline-flex;
+    }
+
+    .horiz-select {
+      display: flex;
+      min-width: 5ch;
+    }
+
+    .loading-spinner {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: crumb-spin 0.7s linear infinite;
+    }
+
+    @keyframes crumb-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    ::slotted(*), option {
+      user-select: none;
+      scroll-snap-align: start;
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: Object })], CrumbNavigationElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], CrumbNavigationElement.prototype, "model", void 0);
+__decorate([property({ type: Object })], CrumbNavigationElement.prototype, "selectedNode", void 0);
+__decorate([state()], CrumbNavigationElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], CrumbNavigationElement.prototype, "loadChildren", void 0);
+__decorate([property({ attribute: false })], CrumbNavigationElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], CrumbNavigationElement.prototype, "exclusivity", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `selection-filter`
+})], CrumbNavigationElement.prototype, "selectionFilter", void 0);
+__decorate([state()], CrumbNavigationElement.prototype, "_openIdx", void 0);
+__decorate([state()], CrumbNavigationElement.prototype, "_isFocused", void 0);
+__decorate([state()], CrumbNavigationElement.prototype, "_menuOpen", void 0);
+__decorate([state()], CrumbNavigationElement.prototype, "_focusOnNarrowedText", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `input-mode`
+})], CrumbNavigationElement.prototype, "inputMode", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `no-truncate`
+})], CrumbNavigationElement.prototype, "noTruncate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-suggestions`
+})], CrumbNavigationElement.prototype, "showSuggestions", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `leading-caret`
+})], CrumbNavigationElement.prototype, "leadingCaret", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `caret-embedded`
+})], CrumbNavigationElement.prototype, "caretEmbedded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `hide-root`
+})], CrumbNavigationElement.prototype, "hideRoot", void 0);
+CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+//#endregion
+export { scrollFadeStyles as n, CrumbNavigationElement as t };
+
+//# sourceMappingURL=crumb-navigation-DFqTzElw.js.map