docs(input-menu): update

docs/app/components/content/examples/input-menu/InputMenuFetchExample.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  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}` }
+    })) || []
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UInputMenu
+    :items="users || []"
+    :loading="status === 'pending'"
+    icon="i-heroicons-user"
+    placeholder="Select user"
+    class="w-48"
+  >
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="modelValue.avatar"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuFilterExample.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const searchTerm = ref('')
+const searchTermDebounced = refDebounced(searchTerm, 200)
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  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}` }
+    })) || []
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UInputMenu
+    v-model:search-term="searchTerm"
+    :items="users || []"
+    :loading="status === 'pending'"
+    :filter="false"
+    icon="i-heroicons-user"
+    placeholder="Select user"
+    class="w-48"
+  >
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="modelValue.avatar"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuFilterFieldsExample.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  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}` }
+    })) || []
+  },
+  lazy: true
+})
+</script>
+
+<template>
+  <UInputMenu
+    :items="users || []"
+    :loading="status === 'pending'"
+    :filter="['name', 'email']"
+    icon="i-heroicons-user"
+    placeholder="Select user"
+    class="w-80"
+  >
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="modelValue.avatar"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+
+    <template #item-label="{ item }">
+      {{ item.label }}
+
+      <span class="text-gray-500 dark:text-gray-400">
+        {{ item.email }}
+      </span>
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuIconExample.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const selected = ref('Backlog')
+</script>
+
+<template>
+  <UInputMenu
+    v-model="selected"
+    :items="items"
+    :ui="{
+      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+    }"
+  />
+</template>

docs/app/components/content/examples/input-menu/InputMenuItemsAvatarExample.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'benjamincanac',
+    value: 'benjamincanac',
+    avatar: {
+      src: 'https://github.com/benjamincanac.png',
+      alt: 'benjamincanac'
+    }
+  },
+  {
+    label: 'romhml',
+    value: 'romhml',
+    avatar: {
+      src: 'https://github.com/romhml.png',
+      alt: 'romhml'
+    }
+  },
+  {
+    label: 'noook',
+    value: 'noook',
+    avatar: {
+      src: 'https://github.com/noook.png',
+      alt: 'noook'
+    }
+  }
+])
+const selected = ref(items.value[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :items="items" class="w-40">
+    <template #leading="{ modelValue, ui }">
+      <UAvatar
+        v-if="modelValue"
+        v-bind="modelValue.avatar"
+        :size="ui.itemLeadingAvatarSize()"
+        :class="ui.itemLeadingAvatar()"
+      />
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuItemsChipExample.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'bug',
+    value: 'bug',
+    chip: {
+      color: 'red' as const
+    }
+  },
+  {
+    label: 'enhancement',
+    value: 'enhancement',
+    chip: {
+      color: 'blue' as const
+    }
+  },
+  {
+    label: 'feature',
+    value: 'feature',
+    chip: {
+      color: 'violet' as const
+    }
+  }
+])
+const selected = ref(items.value[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :items="items" class="w-40">
+    <template #leading="{ modelValue, ui }">
+      <UChip
+        v-if="modelValue"
+        v-bind="modelValue.chip"
+        inset
+        standalone
+        :size="ui.itemLeadingChipSize()"
+        :class="ui.itemLeadingChip()"
+      />
+    </template>
+  </UInputMenu>
+</template>

docs/app/components/content/examples/input-menu/InputMenuItemsIconExample.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const items = ref([
+  {
+    label: 'Backlog',
+    value: 'backlog',
+    icon: 'i-heroicons-question-mark-circle'
+  },
+  {
+    label: 'Todo',
+    value: 'todo',
+    icon: 'i-heroicons-plus-circle'
+  },
+  {
+    label: 'In Progress',
+    value: 'in_progress',
+    icon: 'i-heroicons-arrow-up-circle'
+  },
+  {
+    label: 'Done',
+    value: 'done',
+    icon: 'i-heroicons-check-circle'
+  }
+])
+const selected = ref(items.value[0])
+</script>
+
+<template>
+  <UInputMenu v-model="selected" :icon="selected?.icon" :items="items" class="w-40" />
+</template>

docs/app/components/content/examples/input-menu/InputMenuOpenExample.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const open = ref(false)
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const selected = ref('Backlog')
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UInputMenu v-model="selected" v-model:open="open" :items="items" />
+</template>

docs/app/components/content/examples/input-menu/InputMenuSearchTermExample.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const searchTerm = ref('D')
+const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
+const selected = ref('Backlog')
+</script>
+
+<template>
+  <UInputMenu v-model="selected" v-model:search-term="searchTerm" :items="items" />
+</template>

docs/content/3.components/accordion.md

@@ -153,12 +153,12 @@ hide:
   - class
 props:
   class: 'px-4'
-  trailingIcon: 'i-heroicons-plus'
+  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
   items:
     - label: 'Icons'
       icon: 'i-heroicons-face-smile'
       content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
-      trailingIcon: 'i-heroicons-arrow-down'
+      trailingIcon: 'i-heroicons-plus-20-solid'
     - label: 'Colors'
       icon: 'i-heroicons-swatch'
       content: 'Choose a primary and a gray color from your Tailwind CSS theme.'

docs/content/3.components/checkbox.md

@@ -54,7 +54,7 @@ Use the `indeterminate-icon` prop to customize the indeterminate icon. Defaults
 ---
 props:
   indeterminate: true
-  indeterminateIcon: 'i-heroicons-plus'
+  indeterminateIcon: 'i-heroicons-plus-20-solid'
 ---
 ::
 

docs/content/3.components/input-menu.md

@@ -8,15 +8,640 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputMenu.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
+
+::tip
+Use this over an [Input](/components/input) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
+::
+
+::note
+This component is similar to the [SelectMenu](/components/select-menu) but it's using an Input instead of a Select.
+::
+
+### Items
+
+Use the `items` prop as an array of strings, numbers or booleans:
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+You can also pass an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- [`type?: "label" | "separator" | "item"`{lang="ts-type"}](#with-typed-items)
+- [`icon?: string`{lang="ts-type"}](#with-icons-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"}
+- `select?(e: Event): void`{lang="ts-type"}
+
+::component-code
+---
+ignore:
+  - modelValue.label
+  - items
+external:
+  - items
+  - modelValue
+props:
+  modelValue:
+    label: 'Todo'
+  items:
+    - label: 'Backlog'
+    - label: 'Todo'
+    - label: 'In Progress'
+    - label: 'Done'
+---
+::
+
+You can also pass an array of arrays to the `items` prop to display separated groups of items.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Apple'
+  items:
+    - - Apple
+      - Banana
+      - Blueberry
+      - Grapes
+      - Pineapple
+    - - Aubergine
+      - Broccoli
+      - Carrot
+      - Courgette
+      - Leek
+---
+::
+
+### 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
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'todo'
+  valueKey: 'id'
+  items:
+    - label: 'Backlog'
+      id: 'backlog'
+    - label: 'Todo'
+      id: 'todo'
+    - label: 'In Progress'
+      id: 'in_progress'
+    - label: 'Done'
+      id: 'done'
+---
+::
+
+### Multiple
+
+Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - multiple
+external:
+  - items
+  - modelValue
+props:
+  modelValue:
+    - Backlog
+    - Todo
+  multiple: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::caution
+Ensure to pass an array to the `default-value` prop or the `v-model` directive.
+::
+
+### Delete Icon
+
+With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - multiple
+external:
+  - items
+  - modelValue
+props:
+  modelValue:
+    - Backlog
+    - Todo
+  multiple: true
+  deleteIcon: 'i-heroicons-trash'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+external:
+  - items
+props:
+  placeholder: 'Select status'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Content
+
+Use the `content` prop to control how the InputMenu content is rendered, like its `align` or `side` for example.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+items:
+  content.align:
+    - start
+    - center
+    - end
+  content.side:
+    - right
+    - left
+    - top
+    - bottom
+props:
+  modelValue: Backlog
+  content:
+    align: center
+    side: bottom
+    sideOffset: 8
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Color
+
+Use the `color` prop to change the ring color when the InputMenu is focused.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  color: gray
+  highlight: true
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  color: gray
+  variant: subtle
+  highlight: false
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  size: xl
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/components/icon) inside the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  icon: 'i-heroicons-magnifying-glass'
+  size: md
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Trailing Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
+  size: md
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
+### Selected Icon
+
+Use the `selected-icon` prop to customize the icon when an item is selected. Defaults to `i-heroicons-check-20-solid`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  selectedIcon: 'i-heroicons-fire'
+  size: md
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon on the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  loading: true
+  trailing: false
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+### Loading Icon
+
+Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroicons-arrow-path-20-solid`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - modelValue
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Backlog'
+  loading: true
+  loadingIcon: 'i-heroicons-arrow-path-rounded-square'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputMenu.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - placeholder
+external:
+  - items
+props:
+  disabled: true
+  placeholder: 'Select status'
+  items:
+    - Backlog
+    - Todo
+    - In Progress
+    - Done
+---
+::
+
 ## Examples
 
+### With typed items
+
+You can use the `type` property with `separator` to display a separator between items or `label` to display a label.
+
+::component-code
+---
+collapse: true
+ignore:
+  - modelValue
+  - items
+external:
+  - items
+  - modelValue
+props:
+  modelValue: 'Apple'
+  items:
+    - type: 'label'
+      label: 'Fruits'
+    - Apple
+    - Banana
+    - Blueberry
+    - Grapes
+    - Pineapple
+    - type: 'separator'
+    - type: 'label'
+      label: 'Vegetables'
+    - Aubergine
+    - Broccoli
+    - Carrot
+    - Courgette
+    - Leek
+---
+::
+
+### With icons in items
+
+You can use the `icon` property to display an [Icon](/components/icon) inside the items.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-items-icon-example'
+---
+::
+
+::tip
+You can also use the `#leading` slot to display the selected icon, like in the next example.
+::
+
+### With avatar in items
+
+You can use the `avatar` property to display an [Avatar](/components/avatar) inside the items.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-items-avatar-example'
+---
+::
+
+::note
+In this example, the `#leading` slot is used to display the selected avatar.
+::
+
+### With chip in items
+
+You can use the `chip` property to display a [Chip](/components/chip) inside the items.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-items-chip-example'
+---
+::
+
+::note
+In this example, the `#leading` slot is used to display the selected chip.
+::
+
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'input-menu-open-example'
+---
+::
+
+::note
+In this example, press :kbd{value="O"} to toggle the InputMenu.
+::
+
+### Control search term
+
+Use the `v-model:search-term` directive to control the search term.
+
+::component-example
+---
+name: 'input-menu-search-term-example'
+---
+::
+
+### With rotating icon
+
+Here is an example with a rotating icon that indicates the open state of the InputMenu.
+
+::component-example
+---
+name: 'input-menu-icon-example'
+---
+::
+
+### With fetched items
+
+You can fetch items from an API and use them in the InputMenu.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-fetch-example'
+---
+::
+
+### Without internal search
+
+Set the `filter` prop to `false` to disable the internal search and use your own search logic.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-filter-example'
+---
+::
+
+::note
+This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
+::
+
+### With custom search
+
+Use the `filter` prop with an array of fields to filter on.
+
+::component-example
+---
+collapse: true
+name: 'input-menu-filter-fields-example'
+---
+::
+
 ## API
 
 ### Props

docs/content/3.components/navigation-menu.md

@@ -296,7 +296,7 @@ ignore:
 external:
   - items
 props:
-  trailingIcon: 'i-heroicons-plus'
+  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
   items:
     - label: Guide
       icon: i-heroicons-book-open

docs/content/3.components/radio-group.md

@@ -25,8 +25,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'System'
   items:
@@ -49,8 +49,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'system'
   items:
@@ -81,8 +81,8 @@ ignore:
   - items
   - valueKey
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'light'
   valueKey: 'id'

docs/content/3.components/select-menu.md

@@ -15,7 +15,11 @@ links:
 Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
 
 ::tip
-Use the SelectMenu component over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
+Use this over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
+::
+
+::note
+This component is similar to the [InputMenu](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
 ::
 
 ### Items
@@ -29,8 +33,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'Backlog'
   items:
@@ -57,8 +61,8 @@ ignore:
   - modelValue.label
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue:
     label: 'Todo'
@@ -83,8 +87,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'Apple'
   items:
@@ -113,8 +117,8 @@ ignore:
   - valueKey
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'todo'
   valueKey: 'id'
@@ -142,18 +146,18 @@ ignore:
   - items
   - multiple
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue:
     - Backlog
     - Todo
+  multiple: true
   items:
     - Backlog
     - Todo
     - In Progress
     - Done
-  multiple: true
 ---
 ::
 
@@ -168,10 +172,10 @@ Use the `placeholder` prop to set a placeholder text.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
+external:
+  - items
 props:
   placeholder: 'Select status'
   items:
@@ -225,10 +229,10 @@ Use the `content` prop to control how the SelectMenu content is rendered, like i
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 items:
@@ -257,15 +261,15 @@ props:
 
 ### Color
 
-Use the `color` prop to change the ring color when the Select is focused.
+Use the `color` prop to change the ring color when the SelectMenu is focused.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -286,15 +290,15 @@ The `highlight` prop is used here to show the focus state. It's used internally
 
 ### Variant
 
-Use the `variant` prop to change the variant of the Select.
+Use the `variant` prop to change the variant of the SelectMenu.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -312,15 +316,15 @@ props:
 
 ### Size
 
-Use the `size` prop to change the size of the Select.
+Use the `size` prop to change the size of the SelectMenu.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -336,15 +340,15 @@ props:
 
 ### Icon
 
-Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
+Use the `icon` prop to show an [Icon](/components/icon) inside the SelectMenu.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -361,20 +365,20 @@ props:
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
   modelValue: 'Backlog'
-  trailingIcon: 'i-heroicons-arrow-small-right'
+  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
   size: md
   items:
     - Backlog
@@ -395,10 +399,10 @@ Use the `selected-icon` prop to customize the icon when an item is selected. Def
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -419,15 +423,15 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.che
 
 ### Loading
 
-Use the `loading` prop to show a loading icon on the Select.
+Use the `loading` prop to show a loading icon on the SelectMenu.
 
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -449,10 +453,10 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroic
 ::component-code
 ---
 prettier: true
-external:
+ignore:
   - items
   - modelValue
-ignore:
+external:
   - items
   - modelValue
 props:
@@ -473,16 +477,16 @@ You can customize this icon globally in your `app.config.ts` under `ui.icons.loa
 
 ### Disabled
 
-Use the `disabled` prop to disable the Select.
+Use the `disabled` prop to disable the SelectMenu.
 
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - placeholder
+external:
+  - items
 props:
   disabled: true
   placeholder: 'Select status'

docs/content/3.components/select.md

@@ -24,8 +24,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'Backlog'
   items:
@@ -52,8 +52,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'backlog'
   items:
@@ -81,8 +81,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'Apple'
   items:
@@ -110,8 +110,8 @@ ignore:
   - valueKey
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'backlog'
   valueKey: 'id'
@@ -134,10 +134,10 @@ Use the `placeholder` prop to set a placeholder text.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
+external:
+  - items
 props:
   placeholder: 'Select status'
   items:
@@ -159,11 +159,11 @@ The `content.align`, `content.side`, etc. properties only apply when `content.po
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 items:
   content.position:
     - 'item-aligned'
@@ -203,11 +203,11 @@ Use the `color` prop to change the ring color when the Select is focused.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   color: gray
   highlight: true
@@ -231,11 +231,11 @@ Use the `variant` prop to change the variant of the Select.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   color: gray
   variant: subtle
@@ -256,11 +256,11 @@ Use the `size` prop to change the size of the Select.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   size: xl
   defaultValue: 'Backlog'
@@ -279,11 +279,11 @@ Use the `icon` prop to show an [Icon](/components/icon) inside the Select.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   icon: 'i-heroicons-magnifying-glass'
   size: md
@@ -298,18 +298,18 @@ props:
 
 ### Trailing Icon
 
-Use the `trailing-icon` prop to customize the trailing icon. Defaults to `i-heroicons-chevron-down-20-solid`.
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon). Defaults to `i-heroicons-chevron-down-20-solid`.
 
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
-  trailingIcon: 'i-heroicons-arrow-small-right'
+  trailingIcon: 'i-heroicons-arrow-small-down-20-solid'
   size: md
   defaultValue: 'Backlog'
   items:
@@ -331,11 +331,11 @@ Use the `selected-icon` prop to customize the icon when an item is selected. Def
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   selectedIcon: 'i-heroicons-fire'
   size: md
@@ -359,11 +359,11 @@ Use the `loading` prop to show a loading icon on the Select.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   loading: true
   trailing: false
@@ -383,11 +383,11 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-heroic
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - defaultValue
+external:
+  - items
 props:
   loading: true
   loadingIcon: 'i-heroicons-arrow-path-rounded-square'
@@ -411,11 +411,11 @@ Use the `disabled` prop to disable the Select.
 ::component-code
 ---
 prettier: true
-external:
-  - items
 ignore:
   - items
   - placeholder
+external:
+  - items
 props:
   disabled: true
   placeholder: 'Select status'
@@ -440,8 +440,8 @@ ignore:
   - modelValue
   - items
 external:
-  - modelValue
   - items
+  - modelValue
 props:
   modelValue: 'Apple'
   items:

docs/nuxt.config.ts

@@ -163,6 +163,7 @@ export default defineNuxtConfig({
         'UFormField',
         'UIcon',
         'UInput',
+        'UInputMenu',
         'UKbd',
         'ULink',
         'UModal',