@ixfx/components 0.2.4 → 0.2.6

package/dist/crumbs/crumb-navigation.js

@@ -1,911 +0,0 @@
-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