@ixfx/components 0.5.15 → 0.5.17

package/dist/crumbs.js

@@ -1,823 +1,3 @@
-import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
-import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-D6efrBLo.js";
-import "./menu-item-BBTZnjAR.js";
-import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { t as CrumbNavigationElement } from "./crumb-navigation-DFqTzElw.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.#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();
-				}
-			}
-		};
-		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;
-		if (this.tickled.inputMode === `keyboard`) this.#scrollTickledIntoView(index);
-	}
-	#scrollTickledIntoView(index) {
-		const r = this.root;
-		const sel = this.selectedNode;
-		if (!r || !sel) return;
-		const pathNodes = this.#findPath(r, sel) ?? [r];
-		let el = null;
-		if (index < pathNodes.length) el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
-		else if (index === pathNodes.length) el = this.shadowRoot?.querySelector(`#child-options-trigger`) ?? null;
-		el?.scrollIntoView({
-			inline: `nearest`,
-			block: `nearest`,
-			behavior: `smooth`
-		});
-	}
-	#hasChildOptions() {
-		const s = this.selectedNode;
-		if (s === void 0) return false;
-		const isPending = this.#pendingNode === s;
-		return (s.children ?? []).length > 0 || isPending;
-	}
-	#onFocus;
-	#onBlur;
-	#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);
-	}
-	/** 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);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener(`click`, this.#onHostClick);
-		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 ? /* @__PURE__ */ new Set([previous]) : /* @__PURE__ */ new Set();
-		this.selectedNode = node;
-		this._selectedNodes = /* @__PURE__ */ new Set([node]);
-		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.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;
-		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 class="trailing"></div></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) {
-		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,
-			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(:focus-within) .host-container {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
-
-    .host-container {
-      display: flex;
-      width: 100%;
-      outline: none;
-    }
-
-    .parts {
-      display: flex;
-    }
-
-    .trailing {
-      flex: 1;
-      min-width: 1em;
-      cursor: pointer;
-    }
-
-    .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([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
-//#endregion
 export { CrumbNavigationElement };
-
-//# sourceMappingURL=crumbs.js.map