@ixfx/components 0.5.19 → 0.6.0

package/dist/crumb-navigation-BrB0r14u.js

@@ -1,1220 +0,0 @@
-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-CrmUwIoJ.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.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 { scrollFadeStyles as n, CrumbNavigationElement as t };
-
-//# sourceMappingURL=crumb-navigation-BrB0r14u.js.map