@ixfx/components 0.5.19 → 0.6.0

package/dist/crumbs.js

@@ -1,3 +1,1154 @@
-import { t as CrumbNavigationElement } from "./crumb-navigation-BrB0r14u.js";
+import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import "./narrowed-text.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#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.padEnding = false;
+		this.withUp = 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.#getTickledItems().length;
+					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.#getTickledItems().length;
+			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.#canFocusSuggestions()) 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`:
+				case ` `:
+					e.preventDefault();
+					this.#activateTickled();
+					break;
+				case `Escape`:
+					e.preventDefault();
+					this._menuOpen = false;
+					this.tickled.clearTickled();
+					this.blur();
+					break;
+				case `Tab`:
+					if (e.shiftKey) break;
+					if (currentTickled === totalItems - 1 && this.#canFocusSuggestions()) {
+						e.preventDefault();
+						this.#shiftFocusToNarrowedText();
+					}
+			}
+		};
+		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.#canFocusSuggestions()) 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 (this.caretEmbedded && this.#canFocusSuggestions() && index === pathNodes.length) el = this.shadowRoot?.querySelector(`ixfx-narrowed-text`) ?? null;
+		else el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? 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;
+	}
+	/** True when the suggestions (narrowed-text) sub-part is renderable and focusable. */
+	#canFocusSuggestions() {
+		return this.showSuggestions && this.#hasChildOptions();
+	}
+	#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;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
+		}
+		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();
+		}
+	}
+	#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;
+	/** Activates the currently tickled item, as if it had been clicked. */
+	#activateTickled() {
+		const currentTickled = this.tickled.tickledId;
+		if (currentTickled === void 0) return;
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
+		}
+		(this.shadowRoot?.querySelector(`.crumb-segment[data-segment-id="${currentTickled}"]`))?.click();
+	}
+	#shiftFocusToNarrowedText() {
+		const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
+		if (narrowedText) {
+			this._menuOpen = false;
+			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`
+		});
+	}
+	#updateTrailingWidth() {
+		if (!this.padEnding || !this.shadowRoot) return;
+		const hostContainer = this.shadowRoot.querySelector(`.host-container`);
+		const trailing = this.shadowRoot.querySelector(`.trailing`);
+		if (!hostContainer || !trailing) return;
+		const segments = this.shadowRoot.querySelectorAll(`.crumb-segment`);
+		const lastSegment = segments[segments.length - 1];
+		if (!lastSegment) return;
+		const containerWidth = hostContainer.getBoundingClientRect().width;
+		const itemWidth = lastSegment.getBoundingClientRect().width;
+		if (itemWidth < containerWidth) {
+			trailing.style.width = `${containerWidth - itemWidth - 5}px`;
+			requestAnimationFrame(() => {
+				if (hostContainer.scrollWidth <= hostContainer.clientWidth) hostContainer.style.setProperty(`--scroll-fade-x-start`, `0px`, `important`);
+				else hostContainer.style.removeProperty(`--scroll-fade-x-start`);
+			});
+		} else trailing.style.width = ``;
+	}
+	#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.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.#updateTrailingWidth();
+					const hostContainer = this.#getHostContainer();
+					if (hostContainer) hostContainer.scrollLeft = 0;
+					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);
+		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
+		}));
+	}
+	#onUpClick() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const path = this.#findPath(r, sel);
+		if (!path || path.length <= 1) return;
+		const parent = path[path.length - 2];
+		this.#setSelected(parent);
+	}
+	/** 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 isAtRoot = (() => {
+			return (this.#findPath(r, sel) ?? [r]).length <= 1;
+		})();
+		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="›" .tabStop=${false} @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="›" .tabStop=${false} 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="›" .tabStop=${false} 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="›" .tabStop=${false} @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="crumb-wrapper">
+        ${this.withUp ? html`
+            <button
+              class="up-button"
+              ?disabled=${isAtRoot}
+              aria-label="Go up one level"
+              @click=${this.#onUpClick}
+            >
+              <ixfx-icon name="folder-up"></ixfx-icon>
+            </button>
+          ` : nothing}
+        <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}${this.padEnding ? html`<div class="trailing"></div>` : nothing}</div>
+          ${this.showSuggestions ? this.#renderChildOptions() : nothing}
+        </div>
+      </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(--space-s, 2px);
+      --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%;
+    }
+
+    /* Outline goes on :host, not .host-container: .host-container carries the
+     * scroll-fade mask-image, and CSS masks clip everything painted outside
+     * the masked box - including an outline, which paints outside the border edge. */
+    :host(:focus-within) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .crumb-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--crumb-item-gap);
+      width: 100%;
+    }
+
+    .up-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      background: var(--crumb-item-bg);
+      border: var(--crumb-item-border);
+      border-radius: var(--crumb-item-border-radius);
+      padding: var(--crumb-item-padding);
+      cursor: pointer;
+      color: inherit;
+    }
+
+    .up-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .up-button:hover:not(:disabled) {
+      background: var(--crumb-item-bg-tickled);
+      border-color: var(--crumb-item-border-tickled);
+    }
+
+    .up-button ixfx-icon {
+      width: 1em;
+      height: 1em;
+      pointer-events: none;
+    }
+
+    /* 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;
+      flex: 1;
+      min-width: 0;
+      outline: none;
+      overflow: scroll;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+      overscroll-behavior: none;
+    }
+
+    .host-container::-webkit-scrollbar {
+      display: none;
+    }
+
+    .parts {
+      display: flex;
+      gap: var(--space-s);
+    }
+
+    .trailing {
+      flex-shrink: 0;
+    }
+
+    .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);
+      padding:0;
+    }
+
+    .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 {
+      padding: var(--crumb-item-padding);
+      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-s, 2px);
+    }
+
+    .caret {
+      position: relative;
+      cursor: pointer;
+      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;
+      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);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `pad-ending`
+})], CrumbNavigationElement.prototype, "padEnding", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `with-up`
+})], CrumbNavigationElement.prototype, "withUp", void 0);
+CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+//#endregion
 export { CrumbNavigationElement };
+
+//# sourceMappingURL=crumbs.js.map