docs(accordion): update

docs/app/components/content/examples/accordion/AccordionContentSlotExample.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent'
+  }
+]
+</script>
+
+<template>
+  <UAccordion :items="items">
+    <template #content="{ item }">
+      <p>This is the {{ item.label }} panel.</p>
+    </template>
+  </UAccordion>
+</template>

docs/app/components/content/examples/accordion/AccordionCustomSlotExample.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch',
+    slot: 'colors',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+  }
+]
+</script>
+
+<template>
+  <UAccordion :items="items">
+    <template #colors="{ item }">
+      <p class="text-primary-500 dark:text-primary-400">
+        {{ item.content }}
+      </p>
+    </template>
+  </UAccordion>
+</template>

docs/app/components/content/examples/accordion/AccordionModelValueExample.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const items = [
+  {
+    label: 'Colors',
+    icon: 'i-heroicons-swatch',
+    content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+  },
+  {
+    label: 'Icons',
+    icon: 'i-heroicons-face-smile',
+    content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+  },
+  {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
+    content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+  }
+]
+
+const active = ref('0')
+
+// Note: This is for demonstration purposes only.
+onMounted(() => {
+  setInterval(() => {
+    active.value = String((Number(active.value) + 1) % items.length)
+  }, 2000)
+})
+</script>
+
+<template>
+  <UAccordion v-model="active" :items="items" />
+</template>

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -8,12 +8,12 @@ const items = [
   }
 ]
 
-const active = ref('1')
+const active = ref('0')
 
 // Note: This is for demonstration purposes only.
 onMounted(() => {
   setInterval(() => {
-    active.value = active.value === '0' ? '1' : '0'
+    active.value = String((Number(active.value) + 1) % items.length)
   }, 2000)
 })
 </script>

docs/content/3.components/accordion.md

@@ -1,5 +1,5 @@
 ---
-description: Display togglable accordion panels.
+description: A stacked set of collapsible panels.
 links:
   - label: Accordion
     icon: i-custom-radix-vue
@@ -11,8 +11,199 @@ links:
 
 ## Usage
 
+### Items
+
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `trailingIcon?: string`{lang="ts-type"}
+- [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- `content?: string`{lang="ts-type"}
+- `value?: string`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-code
+---
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full px-4'
+  items:
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    - label: 'Icons'
+      icon: 'i-heroicons-face-smile'
+      content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Multiple
+
+Set the `type` prop to `multiple` to allow multiple items to be active at the same time. Defaults to `single`.
+
+::component-code
+---
+ignore:
+  - type
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full px-4'
+  type: 'multiple'
+  items:
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    - label: 'Icons'
+      icon: 'i-heroicons-face-smile'
+      content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Collapsible
+
+When `type` is `single`, you can set the `collapsible` prop to `false` to prevent the active item from collapsing.
+
+::component-code
+---
+ignore:
+  - collapsible
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full px-4'
+  collapsible: false
+  items:
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    - label: 'Icons'
+      icon: 'i-heroicons-face-smile'
+      content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Disabled
+
+Use the `disabled` property to disable the Accordion.
+
+You can also disable a specific item by using the `disabled` property in the item object.
+
+::component-code
+---
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full px-4'
+  disabled: true
+  items:
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    - label: 'Icons'
+      icon: 'i-heroicons-face-smile'
+      content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      disabled: true
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+### Icon
+
+Use the `trailing-icon` prop to customize the trailing [Icon](/components/icon) of each item. Defaults to `i-heroicons-chevron-down-20-solid`.
+
+You can also set an icon for a specific item by using the `trailingIcon` property in the item object.
+
+::component-code
+---
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full px-4'
+  trailingIcon: 'i-heroicons-plus'
+  items:
+    - label: 'Colors'
+      icon: 'i-heroicons-swatch'
+      content: 'Choose a primary and a gray color from your Tailwind CSS theme.'
+    - label: 'Icons'
+      icon: 'i-heroicons-face-smile'
+      content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
+      trailingIcon: 'i-heroicons-arrow-down'
+    - label: 'Components'
+      icon: 'i-heroicons-cube-transparent'
+      content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
+---
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
+::
+
 ## Examples
 
+### Control active item(s)
+
+You can control the active item(s) by using the `default-value` prop or the `v-model` directive with the index of the item.
+
+::component-example
+---
+name: 'accordion-model-value-example'
+props:
+  class: 'w-full px-4'
+---
+::
+
+::tip
+You can also pass the `value` of one of the items if provided.
+::
+
+### With content slot
+
+Use the `#content` slot to customize the content of each item.
+
+::component-example
+---
+name: 'accordion-content-slot-example'
+props:
+  class: 'w-full px-4'
+---
+::
+
+### With custom slot
+
+Use the `slot` property to customize a specific item.
+
+::component-example
+---
+name: 'accordion-custom-slot-example'
+props:
+  class: 'w-full px-4'
+---
+::
+
 ## API
 
 ### Props

docs/nuxt.config.ts

@@ -117,6 +117,7 @@ export default defineNuxtConfig({
   hooks: {
     'components:extend': (components) => {
       const globals = components.filter(c => [
+        'UAccordion',
         'UAlert',
         'UAvatar',
         'UAvatarGroup',

src/runtime/components/Accordion.vue

@@ -10,12 +10,14 @@ const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof th
 
 const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
 
-export interface AccordionItem extends Partial<Pick<AccordionItemProps, 'disabled' | 'value'>> {
+export interface AccordionItem extends Pick<AccordionItemProps, 'disabled'> {
   label?: string
   icon?: string
   trailingIcon?: string
   slot?: string
   content?: string
+  /** A unique value for the accordion item. Defaults to the index. */
+  value?: string
 }
 
 export interface AccordionProps<T> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled'> {