chore(deps): update all non-major dependencies

.histoire/package.json

@@ -17,18 +17,18 @@
     "vue": "^3.4.31"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.26.0",
-    "@floating-ui/dom": "^1.6.7",
-    "@floating-ui/vue": "^1.1.0",
+    "@antfu/eslint-config": "^2.27.3",
+    "@floating-ui/dom": "^1.6.11",
+    "@floating-ui/vue": "^1.1.5",
     "@histoire/plugin-vue": "^0.17.17",
     "@iconify/vue": "^4.1.2",
     "@radix-ui/colors": "^3.0.0",
     "@rollup/plugin-alias": "^5.1.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.9.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.10.0",
     "histoire": "^0.17.17",
-    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12",
     "tailwindcss-animate": "1.0.7"
   }
 }

docs/content/components/combobox.md

@@ -137,6 +137,12 @@ The button that clears the search term.
 
 <!-- @include: @/meta/ComboboxCancel.md -->
 
+### Empty
+
+Shown when none of the items match the query.
+
+<!-- @include: @/meta/ComboboxEmpty.md -->
+
 ### Portal
 
 When used, portals the content part into the `body`.

docs/content/components/dialog.md

@@ -142,7 +142,7 @@ If you want to hide the title, wrap it inside our Visually Hidden utility like t
 
 An optional accessible description to be announced when the dialog is opened.
 
-If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `aria-describedby="undefined"` to `DialogContent`.
+If you want to hide the description, wrap it inside our Visually Hidden utility like this `<VisuallyHidden asChild>`. If you want to remove the description entirely, remove this part and pass `:aria-describedby="undefined"` to `DialogContent`.
 
 <!-- @include: @/meta/DialogDescription.md -->
 

docs/content/utilities/use-id.md

@@ -5,6 +5,10 @@ description: Generate random id
 
 # useId
 
+::: warning Deprecated
+[Vue 3.5](https://blog.vuejs.org/posts/vue-3-5#useid) released an official client-server stable solution for `useId`.
+:::
+
 <Description>
 Generate random id
 </Description>

docs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docs",
   "type": "module",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
@@ -13,28 +13,28 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.4",
-    "@stackblitz/sdk": "^1.10.0",
-    "@vueuse/core": "^10.11.0",
+    "@internationalized/date": "^3.5.5",
+    "@stackblitz/sdk": "^1.11.0",
+    "@vueuse/core": "^10.11.1",
     "radix-vue": "link:../packages/radix-vue",
     "vue": "3.4.31",
     "vue-sonner": "^1.1.3"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.24.7",
+    "@babel/traverse": "^7.25.6",
     "@iconify/vue": "^4.1.2",
     "@radix-ui/colors": "^3.0.0",
     "@types/babel__traverse": "^7.20.6",
-    "@types/markdown-it": "^14.1.1",
+    "@types/markdown-it": "^14.1.2",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
     "codesandbox": "^2.2.3",
     "fast-glob": "^3.3.2",
     "markdown-it": "^14.1.0",
-    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
-    "tsx": "^4.16.0",
-    "vitepress": "1.2.3",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12",
+    "tsx": "^4.19.1",
+    "vitepress": "1.3.4",
     "vue-component-meta": "^2.0.24"
   },
   "postcss": {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "radix-vue",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "private": true,
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.11.0",
   "license": "MIT",
   "repository": "radix-vue/radix-vue",
   "workspaces": [
@@ -25,13 +25,13 @@
     "pub:release": "cd packages/radix-vue && pnpm pub:release"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.26.0",
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "bumpp": "^9.4.1",
-    "eslint": "^9.9.0",
-    "lint-staged": "^15.2.9",
-    "pnpm": "^9.4.0",
+    "@antfu/eslint-config": "^2.27.3",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "bumpp": "^9.5.2",
+    "eslint": "^9.10.0",
+    "lint-staged": "^15.2.10",
+    "pnpm": "^9.11.0",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.11.1",
     "typescript": "5.3.3"

packages/plugins/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plugins",
   "type": "module",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "Nuxt module for Radix Vue",
   "license": "MIT",
   "keywords": [
@@ -18,11 +18,11 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.2",
-    "@nuxt/schema": "^3.12.2",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxt/schema": "^3.13.2",
     "radix-vue": "link:../radix-vue",
-    "tsx": "^4.16.0",
+    "tsx": "^4.19.1",
     "unbuild": "^2.0.0",
-    "unplugin-vue-components": "^0.27.2"
+    "unplugin-vue-components": "^0.27.4"
   }
 }

packages/radix-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "radix-vue",
   "type": "module",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "description": "Vue port for Radix UI Primitives.",
   "author": "Radix Vue Contributors (https://github.com/radix-vue)",
   "license": "MIT",
@@ -93,13 +93,13 @@
     "vue": ">= 3.2.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.7",
-    "@floating-ui/vue": "^1.1.0",
-    "@internationalized/date": "^3.5.4",
+    "@floating-ui/dom": "^1.6.11",
+    "@floating-ui/vue": "^1.1.5",
+    "@internationalized/date": "^3.5.5",
     "@internationalized/number": "^3.5.3",
-    "@tanstack/vue-virtual": "^3.8.1",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/shared": "^10.11.0",
+    "@tanstack/vue-virtual": "^3.10.8",
+    "@vueuse/core": "^10.11.1",
+    "@vueuse/shared": "^10.11.1",
     "aria-hidden": "^1.2.4",
     "defu": "^6.1.4",
     "fast-deep-equal": "^3.1.3",
@@ -108,20 +108,20 @@
   "devDependencies": {
     "@iconify/vue": "^4.1.2",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node18": "^18.2.4",
-    "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^20.16.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vitest/coverage-istanbul": "^2.0.5",
+    "@vitest/coverage-istanbul": "^2.1.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "jsdom": "^24.1.1",
-    "vite": "^5.4.1",
-    "vite-plugin-dts": "^4.0.3",
-    "vitest": "^2.0.5",
+    "jsdom": "^25.0.0",
+    "vite": "^5.4.6",
+    "vite-plugin-dts": "^4.2.1",
+    "vitest": "^2.1.1",
     "vitest-axe": "0.1.0",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "3.4.31",

packages/radix-vue/src/Combobox/Combobox.test.ts

@@ -294,6 +294,19 @@ describe('given combobox in a form', async () => {
     props: { handleSubmit },
   })
 
+  const valueBox = wrapper.find('input')
+
+  let enterEventBubbledToForm = false
+
+  beforeEach(() => {
+    enterEventBubbledToForm = false
+    wrapper.find('form').element.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        enterEventBubbledToForm = true
+      }
+    })
+  })
+
   it('should have hidden input field', async () => {
     expect(wrapper.find('[type="hidden"]').exists()).toBe(true)
   })
@@ -327,6 +340,21 @@ describe('given combobox in a form', async () => {
       expect(handleSubmit.mock.results[1].value).toStrictEqual({ test: 'Pineapple' })
     })
   })
+
+  describe('after selecting an option via keyboard', () => {
+    beforeEach(async () => {
+      await valueBox.setValue('B')
+      await valueBox.trigger('keydown', { key: 'Enter' })
+    })
+
+    it('should show value correctly', () => {
+      expect((valueBox.element).value).toBe('Banana')
+    })
+
+    it('should bubble up the Enter keydown event to the form', () => {
+      expect(enterEventBubbledToForm).toBe(false)
+    })
+  })
 })
 
 describe('given a Combobox with 1,000 options', async () => {

packages/radix-vue/src/Combobox/ComboboxRoot.vue

@@ -24,7 +24,7 @@ type ComboboxRootContext<T> = {
   inputElement: Ref<HTMLInputElement | undefined>
   onInputElementChange: (el: HTMLInputElement) => void
   onInputNavigation: (dir: 'up' | 'down' | 'home' | 'end') => void
-  onInputEnter: () => void
+  onInputEnter: (event: InputEvent) => void
   selectedValue: Ref<T | undefined>
   selectedElement: ComputedRef<HTMLElement | undefined>
   onSelectedValueChange: (val: T) => void
@@ -278,9 +278,13 @@ provideComboboxRootContext({
 
     nextTick(() => inputElement.value?.focus({ preventScroll: true }))
   },
-  onInputEnter: async () => {
-    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element)
+  onInputEnter: async (event) => {
+    if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element) {
+      event.preventDefault()
+      event.stopPropagation()
+
       selectedElement.value?.click()
+    }
   },
   selectedValue,
   onSelectedValueChange: val => selectedValue.value = val as T,

packages/radix-vue/src/Dialog/DialogContentImpl.vue

@@ -65,7 +65,7 @@ if (process.env.NODE_ENV !== 'production') {
     componentLink: 'dialog.html#title',
     titleId: rootContext.titleId,
     descriptionId: rootContext.descriptionId,
-    contentElement: rootContext.contentElement,
+    contentElement,
   })
 }
 </script>

packages/radix-vue/src/Dialog/utils.ts

@@ -35,7 +35,7 @@ For more information, see https://www.radix-vue.com/components/${componentLink}`
 
     const describedById = contentElement.value?.getAttribute('aria-describedby')
     // if we have an id and the user hasn't set aria-describedby="undefined"
-    if (descriptionId && !describedById) {
+    if (descriptionId && describedById) {
       const hasDescription = document.getElementById(descriptionId)
       if (!hasDescription)
         console.warn(DESCRIPTION_MESSAGE)

packages/radix-vue/src/DismissableLayer/DismissableLayer.vue

@@ -103,7 +103,7 @@ const isPointerEventsEnabled = computed(() => {
 
 const pointerDownOutside = usePointerDownOutside(async (event) => {
   const isPointerDownOnBranch = [...context.branches].some(branch =>
-    branch.contains(event.target as HTMLElement),
+    branch?.contains(event.target as HTMLElement),
   )
 
   if (!isPointerEventsEnabled.value || isPointerDownOnBranch)
@@ -117,7 +117,7 @@ const pointerDownOutside = usePointerDownOutside(async (event) => {
 
 const focusOutside = useFocusOutside((event) => {
   const isFocusInBranch = [...context.branches].some(branch =>
-    branch.contains(event.target as HTMLElement),
+    branch?.contains(event.target as HTMLElement),
   )
 
   if (isFocusInBranch)