From 4ffa127fc069f29407f2a5e5844e9ad18a5374ac Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 11 Mar 2025 11:05:57 +0300
Subject: [PATCH] Implemented Accordion for Volt

---
 apps/showcase/doc/accordion/ControlledDoc.vue |   4 +-
 apps/volt/assets/data/menu.json               |   4 +
 apps/volt/doc/accordion/BasicDoc.vue          |  88 ++++++++++++
 apps/volt/doc/accordion/ControlledDoc.vue     | 107 +++++++++++++++
 apps/volt/doc/accordion/DisabledDoc.vue       |  94 +++++++++++++
 apps/volt/doc/accordion/DynamicDoc.vue        |  59 ++++++++
 apps/volt/doc/accordion/ImportDoc.vue         |  14 ++
 apps/volt/doc/accordion/MultipleDoc.vue       |  88 ++++++++++++
 apps/volt/doc/accordion/TemplateDoc.vue       | 128 ++++++++++++++++++
 apps/volt/pages/accordion/index.vue           |  57 ++++++++
 apps/volt/volt/accordion/accordioncontent.vue |  30 ++++
 apps/volt/volt/accordion/accordionheader.vue  |  34 +++++
 apps/volt/volt/accordion/accordionpanel.vue   |  21 +++
 apps/volt/volt/accordion/index.vue            |  21 +++
 .../src/accordionheader/AccordionHeader.vue   |  10 +-
 15 files changed, 755 insertions(+), 4 deletions(-)
 create mode 100644 apps/volt/doc/accordion/BasicDoc.vue
 create mode 100644 apps/volt/doc/accordion/ControlledDoc.vue
 create mode 100644 apps/volt/doc/accordion/DisabledDoc.vue
 create mode 100644 apps/volt/doc/accordion/DynamicDoc.vue
 create mode 100644 apps/volt/doc/accordion/ImportDoc.vue
 create mode 100644 apps/volt/doc/accordion/MultipleDoc.vue
 create mode 100644 apps/volt/doc/accordion/TemplateDoc.vue
 create mode 100644 apps/volt/pages/accordion/index.vue
 create mode 100644 apps/volt/volt/accordion/accordioncontent.vue
 create mode 100644 apps/volt/volt/accordion/accordionheader.vue
 create mode 100644 apps/volt/volt/accordion/accordionpanel.vue
 create mode 100644 apps/volt/volt/accordion/index.vue

diff --git a/apps/showcase/doc/accordion/ControlledDoc.vue b/apps/showcase/doc/accordion/ControlledDoc.vue
index b54eede69..4cea72c41 100644
--- a/apps/showcase/doc/accordion/ControlledDoc.vue
+++ b/apps/showcase/doc/accordion/ControlledDoc.vue
@@ -178,9 +178,9 @@ export default {
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+import { ref } from 'vue';
 
-    const active = ref('0');
+const active = ref('0');
 <\/script>
 `
             }
diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 8255826af..835546727 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -22,6 +22,10 @@
             "name": "Components",
             "icon": "pi pi-compass",
             "children": [
+                {
+                    "name": "Accordion",
+                    "to": "/accordion"
+                },
                 {
                     "name": "Avatar",
                     "to": "/avatar"
diff --git a/apps/volt/doc/accordion/BasicDoc.vue b/apps/volt/doc/accordion/BasicDoc.vue
new file mode 100644
index 000000000..6126bdf92
--- /dev/null
+++ b/apps/volt/doc/accordion/BasicDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Accordion is defined using <i>AccordionPanel</i>, <i>AccordionHeader</i> and <i>AccordionContent</i> components. Each AccordionPanel must contain a unique <i>value</i> property to specify the active item.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/accordion/ControlledDoc.vue b/apps/volt/doc/accordion/ControlledDoc.vue
new file mode 100644
index 000000000..ddb720630
--- /dev/null
+++ b/apps/volt/doc/accordion/ControlledDoc.vue
@@ -0,0 +1,107 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Panels can be controlled programmatically using <i>value</i> property as a model.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+        </div>
+
+        <Accordion v-model:value="active">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const active = ref('0');
+
+const code = ref(`
+<template>
+     <div class="card">
+        <div class="flex mb-4 gap-2 justify-end">
+            <Button @click="active = '0'" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== '0'" />
+            <Button @click="active = '1'" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== '1'" />
+            <Button @click="active = '2'" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== '2'" />
+        </div>
+
+        <Accordion v-model:value="active">
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const active = ref('0');
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/accordion/DisabledDoc.vue b/apps/volt/doc/accordion/DisabledDoc.vue
new file mode 100644
index 000000000..53d8f1988
--- /dev/null
+++ b/apps/volt/doc/accordion/DisabledDoc.vue
@@ -0,0 +1,94 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enabling <i>disabled</i> property of an AccordionPanel prevents user interaction.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="3" disabled>
+                <AccordionHeader>Header IV</AccordionHeader>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="3" disabled>
+                <AccordionHeader>Header IV</AccordionHeader>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/accordion/DynamicDoc.vue b/apps/volt/doc/accordion/DynamicDoc.vue
new file mode 100644
index 000000000..28e63c508
--- /dev/null
+++ b/apps/volt/doc/accordion/DynamicDoc.vue
@@ -0,0 +1,59 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>AccordionPanel can be generated dynamically using the standard <i>v-for</i> directive.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+                <AccordionHeader>{{ tab.title }}</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">{{ tab.content }}</p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Title 1', content: 'Content 1', value: '0' },
+    { title: 'Title 2', content: 'Content 2', value: '1' },
+    { title: 'Title 3', content: 'Content 3', value: '2' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Accordion value="0">
+            <AccordionPanel v-for="tab in tabs" :key="tab.title" :value="tab.value">
+                <AccordionHeader>{{ tab.title }}</AccordionHeader>
+                <AccordionContent>
+                    <p>{{ tab.content }}</p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import { ref } from 'vue';
+
+const tabs = ref([
+    { title: 'Title 1', content: 'Content 1', value: '0' },
+    { title: 'Title 2', content: 'Content 2', value: '1' },
+    { title: 'Title 3', content: 'Content 3', value: '2' }
+]);
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/accordion/ImportDoc.vue b/apps/volt/doc/accordion/ImportDoc.vue
new file mode 100644
index 000000000..631fb0897
--- /dev/null
+++ b/apps/volt/doc/accordion/ImportDoc.vue
@@ -0,0 +1,14 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+`);
+</script>
diff --git a/apps/volt/doc/accordion/MultipleDoc.vue b/apps/volt/doc/accordion/MultipleDoc.vue
new file mode 100644
index 000000000..5c47cafc5
--- /dev/null
+++ b/apps/volt/doc/accordion/MultipleDoc.vue
@@ -0,0 +1,88 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple panels. In this case <i>value</i> needs to be an array.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Accordion :value="['0']" multiple>
+            <AccordionPanel value="0">
+                <AccordionHeader>Header I</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>Header II</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>Header III</AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/accordion/TemplateDoc.vue b/apps/volt/doc/accordion/TemplateDoc.vue
new file mode 100644
index 000000000..cd773fbb1
--- /dev/null
+++ b/apps/volt/doc/accordion/TemplateDoc.vue
@@ -0,0 +1,128 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content for a header is defined with the default slot.</p>
+    </DocSectionText>
+    <div class="card">
+        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+            <AccordionPanel value="0">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p class="m-0!">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Accordion from '@/volt/accordion';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import Avatar from '@/volt/avatar';
+import Badge from '@/volt/badge';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Accordion value="0" expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+            <AccordionPanel value="0">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="1">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+            <AccordionPanel value="2">
+                <AccordionHeader>
+                    <span class="flex items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto mr-2" />
+                    </span>
+                </AccordionHeader>
+                <AccordionContent>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionContent>
+            </AccordionPanel>
+        </Accordion>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import Badge from '@/volt/badge';
+import Accordion from '@/volt/accordion';
+import AccordionPanel from '@/volt/accordion/accordionpanel';
+import AccordionHeader from '@/volt/accordion/accordionheader';
+import AccordionContent from '@/volt/accordion/accordioncontent';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/pages/accordion/index.vue b/apps/volt/pages/accordion/index.vue
new file mode 100644
index 000000000..9be184a54
--- /dev/null
+++ b/apps/volt/pages/accordion/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in panels." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/accordion/BasicDoc.vue';
+import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
+import Disabled from '@/doc/accordion/DisabledDoc.vue';
+import DynamicDoc from '@/doc/accordion/DynamicDoc.vue';
+import ImportDoc from '@/doc/accordion/ImportDoc.vue';
+import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
+import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'multiple',
+                    label: 'Multiple',
+                    component: MultipleDoc
+                },
+                {
+                    id: 'disabled',
+                    label: 'Disabled',
+                    component: Disabled
+                },
+                {
+                    id: 'controlled',
+                    label: 'Controlled',
+                    component: ControlledDoc
+                },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/volt/accordion/accordioncontent.vue b/apps/volt/volt/accordion/accordioncontent.vue
new file mode 100644
index 000000000..9343881d7
--- /dev/null
+++ b/apps/volt/volt/accordion/accordioncontent.vue
@@ -0,0 +1,30 @@
+<template>
+    <AccordionContent
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <slot></slot>
+    </AccordionContent>
+</template>
+
+<script setup>
+import AccordionContent from 'primevue/accordioncontent';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex flex-col`,
+    content: `bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]`,
+    transition: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+        enterToClass: 'max-h-[1000px]',
+        leaveFromClass: 'max-h-[1000px]',
+        leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+        leaveToClass: 'max-h-0'
+    }
+});
+</script>
diff --git a/apps/volt/volt/accordion/accordionheader.vue b/apps/volt/volt/accordion/accordionheader.vue
new file mode 100644
index 000000000..7a65a3f80
--- /dev/null
+++ b/apps/volt/volt/accordion/accordionheader.vue
@@ -0,0 +1,34 @@
+<template>
+    <AccordionHeader
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template #toggleicon="{ active }">
+            <ChevronDown v-if="active" />
+            <ChevronUp v-else />
+        </template>
+        <slot></slot>
+    </AccordionHeader>
+</template>
+
+<script setup>
+import ChevronUp from '@primevue/icons/chevrondown';
+import ChevronDown from '@primevue/icons/chevronup';
+import AccordionHeader from 'primevue/accordionheader';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `cursor-pointer disabled:pointer-events-none disabled:opacity-60 flex items-center justify-between p-[1.125rem] font-semibold
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-500 dark:text-surface-400 
+        hover:text-surface-700 dark:hover:text-surface-0 
+        p-active:text-surface-700 dark:p-active:text-surface-0
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary`,
+    toggleicon: ``
+});
+</script>
diff --git a/apps/volt/volt/accordion/accordionpanel.vue b/apps/volt/volt/accordion/accordionpanel.vue
new file mode 100644
index 000000000..e6c68f552
--- /dev/null
+++ b/apps/volt/volt/accordion/accordionpanel.vue
@@ -0,0 +1,21 @@
+<template>
+    <AccordionPanel
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <slot></slot>
+    </AccordionPanel>
+</template>
+
+<script setup>
+import AccordionPanel from 'primevue/accordionpanel';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `flex flex-col border-b border-surface-200 dark:border-surface-700`
+});
+</script>
diff --git a/apps/volt/volt/accordion/index.vue b/apps/volt/volt/accordion/index.vue
new file mode 100644
index 000000000..577d55139
--- /dev/null
+++ b/apps/volt/volt/accordion/index.vue
@@ -0,0 +1,21 @@
+<template>
+    <Accordion
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <slot></slot>
+    </Accordion>
+</template>
+
+<script setup>
+import Accordion from 'primevue/accordion';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: ``
+});
+</script>
diff --git a/packages/primevue/src/accordionheader/AccordionHeader.vue b/packages/primevue/src/accordionheader/AccordionHeader.vue
index 90bc2dffd..7e5a75a00 100644
--- a/packages/primevue/src/accordionheader/AccordionHeader.vue
+++ b/packages/primevue/src/accordionheader/AccordionHeader.vue
@@ -1,5 +1,5 @@
 <template>
-    <component v-if="!asChild" :is="as" v-ripple :class="cx('root')" @click="onClick" v-bind="attrs">
+    <component v-if="!asChild" :is="as" v-ripple :data-p="dataP" :class="cx('root')" @click="onClick" v-bind="attrs">
         <slot :active="$pcAccordionPanel.active"></slot>
         <slot name="toggleicon" :active="$pcAccordionPanel.active" :class="cx('toggleicon')">
             <component
@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { findSingle, getAttribute, focus } from '@primeuix/utils/dom';
+import { cn } from '@primeuix/utils';
+import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
 import ChevronDownIcon from '@primevue/icons/chevrondown';
 import ChevronUpIcon from '@primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
@@ -158,6 +159,11 @@ export default {
                     active: this.$pcAccordionPanel.active
                 }
             };
+        },
+        dataP() {
+            return cn({
+                active: this.$pcAccordionPanel.active
+            });
         }
     },
     components: {