reka-ui 2.9.9 → 2.9.10

package/dist/internal.d.ts

@@ -1,7 +1,7 @@
 import "./index2.js";
 import "./index3.js";
 import { MenuArrowProps, MenuCheckboxItemEmits, MenuCheckboxItemProps, MenuContentEmits, MenuContentProps, MenuEmits, MenuGroupProps, MenuItemEmits, MenuItemIndicatorProps, MenuItemProps, MenuLabelProps, MenuPortalProps, MenuProps, MenuRadioGroupEmits, MenuRadioGroupProps, MenuRadioItemEmits, MenuRadioItemProps, MenuSeparatorProps, MenuSubContentEmits, MenuSubContentProps, MenuSubEmits, MenuSubProps, MenuSubTriggerProps, PopperAnchorProps, _default$277 as _default$13, _default$278 as _default$8, _default$279 as _default, _default$280 as _default$6, _default$281 as _default$10, _default$282 as _default$3, _default$283 as _default$14, _default$284 as _default$12, _default$285 as _default$2, _default$286 as _default$1, _default$287 as _default$11, _default$288 as _default$7, _default$290 as _default$9, _default$291 as _default$4, _default$292 as _default$5, injectMenuContext, injectMenuRootContext } from "./index4.js";
-import * as vue372 from "vue";
+import * as vue1641 from "vue";
 
 //#region src/Menu/MenuAnchor.vue.d.ts
 interface MenuAnchorProps extends PopperAnchorProps {}
@@ -9,7 +9,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: vue372.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue372.ComponentOptionsMixin, vue372.ComponentOptionsMixin, {}, string, vue372.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue372.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue1641.DefineComponent<MenuAnchorProps, {}, {}, {}, {}, vue1641.ComponentOptionsMixin, vue1641.ComponentOptionsMixin, {}, string, vue1641.PublicProps, Readonly<MenuAnchorProps> & Readonly<{}>, {}, {}, {}, {}, string, vue1641.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$15: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,MAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,MAAA,CAAA,qBAAA,EAAA,MAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,MAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}
+{"version":3,"file":"internal.d.ts","names":[],"sources":["../src/Menu/MenuAnchor.vue"],"sourcesContent":[],"mappings":";;;;;;UAoBU,eAAA,SAAwB;YAsC9B;KACC,WAAA;2BACwB;AA3CoB,CAAA;AAGE,cA2C7C,UALgB,EAKN,OAAA,CAAA,eALM,CAKN,eALM,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAKN,OAAA,CAAA,qBAAA,EAAA,OAAA,CAAA,qBAAA,EALM,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,WAAA,EAAA,QALM,CAKN,eALM,CAAA,GAKN,QALM,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,MAAA,EAKN,OAAA,CAAA,uBAAA,EALM,KAAA,EAAA,CAAA,CAAA,EAAA,GAAA,CAAA;AAAA,cAQhB,YAPU,EAOW,eANS,CAAA,OAMc,UANd,EAM0B,WAN1B,CAAA;AAAA,cAMM,WADxC,EAAA,OAE0B,YAF1B;KAGG,eALW,CAAA,CAAA,EAAA,CAAA,CAAA,GAKa,CALb,GAAA;EAAA,MAAA,EAAA;IAAA,MAAA,EAON,CAPM;EAAA,CAAA;CAAA"}

package/dist/shared/useId.cjs

@@ -5,21 +5,20 @@ const vue = require_rolldown_runtime.__toESM(require("vue"));
 //#region src/shared/useId.ts
 let count = 0;
 /**
-* The `useId` function generates a unique identifier using a provided deterministic ID or a default
-* one prefixed with "reka-", or the provided one via `useId` props from `<ConfigProvider>`.
+* The `useId` function generates a unique identifier using a provided deterministic ID,
+* a configured `<ConfigProvider>` ID source, Vue's native `useId`, or a fallback counter.
 * @param {string | null | undefined} [deterministicId] - The `useId` function you provided takes an
 * optional parameter `deterministicId`, which can be a string, null, or undefined. If
 * `deterministicId` is provided, the function will return it. Otherwise, it will generate an id using
-* the `useId` function obtained
+* the configured ID source.
 */
 function useId(deterministicId, prefix = "reka") {
 	if (deterministicId) return deterministicId;
 	let id;
-	if ("useId" in vue) id = vue.useId?.();
-	else {
-		const configProviderContext = require_ConfigProvider_ConfigProvider.injectConfigProviderContext({ useId: void 0 });
-		id = configProviderContext.useId?.() ?? `${++count}`;
-	}
+	const configProviderContext = require_ConfigProvider_ConfigProvider.injectConfigProviderContext({ useId: void 0 });
+	if (configProviderContext.useId) id = configProviderContext.useId();
+	else if ("useId" in vue) id = vue.useId?.();
+	else id = `${++count}`;
 	return prefix ? `${prefix}-${id}` : id;
 }
 

package/dist/shared/useId.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useId.cjs","names":["deterministicId?: string | null | undefined","id: string"],"sources":["../../src/shared/useId.ts"],"sourcesContent":[],"mappings":";;;;;AAKA,IAAI,QAAQ;;;;;;;;;AASZ,SAAgB,MAAMA,iBAA6C,SAAS,QAAQ;AAClF,KAAI,gBACF,QAAO;CAET,IAAIC;AACJ,KAAI,WAAW,IACb,MAAK,IAAI,SAAS;MAEf;EACH,MAAM,wBAAwB,kEAA4B,EAAE,cAAkB,EAAC;AAC/E,OAAK,sBAAsB,SAAS,IAAI,GAAG,EAAE,OAAO;CACrD;AAED,QAAO,SAAS,GAAG,OAAO,CAAC,EAAE,IAAI,GAAG;AACrC"}
+{"version":3,"file":"useId.cjs","names":["deterministicId?: string | null | undefined","id: string"],"sources":["../../src/shared/useId.ts"],"sourcesContent":[],"mappings":";;;;;AAKA,IAAI,QAAQ;;;;;;;;;AASZ,SAAgB,MAAMA,iBAA6C,SAAS,QAAQ;AAClF,KAAI,gBACF,QAAO;CAET,IAAIC;CACJ,MAAM,wBAAwB,kEAA4B,EAAE,cAAkB,EAAC;AAM/E,KAAI,sBAAsB,MACxB,MAAK,sBAAsB,OAAO;UAE3B,WAAW,IAClB,MAAK,IAAI,SAAS;KAGlB,MAAK,GAAG,EAAE,OAAO;AAGnB,QAAO,SAAS,GAAG,OAAO,CAAC,EAAE,IAAI,GAAG;AACrC"}

package/dist/shared/useId.js

@@ -4,21 +4,20 @@ import * as vue from "vue";
 //#region src/shared/useId.ts
 let count = 0;
 /**
-* The `useId` function generates a unique identifier using a provided deterministic ID or a default
-* one prefixed with "reka-", or the provided one via `useId` props from `<ConfigProvider>`.
+* The `useId` function generates a unique identifier using a provided deterministic ID,
+* a configured `<ConfigProvider>` ID source, Vue's native `useId`, or a fallback counter.
 * @param {string | null | undefined} [deterministicId] - The `useId` function you provided takes an
 * optional parameter `deterministicId`, which can be a string, null, or undefined. If
 * `deterministicId` is provided, the function will return it. Otherwise, it will generate an id using
-* the `useId` function obtained
+* the configured ID source.
 */
 function useId(deterministicId, prefix = "reka") {
 	if (deterministicId) return deterministicId;
 	let id;
-	if ("useId" in vue) id = vue.useId?.();
-	else {
-		const configProviderContext = injectConfigProviderContext({ useId: void 0 });
-		id = configProviderContext.useId?.() ?? `${++count}`;
-	}
+	const configProviderContext = injectConfigProviderContext({ useId: void 0 });
+	if (configProviderContext.useId) id = configProviderContext.useId();
+	else if ("useId" in vue) id = vue.useId?.();
+	else id = `${++count}`;
 	return prefix ? `${prefix}-${id}` : id;
 }
 

package/dist/shared/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","names":["deterministicId?: string | null | undefined","id: string"],"sources":["../../src/shared/useId.ts"],"sourcesContent":[],"mappings":";;;;AAKA,IAAI,QAAQ;;;;;;;;;AASZ,SAAgB,MAAMA,iBAA6C,SAAS,QAAQ;AAClF,KAAI,gBACF,QAAO;CAET,IAAIC;AACJ,KAAI,WAAW,IACb,MAAK,IAAI,SAAS;MAEf;EACH,MAAM,wBAAwB,4BAA4B,EAAE,cAAkB,EAAC;AAC/E,OAAK,sBAAsB,SAAS,IAAI,GAAG,EAAE,OAAO;CACrD;AAED,QAAO,SAAS,GAAG,OAAO,CAAC,EAAE,IAAI,GAAG;AACrC"}
+{"version":3,"file":"useId.js","names":["deterministicId?: string | null | undefined","id: string"],"sources":["../../src/shared/useId.ts"],"sourcesContent":[],"mappings":";;;;AAKA,IAAI,QAAQ;;;;;;;;;AASZ,SAAgB,MAAMA,iBAA6C,SAAS,QAAQ;AAClF,KAAI,gBACF,QAAO;CAET,IAAIC;CACJ,MAAM,wBAAwB,4BAA4B,EAAE,cAAkB,EAAC;AAM/E,KAAI,sBAAsB,MACxB,MAAK,sBAAsB,OAAO;UAE3B,WAAW,IAClB,MAAK,IAAI,SAAS;KAGlB,MAAK,GAAG,EAAE,OAAO;AAGnB,QAAO,SAAS,GAAG,OAAO,CAAC,EAAE,IAAI,GAAG;AACrC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reka-ui",
   "type": "module",
-  "version": "2.9.9",
+  "version": "2.9.10",
   "description": "Vue port for Radix UI Primitives.",
   "author": "UnoVue Contributors (https://github.com/unovue)",
   "license": "MIT",
@@ -112,14 +112,15 @@
     "@types/jsdom": "^28.0.0",
     "@types/node": "^24.0.13",
     "@vitejs/plugin-vue": "^6.0.7",
-    "@vitest/coverage-istanbul": "^3.2.4",
-    "@vue/test-utils": "^2.4.10",
+    "@vitest/coverage-istanbul": "^3.2.6",
+    "@vue/server-renderer": "^3.5.17",
+    "@vue/test-utils": "^2.4.11",
     "@vue/tsconfig": "^0.7.0",
     "jsdom": "^26.1.0",
     "size-limit": "^12.0.1",
     "tsdown": "^0.12.9",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.0",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8",
     "vitest-axe": "0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "3.5.17",

package/src/Combobox/ComboboxContentImpl.vue

@@ -97,6 +97,19 @@ onUnmounted(() => {
     rootContext.triggerElement.value?.focus()
   }
 })
+
+function isEventTargetWithinCombobox(target: EventTarget | null) {
+  if (rootContext.parentElement.value?.contains(target as Node))
+    return true
+
+  // A `<label>` associated (via `for`) with an element inside the combobox forwards its
+  // click/focus to that control, so interacting with it should not dismiss the content.
+  // Without this, clicking such a label while open dismisses on `pointerdown` and the
+  // forwarded click/focus immediately re-opens it.
+  const label = target instanceof Element ? target.closest('label') : null
+  const control = label?.control
+  return !!control && !!rootContext.parentElement.value?.contains(control)
+}
 </script>
 
 <template>
@@ -111,15 +124,15 @@ onUnmounted(() => {
         :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()
+          // if focusing inside the combobox (or a label tied to it), prevent dismiss
+          if (isEventTargetWithinCombobox(ev.target)) 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()
+          // if clicking inside the combobox (or a label tied to it), prevent dismiss
+          if (isEventTargetWithinCombobox(ev.target)) ev.preventDefault()
           emits('pointerDownOutside', ev)
         }"
       >

package/src/Dialog/DialogContent.vue

@@ -22,7 +22,13 @@ import DialogContentModal from './DialogContentModal.vue'
 import DialogContentNonModal from './DialogContentNonModal.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentProps>()
+const props = withDefaults(defineProps<DialogContentProps>(), {
+  // Keep `undefined` (instead of Vue's boolean coercion to `false`) so the
+  // modal/non-modal child can apply its own default. This lets a modal
+  // `DialogContent` stay locked by default while still honoring an explicit
+  // `:disable-outside-pointer-events="false"` (#2677).
+  disableOutsidePointerEvents: undefined,
+})
 const emits = defineEmits<DialogContentEmits>()
 
 const rootContext = injectDialogRootContext()

package/src/Dialog/DialogContentModal.vue

@@ -4,7 +4,9 @@ import { useEmitAsProps, useForwardExpose, useHideOthers } from '@/shared'
 import DialogContentImpl from './DialogContentImpl.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentImplProps>()
+const props = withDefaults(defineProps<DialogContentImplProps>(), {
+  disableOutsidePointerEvents: true,
+})
 const emits = defineEmits<DialogContentImplEmits>()
 
 const rootContext = injectDialogRootContext()
@@ -20,7 +22,7 @@ useHideOthers(currentElement)
     v-bind="{ ...props, ...emitsAsProps }"
     :ref="forwardRef"
     :trap-focus="rootContext.open.value"
-    :disable-outside-pointer-events="true"
+    :disable-outside-pointer-events="props.disableOutsidePointerEvents"
     @close-auto-focus="
       (event) => {
         if (!event.defaultPrevented) {

package/src/DismissableLayer/DismissableLayer.vue

@@ -9,6 +9,7 @@ import {
   computed,
   nextTick,
   reactive,
+  watch,
   watchEffect,
 } from 'vue'
 import { isNullish, useForwardExpose } from '@/shared'
@@ -138,28 +139,45 @@ onKeyStroke('Escape', (event) => {
     emits('dismiss')
 })
 
-watchEffect((cleanupFn) => {
-  if (!layerElement.value)
-    return
-  if (props.disableOutsidePointerEvents) {
-    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-      context.originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents
-      ownerDocument.value.body.style.pointerEvents = 'none'
-    }
-    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)
-  }
-  layers.value.add(layerElement.value)
-
-  cleanupFn(() => {
-    if (
-      props.disableOutsidePointerEvents
-      && context.layersWithOutsidePointerEventsDisabled.size === 1
-      && !isNullish(context.originalBodyPointerEvents)
-    ) {
-      ownerDocument.value.body.style.pointerEvents = context.originalBodyPointerEvents
+// Use `watch` with explicit sources (instead of `watchEffect`) so this effect
+// only re-runs when `layerElement` or `disableOutsidePointerEvents` change.
+// Reading `context.layersWithOutsidePointerEventsDisabled.size` inside the
+// callback must NOT make it reactive: otherwise adding/removing any other
+// layer would re-run this effect and its cleanup could prematurely restore the
+// body's `pointer-events` while an ancestor layer is still open (#2674).
+watch(
+  [layerElement, () => props.disableOutsidePointerEvents],
+  ([element, disableOutsidePointerEvents], _, onCleanup) => {
+    if (!element)
+      return
+    if (disableOutsidePointerEvents) {
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        context.originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents
+        ownerDocument.value.body.style.pointerEvents = 'none'
+      }
+      context.layersWithOutsidePointerEventsDisabled.add(element)
+
+      // Remove this layer from the set on cleanup (re-run via prop toggle, or
+      // unmount) and restore the body's `pointer-events` only once the last
+      // disabling layer is gone. Removing here — rather than relying solely on
+      // the unmount-only effect below — keeps the set accurate when
+      // `disableOutsidePointerEvents` toggles `true -> false` while still
+      // mounted (e.g. a modal Menu closing). Checking `size === 0` *after*
+      // deletion makes the restore independent of cleanup ordering (#2674).
+      onCleanup(() => {
+        context.layersWithOutsidePointerEventsDisabled.delete(element)
+        if (
+          context.layersWithOutsidePointerEventsDisabled.size === 0
+          && !isNullish(context.originalBodyPointerEvents)
+        ) {
+          ownerDocument.value.body.style.pointerEvents = context.originalBodyPointerEvents
+        }
+      })
     }
-  })
-})
+    layers.value.add(element)
+  },
+  { immediate: true },
+)
 
 watchEffect((cleanupFn) => {
   cleanupFn(() => {

package/src/Listbox/ListboxRoot.vue

@@ -16,7 +16,7 @@ type ListboxRootContext<T> = {
   highlightOnHover: Ref<boolean>
   highlightedElement: Ref<HTMLElement | null>
   isVirtual: Ref<boolean>
-  virtualFocusHook: EventHook<Event | null | undefined>
+  virtualFocusHook: EventHook<{ event?: Event, scroll: boolean }>
   virtualKeydownHook: EventHook<KeyboardEvent>
   virtualHighlightHook: EventHook<any>
   by?: string | ((a: T, b: T) => boolean)
@@ -150,7 +150,7 @@ const highlightedElement = ref<HTMLElement | null>(null)
 const previousElement = ref<HTMLElement | null>(null)
 const isVirtual = ref(false)
 const isComposing = ref(false)
-const virtualFocusHook = createEventHook<Event | null | undefined>()
+const virtualFocusHook = createEventHook<{ event?: Event, scroll: boolean }>()
 const virtualKeydownHook = createEventHook<KeyboardEvent>()
 const virtualHighlightHook = createEventHook<T>()
 
@@ -333,8 +333,11 @@ async function highlightSelected(event?: Event, scroll = true) {
     return
   await nextTick()
   if (isVirtual.value) {
-    // Trigger on nextTick for Virtualizer to be mounted
-    virtualFocusHook.trigger(event)
+    // Trigger on nextTick for Virtualizer to be mounted.
+    // `scroll` is `false` on the initial mount highlight, so the virtualizer sets
+    // its roving-tabindex target without focusing/scrolling — otherwise a
+    // virtualized Listbox below the fold would pull the page to it on load.
+    virtualFocusHook.trigger({ event, scroll })
   }
   else {
     const collection = getCollectionItem()

package/src/Listbox/ListboxVirtualizer.vue

@@ -104,7 +104,11 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
   }
 }))
 
-rootContext.virtualFocusHook.on((event) => {
+rootContext.virtualFocusHook.on(({ event, scroll }) => {
+  // `scroll` is `false` only for the initial mount highlight. There we set the
+  // roving-tabindex target without focusing or scrolling, so a virtualized
+  // Listbox below the fold doesn't pull the page to it on load. User-driven
+  // highlights (keyboard, typeahead, select) keep scrolling as before.
   const index = props.options.findIndex((option) => {
     if (Array.isArray(rootContext.modelValue.value))
       return compare(option, rootContext.modelValue.value[0], rootContext.by)
@@ -114,19 +118,31 @@ rootContext.virtualFocusHook.on((event) => {
   if (index !== -1) {
     event?.preventDefault()
 
+    // Bringing the checked item into the (internal) scroll viewport is safe — it
+    // only scrolls the listbox container, never the page.
     virtualizer.value.scrollToIndex(index, { align: 'start' })
     requestAnimationFrame(() => {
       const item = queryCheckedElement(parentEl.value)
       if (item) {
-        rootContext.changeHighlight(item)
+        rootContext.changeHighlight(item, scroll, scroll ? undefined : false)
         if (event)
           item?.focus()
       }
     })
   }
-  else {
+  else if (scroll) {
     rootContext.highlightFirstItem()
   }
+  else {
+    // Mount highlight with no checked item: highlight the first enabled item only,
+    // mirroring the non-virtual path. `highlightFirstItem` is reserved for
+    // user-driven PageUp/Home navigation, which focuses and scrolls.
+    requestAnimationFrame(() => {
+      const item = getItems().find(i => i.ref.dataset.disabled !== '')?.ref
+      if (item)
+        rootContext.changeHighlight(item, false, false)
+    })
+  }
 })
 
 rootContext.virtualHighlightHook.on((value) => {

package/src/shared/useId.ts

@@ -5,24 +5,32 @@ import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue
 
 let count = 0
 /**
- * The `useId` function generates a unique identifier using a provided deterministic ID or a default
- * one prefixed with "reka-", or the provided one via `useId` props from `<ConfigProvider>`.
+ * The `useId` function generates a unique identifier using a provided deterministic ID,
+ * a configured `<ConfigProvider>` ID source, Vue's native `useId`, or a fallback counter.
  * @param {string | null | undefined} [deterministicId] - The `useId` function you provided takes an
  * optional parameter `deterministicId`, which can be a string, null, or undefined. If
  * `deterministicId` is provided, the function will return it. Otherwise, it will generate an id using
- * the `useId` function obtained
+ * the configured ID source.
  */
 export function useId(deterministicId?: string | null | undefined, prefix = 'reka') {
   if (deterministicId)
     return deterministicId
 
   let id: string
-  if ('useId' in vue) {
+  const configProviderContext = injectConfigProviderContext({ useId: undefined })
+
+  // Keep the app-provided ID source authoritative. Frameworks such as Nuxt can
+  // prerender with a different Vue app ID prefix than the hydrating client, so
+  // falling through to Vue's native useId would bypass the stable source that
+  // ConfigProvider was explicitly given.
+  if (configProviderContext.useId) {
+    id = configProviderContext.useId()
+  }
+  else if ('useId' in vue) {
     id = vue.useId?.()
   }
   else {
-    const configProviderContext = injectConfigProviderContext({ useId: undefined })
-    id = configProviderContext.useId?.() ?? `${++count}`
+    id = `${++count}`
   }
 
   return prefix ? `${prefix}-${id}` : id