@ixfx/components 0.2.3 → 0.2.4

package/dist/crumbs/crumb-navigation.js

@@ -0,0 +1,911 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { TreeDataModel } from '../common/tree-data-model.js';
+import { TickledController, tickledStyles, tickledItemStyles } from '../interaction/index.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '../menu/menu-trigger.js';
+import '../menu/menu-container.js';
+import '../menu/menu-item.js';
+import '../narrowed-text/index.js';
+/**
+ * Breadcrumb navigation with lazy-loading support.
+ *
+ * Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`,
+ * so the two components can be swapped with minimal code changes.
+ *
+ * Events
+ * - `navigate`: fired when user clicks a breadcrumb label. detail: `{ node: TreeNode }`
+ * - `change`: fired when selected node changes. detail: `{ selected: TreeNode, previous: TreeNode | undefined }`
+ * - `expand`: fired when user clicks a caret whose node has no children yet.
+ *             detail: `{ node: TreeNode, depth: number, signal: AbortSignal }`
+ *             Populate `node.children` then call `requestUpdate()` on the element.
+ *
+ * CSS variables
+ * --text-highlight: var(--accent); // highlight on mouse hover
+ * --separator: var(--surface-muted-text);   // text colour of separator character
+ * --padding-s: var(--space-xs);   // padding between items
+ */
+let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._selectedNodes = 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 !== undefined) {
+                    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) => {
+            // Only handle ArrowLeft/ArrowRight - close menu and navigate to previous/next breadcrumb segment
+            // ArrowDown/ArrowUp should pass through to let the menu handle them
+            const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);
+            if (!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 pathNodes = this.#findPath(r, sel) ?? [r];
+                    const totalItems = pathNodes.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 pathNodes = this.#findPath(r, sel) ?? [r];
+            const totalItems = pathNodes.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 !== undefined) {
+                        e.preventDefault();
+                        if (this.#currentOpenTrigger?.isOpen) {
+                            // Menu is already open - dispatch ArrowDown to the popover element for it to handle
+                            const container = this.#currentOpenTrigger.querySelector(`ixfx-menu-container`);
+                            const popover = 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 === undefined)
+            return false;
+        const isPending = this.#pendingNode === s;
+        const children = s.children ?? [];
+        return children.length > 0 || isPending;
+    }
+    #onFocus;
+    #onBlur;
+    #onHostClick;
+    #handleOpenCaretMenu() {
+        const currentTickled = this.tickled.tickledId;
+        if (currentTickled === undefined)
+            return;
+        const r = this.root;
+        const sel = this.selectedNode;
+        if (!r || !sel)
+            return;
+        const pathNodes = this.#findPath(r, sel) ?? [r];
+        // For non-last segments: open the inline caret menu for that segment
+        if (currentTickled < pathNodes.length - 1) {
+            const segments = this.shadowRoot?.querySelectorAll(`.crumb-segment`);
+            const trigger = segments?.[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;
+            }
+        }
+        // Last segment or the child-options separator: open the child-options menu
+        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;
+    // --- TreeComponent methods ---
+    select(node) {
+        this.#setSelected(node);
+    }
+    deselect(_node) {
+        // Crumb navigation is single-selection; deselect navigates to parent or root
+    }
+    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;
+    }
+    // --- Lifecycle ---
+    updated(changedProps) {
+        if (changedProps.has(`model`)) {
+            this.#modelUnsubscribe?.();
+            this.#modelUnsubscribe = undefined;
+            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 = undefined;
+        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`)) {
+            const key = li.getAttribute(`data-key`) ?? ``;
+            if (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 = undefined;
+            this.#pendingNode = undefined;
+        }
+    }
+    #findPath(node, target, acc = []) {
+        const path = [...acc, node];
+        if (node === target)
+            return path;
+        if (!node.children)
+            return undefined;
+        for (const child of node.children) {
+            const result = this.#findPath(child, target, path);
+            if (result)
+                return result;
+        }
+        return undefined;
+    }
+    #setSelected(node) {
+        const previous = this.selectedNode;
+        if (previous) {
+            this.#previousSelectionKey = previous.item?.key ?? ``;
+        }
+        else {
+            this.#previousSelectionKey = ``;
+        }
+        const previousSet = previous ? new Set([previous]) : 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 === undefined && 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 = undefined;
+            this.#pendingController = undefined;
+            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 = undefined;
+            this.#pendingController = undefined;
+            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;
+            }
+        }
+        return undefined;
+    }
+    #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];
+        const hasChildOptions = 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 === undefined || 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 === undefined) {
+            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);
+export { CrumbNavigationElement };
+//# sourceMappingURL=crumb-navigation.js.map