@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  css,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  onMount,\n  onSlotChange,\n  signal,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  type OverlayOpenReason,\n  type OverlayCloseReason,\n} from '@vielzeug/craftit/labs';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: { reason: OverlayCloseReason };\n  open: { reason: OverlayOpenReason };\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nexport const MENU_ITEM_TAG = defineComponent<BitMenuItemProps>({\n  props: {\n    checked: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    type: { default: undefined },\n    value: { default: undefined },\n  },\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n  tag: 'bit-menu-item',\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = defineComponent({\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n  tag: 'bit-menu-separator',\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = defineComponent<BitMenuProps, BitMenuEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    placement: { default: 'bottom-start' },\n    size: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const menuId = createId('menu');\n    const isOpen = signal(false);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListNavigation<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n        getItems()[index]?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => panelEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n\n      if (type === 'checkbox') {\n        const next = !item.hasAttribute('checked');\n\n        if (next) item.setAttribute('checked', '');\n        else item.removeAttribute('checked');\n      } else if (type === 'radio') {\n        for (const radio of host.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.removeAttribute('checked');\n        }\n        item.setAttribute('checked', '');\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = type === 'checkbox' || type === 'radio' ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (type !== 'checkbox' && type !== 'radio') {\n        overlay.close({ reason: 'programmatic' });\n      }\n    };\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      const open = isOpen.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          overlay.open();\n          requestAnimationFrame(() => listNavigation.first());\n        }\n\n        return;\n      }\n\n      // When open: navigate and activate\n      switch (e.key) {\n        case ' ': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'ArrowDown':\n          e.preventDefault();\n          listNavigation.next();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          listNavigation.prev();\n          break;\n        case 'End':\n          e.preventDefault();\n          listNavigation.last();\n          break;\n        case 'Enter': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'Escape':\n          e.preventDefault();\n          overlay.close({ reason: 'escape' });\n          break;\n        case 'Home':\n          e.preventDefault();\n          listNavigation.first();\n          break;\n        case 'Tab':\n          overlay.close({ reason: 'programmatic' });\n          break;\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      let prevTriggerEl: HTMLElement | null = null;\n\n      function resolveTrigger() {\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n        prevTriggerEl = triggerEl;\n\n        if (triggerEl) {\n          aria(triggerEl, {\n            controls: () => menuId,\n            disabled: () => props.disabled.value,\n            expanded: () => (isOpen.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n          triggerEl.addEventListener('click', toggleMenu);\n          triggerEl.addEventListener('keydown', handleMenuKeydown);\n        }\n      }\n\n      function toggleMenu() {\n        overlay.toggle();\n      }\n\n      onSlotChange('trigger', resolveTrigger);\n\n      // Item activation via click\n      handle(host, 'click', ((e: Event) => {\n        if (!isOpen.value) return;\n\n        const me = e as MouseEvent;\n        const path = me.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (me.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      }) as EventListener);\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      effect(() => {\n        panelEl?.toggleAttribute('data-open', isOpen.value);\n      });\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n      };\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  tag: 'bit-menu',\n}) as unknown as AddEventListeners<BitMenuEvents>;\n"],"mappings":"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"}
+{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  define,\n  createCleanupSignal,\n  computed,\n  createId,\n  css,\n  effect,\n  handle,\n  html,\n  onMount,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\nimport {\n  createListKeyControl,\n  createPressControl,\n  createListControl,\n  createOverlayControl,\n  type OverlayCloseDetail,\n  type OverlayOpenDetail,\n} from '@vielzeug/craftit/controls';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\n\n// ============================================\n// Types\n// ============================================\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nconst menuItemProps = {\n  checked: false,\n  disabled: false,\n  type: undefined,\n  value: undefined,\n} satisfies PropBundle<BitMenuItemProps>;\n\nexport const MENU_ITEM_TAG = define<BitMenuItemProps>('bit-menu-item', {\n  props: menuItemProps,\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = define('bit-menu-separator', {\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\nconst menuProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  placement: 'bottom-start',\n} satisfies PropBundle<BitMenuProps>;\n\nconst isCheckableItemType = (value: string | null): value is BitMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = define<BitMenuProps, BitMenuEvents>('bit-menu', {\n  props: menuProps,\n  setup({ emit, host, props, slots }) {\n    const menuId = createId('menu');\n    const isOpenSignal = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.el.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListControl<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: host.el,\n        panel: panelEl,\n        trigger: triggerEl,\n      },\n      isOpen: isOpenSignal,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpenSignal.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of host.el.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        overlay.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createPressControl({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        overlay.open();\n        requestAnimationFrame(() => listNavigation.first());\n      },\n    });\n\n    const openListKeys = createListKeyControl({\n      control: listNavigation,\n      disabled: () => !isOpenSignal.value,\n    });\n\n    const activateFocusedFromKeyboardPress = createPressControl({\n      onPress: () => {\n        const focused = listNavigation.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) focusedIndex = currentFocusedIndex;\n\n      if (openListKeys.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        overlay.close('escape');\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        overlay.close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      effect(() => {\n        if (!panelEl) return;\n\n        panelEl.toggleAttribute('data-open', isOpenSignal.value);\n      });\n\n      const triggerBinding = createCleanupSignal();\n\n      function resolveTrigger() {\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n        if (triggerEl) {\n          const trigger = triggerEl;\n\n          const removeAria = syncAria(trigger, {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => (isOpenSignal.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n\n          trigger.addEventListener('click', toggleMenu);\n          trigger.addEventListener('keydown', handleMenuKeydown);\n\n          triggerBinding.set(() => {\n            removeAria();\n            trigger.removeEventListener('click', toggleMenu);\n            trigger.removeEventListener('keydown', handleMenuKeydown);\n          });\n        } else {\n          triggerBinding.clear();\n        }\n      }\n\n      function toggleMenu() {\n        if (isDisabled.value) return;\n\n        overlay.toggle();\n      }\n\n      watch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n        triggerBinding.clear();\n      };\n    });\n\n    host.bind('on', {\n      click: (e) => {\n        if (!isOpenSignal.value) return;\n\n        const path = e.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      },\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n});\n"],"mappings":"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"}

package/dist/menu.js

@@ -1,33 +1,31 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { colorThemeMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { coarsePointerMixin as r } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as a, forcedColorsMixin as o } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import { e as i } from "./craftit/dist/labs/list.js";
-import { t as a } from "./craftit/dist/labs/overlay.js";
-import "./craftit/dist/labs.js";
-import o from "./overlay/menu/menu.css?inline.js";
-import { aria as s, computed as c, createId as l, css as u, defineComponent as d, effect as f, handle as p, html as m, onMount as h, onSlotChange as g, signal as _ } from "@vielzeug/craftit";
-import { flip as v, offset as y, positionFloat as b, shift as x } from "@vielzeug/floatit";
+import { t as s } from "./packages/craftit/dist/controls/press-control.js";
+import { n as c } from "./packages/craftit/dist/controls/list-control.js";
+import { n as l } from "./packages/craftit/dist/controls/list-key-control.js";
+import { i as u } from "./packages/craftit/dist/controls/overlay-control.js";
+import "./packages/craftit/dist/controls.js";
+import { syncAria as d } from "./utils/aria.js";
+import f from "./overlay/menu/menu.css?inline.js";
+import { computed as p, createCleanupSignal as m, createId as h, css as g, define as _, effect as v, handle as y, html as b, onMount as x, signal as S, watch as C } from "@vielzeug/craftit";
+import { flip as w, offset as T, positionFloat as E, shift as D } from "@vielzeug/floatit";
 //#region src/overlay/menu/menu.ts
-var S = u`
-  ${n}
-  ${t}
-  ${r}
-`, C = d({
+var O = g`
+  ${a}
+  ${i}
+  ${o}
+`, k = _("bit-menu-item", {
 	props: {
-		checked: {
-			default: !1,
-			type: Boolean
-		},
-		disabled: {
-			default: !1,
-			type: Boolean
-		},
-		type: { default: void 0 },
-		value: { default: void 0 }
+		checked: !1,
+		disabled: !1,
+		type: void 0,
+		value: void 0
 	},
-	setup({ props: t }) {
-		let n = u`
+	setup({ props: e }) {
+		let t = g`
       @layer buildit.base {
         :host {
           display: block;
@@ -110,41 +108,39 @@ var S = u`
           white-space: nowrap;
         }
       }
-      ${e}
-    `, r = c(() => t.type.value === "checkbox" || t.type.value === "radio"), i = c(() => r.value && t.checked.value), a = c(() => t.type.value === "checkbox" ? "menuitemcheckbox" : t.type.value === "radio" ? "menuitemradio" : "menuitem"), o = c(() => t.type.value === "checkbox" ? t.checked.value ? "☑" : "☐" : t.type.value === "radio" ? t.checked.value ? "◉" : "◯" : ""), s = c(() => `item${r.value ? " is-checkable" : ""}${i.value ? " is-checked" : ""}`), l = () => m`
+      ${r}
+    `, n = p(() => e.type.value === "checkbox" || e.type.value === "radio"), i = p(() => n.value && e.checked.value), a = p(() => e.type.value === "checkbox" ? "menuitemcheckbox" : e.type.value === "radio" ? "menuitemradio" : "menuitem"), o = p(() => e.type.value === "checkbox" ? e.checked.value ? "☑" : "☐" : e.type.value === "radio" ? e.checked.value ? "◉" : "◯" : ""), s = p(() => `item${n.value ? " is-checkable" : ""}${i.value ? " is-checked" : ""}`), c = () => b`
       <span class="item-check" aria-hidden="true">${() => o.value}</span>
       <span class="icon-slot"><slot name="icon"></slot></span>
       <span class="item-label"><slot></slot></span>
     `;
-		return m`
+		return b`
       <style>
-        ${n}
+        ${t}
       </style>
-      ${() => r.value ? m`
+      ${() => n.value ? b`
               <div
                 class="${() => s.value}"
                 tabindex="-1"
                 role="${() => a.value}"
                 aria-checked="${() => String(i.value)}"
-                aria-disabled="${() => String(t.disabled.value)}">
-                ${l()}
+                aria-disabled="${() => String(e.disabled.value)}">
+                ${c()}
               </div>
-            ` : m`
+            ` : b`
               <div
                 class="${() => s.value}"
                 tabindex="-1"
                 role="menuitem"
-                aria-disabled="${() => String(t.disabled.value)}">
+                aria-disabled="${() => String(e.disabled.value)}">
                 <span class="icon-slot"><slot name="icon"></slot></span>
                 <span class="item-label"><slot></slot></span>
               </div>
             `}
     `;
-	},
-	tag: "bit-menu-item"
-}), w = d({
-	setup() {
-		return m`<style>
+	}
+}), A = _("bit-menu-separator", { setup() {
+	return b`<style>
       @layer buildit.base {
         :host {
           display: block;
@@ -153,144 +149,152 @@ var S = u`
         }
       }
     </style>`;
-	},
-	tag: "bit-menu-separator"
-}), T = d({
-	props: {
-		color: { default: void 0 },
-		disabled: { default: !1 },
-		placement: { default: "bottom-start" },
-		size: { default: void 0 }
-	},
-	setup({ emit: e, host: t, props: n }) {
-		let r = l("menu"), c = _(!1), u = null, d = null;
-		function C() {
-			return Array.from(t.querySelectorAll("bit-menu-item:not([disabled])"));
+} }), j = {
+	...n,
+	...t,
+	...e,
+	placement: "bottom-start"
+}, M = (e) => e === "checkbox" || e === "radio", N = _("bit-menu", {
+	props: j,
+	setup({ emit: e, host: t, props: n, slots: r }) {
+		let i = h("menu"), a = S(!1), o = p(() => !!n.disabled.value), g = null, _ = null;
+		function k() {
+			return Array.from(t.el.querySelectorAll("bit-menu-item:not([disabled])"));
+		}
+		function A(e) {
+			return e ? e.shadowRoot?.querySelector("[role^=\"menuitem\"]") ?? e : null;
+		}
+		function j() {
+			return k().findIndex((e) => {
+				let t = A(e);
+				return e === document.activeElement || t === document.activeElement;
+			});
 		}
-		let w = -1, T = i({
-			getIndex: () => w,
-			getItems: C,
+		let N = -1, P = c({
+			getIndex: () => N,
+			getItems: k,
 			isItemDisabled: (e) => e.hasAttribute("disabled"),
 			setIndex: (e) => {
-				w = e, C()[e]?.focus();
+				N = e;
+				let t = k()[e];
+				A(t)?.focus();
 			}
 		});
-		function E() {
-			!d || !u || b(u, d, {
+		function F() {
+			!_ || !g || E(g, _, {
 				middleware: [
-					y(4),
-					v({ padding: 6 }),
-					x({ padding: 6 })
+					T(4),
+					w({ padding: 6 }),
+					D({ padding: 6 })
 				],
 				placement: n.placement.value
 			});
 		}
-		let D = a({
-			getBoundaryElement: () => t,
-			getPanelElement: () => d,
-			getTriggerElement: () => u,
-			isDisabled: () => !!n.disabled.value,
-			isOpen: () => c.value,
+		let I = u({
+			disabled: o,
+			elements: {
+				boundary: t.el,
+				panel: _,
+				trigger: g
+			},
+			isOpen: a,
 			onClose: (t) => e("close", { reason: t }),
 			onOpen: (t) => e("open", { reason: t }),
 			positioner: {
-				floating: () => d,
-				reference: () => u,
-				update: E
+				floating: () => _,
+				reference: () => g,
+				update: F
 			},
 			setOpen: (e) => {
-				c.value = e, e || T.reset();
-			}
-		}), O = (n) => {
-			let r = n.getAttribute("type");
-			if (r === "checkbox") n.hasAttribute("checked") ? n.removeAttribute("checked") : n.setAttribute("checked", "");
-			else if (r === "radio") {
-				for (let e of t.querySelectorAll("bit-menu-item[type=\"radio\"]")) e.removeAttribute("checked");
-				n.setAttribute("checked", "");
+				a.value = e, e || P.reset();
 			}
-			let i = n.getAttribute("value") ?? "";
+		}), L = (n) => {
+			let r = n.getAttribute("type"), i = M(r);
+			if (r === "checkbox") n.toggleAttribute("checked", !n.hasAttribute("checked"));
+			else if (r === "radio") for (let e of t.el.querySelectorAll("bit-menu-item[type=\"radio\"]")) e.toggleAttribute("checked", e === n);
+			let a = n.getAttribute("value") ?? "";
 			e("select", {
-				checked: r === "checkbox" || r === "radio" ? n.hasAttribute("checked") : void 0,
-				value: i
-			}), r !== "checkbox" && r !== "radio" && D.close({ reason: "programmatic" });
-		};
-		function k(e) {
-			if (!c.value) {
-				(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), D.open(), requestAnimationFrame(() => T.first()));
+				checked: i ? n.hasAttribute("checked") : void 0,
+				value: a
+			}), i || I.close("programmatic");
+		}, R = s({
+			keys: [
+				"Enter",
+				" ",
+				"ArrowDown"
+			],
+			onPress: () => {
+				I.open(), requestAnimationFrame(() => P.first());
+			}
+		}), z = l({
+			control: P,
+			disabled: () => !a.value
+		}), B = s({ onPress: () => {
+			let e = P.getActiveItem();
+			e && L(e);
+		} });
+		function V(e) {
+			if (o.value) return;
+			if (!a.value) {
+				R.handleKeydown(e);
 				return;
 			}
-			switch (e.key) {
-				case " ": {
-					e.preventDefault();
-					let t = T.getActiveItem();
-					t && O(t);
-					break;
+			let t = j();
+			if (t >= 0 && (N = t), !z.handleKeydown(e)) {
+				if (e.key === " " || e.key === "Enter") {
+					B.handleKeydown(e);
+					return;
 				}
-				case "ArrowDown":
-					e.preventDefault(), T.next();
-					break;
-				case "ArrowUp":
-					e.preventDefault(), T.prev();
-					break;
-				case "End":
-					e.preventDefault(), T.last();
-					break;
-				case "Enter": {
-					e.preventDefault();
-					let t = T.getActiveItem();
-					t && O(t);
-					break;
+				if (e.key === "Escape") {
+					e.preventDefault(), I.close("escape");
+					return;
 				}
-				case "Escape":
-					e.preventDefault(), D.close({ reason: "escape" });
-					break;
-				case "Home":
-					e.preventDefault(), T.first();
-					break;
-				case "Tab":
-					D.close({ reason: "programmatic" });
-					break;
+				e.key === "Tab" && I.close("programmatic");
 			}
 		}
-		return h(() => {
+		return x(() => {
 			let e = t.shadowRoot?.querySelector("slot[name=\"trigger\"]");
-			d = t.shadowRoot?.querySelector(".menu-panel") ?? null;
-			let i = null;
-			function a() {
-				i && (i.removeEventListener("click", o), i.removeEventListener("keydown", k)), u = e?.assignedElements({ flatten: !0 })?.[0] ?? null, i = u, u && (s(u, {
-					controls: () => r,
-					disabled: () => n.disabled.value,
-					expanded: () => c.value ? "true" : "false",
-					haspopup: "menu"
-				}), u.addEventListener("click", o), u.addEventListener("keydown", k));
+			_ = t.shadowRoot?.querySelector(".menu-panel") ?? null, v(() => {
+				_ && _.toggleAttribute("data-open", a.value);
+			});
+			let n = m();
+			function s() {
+				if (g = e?.assignedElements({ flatten: !0 })?.[0] ?? null, g) {
+					let e = g, t = d(e, {
+						controls: () => i,
+						disabled: () => o.value,
+						expanded: () => a.value ? "true" : "false",
+						haspopup: "menu"
+					});
+					e.addEventListener("click", c), e.addEventListener("keydown", V), n.set(() => {
+						t(), e.removeEventListener("click", c), e.removeEventListener("keydown", V);
+					});
+				} else n.clear();
 			}
-			function o() {
-				D.toggle();
+			function c() {
+				o.value || I.toggle();
 			}
-			g("trigger", a), p(t, "click", ((e) => {
-				if (!c.value) return;
-				let t = e, n = t.composedPath().find((e) => e instanceof HTMLElement && e.tagName === "BIT-MENU-ITEM") ?? t.target?.closest("bit-menu-item") ?? null;
-				!n || n.hasAttribute("disabled") || O(n);
-			}));
-			let l = D.bindOutsideClick(document);
-			return f(() => {
-				d?.toggleAttribute("data-open", c.value);
-			}), p(d, "keydown", k), () => {
-				l(), i && (i.removeEventListener("click", o), i.removeEventListener("keydown", k));
+			C(r.elements("trigger"), s, { immediate: !0 });
+			let l = I.bindOutsideClick(document);
+			return y(_, "keydown", V), () => {
+				l(), n.clear();
 			};
-		}), m`
+		}), t.bind("on", { click: (e) => {
+			if (!a.value) return;
+			let t = e.composedPath().find((e) => e instanceof HTMLElement && e.tagName === "BIT-MENU-ITEM") ?? e.target?.closest("bit-menu-item") ?? null;
+			!t || t.hasAttribute("disabled") || L(t);
+		} }), b`
       <style>
-        ${o}${S}
+        ${f}${O}
       </style>
       <slot name="trigger"></slot>
-      <div class="menu-panel" id="${r}" role="menu" aria-orientation="vertical">
+      <div class="menu-panel" id="${i}" role="menu" aria-orientation="vertical">
         <slot></slot>
       </div>
     `;
-	},
-	tag: "bit-menu"
+	}
 });
 //#endregion
-export { C as MENU_ITEM_TAG, T as MENU_TAG, w as SEPARATOR_TAG };
+export { k as MENU_ITEM_TAG, N as MENU_TAG, A as SEPARATOR_TAG };
 
 //# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  css,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  onMount,\n  onSlotChange,\n  signal,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  type OverlayOpenReason,\n  type OverlayCloseReason,\n} from '@vielzeug/craftit/labs';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { AddEventListeners, ComponentSize, ThemeColor } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\n\n// ============================================\n// Types\n// ============================================\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: { reason: OverlayCloseReason };\n  open: { reason: OverlayOpenReason };\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nexport const MENU_ITEM_TAG = defineComponent<BitMenuItemProps>({\n  props: {\n    checked: { default: false, type: Boolean },\n    disabled: { default: false, type: Boolean },\n    type: { default: undefined },\n    value: { default: undefined },\n  },\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n  tag: 'bit-menu-item',\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = defineComponent({\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n  tag: 'bit-menu-separator',\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = defineComponent<BitMenuProps, BitMenuEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    placement: { default: 'bottom-start' },\n    size: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const menuId = createId('menu');\n    const isOpen = signal(false);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListNavigation<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n        getItems()[index]?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => panelEl,\n      getTriggerElement: () => triggerEl,\n      isDisabled: () => Boolean(props.disabled.value),\n      isOpen: () => isOpen.value,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n\n      if (type === 'checkbox') {\n        const next = !item.hasAttribute('checked');\n\n        if (next) item.setAttribute('checked', '');\n        else item.removeAttribute('checked');\n      } else if (type === 'radio') {\n        for (const radio of host.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.removeAttribute('checked');\n        }\n        item.setAttribute('checked', '');\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = type === 'checkbox' || type === 'radio' ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (type !== 'checkbox' && type !== 'radio') {\n        overlay.close({ reason: 'programmatic' });\n      }\n    };\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      const open = isOpen.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n          e.preventDefault();\n          overlay.open();\n          requestAnimationFrame(() => listNavigation.first());\n        }\n\n        return;\n      }\n\n      // When open: navigate and activate\n      switch (e.key) {\n        case ' ': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'ArrowDown':\n          e.preventDefault();\n          listNavigation.next();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          listNavigation.prev();\n          break;\n        case 'End':\n          e.preventDefault();\n          listNavigation.last();\n          break;\n        case 'Enter': {\n          e.preventDefault();\n\n          const focused = listNavigation.getActiveItem();\n\n          if (focused) activateItem(focused);\n\n          break;\n        }\n        case 'Escape':\n          e.preventDefault();\n          overlay.close({ reason: 'escape' });\n          break;\n        case 'Home':\n          e.preventDefault();\n          listNavigation.first();\n          break;\n        case 'Tab':\n          overlay.close({ reason: 'programmatic' });\n          break;\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      let prevTriggerEl: HTMLElement | null = null;\n\n      function resolveTrigger() {\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n        prevTriggerEl = triggerEl;\n\n        if (triggerEl) {\n          aria(triggerEl, {\n            controls: () => menuId,\n            disabled: () => props.disabled.value,\n            expanded: () => (isOpen.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n          triggerEl.addEventListener('click', toggleMenu);\n          triggerEl.addEventListener('keydown', handleMenuKeydown);\n        }\n      }\n\n      function toggleMenu() {\n        overlay.toggle();\n      }\n\n      onSlotChange('trigger', resolveTrigger);\n\n      // Item activation via click\n      handle(host, 'click', ((e: Event) => {\n        if (!isOpen.value) return;\n\n        const me = e as MouseEvent;\n        const path = me.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (me.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      }) as EventListener);\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      effect(() => {\n        panelEl?.toggleAttribute('data-open', isOpen.value);\n      });\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n\n        if (prevTriggerEl) {\n          prevTriggerEl.removeEventListener('click', toggleMenu);\n          prevTriggerEl.removeEventListener('keydown', handleMenuKeydown);\n        }\n      };\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  tag: 'bit-menu',\n}) as unknown as AddEventListeners<BitMenuEvents>;\n"],"mappings":"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"}
+{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import {\n  define,\n  createCleanupSignal,\n  computed,\n  createId,\n  css,\n  effect,\n  handle,\n  html,\n  onMount,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\nimport {\n  createListKeyControl,\n  createPressControl,\n  createListControl,\n  createOverlayControl,\n  type OverlayCloseDetail,\n  type OverlayOpenDetail,\n} from '@vielzeug/craftit/controls';\nimport { flip, offset, positionFloat, shift } from '@vielzeug/floatit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../../inputs/shared/bundles';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\n\n// ============================================\n// Types\n// ============================================\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type BitMenuItemType = 'checkbox' | 'radio';\n\nexport type BitMenuEvents = {\n  close: OverlayCloseDetail;\n  open: OverlayOpenDetail;\n  select: MenuSelectDetail;\n};\n\nexport type BitMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: BitMenuItemType;\n  value?: string;\n};\n\nexport type BitMenuProps = {\n  color?: ThemeColor;\n  disabled?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ============================================\n// Styles\n// ============================================\n\nimport componentStyles from './menu.css?inline';\n\nconst themeStyles = /* css */ css`\n  ${colorThemeMixin}\n  ${sizeVariantMixin}\n  ${forcedColorsMixin}\n`;\n\n// ============================================\n// Menu Item Component\n// ============================================\n\nconst menuItemProps = {\n  checked: false,\n  disabled: false,\n  type: undefined,\n  value: undefined,\n} satisfies PropBundle<BitMenuItemProps>;\n\nexport const MENU_ITEM_TAG = define<BitMenuItemProps>('bit-menu-item', {\n  props: menuItemProps,\n  setup({ props }) {\n    const itemStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: block;\n          outline: none;\n        }\n\n        .item {\n          align-items: center;\n          border-radius: 0;\n          cursor: pointer;\n          display: flex;\n          font-size: var(--text-sm);\n          gap: var(--size-2);\n          line-height: var(--leading-normal);\n          padding: var(--size-1-5) var(--size-3);\n          transition:\n            background var(--transition-fast),\n            color var(--transition-fast);\n          user-select: none;\n          white-space: nowrap;\n        }\n\n        :host(:first-of-type) .item {\n          border-radius: var(--rounded-sm) var(--rounded-sm) 0 0;\n        }\n\n        :host(:last-child) .item {\n          border-radius: 0 0 var(--rounded-sm) var(--rounded-sm);\n        }\n\n        :host(:first-of-type:last-child) .item {\n          border-radius: var(--rounded-sm);\n        }\n\n        :host(:not([disabled])) .item:hover {\n          background: var(--color-contrast-100);\n        }\n\n        :host(:focus-visible) .item {\n          background: color-mix(in srgb, var(--color-primary) 12%, var(--color-contrast-100));\n          color: var(--color-primary);\n        }\n\n        /* Driven by JS via sync() — avoids :host() attribute selector edge-cases */\n        .item.is-checkable {\n          background: color-mix(in srgb, var(--color-contrast-900) 5%, var(--color-canvas));\n        }\n\n        .item.is-checked {\n          background: color-mix(in srgb, var(--color-primary) 18%, var(--color-canvas));\n          color: var(--color-primary);\n          font-weight: var(--font-medium);\n        }\n\n        :host([disabled]) .item {\n          color: var(--color-contrast-400);\n          cursor: not-allowed;\n          opacity: 0.6;\n          pointer-events: none;\n        }\n\n        .icon-slot {\n          display: contents;\n        }\n\n        .item-check {\n          align-items: center;\n          color: currentColor;\n          display: inline-flex;\n          flex-shrink: 0;\n          justify-content: center;\n          width: 1.25rem;\n        }\n\n        .item-label {\n          flex: 1;\n          min-width: 0;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n      ${coarsePointerMixin}\n    `;\n\n    const isCheckable = computed(() => props.type.value === 'checkbox' || props.type.value === 'radio');\n    const isChecked = computed(() => isCheckable.value && props.checked.value);\n    const itemRole = computed(() => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    });\n    const checkIndicator = computed(() => {\n      if (props.type.value === 'checkbox') return props.checked.value ? '☑' : '☐';\n\n      if (props.type.value === 'radio') return props.checked.value ? '◉' : '◯';\n\n      return '';\n    });\n    const itemClass = computed(\n      () => `item${isCheckable.value ? ' is-checkable' : ''}${isChecked.value ? ' is-checked' : ''}`,\n    );\n    const renderContent = () => html`\n      <span class=\"item-check\" aria-hidden=\"true\">${() => checkIndicator.value}</span>\n      <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n      <span class=\"item-label\"><slot></slot></span>\n    `;\n\n    return html`\n      <style>\n        ${itemStyles}\n      </style>\n      ${() =>\n        isCheckable.value\n          ? html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"${() => itemRole.value}\"\n                aria-checked=\"${() => String(isChecked.value)}\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                ${renderContent()}\n              </div>\n            `\n          : html`\n              <div\n                class=\"${() => itemClass.value}\"\n                tabindex=\"-1\"\n                role=\"menuitem\"\n                aria-disabled=\"${() => String(props.disabled.value)}\">\n                <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n                <span class=\"item-label\"><slot></slot></span>\n              </div>\n            `}\n    `;\n  },\n});\n\n// ============================================\n// Menu Separator\n// ============================================\n\nexport const SEPARATOR_TAG = define('bit-menu-separator', {\n  setup() {\n    return html`<style>\n      @layer buildit.base {\n        :host {\n          display: block;\n          margin: var(--size-1) 0;\n          border-top: var(--border) solid var(--color-contrast-200);\n        }\n      }\n    </style>`;\n  },\n});\n\n// ============================================\n// Menu Component\n// ============================================\n\nconst menuProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  placement: 'bottom-start',\n} satisfies PropBundle<BitMenuProps>;\n\nconst isCheckableItemType = (value: string | null): value is BitMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\n/**\n * `bit-menu` — Action dropdown menu triggered by a slotted trigger element.\n * Nest `<bit-menu-item>` elements inside for menu options.\n *\n * @example\n * ```html\n * <bit-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <bit-menu-item value=\"edit\">Edit</bit-menu-item>\n *   <bit-menu-item value=\"delete\">Delete</bit-menu-item>\n * </bit-menu>\n * ```\n */\nexport const MENU_TAG = define<BitMenuProps, BitMenuEvents>('bit-menu', {\n  props: menuProps,\n  setup({ emit, host, props, slots }) {\n    const menuId = createId('menu');\n    const isOpenSignal = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(host.el.querySelectorAll<HTMLElement>('bit-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    let focusedIndex = -1;\n\n    const listNavigation = createListControl<HTMLElement>({\n      getIndex: () => focusedIndex,\n      getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      setIndex: (index) => {\n        focusedIndex = index;\n\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n    });\n\n    function updatePosition() {\n      if (!panelEl || !triggerEl) return;\n\n      positionFloat(triggerEl, panelEl, {\n        middleware: [offset(4), flip({ padding: 6 }), shift({ padding: 6 })],\n        placement: props.placement.value,\n      });\n    }\n\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: {\n        boundary: host.el,\n        panel: panelEl,\n        trigger: triggerEl,\n      },\n      isOpen: isOpenSignal,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => panelEl,\n        reference: () => triggerEl,\n        update: updatePosition,\n      },\n      setOpen: (next) => {\n        isOpenSignal.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of host.el.querySelectorAll<HTMLElement>('bit-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        overlay.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createPressControl({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        overlay.open();\n        requestAnimationFrame(() => listNavigation.first());\n      },\n    });\n\n    const openListKeys = createListKeyControl({\n      control: listNavigation,\n      disabled: () => !isOpenSignal.value,\n    });\n\n    const activateFocusedFromKeyboardPress = createPressControl({\n      onPress: () => {\n        const focused = listNavigation.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) focusedIndex = currentFocusedIndex;\n\n      if (openListKeys.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        overlay.close('escape');\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        overlay.close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    onMount(() => {\n      const triggerSlot = host.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n\n      panelEl = host.shadowRoot?.querySelector<HTMLElement>('.menu-panel') ?? null;\n\n      effect(() => {\n        if (!panelEl) return;\n\n        panelEl.toggleAttribute('data-open', isOpenSignal.value);\n      });\n\n      const triggerBinding = createCleanupSignal();\n\n      function resolveTrigger() {\n        const assigned = triggerSlot?.assignedElements({ flatten: true });\n\n        triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n        if (triggerEl) {\n          const trigger = triggerEl;\n\n          const removeAria = syncAria(trigger, {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => (isOpenSignal.value ? 'true' : 'false'),\n            haspopup: 'menu',\n          });\n\n          trigger.addEventListener('click', toggleMenu);\n          trigger.addEventListener('keydown', handleMenuKeydown);\n\n          triggerBinding.set(() => {\n            removeAria();\n            trigger.removeEventListener('click', toggleMenu);\n            trigger.removeEventListener('keydown', handleMenuKeydown);\n          });\n        } else {\n          triggerBinding.clear();\n        }\n      }\n\n      function toggleMenu() {\n        if (isDisabled.value) return;\n\n        overlay.toggle();\n      }\n\n      watch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      handle(panelEl, 'keydown', handleMenuKeydown as EventListener);\n\n      return () => {\n        removeOutsideClick();\n        triggerBinding.clear();\n      };\n    });\n\n    host.bind('on', {\n      click: (e) => {\n        if (!isOpenSignal.value) return;\n\n        const path = e.composedPath();\n        const itemFromPath = path.find(\n          (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'BIT-MENU-ITEM',\n        );\n        const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('bit-menu-item') ?? null;\n\n        if (!item || item.hasAttribute('disabled')) return;\n\n        activateItem(item);\n      },\n    });\n\n    return html`\n      <style>\n        ${componentStyles}${themeStyles}\n      </style>\n      <slot name=\"trigger\"></slot>\n      <div class=\"menu-panel\" id=\"${menuId}\" role=\"menu\" aria-orientation=\"vertical\">\n        <slot></slot>\n      </div>\n    `;\n  },\n});\n"],"mappings":"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"}