@vielzeug/refine 1.5.4 → 1.8.0

package/dist/menu.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/keyboard.cjs"),a=require("./headless/option-list.cjs"),o=require("./overlay/menu/menu-item.css.cjs"),s=require("./overlay/menu/menu-separator.css.cjs"),c=require("./overlay/menu/menu.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple");var d=`ore-menu-item`;(0,l.define)(d,{props:{checked:l.prop.bool(!1),disabled:l.prop.bool(!1),type:l.prop.string(),value:l.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?l.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("./shared/prop-bundles.cjs"),r=require("./shared/size-presets.cjs"),i=require("./headless/ore.cjs"),a=require("./headless/keyboard.cjs"),o=require("./headless/option-list.cjs"),s=require("./overlay/menu/menu-item.css.cjs"),c=require("./overlay/menu/menu-separator.css.cjs"),l=require("./overlay/menu/menu.css.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple");var f=`ore-menu-item`;(0,u.define)(f,{props:{checked:u.prop.bool(!1),disabled:u.prop.bool(!1),type:u.prop.string(),value:u.prop.string()},setup(e){let t=()=>e.type.value===`checkbox`||e.type.value===`radio`,n=()=>t()&&e.checked.value;return t()?u.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"
@@ -9,12 +9,12 @@ 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>
-        `:l.html`
+        `:u.html`
           <div class="item" tabindex="-1" role="menuitem" aria-disabled="${e.disabled}">
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        `},styles:[o.default]});var f=`ore-menu-separator`;(0,l.define)(f,{setup(){return l.html``},styles:[s.default]});var p=e=>e===`checkbox`||e===`radio`,m=`ore-menu`;(0,l.define)(m,{props:{...n.sizableBundle,...n.disablableBundle,placement:l.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,l.getHost)(),n=(0,l.useEmit)(),o=(0,l.useSlots)(),s=l.watchEffect,c=(0,l.createStableId)(`menu`),d=(0,u.computed)(()=>!!e.disabled.value),f=r.lifecycleSignal(l.onCleanup),m=null,h=null,g=null;function _(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function v(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function y(){return _().findIndex(e=>{let t=v(e);return e===document.activeElement||t===document.activeElement})}let b=a.createOptionList({getBoundary:()=>t,getItems:_,getPanel:()=>h,getReference:()=>m,getTrigger:()=>m,isDisabled:()=>d.value,isItemDisabled:e=>e.hasAttribute(`disabled`),onClose:e=>n(`close`,{reason:e}),onNavigate:(e,t)=>{let n=_()[t];v(n)?.focus()},onOpen:e=>n(`open`,{reason:e}),positioning:{getPlacement:()=>e.placement.value??`bottom-start`,matchWidth:!1,offsetPx:4,padding:6},signal:f}),{isOpen:x}=b,S=e=>{let r=e.getAttribute(`type`),i=p(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||b.close(`programmatic`)},C=i.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{b.open(`keyboard`),requestAnimationFrame(()=>b.set(0))}}),w=i.createInteraction({onPress:()=>{let e=b.getActiveItem();e&&S(e)}});function T(e){if(d.value)return;if(!x.value){C.handleKeydown(e);return}let t=y();if(t>=0&&b.set(t),!b.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){w.handleKeydown(e);return}e.key===`Tab`&&b.close(`programmatic`)}}(0,l.bind)({on:{click:e=>{let t=e.composedPath();if(!x.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`)||S(n)}}}),s(()=>{let e=x.value;h&&h.toggleAttribute(`data-open`,e)});function E(){if(g?.(),g=null,m=o.elements(`trigger`).value?.[0]??null,!m)return;let e=[],t=(0,l.aria)(m,{controls:()=>c,disabled:()=>d.value,expanded:()=>String(x.value),haspopup:`menu`}),n=e=>{e.stopPropagation(),!d.value&&b.toggle()},r=e=>{T(e)};m.addEventListener(`click`,n),m.addEventListener(`keydown`,r),e.push(()=>m?.removeEventListener(`click`,n)),e.push(()=>m?.removeEventListener(`keydown`,r)),g=()=>{t();for(let t of e)t()}}return(0,u.watch)(o.elements(`trigger`),E,{immediate:!0}),(0,l.onMounted)(()=>()=>{g?.(),g=null}),l.html`
+        `},styles:[t.colorThemeMixin,s.default]});var p=`ore-menu-separator`;(0,u.define)(p,{setup(){return u.html``},styles:[c.default]});var m=e=>e===`checkbox`||e===`radio`,h=`ore-menu`;(0,u.define)(h,{props:{...n.sizableBundle,...n.disablableBundle,placement:u.prop.oneOf([`bottom`,`bottom-start`,`bottom-end`,`top`,`top-start`,`top-end`],`bottom-start`)},setup(e){let t=(0,u.getHost)(),n=(0,u.useEmit)(),r=(0,u.useSlots)(),s=u.watchEffect,c=(0,u.createStableId)(`menu`),l=(0,d.computed)(()=>!!e.disabled.value),f=i.lifecycleSignal(u.onCleanup),p=null,h=null,g=null;function _(){return Array.from(t.querySelectorAll(`ore-menu-item:not([disabled])`))}function v(e){return e?e.shadowRoot?.querySelector(`[role^="menuitem"]`)??e:null}function y(){return _().findIndex(e=>{let t=v(e);return e===document.activeElement||t===document.activeElement})}let b=o.createOptionList({getBoundary:()=>t,getItems:_,getPanel:()=>h,getReference:()=>p,getTrigger:()=>p,isDisabled:()=>l.value,isItemDisabled:e=>e.hasAttribute(`disabled`),onClose:e=>n(`close`,{reason:e}),onNavigate:(e,t)=>{let n=_()[t];v(n)?.focus()},onOpen:e=>n(`open`,{reason:e}),positioning:{getPlacement:()=>e.placement.value??`bottom-start`,matchWidth:!1,offsetPx:4,padding:6},signal:f}),{isOpen:x}=b,S=e=>{let r=e.getAttribute(`type`),i=m(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||b.close(`programmatic`)},C=a.createInteraction({keys:[`Enter`,` `,`ArrowDown`],onPress:()=>{b.open(`keyboard`),requestAnimationFrame(()=>b.set(0))}}),w=a.createInteraction({onPress:()=>{let e=b.getActiveItem();e&&S(e)}});function T(e){if(l.value)return;if(!x.value){C.handleKeydown(e);return}let t=y();if(t>=0&&b.set(t),!b.handleKeydown(e)){if(e.key===` `||e.key===`Enter`){w.handleKeydown(e);return}e.key===`Tab`&&b.close(`programmatic`)}}(0,u.bind)({on:{click:e=>{let t=e.composedPath();if(!x.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`)||S(n)}}}),s(()=>{let e=x.value;h&&h.toggleAttribute(`data-open`,e)});function E(){if(g?.(),g=null,p=r.elements(`trigger`).value?.[0]??null,!p)return;let e=[],t=(0,u.aria)(p,{controls:()=>c,disabled:()=>l.value,expanded:()=>String(x.value),haspopup:`menu`}),n=e=>{e.stopPropagation(),!l.value&&b.toggle()},i=e=>{T(e)};p.addEventListener(`click`,n),p.addEventListener(`keydown`,i),e.push(()=>p?.removeEventListener(`click`,n)),e.push(()=>p?.removeEventListener(`keydown`,i)),g=()=>{t();for(let t of e)t()}}return(0,d.watch)(r.elements(`trigger`),E,{immediate:!0}),(0,u.onMounted)(()=>()=>{g?.(),g=null}),u.html`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
@@ -26,5 +26,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         ref="${e=>{h=e}}">
         <slot></slot>
       </div>
-    `},styles:[c.default,e.sizeVariantMixin(),t.forcedColorsMixin]}),exports.MENU_ITEM_TAG=d,exports.MENU_TAG=m,exports.SEPARATOR_TAG=f;
+    `},styles:[l.default,e.sizeVariantMixin(r.MENU_SIZE_PRESET),t.forcedColorsMixin]}),exports.MENU_ITEM_TAG=f,exports.MENU_TAG=h,exports.SEPARATOR_TAG=p;
 //# 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  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { 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  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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: [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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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    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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), 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  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\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  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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    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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"iiBAiGA,IAAa,EAAgB,6BACJ,EAAe,CACtC,MAAO,CACL,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,KAAM,EAAA,KAAK,OAAwB,EACnC,MAAO,EAAA,KAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,MAAoB,EAAM,KAAK,QAAU,YAAc,EAAM,KAAK,QAAU,QAC5E,MAAkB,EAAY,GAAK,EAAM,QAAQ,MAqBvD,OAAO,EAAY,EACf,EAAA,IAAI;;yBAdgB,CACtB,IAAM,EAAO,EAAM,KAAK,MAExB,MAAO,CACL,OACA,IAAS,WAAa,cAAgB,GACtC,IAAS,QAAU,WAAa,GAChC,EAAU,EAAI,aAAe,EAC/B,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,CACb,EAK2B;;wBAtBrB,EAAM,KAAK,QAAU,WAAmB,mBAExC,EAAM,KAAK,QAAU,QAAgB,gBAElC,WAoBgB;gCACK,OAAO,EAAU,CAAC,EAAE;6BACzB,EAAM,SAAS;;;;;UAMpC,EAAA,IAAI;2EAC+D,EAAM,SAAS;;;;SAKxF,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAc,CAC1C,CAAC,EAgBD,IAAa,EAAgB,kCACtB,EAAe,CACpB,OAAQ,CACN,MAAO,GAAA,IAAI,EACb,EACA,OAAQ,CAAC,EAAA,OAAmB,CAC9B,CAAC,EAID,IAAM,EAAuB,GAC3B,IAAU,YAAc,IAAU,QAuCvB,EAAW,wBACH,EAAU,CAC7B,MAAO,CACL,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,UAAW,EAAA,KAAK,MACd,CAAC,SAAU,eAAgB,aAAc,MAAO,YAAa,SAAS,EACtE,cACF,CACF,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAA8B,EAC9B,GAAA,EAAA,EAAA,SAAA,CAAiB,EACjB,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,eAAA,CAAwB,MAAM,EAC9B,GAAA,EAAA,EAAA,SAAA,KAA4B,EAAQ,EAAM,SAAS,KAAM,EACzD,EAAc,EAAA,gBAAgB,EAAA,SAAS,EACzC,EAAgC,KAChC,EAA8B,KAC9B,EAAsC,KAG1C,SAAS,GAA0B,CACjC,OAAO,MAAM,KAAK,EAAG,iBAA8B,+BAA+B,CAAC,CACrF,CAEA,SAAS,EAAiB,EAA0D,CAGlF,OAFK,EAEE,EAAK,YAAY,cAA2B,oBAAoB,GAAK,EAF1D,IAGpB,CAEA,SAAS,GAA8B,CAGrC,OAFc,EAEP,CAAA,CAAM,UAAW,GAAS,CAC/B,IAAM,EAAY,EAAiB,CAAI,EAEvC,OAAO,IAAS,SAAS,eAAiB,IAAc,SAAS,aACnE,CAAC,CACH,CAEA,IAAM,EAAa,EAAA,iBAA8B,CAC/C,gBAAmB,EACT,WACV,aAAgB,EAChB,iBAAoB,EACpB,eAAkB,EAClB,eAAkB,EAAW,MAC7B,eAAiB,GAAS,EAAK,aAAa,UAAU,EACtD,QAAU,GAAW,EAAK,QAAS,CAAE,QAAO,CAAC,EAC7C,YAAa,EAAS,IAAU,CAC9B,IAAM,EAAW,EAAS,CAAC,CAAC,GAE5B,EAAiB,CAAQ,CAAC,EAAE,MAAM,CACpC,EACA,OAAS,GAAW,EAAK,OAAQ,CAAE,QAAO,CAAC,EAC3C,YAAa,CACX,iBAAqB,EAAM,UAAU,OAAS,eAC9C,WAAY,GACZ,SAAU,EACV,QAAS,CACX,EACA,OAAQ,CACV,CAAC,EACK,CAAE,OAAQ,GAAiB,EAE3B,EAAgB,GAA4B,CAChD,IAAM,EAAO,EAAK,aAAa,MAAM,EAC/B,EAAc,EAAoB,CAAI,EAE5C,GAAI,IAAS,WACX,EAAK,gBAAgB,UAAW,CAAC,EAAK,aAAa,SAAS,CAAC,OACxD,GAAI,IAAS,QAClB,IAAK,IAAM,KAAS,EAAG,iBAA8B,6BAA6B,EAChF,EAAM,gBAAgB,UAAW,IAAU,CAAI,EAInD,IAAM,EAAQ,EAAK,aAAa,OAAO,GAAK,GACtC,EAAU,EAAc,EAAK,aAAa,SAAS,EAAI,IAAA,GAE7D,EAAK,SAAU,CAAE,UAAS,OAAM,CAAC,EAE5B,GACH,EAAW,MAAM,cAAc,CAEnC,EAEM,EAAwB,EAAA,kBAAkB,CAC9C,KAAM,CAAC,QAAS,IAAK,WAAW,EAChC,YAAe,CACb,EAAW,KAAK,UAAU,EAC1B,0BAA4B,EAAW,IAAI,CAAC,CAAC,CAC/C,CACF,CAAC,EAEK,EAAmC,EAAA,kBAAkB,CACzD,YAAe,CACb,IAAM,EAAU,EAAW,cAAc,EAErC,GAAS,EAAa,CAAO,CACnC,CACF,CAAC,EAGD,SAAS,EAAkB,EAAkB,CAC3C,GAAI,EAAW,MAAO,OAKtB,GAAI,CAHS,EAAa,MAGf,CACT,EAAsB,cAAc,CAAC,EAErC,MACF,CAEA,IAAM,EAAsB,EAAoB,EAEhD,GAAI,GAAuB,GAAG,EAAW,IAAI,CAAmB,EAE5D,GAAW,cAAc,CAAC,EAG9B,IAAI,EAAE,MAAQ,KAAO,EAAE,MAAQ,QAAS,CACtC,EAAiC,cAAc,CAAC,EAEhD,MACF,CAEI,EAAE,MAAQ,OACZ,EAAW,MAAM,cAAc,CAHjC,CAKF,EAGA,EAAA,EAAA,KAAA,CAAK,CACH,GAAI,CACF,MAAQ,GAAkB,CACxB,IAAM,EAAO,EAAE,aAAa,EAE5B,GAAI,CAAC,EAAa,MAAO,OAKzB,IAAM,EAHe,EAAK,KACvB,GAA8B,aAAgB,aAAe,EAAK,UAAY,eAEpE,GAAiB,EAAE,QAA+B,QAAqB,eAAe,GAAK,KAEpG,CAAC,GAAQ,EAAK,aAAa,UAAU,GAEzC,EAAa,CAAI,CACnB,CACF,CACF,CAAC,EAED,MAAY,CACV,IAAM,EAAO,EAAa,MAErB,GAEL,EAAQ,gBAAgB,YAAa,CAAI,CAC3C,CAAC,EAED,SAAS,GAAiB,CAQxB,GAPA,IAAiB,EACjB,EAAiB,KAIjB,EAFiB,EAAM,SAAS,SAAS,CAAC,CAAC,QAEnB,IAAkC,KAEtD,CAAC,EAAW,OAEhB,IAAM,EAA8B,CAAC,EAC/B,GAAA,EAAA,EAAA,KAAA,CAAkB,EAAW,CACjC,aAAgB,EAChB,aAAgB,EAAW,MAC3B,aAAgB,OAAO,EAAa,KAAK,EACzC,SAAU,MACZ,CAAC,EAEK,EAAkB,GAAsB,CAC5C,EAAM,gBAAgB,EAElB,GAAW,OAEf,EAAW,OAAO,CACpB,EACM,EAAoB,GAAyB,CACjD,EAAkB,CAAK,CACzB,EAEA,EAAU,iBAAiB,QAAS,CAAc,EAClD,EAAU,iBAAiB,UAAW,CAAgB,EACtD,EAAS,SAAW,GAAW,oBAAoB,QAAS,CAAc,CAAC,EAC3E,EAAS,SAAW,GAAW,oBAAoB,UAAW,CAAgB,CAAC,EAE/E,MAAuB,CACrB,EAAW,EAEX,IAAK,IAAM,KAAW,EAAU,EAAQ,CAC1C,CACF,CAWA,OATA,EAAA,EAAA,MAAA,CAAY,EAAM,SAAS,SAAS,EAAG,EAAgB,CAAE,UAAW,EAAK,CAAC,GAE1E,EAAA,EAAA,UAAA,SACe,CACX,IAAiB,EACjB,EAAiB,IACnB,CACD,EAEM,EAAA,IAAI;;;;;cAKD,EAAO;;;oBAGD,EAAkB;eACtB,GAA2B,CACjC,EAAU,CACZ,EAAE;;;KAIR,EACA,OAAQ,CAAC,EAAA,QAAiB,EAAA,iBAAiB,EAAA,gBAAgB,EAAG,EAAA,iBAAiB,CACjF,CAAC"}

package/dist/menu.js

@@ -1,26 +1,27 @@
 import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { forcedColorsMixin as t } from "./styles/mixins/theme.css.js";
-import { disablableBundle as n, sizableBundle as r } from "./shared/prop-bundles.js";
-import { lifecycleSignal as i } from "./headless/ore.js";
-import { createInteraction as a } from "./headless/keyboard.js";
-import { createOptionList as o } from "./headless/option-list.js";
-import s from "./overlay/menu/menu-item.css.js";
-import c from "./overlay/menu/menu-separator.css.js";
-import l from "./overlay/menu/menu.css.js";
-import { aria as u, bind as d, createStableId as f, define as p, getHost as m, html as h, onCleanup as g, onMounted as _, prop as v, useEmit as y, useSlots as b, watchEffect as x } from "@vielzeug/ore";
-import { computed as S, watch as C } from "@vielzeug/ripple";
+import { colorThemeMixin as t, forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
+import { disablableBundle as r, sizableBundle as i } from "./shared/prop-bundles.js";
+import { MENU_SIZE_PRESET as a } from "./shared/size-presets.js";
+import { lifecycleSignal as o } from "./headless/ore.js";
+import { createInteraction as s } from "./headless/keyboard.js";
+import { createOptionList as c } from "./headless/option-list.js";
+import l from "./overlay/menu/menu-item.css.js";
+import u from "./overlay/menu/menu-separator.css.js";
+import d from "./overlay/menu/menu.css.js";
+import { aria as f, bind as p, createStableId as m, define as h, getHost as g, html as _, onCleanup as v, onMounted as y, prop as b, useEmit as x, useSlots as S, watchEffect as C } from "@vielzeug/ore";
+import { computed as w, watch as T } from "@vielzeug/ripple";
 //#region src/overlay/menu/menu.ts
-var w = "ore-menu-item";
-p(w, {
+var E = "ore-menu-item";
+h(E, {
 	props: {
-		checked: v.bool(!1),
-		disabled: v.bool(!1),
-		type: v.string(),
-		value: v.string()
+		checked: b.bool(!1),
+		disabled: b.bool(!1),
+		type: b.string(),
+		value: b.string()
 	},
 	setup(e) {
 		let t = () => e.type.value === "checkbox" || e.type.value === "radio", n = () => t() && e.checked.value;
-		return t() ? h`
+		return t() ? _`
           <div
             class="${() => {
 			let t = e.type.value;
@@ -39,28 +40,28 @@ p(w, {
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        ` : h`
+        ` : _`
           <div class="item" tabindex="-1" role="menuitem" aria-disabled="${e.disabled}">
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
         `;
 	},
-	styles: [s]
+	styles: [t, l]
 });
-var T = "ore-menu-separator";
-p(T, {
+var D = "ore-menu-separator";
+h(D, {
 	setup() {
-		return h``;
+		return _``;
 	},
-	styles: [c]
+	styles: [u]
 });
-var E = (e) => e === "checkbox" || e === "radio", D = "ore-menu";
-p(D, {
+var O = (e) => e === "checkbox" || e === "radio", k = "ore-menu";
+h(k, {
 	props: {
+		...i,
 		...r,
-		...n,
-		placement: v.oneOf([
+		placement: b.oneOf([
 			"bottom",
 			"bottom-start",
 			"bottom-end",
@@ -70,31 +71,31 @@ p(D, {
 		], "bottom-start")
 	},
 	setup(e) {
-		let t = m(), n = y(), r = b(), s = x, c = f("menu"), l = S(() => !!e.disabled.value), p = i(g), v = null, w = null, T = null;
-		function D() {
+		let t = g(), n = x(), r = S(), i = C, a = m("menu"), l = w(() => !!e.disabled.value), u = o(v), d = null, h = null, b = null;
+		function E() {
 			return Array.from(t.querySelectorAll("ore-menu-item:not([disabled])"));
 		}
-		function O(e) {
+		function D(e) {
 			return e ? e.shadowRoot?.querySelector("[role^=\"menuitem\"]") ?? e : null;
 		}
 		function k() {
-			return D().findIndex((e) => {
-				let t = O(e);
+			return E().findIndex((e) => {
+				let t = D(e);
 				return e === document.activeElement || t === document.activeElement;
 			});
 		}
-		let A = o({
+		let A = c({
 			getBoundary: () => t,
-			getItems: D,
-			getPanel: () => w,
-			getReference: () => v,
-			getTrigger: () => v,
+			getItems: E,
+			getPanel: () => h,
+			getReference: () => d,
+			getTrigger: () => d,
 			isDisabled: () => l.value,
 			isItemDisabled: (e) => e.hasAttribute("disabled"),
 			onClose: (e) => n("close", { reason: e }),
 			onNavigate: (e, t) => {
-				let n = D()[t];
-				O(n)?.focus();
+				let n = E()[t];
+				D(n)?.focus();
 			},
 			onOpen: (e) => n("open", { reason: e }),
 			positioning: {
@@ -103,9 +104,9 @@ p(D, {
 				offsetPx: 4,
 				padding: 6
 			},
-			signal: p
+			signal: u
 		}), { isOpen: j } = A, M = (e) => {
-			let r = e.getAttribute("type"), i = E(r);
+			let r = e.getAttribute("type"), i = O(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;
@@ -113,7 +114,7 @@ p(D, {
 				checked: o,
 				value: a
 			}), i || A.close("programmatic");
-		}, N = a({
+		}, N = s({
 			keys: [
 				"Enter",
 				" ",
@@ -122,7 +123,7 @@ p(D, {
 			onPress: () => {
 				A.open("keyboard"), requestAnimationFrame(() => A.set(0));
 			}
-		}), P = a({ onPress: () => {
+		}), P = s({ onPress: () => {
 			let e = A.getActiveItem();
 			e && M(e);
 		} });
@@ -141,19 +142,19 @@ p(D, {
 				e.key === "Tab" && A.close("programmatic");
 			}
 		}
-		d({ on: { click: (e) => {
+		p({ on: { click: (e) => {
 			let t = e.composedPath();
 			if (!j.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") || M(n);
-		} } }), s(() => {
+		} } }), i(() => {
 			let e = j.value;
-			w && w.toggleAttribute("data-open", e);
+			h && h.toggleAttribute("data-open", e);
 		});
 		function I() {
-			if (T?.(), T = null, v = r.elements("trigger").value?.[0] ?? null, !v) return;
-			let e = [], t = u(v, {
-				controls: () => c,
+			if (b?.(), b = null, d = r.elements("trigger").value?.[0] ?? null, !d) return;
+			let e = [], t = f(d, {
+				controls: () => a,
 				disabled: () => l.value,
 				expanded: () => String(j.value),
 				haspopup: "menu"
@@ -162,36 +163,36 @@ p(D, {
 			}, i = (e) => {
 				F(e);
 			};
-			v.addEventListener("click", n), v.addEventListener("keydown", i), e.push(() => v?.removeEventListener("click", n)), e.push(() => v?.removeEventListener("keydown", i)), T = () => {
+			d.addEventListener("click", n), d.addEventListener("keydown", i), e.push(() => d?.removeEventListener("click", n)), e.push(() => d?.removeEventListener("keydown", i)), b = () => {
 				t();
 				for (let t of e) t();
 			};
 		}
-		return C(r.elements("trigger"), I, { immediate: !0 }), _(() => () => {
-			T?.(), T = null;
-		}), h`
+		return T(r.elements("trigger"), I, { immediate: !0 }), y(() => () => {
+			b?.(), b = null;
+		}), _`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
         part="panel"
-        id="${c}"
+        id="${a}"
         role="menu"
         aria-orientation="vertical"
         @keydown="${F}"
         ref="${(e) => {
-			w = e;
+			h = e;
 		}}">
         <slot></slot>
       </div>
     `;
 	},
 	styles: [
-		l,
-		e(),
-		t
+		d,
+		e(a),
+		n
 	]
 });
 //#endregion
-export { w as MENU_ITEM_TAG, D as MENU_TAG, T as SEPARATOR_TAG };
+export { E as MENU_ITEM_TAG, k as MENU_TAG, D as SEPARATOR_TAG };
 
 //# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { 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  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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: [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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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    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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), 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  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\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  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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    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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}

package/dist/message-composer.cjs

@@ -1,9 +1,9 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/auto-resize.cjs"),c=require("./headless/field-base.cjs"),l=require("./headless/text-field.cjs"),u=require("./headless/composer.cjs"),d=require("./inputs/shared/field-binding.cjs"),f=require("./inputs/shared/form-context.cjs"),p=require("./inputs/message-composer/message-composer.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ore/directives"),g=require("@vielzeug/ripple"),_=require("@vielzeug/ore/forms");var v=`Send message`,y=`arrow-up`,b=`ore-message-composer`;(0,m.define)(b,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,...i.loadableBundle,"clear-on-send":m.prop.bool(!0),error:m.prop.string(),fullwidth:m.prop.bool(!1),helper:m.prop.string(),label:m.prop.string(),maxlength:m.prop.json(void 0),name:m.prop.string(),placeholder:m.prop.string(),readonly:m.prop.bool(!1),ref:m.prop.json(void 0),required:m.prop.bool(!1),rows:m.prop.json(void 0),"send-icon":m.prop.string(),"send-label":m.prop.string(),"send-shortcut":m.prop.oneOf([`enter`,`mod+enter`],`enter`),value:m.prop.string(),variant:m.prop.string()},setup(e){let t=(0,m.useEmit)(),n=(0,m.useSlots)(),r=(0,m.inject)(f.FORM_CTX),i=f.useFormContext(e,r),a=i.disabled,p=o.lifecycleSignal(m.onCleanup),b=(0,m.ref)(),x=s.createAutoResize(),S=l.createTextField({disabled:a,error:e.error,helper:e.helper,maxLength:e.maxlength,onInput:(e,n)=>t(`input`,{originalEvent:e,value:n}),prefix:`composer`,readonly:e.readonly,required:e.required,signal:p,validateOn:r?.validateOn,value:e.value});S.attachFormField((0,_.useField)({disabled:S.disabled,onReset:()=>{S.reset(),x.recompute()},toFormValue:e=>e,validationMessage:S.validationMessage,validity:S.validity,value:S.value}));function C(n){t(`send`,{originalEvent:n,value:S.value.value.trim()})&&e[`clear-on-send`].value!==!1&&(S.clear(),x.recompute(),b.value?.focus())}let w=u.createComposerControl({disabled:a,loading:(0,g.computed)(()=>!!e.loading.value),onSend:C,sendShortcut:e[`send-shortcut`],value:S.value});return(0,m.onElement)(b,t=>{let n=S.wire(t),r=x.wire(t),i=e=>w.handleKeydown(e);t.addEventListener(`keydown`,i),e.ref.value?.(t);let a=(0,g.watch)(e.ref,e=>{e?.(t)});return()=>{t.removeEventListener(`keydown`,i),n(),r(),a.dispose(),e.ref.value?.(null)}}),(0,m.bind)({attr:{error:d.errorAttr(S.errorText),size:i.size,variant:i.variant}}),m.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./styles/mixins/field-variants.css.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./shared/size-presets.cjs"),s=require("./headless/ore.cjs"),c=require("./headless/auto-resize.cjs"),l=require("./headless/ref-callback.cjs"),u=require("./headless/text-field.cjs"),d=require("./headless/composer.cjs"),f=require("./inputs/shared/field-binding.cjs"),p=require("./inputs/shared/form-context.cjs"),m=require("./inputs/shared/templates.cjs"),h=require("./inputs/message-composer/message-composer.css.cjs");let g=require("@vielzeug/ore"),_=require("@vielzeug/ripple"),v=require("@vielzeug/ore/forms"),y=require("@vielzeug/ore/directives");var b=`Send message`,x=`arrow-up`,S=`ore-message-composer`;(0,g.define)(S,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.disablableBundle,...a.loadableBundle,"clear-on-send":g.prop.bool(!0),error:g.prop.string(),fullwidth:g.prop.bool(!1),helper:g.prop.string(),label:g.prop.string(),maxlength:g.prop.json(void 0),name:g.prop.string(),placeholder:g.prop.string(),readonly:g.prop.bool(!1),ref:g.prop.data(),required:g.prop.bool(!1),rows:g.prop.json(void 0),"send-icon":g.prop.string(),"send-label":g.prop.string(),"send-shortcut":g.prop.oneOf([`enter`,`mod+enter`],`enter`),success:g.prop.bool(!1),value:g.prop.string(),variant:g.prop.string()},setup(e){let t=(0,g.useEmit)(),n=(0,g.useSlots)(),r=(0,g.inject)(p.FORM_CTX),i=p.useFormContext(e,r),a=i.disabled,o=s.lifecycleSignal(g.onCleanup),h=(0,g.ref)(),S=c.createAutoResize(),C=u.createTextField({disabled:a,error:e.error,helper:e.helper,maxLength:e.maxlength,onInput:(e,n)=>t(`input`,{originalEvent:e,value:n}),prefix:`composer`,readonly:e.readonly,required:e.required,signal:o,validateOn:r?.validateOn,value:e.value});C.attachFormField((0,v.useField)({disabled:C.disabled,onReset:()=>{C.reset(),S.recompute()},toFormValue:e=>e,validationMessage:C.validationMessage,validity:C.validity,value:C.value}));function w(n){t(`send`,{originalEvent:n,value:C.value.value.trim()})&&e[`clear-on-send`].value!==!1&&(C.clear(),S.recompute(),h.value?.focus())}let T=d.createComposerControl({disabled:a,loading:(0,_.computed)(()=>!!e.loading.value),onSend:w,sendShortcut:e[`send-shortcut`],value:C.value});return(0,g.onElement)(h,t=>{let n=C.wire(t),r=S.wire(t),i=l.bindRefCallback(e.ref,t),a=e=>T.handleKeydown(e);return t.addEventListener(`keydown`,a),()=>{t.removeEventListener(`keydown`,a),n(),r(),i()}}),(0,g.bind)({attr:{error:f.errorAttr(C.errorText),size:i.size,success:()=>e.success.value&&!C.errorText.value?!0:void 0,variant:i.variant}}),g.html`
       <div class="composer" part="composer">
         <textarea
           class="field"
           part="field"
-          ref="${b}"
+          ref="${h}"
           :rows="${()=>e.rows.value??1}"
           :name="${()=>e.name.value??``}"
           :placeholder="${()=>e.placeholder.value??`Message…`}"
@@ -11,19 +11,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           ?disabled="${a}"
           ?readonly="${()=>!!e.readonly.value}"
           ?required="${()=>!!e.required.value}"
-          :value="${(0,h.live)(S.value)}"
+          :value="${(0,y.live)(C.value)}"
           :aria-label="${()=>e.label.value||`Message`}"
-          :aria-keyshortcuts="${w.keyShortcutsHint}"
-          :aria-describedby="${S.ariaDescribedBy}"
-          :aria-errormessage="${S.ariaErrorMessage}"
-          :aria-invalid="${S.ariaInvalid}"></textarea>
-        <span class="${()=>c.counterClassName(S.counter?.value)}" aria-live="polite" ?hidden="${()=>!S.counter}">${()=>S.counter?.value.counterText.replace(` / `,`/`)??``}</span>
-        <div id="${S.assistiveId}" class="helper-text" aria-live="polite" part="helper" ?hidden="${()=>!!S.errorText.value||!S.helperText.value}">
-          ${()=>S.helperText.value}
-        </div>
-        <div id="${S.errorId}" class="helper-text" role="alert" part="error" ?hidden="${()=>!S.errorText.value}">
-          ${()=>S.errorText.value}
-        </div>
+          :aria-keyshortcuts="${T.keyShortcutsHint}"
+          :aria-describedby="${C.ariaDescribedBy}"
+          :aria-errormessage="${C.ariaErrorMessage}"
+          :aria-invalid="${C.ariaInvalid}"></textarea>
+        ${m.renderStatusIcon(C.errorText)} ${m.renderFieldStatusRegion(C)}
         <div class="toolbar" part="toolbar">
           <div class="toolbar-start" part="toolbar-start">
             <slot name="prefix"></slot>
@@ -31,7 +25,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <div class="toolbar-end" part="toolbar-end">
             <slot name="suffix"></slot>
             <slot name="send"></slot>
-            ${()=>n.has(`send`).value?``:m.html`<ore-button
+            ${()=>n.has(`send`).value?``:g.html`<ore-button
                     class="send-btn"
                     part="send-button"
                     type="button"
@@ -39,14 +33,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                     variant="solid"
                     :color="${()=>e.color.value||`primary`}"
                     :size="${i.size}"
-                    :label="${()=>e[`send-label`].value||v}"
+                    :label="${()=>e[`send-label`].value||b}"
                     ?loading="${()=>!!e.loading.value}"
-                    ?disabled="${()=>!w.canSend.value}"
-                    @click="${e=>w.send(e)}">
-                    <ore-icon name="${()=>e[`send-icon`].value||y}" size="16"></ore-icon>
+                    ?disabled="${()=>!T.canSend.value}"
+                    @click="${e=>T.send(e)}">
+                    <ore-icon name="${()=>e[`send-icon`].value||x}" size="16"></ore-icon>
                   </ore-button>`}
           </div>
         </div>
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,n.disabledLoadingMixin,r.forcedColorsMixin,r.forcedColorsFocusMixin(`.field`),t.sizeVariantMixin(a.MESSAGE_COMPOSER_SIZE_PRESET),p.default]}),exports.MESSAGE_COMPOSER_TAG=b;
+    `},shadow:{delegatesFocus:!0},styles:[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,n.disabledLoadingMixin,r.forcedColorsMixin,r.forcedColorsFocusMixin(`.field`),t.sizeVariantMixin(o.MESSAGE_COMPOSER_SIZE_PRESET),h.default,i.fieldVariantMixin({container:`.composer`,text:`.field`,tokenPrefix:`message-composer`})]}),exports.MESSAGE_COMPOSER_TAG=S;
 //# sourceMappingURL=message-composer.cjs.map