@ixfx/components 0.7.4 → 0.8.0

package/dist/narrowed-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"narrowed-text.js","names":["#onNarrowedTextInit","#onItemClick","#handleSlotChange","#onContainerClick","#onInput","#onKeyDown","#onFocus","#onBlur","#onFocusTriggerClick","#renderItem","customElement"],"sources":["../src/narrowed-text/narrowed-text.ts"],"sourcesContent":["import type { CommandRegistry } from '@clinth/ui-commands';\nimport type { PropertyValues } from 'lit';\nimport type { IncrSearch, IncrSearchState } from '../incr-search/index.js';\nimport type {\n  NarrowedTextChangeDetail,\n  NarrowedTextItem,\n  Orientation,\n  SelectionMode,\n} from './types.js';\nimport { createCommandRegistry } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport {\n  applyHighlights,\n  buildHighlightTargets,\n  clearHighlights,\n  createIncrSearch,\n} from '../incr-search/index.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nconst HIGHLIGHT_KEY = `narrowed-text-highlight`;\n\n@customElement(`ixfx-narrowed-text`)\nexport class NarrowedTextElement extends LitElement {\n  @property({ type: String, attribute: `selection-mode` }) selectionMode: SelectionMode = `single`;\n  @property({ type: Boolean, attribute: `required-selection` }) requiredSelection = false;\n  @property({ type: String, attribute: `orientation` }) orientation: Orientation = `horizontal`;\n  @property({ type: Boolean, attribute: `nowrap` }) nowrap = false;\n  @property({ type: String, attribute: `separator` }) separator = ` `;\n  @property({ type: String, attribute: `width` }) width: string | undefined;\n  @property({ type: String, attribute: `height` }) height: string | undefined;\n  @property({ type: Boolean, attribute: `preserve-filter` }) preserveFilter = false;\n  @property({ type: String }) value = ``;\n\n  @property({ attribute: false })\n  registry: CommandRegistry<unknown> | undefined = undefined;\n\n  @state() private _query = ``;\n  @state() private _computedItems: NarrowedTextItem[] = [];\n  @state() private _filteredItems: NarrowedTextItem[] = [];\n  @state() private _isFocused = false;\n  @query(`slot`) private _slot!: HTMLSlotElement;\n\n  private _selectedValues: Set<string> = new Set();\n  private _ownedRegistry: CommandRegistry<unknown> | undefined;\n  private _search: IncrSearch<NarrowedTextItem> = createIncrSearch<NarrowedTextItem>({\n    selector: item => item.label ?? item.value,\n  });\n\n  private _searchState: IncrSearchState<NarrowedTextItem> | undefined;\n  private _unsubSearch: (() => void) | undefined;\n\n  // TickledController manages hover and keyboard focus\n  private tickled = new TickledController<number>(this, {\n    getItems: () => {\n      return this._filteredItems.map((_, i) => ({\n        id: i,\n        enabled: true,\n      }));\n    },\n    onTickle: (id) => {\n      if (id === undefined || !this.shadowRoot)\n        return;\n      const itemsContainer = this.shadowRoot.querySelector(`.items`);\n      if (!itemsContainer)\n        return;\n      const itemEls = itemsContainer.querySelectorAll(`.item`);\n      const itemEl = itemEls[id];\n      if (itemEl) {\n        itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });\n      }\n    },\n  });\n\n  get selected(): string | string[] {\n    if (this.selectionMode === `single`) {\n      return this._selectedValues.values().next().value ?? ``;\n    } else {\n      return [...this._selectedValues];\n    }\n  }\n\n  set selected(value: string | string[]) {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (value) {\n        this._selectedValues.add(value as string);\n      }\n    } else {\n      this._selectedValues.clear();\n      if (Array.isArray(value)) {\n        value.forEach(v => this._selectedValues.add(v));\n      }\n    }\n\n    this._updateFilteredItems();\n  }\n\n  selectAll(): void {\n    const items = this._filteredItems;\n    if (items.length === 0)\n      return;\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      this._selectedValues.add(items[0].value);\n    } else {\n      this._selectedValues.clear();\n      for (const item of items) {\n        this._selectedValues.add(item.value);\n      }\n    }\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: {\n        item: undefined,\n        query: this._query,\n        selected: this._computedItems.filter(i => this._selectedValues.has(i.value)),\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  deselectAll(): void {\n    if (this.requiredSelection && this._selectedValues.size <= 1)\n      return;\n    if (this._selectedValues.size === 0)\n      return;\n    this._selectedValues.clear();\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: {\n        item: undefined,\n        query: this._query,\n        selected: [],\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._unsubSearch = this._search.onChange((state) => {\n      const results = state.results.map(r => r.item);\n      for (const item of this._computedItems) {\n        if (this._selectedValues.has(item.value) && !results.includes(item)) {\n          results.push(item);\n        }\n      }\n      this._filteredItems = results;\n      this._searchState = state;\n      this.requestUpdate();\n    });\n    this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n\n    const registry = this._ownedRegistry = createCommandRegistry();\n    registry.register({\n      id: `select-all`,\n      label: `Select All`,\n      description: `Select every currently-filtered item (or first in single mode)`,\n      execute: () => this.selectAll(),\n    });\n    registry.register({\n      id: `deselect-all`,\n      label: `Deselect All`,\n      description: `Clear all selection`,\n      execute: () => this.deselectAll(),\n    });\n    this.registry = registry;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unsubSearch?.();\n    this._search.dispose();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n    this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n    if (this._ownedRegistry) {\n      this._ownedRegistry.unregister(`select-all`);\n      this._ownedRegistry.unregister(`deselect-all`);\n      this._ownedRegistry = undefined;\n      this.registry = undefined;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    this._updateComputedItems();\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(`value`)) {\n      this._updateSelectedFromValue();\n    }\n    this._applyHighlights();\n  }\n\n  #handleSlotChange = (): void => {\n    this._updateComputedItems();\n  };\n\n  private _updateComputedItems(): void {\n    const slottedElements = this.querySelectorAll(`[data-value]`);\n    const items: NarrowedTextItem[] = [];\n\n    slottedElements.forEach((el) => {\n      const value = el.getAttribute(`data-value`) ?? ``;\n      const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;\n      const description = el.getAttribute(`data-description`) ?? undefined;\n      const iconName = el.getAttribute(`data-icon-name`) ?? undefined;\n\n      items.push({ value, label, description, iconName });\n    });\n\n    this._computedItems = items;\n    void this._search.setItems(items);\n  }\n\n  private _updateSelectedFromValue(): void {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (this.value) {\n        this._selectedValues.add(this.value);\n      }\n    } else {\n      const values = this.value.split(`,`).filter(v => v.trim());\n      this._selectedValues.clear();\n      values.forEach(v => this._selectedValues.add(v.trim()));\n    }\n\n    this._updateFilteredItems();\n  }\n\n  private _updateFilteredItems(): void {\n    void this._search.setQuery(this._query);\n  }\n\n  private _applyHighlights(): void {\n    if (!this._query.trim() || !this._searchState || !this.shadowRoot) {\n      clearHighlights({ key: HIGHLIGHT_KEY });\n      return;\n    }\n\n    const targets = buildHighlightTargets(\n      this.shadowRoot,\n      `.item-label`,\n      this._searchState.positionsByItem,\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        return this._computedItems.find(i => i.value === v);\n      },\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        const i = this._computedItems.find(x => x.value === v);\n        return i?.label ?? i?.value ?? ``;\n      },\n    );\n    applyHighlights(targets, { key: HIGHLIGHT_KEY });\n  }\n\n  #onInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this._query = input.value;\n    // Reset tickled to first item when query changes\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    } else {\n      this.tickled.clearTickled();\n    }\n    this._updateFilteredItems();\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    if (this._filteredItems.length === 0) {\n      return;\n    }\n\n    switch (e.key) {\n      case `Tab`: {\n        if (e.shiftKey) {\n          e.preventDefault();\n          this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {\n            bubbles: true,\n            composed: true,\n          }));\n        }\n        return;\n      }\n      case `ArrowRight`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowLeft`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `ArrowDown`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowUp`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n        if (tickledItem) {\n          this._selectItem(tickledItem, false);\n          // Enter always clears filter regardless of preserveFilter\n          this._query = ``;\n          this._updateFilteredItems();\n        }\n        break;\n      }\n      case ` `: {\n        e.preventDefault();\n        if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {\n          this._selectItem(this._filteredItems[this.tickled.tickledId], false);\n        }\n        break;\n      }\n      case `Escape`: {\n        e.preventDefault();\n        this._query = ``;\n        this.tickled.clearTickled();\n        this._updateFilteredItems();\n        break;\n      }\n    }\n  };\n\n  #onFocus = (): void => {\n    this._isFocused = true;\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    }\n  };\n\n  #onNarrowedTextInit = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      requestAnimationFrame(() => {\n        input.focus();\n      });\n    }\n  };\n\n  focus(): void {\n    // Override focus to focus internal input\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.focus();\n    } else {\n      super.focus();\n    }\n  }\n\n  blur(): void {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.blur();\n    } else {\n      super.blur();\n    }\n  };\n\n  setContents(contents: NarrowedTextItem[]): void {\n    while (this.firstChild) {\n      this.firstChild.remove();\n    }\n\n    for (const item of contents) {\n      const span = document.createElement(`span`);\n      span.setAttribute(`data-value`, item.value);\n      if (item.label !== undefined)\n        span.setAttribute(`data-label`, item.label);\n      if (item.description !== undefined)\n        span.setAttribute(`data-description`, item.description);\n      if (item.iconName !== undefined)\n        span.setAttribute(`data-icon-name`, item.iconName);\n      this.appendChild(span);\n    }\n\n    this._selectedValues.clear();\n    const selectedValues = contents.filter(i => i.selected).map(i => i.value);\n    for (const v of selectedValues) {\n      this._selectedValues.add(v);\n    }\n\n    if (selectedValues.length > 0) {\n      this.requestUpdate();\n    }\n  }\n\n  deleteItem(value: string): boolean {\n    const el = this.querySelector(`[data-value=\"${CSS.escape(value)}\"]`);\n    if (!el)\n      return false;\n    el.remove();\n    this._selectedValues.delete(value);\n    return true;\n  }\n\n  #onBlur = (): void => {\n    this._isFocused = false;\n    this.tickled.clearTickled();\n    this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));\n  };\n\n  #onFocusTriggerClick = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onContainerClick = (e: MouseEvent): void => {\n    const target = e.target as HTMLElement;\n    if (target.classList.contains(`item`) || target.closest(`.item`)) {\n      return;\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onItemClick(item: NarrowedTextItem): void {\n    this._selectItem(item);\n    const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);\n    if (clickedIndex >= 0) {\n      this.tickled.handlePointerEnter(clickedIndex);\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  }\n\n  private _selectItem(item: NarrowedTextItem, clearFilter = true): void {\n    if (this.selectionMode === `single`) {\n      if (this._selectedValues.has(item.value) && !this.requiredSelection) {\n        this._selectedValues.clear();\n      } else {\n        this._selectedValues.clear();\n        this._selectedValues.add(item.value);\n      }\n    } else {\n      if (this._selectedValues.has(item.value)) {\n        if (!this.requiredSelection || this._selectedValues.size > 1) {\n          this._selectedValues.delete(item.value);\n        }\n      } else {\n        this._selectedValues.add(item.value);\n      }\n    }\n\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n\n    const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));\n\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: { item, query: this._query, selected: selectedItems },\n      bubbles: true,\n      composed: true,\n    }));\n\n    if (clearFilter && !this.preserveFilter && this._query) {\n      this._query = ``;\n      this._updateFilteredItems();\n    }\n  }\n\n  private _updateValueFromSelected(): void {\n    if (this.selectionMode === `single`) {\n      this.value = [...this._selectedValues][0] ?? ``;\n    } else {\n      this.value = [...this._selectedValues].join(`,`);\n    }\n  }\n\n  #renderItem(item: NarrowedTextItem, index: number) {\n    const isTickled = this.tickled.isTickled(index);\n    const isSelected = this._selectedValues.has(item.value);\n    const label = item.label ?? item.value;\n\n    return html`\n      <div\n        class=\"item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}\"\n        part=\"item\"\n        role=\"option\"\n        aria-selected=${isSelected}\n        @click=${() => this.#onItemClick(item)}\n        @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n      >\n        ${item.iconName ? html`<ixfx-icon class=\"item-icon\" name=${item.iconName}></ixfx-icon>` : nothing}\n        <span class=\"item-label\" part=\"label\" data-item-value=${item.value}>${label}</span>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const isScrollable = this.width !== undefined || this.height !== undefined;\n\n    return html`\n      <slot @slotchange=${this.#handleSlotChange} style=\"display: none;\"></slot>\n      <div\n        class=\"container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}\"\n        part=\"container\"\n        style=${this._getContainerStyle()}\n        data-input-mode=${this.tickled.inputMode}\n        @click=${this.#onContainerClick}\n      >\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          .value=${this._query}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-label=\"Search items\"\n          @input=${this.#onInput}\n          @keydown=${this.#onKeyDown}\n          @focus=${this.#onFocus}\n          @blur=${this.#onBlur}\n        >\n        <div class=\"focus-trigger\" @click=${this.#onFocusTriggerClick}></div>\n        <div \n          class=\"items\" \n          part=\"items\" \n          role=\"listbox\"\n          @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n        >\n          ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}\n        </div>\n      </div>\n    `;\n  }\n\n  private _getContainerStyle(): string {\n    const styles: string[] = [];\n    if (this.width) {\n      styles.push(`width: ${this.width}`);\n    }\n    if (this.height) {\n      styles.push(`height: ${this.height}`);\n    }\n    return styles.join(`; `);\n  }\n\n  static override styles = [themeFallbacks, tickledStyles, tickledItemStyles, css`\n    :host {\n      display: inline-block;\n      position: relative;\n      font-family: var(--font-family, system-ui, sans-serif);\n      font-size: var(--text-m, 12px);\n      color: var(--surface-2-text);\n      --item-padding: var(--space-xs, 3px) var(--space-m, 8px);\n      --item-border-radius: var(--radius-s, 3px);\n      --item-icon-spacing: var(--space-xs, 3px);\n    }\n\n    .container {\n      display: flex;\n      position: relative;\n      min-width: min-content;\n      min-height: min-content;\n    }\n\n    .container.horizontal {\n      flex-direction: row;\n      align-items: stretch;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .container.scrollable {\n      scrollbar-width: none;\n      overflow-x: auto;\n      overflow-y: hidden;\n      .vertical {\n        overflow-x: hidden;\n        overflow-y: auto;\n      }\n    }\n\n    .container.focused {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .search-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: text;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .search-input:focus {\n      outline: none;\n    }\n\n    .focus-trigger {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 0;\n      cursor: text;\n    }\n\n    .items {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--item-spacing, var(--space-xs, 3px));\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      min-height: var(--item-height, 28px);\n      position: relative;\n      z-index: 2;\n      pointer-events: auto;\n    }\n\n    .container.horizontal .items {\n      flex-direction: row;\n    }\n\n    .container.vertical .items {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    :host([nowrap]) .items {\n      flex-wrap: nowrap;\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: 1em;\n      height: 1em;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: var(--item-label-color, var(--item-text, inherit));\n      font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));\n      text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));\n      text-underline-offset: var(--item-label-text-underline-offset, auto);\n    }\n\n    .item.selected .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n    }\n\n    .item.tickled .item-label {\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    .item.active .item-label {\n      --item-label-color: var(--item-text-selected);\n    }\n\n    .item.selected.tickled .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    ::highlight(narrowed-text-highlight) {\n      background: var(--highlight-background, var(--accent));\n      color: var(--highlight-color, var(--accent-text, #fff));\n      border-radius: 2px;\n      padding: 0 1px;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-narrowed-text': NarrowedTextElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"narrowed-text.js","names":["#onNarrowedTextInit","#onItemClick","#handleSlotChange","#onContainerClick","#onInput","#onKeyDown","#onFocus","#onBlur","#onFocusTriggerClick","#renderItem","customElement"],"sources":["../src/narrowed-text/narrowed-text.ts"],"sourcesContent":["import type { CommandRegistry } from '@clinth/ui-commands';\nimport type { PropertyValues } from 'lit';\nimport type { IncrSearch, IncrSearchState } from '../incr-search/index.js';\nimport type {\n  NarrowedTextChangeDetail,\n  NarrowedTextItem,\n  Orientation,\n  SelectionMode,\n} from './types.js';\nimport { createCommandRegistry } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport {\n  applyHighlights,\n  buildHighlightTargets,\n  clearHighlights,\n  createIncrSearch,\n} from '../incr-search/index.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nconst HIGHLIGHT_KEY = `narrowed-text-highlight`;\n\n@customElement(`ixfx-narrowed-text`)\nexport class NarrowedTextElement extends LitElement {\n  @property({ type: String, attribute: `selection-mode` }) selectionMode: SelectionMode = `single`;\n  @property({ type: Boolean, attribute: `required-selection` }) requiredSelection = false;\n  @property({ type: String, attribute: `orientation` }) orientation: Orientation = `horizontal`;\n  @property({ type: Boolean, attribute: `nowrap` }) nowrap = false;\n  @property({ type: String, attribute: `separator` }) separator = ` `;\n  @property({ type: String, attribute: `width` }) width: string | undefined;\n  @property({ type: String, attribute: `height` }) height: string | undefined;\n  @property({ type: Boolean, attribute: `preserve-filter` }) preserveFilter = false;\n  @property({ type: String }) value = ``;\n\n  @property({ attribute: false })\n  registry: CommandRegistry<unknown> | undefined = undefined;\n\n  @state() private _query = ``;\n  @state() private _computedItems: NarrowedTextItem[] = [];\n  @state() private _filteredItems: NarrowedTextItem[] = [];\n  @state() private _isFocused = false;\n  @query(`slot`) private _slot!: HTMLSlotElement;\n\n  private _selectedValues: Set<string> = new Set();\n  private _ownedRegistry: CommandRegistry<unknown> | undefined;\n  private _search: IncrSearch<NarrowedTextItem> = createIncrSearch<NarrowedTextItem>({\n    selector: item => item.label ?? item.value,\n  });\n\n  private _searchState: IncrSearchState<NarrowedTextItem> | undefined;\n  private _unsubSearch: (() => void) | undefined;\n\n  // TickledController manages hover and keyboard focus\n  private tickled = new TickledController<number>(this, {\n    getItems: () => {\n      return this._filteredItems.map((_, i) => ({\n        id: i,\n        enabled: true,\n      }));\n    },\n    onTickle: (id) => {\n      if (id === undefined || !this.shadowRoot)\n        return;\n      const itemsContainer = this.shadowRoot.querySelector(`.items`);\n      if (!itemsContainer)\n        return;\n      const itemEls = itemsContainer.querySelectorAll(`.item`);\n      const itemEl = itemEls[id];\n      if (itemEl) {\n        itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });\n      }\n    },\n  });\n\n  get selected(): string | string[] {\n    if (this.selectionMode === `single`) {\n      return this._selectedValues.values().next().value ?? ``;\n    } else {\n      return [...this._selectedValues];\n    }\n  }\n\n  set selected(value: string | string[]) {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (value) {\n        this._selectedValues.add(value as string);\n      }\n    } else {\n      this._selectedValues.clear();\n      if (Array.isArray(value)) {\n        value.forEach(v => this._selectedValues.add(v));\n      }\n    }\n\n    this._updateFilteredItems();\n  }\n\n  selectAll(): void {\n    const items = this._filteredItems;\n    if (items.length === 0)\n      return;\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      this._selectedValues.add(items[0].value);\n    } else {\n      this._selectedValues.clear();\n      for (const item of items) {\n        this._selectedValues.add(item.value);\n      }\n    }\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: {\n        item: undefined,\n        query: this._query,\n        selected: this._computedItems.filter(i => this._selectedValues.has(i.value)),\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  deselectAll(): void {\n    if (this.requiredSelection && this._selectedValues.size <= 1)\n      return;\n    if (this._selectedValues.size === 0)\n      return;\n    this._selectedValues.clear();\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: {\n        item: undefined,\n        query: this._query,\n        selected: [],\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._unsubSearch = this._search.onChange((state) => {\n      const results = state.results.map(r => r.item);\n      for (const item of this._computedItems) {\n        if (this._selectedValues.has(item.value) && !results.includes(item)) {\n          results.push(item);\n        }\n      }\n      this._filteredItems = results;\n      this._searchState = state;\n      this.requestUpdate();\n    });\n    this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n\n    const registry = this._ownedRegistry = createCommandRegistry();\n    registry.register({\n      id: `select-all`,\n      label: `Select All`,\n      description: `Select every currently-filtered item (or first in single mode)`,\n      execute: () => this.selectAll(),\n    });\n    registry.register({\n      id: `deselect-all`,\n      label: `Deselect All`,\n      description: `Clear all selection`,\n      execute: () => this.deselectAll(),\n    });\n    this.registry = registry;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unsubSearch?.();\n    this._search.dispose();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n    this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n    if (this._ownedRegistry) {\n      this._ownedRegistry.unregister(`select-all`);\n      this._ownedRegistry.unregister(`deselect-all`);\n      this._ownedRegistry = undefined;\n      this.registry = undefined;\n    }\n  }\n\n  protected override firstUpdated(): void {\n    this._updateComputedItems();\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(`value`)) {\n      this._updateSelectedFromValue();\n    }\n    this._applyHighlights();\n  }\n\n  #handleSlotChange = (): void => {\n    this._updateComputedItems();\n  };\n\n  private _updateComputedItems(): void {\n    const slottedElements = this.querySelectorAll(`[data-value]`);\n    const items: NarrowedTextItem[] = [];\n\n    slottedElements.forEach((el) => {\n      const value = el.getAttribute(`data-value`) ?? ``;\n      const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;\n      const description = el.getAttribute(`data-description`) ?? undefined;\n      const iconName = el.getAttribute(`data-icon-name`) ?? undefined;\n\n      items.push({ value, label, description, iconName });\n    });\n\n    this._computedItems = items;\n    void this._search.setItems(items);\n  }\n\n  private _updateSelectedFromValue(): void {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (this.value) {\n        this._selectedValues.add(this.value);\n      }\n    } else {\n      const values = this.value.split(`,`).filter(v => v.trim());\n      this._selectedValues.clear();\n      values.forEach(v => this._selectedValues.add(v.trim()));\n    }\n\n    this._updateFilteredItems();\n  }\n\n  private _updateFilteredItems(): void {\n    void this._search.setQuery(this._query);\n  }\n\n  private _applyHighlights(): void {\n    if (!this._query.trim() || !this._searchState || !this.shadowRoot) {\n      clearHighlights({ key: HIGHLIGHT_KEY });\n      return;\n    }\n\n    const targets = buildHighlightTargets(\n      this.shadowRoot,\n      `.item-label`,\n      this._searchState.positionsByItem,\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        return this._computedItems.find(i => i.value === v);\n      },\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        const i = this._computedItems.find(x => x.value === v);\n        return i?.label ?? i?.value ?? ``;\n      },\n    );\n    applyHighlights(targets, { key: HIGHLIGHT_KEY });\n  }\n\n  #onInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this._query = input.value;\n    // Reset tickled to first item when query changes\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    } else {\n      this.tickled.clearTickled();\n    }\n    this._updateFilteredItems();\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    if (this._filteredItems.length === 0) {\n      return;\n    }\n\n    switch (e.key) {\n      case `Tab`: {\n        if (e.shiftKey) {\n          e.preventDefault();\n          this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {\n            bubbles: true,\n            composed: true,\n          }));\n        }\n        return;\n      }\n      case `ArrowRight`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowLeft`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `ArrowDown`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowUp`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n        if (tickledItem) {\n          this._selectItem(tickledItem, false);\n          // Enter always clears filter regardless of preserveFilter\n          this._query = ``;\n          this._updateFilteredItems();\n        }\n        break;\n      }\n      case ` `: {\n        e.preventDefault();\n        if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {\n          this._selectItem(this._filteredItems[this.tickled.tickledId], false);\n        }\n        break;\n      }\n      case `Escape`: {\n        e.preventDefault();\n        this._query = ``;\n        this.tickled.clearTickled();\n        this._updateFilteredItems();\n        break;\n      }\n    }\n  };\n\n  #onFocus = (): void => {\n    this._isFocused = true;\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    }\n  };\n\n  #onNarrowedTextInit = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      requestAnimationFrame(() => {\n        input.focus();\n      });\n    }\n  };\n\n  focus(): void {\n    // Override focus to focus internal input\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.focus();\n    } else {\n      super.focus();\n    }\n  }\n\n  blur(): void {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.blur();\n    } else {\n      super.blur();\n    }\n  };\n\n  setContents(contents: NarrowedTextItem[]): void {\n    while (this.firstChild) {\n      this.firstChild.remove();\n    }\n\n    for (const item of contents) {\n      const span = document.createElement(`span`);\n      span.setAttribute(`data-value`, item.value);\n      if (item.label !== undefined)\n        span.setAttribute(`data-label`, item.label);\n      if (item.description !== undefined)\n        span.setAttribute(`data-description`, item.description);\n      if (item.iconName !== undefined)\n        span.setAttribute(`data-icon-name`, item.iconName);\n      this.appendChild(span);\n    }\n\n    this._selectedValues.clear();\n    const selectedValues = contents.filter(i => i.selected).map(i => i.value);\n    for (const v of selectedValues) {\n      this._selectedValues.add(v);\n    }\n\n    if (selectedValues.length > 0) {\n      this.requestUpdate();\n    }\n  }\n\n  deleteItem(value: string): boolean {\n    const el = this.querySelector(`[data-value=\"${CSS.escape(value)}\"]`);\n    if (!el)\n      return false;\n    el.remove();\n    this._selectedValues.delete(value);\n    return true;\n  }\n\n  #onBlur = (): void => {\n    this._isFocused = false;\n    this.tickled.clearTickled();\n    this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));\n  };\n\n  #onFocusTriggerClick = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onContainerClick = (e: MouseEvent): void => {\n    const target = e.target as HTMLElement;\n    if (target.classList.contains(`item`) || target.closest(`.item`)) {\n      return;\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onItemClick(item: NarrowedTextItem): void {\n    this._selectItem(item);\n    const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);\n    if (clickedIndex >= 0) {\n      this.tickled.handlePointerEnter(clickedIndex);\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  }\n\n  private _selectItem(item: NarrowedTextItem, clearFilter = true): void {\n    if (this.selectionMode === `single`) {\n      if (this._selectedValues.has(item.value) && !this.requiredSelection) {\n        this._selectedValues.clear();\n      } else {\n        this._selectedValues.clear();\n        this._selectedValues.add(item.value);\n      }\n    } else {\n      if (this._selectedValues.has(item.value)) {\n        if (!this.requiredSelection || this._selectedValues.size > 1) {\n          this._selectedValues.delete(item.value);\n        }\n      } else {\n        this._selectedValues.add(item.value);\n      }\n    }\n\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n\n    const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));\n\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: { item, query: this._query, selected: selectedItems },\n      bubbles: true,\n      composed: true,\n    }));\n\n    if (clearFilter && !this.preserveFilter && this._query) {\n      this._query = ``;\n      this._updateFilteredItems();\n    }\n  }\n\n  private _updateValueFromSelected(): void {\n    if (this.selectionMode === `single`) {\n      this.value = [...this._selectedValues][0] ?? ``;\n    } else {\n      this.value = [...this._selectedValues].join(`,`);\n    }\n  }\n\n  #renderItem(item: NarrowedTextItem, index: number) {\n    const isTickled = this.tickled.isTickled(index);\n    const isSelected = this._selectedValues.has(item.value);\n    const label = item.label ?? item.value;\n\n    return html`\n      <div\n        class=\"item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}\"\n        part=\"item\"\n        role=\"option\"\n        aria-selected=${isSelected}\n        @click=${() => this.#onItemClick(item)}\n        @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n      >\n        ${item.iconName ? html`<ixfx-icon class=\"item-icon\" name=${item.iconName}></ixfx-icon>` : nothing}\n        <span class=\"item-label\" part=\"label\" data-item-value=${item.value}>${label}</span>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const isScrollable = this.width !== undefined || this.height !== undefined;\n\n    return html`\n      <slot @slotchange=${this.#handleSlotChange} style=\"display: none;\"></slot>\n      <div\n        class=\"container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}\"\n        part=\"container\"\n        style=${this._getContainerStyle()}\n        data-input-mode=${this.tickled.inputMode}\n        @click=${this.#onContainerClick}\n      >\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          .value=${this._query}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-label=\"Search items\"\n          @input=${this.#onInput}\n          @keydown=${this.#onKeyDown}\n          @focus=${this.#onFocus}\n          @blur=${this.#onBlur}\n        >\n        <div class=\"focus-trigger\" @click=${this.#onFocusTriggerClick}></div>\n        <div \n          class=\"items\" \n          part=\"items\" \n          role=\"listbox\"\n          @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n        >\n          ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}\n        </div>\n      </div>\n    `;\n  }\n\n  private _getContainerStyle(): string {\n    const styles: string[] = [];\n    if (this.width) {\n      styles.push(`width: ${this.width}`);\n    }\n    if (this.height) {\n      styles.push(`height: ${this.height}`);\n    }\n    return styles.join(`; `);\n  }\n\n  static override styles = [themeFallbacks, tickledStyles, tickledItemStyles, css`\n    :host {\n      display: inline-block;\n      position: relative;\n      font-family: var(--font-family, system-ui, sans-serif);\n      font-size: var(--text-m, 12px);\n      color: var(--surface-2-text);\n      --item-padding: var(--space-xs, 3px) var(--space-m, 8px);\n      --item-border-radius: var(--radius-s, 3px);\n      --item-icon-spacing: var(--space-xs, 3px);\n    }\n\n    .container {\n      display: flex;\n      position: relative;\n      min-width: min-content;\n      min-height: min-content;\n    }\n\n    .container.horizontal {\n      flex-direction: row;\n      align-items: stretch;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .container.scrollable {\n      scrollbar-width: none;\n      overflow-x: auto;\n      overflow-y: hidden;\n      .vertical {\n        overflow-x: hidden;\n        overflow-y: auto;\n      }\n    }\n\n    .container.focused {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .search-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: text;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .search-input:focus {\n      outline: none;\n    }\n\n    .focus-trigger {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 0;\n      cursor: text;\n    }\n\n    .items {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--item-spacing, var(--space-xs, 3px));\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      min-height: var(--item-height, 28px);\n      position: relative;\n      z-index: 2;\n      pointer-events: auto;\n    }\n\n    .container.horizontal .items {\n      flex-direction: row;\n    }\n\n    .container.vertical .items {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    :host([nowrap]) .items {\n      flex-wrap: nowrap;\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: 1em;\n      height: 1em;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: var(--item-label-color, var(--item-text, inherit));\n      font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));\n      text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));\n      text-underline-offset: var(--item-label-text-underline-offset, auto);\n    }\n\n    .item.selected .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n    }\n\n    .item.tickled .item-label {\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    .item.active .item-label {\n      --item-label-color: var(--item-text-selected);\n    }\n\n    .item.selected.tickled .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    ::highlight(narrowed-text-highlight) {\n      background: var(--highlight-background, var(--accent));\n      color: var(--highlight-color, var(--accent-text, #fff));\n      border-radius: 2px;\n      padding: 0 1px;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-narrowed-text': NarrowedTextElement;\n  }\n}\n"],"mappings":"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"}

package/dist/panel.d.ts

@@ -1,4 +1,4 @@
-import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Bj5pfdw_.js";
+import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, o as TitlebarToggleEvent, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-YQ-jVQoS.js";
 import { LitElement } from "lit";
 //#region src/panel/panel.d.ts
 /** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
@@ -24,6 +24,8 @@ declare class PanelElement extends LitElement {
   variant: PanelVariant;
   /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */
   hideTitlebar: boolean;
+  /** Keep the toolbar visible even when the panel is collapsed. */
+  keepToolbar: boolean;
   private _onTitlebarToggle;
   private _onCloseClick;
   protected render(): import("lit").TemplateResult<1>;

package/dist/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;;KAgBY,mBAAmB;KACnB,eAAe;KACf,yBAAyB;KACzB,oBAAoB;KACpB,mBAAmB;KACnB,kBAAkB;UAEb;EACf,QAAQ;EACR,OAAO;;cAII,qBAAqB;EACY;EACyB,aAAa;EACrD;;EAEe;EAChB;EACwB;EACS,mBAAmB;EACf,SAAS;;EAEjB;UAEjD;UAYA;YAWW,wBAAM;SA6BT,sBAAM;;QA2FhB;YACI;IACR,cAAc;;;UAID;EACf,oBAAoB,gBAAgB,sBAClC,MAAM,GACN,WAAW,MAAM,cAAc,OAAO,qBAAqB,aAC3D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;;KAgBY,mBAAmB;KACnB,eAAe;KACf,yBAAyB;KACzB,oBAAoB;KACpB,mBAAmB;KACnB,kBAAkB;UAEb;EACf,QAAQ;EACR,OAAO;;cAII,qBAAqB;EACY;EACyB,aAAa;EACrD;;EAEe;EAChB;EACwB;EACS,mBAAmB;EACf,SAAS;;EAEjB;;EAED;UAEhD;UAYA;YAWW,wBAAM;SA8BT,sBAAM;;QAmHhB;YACI;IACR,cAAc;;;UAID;EACf,oBAAoB,gBAAgB,sBAClC,MAAM,GACN,WAAW,MAAM,cAAc,OAAO,qBAAqB,aAC3D,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/panel.js

@@ -16,6 +16,7 @@ let PanelElement = class PanelElement extends LitElement {
 		this.toggleInteraction = `implicit`;
 		this.variant = `titlebar`;
 		this.hideTitlebar = false;
+		this.keepToolbar = false;
 	}
 	_onTitlebarToggle(event) {
 		event.stopPropagation();
@@ -35,6 +36,7 @@ let PanelElement = class PanelElement extends LitElement {
 		this.remove();
 	}
 	render() {
+		const showToolbar = this.keepToolbar || !this.collapsed;
 		return html`
       ${this.hideTitlebar ? nothing : html`
         <ixfx-titlebar
@@ -49,7 +51,7 @@ let PanelElement = class PanelElement extends LitElement {
           @toggle=${this._onTitlebarToggle}
           @close=${this._onCloseClick}
         >
-          <slot name="toolbar" slot="toolbar"></slot>
+          ${showToolbar ? html`<slot name="toolbar" slot="toolbar"></slot>` : nothing}
         </ixfx-titlebar>
         `}
 
@@ -149,6 +151,30 @@ let PanelElement = class PanelElement extends LitElement {
     :host([variant="midline"][orientation="vertical"]) .content-wrapper {
       background: transparent;
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+
+    :host([variant="tree"]) {
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .content-inner {
+      box-shadow: none;
+      background: transparent;
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .content-wrapper {
+      background: transparent;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .content-inner {
+      width: max-content;
+      height: 100%;
+      transform: none;
+    }
   `];
 	}
 };
@@ -184,6 +210,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-titlebar`
 })], PanelElement.prototype, "hideTitlebar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `keep-toolbar`
+})], PanelElement.prototype, "keepToolbar", void 0);
 PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 export { PanelElement };

package/dist/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type {\n  TitlebarCloseEvent,\n  TitlebarOrientation,\n  TitlebarToggleDetail,\n  TitlebarToggleEvent,\n  TitlebarToggleInteraction,\n  TitlebarVariant,\n} from '../titlebar/titlebar.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../titlebar/titlebar.js';\n\n/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */\nexport type PanelOrientation = TitlebarOrientation;\nexport type PanelVariant = TitlebarVariant;\nexport type PanelToggleInteraction = TitlebarToggleInteraction;\nexport type PanelToggleDetail = TitlebarToggleDetail;\nexport type PanelToggleEvent = TitlebarToggleEvent;\nexport type PanelCloseEvent = TitlebarCloseEvent;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */\n  @property({ type: Boolean, reflect: true }) collapsible = true;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */\n  @property({ type: Boolean, attribute: `hide-titlebar` }) hideTitlebar = false;\n\n  private _onTitlebarToggle(event: TitlebarToggleEvent) {\n    event.stopPropagation();\n    this.collapsed = event.detail.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  protected override render() {\n    return html`\n      ${this.hideTitlebar\n        ? nothing\n        : html`\n        <ixfx-titlebar\n          .title=${this.title}\n          .iconName=${this.iconName}\n          .orientation=${this.orientation}\n          .variant=${this.variant}\n          .closable=${this.closable}\n          .collapsible=${this.collapsible}\n          .collapsed=${this.collapsed}\n          .toggleInteraction=${this.toggleInteraction}\n          @toggle=${this._onTitlebarToggle}\n          @close=${this._onCloseClick}\n        >\n          <slot name=\"toolbar\" slot=\"toolbar\"></slot>\n        </ixfx-titlebar>\n        `}\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    ixfx-titlebar {\n      flex-shrink: 0;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-s);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    /* === Midline variant (host + content only; bar chrome lives in ixfx-titlebar) === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AA6BO,IAAM,eAAN,MAAM,qBAAqB,WAAW;;;EACa,KAAA,YAAA;EAC6C,KAAA,cAAA;EAC7D,KAAA,WAAA;EAEkB,KAAA,cAAA;EACtB,KAAA,QAAA;EAC2B,KAAA,WAAA;EAC0C,KAAA,oBAAA;EAChB,KAAA,UAAA;EAEjB,KAAA,eAAA;;CAExE,kBAA0B,OAA4B;EACpD,MAAM,gBAAgB;EACtB,KAAK,YAAY,MAAM,OAAO;EAC9B,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,cAAsB,OAAc;EAClC,MAAM,gBAAgB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,SAA4B;EAC1B,OAAO,IAAI;QACP,KAAK,eACH,UACA,IAAI;;mBAEK,KAAK,MAAM;sBACR,KAAK,SAAS;yBACX,KAAK,YAAY;qBACrB,KAAK,QAAQ;sBACZ,KAAK,SAAS;yBACX,KAAK,YAAY;uBACnB,KAAK,UAAU;+BACP,KAAK,kBAAkB;oBAClC,KAAK,kBAAkB;mBACxB,KAAK,cAAc;;;;UAI5B;;+CAEqC,CAAC,KAAK,UAAU;;;;;;CAM7D;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwF5C;;AACH;AAzJG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;AAC1D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAE9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAgB,CAAC,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAZxDA,eAAAA,WAAAA,CAAAA,kBAAc,YAAY,CAAA,GAAA,YAAA"}
+{"version":3,"file":"panel.js","names":["customElement"],"sources":["../src/panel/panel.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type {\n  TitlebarCloseEvent,\n  TitlebarOrientation,\n  TitlebarToggleDetail,\n  TitlebarToggleEvent,\n  TitlebarToggleInteraction,\n  TitlebarVariant,\n} from '../titlebar/titlebar.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../titlebar/titlebar.js';\n\n/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */\nexport type PanelOrientation = TitlebarOrientation;\nexport type PanelVariant = TitlebarVariant;\nexport type PanelToggleInteraction = TitlebarToggleInteraction;\nexport type PanelToggleDetail = TitlebarToggleDetail;\nexport type PanelToggleEvent = TitlebarToggleEvent;\nexport type PanelCloseEvent = TitlebarCloseEvent;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */\n  @property({ type: Boolean, reflect: true }) collapsible = true;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */\n  @property({ type: Boolean, attribute: `hide-titlebar` }) hideTitlebar = false;\n  /** Keep the toolbar visible even when the panel is collapsed. */\n  @property({ type: Boolean, attribute: `keep-toolbar` }) keepToolbar = false;\n\n  private _onTitlebarToggle(event: TitlebarToggleEvent) {\n    event.stopPropagation();\n    this.collapsed = event.detail.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  protected override render() {\n    const showToolbar = this.keepToolbar || !this.collapsed;\n    return html`\n      ${this.hideTitlebar\n        ? nothing\n        : html`\n        <ixfx-titlebar\n          .title=${this.title}\n          .iconName=${this.iconName}\n          .orientation=${this.orientation}\n          .variant=${this.variant}\n          .closable=${this.closable}\n          .collapsible=${this.collapsible}\n          .collapsed=${this.collapsed}\n          .toggleInteraction=${this.toggleInteraction}\n          @toggle=${this._onTitlebarToggle}\n          @close=${this._onCloseClick}\n        >\n          ${showToolbar ? html`<slot name=\"toolbar\" slot=\"toolbar\"></slot>` : nothing}\n        </ixfx-titlebar>\n        `}\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    ixfx-titlebar {\n      flex-shrink: 0;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-s);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    /* === Midline variant (host + content only; bar chrome lives in ixfx-titlebar) === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    /* === Tree variant: VS Code explorer / Outline style === */\n\n    :host([variant=\"tree\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"]) .content-inner {\n      box-shadow: none;\n      background: transparent;\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height: 100%;\n      transform: none;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AA6BO,IAAM,eAAN,MAAM,qBAAqB,WAAW;;;EACa,KAAA,YAAA;EAC6C,KAAA,cAAA;EAC7D,KAAA,WAAA;EAEkB,KAAA,cAAA;EACtB,KAAA,QAAA;EAC2B,KAAA,WAAA;EAC0C,KAAA,oBAAA;EAChB,KAAA,UAAA;EAEjB,KAAA,eAAA;EAEF,KAAA,cAAA;;CAEtE,kBAA0B,OAA4B;EACpD,MAAM,gBAAgB;EACtB,KAAK,YAAY,MAAM,OAAO;EAC9B,KAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,cAAsB,OAAc;EAClC,MAAM,gBAAgB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;EACA,KAAK,OAAO;CACd;CAEA,SAA4B;EAC1B,MAAM,cAAc,KAAK,eAAe,CAAC,KAAK;EAC9C,OAAO,IAAI;QACP,KAAK,eACH,UACA,IAAI;;mBAEK,KAAK,MAAM;sBACR,KAAK,SAAS;yBACX,KAAK,YAAY;qBACrB,KAAK,QAAQ;sBACZ,KAAK,SAAS;yBACX,KAAK,YAAY;uBACnB,KAAK,UAAU;+BACP,KAAK,kBAAkB;oBAClC,KAAK,kBAAkB;mBACxB,KAAK,cAAc;;YAE1B,cAAc,IAAI,gDAAgD,QAAQ;;UAE5E;;+CAEqC,CAAC,KAAK,UAAU;;;;;;CAM7D;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgH5C;;AACH;AApLG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,KAAA,CAAA;AAC1D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,WAAA,KAAA,CAAA;AAE9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAgB,CAAC,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAEtD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAe,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAdvDA,eAAAA,WAAAA,CAAAA,kBAAc,YAAY,CAAA,GAAA,YAAA"}

package/dist/plots.d.ts

@@ -1,2 +1,2 @@
-import { C as ColourMapConfig, D as computeColour, E as applyAgeModification, O as parseColourScaleAttr, S as PlotDataSeriesOptions, T as ColourResult, _ as PlotSingleAxisPointerMoveDetail, a as PlotHistogramBucketClickDetail, b as SingleAxisDrawStyle, c as PlotHistogramOrientation, d as PlotMultiAxisDataPointClickDetail, f as PlotMultiAxisDataPointClickEvent, g as PlotSingleAxisElementEventMap, h as PlotSingleAxis, i as PlotHistogram, k as readBaseColour, l as PlotHistogramValueTooltips, m as PlotMultiAxisLayout, n as XyAgeStyle, o as PlotHistogramBucketClickEvent, p as PlotMultiAxisElementEventMap, r as XyDrawStyle, s as PlotHistogramElementEventMap, t as PlotXyAxis, u as PlotMultiAxis, v as PlotSingleAxisPointerMoveEvent, w as ColourMode, x as PlotDataSeries, y as SingleAxisAgeStyle } from "./xy-axis-5KhVTNoX.js";
-export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };
+import { A as readBaseColour, C as PlotDataSeriesOptions, D as applyAgeModification, E as ColourResult, O as computeColour, S as PlotDataSeries, T as ColourMode, _ as PlotSingleAxisElementEventMap, a as PlotHistogramBucketClickDetail, b as SingleAxisAgeStyle, c as PlotHistogramInteractionMode, d as PlotMultiAxis, f as PlotMultiAxisDataPointClickDetail, g as PlotSingleAxis, h as PlotMultiAxisLayout, i as PlotHistogram, k as parseColourScaleAttr, l as PlotHistogramOrientation, m as PlotMultiAxisElementEventMap, n as XyAgeStyle, o as PlotHistogramBucketClickEvent, p as PlotMultiAxisDataPointClickEvent, r as XyDrawStyle, s as PlotHistogramElementEventMap, t as PlotXyAxis, u as PlotHistogramValueTooltips, v as PlotSingleAxisPointerMoveDetail, w as ColourMapConfig, x as SingleAxisDrawStyle, y as PlotSingleAxisPointerMoveEvent } from "./xy-axis-BfP9hKLj.js";
+export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramInteractionMode, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/plots.js

@@ -1,2 +1,2 @@
-import { c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-VrX8dmvS.js";
+import { c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-DzM1brBZ.js";
 export { PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/{titlebar-Bj5pfdw_.d.ts → titlebar-YQ-jVQoS.d.ts}

@@ -2,7 +2,7 @@ import "./icon-CDGprSdE.js";
 import { LitElement } from "lit";
 //#region src/titlebar/titlebar.d.ts
 type TitlebarOrientation = `horizontal` | `vertical`;
-type TitlebarVariant = `titlebar` | `midline`;
+type TitlebarVariant = `titlebar` | `midline` | `tree`;
 type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;
 interface TitlebarToggleDetail {
   readonly collapsed: boolean;
@@ -47,4 +47,4 @@ interface TitlebarElement {
 }
 //#endregion
 export { TitlebarToggleDetail as a, TitlebarVariant as c, TitlebarOrientation as i, TitlebarElement as n, TitlebarToggleEvent as o, TitlebarElementEventMap as r, TitlebarToggleInteraction as s, TitlebarCloseEvent as t };
-//# sourceMappingURL=titlebar-Bj5pfdw_.d.ts.map
+//# sourceMappingURL=titlebar-YQ-jVQoS.d.ts.map

package/dist/{titlebar-Bj5pfdw_.d.ts.map → titlebar-YQ-jVQoS.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"titlebar-Bj5pfdw_.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;cAYI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAoDT,sBAAM;;QAmNhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"titlebar-YQ-jVQoS.d.ts","names":[],"sources":["../src/titlebar/titlebar.ts"],"mappings":";;;KAOY;KACA;KACA;UAEK;WACN;;KAGC,sBAAsB,YAAY;KAClC,qBAAqB;UAEhB;EACf,QAAQ;EACR,OAAO;;;;;;;;;;cAYI,wBAAwB;EACP;EACwB;EACiB,aAAa;EACjB,SAAS;EAC7C;;EAEe;EACA;EACiB,mBAAmB;UAExE;UAaA;UASA;YAIW,wBAAM;SAkET,sBAAM;;QA0RhB;YACI;IACR,iBAAiB;;;UAIJ;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/titlebar.d.ts

@@ -1,2 +1,2 @@
-import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Bj5pfdw_.js";
+import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-YQ-jVQoS.js";
 export { TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant };

package/dist/titlebar.js

@@ -40,12 +40,23 @@ let TitlebarElement = class TitlebarElement extends LitElement {
 		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
 		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
 		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
 		return html`
       <div
         class="bar"
         role="toolbar"
         @click=${implicitToggle ? this._onToggleClick : nothing}
       >
+        ${treeVariant && showCaret ? html`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>
+          </button>
+          ` : nothing}
         <div class="title-text-wrapper">
           ${this.iconName ? html`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
           <span class="title-text">${this.title}</span>
@@ -63,7 +74,7 @@ let TitlebarElement = class TitlebarElement extends LitElement {
               <ixfx-icon name="close"></ixfx-icon>
             </button>
           ` : nothing}
-          ${showCaret ? html`
+          ${!treeVariant && showCaret ? html`
           <button
             class="caret-btn"
             type="button"
@@ -286,6 +297,77 @@ let TitlebarElement = class TitlebarElement extends LitElement {
         -1px 0 0 var(--surface-5),
         1px 0 0 var(--surface-1);
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
   `];
 	}
 };

package/dist/titlebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"titlebar.js","names":["customElement"],"sources":["../src/titlebar/titlebar.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type TitlebarOrientation = `horizontal` | `vertical`;\nexport type TitlebarVariant = `titlebar` | `midline`;\nexport type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface TitlebarToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;\nexport type TitlebarCloseEvent = CustomEvent<void>;\n\nexport interface TitlebarElementEventMap {\n  toggle: TitlebarToggleEvent;\n  close: TitlebarCloseEvent;\n}\n\n/**\n * Standalone titlebar chrome: title, icon, toolbar slot, close button and\n * optional collapse/expand caret. Extracted from `ixfx-panel`.\n *\n * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and\n * `toggle-interaction` is inert. `close` is fired without removing the\n * element — the host decides what closing means.\n */\n@customElement(`ixfx-titlebar`)\nexport class TitlebarElement extends LitElement {\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: TitlebarOrientation = `horizontal`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: TitlebarVariant = `titlebar`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: TitlebarToggleInteraction = `implicit`;\n\n  private _onToggleClick() {\n    if (!this.collapsible)\n      return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<TitlebarToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const isVertical = this.orientation === `vertical`;\n    const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;\n\n    const caretRotation = isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"bar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      height: 100%;\n      flex-shrink: 0;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) .bar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([collapsible][toggle-interaction=\"implicit\"]) .bar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .title-text-wrapper {\n      display: flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) .bar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .bar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-titlebar': TitlebarElement;\n  }\n}\n\nexport interface TitlebarElement {\n  addEventListener: (<K extends keyof TitlebarElementEventMap>(\n    type: K,\n    listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AAgCO,IAAM,kBAAN,MAAM,wBAAwB,WAAW;;;EACV,KAAA,QAAA;EAC2B,KAAA,WAAA;EACyC,KAAA,cAAA;EACZ,KAAA,UAAA;EACpD,KAAA,WAAA;EAEkB,KAAA,cAAA;EACF,KAAA,YAAA;EACoD,KAAA,oBAAA;;CAE5G,iBAAyB;EACvB,IAAI,CAAC,KAAK,aACR;EACF,KAAK,YAAY,CAAC,KAAK;EACvB,KAAK,cACH,IAAI,YAAkC,UAAU;GAC9C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAgC;EAC9B,OAAO;CACT;CAEA,SAA4B;EAC1B,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,aAAa,KAAK,gBAAgB;EACxC,MAAM,YAAY,KAAK,eAAe,KAAK,sBAAsB;EACjE,MAAM,iBAAiB,KAAK,eAAe,KAAK,sBAAsB;EAEtE,MAAM,gBAAgB,aACjB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;EAEjC,OAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,gBAAgB,EAAE;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;CAIpB;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgN5C;;AACH;AAzSG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,gBAAA,WAAA,qBAAA,KAAA,CAAA;AAV5DA,kBAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,eAAA"}
+{"version":3,"file":"titlebar.js","names":["customElement"],"sources":["../src/titlebar/titlebar.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type TitlebarOrientation = `horizontal` | `vertical`;\nexport type TitlebarVariant = `titlebar` | `midline` | `tree`;\nexport type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface TitlebarToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;\nexport type TitlebarCloseEvent = CustomEvent<void>;\n\nexport interface TitlebarElementEventMap {\n  toggle: TitlebarToggleEvent;\n  close: TitlebarCloseEvent;\n}\n\n/**\n * Standalone titlebar chrome: title, icon, toolbar slot, close button and\n * optional collapse/expand caret. Extracted from `ixfx-panel`.\n *\n * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and\n * `toggle-interaction` is inert. `close` is fired without removing the\n * element — the host decides what closing means.\n */\n@customElement(`ixfx-titlebar`)\nexport class TitlebarElement extends LitElement {\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: TitlebarOrientation = `horizontal`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: TitlebarVariant = `titlebar`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: TitlebarToggleInteraction = `implicit`;\n\n  private _onToggleClick() {\n    if (!this.collapsible)\n      return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<TitlebarToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const isVertical = this.orientation === `vertical`;\n    const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;\n\n    const caretRotation = isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    const treeVariant = this.variant === `tree`;\n\n    return html`\n      <div\n        class=\"bar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        ${treeVariant && showCaret\n          ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n          : nothing}\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${!treeVariant && showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      height: 100%;\n      flex-shrink: 0;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) .bar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([collapsible][toggle-interaction=\"implicit\"]) .bar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .title-text-wrapper {\n      display: flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) .bar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .bar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    /* === Tree variant: VS Code explorer / Outline style === */\n    :host([variant=\"tree\"]) .bar {\n      background: transparent;\n      padding: 0 var(--space-xs);\n      min-height: unset;\n      gap: var(--space-xs);\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-xs) 0;\n      flex-direction: column;\n      min-width: unset;\n      writing-mode: horizontal-tb;\n    }\n\n    :host([variant=\"tree\"]) .title-text-wrapper {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--space-xs);\n      padding: 0;\n      background: transparent;\n    }\n\n    :host([variant=\"tree\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"tree\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      transform: rotate(180deg);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn {\n      background: transparent;\n      opacity: var(--prominence-idle-opacity);\n      padding: 0;\n    }\n\n    :host([variant=\"tree\"]) .caret-btn:hover {\n      background: transparent;\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    :host([variant=\"tree\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    :host([variant=\"tree\"][orientation=\"vertical\"]) .toolbar {\n      flex-direction: row;\n      margin-left: 0;\n      margin-top: auto;\n    }\n\n    :host([variant=\"tree\"]) ixfx-icon {\n      width: 1em;\n      height: 1em;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-titlebar': TitlebarElement;\n  }\n}\n\nexport interface TitlebarElement {\n  addEventListener: (<K extends keyof TitlebarElementEventMap>(\n    type: K,\n    listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}