reka-ui 2.0.1 → 2.1.0

package/dist/AlertDialog/AlertDialogRoot.cjs

@@ -19,8 +19,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     shared_useForwardExpose.useForwardExpose();
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Dialog_DialogRoot._sfc_main), vue.mergeProps(vue.unref(forwarded), { modal: true }), {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
+        default: vue.withCtx((slotProps) => [
+          vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
         ]),
         _: 3
       }, 16);

package/dist/AlertDialog/AlertDialogRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogRoot.cjs","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogRootEmits,\n  DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n  <DialogRoot\n    v-bind=\"forwarded\"\n    :modal=\"true\"\n  >\n    <slot />\n  </DialogRoot>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogRoot.cjs","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogRootEmits,\n  DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n  <DialogRoot\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :modal=\"true\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </DialogRoot>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogRoot.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
 import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { _ as _sfc_main$1 } from '../Dialog/DialogRoot.js';
@@ -17,8 +17,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     useForwardExpose();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(unref(forwarded), { modal: true }), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
+        default: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
         ]),
         _: 3
       }, 16);

package/dist/AlertDialog/AlertDialogRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogRootEmits,\n  DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n  <DialogRoot\n    v-bind=\"forwarded\"\n    :modal=\"true\"\n  >\n    <slot />\n  </DialogRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogRootEmits,\n  DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n  <DialogRoot\n    v-slot=\"slotProps\"\n    v-bind=\"forwarded\"\n    :modal=\"true\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </DialogRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxRoot.cjs

@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const dir = shared_useDirection.useDirection(propDir);
     const modelValue = core.useVModel(props, "modelValue", emits, {
       // @ts-expect-error ignore the type error here
-      defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,
+      defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
       passive: props.modelValue === undefined,
       deep: true
     });
@@ -115,6 +115,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           filterItems();
       });
     }, { flush: "post" });
+    const inst = vue.getCurrentInstance();
+    vue.onMounted(() => {
+      if (inst?.exposed) {
+        inst.exposed.highlightItem = primitiveElement.value?.highlightItem;
+        inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem;
+        inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected;
+      }
+    });
     __expose({
       filtered: vue.computed(() => filterState.filtered),
       highlightedElement,

package/dist/Combobox/ComboboxRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  // @ts-expect-error ignore the type error here\n  defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","reactive","watch"],"mappings":"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"}
+{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  // @ts-expect-error ignore the type error here\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","reactive","watch","getCurrentInstance","onMounted"],"mappings":"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"}

package/dist/Combobox/ComboboxRoot.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, computed, reactive, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot } from 'vue';
+import { defineComponent, toRefs, ref, computed, reactive, watch, nextTick, getCurrentInstance, onMounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Popper/PopperRoot.js';
 import { useVModel, createEventHook } from '@vueuse/core';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const dir = useDirection(propDir);
     const modelValue = useVModel(props, "modelValue", emits, {
       // @ts-expect-error ignore the type error here
-      defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,
+      defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
       passive: props.modelValue === undefined,
       deep: true
     });
@@ -113,6 +113,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           filterItems();
       });
     }, { flush: "post" });
+    const inst = getCurrentInstance();
+    onMounted(() => {
+      if (inst?.exposed) {
+        inst.exposed.highlightItem = primitiveElement.value?.highlightItem;
+        inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem;
+        inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected;
+      }
+    });
     __expose({
       filtered: computed(() => filterState.filtered),
       highlightedElement,

package/dist/Combobox/ComboboxRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  // @ts-expect-error ignore the type error here\n  defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  // @ts-expect-error ignore the type error here\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/DatePicker/DatePickerRoot.cjs

@@ -136,8 +136,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       },
       onPlaceholderChange(date) {
-        if (date.compare(placeholder.value) === 0)
-          placeholder.value = date.copy();
+        placeholder.value = date.copy();
       }
     });
     return (_ctx, _cache) => {

package/dist/DatePicker/DatePickerRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerRoot.cjs","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n  modelValue: Ref<DateValue | undefined>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateValue | undefined) => void\n  onPlaceholderChange: (date: DateValue) => void\n  dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateValue | undefined]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n  = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n  defaultValue: undefined,\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  defaultValue,\n  dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value,\n  locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.compare(placeholder.value) !== 0) {\n    placeholder.value = value.copy()\n  }\n})\n\nprovideDatePickerRootContext({\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  onDateChange(date: DateValue | undefined) {\n    if (!date || !modelValue.value) {\n      modelValue.value = date?.copy() ?? undefined\n    }\n    else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n      modelValue.value = undefined\n    }\n    else {\n      modelValue.value = date.copy()\n    }\n  },\n  onPlaceholderChange(date: DateValue) {\n    if (date.compare(placeholder.value) === 0)\n      placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot />\n  </PopoverRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","computed","getDefaultDate","ref","watch"],"mappings":"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"}
+{"version":3,"file":"DatePickerRoot.cjs","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n  modelValue: Ref<DateValue | undefined>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateValue | undefined) => void\n  onPlaceholderChange: (date: DateValue) => void\n  dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateValue | undefined]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n  = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n  defaultValue: undefined,\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  defaultValue,\n  dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value,\n  locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.compare(placeholder.value) !== 0) {\n    placeholder.value = value.copy()\n  }\n})\n\nprovideDatePickerRootContext({\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  onDateChange(date: DateValue | undefined) {\n    if (!date || !modelValue.value) {\n      modelValue.value = date?.copy() ?? undefined\n    }\n    else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n      modelValue.value = undefined\n    }\n    else {\n      modelValue.value = date.copy()\n    }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot />\n  </PopoverRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","computed","getDefaultDate","ref","watch"],"mappings":";;;;;;;;;;AAmDO,MAAM,CAAC,2BAAA,EAA6B,4BAA4B,CAAA,GACnEA,mCAAqC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASzD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAmBd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAgB,EAAA,mBAAA;AAAA,MAChB,iBAAmB,EAAA,sBAAA;AAAA,MACnB,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAK,EAAA;AAAA,KACP,GAAIC,WAAO,KAAK,CAAA;AAEhB,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,YAAa,CAAA,KAAA;AAAA,MAC3B,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAM,MAAA,WAAA,GAAcC,YAAS,CAAA,MAAMC,+BAAe,CAAA;AAAA,MAChD,oBAAoB,KAAM,CAAA,WAAA;AAAA,MAC1B,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,cAAc,UAAW,CAAA,KAAA;AAAA,MACzB,QAAQ,KAAM,CAAA;AAAA,KACf,CAAC,CAAA;AAEF,IAAA,MAAM,WAAc,GAAAF,cAAA,CAAU,KAAO,EAAA,aAAA,EAAe,KAAO,EAAA;AAAA,MACzD,YAAc,EAAA,KAAA,CAAM,kBAAsB,IAAA,WAAA,CAAY,MAAM,IAAK,EAAA;AAAA,MACjE,OAAA,EAAU,MAAM,WAAgB,KAAA;AAAA,KACjC,CAAA;AAED,IAAA,MAAM,IAAO,GAAAA,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,WAAY,CAAA,KAAA;AAAA,MAC1B,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,eAAeG,OAAoD,EAAA;AAEzE,IAAMC,SAAA,CAAA,UAAA,EAAY,CAAC,KAAU,KAAA;AAC3B,MAAA,IAAI,SAAS,KAAM,CAAA,OAAA,CAAQ,WAAY,CAAA,KAAK,MAAM,CAAG,EAAA;AACnD,QAAY,WAAA,CAAA,KAAA,GAAQ,MAAM,IAAK,EAAA;AAAA;AACjC,KACD,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MAC3B,mBAAmB,sBAAuB,CAAA,KAAA;AAAA,MAC1C,gBAAgB,mBAAoB,CAAA,KAAA;AAAA,MACpC,MAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAA;AAAA,MACA,aAAa,IAA6B,EAAA;AACxC,QAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,UAAA,CAAW,KAAO,EAAA;AAC9B,UAAW,UAAA,CAAA,KAAA,GAAQ,IAAM,EAAA,IAAA,EAAU,IAAA,SAAA;AAAA,SACrC,MAAA,IACS,CAAC,eAAA,CAAgB,KAAS,IAAA,IAAA,IAAQ,WAAW,KAAM,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAG,EAAA;AAC/E,UAAA,UAAA,CAAW,KAAQ,GAAA,SAAA;AAAA,SAEhB,MAAA;AACH,UAAW,UAAA,CAAA,KAAA,GAAQ,KAAK,IAAK,EAAA;AAAA;AAC/B,OACF;AAAA,MACA,oBAAoB,IAAiB,EAAA;AACnC,QAAY,WAAA,CAAA,KAAA,GAAQ,KAAK,IAAK,EAAA;AAAA;AAChC,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/DatePicker/DatePickerRoot.js

@@ -134,8 +134,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       },
       onPlaceholderChange(date) {
-        if (date.compare(placeholder.value) === 0)
-          placeholder.value = date.copy();
+        placeholder.value = date.copy();
       }
     });
     return (_ctx, _cache) => {

package/dist/DatePicker/DatePickerRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerRoot.js","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n  modelValue: Ref<DateValue | undefined>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateValue | undefined) => void\n  onPlaceholderChange: (date: DateValue) => void\n  dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateValue | undefined]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n  = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n  defaultValue: undefined,\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  defaultValue,\n  dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value,\n  locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.compare(placeholder.value) !== 0) {\n    placeholder.value = value.copy()\n  }\n})\n\nprovideDatePickerRootContext({\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  onDateChange(date: DateValue | undefined) {\n    if (!date || !modelValue.value) {\n      modelValue.value = date?.copy() ?? undefined\n    }\n    else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n      modelValue.value = undefined\n    }\n    else {\n      modelValue.value = date.copy()\n    }\n  },\n  onPlaceholderChange(date: DateValue) {\n    if (date.compare(placeholder.value) === 0)\n      placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot />\n  </PopoverRoot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePickerRoot.js","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n  modelValue: Ref<DateValue | undefined>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateValue | undefined) => void\n  onPlaceholderChange: (date: DateValue) => void\n  dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateValue | undefined]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n  = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n  defaultValue: undefined,\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  defaultValue,\n  dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: defaultValue.value,\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value,\n  locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.compare(placeholder.value) !== 0) {\n    placeholder.value = value.copy()\n  }\n})\n\nprovideDatePickerRootContext({\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  onDateChange(date: DateValue | undefined) {\n    if (!date || !modelValue.value) {\n      modelValue.value = date?.copy() ?? undefined\n    }\n    else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n      modelValue.value = undefined\n    }\n    else {\n      modelValue.value = date.copy()\n    }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot />\n  </PopoverRoot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.cjs

@@ -28,8 +28,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const position = vue.ref();
     const open = vue.computed(() => !!menuContext.modelValue.value);
     vue.watch(currentElement, () => {
-      if (currentElement.value)
-        menuContext.onViewportChange(currentElement.value);
+      menuContext.onViewportChange(currentElement.value);
     });
     const content = vue.ref();
     vue.watch([modelValue, open], () => {

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  if (currentElement.value)\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]')?.children?.[0] 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":";;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,UAAA,EAAe,GAAA,WAAA;AAE1D,IAAA,MAAM,OAAOC,OAAuC,EAAA;AACpD,IAAA,MAAM,WAAWA,OAAmC,EAAA;AAEpD,IAAA,MAAM,OAAOC,YAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAE1D,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACpD,CAAA;AAED,IAAA,MAAM,UAAUF,OAAiB,EAAA;AAEjC,IAAAE,SAAA,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,KAAM,cAAe,CAAA,KAAA,EAAuB,cAAc,mBAAmB,CAAA,EAAG,WAAW,CAAC,CAAA;AAClG,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,IAAAC,sBAAA,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,IAAAA,sBAAA,CAAkB,CAAC,UAAW,CAAA,QAAA,EAAU,IAAM,EAAA,kBAAkB,GAAG,MAAM;AACvE,MAAe,cAAA,EAAA;AAAA,KAChB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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]')?.children?.[0] 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":";;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIA,wCAAiB,EAAA;AAExD,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,UAAA,EAAe,GAAA,WAAA;AAE1D,IAAA,MAAM,OAAOC,OAAuC,EAAA;AACpD,IAAA,MAAM,WAAWA,OAAmC,EAAA;AAEpD,IAAA,MAAM,OAAOC,YAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAE1D,IAAAC,SAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAY,WAAA,CAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,MAAM,UAAUF,OAAiB,EAAA;AAEjC,IAAAE,SAAA,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,KAAM,cAAe,CAAA,KAAA,EAAuB,cAAc,mBAAmB,CAAA,EAAG,WAAW,CAAC,CAAA;AAClG,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,IAAAC,sBAAA,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,IAAAA,sBAAA,CAAkB,CAAC,UAAW,CAAA,QAAA,EAAU,IAAM,EAAA,kBAAkB,GAAG,MAAM;AACvE,MAAe,cAAA,EAAA;AAAA,KAChB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuViewport.js

@@ -26,8 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const position = ref();
     const open = computed(() => !!menuContext.modelValue.value);
     watch(currentElement, () => {
-      if (currentElement.value)
-        menuContext.onViewportChange(currentElement.value);
+      menuContext.onViewportChange(currentElement.value);
     });
     const content = ref();
     watch([modelValue, open], () => {

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  if (currentElement.value)\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]')?.children?.[0] 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 { 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]')?.children?.[0] 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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"}

package/dist/NumberField/NumberFieldInput.cjs

@@ -17,6 +17,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { primitiveElement, currentElement } = Primitive_usePrimitiveElement.usePrimitiveElement();
     const rootContext = NumberField_NumberFieldRoot.injectNumberFieldRootContext();
     function handleWheelEvent(event) {
+      if (rootContext.disableWheelChange.value)
+        return;
       if (event.target !== shared_getActiveElement.getActiveElement())
         return;
       if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))

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  // 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;AAE3C,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 { 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NumberField/NumberFieldInput.js

@@ -15,6 +15,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { primitiveElement, currentElement } = usePrimitiveElement();
     const rootContext = injectNumberFieldRootContext();
     function handleWheelEvent(event) {
+      if (rootContext.disableWheelChange.value)
+        return;
       if (event.target !== getActiveElement())
         return;
       if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))

package/dist/NumberField/NumberFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldInput.js","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  // 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":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAA,MAAM,cAAc,4BAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAE3C,MAAI,IAAA,KAAA,CAAM,WAAW,gBAAiB,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,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAA,GAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAA,KAAA,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.js","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":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAA,MAAM,cAAc,4BAA6B,EAAA;AAEjD,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,YAAY,kBAAmB,CAAA,KAAA;AACjC,QAAA;AAGF,MAAI,IAAA,KAAA,CAAM,WAAW,gBAAiB,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,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,eAAe,KAAyB,CAAA;AAAA,KACpE,CAAA;AAED,IAAA,MAAM,UAAa,GAAA,GAAA,CAAI,WAAY,CAAA,SAAA,CAAU,KAAK,CAAA;AAClD,IAAA,KAAA,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/NumberFieldRoot.cjs

@@ -23,9 +23,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     min: {},
     max: {},
     step: { default: 1 },
+    stepSnapping: { type: Boolean, default: true },
     formatOptions: {},
     locale: {},
     disabled: { type: Boolean },
+    disableWheelChange: { type: Boolean },
     id: {},
     asChild: { type: Boolean },
     as: { default: "div" },
@@ -36,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { disabled, min, max, step, formatOptions, id, locale: propLocale } = vue.toRefs(props);
+    const { disabled, disableWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = vue.toRefs(props);
     const modelValue = core.useVModel(props, "modelValue", emits, {
       defaultValue: props.defaultValue,
       passive: props.modelValue === undefined
@@ -94,7 +96,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     }
     function clampInputValue(val) {
       let clampedValue;
-      if (step.value === undefined || isNaN(step.value))
+      if (step.value === undefined || isNaN(step.value) || !stepSnapping.value)
         clampedValue = shared_clamp.clamp(val, min.value, max.value);
       else
         clampedValue = shared_clamp.snapValueToStep(val, min.value, max.value, step.value);
@@ -122,6 +124,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       validate,
       applyInputValue,
       disabled,
+      disableWheelChange,
       max,
       min,
       isDecreaseDisabled,