@ixfx/components 0.2.3 → 0.2.5

package/dist/crumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"crumbs.js","names":["#getTickledItems","#onTickled","#onMenuKeyNav","#currentOpenTrigger","#menuOpenedByKeyboard","#findPath","#hasChildOptions","#shiftFocusToNarrowedText","#handleOpenCaretMenu","#handleEnter","#shiftFocusToPath","#pendingNode","#propagateInputModeToMenu","#setSelected","#modelUnsubscribe","#runLayoutUpdate","#previousSelectionKey","#scrollToValue","#pendingController","#abortPending","#invokeLoadChildren","#onChildClick","#findNodePath","#onLabelClick","#onSegmentMenuCommand","#renderChildOptions","#onFocus","#onBlur","#onKeyDown","#onHostClick","#onMenuTriggerClose","#onMenuCommand","#getChildOptionsWidth","#onNarrowedTextChange","#onNarrowedTextBlur","#onNarrowedTextShiftTab"],"sources":["../src/crumbs/crumb-navigation.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { LoadChildrenCallback, TreeNode } from '../tree/types.js';\nimport type {\n  TreeComponent,\n  TreeSelectDetail,\n  TreeTickleDetail,\n} from '../common/tree-component.js';\nimport type {\n  TreeExclusivity,\n  TreeFilterPredicate,\n  TreeSelectionFilter,\n} from '../common/types.js';\nimport { TreeDataModel } from '../common/tree-data-model.js';\nimport { TickledController, tickledStyles, tickledItemStyles } from '../interaction/index.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport type { MenuTrigger } from '../menu/menu-trigger.js';\nimport '../menu/menu-trigger.js';\nimport '../menu/menu-container.js';\nimport '../menu/menu-item.js';\nimport '../narrowed-text/index.js';\n\n/** @deprecated Use TreeSelectDetail from src/common/tree-component.ts */\nexport type CrumbNavigationChangeDetail = {\n  readonly selected: TreeNode;\n  readonly previous: TreeNode | undefined;\n};\n\nexport type CrumbNavigationChangeEvent = CustomEvent<CrumbNavigationChangeDetail>;\n\nexport type CrumbNavigationItemClickDetail = { node: TreeNode; depth: number };\nexport type CrumbNavigationItemClickEvent = CustomEvent<CrumbNavigationItemClickDetail>;\n\nexport type CrumbNavigationExpandDetail = { node: TreeNode; depth: number };\nexport type CrumbNavigationExpandEvent = CustomEvent<CrumbNavigationExpandDetail>;\n\n/**\n * Breadcrumb navigation with lazy-loading support.\n *\n * Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`,\n * so the two components can be swapped with minimal code changes.\n *\n * Events\n * - `navigate`: fired when user clicks a breadcrumb label. detail: `{ node: TreeNode }`\n * - `change`: fired when selected node changes. detail: `{ selected: TreeNode, previous: TreeNode | undefined }`\n * - `expand`: fired when user clicks a caret whose node has no children yet.\n *             detail: `{ node: TreeNode, depth: number, signal: AbortSignal }`\n *             Populate `node.children` then call `requestUpdate()` on the element.\n *\n * CSS variables\n * --text-highlight: var(--accent); // highlight on mouse hover\n * --separator: var(--surface-muted-text);   // text colour of separator character\n * --padding-s: var(--space-xs);   // padding between items\n */\n@customElement(`ixfx-crumb-navigation`)\nexport class CrumbNavigationElement extends LitElement implements TreeComponent {\n  @property({ type: Object })\n  root: TreeNode | undefined;\n\n  @property({ attribute: false })\n  model: TreeDataModel | undefined;\n\n  @property({ type: Object })\n  selectedNode: TreeNode | undefined;\n\n  @state()\n  private _selectedNodes = new Set<TreeNode>();\n\n  get selectedNodes(): ReadonlySet<TreeNode> {\n    return this._selectedNodes;\n  }\n\n  /** Callback to lazily load children for a node. When set, replaces event-based lazy loading. */\n  @property({ attribute: false })\n  loadChildren: LoadChildrenCallback | undefined;\n\n  @property({ attribute: false })\n  filterPredicate: TreeFilterPredicate | undefined;\n\n  @property({ reflect: true, attribute: 'exclusivity' })\n  exclusivity: TreeExclusivity = 'none';\n\n  @property({ reflect: true, attribute: 'selection-filter' })\n  selectionFilter: TreeSelectionFilter = 'leaf';\n\n  @state()\n  private _openIdx = -1;\n\n  @state()\n  private _isFocused = false;\n\n  @state()\n  private _menuOpen = false;\n\n  @state()\n  private _focusOnNarrowedText = false;\n\n  @property({ reflect: true, attribute: 'input-mode' })\n  inputMode: string = '';\n\n  #pendingNode: TreeNode | undefined;\n  #pendingController: AbortController | undefined;\n  #modelUnsubscribe: (() => void) | undefined;\n\n  #previousSelectionKey = ``;\n  #menuOpenedByKeyboard = false;\n  #currentOpenTrigger: MenuTrigger | null = null;\n\n  private tickled = new TickledController<number>(this, {\n    getItems: () => this.#getTickledItems(),\n    onTickle: (index) => {\n      if (index !== undefined) {\n        this.#onTickled(index);\n      }\n    },\n  });\n\n  #getTickledItems() {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return [];\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const items: Array<{ id: number; enabled: boolean }> = [];\n\n    pathNodes.forEach((_node, i) => {\n      items.push({ id: i, enabled: true });\n    });\n\n    if (this.#hasChildOptions()) {\n      items.push({ id: pathNodes.length, enabled: true });\n    }\n\n    return items;\n  }\n\n  #onTickled(index: number) {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n\n    if (index < pathNodes.length) {\n      this._openIdx = index;\n    } else if (hasChildOptions && index === pathNodes.length) {\n      this._openIdx = pathNodes.length - 1;\n    }\n  }\n\n  #hasChildOptions(): boolean {\n    const s = this.selectedNode;\n    if (s === undefined) return false;\n\n    const isPending = this.#pendingNode === s;\n    const children = s.children ?? [];\n\n    return children.length > 0 || isPending;\n  }\n\n  #onFocus = (): void => {\n    this._isFocused = true;\n  };\n\n  #onBlur = (): void => {\n    this._isFocused = false;\n  };\n\n  #onHostClick = (): void => {\n    this.shadowRoot?.querySelector<HTMLElement>(`.host-container`)?.focus();\n  };\n\n  #handleOpenCaretMenu() {\n    const currentTickled = this.tickled.tickledId;\n    if (currentTickled === undefined) return;\n\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n\n    // For non-last segments: open the inline caret menu for that segment\n    if (currentTickled < pathNodes.length - 1) {\n      const segments = this.shadowRoot?.querySelectorAll<HTMLElement>(`.crumb-segment`);\n      const trigger = segments?.[currentTickled]?.querySelector<MenuTrigger>(`.caret ixfx-menu-trigger`);\n      if (trigger) {\n        this.#menuOpenedByKeyboard = true;\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n        return;\n      }\n    }\n\n    // Last segment or the child-options separator: open the child-options menu\n    if (this.#hasChildOptions()) {\n      const trigger = this.shadowRoot?.querySelector<MenuTrigger>(`#child-options-trigger`);\n      if (trigger) {\n        this.#menuOpenedByKeyboard = true;\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n      }\n    }\n  }\n\n  #propagateInputModeToMenu(): void {\n    const inputMode = this.tickled.inputMode;\n    requestAnimationFrame(() => {\n      const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);\n      if (container) {\n        container.setAttribute(`data-input-mode`, inputMode);\n      }\n    });\n  }\n\n#onMenuTriggerClose = (): void => {\n    document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n    this.#currentOpenTrigger = null;\n    this.#menuOpenedByKeyboard = false;\n    requestAnimationFrame(() => {\n      this.shadowRoot?.querySelector<HTMLElement>(`.host-container`)?.focus();\n    });\n  };\n\n  #onMenuKeyNav = (e: KeyboardEvent): void => {\n    // Only handle ArrowLeft/ArrowRight - close menu and navigate to previous/next breadcrumb segment\n    // ArrowDown/ArrowUp should pass through to let the menu handle them\n    const container = this.#currentOpenTrigger?.querySelector(`ixfx-menu-container`);\n    if (!container || !this.#currentOpenTrigger?.isOpen) return;\n\n    switch (e.key) {\n      case `ArrowLeft`:\n      case `ArrowRight`: {\n        e.preventDefault();\n        e.stopPropagation();\n        this.#currentOpenTrigger.closeMenu();\n        const r = this.root;\n        const sel = this.selectedNode;\n        if (!r || !sel) break;\n        const pathNodes = this.#findPath(r, sel) ?? [r];\n        const totalItems = pathNodes.length + (this.#hasChildOptions() ? 1 : 0);\n        const currentTickled = this.tickled.tickledId ?? -1;\n        if (e.key === `ArrowLeft`) {\n          if (currentTickled > 0) {\n            this.tickled.handleKeyboardNavigation(`previous`);\n          }\n        } else {\n          if (currentTickled < totalItems - 1) {\n            this.tickled.handleKeyboardNavigation(`next`);\n          }\n        }\n        break;\n      }\n    }\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const totalItems = pathNodes.length + (this.#hasChildOptions() ? 1 : 0);\n    const currentTickled = this.tickled.tickledId ?? -1;\n\n    switch (e.key) {\n      case `ArrowRight`: {\n        e.preventDefault();\n        if (currentTickled < totalItems - 1) {\n          this.tickled.handleKeyboardNavigation(`next`);\n        } else if (currentTickled === totalItems - 1) {\n          this.#shiftFocusToNarrowedText();\n        }\n        break;\n      }\n      case `ArrowLeft`: {\n        e.preventDefault();\n        if (currentTickled > 0) {\n          this.tickled.handleKeyboardNavigation(`previous`);\n        }\n        break;\n      }\n      case `ArrowDown`:\n      case `ArrowUp`: {\n        if (this.tickled.tickledId !== undefined) {\n          e.preventDefault();\n          if (this.#currentOpenTrigger?.isOpen) {\n            // Menu is already open - dispatch ArrowDown to the popover element for it to handle\n            const container = this.#currentOpenTrigger.querySelector(`ixfx-menu-container`);\n            const popover = container?.shadowRoot?.querySelector(`.popover`);\n            if (popover) {\n              popover.dispatchEvent(new KeyboardEvent(`keydown`, { key: e.key, bubbles: true }));\n            }\n          } else {\n            this.#handleOpenCaretMenu();\n          }\n        }\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        this.#handleEnter();\n        break;\n      }\n      case `Escape`: {\n        e.preventDefault();\n        this._menuOpen = false;\n        this.tickled.clearTickled();\n        this.blur();\n        break;\n      }\n      case `Tab`: {\n        if (e.shiftKey) {\n          e.preventDefault();\n          this.#shiftFocusToPath();\n        } else if (currentTickled === totalItems - 1) {\n          e.preventDefault();\n          this._menuOpen = false;\n          this._focusOnNarrowedText = true;\n          const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);\n          if (narrowedText) {\n            narrowedText.focus();\n          }\n        }\n        break;\n      }\n    }\n  };\n\n  #handleEnter() {\n    const r = this.root;\n    const sel = this.selectedNode;\n    if (!r || !sel) return;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n    const currentTickled = this.tickled.tickledId ?? -1;\n\n    if (currentTickled < pathNodes.length) {\n      const node = pathNodes[currentTickled];\n      this.#setSelected(node);\n      this._menuOpen = false;\n      this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n        detail: { node, depth: currentTickled },\n        bubbles: true,\n        composed: true,\n      }));\n    } else if (hasChildOptions && currentTickled === pathNodes.length) {\n      this._menuOpen = true;\n      this.#menuOpenedByKeyboard = true;\n      const trigger = this.shadowRoot?.querySelector<MenuTrigger>(`#child-options-trigger`);\n      if (trigger) {\n        this.#currentOpenTrigger = trigger;\n        document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n        trigger.openMenu();\n        this.#propagateInputModeToMenu();\n      }\n    }\n  }\n\n  #shiftFocusToNarrowedText() {\n    const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);\n    if (narrowedText) {\n      this._focusOnNarrowedText = true;\n      narrowedText.focus();\n    }\n  }\n\n  #shiftFocusToPath() {\n    this._focusOnNarrowedText = false;\n    const hostContainer = this.shadowRoot?.querySelector<HTMLElement>(`.host-container`);\n    if (hostContainer) {\n      hostContainer.focus();\n    }\n  }\n\n  #onNarrowedTextBlur = (): void => {\n    this._focusOnNarrowedText = false;\n    this.#shiftFocusToPath();\n  }\n\n  #onNarrowedTextShiftTab = (): void => {\n    this._focusOnNarrowedText = false;\n    this.#shiftFocusToPath();\n  }\n\n  // --- TreeComponent methods ---\n\n  select(node: TreeNode): void {\n    this.#setSelected(node);\n  }\n\n  deselect(_node: TreeNode): void {\n    // Crumb navigation is single-selection; deselect navigates to parent or root\n  }\n\n  clearSelection(): void {\n    if (this.root) this.#setSelected(this.root);\n  }\n\n  getNodes(): ReadonlyArray<{ node: TreeNode; depth: number }> {\n    if (!this.root) return [];\n    const result: Array<{ node: TreeNode; depth: number }> = [];\n    const visit = (node: TreeNode, depth: number) => {\n      result.push({ node, depth });\n      if (node.children) {\n        for (const child of node.children) visit(child, depth + 1);\n      }\n    };\n    for (const child of this.root.children ?? []) visit(child, 0);\n    return result;\n  }\n\n  // --- Lifecycle ---\n\n  override updated(changedProps: PropertyValues): void {\n    if (changedProps.has(`model`)) {\n      this.#modelUnsubscribe?.();\n      this.#modelUnsubscribe = undefined;\n      const model = this.model;\n      if (model) {\n        this.root = model.root;\n        this.#modelUnsubscribe = model._subscribe(event => {\n          if (event.type === 'root') {\n            this.root = event.root;\n            this.requestUpdate();\n          }\n        });\n      }\n    }\n    this.#runLayoutUpdate(changedProps);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#modelUnsubscribe?.();\n    this.#modelUnsubscribe = undefined;\n    document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });\n    this.#currentOpenTrigger = null;\n  }\n\n  #runLayoutUpdate(_changedProperties: PropertyValues): void {\n    if (!this.shadowRoot)\n      return;\n\n    const hsiElement: HTMLElement | null = this.shadowRoot.querySelector(`.horiz-select-items`);\n    if (!hsiElement)\n      return;\n\n    const ulElement: HTMLElement | null = hsiElement.querySelector(`ul`);\n    if (!ulElement)\n      return;\n\n    const menuTrigger: HTMLElement | null = this.shadowRoot.querySelector(`ixfx-menu-trigger`);\n    if (!menuTrigger)\n      return;\n\n    if (ulElement.getBoundingClientRect().width > hsiElement.getBoundingClientRect().width) {\n      menuTrigger.style.display = `inline-flex`;\n    } else {\n      menuTrigger.style.display = `none`;\n    }\n\n    for (const li of ulElement.querySelectorAll(`li`)) {\n      const key = li.getAttribute(`data-key`) ?? ``;\n      if (key === this.#previousSelectionKey) {\n        this.#scrollToValue(li);\n        break;\n      }\n    }\n\n  }\n\n  #scrollToValue(li: HTMLLIElement) {\n    let l = li.offsetLeft;\n\n    const ul = li.parentElement;\n    if (!ul)\n      return;\n    l -= ul.offsetLeft;\n\n    const horizSelectItems = ul.parentElement;\n    if (!horizSelectItems)\n      return;\n    horizSelectItems.scroll({ left: l, top: 0, behavior: `smooth` });\n\n    const horizSelect = horizSelectItems.parentElement;\n    if (!horizSelect)\n      return;\n    horizSelect.style.minWidth = `${li.getBoundingClientRect().width}px`;\n  }\n\n  #abortPending() {\n    if (this.#pendingController) {\n      this.#pendingController.abort();\n      this.#pendingController = undefined;\n      this.#pendingNode = undefined;\n    }\n  }\n\n  #findPath(node: TreeNode, target: TreeNode, acc: TreeNode[] = []): TreeNode[] | undefined {\n    const path = [...acc, node];\n    if (node === target)\n      return path;\n    if (!node.children)\n      return undefined;\n    for (const child of node.children) {\n      const result = this.#findPath(child, target, path);\n      if (result)\n        return result;\n    }\n    return undefined;\n  }\n\n  #setSelected(node: TreeNode) {\n    const previous = this.selectedNode;\n    if (previous) {\n      this.#previousSelectionKey = previous.item?.key ?? ``;\n    } else {\n      this.#previousSelectionKey = ``;\n    }\n    const previousSet: ReadonlySet<TreeNode> = previous ? new Set([previous]) : new Set();\n    this.selectedNode = node;\n    this._selectedNodes = new Set([node]);\n\n    this.dispatchEvent(new CustomEvent<TreeSelectDetail>(`select`, {\n      detail: { selected: new Set([node]), previous: previousSet },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #onLabelClick(node: TreeNode, depth: number) {\n    this._openIdx = -1;\n    this.#setSelected(node);\n    this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n      detail: { node, depth },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  #onCaretClick(node: TreeNode, depth: number, e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (this._openIdx === depth) {\n      this._openIdx = -1;\n      return;\n    }\n    this._openIdx = depth;\n\n    if (node.children === undefined && this.#pendingNode !== node) {\n      this.#abortPending();\n      this.#pendingNode = node;\n      const controller = new AbortController();\n      this.#pendingController = controller;\n\n      if (this.loadChildren) {\n        this.#invokeLoadChildren(node, depth, controller).catch(() => {});\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  async #invokeLoadChildren(node: TreeNode, depth: number, controller: AbortController): Promise<void> {\n    try {\n      const result = this.loadChildren!(node, depth, controller.signal);\n      const children = result instanceof Promise ? await result : result;\n      if (controller.signal.aborted) return;\n      node.children = children;\n      this.#pendingNode = undefined;\n      this.#pendingController = undefined;\n      this.dispatchEvent(new CustomEvent<CrumbNavigationExpandDetail>(`expand`, {\n        detail: { node, depth },\n        bubbles: true,\n        composed: true,\n      }));\n      this.requestUpdate();\n    } catch (err) {\n      if (controller.signal.aborted) return;\n      node.children = [];\n      this.#pendingNode = undefined;\n      this.#pendingController = undefined;\n      this.requestUpdate();\n    }\n  }\n\n  #onSegmentMenuCommand(e: CustomEvent, node: TreeNode, depth: number) {\n    const key = e.detail.command;\n    const child = node.children?.find(c => c.item.key === key);\n    if (child) {\n      this.#onChildClick(child, depth + 1);\n    }\n  }\n\n  #onChildClick(node: TreeNode, depth: number) {\n    this._openIdx = -1;\n    this.#setSelected(node);\n    this.dispatchEvent(new CustomEvent<CrumbNavigationItemClickDetail>(`item-click`, {\n      detail: { node, depth },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */\n  navigateTo(keys: readonly string[]): boolean {\n    if (!this.root?.children) return false;\n    let current: TreeNode | undefined = this.root;\n    for (const key of keys) {\n      const found: TreeNode | undefined = current?.children?.find(n => n.item.key === key);\n      if (!found) return false;\n      current = found;\n    }\n    if (current && current !== this.root) {\n      this.#setSelected(current);\n    }\n    return true;\n  }\n\n  /** Navigate to the first node matching the predicate. Returns false if not found. */\n  navigateToNode(predicate: (node: TreeNode) => boolean): boolean {\n    if (!this.root) return false;\n    const keyPath = this.#findNodePath(this.root.children ?? [], predicate);\n    if (!keyPath) return false;\n    return this.navigateTo(keyPath);\n  }\n\n  #findNodePath(\n    nodes: TreeNode[],\n    predicate: (node: TreeNode) => boolean,\n    prefix: string[] = [],\n  ): string[] | undefined {\n    for (const node of nodes) {\n      const path = [...prefix, node.item.key];\n      if (predicate(node)) return path;\n      if (node.children?.length) {\n        const result = this.#findNodePath(node.children, predicate, path);\n        if (result) return result;\n      }\n    }\n    return undefined;\n  }\n\n  #onMenuCommand(e: CustomEvent) {\n    const node = this.selectedNode;\n    if (!node?.children)\n      return;\n\n    const key = e.detail.command;\n    const child = node.children.find(c => c.item.key === key);\n    if (child) {\n      const depth = this.root ? (this.#findPath(this.root, node)?.length ?? 1) : 1;\n      this.#onChildClick(child, depth);\n    }\n  }\n\n  render() {\n    const r = this.root;\n    const sel = this.selectedNode;\n\n    if (!r || !sel) {\n      return html``;\n    }\n\n    this.inputMode = this.tickled.inputMode;\n\n    const pathNodes = this.#findPath(r, sel) ?? [r];\n    const hasChildOptions = this.#hasChildOptions();\n\n    const parts = pathNodes.map((node, i) => {\n      const isLast = i === pathNodes.length - 1;\n      const isPending = this.#pendingNode === node;\n      const isOpen = this._openIdx === i;\n      const hasChildren = node.item.isLeaf !== true && (node.children === undefined || node.children.length > 0);\n      const showCaret = !isLast && hasChildren;\n      const isTickled = this.tickled.isTickled(i);\n\n      const menuItems = (node.children ?? []).map(c => html`\n        <ixfx-menu-item \n          label=\"${c.item.label}\" \n          command=\"${c.item.key}\"\n          icon-name=\"${c.item.icon ?? nothing}\"\n        ></ixfx-menu-item>\n      `);\n\n      return html`\n        <div class=\"item crumb-segment ${isTickled ? `tickled` : ``}\"\n          @pointerenter=${() => {\n            this.tickled.handlePointerEnter(i);\n            this.dispatchEvent(new CustomEvent<TreeTickleDetail>(`tickle`, { detail: { node, depth: i }, bubbles: true, composed: true }));\n          }}\n        >\n          <span class=\"label\" @click=${() => this.#onLabelClick(node, i)}>${node.item.label}</span>\n          ${showCaret\n              ? html`\n            <span class=\"caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}\">\n              ${isPending\n                  ? html`<span class=\"loading-spinner\"></span>`\n                  : html`\n                <ixfx-menu-trigger mode=\"trigger\" label=\"›\" @menu-command=${(e: CustomEvent) => this.#onSegmentMenuCommand(e, node, i)}>\n                  <ixfx-menu-container slot=\"menu\">\n                    ${menuItems}\n                  </ixfx-menu-container>\n                </ixfx-menu-trigger>\n                `\n              }\n            </span>\n            `\n              : nothing\n          }\n        </div>\n      `;\n    });\n\n    const childOptions = this.#renderChildOptions();\n    const isLastItemTickled = this.tickled.isTickled(pathNodes.length);\n    return html`\n      <div\n        class=\"host-container\"\n        tabindex=\"0\"\n        @focus=${this.#onFocus}\n        @blur=${this.#onBlur}\n        @keydown=${this.#onKeyDown}\n        @click=${this.#onHostClick}\n        @menu-trigger-close=${this.#onMenuTriggerClose}\n        @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n      >\n        <div class=\"parts\">${parts}</div>\n        ${childOptions\n          ? html`\n          <ixfx-menu-trigger\n            id=\"child-options-trigger\"\n            class=\"item separator-trigger ${isLastItemTickled ? `tickled` : ``}\"\n            mode=\"trigger\"\n            label=\"›\"\n            @menu-command=${this.#onMenuCommand}\n            @pointerenter=${() => this.tickled.handlePointerEnter(pathNodes.length)}\n          >\n            <ixfx-menu-container slot=\"menu\">\n              ${(this.selectedNode?.children ?? []).map(c => html`\n                <ixfx-menu-item \n                  label=\"${c.item.label}\" \n                  command=\"${c.item.key}\"\n                  icon-name=\"${c.item.icon ?? nothing}\"\n                ></ixfx-menu-item>\n              `)}\n            </ixfx-menu-container>\n          </ixfx-menu-trigger>\n        `\n          : nothing}\n        ${childOptions}\n      </div>\n    `;\n  }\n\n  #renderChildOptions() {\n    const s = this.selectedNode;\n    if (s === undefined) {\n      return nothing;\n    }\n\n    const isPending = this.#pendingNode === s;\n    const children = s.children ?? [];\n\n    if (children.length === 0 && !isPending) {\n      return nothing;\n    }\n\n    if (isPending) {\n      return html`\n        <div class=\"horiz-select\">\n          <div class=\"horiz-select-items\">\n            <span class=\"loading-spinner\"></span>\n          </div>\n        </div>\n      `;\n    }\n\n    return html`\n      <ixfx-narrowed-text\n        class=\"horiz-select\"\n        selection-mode=\"single\"\n        orientation=\"horizontal\"\n        nowrap\n        width=${this.#getChildOptionsWidth()}\n        @change=${this.#onNarrowedTextChange}\n        @narrowed-text-blur=${this.#onNarrowedTextBlur}\n        @narrowed-text-shift-tab=${this.#onNarrowedTextShiftTab}\n      >\n        ${children.map(c => html`\n          <span data-value=\"${c.item.key}\" data-label=\"${c.item.label}\"></span>\n        `)}\n      </ixfx-narrowed-text>\n    `;\n  }\n\n  #onNarrowedTextChange(e: CustomEvent) {\n    const detail = e.detail as { item: { value: string } };\n    const node = this.selectedNode;\n    if (!node?.children) return;\n\n    const child = node.children.find(c => c.item.key === detail.item.value);\n    if (child) {\n      const depth = this.root ? (this.#findPath(this.root, node)?.length ?? 1) : 1;\n      this.#onChildClick(child, depth);\n    }\n  }\n\n  #getChildOptionsWidth(): string {\n    return `var(--child-options-width, 50ch)`;\n  }\n\n  static styles = [tickledStyles, tickledItemStyles, css`\n    :host {\n      --text-highlight: var(--accent);\n      --separator: var(--surface-muted-text);\n      --padding-s: var(--space-xs);\n      display: flex;\n      overflow: scroll;\n      width: 100%;\n      scroll-snap-type: x mandatory;\n      scrollbar-width: none;\n\n      /* Breadcrumb tickled overrides — no layout shift: keep transparent border at rest */\n      --item-padding: 0;\n    }\n\n    :host(.focused) {\n      outline: none;\n    }\n\n    :host([input-mode=\"keyboard\"]) .host-container {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .host-container {\n      display: flex;\n      width: 100%;\n      outline: none;\n    }\n\n    .parts {\n      display: flex;\n    }\n\n    .crumb-segment {\n      display: flex;\n      align-items: center;\n    }\n\n    .label {\n      cursor: pointer;\n      margin-right: var(--padding-s);\n      white-space: nowrap;\n    }\n\n    .caret {\n      position: relative;\n      cursor: pointer;\n      padding: var(--padding-m);\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      color: var(--separator);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ease-in-out;\n    }\n\n    .caret.open {\n      background: color-mix(in srgb, var(--surface-5) 40%, transparent);\n    }\n\n    .caret.pending {\n      display: inline-flex;\n    }\n\n    .caret > ixfx-menu-trigger {\n      display: inline-flex;\n      margin: 0;\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n\n    .caret > ixfx-menu-trigger::part(base) {\n      background: none;\n      border: none;\n      color: inherit;\n      padding: 0;\n      cursor: pointer;\n      font-size: inherit;\n      line-height: 1;\n    }\n\n    .caret > ixfx-menu-trigger::part(base):hover {\n      background: none;\n      opacity: 0.6;\n    }\n\n    .separator {\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      color: var(--separator);\n    }\n\n    .separator-trigger {\n      display: inline-flex;\n      margin-left: var(--padding-s);\n      margin-right: var(--padding-s);\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n\n    .separator-trigger::part(base) {\n      background: none;\n      border: none;\n      color: var(--separator);\n      padding: 0;\n      cursor: pointer;\n      font-size: inherit;\n      line-height: 1;\n    }\n\n    .separator-trigger::part(base):hover {\n      background: none;\n      opacity: 0.6;\n    }\n\n    .separator-trigger.tickled::part(base) {\n    }\n\n    ixfx-menu-trigger {\n      display: none;\n    }\n\n    .horiz-select > ixfx-menu-trigger {\n      display: inline-flex;\n    }\n\n    .horiz-select {\n      display: flex;\n      min-width: 5ch;\n    }\n\n    .loading-spinner {\n      display: inline-block;\n      width: 12px;\n      height: 12px;\n      border: 2px solid var(--surface-5);\n      border-top-color: var(--accent);\n      border-radius: 50%;\n      animation: crumb-spin 0.7s linear infinite;\n    }\n\n    @keyframes crumb-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    ::slotted(*), option {\n      user-select: none;\n      scroll-snap-align: start;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-crumb-navigation\": CrumbNavigationElement;\n  }\n}\n\nimport type {\n  TreeActivateEvent,\n  TreeComponentEventMap,\n  TreeExpandEvent,\n  TreeItemClickEvent,\n  TreeSelectEvent,\n  TreeTickleEvent,\n} from '../common/tree-component.js';\n\nexport interface CrumbNavigationElementEventMap extends TreeComponentEventMap {\n  'item-click': TreeItemClickEvent;\n  'expand': TreeExpandEvent;\n  'select': TreeSelectEvent;\n  'tickle': TreeTickleEvent;\n  'activate': TreeActivateEvent;\n}\n\nexport interface CrumbNavigationElement {\n  addEventListener<K extends keyof CrumbNavigationElementEventMap>(\n    type: K,\n    listener: (this: CrumbNavigationElement, event: CrumbNavigationElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n}\n"],"mappings":";;;;;;;;AAwDO,IAAA,yBAAA,MAAM,+BAA+B,WAAoC;;;wCAWrD,IAAI,KAAe;qBAcb;yBAGQ;kBAGpB;oBAGE;mBAGD;8BAGW;mBAGX;+BAMI;+BACA;6BACkB;iBAExB,IAAI,kBAA0B,MAAM;GACpD,gBAAgB,MAAA,iBAAuB;GACvC,WAAW,UAAU;AACnB,QAAI,UAAU,KAAA,EACZ,OAAA,UAAgB,MAAM;;GAG3B,CAAC;wBA8CqB;AACrB,QAAK,aAAa;;uBAGE;AACpB,QAAK,aAAa;;4BAGO;AACzB,QAAK,YAAY,cAA2B,kBAAkB,EAAE,OAAO;;mCAkDzC;AAC9B,YAAS,oBAAoB,WAAW,MAAA,cAAoB,EAAE,SAAS,MAAM,CAAC;AAC9E,SAAA,qBAA2B;AAC3B,SAAA,uBAA6B;AAC7B,+BAA4B;AAC1B,SAAK,YAAY,cAA2B,kBAAkB,EAAE,OAAO;KACvE;;wBAGa,MAA2B;AAI1C,OAAI,CADc,MAAA,oBAA0B,cAAc,sBAAsB,IAC9D,CAAC,MAAA,oBAA0B,OAAQ;AAErD,WAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK,cAAc;AACjB,OAAE,gBAAgB;AAClB,OAAE,iBAAiB;AACnB,WAAA,mBAAyB,WAAW;KACpC,MAAM,IAAI,KAAK;KACf,MAAM,MAAM,KAAK;AACjB,SAAI,CAAC,KAAK,CAAC,IAAK;KAEhB,MAAM,cADY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE,EAClB,UAAU,MAAA,iBAAuB,GAAG,IAAI;KACrE,MAAM,iBAAiB,KAAK,QAAQ,aAAa;AACjD,SAAI,EAAE,QAAQ;UACR,iBAAiB,EACnB,MAAK,QAAQ,yBAAyB,WAAW;gBAG/C,iBAAiB,aAAa,EAChC,MAAK,QAAQ,yBAAyB,OAAO;AAGjD;;;;qBAKQ,MAA2B;GACvC,MAAM,IAAI,KAAK;GACf,MAAM,MAAM,KAAK;AACjB,OAAI,CAAC,KAAK,CAAC,IAAK;GAGhB,MAAM,cADY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE,EAClB,UAAU,MAAA,iBAAuB,GAAG,IAAI;GACrE,MAAM,iBAAiB,KAAK,QAAQ,aAAa;AAEjD,WAAQ,EAAE,KAAV;IACE,KAAK;AACH,OAAE,gBAAgB;AAClB,SAAI,iBAAiB,aAAa,EAChC,MAAK,QAAQ,yBAAyB,OAAO;cACpC,mBAAmB,aAAa,EACzC,OAAA,0BAAgC;AAElC;IAEF,KAAK;AACH,OAAE,gBAAgB;AAClB,SAAI,iBAAiB,EACnB,MAAK,QAAQ,yBAAyB,WAAW;AAEnD;IAEF,KAAK;IACL,KAAK;AACH,SAAI,KAAK,QAAQ,cAAc,KAAA,GAAW;AACxC,QAAE,gBAAgB;AAClB,UAAI,MAAA,oBAA0B,QAAQ;OAGpC,MAAM,UADY,MAAA,mBAAyB,cAAc,sBAChC,EAAE,YAAY,cAAc,WAAW;AAChE,WAAI,QACF,SAAQ,cAAc,IAAI,cAAc,WAAW;QAAE,KAAK,EAAE;QAAK,SAAS;QAAM,CAAC,CAAC;YAGpF,OAAA,qBAA2B;;AAG/B;IAEF,KAAK;AACH,OAAE,gBAAgB;AAClB,WAAA,aAAmB;AACnB;IAEF,KAAK;AACH,OAAE,gBAAgB;AAClB,UAAK,YAAY;AACjB,UAAK,QAAQ,cAAc;AAC3B,UAAK,MAAM;AACX;IAEF,KAAK;AACH,SAAI,EAAE,UAAU;AACd,QAAE,gBAAgB;AAClB,YAAA,kBAAwB;gBACf,mBAAmB,aAAa,GAAG;AAC5C,QAAE,gBAAgB;AAClB,WAAK,YAAY;AACjB,WAAK,uBAAuB;MAC5B,MAAM,eAAe,KAAK,YAAY,cAAc,qBAAqB;AACzE,UAAI,aACF,cAAa,OAAO;;AAGxB;;;mCAoD4B;AAChC,QAAK,uBAAuB;AAC5B,SAAA,kBAAwB;;uCAGY;AACpC,QAAK,uBAAuB;AAC5B,SAAA,kBAAwB;;;CAhU1B,IAAI,gBAAuC;AACzC,SAAO,KAAK;;CA+Bd;CACA;CACA;CAEA;CACA;CACA;CAWA,mBAAmB;EACjB,MAAM,IAAI,KAAK;EACf,MAAM,MAAM,KAAK;AACjB,MAAI,CAAC,KAAK,CAAC,IAAK,QAAO,EAAE;EAEzB,MAAM,YAAY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE;EAC/C,MAAM,QAAiD,EAAE;AAEzD,YAAU,SAAS,OAAO,MAAM;AAC9B,SAAM,KAAK;IAAE,IAAI;IAAG,SAAS;IAAM,CAAC;IACpC;AAEF,MAAI,MAAA,iBAAuB,CACzB,OAAM,KAAK;GAAE,IAAI,UAAU;GAAQ,SAAS;GAAM,CAAC;AAGrD,SAAO;;CAGT,WAAW,OAAe;EACxB,MAAM,IAAI,KAAK;EACf,MAAM,MAAM,KAAK;AACjB,MAAI,CAAC,KAAK,CAAC,IAAK;EAEhB,MAAM,YAAY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE;EAC/C,MAAM,kBAAkB,MAAA,iBAAuB;AAE/C,MAAI,QAAQ,UAAU,OACpB,MAAK,WAAW;WACP,mBAAmB,UAAU,UAAU,OAChD,MAAK,WAAW,UAAU,SAAS;;CAIvC,mBAA4B;EAC1B,MAAM,IAAI,KAAK;AACf,MAAI,MAAM,KAAA,EAAW,QAAO;EAE5B,MAAM,YAAY,MAAA,gBAAsB;AAGxC,UAFiB,EAAE,YAAY,EAAE,EAEjB,SAAS,KAAK;;CAGhC;CAIA;CAIA;CAIA,uBAAuB;EACrB,MAAM,iBAAiB,KAAK,QAAQ;AACpC,MAAI,mBAAmB,KAAA,EAAW;EAElC,MAAM,IAAI,KAAK;EACf,MAAM,MAAM,KAAK;AACjB,MAAI,CAAC,KAAK,CAAC,IAAK;AAKhB,MAAI,kBAHc,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE,EAGhB,SAAS,GAAG;GAEzC,MAAM,WADW,KAAK,YAAY,iBAA8B,iBAAiB,IACtD,iBAAiB,cAA2B,2BAA2B;AAClG,OAAI,SAAS;AACX,UAAA,uBAA6B;AAC7B,UAAA,qBAA2B;AAC3B,aAAS,iBAAiB,WAAW,MAAA,cAAoB,EAAE,SAAS,MAAM,CAAC;AAC3E,YAAQ,UAAU;AAClB,UAAA,0BAAgC;AAChC;;;AAKJ,MAAI,MAAA,iBAAuB,EAAE;GAC3B,MAAM,UAAU,KAAK,YAAY,cAA2B,yBAAyB;AACrF,OAAI,SAAS;AACX,UAAA,uBAA6B;AAC7B,UAAA,qBAA2B;AAC3B,aAAS,iBAAiB,WAAW,MAAA,cAAoB,EAAE,SAAS,MAAM,CAAC;AAC3E,YAAQ,UAAU;AAClB,UAAA,0BAAgC;;;;CAKtC,4BAAkC;EAChC,MAAM,YAAY,KAAK,QAAQ;AAC/B,8BAA4B;GAC1B,MAAM,YAAY,MAAA,oBAA0B,cAAc,sBAAsB;AAChF,OAAI,UACF,WAAU,aAAa,mBAAmB,UAAU;IAEtD;;CAGN;CASE;CAgCA;CAyEA,eAAe;EACb,MAAM,IAAI,KAAK;EACf,MAAM,MAAM,KAAK;AACjB,MAAI,CAAC,KAAK,CAAC,IAAK;EAEhB,MAAM,YAAY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE;EAC/C,MAAM,kBAAkB,MAAA,iBAAuB;EAC/C,MAAM,iBAAiB,KAAK,QAAQ,aAAa;AAEjD,MAAI,iBAAiB,UAAU,QAAQ;GACrC,MAAM,OAAO,UAAU;AACvB,SAAA,YAAkB,KAAK;AACvB,QAAK,YAAY;AACjB,QAAK,cAAc,IAAI,YAA4C,cAAc;IAC/E,QAAQ;KAAE;KAAM,OAAO;KAAgB;IACvC,SAAS;IACT,UAAU;IACX,CAAC,CAAC;aACM,mBAAmB,mBAAmB,UAAU,QAAQ;AACjE,QAAK,YAAY;AACjB,SAAA,uBAA6B;GAC7B,MAAM,UAAU,KAAK,YAAY,cAA2B,yBAAyB;AACrF,OAAI,SAAS;AACX,UAAA,qBAA2B;AAC3B,aAAS,iBAAiB,WAAW,MAAA,cAAoB,EAAE,SAAS,MAAM,CAAC;AAC3E,YAAQ,UAAU;AAClB,UAAA,0BAAgC;;;;CAKtC,4BAA4B;EAC1B,MAAM,eAAe,KAAK,YAAY,cAAc,qBAAqB;AACzE,MAAI,cAAc;AAChB,QAAK,uBAAuB;AAC5B,gBAAa,OAAO;;;CAIxB,oBAAoB;AAClB,OAAK,uBAAuB;EAC5B,MAAM,gBAAgB,KAAK,YAAY,cAA2B,kBAAkB;AACpF,MAAI,cACF,eAAc,OAAO;;CAIzB;CAKA;CAOA,OAAO,MAAsB;AAC3B,QAAA,YAAkB,KAAK;;CAGzB,SAAS,OAAuB;CAIhC,iBAAuB;AACrB,MAAI,KAAK,KAAM,OAAA,YAAkB,KAAK,KAAK;;CAG7C,WAA6D;AAC3D,MAAI,CAAC,KAAK,KAAM,QAAO,EAAE;EACzB,MAAM,SAAmD,EAAE;EAC3D,MAAM,SAAS,MAAgB,UAAkB;AAC/C,UAAO,KAAK;IAAE;IAAM;IAAO,CAAC;AAC5B,OAAI,KAAK,SACP,MAAK,MAAM,SAAS,KAAK,SAAU,OAAM,OAAO,QAAQ,EAAE;;AAG9D,OAAK,MAAM,SAAS,KAAK,KAAK,YAAY,EAAE,CAAE,OAAM,OAAO,EAAE;AAC7D,SAAO;;CAKT,QAAiB,cAAoC;AACnD,MAAI,aAAa,IAAI,QAAQ,EAAE;AAC7B,SAAA,oBAA0B;AAC1B,SAAA,mBAAyB,KAAA;GACzB,MAAM,QAAQ,KAAK;AACnB,OAAI,OAAO;AACT,SAAK,OAAO,MAAM;AAClB,UAAA,mBAAyB,MAAM,YAAW,UAAS;AACjD,SAAI,MAAM,SAAS,QAAQ;AACzB,WAAK,OAAO,MAAM;AAClB,WAAK,eAAe;;MAEtB;;;AAGN,QAAA,gBAAsB,aAAa;;CAGrC,uBAAgC;AAC9B,QAAM,sBAAsB;AAC5B,QAAA,oBAA0B;AAC1B,QAAA,mBAAyB,KAAA;AACzB,WAAS,oBAAoB,WAAW,MAAA,cAAoB,EAAE,SAAS,MAAM,CAAC;AAC9E,QAAA,qBAA2B;;CAG7B,iBAAiB,oBAA0C;AACzD,MAAI,CAAC,KAAK,WACR;EAEF,MAAM,aAAiC,KAAK,WAAW,cAAc,sBAAsB;AAC3F,MAAI,CAAC,WACH;EAEF,MAAM,YAAgC,WAAW,cAAc,KAAK;AACpE,MAAI,CAAC,UACH;EAEF,MAAM,cAAkC,KAAK,WAAW,cAAc,oBAAoB;AAC1F,MAAI,CAAC,YACH;AAEF,MAAI,UAAU,uBAAuB,CAAC,QAAQ,WAAW,uBAAuB,CAAC,MAC/E,aAAY,MAAM,UAAU;MAE5B,aAAY,MAAM,UAAU;AAG9B,OAAK,MAAM,MAAM,UAAU,iBAAiB,KAAK,CAE/C,MADY,GAAG,aAAa,WAAW,IAAI,QAC/B,MAAA,sBAA4B;AACtC,SAAA,cAAoB,GAAG;AACvB;;;CAMN,eAAe,IAAmB;EAChC,IAAI,IAAI,GAAG;EAEX,MAAM,KAAK,GAAG;AACd,MAAI,CAAC,GACH;AACF,OAAK,GAAG;EAER,MAAM,mBAAmB,GAAG;AAC5B,MAAI,CAAC,iBACH;AACF,mBAAiB,OAAO;GAAE,MAAM;GAAG,KAAK;GAAG,UAAU;GAAU,CAAC;EAEhE,MAAM,cAAc,iBAAiB;AACrC,MAAI,CAAC,YACH;AACF,cAAY,MAAM,WAAW,GAAG,GAAG,uBAAuB,CAAC,MAAM;;CAGnE,gBAAgB;AACd,MAAI,MAAA,mBAAyB;AAC3B,SAAA,kBAAwB,OAAO;AAC/B,SAAA,oBAA0B,KAAA;AAC1B,SAAA,cAAoB,KAAA;;;CAIxB,UAAU,MAAgB,QAAkB,MAAkB,EAAE,EAA0B;EACxF,MAAM,OAAO,CAAC,GAAG,KAAK,KAAK;AAC3B,MAAI,SAAS,OACX,QAAO;AACT,MAAI,CAAC,KAAK,SACR,QAAO,KAAA;AACT,OAAK,MAAM,SAAS,KAAK,UAAU;GACjC,MAAM,SAAS,MAAA,SAAe,OAAO,QAAQ,KAAK;AAClD,OAAI,OACF,QAAO;;;CAKb,aAAa,MAAgB;EAC3B,MAAM,WAAW,KAAK;AACtB,MAAI,SACF,OAAA,uBAA6B,SAAS,MAAM,OAAO;MAEnD,OAAA,uBAA6B;EAE/B,MAAM,cAAqC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC,mBAAG,IAAI,KAAK;AACrF,OAAK,eAAe;AACpB,OAAK,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC;AAErC,OAAK,cAAc,IAAI,YAA8B,UAAU;GAC7D,QAAQ;IAAE,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC;IAAE,UAAU;IAAa;GAC5D,SAAS;GACT,UAAU;GACX,CAAC,CAAC;;CAGL,cAAc,MAAgB,OAAe;AAC3C,OAAK,WAAW;AAChB,QAAA,YAAkB,KAAK;AACvB,OAAK,cAAc,IAAI,YAA4C,cAAc;GAC/E,QAAQ;IAAE;IAAM;IAAO;GACvB,SAAS;GACT,UAAU;GACX,CAAC,CAAC;;CAGL,cAAc,MAAgB,OAAe,GAAe;AAC1D,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,MAAI,KAAK,aAAa,OAAO;AAC3B,QAAK,WAAW;AAChB;;AAEF,OAAK,WAAW;AAEhB,MAAI,KAAK,aAAa,KAAA,KAAa,MAAA,gBAAsB,MAAM;AAC7D,SAAA,cAAoB;AACpB,SAAA,cAAoB;GACpB,MAAM,aAAa,IAAI,iBAAiB;AACxC,SAAA,oBAA0B;AAE1B,OAAI,KAAK,aACP,OAAA,mBAAyB,MAAM,OAAO,WAAW,CAAC,YAAY,GAAG;;AAIrE,OAAK,eAAe;;CAGtB,OAAA,mBAA0B,MAAgB,OAAe,YAA4C;AACnG,MAAI;GACF,MAAM,SAAS,KAAK,aAAc,MAAM,OAAO,WAAW,OAAO;GACjE,MAAM,WAAW,kBAAkB,UAAU,MAAM,SAAS;AAC5D,OAAI,WAAW,OAAO,QAAS;AAC/B,QAAK,WAAW;AAChB,SAAA,cAAoB,KAAA;AACpB,SAAA,oBAA0B,KAAA;AAC1B,QAAK,cAAc,IAAI,YAAyC,UAAU;IACxE,QAAQ;KAAE;KAAM;KAAO;IACvB,SAAS;IACT,UAAU;IACX,CAAC,CAAC;AACH,QAAK,eAAe;WACb,KAAK;AACZ,OAAI,WAAW,OAAO,QAAS;AAC/B,QAAK,WAAW,EAAE;AAClB,SAAA,cAAoB,KAAA;AACpB,SAAA,oBAA0B,KAAA;AAC1B,QAAK,eAAe;;;CAIxB,sBAAsB,GAAgB,MAAgB,OAAe;EACnE,MAAM,MAAM,EAAE,OAAO;EACrB,MAAM,QAAQ,KAAK,UAAU,MAAK,MAAK,EAAE,KAAK,QAAQ,IAAI;AAC1D,MAAI,MACF,OAAA,aAAmB,OAAO,QAAQ,EAAE;;CAIxC,cAAc,MAAgB,OAAe;AAC3C,OAAK,WAAW;AAChB,QAAA,YAAkB,KAAK;AACvB,OAAK,cAAc,IAAI,YAA4C,cAAc;GAC/E,QAAQ;IAAE;IAAM;IAAO;GACvB,SAAS;GACT,UAAU;GACX,CAAC,CAAC;;;CAIL,WAAW,MAAkC;AAC3C,MAAI,CAAC,KAAK,MAAM,SAAU,QAAO;EACjC,IAAI,UAAgC,KAAK;AACzC,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,QAA8B,SAAS,UAAU,MAAK,MAAK,EAAE,KAAK,QAAQ,IAAI;AACpF,OAAI,CAAC,MAAO,QAAO;AACnB,aAAU;;AAEZ,MAAI,WAAW,YAAY,KAAK,KAC9B,OAAA,YAAkB,QAAQ;AAE5B,SAAO;;;CAIT,eAAe,WAAiD;AAC9D,MAAI,CAAC,KAAK,KAAM,QAAO;EACvB,MAAM,UAAU,MAAA,aAAmB,KAAK,KAAK,YAAY,EAAE,EAAE,UAAU;AACvE,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,KAAK,WAAW,QAAQ;;CAGjC,cACE,OACA,WACA,SAAmB,EAAE,EACC;AACtB,OAAK,MAAM,QAAQ,OAAO;GACxB,MAAM,OAAO,CAAC,GAAG,QAAQ,KAAK,KAAK,IAAI;AACvC,OAAI,UAAU,KAAK,CAAE,QAAO;AAC5B,OAAI,KAAK,UAAU,QAAQ;IACzB,MAAM,SAAS,MAAA,aAAmB,KAAK,UAAU,WAAW,KAAK;AACjE,QAAI,OAAQ,QAAO;;;;CAMzB,eAAe,GAAgB;EAC7B,MAAM,OAAO,KAAK;AAClB,MAAI,CAAC,MAAM,SACT;EAEF,MAAM,MAAM,EAAE,OAAO;EACrB,MAAM,QAAQ,KAAK,SAAS,MAAK,MAAK,EAAE,KAAK,QAAQ,IAAI;AACzD,MAAI,OAAO;GACT,MAAM,QAAQ,KAAK,OAAQ,MAAA,SAAe,KAAK,MAAM,KAAK,EAAE,UAAU,IAAK;AAC3E,SAAA,aAAmB,OAAO,MAAM;;;CAIpC,SAAS;EACP,MAAM,IAAI,KAAK;EACf,MAAM,MAAM,KAAK;AAEjB,MAAI,CAAC,KAAK,CAAC,IACT,QAAO,IAAI;AAGb,OAAK,YAAY,KAAK,QAAQ;EAE9B,MAAM,YAAY,MAAA,SAAe,GAAG,IAAI,IAAI,CAAC,EAAE;AACvB,QAAA,iBAAuB;EAE/C,MAAM,QAAQ,UAAU,KAAK,MAAM,MAAM;GACvC,MAAM,SAAS,MAAM,UAAU,SAAS;GACxC,MAAM,YAAY,MAAA,gBAAsB;GACxC,MAAM,SAAS,KAAK,aAAa;GACjC,MAAM,cAAc,KAAK,KAAK,WAAW,SAAS,KAAK,aAAa,KAAA,KAAa,KAAK,SAAS,SAAS;GACxG,MAAM,YAAY,CAAC,UAAU;GAC7B,MAAM,YAAY,KAAK,QAAQ,UAAU,EAAE;GAE3C,MAAM,aAAa,KAAK,YAAY,EAAE,EAAE,KAAI,MAAK,IAAI;;mBAExC,EAAE,KAAK,MAAM;qBACX,EAAE,KAAK,IAAI;uBACT,EAAE,KAAK,QAAQ,QAAQ;;QAEtC;AAEF,UAAO,IAAI;yCACwB,YAAY,YAAY,GAAG;gCACpC;AACpB,SAAK,QAAQ,mBAAmB,EAAE;AAClC,SAAK,cAAc,IAAI,YAA8B,UAAU;KAAE,QAAQ;MAAE;MAAM,OAAO;MAAG;KAAE,SAAS;KAAM,UAAU;KAAM,CAAC,CAAC;KAC9H;;6CAEiC,MAAA,aAAmB,MAAM,EAAE,CAAC,GAAG,KAAK,KAAK,MAAM;YAChF,YACI,IAAI;iCACa,SAAS,SAAS,GAAG,GAAG,YAAY,YAAY,GAAG;gBACpE,YACI,IAAI,0CACJ,IAAI;6EACqD,MAAmB,MAAA,qBAA2B,GAAG,MAAM,EAAE,CAAC;;sBAEjH,UAAU;;;kBAIjB;;gBAGC,QACL;;;IAGL;EAEF,MAAM,eAAe,MAAA,oBAA0B;EAC/C,MAAM,oBAAoB,KAAK,QAAQ,UAAU,UAAU,OAAO;AAClE,SAAO,IAAI;;;;iBAIE,MAAA,QAAc;gBACf,MAAA,OAAa;mBACV,MAAA,UAAgB;iBAClB,MAAA,YAAkB;8BACL,MAAA,mBAAyB;yBAC9B,MAAoB,KAAK,QAAQ,mBAAmB,EAAE,CAAC;;6BAEnD,MAAM;UACzB,eACE,IAAI;;;4CAG4B,oBAAoB,YAAY,GAAG;;;4BAGnD,MAAA,cAAoB;kCACd,KAAK,QAAQ,mBAAmB,UAAU,OAAO,CAAC;;;iBAGnE,KAAK,cAAc,YAAY,EAAE,EAAE,KAAI,MAAK,IAAI;;2BAEtC,EAAE,KAAK,MAAM;6BACX,EAAE,KAAK,IAAI;+BACT,EAAE,KAAK,QAAQ,QAAQ;;gBAEtC,CAAC;;;YAIL,QAAQ;UACV,aAAa;;;;CAKrB,sBAAsB;EACpB,MAAM,IAAI,KAAK;AACf,MAAI,MAAM,KAAA,EACR,QAAO;EAGT,MAAM,YAAY,MAAA,gBAAsB;EACxC,MAAM,WAAW,EAAE,YAAY,EAAE;AAEjC,MAAI,SAAS,WAAW,KAAK,CAAC,UAC5B,QAAO;AAGT,MAAI,UACF,QAAO,IAAI;;;;;;;AASb,SAAO,IAAI;;;;;;gBAMC,MAAA,sBAA4B,CAAC;kBAC3B,MAAA,qBAA2B;8BACf,MAAA,mBAAyB;mCACpB,MAAA,uBAA6B;;UAEtD,SAAS,KAAI,MAAK,IAAI;8BACF,EAAE,KAAK,IAAI,gBAAgB,EAAE,KAAK,MAAM;UAC5D,CAAC;;;;CAKT,sBAAsB,GAAgB;EACpC,MAAM,SAAS,EAAE;EACjB,MAAM,OAAO,KAAK;AAClB,MAAI,CAAC,MAAM,SAAU;EAErB,MAAM,QAAQ,KAAK,SAAS,MAAK,MAAK,EAAE,KAAK,QAAQ,OAAO,KAAK,MAAM;AACvE,MAAI,OAAO;GACT,MAAM,QAAQ,KAAK,OAAQ,MAAA,SAAe,KAAK,MAAM,KAAK,EAAE,UAAU,IAAK;AAC3E,SAAA,aAAmB,OAAO,MAAM;;;CAIpC,wBAAgC;AAC9B,SAAO;;;gBAGO;GAAC;GAAe;GAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuJpD;;;YAn5BD,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,uBAAA,WAAA,QAAA,KAAA,EAAA;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,uBAAA,WAAA,SAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,uBAAA,WAAA,gBAAA,KAAA,EAAA;YAG1B,OAAO,CAAA,EAAA,uBAAA,WAAA,kBAAA,KAAA,EAAA;YAQP,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,uBAAA,WAAA,gBAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,uBAAA,WAAA,mBAAA,KAAA,EAAA;YAG9B,SAAS;CAAE,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;YAGrD,SAAS;CAAE,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,uBAAA,WAAA,mBAAA,KAAA,EAAA;YAG1D,OAAO,CAAA,EAAA,uBAAA,WAAA,YAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,uBAAA,WAAA,cAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,uBAAA,WAAA,wBAAA,KAAA,EAAA;YAGP,SAAS;CAAE,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,uBAAA,WAAA,aAAA,KAAA,EAAA;qCA3CtD,cAAc,wBAAwB,CAAA,EAAA,uBAAA"}

package/dist/data-display.d.ts

@@ -1,15 +1,27 @@
-export type FormattingOptions = {
-    readonly precision?: number;
-    readonly roundNumbers?: number;
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/data-display.d.ts
+type FormattingOptions = {
+  readonly precision?: number;
+  readonly roundNumbers?: number;
 };
-export declare class DataDisplayComponent extends HTMLElement {
-    previousValue: Record<string, unknown> | undefined;
-    _shadow: ShadowRoot;
-    _container: HTMLElement;
-    constructor();
-    formatValue(v: unknown, options?: FormattingOptions): string;
-    displayData(o: Record<string, unknown> | unknown[]): void;
-    getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement;
-    update(value: Record<string, unknown>): void;
+declare class DataDisplayComponent extends LitElement {
+  static styles: _$lit.CSSResult;
+  previousValue: Record<string, unknown> | undefined;
+  _container: HTMLElement;
+  constructor();
+  connectedCallback(): void;
+  formatValue(v: unknown, options?: FormattingOptions): string;
+  displayData(o: Record<string, unknown> | unknown[]): void;
+  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement;
+  updateData(value: Record<string, unknown>): void;
 }
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-data-display': DataDisplayComponent;
+  }
+} //# sourceMappingURL=data-display.d.ts.map
+//#endregion
+export { DataDisplayComponent, FormattingOptions };
 //# sourceMappingURL=data-display.d.ts.map

package/dist/data-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-display.d.ts","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,qBAAa,oBAAqB,SAAQ,WAAW;IACnD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IACnD,OAAO,EAAE,UAAU,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;;IAyBxB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAE,iBAAsB,GAAG,MAAM;IAchE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE;IA+ClD,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,GAAG,WAAW;IAY5E,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAQtC"}
+{"version":3,"file":"data-display.d.ts","names":[],"sources":["../src/data-display.ts"],"mappings":";;;;KAMY,iBAAA;EAAA,SACD,SAAA;EAAA,SACA,YAAA;AAAA;AAAA,cAIE,oBAAA,SAA6B,UAAA;EAAA,OACxB,MAAA,EADgB,KAAA,CACV,SAAA;EAkBtB,aAAA,EAAe,MAAA;EACf,UAAA,EAAY,WAAA;;EAOH,iBAAA,CAAA;EAKT,WAAA,CAAY,CAAA,WAAY,OAAA,GAAS,iBAAA;EAoBjC,WAAA,CAAY,CAAA,EAAG,MAAA;EA8Cf,WAAA,CAAY,IAAA,UAAc,IAAA,IAAQ,MAAA,EAAQ,WAAA,YAAuB,WAAA;EAajE,UAAA,CAAW,KAAA,EAAO,MAAA;AAAA;AAAA,QAUZ,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,oBAAA;EAAA;AAAA"}

package/dist/data-display.js

@@ -1,110 +1,101 @@
-import { Records } from "ixfx";
-import { round } from "ixfx/numbers.js";
-export class DataDisplayComponent extends HTMLElement {
-    constructor() {
-        super();
-        this._shadow = this.attachShadow({ mode: `open` });
-        this._container = document.createElement(`section`);
-        const style = document.createElement(`style`);
-        style.textContent = `
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { c as round } from "./dist-D7kJgnSE.js";
+import { i as records_exports } from "./dist-By5URG0Y.js";
+import { LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+//#region src/data-display.ts
+var _DataDisplayComponent;
+let DataDisplayComponent = class DataDisplayComponent extends LitElement {
+	static {
+		_DataDisplayComponent = this;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+    }
     section {
-      background: white;
-      color: black;
-      border: 2px solid hsl(0deg 0.61% 90%);
-      padding: 1em;
-      font-family: monospace;
-      display:grid;
-      grid-template-cols: repeat(2, 1fr);
+      background: var(--surface-3);
+      color: var(--surface-2-text);
+      border: var(--border);
+      padding: var(--space-m);
+      font-family: var(--font-mono);
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
     }
     div {
-      border:1px solid black;
-    }
-    `;
-        this._shadow.append(style, this._container);
-    }
-    formatValue(v, options = {}) {
-        if (v === null)
-            return `(null)`;
-        if (v === undefined)
-            return `(undefined)`;
-        if (typeof v === `boolean`)
-            return v ? `true` : `false`;
-        if (typeof v === `string`)
-            return `"${v}"`;
-        if (typeof v === `number`) {
-            let vAsNumber = v;
-            if (options.roundNumbers !== undefined)
-                vAsNumber = round(options.roundNumbers, v);
-            if (options.precision !== undefined)
-                return vAsNumber.toFixed(options.precision);
-            return vAsNumber.toString();
-        }
-        return JSON.stringify(v);
-    }
-    displayData(o) {
-        if (o === null) {
-            this.innerHTML = ``;
-            return;
-        }
-        for (const [key, value] of Object.entries(o)) {
-            const domKey = `path-${key}`;
-            if (typeof value === `object`) {
-                const element = this.getOrCreate(domKey, (parent) => {
-                    parent.classList.add(`row`, `nested`);
-                    const label = document.createElement(`label`);
-                    label.textContent = key;
-                    const valueElement = new DataDisplayComponent();
-                    parent.append(label, valueElement);
-                });
-                const valueElement = element.querySelector(`data-display`);
-                if (valueElement !== null) {
-                    valueElement.update(value);
-                }
-            }
-            else {
-                const element = this.getOrCreate(domKey, (parent) => {
-                    parent.classList.add(`row`);
-                    const label = document.createElement(`label`);
-                    label.textContent = key;
-                    const valueElement = document.createElement(`div`);
-                    valueElement.textContent = this.formatValue(value);
-                    parent.append(label, valueElement);
-                });
-                const valueElement = element.querySelector(`div`);
-                if (valueElement === null) {
-                    console.warn(`data-display.displayData Unexpected case?`);
-                    //debugger;
-                }
-                else {
-                    valueElement.innerHTML = this.formatValue(value);
-                }
-            }
-        }
-        // const paths = getFieldPaths(o);
-        // console.log(`paths: ${ JSON.stringify(paths) }`);
-        // for (const path of paths) {
-        // }
-    }
-    getOrCreate(path, init) {
-        const element = this._shadow.getElementById(path);
-        if (element !== null)
-            return element;
-        const elementCreated = document.createElement(`div`);
-        elementCreated.id = path;
-        if (init)
-            init(elementCreated);
-        this._container.append(elementCreated);
-        return elementCreated;
-    }
-    update(value) {
-        if (this.previousValue === undefined) {
-            this.displayData(value);
-        }
-        else {
-            this.displayData(Records.changedObjectDataFields(this.previousValue, value));
-        }
-        this.previousValue = value;
+      border: var(--border-subtle);
     }
-}
-customElements.define(`data-display`, DataDisplayComponent);
+  `;
+	}
+	constructor() {
+		super();
+		this._container = document.createElement(`section`);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.renderRoot.append(this._container);
+	}
+	formatValue(v, options = {}) {
+		if (v === null) return `(null)`;
+		if (v === void 0) return `(undefined)`;
+		if (typeof v === `boolean`) return v ? `true` : `false`;
+		if (typeof v === `string`) return `"${v}"`;
+		if (typeof v === `number`) {
+			let vAsNumber = v;
+			if (options.roundNumbers !== void 0) vAsNumber = round(options.roundNumbers, v);
+			if (options.precision !== void 0) return vAsNumber.toFixed(options.precision);
+			return vAsNumber.toString();
+		}
+		return JSON.stringify(v);
+	}
+	displayData(o) {
+		if (o === null) {
+			this.innerHTML = ``;
+			return;
+		}
+		for (const [key, value] of Object.entries(o)) {
+			const domKey = `path-${key}`;
+			if (typeof value === `object`) {
+				const valueElement = this.getOrCreate(domKey, (parent) => {
+					parent.classList.add(`row`, `nested`);
+					const label = document.createElement(`label`);
+					label.textContent = key;
+					const valueElement = new _DataDisplayComponent();
+					parent.append(label, valueElement);
+				}).querySelector(`ixfx-data-display`);
+				if (valueElement !== null) valueElement.updateData(value);
+			} else {
+				const valueElement = this.getOrCreate(domKey, (parent) => {
+					parent.classList.add(`row`);
+					const label = document.createElement(`label`);
+					label.textContent = key;
+					const valueElement = document.createElement(`div`);
+					valueElement.textContent = this.formatValue(value);
+					parent.append(label, valueElement);
+				}).querySelector(`div`);
+				if (valueElement === null) console.warn(`data-display.displayData Unexpected case?`);
+				else valueElement.innerHTML = this.formatValue(value);
+			}
+		}
+	}
+	getOrCreate(path, init) {
+		const element = this.renderRoot.querySelector(`#${path}`);
+		if (element !== null) return element;
+		const elementCreated = document.createElement(`div`);
+		elementCreated.id = path;
+		if (init) init(elementCreated);
+		this._container.append(elementCreated);
+		return elementCreated;
+	}
+	updateData(value) {
+		if (this.previousValue === void 0) this.displayData(value);
+		else this.displayData(records_exports.changedProperties(this.previousValue, value));
+		this.previousValue = value;
+	}
+};
+DataDisplayComponent = _DataDisplayComponent = __decorate([customElement(`ixfx-data-display`)], DataDisplayComponent);
+//#endregion
+export { DataDisplayComponent };
+
 //# sourceMappingURL=data-display.js.map

package/dist/data-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-display.js","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"data-display.js","names":["Records"],"sources":["../src/data-display.ts"],"sourcesContent":["import { Records } from \"@ixfx/core\";\nimport { round } from \"@ixfx/numbers\";\n\nimport { css, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nexport type FormattingOptions = {\n  readonly precision?: number;\n  readonly roundNumbers?: number;\n};\n\n@customElement(`ixfx-data-display`)\nexport class DataDisplayComponent extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n    section {\n      background: var(--surface-3);\n      color: var(--surface-2-text);\n      border: var(--border);\n      padding: var(--space-m);\n      font-family: var(--font-mono);\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n    }\n    div {\n      border: var(--border-subtle);\n    }\n  `;\n\n  previousValue: Record<string, unknown> | undefined;\n  _container: HTMLElement;\n\n  constructor() {\n    super();\n    this._container = document.createElement(`section`);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.renderRoot.append(this._container);\n  }\n\n  formatValue(v: unknown, options: FormattingOptions = {}): string {\n    if (v === null)\n      return `(null)`;\n    if (v === undefined)\n      return `(undefined)`;\n    if (typeof v === `boolean`)\n      return v ? `true` : `false`;\n    if (typeof v === `string`)\n      return `\"${v}\"`;\n    if (typeof v === `number`) {\n      let vAsNumber = v;\n      if (options.roundNumbers !== undefined)\n        vAsNumber = round(options.roundNumbers, v);\n      if (options.precision !== undefined)\n        return vAsNumber.toFixed(options.precision);\n      return vAsNumber.toString();\n    }\n    return JSON.stringify(v);\n  }\n\n  displayData(o: Record<string, unknown> | unknown[]) {\n    if (o === null) {\n      this.innerHTML = ``;\n      return;\n    }\n    for (const [key, value] of Object.entries(o)) {\n      const domKey = `path-${key}`;\n      if (typeof value === `object`) {\n        const element = this.getOrCreate(domKey, (parent) => {\n          parent.classList.add(`row`, `nested`);\n          const label = document.createElement(`label`);\n          label.textContent = key;\n          const valueElement = new DataDisplayComponent();\n          parent.append(label, valueElement);\n        });\n        const valueElement = element.querySelector<DataDisplayComponent>(`ixfx-data-display`);\n        if (valueElement !== null) {\n          valueElement.updateData(value as Record<string, unknown>);\n        }\n      } else {\n        const element = this.getOrCreate(domKey, (parent) => {\n          parent.classList.add(`row`);\n          const label = document.createElement(`label`);\n          label.textContent = key;\n          const valueElement = document.createElement(`div`);\n          valueElement.textContent = this.formatValue(value);\n          parent.append(label, valueElement);\n        });\n        const valueElement = element.querySelector(`div`);\n        if (valueElement === null) {\n          console.warn(`data-display.displayData Unexpected case?`);\n          // debugger;\n        } else {\n          valueElement.innerHTML = this.formatValue(value);\n        }\n      }\n    }\n\n    // const paths = getFieldPaths(o);\n    // console.log(`paths: ${ JSON.stringify(paths) }`);\n\n    // for (const path of paths) {\n\n    // }\n  }\n\n  getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement {\n    const element = this.renderRoot.querySelector(`#${path}`) as HTMLElement | null;\n    if (element !== null)\n      return element;\n\n    const elementCreated = document.createElement(`div`);\n    elementCreated.id = path;\n    if (init)\n      init(elementCreated);\n    this._container.append(elementCreated);\n    return elementCreated;\n  }\n\n  updateData(value: Record<string, unknown>) {\n    if (this.previousValue === undefined) {\n      this.displayData(value);\n    } else {\n      this.displayData(Records.changedProperties(this.previousValue, value));\n    }\n    this.previousValue = value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-data-display': DataDisplayComponent;\n  }\n}"],"mappings":";;;;;;;AAYO,IAAA,uBAAA,MAAM,6BAA6B,WAAW;;;;;gBAC1B,GAAG;;;;;;;;;;;;;;;;;;CAqB5B,cAAc;AACZ,SAAO;AACP,OAAK,aAAa,SAAS,cAAc,UAAU;;CAGrD,oBAA6B;AAC3B,QAAM,mBAAmB;AACzB,OAAK,WAAW,OAAO,KAAK,WAAW;;CAGzC,YAAY,GAAY,UAA6B,EAAE,EAAU;AAC/D,MAAI,MAAM,KACR,QAAO;AACT,MAAI,MAAM,KAAA,EACR,QAAO;AACT,MAAI,OAAO,MAAM,UACf,QAAO,IAAI,SAAS;AACtB,MAAI,OAAO,MAAM,SACf,QAAO,IAAI,EAAE;AACf,MAAI,OAAO,MAAM,UAAU;GACzB,IAAI,YAAY;AAChB,OAAI,QAAQ,iBAAiB,KAAA,EAC3B,aAAY,MAAM,QAAQ,cAAc,EAAE;AAC5C,OAAI,QAAQ,cAAc,KAAA,EACxB,QAAO,UAAU,QAAQ,QAAQ,UAAU;AAC7C,UAAO,UAAU,UAAU;;AAE7B,SAAO,KAAK,UAAU,EAAE;;CAG1B,YAAY,GAAwC;AAClD,MAAI,MAAM,MAAM;AACd,QAAK,YAAY;AACjB;;AAEF,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,EAAE,EAAE;GAC5C,MAAM,SAAS,QAAQ;AACvB,OAAI,OAAO,UAAU,UAAU;IAQ7B,MAAM,eAPU,KAAK,YAAY,SAAS,WAAW;AACnD,YAAO,UAAU,IAAI,OAAO,SAAS;KACrC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,WAAM,cAAc;KACpB,MAAM,eAAe,IAAA,uBAA0B;AAC/C,YAAO,OAAO,OAAO,aAAa;MAER,CAAC,cAAoC,oBAAoB;AACrF,QAAI,iBAAiB,KACnB,cAAa,WAAW,MAAiC;UAEtD;IASL,MAAM,eARU,KAAK,YAAY,SAAS,WAAW;AACnD,YAAO,UAAU,IAAI,MAAM;KAC3B,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,WAAM,cAAc;KACpB,MAAM,eAAe,SAAS,cAAc,MAAM;AAClD,kBAAa,cAAc,KAAK,YAAY,MAAM;AAClD,YAAO,OAAO,OAAO,aAAa;MAER,CAAC,cAAc,MAAM;AACjD,QAAI,iBAAiB,KACnB,SAAQ,KAAK,4CAA4C;QAGzD,cAAa,YAAY,KAAK,YAAY,MAAM;;;;CAaxD,YAAY,MAAc,MAAmD;EAC3E,MAAM,UAAU,KAAK,WAAW,cAAc,IAAI,OAAO;AACzD,MAAI,YAAY,KACd,QAAO;EAET,MAAM,iBAAiB,SAAS,cAAc,MAAM;AACpD,iBAAe,KAAK;AACpB,MAAI,KACF,MAAK,eAAe;AACtB,OAAK,WAAW,OAAO,eAAe;AACtC,SAAO;;CAGT,WAAW,OAAgC;AACzC,MAAI,KAAK,kBAAkB,KAAA,EACzB,MAAK,YAAY,MAAM;MAEvB,MAAK,YAAYA,gBAAQ,kBAAkB,KAAK,eAAe,MAAM,CAAC;AAExE,OAAK,gBAAgB;;;2DAtHxB,cAAc,oBAAoB,CAAA,EAAA,qBAAA"}

package/dist/decorate-BZbkqIhA.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+function __decorate(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;
+}
+//#endregion
+export { __decorate as t };

package/dist/defaults-FEZaGiYZ.js

@@ -0,0 +1,38 @@
+import { i as registerIcon } from "./registry-CZEB1YI9.js";
+//#region src/icons/defaults.ts
+/**
+* Chevron pointing down. Used for split-button dropdown toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>`;
+/**
+* Caret pointing right. Used for tree-basic expand indicator as a CSS mask.
+* fill="black" is correct for CSS mask-image use (shape only, color comes from background-color).
+*/
+const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10 7l6 5-6 5V7z"/></svg>`;
+/**
+* Checkmark. Useful for menu-check-item or confirmation states.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
+/**
+* Close / X icon. Useful for dialogs, notifications, dismissible elements.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
+/**
+* Chevron pointing right. Used for split-button switcher toggle.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+function registerDefaults() {
+	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
+	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
+	registerIcon(`caret-right`, ICON_CARET_RIGHT);
+	registerIcon(`check`, ICON_CHECK);
+	registerIcon(`close`, ICON_CLOSE);
+}
+//#endregion
+export { registerDefaults as a, ICON_CLOSE as i, ICON_CHECK as n, ICON_CHEVRON_DOWN as r, ICON_CARET_RIGHT as t };
+
+//# sourceMappingURL=defaults-FEZaGiYZ.js.map

package/dist/defaults-FEZaGiYZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults-FEZaGiYZ.js","names":[],"sources":["../src/icons/defaults.ts"],"sourcesContent":["import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,qBAAqB;AAElC,SAAgB,mBAAyB;AACvC,cAAa,gBAAgB,kBAAkB;AAC/C,cAAa,iBAAiB,mBAAmB;AACjD,cAAa,eAAe,iBAAiB;AAC7C,cAAa,SAAS,WAAW;AACjC,cAAa,SAAS,WAAW"}