@ixfx/components 0.2.4 → 0.2.5

package/dist/menu-BV6UFx_z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-BV6UFx_z.js","names":[],"sources":["../src/menu/menu-bar.ts","../src/menu/menu-check-item.ts","../src/menu/menu-command-controller.ts","../src/menu/menu-header.ts","../src/menu/menu-sub-trigger.ts","../src/menu/menu-separator.ts","../src/menu/menu-from-tree.ts","../src/menu/menu-radio-item.ts","../src/menu/menu-radio-group.ts","../src/menu/index.ts"],"sourcesContent":["import type { MenuTrigger } from './menu-trigger.js';\nimport { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport './menu-trigger.js';\n\n@customElement(`ixfx-menu-bar`)\nexport class MenuBar extends LitElement {\n  private _openTrigger: MenuTrigger | null = null;\n  private _inputMode: `keyboard` | `mouse` = `mouse`;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n    this.addEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n    this.addEventListener(`focusin`, this._handleFocusIn as EventListener);\n    this.addEventListener(`keydown`, this._handleKeydown);\n    this.addEventListener(`pointermove`, this._handlePointerMove);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n    this.removeEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n    this.removeEventListener(`focusin`, this._handleFocusIn as EventListener);\n    this.removeEventListener(`keydown`, this._handleKeydown);\n    this.removeEventListener(`pointermove`, this._handlePointerMove);\n  }\n\n  private _setInputMode(mode: `keyboard` | `mouse`): void {\n    if (this._inputMode === mode)\n      return;\n    this._inputMode = mode;\n    this.setAttribute(`data-input-mode`, mode);\n  }\n\n  private _handlePointerMove = (): void => {\n    this._setInputMode(`mouse`);\n  };\n\n  private _getTriggers(): MenuTrigger[] {\n    return [...this.children].filter(\n      el => el.tagName === `IXFX-MENU-TRIGGER`,\n    ) as MenuTrigger[];\n  }\n\n  private _handleTriggerOpen = (e: Event): void => {\n    this._openTrigger = e.target as MenuTrigger;\n  };\n\n  private _handleTriggerClose = (e: Event): void => {\n    if (e.target === this._openTrigger) {\n      this._openTrigger = null;\n    }\n  };\n\n  // When focus moves to a trigger button while another menu is open, switch menus.\n  // focusin is composed, so e.target is retargeted to the ixfx-menu-trigger host.\n  private _handleFocusIn = (e: FocusEvent): void => {\n    const triggers = this._getTriggers();\n    const trigger = triggers.find(t => t === e.target);\n    if (!trigger || !this._openTrigger || trigger === this._openTrigger)\n      return;\n    this._openTrigger.closeMenu();\n    trigger.openMenu();\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key !== `ArrowLeft` && e.key !== `ArrowRight`)\n      return;\n\n    const triggers = this._getTriggers();\n    if (triggers.length === 0)\n      return;\n\n    // When a menu is open, navigate from the open trigger.\n    // When no menu is open, navigate from the focused trigger button\n    // (e.target is retargeted to ixfx-menu-trigger when focus is on its inner button).\n    const current = this._openTrigger ?? triggers.find(t => t === e.target);\n    if (!current)\n      return;\n\n    const idx = triggers.indexOf(current);\n    if (idx === -1)\n      return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this._setInputMode(`keyboard`);\n\n    const dir = e.key === `ArrowRight` ? 1 : -1;\n    const next = triggers[(idx + dir + triggers.length) % triggers.length];\n\n    if (this._openTrigger) {\n      this._openTrigger.closeMenu();\n      next.openMenu();\n    } else {\n      next.focusTrigger();\n    }\n  };\n\n  static styles = css`\n    :host {\n      display: flex;\n      align-items: center;\n    }\n\n    /* Keyboard mode: suppress hover highlight on trigger buttons */\n    :host([data-input-mode=\"keyboard\"]) {\n      --_trigger-hover-bg: transparent;\n      --_trigger-hover-opacity: 0.6;\n    }\n  `;\n\n  render() {\n    return html`<slot role=\"menubar\"></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-bar': MenuBar;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\n\nexport type MenuCheckItemCommandDetail = {\n  readonly command: string;\n  readonly checked: boolean;\n  readonly args: string;\n};\n\nexport type MenuCheckItemCommandEvent = CustomEvent<MenuCheckItemCommandDetail>;\n\n@customElement(`ixfx-menu-check-item`)\nexport class MenuCheckItem extends LitElement {\n  @property({ type: String }) command = ``;\n  @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n  @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n  private handleClick(): void {\n    if (this.disabled)\n      return;\n\n    this.checked = !this.checked;\n    this.dispatchEvent(new CustomEvent<MenuCheckItemCommandDetail>(`command`, {\n      detail: { command: this.command, checked: this.checked, args: this.commandArgs },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _resolvedLabel(): string {\n    if (this.label)\n      return this.label;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.label ?? ``;\n    }\n    return ``;\n  }\n\n  private _resolvedIcon(): string | null {\n    if (this.iconName)\n      return this.iconName;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.icon ?? null;\n    }\n    return null;\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>): void {\n    super.willUpdate(changedProperties);\n    const resolvedIcon = this._resolvedIcon();\n    if (resolvedIcon && !this.iconName) {\n      this.setAttribute(`data-icon-section`, ``);\n    } else if (!resolvedIcon && !this.iconName) {\n      this.removeAttribute(`data-icon-section`);\n    }\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n  }\n\n  private _getShortcut(): string | null {\n    if (!this.keyboardManager || !this.command)\n      return null;\n    const bindings = (this.keyboardManager as any).getBindings?.() ?? [];\n    const binding = bindings.find((b: any) => b.commandId === this.command);\n    if (!binding)\n      return null;\n    const mods = Array.from(binding.modifiers ?? [], (m: string) =>\n      ({ ctrl: `⌃`, shift: `⇧`, alt: `⌥`, meta: `⌘` })[m] ?? m);\n    const key = binding.key?.length === 1 ? binding.key.toUpperCase() : binding.key;\n    return [...mods, key].join(``);\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .check {\n      width: 16px;\n      margin-right: var(--space-s);\n      font-size: var(--text-m);\n      color: var(--accent);\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n\n    .shortcut {\n      margin-left: var(--space-l);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s);\n    }\n  `];\n\n  render() {\n    const shortcut = this._getShortcut();\n    const resolvedIcon = this._resolvedIcon();\n    return html`\n      <div \n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this.handleClick}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitemcheckbox\"\n        aria-checked=\"${this.checked}\"\n      >\n        <span class=\"check\">${this.checked ? `✓` : ``}</span>\n        <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\">${this._resolvedLabel()}</span>\n        ${shortcut ? html`<span class=\"shortcut\">${shortcut}</span>` : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-check-item': MenuCheckItem;\n  }\n}\n","import type { CommandRegistry } from '@clinth/ui-commands';\n\nexport class MenuCommandController {\n  private registry: CommandRegistry<unknown>;\n  private target: EventTarget;\n  private boundHandler: (e: Event) => void;\n\n  constructor(options: { registry: CommandRegistry<unknown>; target?: EventTarget }) {\n    this.registry = options.registry;\n    this.target = options.target ?? document;\n    this.boundHandler = this.handleCommand.bind(this);\n  }\n\n  start(): void {\n    this.target.addEventListener(`command`, this.boundHandler);\n  }\n\n  stop(): void {\n    this.target.removeEventListener(`command`, this.boundHandler);\n  }\n\n  private handleCommand(e: Event): void {\n    const target = e.target as any;\n    const command = target?.command;\n    if (!command)\n      return;\n\n    const args = target?.commandArgs ?? ``;\n    this.registry.invoke(command, { args });\n  }\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement(`ixfx-menu-header`)\nexport class MenuHeader extends LitElement {\n  @property({ type: String }) label = ``;\n\n  static styles = css`\n    :host {\n      display: block;\n      padding: 6px var(--space-m) var(--space-xs);\n      font-size: var(--text-s);\n      font-weight: var(--font-weight-bold);\n      text-transform: uppercase;\n      color: var(--surface-muted-text);\n      letter-spacing: 0.5px;\n    }\n  `;\n\n  render() {\n    return html`<div>${this.label}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-header': MenuHeader;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\n\n@customElement(`ixfx-menu-sub-trigger`)\nexport class MenuSubTrigger extends LitElement {\n  @property({ type: String }) command = ``;\n  @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n  @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n  @state() private _hasSubmenu = false;\n  @query(`slot[name=\"submenu\"]`) private _slot!: HTMLSlotElement;\n  @query(`.submenu-popover`) private _submenuPopover!: HTMLElement;\n  @query(`.item`) private _itemEl!: HTMLElement;\n\n  private static _count = 0;\n  private _anchorName = `--mst-${MenuSubTrigger._count++}`;\n  private _hoverTimeout: number | null = null;\n  private _hideTimeout: number | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`keydown`, this._handleKeydown);\n  }\n\n  firstUpdated(): void {\n    this.style.setProperty(`--anchor-name`, this._anchorName);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`keydown`, this._handleKeydown);\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n    }\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n    }\n  }\n\n  private _propagateContext(): void {\n    const items = this._slot?.assignedElements({ flatten: true }) ?? [];\n    for (const el of items) {\n      if (`registry` in el)\n        (el as any).registry = this.registry;\n      if (`keyboardManager` in el)\n        (el as any).keyboardManager = this.keyboardManager;\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) {\n      this._propagateContext();\n    }\n  }\n\n  willUpdate(changedProperties: Map<string, unknown>): void {\n    super.willUpdate(changedProperties);\n    const resolvedIcon = this._resolvedIcon();\n    if (resolvedIcon && !this.iconName) {\n      this.setAttribute(`data-icon-section`, ``);\n    } else if (!resolvedIcon && !this.iconName) {\n      this.removeAttribute(`data-icon-section`);\n    }\n  }\n\n  private _resolvedIcon(): string | null {\n    if (this.iconName)\n      return this.iconName;\n    if (this.registry && this.command) {\n      return this.registry.get(this.command)?.icon ?? null;\n    }\n    return null;\n  }\n\n  private _handleSlotChange(): void {\n    this._hasSubmenu = this._slot?.assignedElements().length > 0;\n    this._propagateContext();\n  }\n\n  private _showSubmenu(): void {\n    if (!this._submenuPopover?.popover)\n      return;\n    try {\n      (this._submenuPopover as any).showPopover();\n    } catch (_) { /* ignore */ }\n  }\n\n  private _hideSubmenu(): void {\n    if (!this._submenuPopover?.popover)\n      return;\n    try {\n      (this._submenuPopover as any).hidePopover();\n    } catch (_) { /* ignore */ }\n  }\n\n  private _cancelHide(): void {\n    if (this._hideTimeout) {\n      clearTimeout(this._hideTimeout);\n      this._hideTimeout = null;\n    }\n  }\n\n  private _scheduleHide(): void {\n    this._cancelHide();\n    this._hideTimeout = window.setTimeout(() => {\n      this._hideSubmenu();\n      this._hideTimeout = null;\n    }, 100);\n  }\n\n  private _handleMouseEnter(): void {\n    if (this.disabled || !this._hasSubmenu)\n      return;\n    this._cancelHide();\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n    }\n    this._hoverTimeout = window.setTimeout(() => {\n      this._showSubmenu();\n    }, 150);\n  }\n\n  private _handleMouseLeave(): void {\n    if (this._hoverTimeout) {\n      clearTimeout(this._hoverTimeout);\n      this._hoverTimeout = null;\n    }\n    this._scheduleHide();\n  }\n\n  private _handleSubmenuMouseEnter(): void {\n    this._cancelHide();\n  }\n\n  private _handleSubmenuMouseLeave(): void {\n    this._scheduleHide();\n  }\n\n  private _handleClick(): void {\n    if (this.disabled || !this.command)\n      return;\n\n    this.dispatchEvent(new CustomEvent(`command`, {\n      detail: { command: this.command, args: this.commandArgs },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled)\n      return;\n\n    switch (e.key) {\n      case `ArrowRight`:\n      case `Enter`:\n      case ` `:\n        e.preventDefault();\n        e.stopPropagation();\n        if (this._hasSubmenu) {\n          this._showSubmenu();\n          requestAnimationFrame(() => {\n            const container = this._slot?.assignedElements({ flatten: true })\n              .find(el => el.tagName === `IXFX-MENU-CONTAINER`) as (HTMLElement & { focusFirst: () => void }) | undefined;\n            container?.focusFirst();\n          });\n        }\n        break;\n      case `ArrowLeft`:\n        e.preventDefault();\n        e.stopPropagation();\n        this._hideSubmenu();\n        this._itemEl?.focus();\n        break;\n      case `Escape`:\n        e.preventDefault();\n        e.stopPropagation();\n        this._hideSubmenu();\n        break;\n    }\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      anchor-name: var(--anchor-name);\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    .submenu-popover {\n      position: fixed;\n      position-anchor: var(--anchor-name);\n      inset: auto;\n      top: anchor(top);\n      left: anchor(right);\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: transparent;\n      /* UA stylesheet sets overflow:auto on [popover], which clips the box-shadow\n         of the inner ixfx-menu-container child. Override to let the shadow render. */\n      overflow: visible;\n      position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n\n    .arrow {\n      color: var(--surface-muted-text);\n      margin-left: var(--space-m);\n    }\n  `];\n\n  render() {\n    const resolvedIcon = this._resolvedIcon();\n    return html`\n      <div\n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this._handleClick}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded=\"false\"\n      >\n        <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\"><slot></slot>${this.label}</span>\n        <span class=\"arrow\">${this._hasSubmenu ? html`<ixfx-icon name=\"chevron-right\"></ixfx-icon>` : nothing}</span>\n      </div>\n      <div class=\"submenu-popover\" popover=\"auto\"\n        @mouseenter=${this._handleSubmenuMouseEnter}\n        @mouseleave=${this._handleSubmenuMouseLeave}\n      >\n        <slot name=\"submenu\" @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-sub-trigger': MenuSubTrigger;\n  }\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement(`ixfx-menu-separator`)\nexport class MenuSeparator extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      margin: var(--space-xs) 0;\n    }\n\n    .separator {\n      height: 1px;\n      background: var(--surface-4);\n    }\n  `;\n\n  render() {\n    return html`<div class=\"separator\"></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-separator': MenuSeparator;\n  }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport type { TemplateResult } from 'lit';\nimport type { TreeNode } from '../tree/types.js';\nimport type { MenuTriggerCommandDetail } from './menu-trigger.js';\nimport { html, nothing } from 'lit';\nimport './menu-container.js';\nimport './menu-item.js';\nimport './menu-sub-trigger.js';\nimport './menu-separator.js';\nimport './menu-header.js';\n\nexport type MenuFromTreeOptions = {\n  onCommand?: (detail: MenuTriggerCommandDetail) => void;\n  registry?: CommandRegistry<unknown>;\n  keyboardManager?: KeyboardManager;\n};\n\nfunction isLeaf(node: TreeNode): boolean {\n  return node.children === undefined || node.children.length === 0;\n}\n\nexport function menuFromTree(\n  nodes: TreeNode[],\n  options: MenuFromTreeOptions = {}\n): TemplateResult {\n  const { onCommand, registry, keyboardManager } = options;\n\n  return html`${nodes.map(node => {\n    const label = node.item.label;\n\n    if (label === '-') {\n      return html`<ixfx-menu-separator></ixfx-menu-separator>`;\n    }\n\n    if (label.startsWith('# ')) {\n      return html`<ixfx-menu-header label=\"${label.slice(2)}\"></ixfx-menu-header>`;\n    }\n\n    if (!isLeaf(node)) {\n      const submenu = menuFromTree(node.children!, options);\n      return html`\n        <ixfx-menu-sub-trigger label=\"${label}\">\n          <ixfx-menu-container\n            slot=\"submenu\"\n            .registry=${registry ?? nothing}\n            .keyboardManager=${keyboardManager ?? nothing}\n          >${submenu}</ixfx-menu-container>\n        </ixfx-menu-sub-trigger>\n      `;\n    }\n\n    return html`\n      <ixfx-menu-item\n        command=\"${node.item.key}\"\n        label=\"${label}\"\n        icon-name=\"${node.item.icon ?? nothing}\"\n        @command=${onCommand ? (e: CustomEvent) => onCommand(e.detail) : nothing}\n      ></ixfx-menu-item>\n    `;\n  })}`;\n}\n\nfunction buildMenuItemEl(\n  node: TreeNode,\n  options: MenuFromTreeOptions\n): HTMLElement {\n  const { onCommand, registry } = options;\n  const label = node.item.label;\n\n  const el = document.createElement('ixfx-menu-item');\n  el.setAttribute('command', node.item.key);\n  el.setAttribute('label', label);\n  if (node.item.icon) {\n    el.setAttribute('icon-name', node.item.icon);\n  }\n  if (onCommand) {\n    el.addEventListener('command', (e) => onCommand((e as CustomEvent).detail));\n  }\n  if (registry) {\n    (el as any).registry = registry;\n  }\n  return el;\n}\n\nfunction buildMenuSeparatorEl(): HTMLElement {\n  return document.createElement('ixfx-menu-separator');\n}\n\nfunction buildMenuHeaderEl(label: string): HTMLElement {\n  const el = document.createElement('ixfx-menu-header');\n  el.setAttribute('label', label);\n  return el;\n}\n\nfunction buildMenuSubTriggerEl(\n  node: TreeNode,\n  options: MenuFromTreeOptions\n): HTMLElement {\n  const { onCommand, registry, keyboardManager } = options;\n\n  const el = document.createElement('ixfx-menu-sub-trigger');\n  el.setAttribute('label', node.item.label);\n  if (registry) (el as any).registry = registry;\n  if (keyboardManager) (el as any).keyboardManager = keyboardManager;\n\n  const container = document.createElement('ixfx-menu-container');\n  container.setAttribute('slot', 'submenu');\n  if (registry) (container as any).registry = registry;\n  if (keyboardManager) (container as any).keyboardManager = keyboardManager;\n\n  const childEls = menuFromTreeToElements(node.children!, options);\n  for (const child of childEls) {\n    container.appendChild(child);\n  }\n\n  el.appendChild(container);\n  return el;\n}\n\nexport function menuFromTreeToElements(\n  nodes: TreeNode[],\n  options: MenuFromTreeOptions = {}\n): HTMLElement[] {\n  return nodes.map(node => {\n    const label = node.item.label;\n\n    if (label === '-') {\n      return buildMenuSeparatorEl();\n    }\n\n    if (label.startsWith('# ')) {\n      return buildMenuHeaderEl(label.slice(2));\n    }\n\n    if (!isLeaf(node)) {\n      return buildMenuSubTriggerEl(node, options);\n    }\n\n    return buildMenuItemEl(node, options);\n  });\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport '../icons/icon.js';\n\nexport type MenuRadioItemSelectDetail = {\n  readonly value: string;\n};\n\nexport type MenuRadioItemSelectEvent = CustomEvent<MenuRadioItemSelectDetail>;\n\n@customElement(`ixfx-menu-radio-item`)\nexport class MenuRadioItem extends LitElement {\n  @property({ type: String }) value = ``;\n  @property({ type: String }) label = ``;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String }) groupValue = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n\n  private handleClick(): void {\n    if (this.disabled)\n      return;\n\n    this.dispatchEvent(new CustomEvent<MenuRadioItemSelectDetail>(`radio-select`, {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  static override styles = [tickledItemStyles, css`\n    :host {\n      display: block;\n    }\n\n    .item {\n      display: flex;\n      padding: 6px var(--space-m);\n      font-size: var(--text-m);\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    .item.disabled {\n      opacity: var(--disabled-opacity);\n      cursor: default;\n    }\n\n    .item.disabled:hover {\n      background: transparent;\n    }\n\n    .radio {\n      width: 16px;\n      margin-right: var(--space-s);\n      font-size: var(--text-m);\n      color: var(--accent);\n    }\n\n    .icon-slot {\n      width: 0;\n      overflow: hidden;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    :host([icon-name]) .icon-slot,\n    :host([data-icon-section]) .icon-slot {\n      width: 1em;\n      height: 1em;\n      margin-right: var(--space-s);\n    }\n\n    .label {\n      flex: 1;\n    }\n  `];\n\n  render() {\n    const isSelected = this.groupValue === this.value;\n\n    return html`\n      <div \n        class=\"item ${this.disabled ? `disabled` : ``}\"\n        @click=${this.handleClick}\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        role=\"menuitemradio\"\n        aria-checked=\"${isSelected}\"\n      >\n        <span class=\"radio\">${isSelected ? `●` : ``}</span>\n        <span class=\"icon-slot\">${this.iconName ? html`<ixfx-icon name=\"${this.iconName}\"></ixfx-icon>` : null}</span>\n        <span class=\"label\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-radio-item': MenuRadioItem;\n  }\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport './menu-radio-item.js';\n\nexport type MenuRadioGroupChangeDetail = {\n  readonly name: string;\n  readonly value: string;\n};\n\nexport type MenuRadioGroupChangeEvent = CustomEvent<MenuRadioGroupChangeDetail>;\n\n@customElement(`ixfx-menu-radio-group`)\nexport class MenuRadioGroup extends LitElement {\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  @state() private slottedElements: Element[] = [];\n\n  private handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.slottedElements = slot.assignedElements();\n    this.updateSlottedValues();\n  }\n\n  private updateSlottedValues(): void {\n    for (const el of this.slottedElements) {\n      (el as any).groupValue = this.value;\n    }\n  }\n\n  private handleRadioSelect(e: CustomEvent): void {\n    this.value = e.detail.value;\n    this.dispatchEvent(new CustomEvent<MenuRadioGroupChangeDetail>(`radio-change`, {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has(`value`)) {\n      this.updateSlottedValues();\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    ::slotted(menu-radio-item) {\n      display: block;\n    }\n  `;\n\n  render() {\n    return html`\n      <slot @slotchange=${this.handleSlotChange} @radio-select=${this.handleRadioSelect}></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-menu-radio-group': MenuRadioGroup;\n  }\n}\n","export { MenuBar } from './menu-bar.js';\nexport { MenuCheckItem } from './menu-check-item.js';\nexport { MenuCommandController } from './menu-command-controller.js';\nexport { MenuContainer } from './menu-container.js';\nexport { MenuHeader } from './menu-header.js';\nexport { MenuItem } from './menu-item.js';\nexport { menuFromTree, menuFromTreeToElements } from './menu-from-tree.js';\nexport type { MenuFromTreeOptions } from './menu-from-tree.js';\nexport { MenuRadioGroup } from './menu-radio-group.js';\nexport { MenuRadioItem } from './menu-radio-item.js';\nexport { MenuSeparator } from './menu-separator.js';\nexport { MenuSubTrigger } from './menu-sub-trigger.js';\nexport { MenuTrigger } from './menu-trigger.js';\n"],"mappings":"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"}

package/dist/menu-item-Cikacp4F.d.ts

@@ -0,0 +1,128 @@
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
+
+//#region src/menu/menu-container.d.ts
+declare class MenuContainer extends LitElement {
+  anchor?: string;
+  registry?: CommandRegistry<unknown>;
+  keyboardManager?: KeyboardManager;
+  private _popover;
+  private tickled;
+  static styles: _$lit.CSSResult[];
+  private _updateIconSections;
+  private _propagateContext;
+  updated(changedProperties: Map<string, unknown>): void;
+  /**
+   * Sync data-input-mode to :host so CSS variables cascade to slotted items
+   */
+  willUpdate(changed: Map<PropertyKey, unknown>): void;
+  render(): _$lit.TemplateResult<1>;
+  private _getMenuItems;
+  /**
+   * Sync .tickled class on slotted items to match controller state
+   * This is called via onStateChange whenever the tickled state changes
+   */
+  private _syncTickledClasses;
+  private _handleMouseOver;
+  focusFirst(): void;
+  private _focusNext;
+  private _focusItem;
+  private _activateFocusedItem;
+  private _handleKeydown;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-menu-container': MenuContainer;
+  }
+} //# sourceMappingURL=menu-container.d.ts.map
+//#endregion
+//#region src/menu/menu-trigger.d.ts
+type MenuMode = `trigger` | `dropdown` | `context`;
+type Placement = `bottom-start` | `bottom-end` | `right-start`;
+type MenuTriggerCommandDetail = {
+  readonly command?: string;
+  readonly value?: string;
+  readonly checked?: boolean;
+};
+declare class MenuTrigger extends LitElement {
+  mode: MenuMode;
+  label: string;
+  registry?: CommandRegistry<unknown>;
+  keyboardManager?: KeyboardManager;
+  placement: Placement;
+  private _isOpen;
+  private _hasMenu;
+  private _hasTriggerSlot;
+  private _triggerBtn;
+  private _popup;
+  private static _count;
+  private _anchorName;
+  private _clickListener;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  private _updatePosition;
+  private _propagateContext;
+  private _handleSlotChange;
+  private _handleTriggerSlotChange;
+  get isOpen(): boolean;
+  openMenu(): void;
+  closeMenu(): void;
+  focusTrigger(): void;
+  private _openMenu;
+  private _handlePopoverToggle;
+  private _closeMenu;
+  private _handleTriggerClick;
+  private _handleClickOutside;
+  private _getMenuContainer;
+  private _handleKeydown;
+  private _handleCommand;
+  private _handleRadioChange;
+  private _handleContextMenu;
+  static styles: _$lit.CSSResult[];
+  render(): _$lit.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-menu-trigger': MenuTrigger;
+  }
+}
+//#endregion
+//#region src/menu/menu-item.d.ts
+declare class MenuItem extends LitElement {
+  command: string;
+  commandArgs: string;
+  label: string;
+  disabled: boolean;
+  iconName: string;
+  registry?: CommandRegistry<unknown>;
+  keyboardManager?: KeyboardManager;
+  submenuPopover?: HTMLElement;
+  private _hasChildren;
+  private _slot;
+  private _hoverTimeout;
+  disconnectedCallback(): void;
+  private _handleSlotChange;
+  private _handleMouseEnter;
+  private _handleMouseLeave;
+  private _showSubmenu;
+  private _hideSubmenu;
+  private handleClick;
+  private _resolvedLabel;
+  private _resolvedIcon;
+  willUpdate(changedProperties: Map<string, unknown>): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  private _getShortcut;
+  static styles: _$lit.CSSResult[];
+  render(): _$lit.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-menu-item': MenuItem;
+  }
+} //# sourceMappingURL=menu-item.d.ts.map
+//#endregion
+export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
+//# sourceMappingURL=menu-item-Cikacp4F.d.ts.map

package/dist/menu-item-Cikacp4F.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-Cikacp4F.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;;cAOa,aAAA,SAAsB,UAAA;EACgB,MAAA;EACjB,QAAA,GAAW,eAAA;EACX,eAAA,GAAkB,eAAA;EAAA,QACvB,QAAA;EAAA,QAGnB,OAAA;EAAA,OAwBD,MAAA,EA5B0D,KAAA,CA4BpD,SAAA;EAAA,QA4BL,mBAAA;EAAA,QAkDA,iBAAA;EAYC,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAAA;;;EASpC,UAAA,CAAW,OAAA,EAAS,GAAA,CAAI,WAAA;EAOxB,MAAA,CAAA,GAPuB,KAAA,CAOjB,cAAA;EAAA,QAaE,aAAA;EAtJmC;;;;EAAA,QA0LnC,mBAAA;EAAA,QAiCA,gBAAA;EA0BR,UAAA,CAAA;EAAA,QAIQ,UAAA;EAAA,QAQA,UAAA;EAAA,QAUA,oBAAA;EAAA,QAqDA,cAAA;AAAA;AAAA,QAqCF,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAA;EAAA;AAAA;;;KCxWtB,QAAA;AAAA,KACA,SAAA;AAAA,KAEO,wBAAA;EAAA,SACD,OAAA;EAAA,SACA,KAAA;EAAA,SACA,OAAA;AAAA;AAAA,cAME,WAAA,SAAoB,UAAA;EACH,IAAA,EAAM,QAAA;EACN,KAAA;EACI,QAAA,GAAW,eAAA;EACX,eAAA,GAAkB,eAAA;EACtB,SAAA,EAAW,SAAA;EAAA,QAEtB,OAAA;EAAA,QACA,QAAA;EAAA,QACA,eAAA;EAAA,QAEc,WAAA;EAAA,QACN,MAAA;EAAA,eAEV,MAAA;EAAA,QAEP,WAAA;EAAA,QACA,cAAA;EAER,iBAAA,CAAA;EAOA,oBAAA,CAAA;EAQA,YAAA,CAAA;EAkBA,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAAA,QAMnB,eAAA;EAAA,QAYA,iBAAA;EAAA,QAWA,iBAAA;EAAA,QAOA,wBAAA;EAAA,IAKJ,MAAA,CAAA;EAIJ,QAAA,CAAA;EAIA,SAAA,CAAA;EAIA,YAAA,CAAA;EAAA,QAIQ,SAAA;EAAA,QAgBA,oBAAA;EAAA,QAQA,UAAA;EAAA,QAYA,mBAAA;EAAA,QAUA,mBAAA;EAAA,QAYA,iBAAA;EAAA,QAOA,cAAA;EAAA,QAeA,cAAA;EAAA,QAeA,kBAAA;EAAA,QAkBA,kBAAA;EAAA,OAiBD,MAAA,EA3LuB,KAAA,CA2LjB,SAAA;EAkEb,MAAA,CAAA,GAlEa,KAAA,CAkEP,cAAA;AAAA;AAAA,QAwBA,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,WAAA;EAAA;AAAA;;;cC/UZ,QAAA,SAAiB,UAAA;EACA,OAAA;EAC2B,WAAA;EAC3B,KAAA;EACC,QAAA;EACuB,QAAA;EACpB,QAAA,GAAW,eAAA;EACX,eAAA,GAAkB,eAAA;EAClB,cAAA,GAAiB,WAAA;EAAA,QAEhC,YAAA;EAAA,QACM,KAAA;EAAA,QAEf,aAAA;EAER,oBAAA,CAAA;EAAA,QAOQ,iBAAA;EAAA,QAKA,iBAAA;EAAA,QAWA,iBAAA;EAAA,QAQA,YAAA;EAAA,QAUA,YAAA;EAAA,QAUA,WAAA;EAAA,QAWA,cAAA;EAAA,QASA,aAAA;EASR,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAU9B,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAAA,QAInB,YAAA;EAAA,OAaQ,MAAA,EAjBc,KAAA,CAiBR,SAAA;EAkEtB,MAAA,CAAA,GAlEsB,KAAA,CAkEhB,cAAA;AAAA;AAAA,QAwBA,MAAA;EAAA,UACI,qBAAA;IACR,gBAAA,EAAkB,QAAA;EAAA;AAAA"}