reka-ui 2.7.0 → 2.8.2

package/src/Calendar/useCalendar.ts

@@ -4,9 +4,9 @@
 
 import type { DateFields, DateValue } from '@internationalized/date'
 import type { Ref } from 'vue'
-import type { Grid, Matcher, WeekDayFormat } from '@/date'
+import type { Grid, Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateFormatterOptions } from '@/shared/useDateFormatter'
-import { isEqualMonth, isSameDay } from '@internationalized/date'
+import { isEqualMonth, isSameDay, isSameMonth } from '@internationalized/date'
 import { computed, ref, watch } from 'vue'
 import { createMonths, getDaysInMonth, isAfter, isBefore, toDate } from '@/date'
 import { useDateFormatter } from '@/shared'
@@ -14,7 +14,7 @@ import { useDateFormatter } from '@/shared'
 export type UseCalendarProps = {
   locale: Ref<string>
   placeholder: Ref<DateValue>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
   minValue: Ref<DateValue | undefined>
@@ -71,9 +71,26 @@ export function useCalendarState(props: UseCalendarStateProps) {
     },
   )
 
+  const hasSelectedDate = computed(() => {
+    return Array.isArray(props.date.value) ? props.date.value.length > 0 : !!props.date.value
+  })
+
+  const isSelectedDateDisabled = computed(() => {
+    if (Array.isArray(props.date.value)) {
+      if (!props.date.value.length)
+        return false
+      return props.date.value.some(dateObj => props.isDateDisabled?.(dateObj))
+    }
+    if (!props.date.value)
+      return false
+    return !!props.isDateDisabled?.(props.date.value)
+  })
+
   return {
     isDateSelected,
     isInvalid,
+    hasSelectedDate,
+    isSelectedDateDisabled,
   }
 }
 
@@ -336,6 +353,27 @@ export function useCalendar(props: UseCalendarProps) {
 
   const fullCalendarLabel = computed(() => `${props.calendarLabel.value ?? 'Event Date'}, ${headingValue.value}`)
 
+  const isPlaceholderFocusable = computed(() => {
+    return !(isDateDisabled(props.placeholder.value) || isDateUnavailable(props.placeholder.value) || isOutsideVisibleView(props.placeholder.value))
+  })
+
+  const firstFocusableDate = computed(() => {
+    for (const month of grid.value) {
+      if (props.minValue.value && isBefore(month.value, props.minValue.value))
+        continue
+
+      const daysInMonth = getDaysInMonth(month.value)
+      const startDay = props.minValue.value && isSameMonth(props.minValue.value, month.value) ? props.minValue.value.day : 1
+
+      for (let day = startDay; day <= daysInMonth; day++) {
+        const date = month.value.set({ day })
+        if (isDateDisabled(date) || isDateUnavailable(date))
+          continue
+        return date
+      }
+    }
+  })
+
   return {
     isDateDisabled,
     isDateUnavailable,
@@ -350,5 +388,7 @@ export function useCalendar(props: UseCalendarProps) {
     prevPage,
     headingValue,
     fullCalendarLabel,
+    isPlaceholderFocusable,
+    firstFocusableDate,
   }
 }

package/src/Collection/Collection.ts

@@ -46,12 +46,13 @@ export function useCollection<ItemData = {}>(options: { key?: string, isProvider
 
   const CollectionSlot = defineComponent({
     name: 'CollectionSlot',
-    setup(_, { slots }) {
+    inheritAttrs: false,
+    setup(_, { slots, attrs }) {
       const { primitiveElement, currentElement } = usePrimitiveElement()
       watch(currentElement, () => {
         context.collectionRef.value = currentElement.value
       })
-      return () => h(Slot, { ref: primitiveElement }, slots)
+      return () => h(Slot, { ref: primitiveElement, ...attrs }, slots)
     },
   })
 

package/src/Combobox/ComboboxContentImpl.vue

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import type { DismissableLayerEmits, DismissableLayerProps } from '@/DismissableLayer'
 import type { PopperContentProps } from '@/Popper'
 
-import { createContext, getActiveElement, useForwardExpose, useForwardProps, useHideOthers } from '@/shared'
+import { createContext, getActiveElement, useFocusGuards, useForwardExpose, useForwardProps, useHideOthers } from '@/shared'
 import { useBodyScrollLock } from '@/shared/useBodyScrollLock'
 
 export type ComboboxContentImplEmits = DismissableLayerEmits
@@ -28,6 +28,7 @@ export const [injectComboboxContentContext, provideComboboxContentContext]
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, toRefs } from 'vue'
 import { DismissableLayer } from '@/DismissableLayer'
+import { FocusScope } from '@/FocusScope'
 import { ListboxContent } from '@/Listbox'
 import { PopperContent } from '@/Popper'
 import { Primitive } from '@/Primitive'
@@ -43,6 +44,7 @@ const rootContext = injectComboboxRootContext()
 
 const { forwardRef, currentElement } = useForwardExpose()
 useBodyScrollLock(props.bodyLock)
+useFocusGuards()
 useHideOthers(rootContext.parentElement)
 
 const pickedProps = computed(() => {
@@ -89,40 +91,46 @@ onUnmounted(() => {
 
 <template>
   <ListboxContent as-child>
-    <DismissableLayer
+    <FocusScope
       as-child
-      :disable-outside-pointer-events="disableOutsidePointerEvents"
-      @dismiss="rootContext.onOpenChange(false)"
-      @focus-outside="(ev) => {
-        // if clicking inside the combobox, prevent dismiss
-        if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
-        emits('focusOutside', ev)
-      }"
-      @interact-outside="emits('interactOutside', $event)"
-      @escape-key-down="emits('escapeKeyDown', $event)"
-      @pointer-down-outside="(ev) => {
-        // if clicking inside the combobox, prevent dismiss
-        if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
-        emits('pointerDownOutside', ev)
-      }"
+      @mount-auto-focus.prevent
+      @unmount-auto-focus.prevent
     >
-      <component
-        :is="position === 'popper' ? PopperContent : Primitive"
-        v-bind="{ ...$attrs, ...forwardedProps }"
-        :id="rootContext.contentId"
-        :ref="forwardRef"
-        :data-state="rootContext.open.value ? 'open' : 'closed'"
-        :style="{
-          // flex layout so we can place the scroll buttons properly
-          display: 'flex',
-          flexDirection: 'column',
-          // reset the outline by default as the content MAY get focused
-          outline: 'none',
-          ...(position === 'popper' ? popperStyle : {}),
+      <DismissableLayer
+        as-child
+        :disable-outside-pointer-events="disableOutsidePointerEvents"
+        @dismiss="rootContext.onOpenChange(false)"
+        @focus-outside="(ev) => {
+          // if clicking inside the combobox, prevent dismiss
+          if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+          emits('focusOutside', ev)
+        }"
+        @interact-outside="emits('interactOutside', $event)"
+        @escape-key-down="emits('escapeKeyDown', $event)"
+        @pointer-down-outside="(ev) => {
+          // if clicking inside the combobox, prevent dismiss
+          if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+          emits('pointerDownOutside', ev)
         }"
       >
-        <slot />
-      </component>
-    </DismissableLayer>
+        <component
+          :is="position === 'popper' ? PopperContent : Primitive"
+          v-bind="{ ...$attrs, ...forwardedProps }"
+          :id="rootContext.contentId"
+          :ref="forwardRef"
+          :data-state="rootContext.open.value ? 'open' : 'closed'"
+          :style="{
+            // flex layout so we can place the scroll buttons properly
+            display: 'flex',
+            flexDirection: 'column',
+            // reset the outline by default as the content MAY get focused
+            outline: 'none',
+            ...(position === 'popper' ? popperStyle : {}),
+          }"
+        >
+          <slot />
+        </component>
+      </DismissableLayer>
+    </FocusScope>
   </ListboxContent>
 </template>

package/src/Combobox/ComboboxRoot.vue

@@ -45,7 +45,7 @@ export type ComboboxRootEmits<T = AcceptableValue> = {
 }
 
 export interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior'> {
-  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */
+  /** The controlled open state of the Combobox. Can be binded with `v-model:open`. */
   open?: boolean
   /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */
   defaultOpen?: boolean

package/src/DatePicker/DatePickerRoot.vue

@@ -3,11 +3,12 @@ import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { CalendarRootProps, DateFieldRoot, DateFieldRootProps, PopoverRootEmits, PopoverRootProps } from '..'
-import type { Matcher, WeekDayFormat } from '@/date'
+import type { Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateStep, Granularity, HourCycle } from '@/shared/date'
 import type { Direction } from '@/shared/types'
 import { computed, ref, toRefs, watch } from 'vue'
-import { createContext, useDirection } from '@/shared'
+import { getWeekStartsOn } from '@/date'
+import { createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate } from '@/shared/date'
 import { PopoverRoot } from '..'
 
@@ -26,7 +27,7 @@ type DatePickerRootContext = {
   placeholder: Ref<DateValue>
   pagedNavigation: Ref<boolean>
   preventDeselect: Ref<boolean>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
@@ -49,7 +50,7 @@ export type DatePickerRootProps = Omit<DateFieldRootProps, 'as' | 'asChild'> & P
   closeOnSelect?: boolean
 }
 
-export type DatePickerRootEmits = {
+export type DatePickerRootEmits = PopoverRootEmits & {
   /** Event handler called whenever the model value changes */
   'update:modelValue': [date: DateValue | undefined]
   /** Event handler called whenever the placeholder value changes */
@@ -73,25 +74,22 @@ const props = withDefaults(defineProps<DatePickerRootProps>(), {
   modal: false,
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
   disabled: false,
   readonly: false,
   placeholder: undefined,
-  locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   closeOnSelect: false,
 })
-const emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()
+const emits = defineEmits<DatePickerRootEmits>()
 const {
-  locale,
+  locale: propLocale,
   disabled,
   readonly,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -115,6 +113,8 @@ const {
 } = toRefs(props)
 
 const dir = useDirection(propDir)
+const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: defaultValue.value,
@@ -125,7 +125,7 @@ const defaultDate = computed(() => getDefaultDate({
   defaultPlaceholder: props.placeholder,
   granularity: props.granularity,
   defaultValue: modelValue.value,
-  locale: props.locale,
+  locale: locale.value,
 }))
 
 const placeholder = useVModel(props, 'placeholder', emits, {

package/src/DatePicker/index.ts

@@ -1,14 +1,14 @@
-export { default as DatePickerAnchor } from './DatePickerAnchor.vue'
+export { default as DatePickerAnchor, type DatePickerAnchorProps } from './DatePickerAnchor.vue'
 
-export { default as DatePickerArrow } from './DatePickerArrow.vue'
+export { default as DatePickerArrow, type DatePickerArrowProps } from './DatePickerArrow.vue'
 export { default as DatePickerCalendar } from './DatePickerCalendar.vue'
 
 export { default as DatePickerCell, type DatePickerCellProps } from './DatePickerCell.vue'
 
 export { default as DatePickerCellTrigger, type DatePickerCellTriggerProps } from './DatePickerCellTrigger.vue'
-export { default as DatePickerClose } from './DatePickerClose.vue'
+export { default as DatePickerClose, type DatePickerCloseProps } from './DatePickerClose.vue'
 
-export { default as DatePickerContent, type DatePickerContentProps } from './DatePickerContent.vue'
+export { default as DatePickerContent, type DatePickerContentEmits, type DatePickerContentProps } from './DatePickerContent.vue'
 export { default as DatePickerField } from './DatePickerField.vue'
 
 export { default as DatePickerGrid, type DatePickerGridProps } from './DatePickerGrid.vue'

package/src/DateRangePicker/DateRangePickerRoot.vue

@@ -3,11 +3,12 @@ import type { DateValue } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'
-import type { Matcher, WeekDayFormat } from '@/date'
+import type { Matcher, WeekDayFormat, WeekStartsOn } from '@/date'
 import type { DateRange, DateStep, Granularity, HourCycle } from '@/shared/date'
 
 import type { Direction } from '@/shared/types'
-import { createContext, useDirection } from '@/shared'
+import { getWeekStartsOn } from '@/date'
+import { createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate } from '@/shared/date'
 import { PopoverRoot } from '..'
 
@@ -26,7 +27,7 @@ type DateRangePickerRootContext = {
   placeholder: Ref<DateValue>
   pagedNavigation: Ref<boolean>
   preventDeselect: Ref<boolean>
-  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  weekStartsOn: Ref<WeekStartsOn>
   weekdayFormat: Ref<WeekDayFormat>
   fixedWeeks: Ref<boolean>
   numberOfMonths: Ref<number>
@@ -54,7 +55,7 @@ export type DateRangePickerRootProps = Omit<DateRangeFieldRootProps, 'as' | 'asC
   closeOnSelect?: boolean
 }
 
-export type DateRangePickerRootEmits = {
+export type DateRangePickerRootEmits = PopoverRootEmits & {
   /** Event handler called whenever the model value changes */
   'update:modelValue': [date: DateRange]
   /** Event handler called whenever the placeholder value changes */
@@ -69,7 +70,7 @@ export const [injectDateRangePickerRootContext, provideDateRangePickerRootContex
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { ref, toRefs, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -81,14 +82,12 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   modal: false,
   pagedNavigation: false,
   preventDeselect: false,
-  weekStartsOn: 0,
   weekdayFormat: 'narrow',
   fixedWeeks: false,
   numberOfMonths: 1,
   disabled: false,
   readonly: false,
   placeholder: undefined,
-  locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   isDateHighlightable: undefined,
@@ -96,13 +95,12 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   maximumDays: undefined,
   closeOnSelect: false,
 })
-const emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()
+const emits = defineEmits<DateRangePickerRootEmits>()
 const {
-  locale,
+  locale: propLocale,
   disabled,
   readonly,
   pagedNavigation,
-  weekStartsOn,
   weekdayFormat,
   fixedWeeks,
   numberOfMonths,
@@ -129,6 +127,8 @@ const {
 } = toRefs(props)
 
 const dir = useDirection(propsDir)
+const locale = useLocale(propLocale)
+const weekStartsOn = computed(() => props.weekStartsOn ?? getWeekStartsOn(locale.value))
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue ?? { start: undefined, end: undefined },
@@ -139,7 +139,7 @@ const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
   granularity: props.granularity,
   defaultValue: modelValue.value?.start,
-  locale: props.locale,
+  locale: locale.value,
 })
 
 const placeholder = useVModel(props, 'placeholder', emits, {

package/src/DateRangePicker/index.ts

@@ -1,14 +1,14 @@
-export { default as DateRangePickerAnchor } from './DateRangePickerAnchor.vue'
+export { default as DateRangePickerAnchor, type DateRangePickerAnchorProps } from './DateRangePickerAnchor.vue'
 
-export { default as DateRangePickerArrow } from './DateRangePickerArrow.vue'
+export { default as DateRangePickerArrow, type DateRangePickerArrowProps } from './DateRangePickerArrow.vue'
 export { default as DateRangePickerCalendar } from './DateRangePickerCalendar.vue'
 
 export { default as DateRangePickerCell, type DateRangePickerCellProps } from './DateRangePickerCell.vue'
 
 export { default as DateRangePickerCellTrigger, type DateRangePickerCellTriggerProps } from './DateRangePickerCellTrigger.vue'
-export { default as DateRangePickerClose } from './DateRangePickerClose.vue'
+export { default as DateRangePickerClose, type DateRangePickerCloseProps } from './DateRangePickerClose.vue'
 
-export { default as DateRangePickerContent, type DateRangePickerContentProps } from './DateRangePickerContent.vue'
+export { default as DateRangePickerContent, type DateRangePickerContentEmits, type DateRangePickerContentProps } from './DateRangePickerContent.vue'
 export { default as DateRangePickerField } from './DateRangePickerField.vue'
 
 export { default as DateRangePickerGrid, type DateRangePickerGridProps } from './DateRangePickerGrid.vue'

package/src/Editable/EditableInput.vue

@@ -45,7 +45,7 @@ watch(context.isEditing, (value) => {
 })
 
 function handleSubmitKeyDown(event: KeyboardEvent) {
-  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)
+  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey && !event.isComposing)
     context.submit()
 }
 </script>

package/src/FocusScope/FocusScope.vue

@@ -37,7 +37,7 @@ export interface FocusScopeProps extends PrimitiveProps {
 import { isClient } from '@vueuse/shared'
 import { nextTick, reactive, ref, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
-import { createFocusScopesStack, removeLinks } from './stack'
+import { createFocusScopesStack } from './stack'
 import {
   AUTOFOCUS_ON_MOUNT,
   AUTOFOCUS_ON_UNMOUNT,
@@ -152,7 +152,7 @@ watchEffect(async (cleanupFn) => {
     container.dispatchEvent(mountEvent)
 
     if (!mountEvent.defaultPrevented) {
-      focusFirst(removeLinks(getTabbableCandidates(container)), {
+      focusFirst(getTabbableCandidates(container), {
         select: true,
       })
       if (getActiveElement() === previouslyFocusedElement)

package/src/Listbox/ListboxFilter.vue

@@ -7,7 +7,7 @@ import { Primitive } from '..'
 import { injectListboxRootContext } from './ListboxRoot.vue'
 
 export interface ListboxFilterProps extends PrimitiveProps {
-  /** The controlled value of the filter. Can be binded with with v-model. */
+  /** The controlled value of the filter. Can be binded with v-model. */
   modelValue?: string
   /** Focus on element when mounted. */
   autoFocus?: boolean

package/src/Listbox/ListboxRoot.vue

@@ -40,7 +40,7 @@ export const [injectListboxRootContext, provideListboxRootContext]
   = createContext<ListboxRootContext<AcceptableValue>>('ListboxRoot')
 
 export interface ListboxRootProps<T = AcceptableValue> extends PrimitiveProps, FormFieldProps {
-  /** The controlled value of the listbox. Can be binded with with `v-model`. */
+  /** The controlled value of the listbox. Can be binded with `v-model`. */
   modelValue?: T | Array<T>
   /** The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox */
   defaultValue?: T | Array<T>
@@ -173,6 +173,7 @@ function changeHighlight(el: HTMLElement, scrollIntoView = true) {
 
 function highlightItem(value: T) {
   if (isVirtual.value) {
+    // @ts-expect-error known type issue https://github.com/vueuse/vueuse/issues/4610
     virtualHighlightHook.trigger(value)
   }
   else {

package/src/Menu/MenuRadioGroup.vue

@@ -1,21 +1,22 @@
 <script lang="ts">
 import type { Ref } from 'vue'
 import type { MenuGroupProps } from './MenuGroup.vue'
+import type { AcceptableValue } from '@/shared/types'
 import { createContext, useForwardProps } from '@/shared'
 
 interface MenuRadioGroupContext {
-  modelValue: Ref<string>
-  onValueChange: (payload: string) => void
+  modelValue: Ref<AcceptableValue>
+  onValueChange: (payload: AcceptableValue) => void
 }
 
 export interface MenuRadioGroupProps extends MenuGroupProps {
   /** The value of the selected item in the group. */
-  modelValue?: string
+  modelValue?: AcceptableValue
 }
 
 export type MenuRadioGroupEmits = {
   /** Event handler called when the value changes. */
-  'update:modelValue': [payload: string]
+  'update:modelValue': [payload: AcceptableValue]
 }
 
 export const [injectMenuRadioGroupContext, provideMenuRadioGroupContext]

package/src/Menu/MenuRadioItem.vue

@@ -3,6 +3,7 @@ import type {
   MenuItemEmits,
   MenuItemProps,
 } from './MenuItem.vue'
+import type { AcceptableValue } from '@/shared/types'
 import { reactiveOmit } from '@vueuse/shared'
 import { useForwardProps } from '@/shared'
 
@@ -10,7 +11,7 @@ export type MenuRadioItemEmits = MenuItemEmits
 
 export interface MenuRadioItemProps extends MenuItemProps {
   /** The unique value of the item. */
-  value: string
+  value: AcceptableValue
 }
 </script>
 

package/src/NavigationMenu/NavigationMenuRoot.vue

@@ -5,6 +5,7 @@ import type { Direction, Orientation } from './utils'
 import type { PrimitiveProps } from '@/Primitive'
 import { useCollection } from '@/Collection'
 import { createContext, useDirection, useForwardExpose, useId } from '@/shared'
+import { EVENT_ROOT_CONTENT_DISMISS } from './utils'
 
 export interface NavigationMenuRootProps extends PrimitiveProps {
   /** The controlled value of the menu item to activate. Can be used as `v-model`. */
@@ -91,7 +92,7 @@ export const [injectNavigationMenuContext, provideNavigationMenuContext]
 </script>
 
 <script setup lang="ts">
-import { refAutoReset, useDebounceFn, useVModel } from '@vueuse/core'
+import { refAutoReset, useDebounceFn, useEventListener, useVModel } from '@vueuse/core'
 import {
   computed,
   ref,
@@ -164,6 +165,8 @@ watchEffect(() => {
   )
 })
 
+useEventListener(rootNavigationMenu, EVENT_ROOT_CONTENT_DISMISS, onItemDismiss)
+
 provideNavigationMenuContext({
   isRootMenu: true,
   modelValue,
@@ -203,18 +206,19 @@ provideNavigationMenuContext({
     previousValue.value = modelValue.value
     modelValue.value = val
   },
-  onItemDismiss: () => {
-    previousValue.value = modelValue.value
-    modelValue.value = ''
-  },
+  onItemDismiss,
 })
+
+function onItemDismiss() {
+  previousValue.value = modelValue.value
+  modelValue.value = ''
+}
 </script>
 
 <template>
   <CollectionSlot>
     <Primitive
       :ref="forwardRef"
-      aria-label="Main"
       :as="as"
       :as-child="asChild"
       :data-orientation="orientation"

package/src/NumberField/NumberFieldRoot.vue

@@ -17,6 +17,8 @@ export interface NumberFieldRootProps extends PrimitiveProps, FormFieldProps {
   step?: number
   /** When `false`, prevents the value from snapping to the nearest increment of the step value */
   stepSnapping?: boolean
+  /** When `true`, the input will be focused when the value changes. */
+  focusOnChange?: boolean
   /** Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. */
   formatOptions?: Intl.NumberFormatOptions
   /** The locale to use for formatting and currencies */
@@ -76,6 +78,7 @@ const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   defaultValue: undefined,
   step: 1,
   stepSnapping: true,
+  focusOnChange: true,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
 const { disabled, readonly, disableWheelChange, invertWheelChange, min, max, step, stepSnapping, formatOptions, id, locale: propLocale } = toRefs(props)
@@ -109,7 +112,9 @@ const isIncreaseDisabled = computed(() => (
 )
 
 function handleChangingValue(type: 'increase' | 'decrease', multiplier = 1) {
-  inputEl.value?.focus()
+  if (props.focusOnChange) {
+    inputEl.value?.focus()
+  }
   if (props.disabled || props.readonly)
     return
   const currentInputValue = numberParser.parse(inputEl.value?.value ?? '')