reka-ui 2.1.1 → 2.2.1

package/dist/NavigationMenu/NavigationMenuTrigger.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onMounted, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, mergeProps, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, onMounted, createElementBlock, openBlock, Fragment, createVNode, createCommentVNode, unref, withCtx, mergeProps, renderSlot } from 'vue';
 import { refAutoReset, unrefElement } from '@vueuse/core';
 import { m as makeTriggerId, a as makeContentId, g as getOpenState } from './utils.js';
 import { u as useCollection } from '../Collection/Collection.js';
@@ -83,7 +83,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function setFocusProxyRef(node) {
       itemContext.focusProxyRef.value = unrefElement(node);
-      return undefined;
+      return void 0;
     }
     function handleVisuallyHiddenFocus(ev) {
       const content = document.getElementById(itemContext.contentId);
@@ -101,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               id: triggerId.value,
               ref: unref(forwardRef),
               disabled: _ctx.disabled,
-              "data-disabled": _ctx.disabled ? "" : undefined,
+              "data-disabled": _ctx.disabled ? "" : void 0,
               "data-state": unref(getOpenState)(open.value),
               "data-navigation-menu-trigger": "",
               "aria-expanded": open.value,

package/dist/NavigationMenu/NavigationMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuTrigger.js","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { VNode } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useCollection } from '@/Collection'\n\nexport interface NavigationMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport { refAutoReset, unrefElement } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,cAAc,+BAAgC,EAAA;AAEpD,IAAA,MAAM,EAAE,cAAe,EAAA,GAAI,cAAc,EAAE,GAAA,EAAK,kBAAkB,CAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AACxE,IAAM,MAAA,SAAA,GAAY,IAAI,EAAE,CAAA;AACxB,IAAM,MAAA,SAAA,GAAY,IAAI,EAAE,CAAA;AAExB,IAAM,MAAA,uBAAA,GAA0B,YAAa,CAAA,KAAA,EAAO,GAAG,CAAA;AACvD,IAAM,MAAA,gBAAA,GAAmB,IAAI,KAAK,CAAA;AAElC,IAAA,MAAM,OAAO,QAAS,CAAA,MAAM,YAAY,KAAU,KAAA,WAAA,CAAY,WAAW,KAAK,CAAA;AAE9E,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAa,GAAA,cAAA;AACzB,MAAA,SAAA,CAAU,KAAQ,GAAA,aAAA,CAAc,WAAY,CAAA,MAAA,EAAQ,YAAY,KAAK,CAAA;AACrE,MAAA,SAAA,CAAU,KAAQ,GAAA,aAAA,CAAc,WAAY,CAAA,MAAA,EAAQ,YAAY,KAAK,CAAA;AAAA,KACtE,CAAA;AAED,IAAA,SAAS,kBAAqB,GAAA;AAC5B,MAAA,IAAI,YAAY,mBAAoB,CAAA,KAAA;AAClC,QAAA;AAEF,MAAA,gBAAA,CAAiB,KAAQ,GAAA,KAAA;AACzB,MAAA,WAAA,CAAY,kBAAkB,KAAQ,GAAA,KAAA;AAAA;AAGxC,IAAA,SAAS,kBAAkB,EAAkB,EAAA;AAC3C,MAAA,IAAI,YAAY,mBAAoB,CAAA,KAAA;AAClC,QAAA;AAEF,MAAI,IAAA,EAAA,CAAG,gBAAgB,OAAS,EAAA;AAC9B,QACE,IAAA,KAAA,CAAM,YACH,gBAAiB,CAAA,KAAA,IACjB,YAAY,iBAAkB,CAAA,KAAA,IAC9B,wBAAwB,KAC3B,EAAA;AACA,UAAA;AAAA;AAGF,QAAY,WAAA,CAAA,cAAA,CAAe,YAAY,KAAK,CAAA;AAC5C,QAAA,uBAAA,CAAwB,KAAQ,GAAA,IAAA;AAAA;AAClC;AAGF,IAAA,SAAS,mBAAmB,EAAkB,EAAA;AAC5C,MAAA,IAAI,YAAY,mBAAoB,CAAA,KAAA;AAClC,QAAA;AAEF,MAAI,IAAA,EAAA,CAAG,gBAAgB,OAAS,EAAA;AAC9B,QAAA,IAAI,KAAM,CAAA,QAAA;AACR,UAAA;AACF,QAAA,WAAA,CAAY,cAAe,EAAA;AAC3B,QAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAAA;AAClC;AAGF,IAAA,SAAS,YAAY,KAAqB,EAAA;AACxC,MAAA,IAAI,KAAM,CAAA,WAAA,KAAgB,OAAW,IAAA,WAAA,CAAY,mBAAoB,CAAA,KAAA;AACnE,QAAA;AAGF,MAAA,IAAI,uBAAwB,CAAA,KAAA;AAC1B,QAAA;AAEF,MAAA,IAAI,IAAK,CAAA,KAAA;AACP,QAAA,WAAA,CAAY,aAAa,EAAE,CAAA;AAAA,WACxB,WAAA,CAAY,YAAa,CAAA,WAAA,CAAY,KAAK,CAAA;AAE/C,MAAA,gBAAA,CAAiB,QAAQ,IAAK,CAAA,KAAA;AAAA;AAGhC,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAA,MAAM,gBAAmB,GAAA,WAAA,CAAY,GAAI,CAAA,KAAA,KAAU,QAAQ,WAAc,GAAA,YAAA;AACzE,MAAM,MAAA,QAAA,GAAW,EAAE,UAAY,EAAA,WAAA,EAAa,UAAU,gBAAiB,EAAA,CACrE,YAAY,WACd,CAAA;AACA,MAAA,IAAI,IAAK,CAAA,KAAA,IAAS,EAAG,CAAA,GAAA,KAAQ,QAAU,EAAA;AACrC,QAAA,WAAA,CAAY,cAAe,EAAA;AAE3B,QAAA,EAAA,CAAG,cAAe,EAAA;AAClB,QAAA,EAAA,CAAG,eAAgB,EAAA;AAAA;AACrB;AAGF,IAAA,SAAS,iBAAiB,IAAa,EAAA;AAErC,MAAY,WAAA,CAAA,aAAA,CAAc,KAAQ,GAAA,YAAA,CAAa,IAAI,CAAA;AACnD,MAAO,OAAA,SAAA;AAAA;AAGT,IAAA,SAAS,0BAA0B,EAAgB,EAAA;AACjD,MAAA,MAAM,OAAU,GAAA,QAAA,CAAS,cAAe,CAAA,WAAA,CAAY,SAAS,CAAA;AAC7D,MAAA,MAAM,qBAAqB,EAAG,CAAA,aAAA;AAE9B,MAAM,MAAA,iBAAA,GAAoB,uBAAuB,cAAe,CAAA,KAAA;AAChE,MAAM,MAAA,mBAAA,GAAsB,OAAS,EAAA,QAAA,CAAS,kBAAkB,CAAA;AAEhE,MAAA,IAAI,qBAAqB,CAAC,mBAAA;AACxB,QAAY,WAAA,CAAA,iBAAA,CAAkB,iBAAoB,GAAA,OAAA,GAAU,KAAK,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuTrigger.js","sources":["../../src/NavigationMenu/NavigationMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { VNode } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { refAutoReset, unrefElement } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, makeContentId, makeTriggerId } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst menuContext = injectNavigationMenuContext()\nconst itemContext = injectNavigationMenuItemContext()\n\nconst { CollectionItem } = useCollection({ key: 'NavigationMenu' })\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\nconst triggerId = ref('')\nconst contentId = ref('')\n\nconst hasPointerMoveOpenedRef = refAutoReset(false, 300)\nconst wasClickCloseRef = ref(false)\n\nconst open = computed(() => itemContext.value === menuContext.modelValue.value)\n\nonMounted(() => {\n  itemContext.triggerRef = triggerElement\n  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)\n  contentId.value = makeContentId(menuContext.baseId, itemContext.value)\n})\n\nfunction handlePointerEnter() {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  wasClickCloseRef.value = false\n  itemContext.wasEscapeCloseRef.value = false\n}\n\nfunction handlePointerMove(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (\n      props.disabled\n      || wasClickCloseRef.value\n      || itemContext.wasEscapeCloseRef.value\n      || hasPointerMoveOpenedRef.value\n    ) {\n      return\n    }\n\n    menuContext.onTriggerEnter(itemContext.value)\n    hasPointerMoveOpenedRef.value = true\n  }\n}\n\nfunction handlePointerLeave(ev: PointerEvent) {\n  if (menuContext.disableHoverTrigger.value)\n    return\n\n  if (ev.pointerType === 'mouse') {\n    if (props.disabled)\n      return\n    menuContext.onTriggerLeave()\n    hasPointerMoveOpenedRef.value = false\n  }\n}\n\nfunction handleClick(event: PointerEvent) {\n  if (event.pointerType === 'mouse' && menuContext.disableClickTrigger.value)\n    return\n\n  // if open via pointermove, we prevent click event\n  if (hasPointerMoveOpenedRef.value)\n    return\n\n  if (open.value)\n    menuContext.onItemSelect('')\n  else menuContext.onItemSelect(itemContext.value)\n\n  wasClickCloseRef.value = open.value\n}\n\nfunction handleKeydown(ev: KeyboardEvent) {\n  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'\n  const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n    menuContext.orientation\n  ]\n  if (open.value && ev.key === entryKey) {\n    itemContext.onEntryKeyDown()\n    // Prevent FocusGroupItem from handling the event\n    ev.preventDefault()\n    ev.stopPropagation()\n  }\n}\n\nfunction setFocusProxyRef(node: VNode) {\n  // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode\n  itemContext.focusProxyRef.value = unrefElement(node)\n  return undefined\n}\n\nfunction handleVisuallyHiddenFocus(ev: FocusEvent) {\n  const content = document.getElementById(itemContext.contentId)\n  const prevFocusedElement = ev.relatedTarget as HTMLElement | null\n\n  const wasTriggerFocused = prevFocusedElement === triggerElement.value\n  const wasFocusFromContent = content?.contains(prevFocusedElement)\n\n  if (wasTriggerFocused || !wasFocusFromContent)\n    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')\n}\n</script>\n\n<template>\n  <CollectionItem>\n    <Primitive\n      :id=\"triggerId\"\n      :ref=\"forwardRef\"\n      :disabled=\"disabled\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :data-state=\"getOpenState(open)\"\n      data-navigation-menu-trigger\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      v-bind=\"$attrs\"\n      @pointerenter=\"handlePointerEnter\"\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeydown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n\n  <template v-if=\"open\">\n    <VisuallyHidden\n      :ref=\"setFocusProxyRef\"\n      aria-hidden=\"true\"\n      :tabindex=\"0\"\n      @focus=\"handleVisuallyHiddenFocus\"\n    />\n    <span\n      v-if=\"menuContext.viewport\"\n      :aria-owns=\"contentId\"\n    />\n  </template>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.cjs

@@ -109,8 +109,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         present: _ctx.forceMount || open.value,
         "force-mount": !vue.unref(menuContext).unmountOnHide.value,
         onAfterLeave: _cache[2] || (_cache[2] = () => {
-          size.value = undefined;
-          position.value = undefined;
+          size.value = void 0;
+          position.value = void 0;
         })
       }, {
         default: vue.withCtx(({ present }) => [
@@ -122,11 +122,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "data-orientation": vue.unref(menuContext).orientation,
             style: {
               // Prevent interaction when animating out
-              pointerEvents: !open.value && vue.unref(menuContext).isRootMenu ? "none" : undefined,
-              ["--reka-navigation-menu-viewport-width"]: size.value ? `${size.value?.width}px` : undefined,
-              ["--reka-navigation-menu-viewport-height"]: size.value ? `${size.value?.height}px` : undefined,
-              ["--reka-navigation-menu-viewport-left"]: position.value ? `${position.value?.left}px` : undefined,
-              ["--reka-navigation-menu-viewport-top"]: position.value ? `${position.value?.top}px` : undefined
+              pointerEvents: !open.value && vue.unref(menuContext).isRootMenu ? "none" : void 0,
+              ["--reka-navigation-menu-viewport-width"]: size.value ? `${size.value?.width}px` : void 0,
+              ["--reka-navigation-menu-viewport-height"]: size.value ? `${size.value?.height}px` : void 0,
+              ["--reka-navigation-menu-viewport-left"]: position.value ? `${position.value?.left}px` : void 0,
+              ["--reka-navigation-menu-viewport-top"]: position.value ? `${position.value?.top}px` : void 0
             },
             hidden: !present,
             onPointerenter: _cache[0] || (_cache[0] = ($event) => vue.unref(menuContext).onContentEnter(vue.unref(menuContext).modelValue.value)),

package/dist/NavigationMenu/NavigationMenuViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
+import { defineComponent, ref, computed, watch, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
-import { g as getOpenState, w as whenMouse } from './utils.js';
+import { w as whenMouse, g as getOpenState } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Presence } from '../Presence/Presence.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
@@ -107,8 +107,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         present: _ctx.forceMount || open.value,
         "force-mount": !unref(menuContext).unmountOnHide.value,
         onAfterLeave: _cache[2] || (_cache[2] = () => {
-          size.value = undefined;
-          position.value = undefined;
+          size.value = void 0;
+          position.value = void 0;
         })
       }, {
         default: withCtx(({ present }) => [
@@ -120,11 +120,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "data-orientation": unref(menuContext).orientation,
             style: {
               // Prevent interaction when animating out
-              pointerEvents: !open.value && unref(menuContext).isRootMenu ? "none" : undefined,
-              ["--reka-navigation-menu-viewport-width"]: size.value ? `${size.value?.width}px` : undefined,
-              ["--reka-navigation-menu-viewport-height"]: size.value ? `${size.value?.height}px` : undefined,
-              ["--reka-navigation-menu-viewport-left"]: position.value ? `${position.value?.left}px` : undefined,
-              ["--reka-navigation-menu-viewport-top"]: position.value ? `${position.value?.top}px` : undefined
+              pointerEvents: !open.value && unref(menuContext).isRootMenu ? "none" : void 0,
+              ["--reka-navigation-menu-viewport-width"]: size.value ? `${size.value?.width}px` : void 0,
+              ["--reka-navigation-menu-viewport-height"]: size.value ? `${size.value?.height}px` : void 0,
+              ["--reka-navigation-menu-viewport-left"]: position.value ? `${position.value?.left}px` : void 0,
+              ["--reka-navigation-menu-viewport-top"]: position.value ? `${position.value?.top}px` : void 0
             },
             hidden: !present,
             onPointerenter: _cache[0] || (_cache[0] = ($event) => unref(menuContext).onContentEnter(unref(menuContext).modelValue.value)),

package/dist/NavigationMenu/NavigationMenuViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { computed, ref, watch } from 'vue'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,UAAA,EAAe,GAAA,WAAA;AAE1D,IAAA,MAAM,OAAO,GAAuC,EAAA;AACpD,IAAA,MAAM,WAAW,GAAmC,EAAA;AAEpD,IAAA,MAAM,OAAO,QAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAE1D,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAY,WAAA,CAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,MAAM,UAAU,GAAiB,EAAA;AAEjC,IAAA,KAAA,CAAM,CAAC,UAAA,EAAY,IAAI,CAAA,EAAG,MAAM;AAC9B,MAAA,IAAI,CAAC,cAAe,CAAA,KAAA;AAClB,QAAA;AAEF,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,MAAM,EAAM,GAAA,cAAA,CAAe,KAAuB,EAAA,aAAA,CAAc,mBAAmB,CAAA;AACnF,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OACjB,CAAA;AAAA,OACA,EAAE,SAAA,EAAW,IAAM,EAAA,KAAA,EAAO,QAAQ,CAAA;AAErC,IAAA,SAAS,cAAiB,GAAA;AACxB,MAAA,IAAI,OAAQ,CAAA,KAAA,IAAS,aAAc,CAAA,KAAA,IAAS,mBAAmB,KAAO,EAAA;AACpE,QAAM,MAAA,SAAA,GAAY,SAAS,eAAgB,CAAA,WAAA;AAC3C,QAAM,MAAA,UAAA,GAAa,SAAS,eAAgB,CAAA,YAAA;AAC5C,QAAM,MAAA,QAAA,GAAW,kBAAmB,CAAA,KAAA,CAAM,qBAAsB,EAAA;AAChE,QAAM,MAAA,IAAA,GAAO,aAAc,CAAA,KAAA,CAAM,qBAAsB,EAAA;AACvD,QAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,OAAQ,CAAA,KAAA;AAG9C,QAAM,MAAA,iBAAA,GAAoB,IAAK,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA;AAC/C,QAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,GAAA,GAAM,QAAS,CAAA,GAAA;AAG7C,QAAA,IAAI,OAAU,GAAA,IAAA;AACd,QAAA,IAAI,MAAS,GAAA,IAAA;AACb,QAAA,QAAQ,MAAM,KAAO;AAAA,UACnB,KAAK,OAAA;AACH,YAAU,OAAA,GAAA,iBAAA;AACV,YAAS,MAAA,GAAA,gBAAA;AACT,YAAA;AAAA,UACF,KAAK,KAAA;AACH,YAAU,OAAA,GAAA,iBAAA,GAAoB,cAAc,IAAK,CAAA,KAAA;AACjD,YAAS,MAAA,GAAA,gBAAA,GAAmB,eAAe,IAAK,CAAA,MAAA;AAChD,YAAA;AAAA,UACF;AAEE,YAAA,OAAA,GAAU,iBAAoB,GAAA,WAAA,GAAc,CAAI,GAAA,IAAA,CAAK,KAAQ,GAAA,CAAA;AAC7D,YAAA,MAAA,GAAS,gBAAmB,GAAA,YAAA,GAAe,CAAI,GAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAAA;AAGjE,QAAA,MAAM,YAAe,GAAA,EAAA;AAGrB,QAAI,IAAA,OAAA,GAAU,QAAS,CAAA,IAAA,GAAO,YAAc,EAAA;AAC1C,UAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AAIpC,QAAM,MAAA,WAAA,GAAc,OAAU,GAAA,QAAA,CAAS,IAAO,GAAA,WAAA;AAC9C,QAAI,IAAA,WAAA,GAAc,YAAY,YAAc,EAAA;AAC1C,UAAA,OAAA,IAAW,cAAc,SAAY,GAAA,YAAA;AAGrC,UAAI,IAAA,OAAA,GAAU,YAAe,GAAA,QAAA,CAAS,IAAM,EAAA;AAE1C,YAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AACpC;AAIF,QAAI,IAAA,MAAA,GAAS,QAAS,CAAA,GAAA,GAAM,YAAc,EAAA;AACxC,UAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AAInC,QAAM,MAAA,YAAA,GAAe,MAAS,GAAA,QAAA,CAAS,GAAM,GAAA,YAAA;AAC7C,QAAI,IAAA,YAAA,GAAe,aAAa,YAAc,EAAA;AAC5C,UAAA,MAAA,IAAU,eAAe,UAAa,GAAA,YAAA;AAGtC,UAAI,IAAA,MAAA,GAAS,YAAe,GAAA,QAAA,CAAS,GAAK,EAAA;AAExC,YAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AACnC;AAIF,QAAU,OAAA,GAAA,IAAA,CAAK,MAAM,OAAO,CAAA;AAC5B,QAAS,MAAA,GAAA,IAAA,CAAK,MAAM,MAAM,CAAA;AAE1B,QAAA,QAAA,CAAS,KAAQ,GAAA;AAAA,UACf,IAAM,EAAA,OAAA;AAAA,UACN,GAAK,EAAA;AAAA,SACP;AAAA;AACF;AAGF,IAAA,iBAAA,CAAkB,SAAS,MAAM;AAC/B,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,IAAA,CAAK,KAAQ,GAAA;AAAA,UACX,KAAA,EAAO,QAAQ,KAAM,CAAA,WAAA;AAAA,UACrB,MAAA,EAAQ,QAAQ,KAAM,CAAA;AAAA,SACxB;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAA,iBAAA,CAAkB,CAAC,UAAW,CAAA,QAAA,EAAU,IAAM,EAAA,kBAAkB,GAAG,MAAM;AACvE,MAAe,cAAA,EAAA;AAAA,KAChB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/utils.cjs

@@ -48,7 +48,7 @@ function removeFromTabOrder(candidates) {
   };
 }
 function whenMouse(handler) {
-  return (event) => event.pointerType === "mouse" ? handler(event) : undefined;
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
 }
 
 exports.EVENT_ROOT_CONTENT_DISMISS = EVENT_ROOT_CONTENT_DISMISS;

package/dist/NavigationMenu/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/NavigationMenu/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'vertical' | 'horizontal'\nexport type Direction = 'ltr' | 'rtl'\n\nexport function getOpenState(open: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport const LINK_SELECT = 'navigationMenu.linkSelect'\nexport const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput)\n        return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0\n        ? NodeFilter.FILTER_ACCEPT\n        : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport function focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = getActiveElement()\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement)\n      return true\n    candidate.focus()\n    return getActiveElement() !== previouslyFocusedElement\n  })\n}\n\nexport function removeFromTabOrder(candidates: HTMLElement[]) {\n  candidates.forEach((candidate) => {\n    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''\n    candidate.setAttribute('tabindex', '-1')\n  })\n  return () => {\n    candidates.forEach((candidate) => {\n      const prevTabIndex = candidate.dataset.tabindex as string\n      candidate.setAttribute('tabindex', prevTabIndex)\n    })\n  }\n}\n\nexport function whenMouse<E extends PointerEvent>(handler: (event?: E) => void) {\n  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)\n}\n"],"names":["getActiveElement"],"mappings":";;;;AAKO,SAAS,aAAa,IAAe,EAAA;AAC1C,EAAA,OAAO,OAAO,MAAS,GAAA,QAAA;AACzB;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEO,MAAM,WAAc,GAAA;AACpB,MAAM,0BAA6B,GAAA;AAYnC,SAAS,sBAAsB,SAAwB,EAAA;AAC5D,EAAA,MAAM,QAAuB,EAAC;AAC9B,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,gBAAiB,CAAA,SAAA,EAAW,WAAW,YAAc,EAAA;AAAA,IAC3E,UAAA,EAAY,CAAC,IAAc,KAAA;AACzB,MAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,OAAY,KAAA,OAAA,IAAW,KAAK,IAAS,KAAA,QAAA;AAChE,MAAI,IAAA,IAAA,CAAK,QAAY,IAAA,IAAA,CAAK,MAAU,IAAA,aAAA;AAClC,QAAA,OAAO,UAAW,CAAA,WAAA;AAIpB,MAAA,OAAO,IAAK,CAAA,QAAA,IAAY,CACpB,GAAA,UAAA,CAAW,gBACX,UAAW,CAAA,WAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAA,OAAO,OAAO,QAAS,EAAA,EAAS,KAAA,CAAA,IAAA,CAAK,OAAO,WAA0B,CAAA;AAGtE,EAAO,OAAA,KAAA;AACT;AAEO,SAAS,WAAW,UAA2B,EAAA;AACpD,EAAA,MAAM,2BAA2BA,wCAAiB,EAAA;AAClD,EAAO,OAAA,UAAA,CAAW,IAAK,CAAA,CAAC,SAAc,KAAA;AAEpC,IAAA,IAAI,SAAc,KAAA,wBAAA;AAChB,MAAO,OAAA,IAAA;AACT,IAAA,SAAA,CAAU,KAAM,EAAA;AAChB,IAAA,OAAOA,0CAAuB,KAAA,wBAAA;AAAA,GAC/B,CAAA;AACH;AAEO,SAAS,mBAAmB,UAA2B,EAAA;AAC5D,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,IAAA,SAAA,CAAU,OAAQ,CAAA,QAAA,GAAW,SAAU,CAAA,YAAA,CAAa,UAAU,CAAK,IAAA,EAAA;AACnE,IAAU,SAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA,GACxC,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,MAAM,MAAA,YAAA,GAAe,UAAU,OAAQ,CAAA,QAAA;AACvC,MAAU,SAAA,CAAA,YAAA,CAAa,YAAY,YAAY,CAAA;AAAA,KAChD,CAAA;AAAA,GACH;AACF;AAEO,SAAS,UAAkC,OAA8B,EAAA;AAC9E,EAAA,OAAO,CAAC,KAAc,KAAA,KAAA,CAAM,gBAAgB,OAAU,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,SAAA;AACzE;;;;;;;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/NavigationMenu/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'vertical' | 'horizontal'\nexport type Direction = 'ltr' | 'rtl'\n\nexport function getOpenState(open: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport const LINK_SELECT = 'navigationMenu.linkSelect'\nexport const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput)\n        return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0\n        ? NodeFilter.FILTER_ACCEPT\n        : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport function focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = getActiveElement()\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement)\n      return true\n    candidate.focus()\n    return getActiveElement() !== previouslyFocusedElement\n  })\n}\n\nexport function removeFromTabOrder(candidates: HTMLElement[]) {\n  candidates.forEach((candidate) => {\n    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''\n    candidate.setAttribute('tabindex', '-1')\n  })\n  return () => {\n    candidates.forEach((candidate) => {\n      const prevTabIndex = candidate.dataset.tabindex as string\n      candidate.setAttribute('tabindex', prevTabIndex)\n    })\n  }\n}\n\nexport function whenMouse<E extends PointerEvent>(handler: (event?: E) => void) {\n  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)\n}\n"],"names":["getActiveElement"],"mappings":";;;;AAKO,SAAS,aAAa,IAAe,EAAA;AAC1C,EAAA,OAAO,OAAO,MAAS,GAAA,QAAA;AACzB;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEO,MAAM,WAAc,GAAA;AACpB,MAAM,0BAA6B,GAAA;AAYnC,SAAS,sBAAsB,SAAwB,EAAA;AAC5D,EAAA,MAAM,QAAuB,EAAC;AAC9B,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,gBAAiB,CAAA,SAAA,EAAW,WAAW,YAAc,EAAA;AAAA,IAC3E,UAAA,EAAY,CAAC,IAAc,KAAA;AACzB,MAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,OAAY,KAAA,OAAA,IAAW,KAAK,IAAS,KAAA,QAAA;AAChE,MAAI,IAAA,IAAA,CAAK,QAAY,IAAA,IAAA,CAAK,MAAU,IAAA,aAAA;AAClC,QAAA,OAAO,UAAW,CAAA,WAAA;AAIpB,MAAA,OAAO,IAAK,CAAA,QAAA,IAAY,CACpB,GAAA,UAAA,CAAW,gBACX,UAAW,CAAA,WAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAA,OAAO,OAAO,QAAS,EAAA,EAAS,KAAA,CAAA,IAAA,CAAK,OAAO,WAA0B,CAAA;AAGtE,EAAO,OAAA,KAAA;AACT;AAEO,SAAS,WAAW,UAA2B,EAAA;AACpD,EAAA,MAAM,2BAA2BA,wCAAiB,EAAA;AAClD,EAAO,OAAA,UAAA,CAAW,IAAK,CAAA,CAAC,SAAc,KAAA;AAEpC,IAAA,IAAI,SAAc,KAAA,wBAAA;AAChB,MAAO,OAAA,IAAA;AACT,IAAA,SAAA,CAAU,KAAM,EAAA;AAChB,IAAA,OAAOA,0CAAuB,KAAA,wBAAA;AAAA,GAC/B,CAAA;AACH;AAEO,SAAS,mBAAmB,UAA2B,EAAA;AAC5D,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,IAAA,SAAA,CAAU,OAAQ,CAAA,QAAA,GAAW,SAAU,CAAA,YAAA,CAAa,UAAU,CAAK,IAAA,EAAA;AACnE,IAAU,SAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA,GACxC,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,MAAM,MAAA,YAAA,GAAe,UAAU,OAAQ,CAAA,QAAA;AACvC,MAAU,SAAA,CAAA,YAAA,CAAa,YAAY,YAAY,CAAA;AAAA,KAChD,CAAA;AAAA,GACH;AACF;AAEO,SAAS,UAAkC,OAA8B,EAAA;AAC9E,EAAA,OAAO,CAAC,KAAc,KAAA,KAAA,CAAM,gBAAgB,OAAU,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AACzE;;;;;;;;;;;;"}

package/dist/NavigationMenu/utils.js

@@ -46,7 +46,7 @@ function removeFromTabOrder(candidates) {
   };
 }
 function whenMouse(handler) {
-  return (event) => event.pointerType === "mouse" ? handler(event) : undefined;
+  return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
 }
 
 export { EVENT_ROOT_CONTENT_DISMISS as E, LINK_SELECT as L, makeContentId as a, getTabbableCandidates as b, focusFirst as f, getOpenState as g, makeTriggerId as m, removeFromTabOrder as r, whenMouse as w };

package/dist/NavigationMenu/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/NavigationMenu/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'vertical' | 'horizontal'\nexport type Direction = 'ltr' | 'rtl'\n\nexport function getOpenState(open: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport const LINK_SELECT = 'navigationMenu.linkSelect'\nexport const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput)\n        return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0\n        ? NodeFilter.FILTER_ACCEPT\n        : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport function focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = getActiveElement()\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement)\n      return true\n    candidate.focus()\n    return getActiveElement() !== previouslyFocusedElement\n  })\n}\n\nexport function removeFromTabOrder(candidates: HTMLElement[]) {\n  candidates.forEach((candidate) => {\n    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''\n    candidate.setAttribute('tabindex', '-1')\n  })\n  return () => {\n    candidates.forEach((candidate) => {\n      const prevTabIndex = candidate.dataset.tabindex as string\n      candidate.setAttribute('tabindex', prevTabIndex)\n    })\n  }\n}\n\nexport function whenMouse<E extends PointerEvent>(handler: (event?: E) => void) {\n  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)\n}\n"],"names":[],"mappings":";;AAKO,SAAS,aAAa,IAAe,EAAA;AAC1C,EAAA,OAAO,OAAO,MAAS,GAAA,QAAA;AACzB;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEO,MAAM,WAAc,GAAA;AACpB,MAAM,0BAA6B,GAAA;AAYnC,SAAS,sBAAsB,SAAwB,EAAA;AAC5D,EAAA,MAAM,QAAuB,EAAC;AAC9B,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,gBAAiB,CAAA,SAAA,EAAW,WAAW,YAAc,EAAA;AAAA,IAC3E,UAAA,EAAY,CAAC,IAAc,KAAA;AACzB,MAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,OAAY,KAAA,OAAA,IAAW,KAAK,IAAS,KAAA,QAAA;AAChE,MAAI,IAAA,IAAA,CAAK,QAAY,IAAA,IAAA,CAAK,MAAU,IAAA,aAAA;AAClC,QAAA,OAAO,UAAW,CAAA,WAAA;AAIpB,MAAA,OAAO,IAAK,CAAA,QAAA,IAAY,CACpB,GAAA,UAAA,CAAW,gBACX,UAAW,CAAA,WAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAA,OAAO,OAAO,QAAS,EAAA,EAAS,KAAA,CAAA,IAAA,CAAK,OAAO,WAA0B,CAAA;AAGtE,EAAO,OAAA,KAAA;AACT;AAEO,SAAS,WAAW,UAA2B,EAAA;AACpD,EAAA,MAAM,2BAA2B,gBAAiB,EAAA;AAClD,EAAO,OAAA,UAAA,CAAW,IAAK,CAAA,CAAC,SAAc,KAAA;AAEpC,IAAA,IAAI,SAAc,KAAA,wBAAA;AAChB,MAAO,OAAA,IAAA;AACT,IAAA,SAAA,CAAU,KAAM,EAAA;AAChB,IAAA,OAAO,kBAAuB,KAAA,wBAAA;AAAA,GAC/B,CAAA;AACH;AAEO,SAAS,mBAAmB,UAA2B,EAAA;AAC5D,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,IAAA,SAAA,CAAU,OAAQ,CAAA,QAAA,GAAW,SAAU,CAAA,YAAA,CAAa,UAAU,CAAK,IAAA,EAAA;AACnE,IAAU,SAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA,GACxC,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,MAAM,MAAA,YAAA,GAAe,UAAU,OAAQ,CAAA,QAAA;AACvC,MAAU,SAAA,CAAA,YAAA,CAAa,YAAY,YAAY,CAAA;AAAA,KAChD,CAAA;AAAA,GACH;AACF;AAEO,SAAS,UAAkC,OAA8B,EAAA;AAC9E,EAAA,OAAO,CAAC,KAAc,KAAA,KAAA,CAAM,gBAAgB,OAAU,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,SAAA;AACzE;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/NavigationMenu/utils.ts"],"sourcesContent":["import { getActiveElement } from '@/shared'\n\nexport type Orientation = 'vertical' | 'horizontal'\nexport type Direction = 'ltr' | 'rtl'\n\nexport function getOpenState(open: boolean) {\n  return open ? 'open' : 'closed'\n}\n\nexport function makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`\n}\n\nexport function makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`\n}\n\nexport const LINK_SELECT = 'navigationMenu.linkSelect'\nexport const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nexport function getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = []\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'\n      if (node.disabled || node.hidden || isHiddenInput)\n        return NodeFilter.FILTER_SKIP\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0\n        ? NodeFilter.FILTER_ACCEPT\n        : NodeFilter.FILTER_SKIP\n    },\n  })\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes\n}\n\nexport function focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = getActiveElement()\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement)\n      return true\n    candidate.focus()\n    return getActiveElement() !== previouslyFocusedElement\n  })\n}\n\nexport function removeFromTabOrder(candidates: HTMLElement[]) {\n  candidates.forEach((candidate) => {\n    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''\n    candidate.setAttribute('tabindex', '-1')\n  })\n  return () => {\n    candidates.forEach((candidate) => {\n      const prevTabIndex = candidate.dataset.tabindex as string\n      candidate.setAttribute('tabindex', prevTabIndex)\n    })\n  }\n}\n\nexport function whenMouse<E extends PointerEvent>(handler: (event?: E) => void) {\n  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)\n}\n"],"names":[],"mappings":";;AAKO,SAAS,aAAa,IAAe,EAAA;AAC1C,EAAA,OAAO,OAAO,MAAS,GAAA,QAAA;AACzB;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEgB,SAAA,aAAA,CAAc,QAAgB,KAAe,EAAA;AAC3D,EAAO,OAAA,CAAA,EAAG,MAAM,CAAA,SAAA,EAAY,KAAK,CAAA,CAAA;AACnC;AAEO,MAAM,WAAc,GAAA;AACpB,MAAM,0BAA6B,GAAA;AAYnC,SAAS,sBAAsB,SAAwB,EAAA;AAC5D,EAAA,MAAM,QAAuB,EAAC;AAC9B,EAAA,MAAM,MAAS,GAAA,QAAA,CAAS,gBAAiB,CAAA,SAAA,EAAW,WAAW,YAAc,EAAA;AAAA,IAC3E,UAAA,EAAY,CAAC,IAAc,KAAA;AACzB,MAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,OAAY,KAAA,OAAA,IAAW,KAAK,IAAS,KAAA,QAAA;AAChE,MAAI,IAAA,IAAA,CAAK,QAAY,IAAA,IAAA,CAAK,MAAU,IAAA,aAAA;AAClC,QAAA,OAAO,UAAW,CAAA,WAAA;AAIpB,MAAA,OAAO,IAAK,CAAA,QAAA,IAAY,CACpB,GAAA,UAAA,CAAW,gBACX,UAAW,CAAA,WAAA;AAAA;AACjB,GACD,CAAA;AACD,EAAA,OAAO,OAAO,QAAS,EAAA,EAAS,KAAA,CAAA,IAAA,CAAK,OAAO,WAA0B,CAAA;AAGtE,EAAO,OAAA,KAAA;AACT;AAEO,SAAS,WAAW,UAA2B,EAAA;AACpD,EAAA,MAAM,2BAA2B,gBAAiB,EAAA;AAClD,EAAO,OAAA,UAAA,CAAW,IAAK,CAAA,CAAC,SAAc,KAAA;AAEpC,IAAA,IAAI,SAAc,KAAA,wBAAA;AAChB,MAAO,OAAA,IAAA;AACT,IAAA,SAAA,CAAU,KAAM,EAAA;AAChB,IAAA,OAAO,kBAAuB,KAAA,wBAAA;AAAA,GAC/B,CAAA;AACH;AAEO,SAAS,mBAAmB,UAA2B,EAAA;AAC5D,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,IAAA,SAAA,CAAU,OAAQ,CAAA,QAAA,GAAW,SAAU,CAAA,YAAA,CAAa,UAAU,CAAK,IAAA,EAAA;AACnE,IAAU,SAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA,GACxC,CAAA;AACD,EAAA,OAAO,MAAM;AACX,IAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,SAAc,KAAA;AAChC,MAAM,MAAA,YAAA,GAAe,UAAU,OAAQ,CAAA,QAAA;AACvC,MAAU,SAAA,CAAA,YAAA,CAAa,YAAY,YAAY,CAAA;AAAA,KAChD,CAAA;AAAA,GACH;AACF;AAEO,SAAS,UAAkC,OAA8B,EAAA;AAC9E,EAAA,OAAO,CAAC,KAAc,KAAA,KAAA,CAAM,gBAAgB,OAAU,GAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AACzE;;;;"}

package/dist/NumberField/NumberFieldDecrement.cjs

@@ -2,9 +2,9 @@
 
 const vue = require('vue');
 const NumberField_utils = require('./utils.cjs');
+const NumberField_NumberFieldRoot = require('./NumberFieldRoot.cjs');
 const Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
-const NumberField_NumberFieldRoot = require('./NumberFieldRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberFieldDecrement",
@@ -28,13 +28,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref: primitiveElement,
         tabindex: "-1",
         "aria-label": "Decrease",
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         style: {
-          userSelect: vue.unref(isPressed) ? "none" : undefined
+          userSelect: vue.unref(isPressed) ? "none" : void 0
         },
-        disabled: isDisabled.value ? "" : undefined,
-        "data-disabled": isDisabled.value ? "" : undefined,
-        "data-pressed": vue.unref(isPressed) ? "true" : undefined,
+        disabled: isDisabled.value ? "" : void 0,
+        "data-disabled": isDisabled.value ? "" : void 0,
+        "data-pressed": vue.unref(isPressed) ? "true" : void 0,
         onContextmenu: _cache[0] || (_cache[0] = vue.withModifiers(() => {
         }, ["prevent"]))
       }), {

package/dist/NumberField/NumberFieldDecrement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldDecrement.cjs","sources":["../../src/NumberField/NumberFieldDecrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\nimport { computed } from 'vue'\n\nexport interface NumberFieldDecrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldDecrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleDecrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Decrease\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectNumberFieldRootContext","computed","usePrimitiveElement","usePressedHold"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAaC,YAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAAC,gCAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldDecrement.cjs","sources":["../../src/NumberField/NumberFieldDecrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\n\nexport interface NumberFieldDecrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldDecrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleDecrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Decrease\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectNumberFieldRootContext","computed","usePrimitiveElement","usePressedHold"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAaC,YAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAAC,gCAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldDecrement.js

@@ -1,8 +1,8 @@
-import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withModifiers, withCtx, renderSlot } from 'vue';
 import { u as usePressedHold } from './utils.js';
+import { i as injectNumberFieldRootContext } from './NumberFieldRoot.js';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
-import { i as injectNumberFieldRootContext } from './NumberFieldRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NumberFieldDecrement",
@@ -26,13 +26,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: primitiveElement,
         tabindex: "-1",
         "aria-label": "Decrease",
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         style: {
-          userSelect: unref(isPressed) ? "none" : undefined
+          userSelect: unref(isPressed) ? "none" : void 0
         },
-        disabled: isDisabled.value ? "" : undefined,
-        "data-disabled": isDisabled.value ? "" : undefined,
-        "data-pressed": unref(isPressed) ? "true" : undefined,
+        disabled: isDisabled.value ? "" : void 0,
+        "data-disabled": isDisabled.value ? "" : void 0,
+        "data-pressed": unref(isPressed) ? "true" : void 0,
         onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }), {

package/dist/NumberField/NumberFieldDecrement.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldDecrement.js","sources":["../../src/NumberField/NumberFieldDecrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\nimport { computed } from 'vue'\n\nexport interface NumberFieldDecrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldDecrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleDecrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Decrease\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,cAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldDecrement.js","sources":["../../src/NumberField/NumberFieldDecrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\n\nexport interface NumberFieldDecrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldDecrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleDecrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Decrease\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,cAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldIncrement.cjs

@@ -28,13 +28,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ref: primitiveElement,
         tabindex: "-1",
         "aria-label": "Increase",
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         style: {
-          userSelect: vue.unref(isPressed) ? "none" : undefined
+          userSelect: vue.unref(isPressed) ? "none" : void 0
         },
-        disabled: isDisabled.value ? "" : undefined,
-        "data-disabled": isDisabled.value ? "" : undefined,
-        "data-pressed": vue.unref(isPressed) ? "true" : undefined,
+        disabled: isDisabled.value ? "" : void 0,
+        "data-disabled": isDisabled.value ? "" : void 0,
+        "data-pressed": vue.unref(isPressed) ? "true" : void 0,
         onContextmenu: _cache[0] || (_cache[0] = vue.withModifiers(() => {
         }, ["prevent"]))
       }), {

package/dist/NumberField/NumberFieldIncrement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldIncrement.cjs","sources":["../../src/NumberField/NumberFieldIncrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\nimport { computed } from 'vue'\n\nexport interface NumberFieldIncrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldIncrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleIncrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Increase\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectNumberFieldRootContext","computed","usePrimitiveElement","usePressedHold"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAaC,YAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAAC,gCAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldIncrement.cjs","sources":["../../src/NumberField/NumberFieldIncrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\n\nexport interface NumberFieldIncrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldIncrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleIncrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Increase\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectNumberFieldRootContext","computed","usePrimitiveElement","usePressedHold"],"mappings":";;;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAaC,YAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAAC,gCAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldIncrement.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withModifiers, withCtx, renderSlot } from 'vue';
+import { defineComponent, computed, createBlock, openBlock, unref, mergeProps, withModifiers, withCtx, renderSlot } from 'vue';
 import { u as usePressedHold } from './utils.js';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
@@ -26,13 +26,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: primitiveElement,
         tabindex: "-1",
         "aria-label": "Increase",
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         style: {
-          userSelect: unref(isPressed) ? "none" : undefined
+          userSelect: unref(isPressed) ? "none" : void 0
         },
-        disabled: isDisabled.value ? "" : undefined,
-        "data-disabled": isDisabled.value ? "" : undefined,
-        "data-pressed": unref(isPressed) ? "true" : undefined,
+        disabled: isDisabled.value ? "" : void 0,
+        "data-disabled": isDisabled.value ? "" : void 0,
+        "data-pressed": unref(isPressed) ? "true" : void 0,
         onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["prevent"]))
       }), {

package/dist/NumberField/NumberFieldIncrement.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldIncrement.js","sources":["../../src/NumberField/NumberFieldIncrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\nimport { computed } from 'vue'\n\nexport interface NumberFieldIncrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldIncrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleIncrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Increase\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,cAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldIncrement.js","sources":["../../src/NumberField/NumberFieldIncrement.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { usePressedHold } from './utils'\n\nexport interface NumberFieldIncrementProps extends PrimitiveProps {\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldIncrementProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectNumberFieldRootContext()\nconst isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst { isPressed, onTrigger } = usePressedHold({ target: currentElement, disabled: isDisabled })\n\nonTrigger(() => {\n  rootContext.handleIncrease()\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    ref=\"primitiveElement\"\n    tabindex=\"-1\"\n    aria-label=\"Increase\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    :style=\"{\n      userSelect: isPressed ? 'none' : undefined,\n    }\"\n    :disabled=\"isDisabled ? '' : undefined\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-pressed=\"isPressed ? 'true' : undefined\"\n    @contextmenu.prevent\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,MAAM,WAAY,CAAA,QAAA,EAAU,SAAS,KAAM,CAAA,QAAA,IAAY,WAAY,CAAA,kBAAA,CAAmB,KAAK,CAAA;AAEvH,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,cAAA,CAAe,EAAE,MAAQ,EAAA,cAAA,EAAgB,QAAU,EAAA,UAAA,EAAY,CAAA;AAEhG,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAe,EAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldInput.cjs

@@ -2,9 +2,9 @@
 
 const vue = require('vue');
 const Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
-const NumberField_NumberFieldRoot = require('./NumberFieldRoot.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
 const shared_getActiveElement = require('../shared/getActiveElement.cjs');
+const NumberField_NumberFieldRoot = require('./NumberFieldRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberFieldInput",
@@ -51,8 +51,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         type: "text",
         tabindex: "0",
         inputmode: vue.unref(rootContext).inputMode.value,
-        disabled: vue.unref(rootContext).disabled.value ? "" : undefined,
-        "data-disabled": vue.unref(rootContext).disabled.value ? "" : undefined,
+        disabled: vue.unref(rootContext).disabled.value ? "" : void 0,
+        "data-disabled": vue.unref(rootContext).disabled.value ? "" : void 0,
         autocomplete: "off",
         autocorrect: "off",
         spellcheck: "false",
@@ -72,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         onWheel: handleWheelEvent,
         onBeforeinput: _cache[6] || (_cache[6] = (event) => {
           const target = event.target;
-          let nextValue = target.value.slice(0, target.selectionStart ?? undefined) + (event.data ?? "") + target.value.slice(target.selectionEnd ?? undefined);
+          let nextValue = target.value.slice(0, target.selectionStart ?? void 0) + (event.data ?? "") + target.value.slice(target.selectionEnd ?? void 0);
           if (!vue.unref(rootContext).validate(nextValue))
             event.preventDefault();
         }),

package/dist/NumberField/NumberFieldInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldInput.cjs","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\nimport { onMounted, ref, watch } from 'vue'\nimport { getActiveElement } from '@/shared'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["usePrimitiveElement","injectNumberFieldRootContext","getActiveElement","onMounted","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIA,iDAAoB,EAAA;AACjE,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAWC,wCAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA,WAAA,IACpB,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA;AAG/B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAAC,OAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAAC,SAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NumberFieldInput.cjs","sources":["../../src/NumberField/NumberFieldInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { getActiveElement } from '@/shared'\nimport { onMounted, ref, watch } from 'vue'\nimport { injectNumberFieldRootContext } from './NumberFieldRoot.vue'\n\nexport interface NumberFieldInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nconst props = withDefaults(defineProps<NumberFieldInputProps>(), {\n  as: 'input',\n})\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst rootContext = injectNumberFieldRootContext()\n\nfunction handleWheelEvent(event: WheelEvent) {\n  if (rootContext.disableWheelChange.value)\n    return\n\n  // only handle when in focus\n  if (event.target !== getActiveElement())\n    return\n\n  // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change\n  // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec\n  // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication\n  // especially if the user is scrolling near 45deg\n  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))\n    return\n\n  event.preventDefault()\n  if (event.deltaY > 0)\n    rootContext.handleIncrease()\n  else if (event.deltaY < 0)\n    rootContext.handleDecrease()\n}\n\nonMounted(() => {\n  rootContext.onInputElement(currentElement.value as HTMLInputElement)\n})\n\nconst inputValue = ref(rootContext.textValue.value)\nwatch(() => rootContext.textValue.value, () => {\n  inputValue.value = rootContext.textValue.value\n}, { immediate: true, deep: true })\n\nfunction handleChange() {\n  requestAnimationFrame(() => {\n    inputValue.value = rootContext.textValue.value\n  })\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :id=\"rootContext.id.value\"\n    ref=\"primitiveElement\"\n    :value=\"inputValue\"\n    role=\"spinbutton\"\n    type=\"text\"\n    tabindex=\"0\"\n    :inputmode=\"rootContext.inputMode.value\"\n    :disabled=\"rootContext.disabled.value ? '' : undefined\"\n    :data-disabled=\"rootContext.disabled.value ? '' : undefined\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    aria-roledescription=\"Number field\"\n    :aria-valuenow=\"rootContext.modelValue.value\"\n    :aria-valuemin=\"rootContext.min.value\"\n    :aria-valuemax=\"rootContext.max.value\"\n    @keydown.up.prevent=\"rootContext.handleIncrease()\"\n    @keydown.down.prevent=\"rootContext.handleDecrease()\"\n    @keydown.page-up.prevent=\"rootContext.handleIncrease(10)\"\n    @keydown.page-down.prevent=\"rootContext.handleDecrease(10)\"\n    @keydown.home.prevent=\"rootContext.handleMinMaxValue('min')\"\n    @keydown.end.prevent=\"rootContext.handleMinMaxValue('max')\"\n    @wheel=\"handleWheelEvent\"\n    @beforeinput=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      let nextValue\n        = target.value.slice(0, target.selectionStart ?? undefined)\n          + (event.data ?? '')\n          + target.value.slice(target.selectionEnd ?? undefined);\n\n      // validate\n      if (!rootContext.validate(nextValue))\n        event.preventDefault()\n    }\"\n    @input=\"(event: InputEvent) => {\n      const target = event.target as HTMLInputElement\n      inputValue = target.value\n    }\"\n    @change=\"handleChange\"\n    @keydown.enter=\"rootContext.applyInputValue($event.target?.value)\"\n    @blur=\"rootContext.applyInputValue($event.target?.value)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["usePrimitiveElement","injectNumberFieldRootContext","getActiveElement","onMounted","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIA,iDAAoB,EAAA;AACjE,IAAA,MAAM,cAAcC,wDAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAWC,wCAAiB,EAAA;AACpC,QAAA;AAMF,MAAI,IAAA,IAAA,CAAK,IAAI,KAAM,CAAA,MAAM,KAAK,IAAK,CAAA,GAAA,CAAI,MAAM,MAAM,CAAA;AACjD,QAAA;AAEF,MAAA,KAAA,CAAM,cAAe,EAAA;AACrB,MAAA,IAAI,MAAM,MAAS,GAAA,CAAA;AACjB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA,WAAA,IACpB,MAAM,MAAS,GAAA,CAAA;AACtB,QAAA,WAAA,CAAY,cAAe,EAAA;AAAA;AAG/B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAAC,OAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAAC,SAAA,CAAM,MAAM,WAAA,CAAY,SAAU,CAAA,KAAA,EAAO,MAAM;AAC7C,MAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OACxC,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAW,UAAA,CAAA,KAAA,GAAQ,YAAY,SAAU,CAAA,KAAA;AAAA,OAC1C,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldInput.js

@@ -1,8 +1,8 @@
-import { defineComponent, onMounted, ref, watch, openBlock, createBlock, unref, mergeProps, withKeys, withModifiers, withCtx, renderSlot } from 'vue';
+import { defineComponent, onMounted, ref, watch, createBlock, openBlock, unref, mergeProps, withKeys, withModifiers, withCtx, renderSlot } from 'vue';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
-import { i as injectNumberFieldRootContext } from './NumberFieldRoot.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { g as getActiveElement } from '../shared/getActiveElement.js';
+import { i as injectNumberFieldRootContext } from './NumberFieldRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NumberFieldInput",
@@ -49,8 +49,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         type: "text",
         tabindex: "0",
         inputmode: unref(rootContext).inputMode.value,
-        disabled: unref(rootContext).disabled.value ? "" : undefined,
-        "data-disabled": unref(rootContext).disabled.value ? "" : undefined,
+        disabled: unref(rootContext).disabled.value ? "" : void 0,
+        "data-disabled": unref(rootContext).disabled.value ? "" : void 0,
         autocomplete: "off",
         autocorrect: "off",
         spellcheck: "false",
@@ -70,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onWheel: handleWheelEvent,
         onBeforeinput: _cache[6] || (_cache[6] = (event) => {
           const target = event.target;
-          let nextValue = target.value.slice(0, target.selectionStart ?? undefined) + (event.data ?? "") + target.value.slice(target.selectionEnd ?? undefined);
+          let nextValue = target.value.slice(0, target.selectionStart ?? void 0) + (event.data ?? "") + target.value.slice(target.selectionEnd ?? void 0);
           if (!unref(rootContext).validate(nextValue))
             event.preventDefault();
         }),