@ixfx/components 0.2.4 → 0.2.5

package/dist/crumbs.js

@@ -0,0 +1,789 @@
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-Bg3QbcrD.js";
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import "./interaction-CQDQJf2Q.js";
+import "./menu-item-DEzL_Yjk.js";
+import "./narrowed-text.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, 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.#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.shadowRoot?.querySelector(`.host-container`)?.focus();
+		};
+		this.#onMenuTriggerClose = () => {
+			document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+			this.#currentOpenTrigger = null;
+			this.#menuOpenedByKeyboard = false;
+			requestAnimationFrame(() => {
+				this.shadowRoot?.querySelector(`.host-container`)?.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();
+					}
+					break;
+			}
+		};
+		this.#onNarrowedTextBlur = () => {
+			this._focusOnNarrowedText = false;
+			this.#shiftFocusToPath();
+		};
+		this.#onNarrowedTextShiftTab = () => {
+			this._focusOnNarrowedText = false;
+			this.#shiftFocusToPath();
+		};
+	}
+	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 = [];
+		pathNodes.forEach((_node, i) => {
+			items.push({
+				id: i,
+				enabled: true
+			});
+		});
+		if (this.#hasChildOptions()) items.push({
+			id: pathNodes.length,
+			enabled: true
+		});
+		return items;
+	}
+	#onTickled(index) {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		const hasChildOptions = this.#hasChildOptions();
+		if (index < pathNodes.length) this._openIdx = index;
+		else if (hasChildOptions && index === pathNodes.length) this._openIdx = pathNodes.length - 1;
+	}
+	#hasChildOptions() {
+		const s = this.selectedNode;
+		if (s === void 0) return false;
+		const isPending = this.#pendingNode === s;
+		return (s.children ?? []).length > 0 || isPending;
+	}
+	#onFocus;
+	#onBlur;
+	#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.shadowRoot?.querySelector(`.host-container`);
+		if (hostContainer) hostContainer.focus();
+	}
+	#onNarrowedTextBlur;
+	#onNarrowedTextShiftTab;
+	select(node) {
+		this.#setSelected(node);
+	}
+	deselect(_node) {}
+	clearSelection() {
+		if (this.root) this.#setSelected(this.root);
+	}
+	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);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+		this.#currentOpenTrigger = null;
+	}
+	#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;
+		}
+	}
+	#setSelected(node) {
+		const previous = this.selectedNode;
+		if (previous) this.#previousSelectionKey = previous.item?.key ?? ``;
+		else this.#previousSelectionKey = ``;
+		const previousSet = previous ? new Set([previous]) : /* @__PURE__ */ new Set();
+		this.selectedNode = node;
+		this._selectedNodes = new Set([node]);
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: new Set([node]),
+				previous: previousSet
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onLabelClick(node, depth) {
+		this._openIdx = -1;
+		this.#setSelected(node);
+		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 result = this.loadChildren(node, depth, controller.signal);
+			const children = result instanceof Promise ? await result : result;
+			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 (err) {
+			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;
+		const child = node.children?.find((c) => c.item.key === key);
+		if (child) this.#onChildClick(child, depth + 1);
+	}
+	#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;
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		this.#hasChildOptions();
+		const parts = pathNodes.map((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 showCaret = !isLast && hasChildren;
+			const isTickled = this.tickled.isTickled(i);
+			const menuItems = (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>
+      `);
+			return html`
+        <div class="item crumb-segment ${isTickled ? `tickled` : ``}"
+          @pointerenter=${() => {
+				this.tickled.handlePointerEnter(i);
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node,
+						depth: i
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}}
+        >
+          <span class="label" @click=${() => this.#onLabelClick(node, i)}>${node.item.label}</span>
+          ${showCaret ? 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">
+                    ${menuItems}
+                  </ixfx-menu-container>
+                </ixfx-menu-trigger>
+                `}
+            </span>
+            ` : nothing}
+        </div>
+      `;
+		});
+		const childOptions = this.#renderChildOptions();
+		const isLastItemTickled = this.tickled.isTickled(pathNodes.length);
+		return html`
+      <div
+        class="host-container"
+        tabindex="0"
+        @focus=${this.#onFocus}
+        @blur=${this.#onBlur}
+        @keydown=${this.#onKeyDown}
+        @click=${this.#onHostClick}
+        @menu-trigger-close=${this.#onMenuTriggerClose}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+      >
+        <div class="parts">${parts}</div>
+        ${childOptions ? html`
+          <ixfx-menu-trigger
+            id="child-options-trigger"
+            class="item separator-trigger ${isLastItemTickled ? `tickled` : ``}"
+            mode="trigger"
+            label="›"
+            @menu-command=${this.#onMenuCommand}
+            @pointerenter=${() => this.tickled.handlePointerEnter(pathNodes.length)}
+          >
+            <ixfx-menu-container slot="menu">
+              ${(this.selectedNode?.children ?? []).map((c) => html`
+                <ixfx-menu-item 
+                  label="${c.item.label}" 
+                  command="${c.item.key}"
+                  icon-name="${c.item.icon ?? nothing}"
+                ></ixfx-menu-item>
+              `)}
+            </ixfx-menu-container>
+          </ixfx-menu-trigger>
+        ` : nothing}
+        ${childOptions}
+      </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) {
+		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 = [
+			tickledStyles,
+			tickledItemStyles,
+			css`
+    :host {
+      --text-highlight: var(--accent);
+      --separator: var(--surface-muted-text);
+      --padding-s: var(--space-xs);
+      display: flex;
+      overflow: scroll;
+      width: 100%;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+
+      /* Breadcrumb tickled overrides — no layout shift: keep transparent border at rest */
+      --item-padding: 0;
+    }
+
+    :host(.focused) {
+      outline: none;
+    }
+
+    :host([input-mode="keyboard"]) .host-container {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .host-container {
+      display: flex;
+      width: 100%;
+      outline: none;
+    }
+
+    .parts {
+      display: flex;
+    }
+
+    .crumb-segment {
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      cursor: pointer;
+      margin-right: var(--padding-s);
+      white-space: nowrap;
+    }
+
+    .caret {
+      position: relative;
+      cursor: pointer;
+      padding: var(--padding-m);
+      margin-left: var(--padding-s);
+      margin-right: var(--padding-s);
+      color: var(--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(--padding-s);
+      margin-right: var(--padding-s);
+      color: var(--separator);
+    }
+
+    .separator-trigger {
+      display: inline-flex;
+      margin-left: var(--padding-s);
+      margin-right: var(--padding-s);
+      --_trigger-hover-bg: transparent;
+      --_trigger-hover-opacity: 0.6;
+    }
+
+    .separator-trigger::part(base) {
+      background: none;
+      border: none;
+      color: var(--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);
+CrumbNavigationElement = __decorate([customElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+//#endregion
+export { CrumbNavigationElement };
+
+//# sourceMappingURL=crumbs.js.map