@vielzeug/refine 2.0.3 → 2.1.2

package/dist/marquee.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.cjs","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/marquee.js

@@ -1,6 +1,6 @@
 import e from "./content/marquee/marquee.css.js";
 import { define as t, getHost as n, html as r, onMounted as i, prop as a } from "@vielzeug/ore";
-import { watch as o } from "@vielzeug/ripple/watch";
+import { watch as o } from "@vielzeug/ripple";
 //#region src/content/marquee/marquee.ts
 var s = "ore-marquee";
 t(s, {

package/dist/marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"marquee.js","names":[],"sources":["../src/content/marquee/marquee.ts"],"sourcesContent":["import { define, getHost, html, onMounted, prop } from '@vielzeug/ore';\nimport { watch } from '@vielzeug/ripple';\n\nimport type { ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport '../../inputs/button/button';\nimport componentStyles from './marquee.css?inline';\n\nexport type MarqueeDirection = 'left' | 'right';\n\nexport type OreMarqueeProps = {\n  /** Theme color for the navigation controls. */\n  color?: ThemeColor;\n  /** Scroll direction. Defaults to `'left'`. */\n  direction?: MarqueeDirection;\n  /** Duration in seconds for one complete ticker cycle. Defaults to `20`. */\n  duration?: number;\n  /** Pause the ticker while it is hovered. Defaults to `false`. */\n  'pause-on-hover'?: boolean;\n  /** Show previous/next navigation controls. Defaults to `true`. */\n  'show-controls'?: boolean;\n};\n\n/**\n * A CSS-driven, continuously scrolling ticker.\n *\n * Direct child elements are duplicated internally for a seamless loop. Cloned\n * content is inert and hidden from assistive technology, so author interactive\n * content only in the original children.\n *\n * @element ore-marquee\n *\n * @attr {string} color - Theme color for the navigation controls.\n * @attr {number} duration - Duration in seconds for one ticker cycle (default: 20)\n * @attr {string} direction - 'left' (default) | 'right'\n * @attr {boolean} pause-on-hover - Pause while hovered (default: false)\n * @attr {boolean} show-controls - Show previous/next controls (default: true)\n *\n * @cssprop --marquee-gap - Gap between ticker items (default: var(--size-4))\n *\n * @part track - The animated ticker track.\n * @example\n * ```html\n * <ore-marquee duration=\"24\" pause-on-hover>\n *   <span>Free shipping</span>\n *   <span>New arrivals</span>\n * </ore-marquee>\n * ```\n */\nexport const MARQUEE_TAG = 'ore-marquee' as const;\n\ndefine<OreMarqueeProps>(MARQUEE_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    direction: prop.string<MarqueeDirection>('left'),\n    duration: prop.number(20),\n    'pause-on-hover': prop.bool(false),\n    'show-controls': prop.bool(true),\n  },\n  setup(props) {\n    const el = getHost();\n    let activeIndex = 0;\n    let clones: HTMLElement[] = [];\n    let items: HTMLElement[] = [];\n    let layoutFrame: number | null = null;\n    let loopWidth = 0;\n    let resizeObserver: ResizeObserver | null = null;\n    let track: HTMLElement | null = null;\n\n    const seekTo = (index: number): void => {\n      if (!track || items.length === 0) return;\n\n      activeIndex = (index + items.length) % items.length;\n\n      const item = items[activeIndex];\n\n      if (!item || loopWidth === 0) return;\n\n      const duration = props.duration.value ?? 20;\n      const delay = -((item.offsetLeft / loopWidth) * duration);\n\n      track.style.setProperty('animation-delay', `${delay}s`);\n    };\n\n    watch(\n      props.duration,\n      (duration) => {\n        el.style.setProperty('--_marquee-duration', `${duration ?? 20}s`);\n      },\n      { immediate: true },\n    );\n\n    onMounted(() => {\n      track = el.shadowRoot?.querySelector<HTMLElement>('.track') ?? null;\n\n      const slot = el.shadowRoot?.querySelector<HTMLSlotElement>('slot') ?? null;\n\n      const removeClones = (): void => {\n        clones.forEach((clone) => clone.remove());\n        clones = [];\n      };\n\n      const appendCloneSet = (): void => {\n        clones.push(\n          ...items.map((item) => {\n            const clone = item.cloneNode(true) as HTMLElement;\n\n            clone.setAttribute('aria-hidden', 'true');\n            clone.setAttribute('data-marquee-clone', '');\n            clone.setAttribute('inert', '');\n            el.appendChild(clone);\n\n            return clone;\n          }),\n        );\n      };\n\n      const syncLoop = (): void => {\n        if (!track || items.length === 0) return;\n\n        const marqueeTrack = track;\n\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        removeClones();\n        loopWidth = 0;\n        marqueeTrack.style.removeProperty('--_marquee-translate');\n        appendCloneSet();\n\n        layoutFrame = requestAnimationFrame(() => {\n          layoutFrame = null;\n\n          const firstClone = clones[0];\n          const firstItem = items[0];\n\n          if (!firstClone || !firstItem) return;\n\n          loopWidth = firstClone.offsetLeft - firstItem.offsetLeft;\n\n          if (loopWidth <= 0) return;\n\n          const requiredSets = Math.max(2, Math.ceil((el.clientWidth + loopWidth) / loopWidth));\n\n          for (let set = 2; set < requiredSets; set += 1) appendCloneSet();\n\n          marqueeTrack.style.setProperty('--_marquee-translate', `-${loopWidth}px`);\n        });\n      };\n\n      const refreshItems = (): void => {\n        const nextItems = (slot?.assignedElements() ?? []).filter(\n          (child): child is HTMLElement => child instanceof HTMLElement && !child.hasAttribute('data-marquee-clone'),\n        );\n        const itemsChanged =\n          nextItems.length !== items.length || nextItems.some((item, index) => item !== items[index]);\n\n        if (!itemsChanged) return;\n\n        items = nextItems;\n        activeIndex = Math.min(activeIndex, Math.max(items.length - 1, 0));\n        syncLoop();\n      };\n\n      resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(syncLoop);\n      resizeObserver?.observe(el);\n      slot?.addEventListener('slotchange', refreshItems);\n      refreshItems();\n\n      return () => {\n        if (layoutFrame !== null) cancelAnimationFrame(layoutFrame);\n\n        resizeObserver?.disconnect();\n        slot?.removeEventListener('slotchange', refreshItems);\n        removeClones();\n        track = null;\n        items = [];\n        loopWidth = 0;\n      };\n    });\n\n    return html`\n      <div class=\"track\" part=\"track\" aria-live=\"off\">\n        <slot></slot>\n      </div>\n      ${() =>\n        props['show-controls'].value !== false\n          ? html`\n              <div class=\"controls\" part=\"controls\">\n                <ore-button\n                  class=\"nav-btn prev-btn\"\n                  part=\"prev-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Previous item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex - 1);\n                  }}>\n                  <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n                <ore-button\n                  class=\"nav-btn next-btn\"\n                  part=\"next-btn\"\n                  variant=\"ghost\"\n                  color=${() => props.color.value}\n                  rounded\n                  icon-only\n                  label=\"Next item\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    seekTo(activeIndex + 1);\n                  }}>\n                  <ore-icon name=\"chevron-right\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                </ore-button>\n              </div>\n            `\n          : null}\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"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"}

package/dist/menu.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/keyboard.cjs"),n=require("./core/overlay.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/theme.css.cjs"),a=require("./core/positioner.cjs"),o=require("./core/nav.cjs"),s=require("./shared/prop-bundles.cjs"),c=require("./shared/size-presets.cjs"),l=require("./overlay/menu/menu-item.css.cjs"),u=require("./overlay/menu/menu-separator.css.cjs"),d=require("./overlay/menu/menu.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ripple"),m=require("@vielzeug/ripple/watch");var h=`ore-menu-item`;(0,f.define)(h,{props:{checked:f.prop.bool(!1),disabled:f.prop.bool(!1),type:f.prop.string(),value:f.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?f.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./core/keyboard.cjs"),r=require("./core/ore.cjs"),i=require("./core/overlay.cjs"),a=require("./core/nav.cjs"),o=require("./core/positioner.cjs"),s=require("./shared/prop-bundles.cjs"),c=require("./shared/size-presets.cjs"),l=require("./overlay/menu/menu.css.cjs"),u=require("./overlay/menu/menu-item.css.cjs"),d=require("./overlay/menu/menu-separator.css.cjs");let f=require("@vielzeug/ore"),p=require("@vielzeug/ripple");var m=`ore-menu-item`;(0,f.define)(m,{props:{checked:f.prop.bool(!1),disabled:f.prop.bool(!1),type:f.prop.string(),value:f.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?f.html`
           <div
             class="${()=>{let t=e.type.value;return[`item`,t===`checkbox`?`is-checkbox`:``,t===`radio`?`is-radio`:``,n()?`is-checked`:``].filter(Boolean).join(` `)}}"
             tabindex="-1"
@@ -14,7 +14,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        `},styles:[i.colorThemeMixin,l.default]});var g=`ore-menu-separator`;(0,f.define)(g,{setup(){return f.html``},styles:[u.default]});var _=e=>e===`checkbox`||e===`radio`,v=e=>e==null?void 0:e===``||e===`true`,y=`ore-menu`;(0,f.define)(y,{props:{...s.sizableBundle,...s.disablableBundle,"default-open":f.prop.bool(!1),open:{default:void 0,parse:v},placement:f.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(r){let i=(0,f.getHost)(),s=(0,f.useEmit)(),c=(0,f.useSlots)(),l=f.watchEffect,u=(0,f.createStableId)(`menu`),d=(0,p.computed)(()=>!!r.disabled.value),h=e.lifecycleSignal(f.onCleanup),g=null,v=null,y=null;function b(){return Array.from(i.querySelectorAll(`ore-menu-item:not([disabled])`))}function x(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function S(){return b().findIndex(e=>{let t=x(e);return e===document.activeElement||t===document.activeElement})}let C=(0,p.signal)(!1),w=null,T=a.createDropdownPositioner({getFloating:()=>v,getPlacement:()=>r.placement.value??`bottom-start`,getReference:()=>g,matchWidth:!1,offsetPx:4,padding:6}),E=o.createListControl({disabled:(0,p.computed)(()=>!C.value),getItems:b,isItemDisabled:e=>e.hasAttribute(`disabled`),onNavigate:(e,t)=>{let n=b()[t];x(n)?.focus()},signal:h}),D=(e=`programmatic`,t=!0)=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null,t&&n.restoreTriggerFocus(()=>g),s(`open-change`,{open:!1,reason:e}))},O=(e=`programmatic`)=>{d.value||C.value||(C.value=!0,T.update(),w=T.startAutoUpdate?.()??null,s(`open-change`,{open:!0,reason:e}))},k=()=>{C.value?D(`trigger`):O(`click`)};n.createOutsidePointerDismissal({getTargets:()=>[i,v],isActive:()=>C.value,onDismiss:()=>D(`outsideClick`),signal:h});let A=!1;(0,m.watch)(r.open,e=>{e===void 0?A?D(`programmatic`):r[`default-open`].value&&O(`programmatic`):e?O(`programmatic`):D(`programmatic`),A=!0},{immediate:!0}),h.addEventListener(`abort`,()=>{C.value&&(C.value=!1,E.reset(),w?.(),w=null)},{once:!0});let j=e=>{let t=e.getAttribute(`type`),n=_(t);if(t===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(t===`radio`)for(let t of i.querySelectorAll(`ore-menu-item[type="radio"]`))t.toggleAttribute(`checked`,t===e);let r=e.getAttribute(`value`)??``,a=n?e.hasAttribute(`checked`):void 0;s(`select`,{checked:a,value:r}),n||D(`programmatic`)},M=t.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{O(`keyboard`),requestAnimationFrame(()=>E.set(0))}}),N=t.createInteraction({onPress:()=>{let e=E.getActiveItem();e&&j(e)}});function P(e){if(d.value)return;if(!C.value){M.handleKeydown(e);return}let t=S();if(t>=0&&E.set(t),e.key===`Escape`){e.preventDefault(),D(`escape`);return}if(!E.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){N.handleKeydown(e);return}e.key===`Tab`&&D(`programmatic`)}}(0,f.bind)({on:{click:e=>{let t=e.composedPath();if(!C.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;!n||n.hasAttribute(`disabled`)||j(n)}}}),l(()=>{let e=C.value;v&&v.toggleAttribute(`data-open`,e)});function F(){if(y?.(),y=null,g=c.elements(`trigger`).value?.[0]??null,!g)return;let e=[],t=(0,f.bind)({aria:{controls:()=>u,disabled:()=>d.value,expanded:()=>String(C.value),haspopup:`menu`}},{target:g}),n=e=>{e.stopPropagation(),!d.value&&k()},r=e=>{P(e)};g.addEventListener(`click`,n),g.addEventListener(`keydown`,r),e.push(()=>g?.removeEventListener(`click`,n)),e.push(()=>g?.removeEventListener(`keydown`,r)),y=()=>{t();for(let t of e)t()}}return(0,m.watch)(c.elements(`trigger`),F,{immediate:!0}),(0,f.onMounted)(()=>()=>{y?.(),y=null}),f.html`
+        `},styles:[t.colorThemeMixin,u.default]});var h=`ore-menu-separator`;(0,f.define)(h,{setup(){return f.html``},styles:[d.default]});var g=e=>e===`checkbox`||e===`radio`,_=e=>e==null?void 0:e===``||e===`true`,v=`ore-menu`;(0,f.define)(v,{props:{...s.sizableBundle,...s.disablableBundle,"default-open":f.prop.bool(!1),open:{default:void 0,parse:_},placement:f.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,f.getHost)(),s=(0,f.useEmit)(),c=(0,f.useSlots)(),l=f.watchEffect,u=(0,f.createStableId)(`menu`),d=(0,p.computed)(()=>!!e.disabled.value),m=r.lifecycleSignal(f.onCleanup),h=null,_=null,v=null;function y(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function b(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function x(){return y().findIndex(e=>{let t=b(e);return e===document.activeElement||t===document.activeElement})}let S=(0,p.signal)(!1),C=null,w=o.createDropdownPositioner({getFloating:()=>_,getPlacement:()=>e.placement.value??`bottom-start`,getReference:()=>h,matchWidth:!1,offsetPx:4,padding:6}),T=a.createListControl({disabled:(0,p.computed)(()=>!S.value),getItems:y,isItemDisabled:e=>e.hasAttribute(`disabled`),onNavigate:(e,t)=>{let n=y()[t];b(n)?.focus()},signal:m}),E=(e=`programmatic`,t=!0)=>{S.value&&(S.value=!1,T.reset(),C?.(),C=null,t&&i.restoreTriggerFocus(()=>h),s(`open-change`,{open:!1,reason:e}))},D=(e=`programmatic`)=>{d.value||S.value||(S.value=!0,w.update(),C=w.startAutoUpdate?.()??null,s(`open-change`,{open:!0,reason:e}))},O=()=>{S.value?E(`trigger`):D(`click`)};i.createOutsidePointerDismissal({getTargets:()=>[t,_],isActive:()=>S.value,onDismiss:()=>E(`outsideClick`),signal:m});let k=!1;(0,p.watch)(e.open,t=>{t===void 0?k?E(`programmatic`):e[`default-open`].value&&D(`programmatic`):t?D(`programmatic`):E(`programmatic`),k=!0},{immediate:!0}),m.addEventListener(`abort`,()=>{S.value&&(S.value=!1,T.reset(),C?.(),C=null)},{once:!0});let A=e=>{let n=e.getAttribute(`type`),r=g(n);if(n===`checkbox`)e.toggleAttribute(`checked`,!e.hasAttribute(`checked`));else if(n===`radio`)for(let n of t.querySelectorAll(`ore-menu-item[type="radio"]`))n.toggleAttribute(`checked`,n===e);let i=e.getAttribute(`value`)??``,a=r?e.hasAttribute(`checked`):void 0;s(`select`,{checked:a,value:i}),r||E(`programmatic`)},j=n.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{D(`keyboard`),requestAnimationFrame(()=>T.set(0))}}),M=n.createInteraction({onPress:()=>{let e=T.getActiveItem();e&&A(e)}});function N(e){if(d.value)return;if(!S.value){j.handleKeydown(e);return}let t=x();if(t>=0&&T.set(t),e.key===`Escape`){e.preventDefault(),E(`escape`);return}if(!T.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){M.handleKeydown(e);return}e.key===`Tab`&&E(`programmatic`)}}(0,f.bind)({on:{click:e=>{let t=e.composedPath();if(!S.value)return;let n=t.find(e=>e instanceof HTMLElement&&e.tagName===`ORE-MENU-ITEM`)??e.target?.closest(`ore-menu-item`)??null;!n||n.hasAttribute(`disabled`)||A(n)}}}),l(()=>{let e=S.value;_&&_.toggleAttribute(`data-open`,e)});function P(){if(v?.(),v=null,h=c.elements(`trigger`).value?.[0]??null,!h)return;let e=[],t=(0,f.bind)({aria:{controls:()=>u,disabled:()=>d.value,expanded:()=>String(S.value),haspopup:`menu`}},{target:h}),n=e=>{e.stopPropagation(),!d.value&&O()},r=e=>{N(e)};h.addEventListener(`click`,n),h.addEventListener(`keydown`,r),e.push(()=>h?.removeEventListener(`click`,n)),e.push(()=>h?.removeEventListener(`keydown`,r)),v=()=>{t();for(let t of e)t()}}return(0,p.watch)(c.elements(`trigger`),P,{immediate:!0}),(0,f.onMounted)(()=>(P(),()=>{v?.(),v=null})),f.html`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
@@ -22,9 +22,9 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         id="${u}"
         role="menu"
         aria-orientation="vertical"
-        @keydown="${P}"
-        ref="${e=>{v=e,v?.toggleAttribute(`data-open`,C.value)}}">
+        @keydown="${N}"
+        ref="${e=>{_=e,_?.toggleAttribute(`data-open`,S.value)}}">
         <slot></slot>
       </div>
-    `},styles:[d.default,r.sizeVariantMixin(c.MENU_SIZE_PRESET),i.forcedColorsMixin]}),exports.MENU_ITEM_TAG=h,exports.MENU_TAG=y,exports.SEPARATOR_TAG=g;
+    `},styles:[l.default,e.sizeVariantMixin(c.MENU_SIZE_PRESET),t.forcedColorsMixin]}),exports.MENU_ITEM_TAG=m,exports.MENU_TAG=v,exports.SEPARATOR_TAG=h;
 //# sourceMappingURL=menu.cjs.map

package/dist/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  createStableId,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch as rippleWatch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  restoreTriggerFocus,\n  type DropdownCloseReason,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-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    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreTriggerFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\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 el.querySelectorAll<HTMLElement>('ore-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        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.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) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.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 === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.cjs","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n  restoreTriggerFocus,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-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    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreTriggerFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\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 el.querySelectorAll<HTMLElement>('ore-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        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.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) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.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 === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}

package/dist/menu.js

@@ -1,18 +1,17 @@
-import { lifecycleSignal as e } from "./core/ore.js";
-import { createInteraction as t } from "./core/keyboard.js";
-import { createOutsidePointerDismissal as n, restoreTriggerFocus as r } from "./core/overlay.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 { createDropdownPositioner as s } from "./core/positioner.js";
-import { createListControl as c } from "./core/nav.js";
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as t, forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
+import { createInteraction as r } from "./core/keyboard.js";
+import { lifecycleSignal as i } from "./core/ore.js";
+import { createOutsidePointerDismissal as a, restoreTriggerFocus as o } from "./core/overlay.js";
+import { createListControl as s } from "./core/nav.js";
+import { createDropdownPositioner as c } from "./core/positioner.js";
 import { disablableBundle as l, sizableBundle as u } from "./shared/prop-bundles.js";
 import { MENU_SIZE_PRESET as d } from "./shared/size-presets.js";
-import f from "./overlay/menu/menu-item.css.js";
-import p from "./overlay/menu/menu-separator.css.js";
-import m from "./overlay/menu/menu.css.js";
+import f from "./overlay/menu/menu.css.js";
+import p from "./overlay/menu/menu-item.css.js";
+import m from "./overlay/menu/menu-separator.css.js";
 import { bind as h, createStableId as g, define as _, getHost as v, html as y, onCleanup as b, onMounted as x, prop as S, useEmit as C, useSlots as w, watchEffect as T } from "@vielzeug/ore";
-import { computed as E, signal as D } from "@vielzeug/ripple";
-import { watch as O } from "@vielzeug/ripple/watch";
+import { computed as E, signal as D, watch as O } from "@vielzeug/ripple";
 //#region src/overlay/menu/menu.ts
 var k = "ore-menu-item";
 _(k, {
@@ -50,14 +49,14 @@ _(k, {
           </div>
         `;
 	},
-	styles: [a, f]
+	styles: [t, p]
 });
 var A = "ore-menu-separator";
 _(A, {
 	setup() {
 		return y``;
 	},
-	styles: [p]
+	styles: [m]
 });
 var j = (e) => e === "checkbox" || e === "radio", M = (e) => e == null ? void 0 : e === "" || e === "true", N = "ore-menu";
 _(N, {
@@ -78,10 +77,10 @@ _(N, {
 			"top-end"
 		], "bottom-start")
 	},
-	setup(i) {
-		let a = v(), o = C(), l = w(), u = T, d = g("menu"), f = E(() => !!i.disabled.value), p = e(b), m = null, _ = null, S = null;
+	setup(e) {
+		let t = v(), n = C(), l = w(), u = T, d = g("menu"), f = E(() => !!e.disabled.value), p = i(b), m = null, _ = null, S = null;
 		function k() {
-			return Array.from(a.querySelectorAll("ore-menu-item:not([disabled])"));
+			return Array.from(t.querySelectorAll("ore-menu-item:not([disabled])"));
 		}
 		function A(e) {
 			return e ? e.shadowRoot?.querySelector("[role^=\"menuitem\"]") ?? e : null;
@@ -92,14 +91,14 @@ _(N, {
 				return e === document.activeElement || t === document.activeElement;
 			});
 		}
-		let N = D(!1), P = null, F = s({
+		let N = D(!1), P = null, F = c({
 			getFloating: () => _,
-			getPlacement: () => i.placement.value ?? "bottom-start",
+			getPlacement: () => e.placement.value ?? "bottom-start",
 			getReference: () => m,
 			matchWidth: !1,
 			offsetPx: 4,
 			padding: 6
-		}), I = c({
+		}), I = s({
 			disabled: E(() => !N.value),
 			getItems: k,
 			isItemDisabled: (e) => e.hasAttribute("disabled"),
@@ -109,40 +108,40 @@ _(N, {
 			},
 			signal: p
 		}), L = (e = "programmatic", t = !0) => {
-			N.value && (N.value = !1, I.reset(), P?.(), P = null, t && r(() => m), o("open-change", {
+			N.value && (N.value = !1, I.reset(), P?.(), P = null, t && o(() => m), n("open-change", {
 				open: !1,
 				reason: e
 			}));
 		}, R = (e = "programmatic") => {
-			f.value || N.value || (N.value = !0, F.update(), P = F.startAutoUpdate?.() ?? null, o("open-change", {
+			f.value || N.value || (N.value = !0, F.update(), P = F.startAutoUpdate?.() ?? null, n("open-change", {
 				open: !0,
 				reason: e
 			}));
 		}, z = () => {
 			N.value ? L("trigger") : R("click");
 		};
-		n({
-			getTargets: () => [a, _],
+		a({
+			getTargets: () => [t, _],
 			isActive: () => N.value,
 			onDismiss: () => L("outsideClick"),
 			signal: p
 		});
 		let B = !1;
-		O(i.open, (e) => {
-			e === void 0 ? B ? L("programmatic") : i["default-open"].value && R("programmatic") : e ? R("programmatic") : L("programmatic"), B = !0;
+		O(e.open, (t) => {
+			t === void 0 ? B ? L("programmatic") : e["default-open"].value && R("programmatic") : t ? R("programmatic") : L("programmatic"), B = !0;
 		}, { immediate: !0 }), p.addEventListener("abort", () => {
 			N.value && (N.value = !1, I.reset(), P?.(), P = null);
 		}, { once: !0 });
 		let V = (e) => {
-			let t = e.getAttribute("type"), n = j(t);
-			if (t === "checkbox") e.toggleAttribute("checked", !e.hasAttribute("checked"));
-			else if (t === "radio") for (let t of a.querySelectorAll("ore-menu-item[type=\"radio\"]")) t.toggleAttribute("checked", t === e);
-			let r = e.getAttribute("value") ?? "", i = n ? e.hasAttribute("checked") : void 0;
-			o("select", {
-				checked: i,
-				value: r
-			}), n || L("programmatic");
-		}, H = t({
+			let r = e.getAttribute("type"), i = j(r);
+			if (r === "checkbox") e.toggleAttribute("checked", !e.hasAttribute("checked"));
+			else if (r === "radio") for (let n of t.querySelectorAll("ore-menu-item[type=\"radio\"]")) n.toggleAttribute("checked", n === e);
+			let a = e.getAttribute("value") ?? "", o = i ? e.hasAttribute("checked") : void 0;
+			n("select", {
+				checked: o,
+				value: a
+			}), i || L("programmatic");
+		}, H = r({
 			keys: [
 				"Enter",
 				" ",
@@ -151,7 +150,7 @@ _(N, {
 			onPress: () => {
 				R("keyboard"), requestAnimationFrame(() => I.set(0));
 			}
-		}), U = t({ onPress: () => {
+		}), U = r({ onPress: () => {
 			let e = I.getActiveItem();
 			e && V(e);
 		} });
@@ -200,9 +199,9 @@ _(N, {
 				for (let t of e) t();
 			};
 		}
-		return O(l.elements("trigger"), G, { immediate: !0 }), x(() => () => {
+		return O(l.elements("trigger"), G, { immediate: !0 }), x(() => (G(), () => {
 			S?.(), S = null;
-		}), y`
+		})), y`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
@@ -219,9 +218,9 @@ _(N, {
     `;
 	},
 	styles: [
-		m,
-		i(d),
-		o
+		f,
+		e(d),
+		n
 	]
 });
 //#endregion

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  createStableId,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch as rippleWatch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  restoreTriggerFocus,\n  type DropdownCloseReason,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-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    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreTriggerFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\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 el.querySelectorAll<HTMLElement>('ore-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        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.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) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.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 === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n  restoreTriggerFocus,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-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    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreTriggerFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\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 el.querySelectorAll<HTMLElement>('ore-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        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.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) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.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 === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}