diff --git a/docs/app/components/content/examples/form/FormExampleElements.vue b/docs/app/components/content/examples/form/FormExampleElements.vue
index faefa18248..9aa3fe8324 100644
--- a/docs/app/components/content/examples/form/FormExampleElements.vue
+++ b/docs/app/components/content/examples/form/FormExampleElements.vue
@@ -36,6 +36,12 @@ const schema = z.object({
   checkboxGroup: z.any().refine(values => !!values?.find((option: any) => option === 'option-2'), {
     message: 'Include Option 2'
   }),
+  listbox: z.any().refine(option => option?.value === 'option-2', {
+    message: 'Select Option 2'
+  }),
+  listboxMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
+    message: 'Include Option 2'
+  }),
   slider: z.number().max(20, { message: 'Must be less than 20' }),
   pin: z.string().regex(/^\d$/).array().length(5),
   file: z.file().min(1).max(1024 * 1024).mime('image/png')
@@ -120,6 +126,14 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           <UCheckboxGroup v-model="state.checkboxGroup" legend="Checkbox group" :items="items" />
         </UFormField>
       </div>
+      <UFormField name="listbox" label="Listbox">
+        <UListbox v-model="state.listbox" :items="items" class="w-full" />
+      </UFormField>
+
+      <UFormField name="listboxMultiple" label="Listbox (Multiple)">
+        <UListbox v-model="state.listboxMultiple" :items="items" multiple class="w-full" />
+      </UFormField>
+
       <UFormField name="pin" label="Pin Input" :error-pattern="/(pin)\..*/">
         <UPinInput v-model="state.pin" />
       </UFormField>
diff --git a/docs/app/components/content/examples/listbox/ListboxFilterFieldsExample.vue b/docs/app/components/content/examples/listbox/ListboxFilterFieldsExample.vue
new file mode 100644
index 0000000000..357b9a5481
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxFilterFieldsExample.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'typicode-users-email',
+  transform: (data: { id: number, name: string, email: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      email: user.email,
+      value: String(user.id),
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const }
+    }))
+  },
+  immediate: false
+})
+
+onMounted(() => {
+  execute()
+})
+</script>
+
+<template>
+  <UListbox
+    :items="users || []"
+    :loading="status === 'pending'"
+    :filter-fields="['label', 'email']"
+    filter
+    class="w-full"
+  >
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-muted">
+        {{ item.email }}
+      </span>
+    </template>
+  </UListbox>
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxIgnoreFilterExample.vue b/docs/app/components/content/examples/listbox/ListboxIgnoreFilterExample.vue
new file mode 100644
index 0000000000..54a10f4b99
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxIgnoreFilterExample.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+
+const searchTerm = ref('')
+const searchTermDebounced = refDebounced(searchTerm, 200)
+
+const { data: users, status, execute } = await useLazyFetch('https://jsonplaceholder.typicode.com/users', {
+  key: 'listbox-users-search',
+  params: { q: searchTermDebounced },
+  transform: (data: { id: number, name: string }[]) => {
+    return data?.map(user => ({
+      label: user.name,
+      value: String(user.id),
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}`, loading: 'lazy' as const }
+    }))
+  },
+  immediate: false
+})
+
+onMounted(() => {
+  execute()
+})
+</script>
+
+<template>
+  <UListbox
+    v-model:search-term="searchTerm"
+    :items="users || []"
+    :filter="{
+      icon: 'i-lucide-search',
+      loading: status === 'pending'
+    }"
+    ignore-filter
+    class="w-full"
+  />
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxModelValueExample.vue b/docs/app/components/content/examples/listbox/ListboxModelValueExample.vue
new file mode 100644
index 0000000000..fa74e4d135
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxModelValueExample.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ListboxItem } from '@nuxt/ui'
+
+const items: ListboxItem[] = [
+  { label: 'France', icon: 'i-lucide-map-pin', value: 'FR' },
+  { label: 'Germany', icon: 'i-lucide-map-pin', value: 'DE' },
+  { label: 'Italy', icon: 'i-lucide-map-pin', value: 'IT' },
+  { label: 'Spain', icon: 'i-lucide-map-pin', value: 'ES' },
+  { label: 'Netherlands', icon: 'i-lucide-map-pin', value: 'NL' },
+  { label: 'Poland', icon: 'i-lucide-map-pin', value: 'PL' }
+]
+
+const value = ref<ListboxItem>(items[2]!)
+</script>
+
+<template>
+  <UListbox
+    v-model="value"
+    :items="items"
+    class="w-full"
+  />
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxSearchTermExample.vue b/docs/app/components/content/examples/listbox/ListboxSearchTermExample.vue
new file mode 100644
index 0000000000..1ca2155dad
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxSearchTermExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const searchTerm = ref('F')
+const items = ref([
+  { label: 'France', icon: 'i-lucide-map-pin', value: 'FR' },
+  { label: 'Germany', icon: 'i-lucide-map-pin', value: 'DE' },
+  { label: 'Italy', icon: 'i-lucide-map-pin', value: 'IT' },
+  { label: 'Spain', icon: 'i-lucide-map-pin', value: 'ES' },
+  { label: 'Netherlands', icon: 'i-lucide-map-pin', value: 'NL' },
+  { label: 'Poland', icon: 'i-lucide-map-pin', value: 'PL' }
+])
+const value = ref()
+</script>
+
+<template>
+  <UListbox v-model="value" v-model:search-term="searchTerm" filter :items="items" class="w-full" />
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxSelectedIconExample.vue b/docs/app/components/content/examples/listbox/ListboxSelectedIconExample.vue
new file mode 100644
index 0000000000..756af0b271
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxSelectedIconExample.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const items = ref([
+  { label: 'France', icon: 'i-lucide-map-pin', value: 'FR' },
+  { label: 'Germany', icon: 'i-lucide-map-pin', value: 'DE' },
+  { label: 'Italy', icon: 'i-lucide-map-pin', value: 'IT' },
+  { label: 'Spain', icon: 'i-lucide-map-pin', value: 'ES' }
+])
+const value = ref('FR')
+</script>
+
+<template>
+  <UListbox v-model="value" selected-icon="i-lucide-flame" value-key="value" :items="items" class="w-full" />
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxTransferListExample.vue b/docs/app/components/content/examples/listbox/ListboxTransferListExample.vue
new file mode 100644
index 0000000000..da2100248d
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxTransferListExample.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ListboxItem } from '@nuxt/ui'
+
+const items: ListboxItem[] = [
+  { label: 'France', icon: 'i-lucide-map-pin', value: 'FR' },
+  { label: 'Germany', icon: 'i-lucide-map-pin', value: 'DE' },
+  { label: 'Italy', icon: 'i-lucide-map-pin', value: 'IT' },
+  { label: 'Spain', icon: 'i-lucide-map-pin', value: 'ES' },
+  { label: 'Netherlands', icon: 'i-lucide-map-pin', value: 'NL' },
+  { label: 'Poland', icon: 'i-lucide-map-pin', value: 'PL' },
+  { label: 'Belgium', icon: 'i-lucide-map-pin', value: 'BE' },
+  { label: 'Portugal', icon: 'i-lucide-map-pin', value: 'PT' }
+]
+
+const targetItems = ref<ListboxItem[]>([])
+const sourceSelection = ref<ListboxItem[]>([])
+const targetSelection = ref<ListboxItem[]>([])
+
+const sourceItems = computed(() => items.filter(item => !targetItems.value.some(t => t.value === item.value)))
+
+function transferSelected() {
+  targetItems.value = [...targetItems.value, ...sourceSelection.value]
+  sourceSelection.value = []
+}
+
+function removeSelected() {
+  targetItems.value = targetItems.value.filter(item => !targetSelection.value.some(t => t.value === item.value))
+  targetSelection.value = []
+}
+</script>
+
+<template>
+  <div class="flex items-stretch gap-4 w-full">
+    <div class="flex flex-col flex-1 gap-1">
+      <span class="text-sm font-medium text-highlighted">Available</span>
+
+      <UListbox
+        v-model="sourceSelection"
+        :items="sourceItems"
+        multiple
+        filter
+        class="size-full"
+      />
+    </div>
+
+    <div class="flex flex-col items-center justify-center gap-1">
+      <UButton
+        icon="i-lucide-chevron-right"
+        color="neutral"
+        variant="outline"
+        :disabled="!sourceSelection.length"
+        @click="transferSelected"
+      />
+      <UButton
+        icon="i-lucide-chevron-left"
+        color="neutral"
+        variant="outline"
+        :disabled="!targetSelection.length"
+        @click="removeSelected"
+      />
+    </div>
+
+    <div class="flex flex-col flex-1 gap-1">
+      <span class="text-sm font-medium text-highlighted">Selected</span>
+
+      <UListbox
+        v-model="targetSelection"
+        :items="targetItems"
+        multiple
+        filter
+        class="size-full"
+      />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/listbox/ListboxVirtualizeExample.vue b/docs/app/components/content/examples/listbox/ListboxVirtualizeExample.vue
new file mode 100644
index 0000000000..6de3ff4aeb
--- /dev/null
+++ b/docs/app/components/content/examples/listbox/ListboxVirtualizeExample.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ListboxItem } from '@nuxt/ui'
+
+const items: ListboxItem[] = Array.from({ length: 1000 }, (_, i) => ({
+  label: `Item ${i + 1}`,
+  icon: 'i-lucide-file',
+  value: i + 1
+}))
+
+const value = ref<ListboxItem[]>([])
+</script>
+
+<template>
+  <UListbox
+    v-model="value"
+    :items="items"
+    multiple
+    virtualize
+    class="w-full"
+  />
+</template>
diff --git a/docs/content/docs/2.components/listbox.md b/docs/content/docs/2.components/listbox.md
new file mode 100644
index 0000000000..3557de512c
--- /dev/null
+++ b/docs/content/docs/2.components/listbox.md
@@ -0,0 +1,662 @@
+---
+description: A selectable list of items with search, virtualization and rich item rendering.
+category: form
+links:
+  - label: Listbox
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/listbox
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Listbox.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the Listbox or the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - modelValue.label
+  - modelValue.icon
+  - modelValue.value
+  - items
+external:
+  - items
+  - modelValue
+externalTypes:
+  - ListboxItem[]
+props:
+  modelValue:
+    label: 'France'
+    icon: 'i-lucide-map-pin'
+    value: 'FR'
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+    - label: 'Netherlands'
+      icon: 'i-lucide-map-pin'
+      value: 'NL'
+    - label: 'Poland'
+      icon: 'i-lucide-map-pin'
+      value: 'PL'
+    - label: 'Belgium'
+      icon: 'i-lucide-map-pin'
+      value: 'BE'
+    - label: 'Portugal'
+      icon: 'i-lucide-map-pin'
+      value: 'PT'
+    - label: 'Austria'
+      icon: 'i-lucide-map-pin'
+      value: 'AT'
+    - label: 'Sweden'
+      icon: 'i-lucide-map-pin'
+      value: 'SE'
+  class: 'w-full'
+---
+::
+
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- [`description?: string`{lang="ts-type"}](#with-description-in-items)
+- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-items-type)
+- [`icon?: string`{lang="ts-type"}](#with-icon-in-items)
+- [`avatar?: AvatarProps`{lang="ts-type"}](#with-avatar-in-items)
+- [`chip?: ChipProps`{lang="ts-type"}](#with-chip-in-items)
+- `disabled?: boolean`{lang="ts-type"}
+- `onSelect?: (e: Event) => void`{lang="ts-type"}
+- `class?: any`{lang="ts-type"}
+- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, ... }`{lang="ts-type"}
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  items:
+    - label: 'France'
+      description: 'The Hexagon'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      description: 'The Federal Republic'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      description: 'The Boot'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      description: 'The Bull Skin'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+You can also pass an array of arrays to the `items` prop to display separated groups of items.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[][]
+props:
+  items:
+    - - label: 'France'
+        icon: 'i-lucide-map-pin'
+        value: 'FR'
+      - label: 'Germany'
+        icon: 'i-lucide-map-pin'
+        value: 'DE'
+      - label: 'Italy'
+        icon: 'i-lucide-map-pin'
+        value: 'IT'
+    - - label: 'Brazil'
+        icon: 'i-lucide-map-pin'
+        value: 'BR'
+      - label: 'Argentina'
+        icon: 'i-lucide-map-pin'
+        value: 'AR'
+  class: 'w-full'
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to allow selecting multiple items. When enabled, the `v-model` will be an array.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+  - multiple
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  multiple: true
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+### Value Key
+
+You can choose to bind a single property of the object rather than the whole object by using the `value-key` prop. Defaults to `undefined`.
+
+::component-code
+---
+collapse: true
+ignore:
+  - modelValue
+  - valueKey
+  - items
+  - class
+external:
+  - items
+  - modelValue
+externalTypes:
+  - ListboxItem[]
+props:
+  modelValue: 'FR'
+  valueKey: 'value'
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+### Filter
+
+Use the `filter` prop to display a filter input or pass an object to customize the [Input](/docs/components/input) component. Defaults to `false`.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  filter:
+    placeholder: 'Filter...'
+    icon: 'i-lucide-search'
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+    - label: 'Netherlands'
+      icon: 'i-lucide-map-pin'
+      value: 'NL'
+    - label: 'Poland'
+      icon: 'i-lucide-map-pin'
+      value: 'PL'
+  class: 'w-full'
+---
+::
+
+### Selected Icon
+
+Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-lucide-check`.
+
+::component-code
+---
+collapse: true
+ignore:
+  - items
+  - modelValue
+  - valueKey
+  - class
+external:
+  - items
+  - modelValue
+externalTypes:
+  - ListboxItem[]
+props:
+  modelValue: 'FR'
+  selectedIcon: 'i-lucide-flame'
+  valueKey: 'value'
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Listbox.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  size: xl
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+### Loading
+
+Use the `loading` prop to display a loading indicator. Use the `loading-icon` prop to customize the icon.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  loading: true
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+  class: 'w-full'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to prevent any user interaction with the Listbox.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  disabled: true
+  items:
+    - label: 'France'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+## Examples
+
+### With items type
+
+You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[][]
+props:
+  items:
+    - - type: 'label'
+        label: 'Fruits'
+      - label: 'Apple'
+      - label: 'Banana'
+      - label: 'Blueberry'
+      - label: 'Grapes'
+      - label: 'Pineapple'
+    - - type: 'label'
+        label: 'Vegetables'
+      - label: 'Aubergine'
+      - label: 'Broccoli'
+      - label: 'Carrot'
+      - label: 'Courgette'
+      - label: 'Leek'
+  class: 'w-full'
+---
+::
+
+### With icon in items
+
+You can use the `icon` property to display an [Icon](/docs/components/icon) inside the items.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  items:
+    - label: 'Backlog'
+      icon: 'i-lucide-circle-help'
+      value: 'backlog'
+    - label: 'Todo'
+      icon: 'i-lucide-circle-plus'
+      value: 'todo'
+    - label: 'In Progress'
+      icon: 'i-lucide-circle-arrow-up'
+      value: 'in_progress'
+    - label: 'Done'
+      icon: 'i-lucide-circle-check'
+      value: 'done'
+  class: 'w-full'
+---
+::
+
+### With avatar in items
+
+You can use the `avatar` property to display an [Avatar](/docs/components/avatar) inside the items.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  items:
+    - label: 'benjamincanac'
+      avatar:
+        src: 'https://github.com/benjamincanac.png'
+    - label: 'romhml'
+      avatar:
+        src: 'https://github.com/romhml.png'
+    - label: 'atinux'
+      avatar:
+        src: 'https://github.com/atinux.png'
+    - label: 'HugoRCD'
+      avatar:
+        src: 'https://github.com/HugoRCD.png'
+  class: 'w-full'
+---
+::
+
+### With chip in items
+
+You can use the `chip` property to display a [Chip](/docs/components/chip) inside the items.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  items:
+    - label: 'bug'
+      chip:
+        color: 'error'
+    - label: 'feature'
+      chip:
+        color: 'success'
+    - label: 'enhancement'
+      chip:
+        color: 'info'
+  class: 'w-full'
+---
+::
+
+### With description in items
+
+You can use the `description` property to display additional text below the label.
+
+::component-code
+---
+collapse: true
+hide:
+  - class
+ignore:
+  - items
+external:
+  - items
+externalTypes:
+  - ListboxItem[]
+props:
+  items:
+    - label: 'France'
+      description: 'The Hexagon'
+      icon: 'i-lucide-map-pin'
+      value: 'FR'
+    - label: 'Germany'
+      description: 'The Federal Republic'
+      icon: 'i-lucide-map-pin'
+      value: 'DE'
+    - label: 'Italy'
+      description: 'The Boot'
+      icon: 'i-lucide-map-pin'
+      value: 'IT'
+    - label: 'Spain'
+      description: 'The Bull Skin'
+      icon: 'i-lucide-map-pin'
+      value: 'ES'
+  class: 'w-full'
+---
+::
+
+### Control selected items
+
+You can control the selected item by using the `default-value` prop or the `v-model` directive.
+
+::component-example
+---
+name: 'listbox-model-value-example'
+collapse: true
+---
+::
+
+### Control search term
+
+Use the `v-model:search-term` directive to control the search term.
+
+::component-example
+---
+name: 'listbox-search-term-example'
+---
+::
+
+### With ignore filter
+
+Set the `ignore-filter` prop to `true` to disable the internal search and use your own search logic.
+
+::component-example
+---
+collapse: true
+name: 'listbox-ignore-filter-example'
+---
+::
+
+::note
+This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+::
+
+### With filter fields
+
+Use the `filter-fields` prop with an array of fields to filter on. Defaults to `[labelKey]`.
+
+::component-example
+---
+collapse: true
+name: 'listbox-filter-fields-example'
+---
+::
+
+### With virtualization
+
+Use the `virtualize` prop to enable virtualization for large lists as a boolean or an object with options like `{ estimateSize: 32, overscan: 12 }`.
+
+::component-example
+---
+name: 'listbox-virtualize-example'
+collapse: true
+---
+::
+
+### As a transfer list
+
+You can compose two Listbox components with [Button](/docs/components/button) controls to build a transfer list pattern.
+
+::component-example
+---
+name: 'listbox-transfer-list-example'
+collapse: true
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/public/components/dark/listbox.png b/docs/public/components/dark/listbox.png
new file mode 100644
index 0000000000..dd908ea22e
Binary files /dev/null and b/docs/public/components/dark/listbox.png differ
diff --git a/docs/public/components/light/listbox.png b/docs/public/components/light/listbox.png
new file mode 100644
index 0000000000..89b24c3fc3
Binary files /dev/null and b/docs/public/components/light/listbox.png differ
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index c3bbfcf333..e427a0ee72 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -48,6 +48,7 @@ const components = [
   'input',
   'kbd',
   'link',
+  'listbox',
   'locale',
   'marquee',
   'modal',
diff --git a/playgrounds/nuxt/app/pages/components/listbox.vue b/playgrounds/nuxt/app/pages/components/listbox.vue
new file mode 100644
index 0000000000..1779d1e443
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/listbox.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { ListboxItem } from '@nuxt/ui'
+import theme from '#build/ui/listbox'
+
+const sizes = Object.keys(theme.variants.size)
+
+const attrs = reactive({
+  size: [theme.defaultVariants.size]
+})
+
+const value = ref()
+
+const filter = ref(true)
+const disabled = ref(false)
+const loading = ref(false)
+const multiple = ref(false)
+const virtualize = ref(false)
+
+const virtualItems = Array.from({ length: 1000 }, (_, i) => ({
+  id: i + 1,
+  label: `Item ${i + 1}`,
+  description: `Description for item ${i + 1}`
+}))
+
+const fruits = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple'].map(f => ({ label: f }))
+const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek'].map(v => ({ label: v }))
+
+const items = [
+  [{ label: 'Fruits', type: 'label' as const }, ...fruits],
+  [{ label: 'Vegetables', type: 'label' as const }, ...vegetables]
+] satisfies ListboxItem[]
+</script>
+
+<template>
+  <Navbar>
+    <USwitch v-model="filter" label="Filter" />
+    <USwitch v-model="disabled" label="Disabled" />
+    <USwitch v-model="loading" label="Loading" />
+    <USwitch v-model="multiple" label="Multiple" />
+    <USwitch v-model="virtualize" label="Virtualize" />
+    <USelect v-model="attrs.size" :items="sizes" placeholder="Size" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs" container-class="w-48">
+    <UListbox
+      v-model="value"
+      autofocus
+      :items="virtualize ? virtualItems : items"
+      :filter="filter"
+      :disabled="disabled"
+      :loading="loading"
+      :multiple="multiple"
+      :virtualize="virtualize"
+      v-bind="props"
+      class="w-full"
+    />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/Listbox.vue b/src/runtime/components/Listbox.vue
new file mode 100644
index 0000000000..14aa1a2a85
--- /dev/null
+++ b/src/runtime/components/Listbox.vue
@@ -0,0 +1,397 @@
+<!-- eslint-disable vue/block-tag-newline -->
+<script lang="ts">
+import type { VNode } from 'vue'
+import { computed, toRaw, toRef } from 'vue'
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/listbox'
+import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
+import type { ModelModifiers, ApplyModifiers } from '../types/input'
+import type { ArrayOrNested, GetItemKeys, GetModelValue, NestedItem } from '../types/utils'
+import type { ComponentConfig } from '../types/tv'
+
+type Listbox = ComponentConfig<typeof theme, AppConfig, 'listbox'>
+
+export interface ListboxItem {
+  label?: string
+  description?: string
+  /**
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+  disabled?: boolean
+  onSelect?: (e: Event) => void
+  class?: any
+  ui?: Pick<Listbox['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatar' | 'itemLeadingAvatarSize' | 'itemLeadingChip' | 'itemLeadingChipSize' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>
+  [key: string]: any
+}
+
+export interface ListboxProps<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Pick<ListboxRootProps, 'by' | 'disabled' | 'highlightOnHover' | 'name' | 'orientation' | 'required' | 'selectionBehavior'> {
+  id?: string
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * @defaultValue 'md'
+   */
+  size?: Listbox['variants']['size']
+  /**
+   * The items to display in the list.
+   */
+  items?: T
+  /**
+   * The controlled value of the Listbox. Can be bound with `v-model`.
+   */
+  modelValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>
+  modelModifiers?: Mod
+  /**
+   * The default value when not controlled.
+   */
+  defaultValue?: ApplyModifiers<GetModelValue<T, VK, M>, Mod>
+  /**
+   * Whether multiple items can be selected.
+   * @defaultValue false
+   */
+  multiple?: M & boolean
+  /**
+   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+   * @defaultValue undefined
+   */
+  valueKey?: VK
+  /**
+   * The key used to get the label from the item.
+   * @defaultValue 'label'
+   */
+  labelKey?: GetItemKeys<T>
+  /**
+   * The key used to get the description from the item.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: GetItemKeys<T>
+  /**
+   * Whether the list is in a loading state.
+   */
+  loading?: boolean
+  /**
+   * The icon displayed when loading.
+   * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
+   */
+  loadingIcon?: IconProps['name']
+  /**
+   * Whether to display a filter input or not.
+   * Can be an object to pass additional props to the input.
+   * `{ placeholder: 'Search...', variant: 'none' }`{lang="ts-type"}
+   * @defaultValue false
+   */
+  filter?: boolean | Omit<InputProps, 'modelValue' | 'defaultValue'>
+  /**
+   * The fields to filter by.
+   * @defaultValue [labelKey]
+   */
+  filterFields?: string[]
+  /**
+   * When `true`, disable the default filters, useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue false
+   */
+  ignoreFilter?: boolean
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
+   */
+  selectedIcon?: IconProps['name']
+  /**
+   * Enable virtualization for large lists.
+   * @defaultValue false
+   */
+  virtualize?: boolean | {
+    /**
+     * Number of items rendered outside the visible area
+     * @defaultValue 12
+     */
+    overscan?: number
+    /**
+     * Estimated size (in px) of each item, or a function that returns the size for a given index
+     * @defaultValue 32
+     */
+    estimateSize?: number | ((index: number) => number)
+  }
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  class?: any
+  ui?: Listbox['slots']
+}
+
+export type ListboxEmits<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> = Pick<ListboxRootEmits, 'entryFocus' | 'highlight' | 'leave'> & {
+  'change': [event: Event]
+  'update:modelValue': [value: ApplyModifiers<GetModelValue<T, VK, M>, Mod>]
+}
+
+type SlotProps<T> = (props: { item: T, index: number, ui: Listbox['ui'] }) => VNode[]
+
+export type ListboxSlots<T extends ArrayOrNested<ListboxItem> = ArrayOrNested<ListboxItem>> = {
+  'loading'?(props?: {}): VNode[]
+  'empty'?(props: { searchTerm: string }): VNode[]
+  'item'?: SlotProps<NestedItem<T>>
+  'item-leading'?: SlotProps<NestedItem<T>>
+  'item-label'?(props: { item: NestedItem<T>, index: number }): VNode[]
+  'item-description'?(props: { item: NestedItem<T>, index: number }): VNode[]
+  'item-trailing'?: SlotProps<NestedItem<T>>
+}
+
+</script>
+
+<script setup lang="ts" generic="T extends ArrayOrNested<ListboxItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>">
+import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter, useForwardPropsEmits } from 'reka-ui'
+import { createReusableTemplate, reactivePick } from '@vueuse/core'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+import { useComponentUI } from '../composables/useComponentUI'
+import { useFilter } from '../composables/useFilter'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import { get, isArrayOfArray, looseToNumber } from '../utils'
+import { getEstimateSize } from '../utils/virtualizer'
+import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+import UChip from './Chip.vue'
+import UInput from './Input.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<ListboxProps<T, VK, M, Mod>>(), {
+  labelKey: 'label',
+  descriptionKey: 'description',
+  highlightOnHover: true,
+  filter: false,
+  autofocusDelay: 0,
+  virtualize: false
+})
+const emits = defineEmits<ListboxEmits<T, VK, M, Mod>>()
+const slots = defineSlots<ListboxSlots<T>>()
+
+const searchTerm = defineModel<string>('searchTerm', { default: '' })
+
+const { t } = useLocale()
+const appConfig = useAppConfig() as Listbox['AppConfig']
+const uiProp = useComponentUI('listbox', props)
+const { filterGroups } = useFilter()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'multiple', 'selectionBehavior', 'highlightOnHover', 'by', 'orientation', 'required'), emits)
+
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false
+
+  return defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(filteredItems.value, size.value || 'md', props.descriptionKey as string, !!slots['item-description'])
+  })
+})
+const inputProps = toRef(() => defu(typeof props.filter === 'object' ? props.filter : {}, { placeholder: t('listbox.search'), variant: 'none' }) as Omit<InputProps, 'modelValue' | 'defaultValue'>)
+
+const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props, { bind: false })
+
+const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ListboxItem, index: number }>({
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: false
+    }
+  }
+})
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.listbox || {}) })({
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
+  disabled: disabled.value,
+  virtualize: !!props.virtualize
+}))
+
+function onUpdate(value: any) {
+  if (toRaw(props.modelValue) === value) {
+    return
+  }
+
+  if (props.modelModifiers?.trim && (typeof value === 'string' || value === null || value === undefined)) {
+    value = value?.trim() ?? null
+  }
+
+  if (props.modelModifiers?.number) {
+    value = looseToNumber(value)
+  }
+
+  if (props.modelModifiers?.nullable) {
+    value ??= null
+  }
+
+  if (props.modelModifiers?.optional && !props.modelModifiers?.nullable && value !== null) {
+    value ??= undefined
+  }
+
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+
+function onSelect(e: Event, item: ListboxItem) {
+  if (item.disabled) {
+    e.preventDefault()
+    return
+  }
+
+  item.onSelect?.(e)
+}
+
+const groups = computed<ListboxItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
+
+function isStructuralItem(item: ListboxItem): boolean {
+  return !!item.type && ['label', 'separator'].includes(item.type)
+}
+
+const filteredGroups = computed(() => {
+  if (props.ignoreFilter || !searchTerm.value) {
+    return groups.value
+  }
+
+  const fields = Array.isArray(props.filterFields) ? props.filterFields : [props.labelKey] as string[]
+
+  return filterGroups(groups.value, searchTerm.value, {
+    fields,
+    isStructural: isStructuralItem
+  })
+})
+const filteredItems = computed(() => filteredGroups.value.flatMap(group => group) as NestedItem<T>[])
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <DefineItemTemplate v-slot="{ item, index }">
+    <ListboxGroupLabel v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiProp?.label, item.ui?.label, item.class] })">
+      {{ get(item, props.labelKey as string) }}
+    </ListboxGroupLabel>
+
+    <div v-else-if="item.type === 'separator'" role="separator" data-slot="separator" :class="ui.separator({ class: [uiProp?.separator, item.ui?.separator, item.class] })" />
+
+    <RekaListboxItem
+      v-else
+      :value="props.valueKey ? get(item, props.valueKey as string) : item"
+      :disabled="item.disabled"
+      data-slot="item"
+      :class="ui.item({ class: [uiProp?.item, item.ui?.item, item.class] })"
+      @select="onSelect($event, item)"
+    >
+      <slot name="item" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
+        <slot name="item-leading" :item="(item as NestedItem<T>)" :index="index" :ui="ui">
+          <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiProp?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="((item.ui?.itemLeadingAvatarSize || uiProp?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiProp?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
+          <UChip
+            v-else-if="item.chip"
+            :size="((item.ui?.itemLeadingChipSize || uiProp?.itemLeadingChipSize || ui.itemLeadingChipSize()) as ChipProps['size'])"
+            inset
+            standalone
+            v-bind="item.chip"
+            data-slot="itemLeadingChip"
+            :class="ui.itemLeadingChip({ class: [uiProp?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+          />
+        </slot>
+
+        <span v-if="get(item, props.labelKey as string) || get(item, props.descriptionKey as string) || !!slots['item-label'] || !!slots['item-description']" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiProp?.itemWrapper, item.ui?.itemWrapper] })">
+          <span v-if="get(item, props.labelKey as string) || !!slots['item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [uiProp?.itemLabel, item.ui?.itemLabel] })">
+            <slot name="item-label" :item="(item as NestedItem<T>)" :index="index">
+              {{ get(item, props.labelKey as string) }}
+            </slot>
+          </span>
+
+          <span v-if="get(item, props.descriptionKey as string) || !!slots['item-description']" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiProp?.itemDescription, item.ui?.itemDescription] })">
+            <slot name="item-description" :item="(item as NestedItem<T>)" :index="index">
+              {{ get(item, props.descriptionKey as string) }}
+            </slot>
+          </span>
+        </span>
+
+        <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiProp?.itemTrailing, item.ui?.itemTrailing] })">
+          <slot name="item-trailing" :item="(item as NestedItem<T>)" :index="index" :ui="ui" />
+
+          <ListboxItemIndicator as-child>
+            <UIcon :name="selectedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiProp?.itemTrailingIcon, item.ui?.itemTrailingIcon] })" />
+          </ListboxItemIndicator>
+        </span>
+      </slot>
+    </RekaListboxItem>
+  </DefineItemTemplate>
+
+  <ListboxRoot
+    :id="id"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    :disabled="disabled"
+    :name="name"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @update:model-value="onUpdate"
+  >
+    <ListboxFilter v-if="filter" v-model="searchTerm" as-child>
+      <UInput
+        :autofocus="autofocus"
+        :autofocus-delay="autofocusDelay"
+        :size="size"
+        v-bind="inputProps"
+        data-slot="input"
+        :class="ui.input({ class: uiProp?.input })"
+      />
+    </ListboxFilter>
+
+    <ListboxContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+      <div v-if="loading" data-slot="loading" :class="ui.loading({ class: uiProp?.loading })">
+        <slot name="loading">
+          <UIcon :name="loadingIcon || appConfig.ui.icons.loading" data-slot="loadingIcon" :class="ui.loadingIcon({ class: uiProp?.loadingIcon })" />
+        </slot>
+      </div>
+      <div v-else-if="!filteredItems.length" data-slot="empty" :class="ui.empty({ class: uiProp?.empty })">
+        <slot name="empty" :search-term="searchTerm">
+          {{ searchTerm ? t('listbox.noMatch', { searchTerm }) : t('listbox.noData') }}
+        </slot>
+      </div>
+
+      <ListboxVirtualizer
+        v-else-if="!!virtualize"
+        v-slot="{ option: item, virtualItem }"
+        :options="(filteredItems as any[])"
+        :text-content="(item: any) => get(item, props.labelKey as string)"
+        v-bind="virtualizerProps"
+      >
+        <ReuseItemTemplate :item="item" :index="virtualItem.index" />
+      </ListboxVirtualizer>
+
+      <template v-else>
+        <ListboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
+          <ReuseItemTemplate v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`" :item="item" :index="index" />
+        </ListboxGroup>
+      </template>
+    </ListboxContent>
+  </ListboxRoot>
+</template>
diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index eb7bd6c560..8096c5b41e 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'تقليل',
       increment: 'زيادة'
     },
+    listbox: {
+      noData: 'لا توجد بيانات',
+      noMatch: 'لا توجد نتائج مطابقة',
+      search: 'بحث…'
+    },
     modal: {
       close: 'إغلاق'
     },
diff --git a/src/runtime/locale/az.ts b/src/runtime/locale/az.ts
index 246af6e41a..9a7337255a 100644
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Azalt',
       increment: 'Artır'
     },
+    listbox: {
+      noData: 'Məlumat yoxdur',
+      noMatch: 'Uyğun məlumat tapılmadı',
+      search: 'Axtar…'
+    },
     modal: {
       close: 'Bağla'
     },
diff --git a/src/runtime/locale/be.ts b/src/runtime/locale/be.ts
index 1afc0d6153..3f5d3e798f 100644
--- a/src/runtime/locale/be.ts
+++ b/src/runtime/locale/be.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Паменшыць',
       increment: 'Павялічыць'
     },
+    listbox: {
+      noData: 'Няма даных',
+      noMatch: 'Супадзенняў не знойдзена',
+      search: 'Пошук…'
+    },
     modal: {
       close: 'Закрыць'
     },
diff --git a/src/runtime/locale/bg.ts b/src/runtime/locale/bg.ts
index f07984bfad..e444e14286 100644
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Намаляване',
       increment: 'Увеличаване'
     },
+    listbox: {
+      noData: 'Няма данни',
+      noMatch: 'Няма съвпадение на данни',
+      search: 'Потърсете…'
+    },
     modal: {
       close: 'Затворете'
     },
diff --git a/src/runtime/locale/bn.ts b/src/runtime/locale/bn.ts
index 7f124ae709..b85e3d94c5 100644
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'হ্রাস করুন',
       increment: 'বৃদ্ধি করুন'
     },
+    listbox: {
+      noData: 'কোন তথ্য নেই',
+      noMatch: 'কোন মিল পাওয়া যায়নি',
+      search: 'অনুসন্ধান করুন…'
+    },
     modal: {
       close: 'বন্ধ করুন'
     },
diff --git a/src/runtime/locale/ca.ts b/src/runtime/locale/ca.ts
index 9fcf96c2c1..715ba57db3 100644
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Decrementar',
       increment: 'Incrementar'
     },
+    listbox: {
+      noData: 'Sense dades',
+      noMatch: 'No hi ha dades coincidents',
+      search: 'Cerca…'
+    },
     modal: {
       close: 'Tancar'
     },
diff --git a/src/runtime/locale/ckb.ts b/src/runtime/locale/ckb.ts
index 121566019c..e944365f68 100644
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -30,7 +30,7 @@ export default defineLocale<Messages>({
       prev: 'پێشتر'
     },
     chatPrompt: {
-      placeholder: 'نامەکەت لێرە بنوسە...'
+      placeholder: 'نامەکەت لێرە بنوسە…'
     },
     chatPromptSubmit: {
       label: 'ناردن'
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'کەمکردنەوە',
       increment: 'زیادکردن'
     },
+    listbox: {
+      noData: 'هیچ داتایەک نییە',
+      noMatch: 'هیچ ئەنجامێک نەدۆزرایەوە',
+      search: 'گەڕان…'
+    },
     modal: {
       close: 'داخستن'
     },
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index f2e9ce70e5..046b7f14ea 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Snížit',
       increment: 'Zvýšit'
     },
+    listbox: {
+      noData: 'Žádná data',
+      noMatch: 'Žádná shoda',
+      search: 'Hledat…'
+    },
     modal: {
       close: 'Zavřít'
     },
diff --git a/src/runtime/locale/da.ts b/src/runtime/locale/da.ts
index 269bf8bc68..369cfc6b4a 100644
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Reducer',
       increment: 'Øg'
     },
+    listbox: {
+      noData: 'Ingen data',
+      noMatch: 'Ingen matchende data',
+      search: 'Søg…'
+    },
     modal: {
       close: 'Luk'
     },
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index 22e28b1028..acf4c3f91a 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Verringern',
       increment: 'Erhöhen'
     },
+    listbox: {
+      noData: 'Keine Daten',
+      noMatch: 'Nichts gefunden',
+      search: 'Suchen…'
+    },
     modal: {
       close: 'Schließen'
     },
diff --git a/src/runtime/locale/de_ch.ts b/src/runtime/locale/de_ch.ts
index 75edd162f4..78d97cda84 100644
--- a/src/runtime/locale/de_ch.ts
+++ b/src/runtime/locale/de_ch.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Verringern',
       increment: 'Erhöhen'
     },
+    listbox: {
+      noData: 'Keine Daten',
+      noMatch: 'Nichts gefunden',
+      search: 'Suchen…'
+    },
     modal: {
       close: 'Schliessen'
     },
diff --git a/src/runtime/locale/el.ts b/src/runtime/locale/el.ts
index 7e17de7c41..d0d5704129 100644
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Μείωση',
       increment: 'Αύξηση'
     },
+    listbox: {
+      noData: 'Δεν υπάρχουν δεδομένα',
+      noMatch: 'Δεν βρέθηκαν δεδομένα',
+      search: 'Αναζήτηση…'
+    },
     modal: {
       close: 'Κλείσιμο'
     },
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 7eced47986..64c282bec5 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -95,6 +95,11 @@ export default defineLocale<Messages>({
       decrement: 'Decrement',
       increment: 'Increment'
     },
+    listbox: {
+      noData: 'No data',
+      noMatch: 'No matching data',
+      search: 'Search…'
+    },
     modal: {
       close: 'Close'
     },
@@ -121,7 +126,7 @@ export default defineLocale<Messages>({
       }
     },
     chatReasoning: {
-      thinking: 'Thinking...',
+      thinking: 'Thinking…',
       thought: 'Thought',
       thoughtFor: 'Thought for {duration}'
     },
diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index 68ff948774..d699ea64b2 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Decrementar',
       increment: 'Incrementar'
     },
+    listbox: {
+      noData: 'Sin datos',
+      noMatch: 'No hay datos coincidentes',
+      search: 'Buscar…'
+    },
     modal: {
       close: 'Cerrar'
     },
diff --git a/src/runtime/locale/et.ts b/src/runtime/locale/et.ts
index 5eefaa1e89..a9b0145aeb 100644
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Vähenda',
       increment: 'Suurenda'
     },
+    listbox: {
+      noData: 'Pole andmeid',
+      noMatch: 'Pole vastavaid andmeid',
+      search: 'Otsi…'
+    },
     modal: {
       close: 'Sulge'
     },
diff --git a/src/runtime/locale/eu.ts b/src/runtime/locale/eu.ts
index 5b9f090b65..5de431228c 100644
--- a/src/runtime/locale/eu.ts
+++ b/src/runtime/locale/eu.ts
@@ -29,7 +29,7 @@ export default defineLocale<Messages>({
       prev: 'Aurretikoa'
     },
     chatPrompt: {
-      placeholder: 'Idatzi zure mezua hemen...'
+      placeholder: 'Idatzi zure mezua hemen…'
     },
     chatPromptSubmit: {
       label: 'Bidali'
@@ -51,7 +51,7 @@ export default defineLocale<Messages>({
       close: 'Itxi',
       noData: 'Daturik gabe',
       noMatch: 'Ez da datu bat ere aurkitu',
-      placeholder: 'Idatzi komando bat edo bilatu...'
+      placeholder: 'Idatzi komando bat edo bilatu…'
     },
     contentSearch: {
       links: 'Estekak',
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Murriztu',
       increment: 'Handitu'
     },
+    listbox: {
+      noData: 'Daturik gabe',
+      noMatch: 'Ez da datu bat ere aurkitu',
+      search: 'Bilatu…'
+    },
     modal: {
       close: 'Itxi'
     },
diff --git a/src/runtime/locale/fa_ir.ts b/src/runtime/locale/fa_ir.ts
index 5a4bf4ae9d..56a5351575 100644
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'کاهش',
       increment: 'افزایش'
     },
+    listbox: {
+      noData: 'داده‌ای موجود نیست',
+      noMatch: 'داده‌ای یافت نشد',
+      search: 'جستجو…'
+    },
     modal: {
       close: 'بستن'
     },
diff --git a/src/runtime/locale/fi.ts b/src/runtime/locale/fi.ts
index a256ca61f1..3ba1cc3d24 100644
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Vähennä',
       increment: 'Kasvata'
     },
+    listbox: {
+      noData: 'Ei tietoja',
+      noMatch: 'Ei vastaavia tietoja',
+      search: 'Hae…'
+    },
     modal: {
       close: 'Sulje'
     },
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index 18c528fca7..6a15231d99 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Diminuer',
       increment: 'Augmenter'
     },
+    listbox: {
+      noData: 'Aucune donnée',
+      noMatch: 'Aucune donnée correspondante',
+      search: 'Rechercher…'
+    },
     modal: {
       close: 'Fermer'
     },
diff --git a/src/runtime/locale/gl.ts b/src/runtime/locale/gl.ts
index cfc9fc1f63..e98585fd7b 100644
--- a/src/runtime/locale/gl.ts
+++ b/src/runtime/locale/gl.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Diminuír',
       increment: 'Aumentar'
     },
+    listbox: {
+      noData: 'Sen datos',
+      noMatch: 'Non hai datos coincidentes',
+      search: 'Buscar…'
+    },
     modal: {
       close: 'Pechar'
     },
diff --git a/src/runtime/locale/he.ts b/src/runtime/locale/he.ts
index 70b9622837..a8a2d7943b 100644
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'הפחת',
       increment: 'הוסף'
     },
+    listbox: {
+      noData: 'אין נתונים',
+      noMatch: 'לא נמצאה התאמה',
+      search: 'חפש…'
+    },
     modal: {
       close: 'סגור'
     },
diff --git a/src/runtime/locale/hi.ts b/src/runtime/locale/hi.ts
index 48c739737b..6625c5132b 100644
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'घटाना',
       increment: 'बढ़ाना'
     },
+    listbox: {
+      noData: 'कोई डेटा नहीं',
+      noMatch: 'कोई मेल खाता डेटा नहीं',
+      search: 'खोजें…'
+    },
     modal: {
       close: 'बंद करें'
     },
diff --git a/src/runtime/locale/hr.ts b/src/runtime/locale/hr.ts
index 4c14647504..2547830962 100644
--- a/src/runtime/locale/hr.ts
+++ b/src/runtime/locale/hr.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Smanji',
       increment: 'Povećaj'
     },
+    listbox: {
+      noData: 'Nema podataka',
+      noMatch: 'Nema odgovarajućih podataka',
+      search: 'Pretraživanje…'
+    },
     modal: {
       close: 'Zatvori'
     },
diff --git a/src/runtime/locale/hu.ts b/src/runtime/locale/hu.ts
index 379cec11b6..880e2633e1 100644
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Csökkent',
       increment: 'Növel'
     },
+    listbox: {
+      noData: 'Nincs adat',
+      noMatch: 'Nincs találat',
+      search: 'Keresés…'
+    },
     modal: {
       close: 'Bezárás'
     },
diff --git a/src/runtime/locale/hy.ts b/src/runtime/locale/hy.ts
index 948643c8d8..41c5ff0e01 100644
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Պակասեցնել',
       increment: 'Ավելացնել'
     },
+    listbox: {
+      noData: 'Տվյալներ չկան',
+      noMatch: 'Համընկնումներ չեն գտնվել',
+      search: 'Որոնում…'
+    },
     modal: {
       close: 'Փակել'
     },
diff --git a/src/runtime/locale/id.ts b/src/runtime/locale/id.ts
index d007dd5890..1bb11c2e7d 100644
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Kurangi',
       increment: 'Tambah'
     },
+    listbox: {
+      noData: 'Tidak ada data',
+      noMatch: 'Tidak ada data yang cocok',
+      search: 'Cari…'
+    },
     modal: {
       close: 'Tutup'
     },
diff --git a/src/runtime/locale/is.ts b/src/runtime/locale/is.ts
index cbff00cb5c..a83415b805 100644
--- a/src/runtime/locale/is.ts
+++ b/src/runtime/locale/is.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Minnka',
       increment: 'Auka'
     },
+    listbox: {
+      noData: 'Engin gögn',
+      noMatch: 'Engin gögn fundust',
+      search: 'Leita…'
+    },
     modal: {
       close: 'Loka'
     },
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index a6ce722282..4923819e5a 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Diminuisci',
       increment: 'Aumenta'
     },
+    listbox: {
+      noData: 'Nessun dato',
+      noMatch: 'Nessun dato corrispondente',
+      search: 'Cerca…'
+    },
     modal: {
       close: 'Chiudi'
     },
diff --git a/src/runtime/locale/ja.ts b/src/runtime/locale/ja.ts
index da0da85ae9..7266cf4575 100644
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: '減らす',
       increment: '増やす'
     },
+    listbox: {
+      noData: 'データがありません',
+      noMatch: '一致するデータがありません',
+      search: '検索…'
+    },
     modal: {
       close: '閉じる'
     },
diff --git a/src/runtime/locale/ka.ts b/src/runtime/locale/ka.ts
index 5357d4d336..2cf7898cf3 100644
--- a/src/runtime/locale/ka.ts
+++ b/src/runtime/locale/ka.ts
@@ -102,6 +102,11 @@ export default defineLocale<Messages>({
       decrement: 'დაკლება',
       increment: 'დამატება'
     },
+    listbox: {
+      noData: 'მონაცემები არ არის',
+      noMatch: 'შესატყვისი მონაცემები არ არის',
+      search: 'ძიება…'
+    },
     modal: {
       close: 'დახურვა'
     },
diff --git a/src/runtime/locale/kk.ts b/src/runtime/locale/kk.ts
index dec2c31a3d..6e3a51d8df 100644
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Азайту',
       increment: 'Арттыру'
     },
+    listbox: {
+      noData: 'Деректер жоқ',
+      noMatch: 'Сәйкес келетін деректер жоқ',
+      search: 'Іздеу…'
+    },
     modal: {
       close: 'Жабу'
     },
diff --git a/src/runtime/locale/km.ts b/src/runtime/locale/km.ts
index 87cdf37232..f58fb8b9c3 100644
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'បន្ថយ',
       increment: 'បង្កើន'
     },
+    listbox: {
+      noData: 'មិនមានទិន្នន័យ',
+      noMatch: 'មិនមានទិន្នន័យដែលត្រូវគ្នាទេ',
+      search: 'ស្វែងរក…'
+    },
     modal: {
       close: 'បិទ'
     },
diff --git a/src/runtime/locale/ko.ts b/src/runtime/locale/ko.ts
index b3af0cab49..42a04728b7 100644
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: '감소',
       increment: '증가'
     },
+    listbox: {
+      noData: '데이터가 없습니다.',
+      noMatch: '일치하는 데이터가 없습니다.',
+      search: '검색…'
+    },
     modal: {
       close: '닫기'
     },
diff --git a/src/runtime/locale/ky.ts b/src/runtime/locale/ky.ts
index 296eb0c67a..83426e147d 100644
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Азайтуу',
       increment: 'Кошуу'
     },
+    listbox: {
+      noData: 'Маалымат жок',
+      noMatch: 'Сүйлөшкөн маалыматтар жок',
+      search: 'Издөө…'
+    },
     modal: {
       close: 'Жабуу'
     },
diff --git a/src/runtime/locale/lb.ts b/src/runtime/locale/lb.ts
index ae5c089e93..a7e13b3cbd 100644
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -65,7 +65,7 @@ export default defineLocale<Messages>({
     },
     dropdownMenu: {
       noMatch: 'Keng entspriechend Donnéeën',
-      search: 'Sichen..'
+      search: 'Sichen…'
     },
     dashboardSearch: {
       theme: 'Thema'
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Dekrementéieren',
       increment: 'Inkrementéieren'
     },
+    listbox: {
+      noData: 'Keng Donnéeën',
+      noMatch: 'Keng entspriechend Donnéeën',
+      search: 'Sichen…'
+    },
     modal: {
       close: 'Zoumaachen'
     },
@@ -133,7 +138,7 @@ export default defineLocale<Messages>({
       create: '"{label}" erstellen',
       noData: 'Keng Donnéeën',
       noMatch: 'Keng entspriechend Donnéeën',
-      search: 'Sichen..'
+      search: 'Sichen…'
     },
     slideover: {
       close: 'Zoumaachen'
diff --git a/src/runtime/locale/lo.ts b/src/runtime/locale/lo.ts
index 4f7d333662..d64fdebf5e 100644
--- a/src/runtime/locale/lo.ts
+++ b/src/runtime/locale/lo.ts
@@ -29,7 +29,7 @@ export default defineLocale<Messages>({
       prev: 'ກ່ອນໜ້າ'
     },
     chatPrompt: {
-      placeholder: 'ພິມຂໍ້ຄວາມຂອງທ່ານທີ່ນີ້...'
+      placeholder: 'ພິມຂໍ້ຄວາມຂອງທ່ານທີ່ນີ້…'
     },
     chatPromptSubmit: {
       label: 'ສົ່ງຄຳສັ່ງ'
@@ -51,27 +51,27 @@ export default defineLocale<Messages>({
       close: 'ປິດ',
       noData: 'ບໍ່ມີຂໍ້ມູນ',
       noMatch: 'ບໍ່ພົບຂໍ້ມູນທີ່ກົງກັນ',
-      placeholder: 'ພິມຄຳສັ່ງ ຫຼື ຄົ້ນຫາ...'
+      placeholder: 'ພິມຄຳສັ່ງ ຫຼື ຄົ້ນຫາ…'
     },
     contentSearch: {
       links: 'ລິ້ງ',
       theme: 'ທີມ'
     },
     contentSearchButton: {
-      label: 'ຄົ້ນຫາ...'
+      label: 'ຄົ້ນຫາ…'
     },
     contentToc: {
       title: 'ໃນໜ້ານີ້'
     },
     dropdownMenu: {
       noMatch: 'ບໍ່ພົບຂໍ້ມູນທີ່ກົງກັນ',
-      search: 'ຄົ້ນຫາ...'
+      search: 'ຄົ້ນຫາ…'
     },
     dashboardSearch: {
       theme: 'ທີມ'
     },
     dashboardSearchButton: {
-      label: 'ຄົ້ນຫາ...'
+      label: 'ຄົ້ນຫາ…'
     },
     dashboardSidebarCollapse: {
       collapse: 'ຫຍໍ້ແຖບດ້ານຂ້າງ',
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'ຫຼຸດລົງ',
       increment: 'ເພີ່ມຂຶ້ນ'
     },
+    listbox: {
+      noData: 'ບໍ່ມີຂໍ້ມູນ',
+      noMatch: 'ບໍ່ພົບຂໍ້ມູນທີ່ກົງກັນ',
+      search: 'ຄົ້ນຫາ…'
+    },
     modal: {
       close: 'ປິດ'
     },
@@ -133,7 +138,7 @@ export default defineLocale<Messages>({
       create: 'ສ້າງ "{label}"',
       noData: 'ບໍ່ມີຂໍ້ມູນ',
       noMatch: 'ບໍ່ພົບຂໍ້ມູນທີ່ກົງກັນ',
-      search: 'ຄົ້ນຫາ...'
+      search: 'ຄົ້ນຫາ…'
     },
     slideover: {
       close: 'ປິດ'
diff --git a/src/runtime/locale/lt.ts b/src/runtime/locale/lt.ts
index 84a9ae2193..75e1c31447 100644
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Sumažinti',
       increment: 'Padidinti'
     },
+    listbox: {
+      noData: 'Nėra duomenų',
+      noMatch: 'Nėra atitinkančių duomenų',
+      search: 'Ieškoti…'
+    },
     modal: {
       close: 'Uždaryti'
     },
diff --git a/src/runtime/locale/mn.ts b/src/runtime/locale/mn.ts
index 3750f5e49e..a51b069168 100644
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Хасах',
       increment: 'Нэмэх'
     },
+    listbox: {
+      noData: 'Мэдээлэл байхгүй',
+      noMatch: 'Тохирох мэдээлэл олдсонгүй',
+      search: 'Хайх…'
+    },
     modal: {
       close: 'Хаах'
     },
diff --git a/src/runtime/locale/ms.ts b/src/runtime/locale/ms.ts
index e295a0f319..fcb6a77116 100644
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Kurangkan',
       increment: 'Naikkan'
     },
+    listbox: {
+      noData: 'Tiada data',
+      noMatch: 'Tiada data yang sepadan',
+      search: 'Cari…'
+    },
     modal: {
       close: 'Tutup'
     },
diff --git a/src/runtime/locale/nb_no.ts b/src/runtime/locale/nb_no.ts
index 2fb045ab72..4efd9bd2d8 100644
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Reduser',
       increment: 'Øk'
     },
+    listbox: {
+      noData: 'Ingen data',
+      noMatch: 'Ingen samsvarende data',
+      search: 'Søk…'
+    },
     modal: {
       close: 'Lukk'
     },
diff --git a/src/runtime/locale/nl.ts b/src/runtime/locale/nl.ts
index 8e184d18d3..11cb16c5bc 100644
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Verlagen',
       increment: 'Verhogen'
     },
+    listbox: {
+      noData: 'Geen gegevens',
+      noMatch: 'Geen overeenkomende gegevens',
+      search: 'Zoeken…'
+    },
     modal: {
       close: 'Sluiten'
     },
diff --git a/src/runtime/locale/pl.ts b/src/runtime/locale/pl.ts
index f0d142cea2..b502dd7058 100644
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Zmniejsz',
       increment: 'Zwiększ'
     },
+    listbox: {
+      noData: 'Brak danych',
+      noMatch: 'Brak pasujących danych',
+      search: 'Szukaj…'
+    },
     modal: {
       close: 'Zamknij'
     },
diff --git a/src/runtime/locale/pt.ts b/src/runtime/locale/pt.ts
index 6895877831..1c3a28ef30 100644
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Decrementar',
       increment: 'Incrementar'
     },
+    listbox: {
+      noData: 'Sem dados',
+      noMatch: 'Nenhum dado correspondente',
+      search: 'Pesquisar…'
+    },
     modal: {
       close: 'Fechar'
     },
diff --git a/src/runtime/locale/pt_br.ts b/src/runtime/locale/pt_br.ts
index 7a0d783c43..adc2404b2d 100644
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Decrementar',
       increment: 'Incrementar'
     },
+    listbox: {
+      noData: 'Nenhum dado',
+      noMatch: 'Nenhum dado correspondente',
+      search: 'Pesquisar…'
+    },
     modal: {
       close: 'Fechar'
     },
diff --git a/src/runtime/locale/ro.ts b/src/runtime/locale/ro.ts
index 4195fb6ac5..08d8ebc559 100644
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Scade',
       increment: 'Crește'
     },
+    listbox: {
+      noData: 'Nu există date',
+      noMatch: 'Nu există date corespunzătoare',
+      search: 'Caută…'
+    },
     modal: {
       close: 'Închide'
     },
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index 5bb7eeaf04..c823dce064 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Уменьшить',
       increment: 'Увеличить'
     },
+    listbox: {
+      noData: 'Нет данных',
+      noMatch: 'Совпадений не найдено',
+      search: 'Поиск…'
+    },
     modal: {
       close: 'Закрыть'
     },
diff --git a/src/runtime/locale/sk.ts b/src/runtime/locale/sk.ts
index cff6e0968d..78a9361a84 100644
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Znížiť',
       increment: 'Zvýšiť'
     },
+    listbox: {
+      noData: 'Žiadne dáta',
+      noMatch: 'Žiadna zhoda',
+      search: 'Hľadať…'
+    },
     modal: {
       close: 'Zatvoriť'
     },
diff --git a/src/runtime/locale/sl.ts b/src/runtime/locale/sl.ts
index a87b9984e3..4b218bee05 100644
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Zmanjšaj',
       increment: 'Povišaj'
     },
+    listbox: {
+      noData: 'Ni podatkov',
+      noMatch: 'Ni ujemanj',
+      search: 'Išči…'
+    },
     modal: {
       close: 'Zapri'
     },
diff --git a/src/runtime/locale/sq.ts b/src/runtime/locale/sq.ts
index 44c590bd65..9a94532914 100644
--- a/src/runtime/locale/sq.ts
+++ b/src/runtime/locale/sq.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Zvogëlo',
       increment: 'Rrit'
     },
+    listbox: {
+      noData: 'Nuk ka të dhëna',
+      noMatch: 'Nuk ka të dhëna që përputhen',
+      search: 'Kërko…'
+    },
     modal: {
       close: 'Mbyll'
     },
diff --git a/src/runtime/locale/sv.ts b/src/runtime/locale/sv.ts
index 373dd118a1..d52031cb12 100644
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Minska',
       increment: 'Öka'
     },
+    listbox: {
+      noData: 'Inga data',
+      noMatch: 'Inga matchande data',
+      search: 'Sök…'
+    },
     modal: {
       close: 'Stäng'
     },
diff --git a/src/runtime/locale/th.ts b/src/runtime/locale/th.ts
index f6409f0c2a..e296a344e9 100644
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'ลด',
       increment: 'เพิ่ม'
     },
+    listbox: {
+      noData: 'ไม่มีข้อมูล',
+      noMatch: 'ไม่พบข้อมูลที่ตรงกัน',
+      search: 'ค้นหา…'
+    },
     modal: {
       close: 'ปิด'
     },
diff --git a/src/runtime/locale/tj.ts b/src/runtime/locale/tj.ts
index 635be7565f..baa0b6af6c 100644
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Кам кардан',
       increment: 'Зиёд кардан'
     },
+    listbox: {
+      noData: 'Маълумот нест',
+      noMatch: 'Маълумоти мувофиқ ёфт нашуд',
+      search: 'Ҷустуҷӯ…'
+    },
     modal: {
       close: 'Бастан'
     },
diff --git a/src/runtime/locale/tr.ts b/src/runtime/locale/tr.ts
index b42d222912..c101dd2aa0 100644
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Azalt',
       increment: 'Arttır'
     },
+    listbox: {
+      noData: 'Veri yok',
+      noMatch: 'Eşleşen veri yok',
+      search: 'Ara…'
+    },
     modal: {
       close: 'Kapat'
     },
diff --git a/src/runtime/locale/ug_cn.ts b/src/runtime/locale/ug_cn.ts
index 9a6f47efa1..de09df2592 100644
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'ئازايتىش',
       increment: 'كۆپەيتىش'
     },
+    listbox: {
+      noData: 'سانلىق مەلۇمات يوق',
+      noMatch: 'ماس كېلىدىغان سانلىق مەلۇمات يوق',
+      search: 'ئىزدەش…'
+    },
     modal: {
       close: 'تاقاش'
     },
diff --git a/src/runtime/locale/uk.ts b/src/runtime/locale/uk.ts
index 93eb45be61..dfae94f6aa 100644
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Зменшити',
       increment: 'Збільшити'
     },
+    listbox: {
+      noData: 'Немає даних',
+      noMatch: 'Збігів не знайдено',
+      search: 'Пошук…'
+    },
     modal: {
       close: 'Закрити'
     },
diff --git a/src/runtime/locale/ur.ts b/src/runtime/locale/ur.ts
index 7f509e5c9c..85e58ae619 100644
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -101,6 +101,11 @@ export default defineLocale<Messages>({
       decrement: 'کمی',
       increment: 'اضافہ'
     },
+    listbox: {
+      noData: 'کوئی ڈیٹا نہیں',
+      noMatch: 'کوئی ملتا جلتا ڈیٹا نہیں ملا',
+      search: 'تلاش کریں…'
+    },
     modal: {
       close: 'بند کریں'
     },
diff --git a/src/runtime/locale/uz.ts b/src/runtime/locale/uz.ts
index c8315f02bb..4eea4aabf0 100644
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Ayirish',
       increment: 'Qoʻshish'
     },
+    listbox: {
+      noData: 'Maʼlumot yoʻq',
+      noMatch: 'Mos keluvchi natija topilmadi',
+      search: 'Qidirish…'
+    },
     modal: {
       close: 'Yopish'
     },
diff --git a/src/runtime/locale/vi.ts b/src/runtime/locale/vi.ts
index 5c65594b0c..2b4c475804 100644
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: 'Giảm',
       increment: 'Tăng'
     },
+    listbox: {
+      noData: 'Không có dữ liệu',
+      noMatch: 'Không có kết quả phù hợp',
+      search: 'Tìm kiếm…'
+    },
     modal: {
       close: 'Đóng'
     },
diff --git a/src/runtime/locale/zh_cn.ts b/src/runtime/locale/zh_cn.ts
index 727cdf36d3..e6202e2bf1 100644
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: '减少',
       increment: '增加'
     },
+    listbox: {
+      noData: '没有数据',
+      noMatch: '没有匹配的数据',
+      search: '搜索…'
+    },
     modal: {
       close: '关闭'
     },
diff --git a/src/runtime/locale/zh_tw.ts b/src/runtime/locale/zh_tw.ts
index d99f8821e2..82bb7d1cda 100644
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -100,6 +100,11 @@ export default defineLocale<Messages>({
       decrement: '減少',
       increment: '增加'
     },
+    listbox: {
+      noData: '沒有資料',
+      noMatch: '沒有相符的資料',
+      search: '搜尋…'
+    },
     modal: {
       close: '關閉'
     },
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index b6f4ed48cd..21b988e419 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -67,6 +67,7 @@ export * from '../components/InputTags.vue'
 export * from '../components/InputTime.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
+export * from '../components/Listbox.vue'
 export * from '../components/Main.vue'
 export * from '../components/Marquee.vue'
 export * from '../components/Modal.vue'
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index de30698a20..fa7e8e777c 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -99,6 +99,11 @@ export type Messages = {
     decrement: string
     increment: string
   }
+  listbox: {
+    noData: string
+    noMatch: string
+    search: string
+  }
   modal: {
     close: string
   }
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ed663a9549..2b076f6d0c 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -65,6 +65,7 @@ export { default as inputTags } from './input-tags'
 export { default as inputTime } from './input-time'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
+export { default as listbox } from './listbox'
 export { default as main } from './main'
 export { default as marquee } from './marquee'
 export { default as modal } from './modal'
diff --git a/src/theme/listbox.ts b/src/theme/listbox.ts
new file mode 100644
index 0000000000..25508b7149
--- /dev/null
+++ b/src/theme/listbox.ts
@@ -0,0 +1,127 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden',
+    input: 'border-b border-default',
+    content: 'relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none',
+    group: 'p-1 isolate',
+    label: 'font-semibold text-highlighted',
+    separator: '-mx-1 my-1 h-px bg-border',
+    empty: 'text-center text-muted',
+    loading: 'flex items-center justify-center text-muted',
+    loadingIcon: 'animate-spin shrink-0',
+    item: ['group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+    itemLeadingIcon: ['shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default', options.theme.transitions && 'transition-colors'],
+    itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '',
+    itemLeadingChip: 'shrink-0',
+    itemLeadingChipSize: '',
+    itemWrapper: 'flex-1 flex flex-col min-w-0',
+    itemLabel: 'truncate',
+    itemDescription: 'truncate text-muted',
+    itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
+    itemTrailingIcon: 'shrink-0'
+  },
+  variants: {
+    size: {
+      xs: {
+        label: 'p-1 text-[10px]/3 gap-1',
+        empty: 'py-3 text-xs',
+        loading: 'py-3',
+        loadingIcon: 'size-4',
+        item: 'p-1 text-xs gap-1',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemLeadingChip: 'size-4',
+        itemLeadingChipSize: 'sm',
+        itemTrailingIcon: 'size-4'
+      },
+      sm: {
+        label: 'p-1.5 text-[10px]/3 gap-1.5',
+        empty: 'py-4 text-xs',
+        loading: 'py-4',
+        loadingIcon: 'size-4',
+        item: 'p-1.5 text-xs gap-1.5',
+        itemLeadingIcon: 'size-4',
+        itemLeadingAvatarSize: '3xs',
+        itemLeadingChip: 'size-4',
+        itemLeadingChipSize: 'sm',
+        itemTrailingIcon: 'size-4'
+      },
+      md: {
+        label: 'p-1.5 text-xs gap-1.5',
+        empty: 'py-6 text-sm',
+        loading: 'py-6',
+        loadingIcon: 'size-5',
+        item: 'p-1.5 text-sm gap-1.5',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemLeadingChip: 'size-5',
+        itemLeadingChipSize: 'md',
+        itemTrailingIcon: 'size-5'
+      },
+      lg: {
+        label: 'p-2 text-xs gap-2',
+        empty: 'py-7 text-sm',
+        loading: 'py-7',
+        loadingIcon: 'size-5',
+        item: 'p-2 text-sm gap-2',
+        itemLeadingIcon: 'size-5',
+        itemLeadingAvatarSize: '2xs',
+        itemLeadingChip: 'size-5',
+        itemLeadingChipSize: 'md',
+        itemTrailingIcon: 'size-5'
+      },
+      xl: {
+        label: 'p-2 text-sm gap-2',
+        empty: 'py-8 text-base',
+        loading: 'py-8',
+        loadingIcon: 'size-6',
+        item: 'p-2 text-base gap-2',
+        itemLeadingIcon: 'size-6',
+        itemLeadingAvatarSize: 'xs',
+        itemLeadingChip: 'size-6',
+        itemLeadingChipSize: 'lg',
+        itemTrailingIcon: 'size-6',
+        itemDescription: 'text-sm'
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    },
+    virtualize: {
+      true: {
+        content: 'p-1 isolate'
+      },
+      false: {
+        content: 'divide-y divide-default'
+      }
+    },
+    disabled: {
+      true: {
+        root: 'opacity-75 cursor-not-allowed'
+      }
+    },
+    highlight: {
+      true: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    highlight: true,
+    class: {
+      root: `ring ring-inset ring-${color}`
+    }
+  })), {
+    color: 'neutral',
+    highlight: true,
+    class: {
+      root: 'ring ring-inset ring-inverted'
+    }
+  }],
+  defaultVariants: {
+    size: 'md'
+  }
+})
diff --git a/test/components/Listbox.spec.ts b/test/components/Listbox.spec.ts
new file mode 100644
index 0000000000..4490a97087
--- /dev/null
+++ b/test/components/Listbox.spec.ts
@@ -0,0 +1,226 @@
+import { describe, it, expect, test } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { flushPromises, mount } from '@vue/test-utils'
+import { renderEach } from '../component-render'
+import { renderForm } from '../utils/form'
+import { expectEmitPayloadType } from '../utils/types'
+import theme from '#build/ui/listbox'
+import type { FormInputEvents } from '../../src/module'
+import Listbox from '../../src/runtime/components/Listbox.vue'
+
+describe('Listbox', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+
+  const items = [{
+    label: 'France',
+    icon: 'i-lucide-map-pin',
+    value: 'FR'
+  }, {
+    label: 'Germany',
+    icon: 'i-lucide-map-pin',
+    value: 'DE'
+  }, {
+    label: 'Italy',
+    icon: 'i-lucide-map-pin',
+    value: 'IT'
+  }, {
+    label: 'Spain',
+    icon: 'i-lucide-map-pin',
+    value: 'ES'
+  }]
+
+  const itemsWithDescription = items.map(item => ({ ...item, description: 'Description' }))
+
+  const props = { items }
+
+  renderEach(Listbox, [
+    // Props
+    ['with items', { props }],
+    ['with items with description', { props: { ...props, items: itemsWithDescription } }],
+    ['with modelValue', { props: { ...props, modelValue: items[0] } }],
+    ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with valueKey', { props: { ...props, valueKey: 'value', defaultValue: 'FR' } }],
+    ['with by', { props: { ...props, by: 'value', defaultValue: items[0] } }],
+    ['with labelKey', { props: { ...props, labelKey: 'value' } }],
+    ['with descriptionKey', { props: { ...props, descriptionKey: 'description' } }],
+    ['with multiple', { props: { ...props, multiple: true } }],
+    ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
+    ['with id', { props: { ...props, id: 'id' } }],
+    ['with name', { props: { ...props, name: 'name' } }],
+    ['with required', { props: { ...props, required: true } }],
+    ['with filter', { props: { ...props, filter: true } }],
+    ['with filter and placeholder', { props: { ...props, filter: { placeholder: 'Filter...' } } }],
+    ['with disabled', { props: { ...props, disabled: true } }],
+    ['with loading', { props: { ...props, loading: true } }],
+    ['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-lucide-loader' } }],
+    ['with selectedIcon', { props: { ...props, selectedIcon: 'i-lucide-check' } }],
+    ['with virtualize', { props: { ...props, virtualize: true } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
+    ['with class', { props: { ...props, class: 'max-h-64' } }],
+    ['with ui', { props: { ...props, ui: { content: 'p-2' } } }],
+    // Slots
+    ['with item slot', { props, slots: { item: () => 'Item slot' } }],
+    ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }],
+    ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }],
+    ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }],
+    ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }]
+  ])
+
+  renderEach(
+    Listbox,
+    [
+      ['with .trim modifier', { props: { ...props, modelModifiers: { trim: true } } }, { input: 'input  ', expected: 'input' }],
+      ['with .number modifier', { props: { ...props, modelModifiers: { number: true } } }, { input: '42', expected: 42 }],
+      ['with .nullable modifier', { props: { ...props, modelModifiers: { nullable: true } } }, { input: null, expected: null }],
+      ['with .optional modifier', { props: { ...props, modelModifiers: { optional: true } } }, { input: undefined, expected: undefined }]
+    ],
+    '%s works', async (_, options, spec) => {
+      const wrapper = mount(Listbox, {
+        ...options
+      })
+
+      const listbox = wrapper.findComponent({ name: 'ListboxRoot' })
+      await listbox.setValue(spec.input)
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[spec.expected]] })
+    }
+  )
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(Listbox, {
+      props: {
+        ...props,
+        modelValue: items[0]
+      },
+      attrs: {
+        ariaLabel: 'Countries'
+      }
+    })
+    expect(await axe(wrapper.element, {
+      rules: {
+        'aria-input-field-name': { enabled: false }
+      }
+    })).toHaveNoViolations()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(Listbox, { props })
+      const input = wrapper.findComponent({ name: 'ListboxRoot' })
+      await input.setValue(items[0])
+
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[items[0]]] })
+    })
+
+    test('change event', async () => {
+      const wrapper = mount(Listbox, { props })
+      const input = wrapper.findComponent({ name: 'ListboxRoot' })
+      await input.setValue(items[0])
+      expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
+    })
+  })
+
+  describe('form integration', async () => {
+    const item1 = { label: 'Option 1', value: 'opt1' }
+    const item2 = { label: 'Option 2', value: 'opt2' }
+
+    async function createForm(validateOn?: FormInputEvents[]) {
+      const wrapper = await renderForm({
+        props: {
+          validateOn,
+          validateOnInputDelay: 0,
+          async validate(state: any) {
+            if (!state.value?.some((i: any) => i.value === 'opt2'))
+              return [{ name: 'value', message: 'Error message' }]
+            return []
+          }
+        },
+        slotVars: {
+          items: [item1, item2]
+        },
+        slotTemplate: `
+        <UFormField name="value" label="Listbox">
+          <UListbox id="input" v-model="state.value" :items="items" multiple />
+        </UFormField>
+        `
+      })
+      const input = wrapper.findComponent({ name: 'ListboxRoot' })
+      return { wrapper, input }
+    }
+
+    test('validate on change works', async () => {
+      const { input, wrapper } = await createForm(['change'])
+
+      input.setValue([item1])
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue([item2])
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('validate on input works', async () => {
+      const { input, wrapper } = await createForm(['input'])
+
+      input.setValue([item1])
+      await flushPromises()
+      expect(wrapper.text()).toContain('Error message')
+
+      input.setValue([item2])
+      await flushPromises()
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
+    test('should have the correct types', () => {
+      // with object item
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [{ label: 'foo', value: 'bar' }]
+      })).toEqualTypeOf<[{ label: string, value: string }]>()
+
+      // with object item and multiple
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true
+      })).toEqualTypeOf<[{ label: string, value: number }[]]>()
+
+      // with object item and valueKey
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [{ label: 'foo', value: 'bar' }],
+        valueKey: 'value'
+      })).toEqualTypeOf<[string]>()
+
+      // with object item and multiple and valueKey
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [{ label: 'foo', value: 1 }],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[number[]]>()
+
+      // with object item and object valueKey
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [{ label: 'foo', value: { id: 1, name: 'bar' } }],
+        valueKey: 'value'
+      })).toEqualTypeOf<[{ id: number, name: string }]>()
+
+      // with groups
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [[{ label: 'foo', value: 'bar' }]]
+      })).toEqualTypeOf<[{ label: string, value: string }]>()
+
+      // with groups and multiple
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [[{ label: 'foo', value: 1 }]],
+        multiple: true
+      })).toEqualTypeOf<[{ label: string, value: number }[]]>()
+
+      // with groups, multiple and valueKey
+      expectEmitPayloadType('update:modelValue', () => Listbox({
+        items: [[{ label: 'foo', value: 'bar' }]],
+        multiple: true,
+        valueKey: 'value'
+      })).toEqualTypeOf<[string[]]>()
+    })
+  })
+})
diff --git a/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap b/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
index 604bf4497b..524d88bc61 100644
--- a/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatReasoning-vue.spec.ts.snap
@@ -70,7 +70,7 @@ exports[`ChatReasoning > renders with icon correctly 1`] = `
 
 exports[`ChatReasoning > renders with streaming correctly 1`] = `
 "<div data-state="open" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-slot="trigger" class="group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary min-w-0 transition-colors">
-    <!--v-if--><span style="--spread: 22px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking...</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg>
+    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking…</span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200"></svg>
   </button>
   <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">
     <div data-slot="body" class="max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap"></div>
diff --git a/test/components/__snapshots__/ChatReasoning.spec.ts.snap b/test/components/__snapshots__/ChatReasoning.spec.ts.snap
index cab9cbb5d8..2f17dbfa26 100644
--- a/test/components/__snapshots__/ChatReasoning.spec.ts.snap
+++ b/test/components/__snapshots__/ChatReasoning.spec.ts.snap
@@ -72,7 +72,7 @@ exports[`ChatReasoning > renders with icon correctly 1`] = `
 
 exports[`ChatReasoning > renders with streaming correctly 1`] = `
 "<div data-state="open" data-slot="root" class=""><button type="button" aria-controls="" aria-expanded="true" data-state="open" data-slot="trigger" class="group flex w-full items-center gap-1.5 text-muted text-sm disabled:cursor-default disabled:hover:text-muted hover:text-default focus-visible:outline-offset-2 focus-visible:outline-primary min-w-0 transition-colors">
-    <!--v-if--><span style="--spread: 22px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking...</span><span class="iconify i-lucide:chevron-down size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span>
+    <!--v-if--><span style="--spread: 18px; --duration: 2s;" data-slot="label" class="text-transparent bg-clip-text bg-no-repeat bg-size-[calc(200%+var(--spread)*2+2px)_100%,auto] bg-[image:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--ui-text-highlighted),#0000_calc(50%+var(--spread))),linear-gradient(var(--ui-text-muted),var(--ui-text-muted))] animate-[shimmer_var(--duration)_linear_infinite] rtl:animate-[shimmer-rtl_var(--duration)_linear_infinite] will-change-[background-position] truncate">Thinking…</span><span class="iconify i-lucide:chevron-down size-4 shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200" aria-hidden="true" data-slot="trailingIcon"></span>
   </button>
   <div data-slot="content" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-0" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px; transition-duration: 0s; animation-name: none;">
     <div data-slot="body" class="max-h-[200px] pt-2 overflow-y-auto text-sm text-dimmed whitespace-pre-wrap"></div>
diff --git a/test/components/__snapshots__/Listbox-vue.spec.ts.snap b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
new file mode 100644
index 0000000000..45a2456ab7
--- /dev/null
+++ b/test/components/__snapshots__/Listbox-vue.spec.ts.snap
@@ -0,0 +1,680 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Listbox > renders with by correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with class correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden max-h-64">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with defaultValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with descriptionKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with disabled correctly 1`] = `
+"<div dir="ltr" data-disabled="" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden opacity-75 cursor-not-allowed">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with filter and placeholder correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent md:text-sm" autocomplete="off" aria-disabled="false" value="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with filter correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent md:text-sm" autocomplete="off" aria-disabled="false" value="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with id correctly 1`] = `
+"<div dir="ltr" id="id" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-description slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-label slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-leading slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-trailing slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with items correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with items with description correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with labelKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">FR</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">DE</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">IT</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">ES</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with loading correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="loading" class="flex items-center justify-center text-muted py-6"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="loadingIcon" class="animate-spin shrink-0 size-5"></svg></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with loadingIcon correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="loading" class="flex items-center justify-center text-muted py-6"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="loadingIcon" class="animate-spin shrink-0 size-5"></svg></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with modelValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with multiple and modelValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with multiple correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with name correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with required correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with selectedIcon correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size lg correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size md correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size sm correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size xl correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size xs correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with ui correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default p-2" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with valueKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-1" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemTrailingIcon" class="shrink-0 size-5"></svg></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="itemLeadingIcon" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with virtualize correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none p-1 isolate" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 128px;"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/Listbox.spec.ts.snap b/test/components/__snapshots__/Listbox.spec.ts.snap
new file mode 100644
index 0000000000..75118f21b9
--- /dev/null
+++ b/test/components/__snapshots__/Listbox.spec.ts.snap
@@ -0,0 +1,680 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Listbox > renders with by correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with class correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden max-h-64">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with defaultValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with descriptionKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with disabled correctly 1`] = `
+"<div dir="ltr" data-disabled="" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden opacity-75 cursor-not-allowed">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" disabled="" data-disabled="" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with filter and placeholder correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Filter..." data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent md:text-sm" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with filter correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <div data-slot="root" class="relative inline-flex items-center border-b border-default"><input type="text" placeholder="Search…" data-slot="input" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent md:text-sm" autocomplete="off" aria-disabled="false" value="" aria-activedescendant="reka-listbox-item-v-0-0-1">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with id correctly 1`] = `
+"<div dir="ltr" id="id" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted="">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item slot</div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-description slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span><span data-slot="itemDescription" class="truncate text-muted">Item description slot</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-label slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Item label slot</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-leading slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted="">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked">Item leading slot<span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with item-trailing slot correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center">Item trailing slot<!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with items correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with items with description correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span><span data-slot="itemDescription" class="truncate text-muted">Description</span></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with labelKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">FR</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">DE</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">IT</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">ES</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with loading correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="loading" class="flex items-center justify-center text-muted py-6"><span class="iconify i-lucide:loader-circle animate-spin shrink-0 size-5" aria-hidden="true" data-slot="loadingIcon"></span></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with loadingIcon correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-slot="loading" class="flex items-center justify-center text-muted py-6"><span class="iconify i-lucide:loader animate-spin shrink-0 size-5" aria-hidden="true" data-slot="loadingIcon"></span></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with modelValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with multiple and modelValue correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with multiple correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with name correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with required correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with selectedIcon correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size lg correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-sm gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size md correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size sm correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-xs gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size xl correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-2 text-base gap-2" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-6" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with size xs correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1 text-xs gap-1" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-4" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with ui correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default p-2" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with valueKey correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none divide-y divide-default" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div role="group" aria-labelledby="reka-listbox-group-v-0-0-0" data-slot="group" class="p-1 isolate">
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-1" role="option" tabindex="0" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">France</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true" data-slot="itemTrailingIcon"></span></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-2" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Germany</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-3" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Italy</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+      <div data-slot="item" class="group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" id="reka-listbox-item-v-0-0-4" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:map-pin shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true" data-slot="itemLeadingIcon"></span><span data-slot="itemWrapper" class="flex-1 flex flex-col min-w-0"><span data-slot="itemLabel" class="truncate">Spain</span>
+        <!--v-if--></span><span data-slot="itemTrailing" class="ms-auto inline-flex gap-1.5 items-center"><!--v-if--></span>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Listbox > renders with virtualize correctly 1`] = `
+"<div dir="ltr" data-slot="root" class="flex flex-col min-h-0 min-w-0 ring ring-inset ring-default rounded-lg overflow-hidden">
+  <!--v-if-->
+  <div data-slot="content" class="relative overflow-y-auto flex-1 max-h-60 scroll-py-1 focus:outline-none p-1 isolate" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div data-reka-virtualizer="" style="position: relative; width: 100%; height: 128px;"></div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/utils/form.ts b/test/utils/form.ts
index 492c501187..a89593de58 100644
--- a/test/utils/form.ts
+++ b/test/utils/form.ts
@@ -17,7 +17,8 @@ import {
   USlider,
   UPinInput,
   UCheckboxGroup,
-  UFileUpload
+  UFileUpload,
+  UListbox
 } from '#components'
 
 export async function renderForm(options: {
@@ -63,7 +64,8 @@ export async function renderForm(options: {
           USlider,
           UPinInput,
           UCheckboxGroup,
-          UFileUpload
+          UFileUpload,
+          UListbox
         },
         template: options.slotTemplate
       }