From d9b2dfd9a405f2a47a8940935b7236a48651b288 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Wed, 7 Dec 2022 22:25:16 +0400
Subject: [PATCH 01/17] feat: added basic accordion

---
 .../accordion/examples/AccordionExample.vue   | 16 +++-
 package-lock.json                             | 37 +++++--
 package.json                                  |  5 +-
 src/components/Accordion/Accordion.vue        | 96 ++++++++++---------
 src/components/Accordion/types.ts             |  8 ++
 5 files changed, 106 insertions(+), 56 deletions(-)
 create mode 100644 src/components/Accordion/types.ts

diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 4d214c1..8cfe988 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,8 +1,22 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Accordion></Accordion>
+    <Accordion :items="items" flush>
+      <div>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+      </div>
+      <div>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+        <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      </div>
+    </Accordion>
   </div>
 </template>
 <script setup>
+
+const items = [
+  { header: 'ehehe' },
+  { header: 'ehehe\'nt' },
+]
 import { Accordion } from '../../../../src/index'
 </script>
diff --git a/package-lock.json b/package-lock.json
index 1098230..8832eaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "floating-vue": "^2.0.0-beta.20",
         "flowbite": "1.5.4",
         "lodash-es": "4.17.21",
-        "tailwindcss": "3.2.4"
+        "nanoid": "4.0.0",
+        "tailwindcss": "^3"
       },
       "devDependencies": {
         "@types/lodash-es": "4.17.6",
@@ -3502,14 +3503,14 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^14 || ^16 || >=18"
       }
     },
     "node_modules/natural-compare": {
@@ -3859,6 +3860,17 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/preact": {
       "version": "10.11.3",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
@@ -7901,9 +7913,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -8074,6 +8086,13 @@
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "3.3.4",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+        }
       }
     },
     "postcss-import": {
diff --git a/package.json b/package.json
index 78f48ac..4f738b5 100644
--- a/package.json
+++ b/package.json
@@ -64,12 +64,13 @@
     "vue-tsc": "0.30.0"
   },
   "dependencies": {
-    "floating-vue": "^2.0.0-beta.20",
     "@vueuse/core": "9.3.0",
     "classnames": "2.3.2",
+    "floating-vue": "^2.0.0-beta.20",
     "flowbite": "1.5.4",
     "lodash-es": "4.17.21",
-    "tailwindcss": "3.2.4"
+    "nanoid": "4.0.0",
+    "tailwindcss": "^3"
   },
   "engines": {
     "node": "14.x",
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index b6a2780..f8f64ac 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,51 +1,37 @@
 <template>
-  <div id="accordion-collapse" data-accordion="collapse">
-    <h2 id="accordion-collapse-heading-1">
-      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 rounded-t-xl border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
-        <span>What is Flowbite?</span>
-        <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-1" class="hidden" aria-labelledby="accordion-collapse-heading-1">
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+  <div>
+    <template v-for="(item, i) in formattedItems" :key="item.id">
+      <h2>
+        <button
+          type="button"
+          class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+          :class="{'rounded-t-xl border-b-0': i === 0}"
+          @click="toggleItem(item)"
+        >
+          <span>{{item.header}}</span>
+          <svg
+            data-accordion-icon
+            class="w-6 h-6 shrink-0"
+            :class="{'rotate-180': item.isVisible}"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
+          </svg>
+        </button>
+      </h2>
+      <div :class="{hidden: !item.isVisible}" class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+        <slot />
       </div>
-    </div>
-    <h2 id="accordion-collapse-heading-2">
-      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
-        <span>Is there a Figma file available?</span>
-        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
-      <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-      </div>
-    </div>
-    <h2 id="accordion-collapse-heading-3">
-      <button type="button" class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
-        <span>What are the differences between Flowbite and Tailwind UI?</span>
-        <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-      </button>
-    </h2>
-    <div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
-      <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
-        <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
-        <ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
-          <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
-          <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
-        </ul>
-      </div>
-    </div>
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, toRefs } from 'vue'
+import { ref } from 'vue'
 import type { PropType } from 'vue'
+import { nanoid } from 'nanoid'
+import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types'
 
 const props = defineProps({
   alwaysOpen: {
@@ -56,8 +42,8 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  children: {
-    type: Array,
+  items: {
+    type: Array as PropType<AccordionItem[]>,
     default() {
       return []
     },
@@ -68,4 +54,26 @@ const props = defineProps({
   },
 })
 
+const formattedItems = ref<AccordionTransformedItem[]>(props.items.map((item, i) => ({ ...item, id: nanoid(), isVisible: i === 0 })))
+
+const commonToggleItem = (selectedItem: AccordionTransformedItem) => {
+  const isSelectedVisible = selectedItem.isVisible
+  formattedItems.value = formattedItems.value.map((item) => {
+    if (item.id !== selectedItem.id) return { ...item, isVisible: false }
+    return { ...item, isVisible: !isSelectedVisible }
+  })
+}
+const alwaysOpenToggleItem = (selectedItem: AccordionTransformedItem) => {
+  selectedItem.isVisible = !selectedItem.isVisible
+}
+const flushToggleItem = (selectedItem: AccordionTransformedItem) => {
+  const isSelectedVisible = selectedItem.isVisible
+  if (isSelectedVisible) return
+  commonToggleItem(selectedItem)
+}
+const toggleItem = (selectedItem: AccordionTransformedItem) => {
+  if (props.alwaysOpen) return alwaysOpenToggleItem(selectedItem)
+  if (props.flush) return flushToggleItem(selectedItem)
+  commonToggleItem(selectedItem)
+}
 </script>
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
new file mode 100644
index 0000000..58bd9a2
--- /dev/null
+++ b/src/components/Accordion/types.ts
@@ -0,0 +1,8 @@
+export type AccordionItem = {
+  header: string
+  icon?: string
+}
+export interface AccordionTransformedItem extends AccordionItem {
+  id: string
+  isVisible: boolean
+}

From c78a56810b0901cf2af1d5d9426a19fb3942320e Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Thu, 8 Dec 2022 10:20:54 +0400
Subject: [PATCH 02/17] feat: added option to pass classes to header and
 content

---
 .../accordion/examples/AccordionExample.vue      |  2 +-
 src/components/Accordion/Accordion.vue           | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 8cfe988..d5f98bf 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Accordion :items="items" flush>
+    <Accordion :items="items" content-classes="bg-red-100">
       <div>
         <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
         <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index f8f64ac..ff712b5 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -4,8 +4,11 @@
       <h2>
         <button
           type="button"
+          :class="[
+            { 'rounded-t-xl border-b-0': i === 0 },
+            headerClasses
+          ]"
           class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-          :class="{'rounded-t-xl border-b-0': i === 0}"
           @click="toggleItem(item)"
         >
           <span>{{item.header}}</span>
@@ -21,7 +24,10 @@
           </svg>
         </button>
       </h2>
-      <div :class="{hidden: !item.isVisible}" class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
+      <div
+        :class="[ { hidden: !item.isVisible }, contentClasses ]"
+        class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+      >
         <slot />
       </div>
     </template>
@@ -38,7 +44,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  arrowIcon: {
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  contentClasses: {
     type: String,
     default: '',
   },

From c76cab7a17712891e98f571d010e327e4c744b8e Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Thu, 8 Dec 2022 22:49:11 +0400
Subject: [PATCH 03/17] feat: added accordion docs

---
 docs/components/accordion/accordion.md        | 145 +++++++++++++++++-
 .../examples/AccordionAlwaysOpenExample.vue   |  27 ++++
 .../accordion/examples/AccordionExample.vue   |  43 +++---
 .../examples/AccordionFlushExample.vue        |  27 ++++
 .../AccordionStyledHeadersExample.vue         |  27 ++++
 src/components/Accordion/Accordion.vue        |   2 +-
 6 files changed, 248 insertions(+), 23 deletions(-)
 create mode 100644 docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
 create mode 100644 docs/components/accordion/examples/AccordionFlushExample.vue
 create mode 100644 docs/components/accordion/examples/AccordionStyledHeadersExample.vue

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 3ed9fa6..650d1fc 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -1,15 +1,154 @@
 <script setup>
-import AccordionExample from './examples/AccordionExample.vue'
+import AccordionExample from './examples/AccordionExample.vue';
+import AccordionAlwaysOpenExample from './examples/AccordionAlwaysOpenExample.vue';
+import AccordionFlushExample from './examples/AccordionFlushExample.vue';
+import AccordionStyledHeadersExample from './examples/AccordionStyledHeadersExample.vue';
 </script>
 # Vue Accordion Component - Flowbite
 
+#### Use Tailwind CSS accordion component to show expanding content
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/accordion/](https://flowbite.com/docs/components/accordion/)
+:::
+
+## Default accordion
+Use this example to basic accordion. 
 ```vue
 <script setup>
-import { Accordion } from 'flowbite-vue'
+import { Accordion } from 'flowbite'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
 </script>
+
 <template>
-  <Accordion></Accordion>
+  <Accordion :items="items">
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
 </template>
+
 ```
 
 <AccordionExample />
+
+## Always open accordion
+Always open prop to makes accordion able to open multiple elements.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" always-open>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
+
+```
+
+<AccordionAlwaysOpenExample />
+
+## Flush accordion
+Flush prop makes opened tab being not able to close.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" flush>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
+
+```
+
+<AccordionFlushExample />
+
+## Styling accordion
+You can style headers with `header-classes` prop and content containers with `content-classes` props by pass tailwind classes.
+```vue
+<script setup>
+import { Accordion } from 'flowbite'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" header-classes="bg-blue-800">
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
+
+```
+
+<AccordionStyledHeadersExample />
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
new file mode 100644
index 0000000..962c199
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" always-open>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index d5f98bf..556a382 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,22 +1,27 @@
-<template>
-  <div class="vp-raw flex flex-col">
-    <Accordion :items="items" content-classes="bg-red-100">
-      <div>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-      </div>
-      <div>
-        <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-        <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-      </div>
-    </Accordion>
-  </div>
-</template>
 <script setup>
-
-const items = [
-  { header: 'ehehe' },
-  { header: 'ehehe\'nt' },
-]
 import { Accordion } from '../../../../src/index'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
 </script>
+
+<template>
+  <Accordion :items="items">
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
new file mode 100644
index 0000000..e277b16
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" flush>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
new file mode 100644
index 0000000..224cd84
--- /dev/null
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -0,0 +1,27 @@
+<script setup>
+import { Accordion } from '../../../../src/index'
+import { ref } from 'vue'
+
+const items = ref([
+  { header: 'header' },
+  { header: 'another header' },
+  { header: 'and one more header' },
+])
+</script>
+
+<template>
+  <Accordion :items="items" header-classes="bg-blue-800">
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+    <div>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+    </div>
+  </Accordion>
+</template>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index ff712b5..7445e11 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vp-raw flex flex-col">
     <template v-for="(item, i) in formattedItems" :key="item.id">
       <h2>
         <button

From beb6efaa8a3134545bb0e584c95a4d01760a3d08 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Fri, 9 Dec 2022 22:38:53 +0400
Subject: [PATCH 04/17] chore: replaced positioning styles

---
 src/components/Accordion/Accordion.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index 7445e11..d40592b 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw flex flex-col">
+  <div class="vp-raw">
     <template v-for="(item, i) in formattedItems" :key="item.id">
       <h2>
         <button
@@ -8,10 +8,10 @@
             { 'rounded-t-xl border-b-0': i === 0 },
             headerClasses
           ]"
-          class="flex justify-between items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+          class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
           @click="toggleItem(item)"
         >
-          <span>{{item.header}}</span>
+          <span class="w-full">{{item.header}}</span>
           <svg
             data-accordion-icon
             class="w-6 h-6 shrink-0"

From 93e863f02cc07826627e1c30474bbec4a0064b1f Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 00:05:01 +0400
Subject: [PATCH 05/17] refactor: refactored accordion

---
 docs/components/accordion/accordion.md        | 186 ++++++++++++------
 .../examples/AccordionAlwaysOpenExample.vue   |  62 ++++--
 .../accordion/examples/AccordionExample.vue   |  62 ++++--
 .../examples/AccordionFlushExample.vue        |  62 ++++--
 .../AccordionStyledHeadersExample.vue         |  62 ++++--
 src/components/Accordion/Accordion.vue        |  80 +-------
 src/components/Accordion/AccordionContent.vue |  20 ++
 src/components/Accordion/AccordionHeader.vue  |  63 ++++++
 src/components/Accordion/AccordionPanel.vue   |  31 +++
 .../composables/useAccordionState.ts          |  27 +++
 src/components/Accordion/types.ts             |  20 +-
 11 files changed, 467 insertions(+), 208 deletions(-)
 create mode 100644 src/components/Accordion/AccordionContent.vue
 create mode 100644 src/components/Accordion/AccordionHeader.vue
 create mode 100644 src/components/Accordion/AccordionPanel.vue
 create mode 100644 src/components/Accordion/composables/useAccordionState.ts

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 650d1fc..a4eb653 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -53,29 +53,53 @@ Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" always-open>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
@@ -88,29 +112,53 @@ Flush prop makes opened tab being not able to close.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" flush>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
@@ -123,29 +171,53 @@ You can style headers with `header-classes` prop and content containers with `co
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" header-classes="bg-blue-800">
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header class="bg-blue-800">another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
index 962c199..c2a031f 100644
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" always-open>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion always-open>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 556a382..b378b4d 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items">
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
index e277b16..458cdb6 100644
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" flush>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
index 224cd84..f54e5f4 100644
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -1,27 +1,51 @@
 <script setup>
 import { Accordion } from '../../../../src/index'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items" header-classes="bg-blue-800">
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion flush>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header class="bg-blue-800">another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index d40592b..a47c3b7 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -1,89 +1,29 @@
 <template>
   <div class="vp-raw">
-    <template v-for="(item, i) in formattedItems" :key="item.id">
-      <h2>
-        <button
-          type="button"
-          :class="[
-            { 'rounded-t-xl border-b-0': i === 0 },
-            headerClasses
-          ]"
-          class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
-          @click="toggleItem(item)"
-        >
-          <span class="w-full">{{item.header}}</span>
-          <svg
-            data-accordion-icon
-            class="w-6 h-6 shrink-0"
-            :class="{'rotate-180': item.isVisible}"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
-          </svg>
-        </button>
-      </h2>
-      <div
-        :class="[ { hidden: !item.isVisible }, contentClasses ]"
-        class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
-      >
-        <slot />
-      </div>
-    </template>
+    <slot :accordionId="accordionId"/>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { PropType } from 'vue'
+import { provide } from 'vue'
 import { nanoid } from 'nanoid'
-import type { AccordionItem, AccordionTransformedItem } from '@/components/Accordion/types'
+import type { tAccordionMode } from '@/components/Accordion/types'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
 const props = defineProps({
   alwaysOpen: {
     type: Boolean,
     default: false,
   },
-  headerClasses: {
-    type: String,
-    default: '',
-  },
-  contentClasses: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array as PropType<AccordionItem[]>,
-    default() {
-      return []
-    },
-  },
   flush: {
     type: Boolean,
     default: false,
   },
 })
 
-const formattedItems = ref<AccordionTransformedItem[]>(props.items.map((item, i) => ({ ...item, id: nanoid(), isVisible: i === 0 })))
-
-const commonToggleItem = (selectedItem: AccordionTransformedItem) => {
-  const isSelectedVisible = selectedItem.isVisible
-  formattedItems.value = formattedItems.value.map((item) => {
-    if (item.id !== selectedItem.id) return { ...item, isVisible: false }
-    return { ...item, isVisible: !isSelectedVisible }
-  })
-}
-const alwaysOpenToggleItem = (selectedItem: AccordionTransformedItem) => {
-  selectedItem.isVisible = !selectedItem.isVisible
-}
-const flushToggleItem = (selectedItem: AccordionTransformedItem) => {
-  const isSelectedVisible = selectedItem.isVisible
-  if (isSelectedVisible) return
-  commonToggleItem(selectedItem)
-}
-const toggleItem = (selectedItem: AccordionTransformedItem) => {
-  if (props.alwaysOpen) return alwaysOpenToggleItem(selectedItem)
-  if (props.flush) return flushToggleItem(selectedItem)
-  commonToggleItem(selectedItem)
-}
+const accordionId = nanoid()
+provide('accordionId', accordionId)
+let mode: tAccordionMode = 'default'
+if (props.alwaysOpen) mode = 'alwaysOpen'
+if (props.flush) mode = 'flush'
+useAccordionState(accordionId, mode)
 </script>
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
new file mode 100644
index 0000000..9325428
--- /dev/null
+++ b/src/components/Accordion/AccordionContent.vue
@@ -0,0 +1,20 @@
+<template>
+  <div
+      :class="{ hidden: !panelState.isVisible }"
+      class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { computed, inject } from 'vue'
+
+const accordionId: any = inject('accordionId')
+const panelId: any = inject('panelId')
+
+const { accordionsStates } = useAccordionState()
+
+const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+</script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
new file mode 100644
index 0000000..20e00ce
--- /dev/null
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+      type="button"
+      @click="toggleItem"
+      :class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }"
+      class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+  >
+    <span class="w-full"><slot /></span>
+    <svg
+        data-accordion-icon
+        class="w-6 h-6 shrink-0"
+        :class="{'rotate-180': panelState.isVisible}"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path>
+    </svg>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { computed, inject, provide } from 'vue'
+
+
+const accordionId: any = inject('accordionId')
+const panelId: any = inject('panelId')
+
+const accordionState = computed(() => {
+  return accordionsStates[accordionId]
+})
+
+const commonToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  const isSelectedVisible = selectedPanel.isVisible
+  for (const panelIndex in accordionState.value.panels) {
+    const panel = accordionState.value.panels[panelIndex]
+    if (panel.id !== panelId) panel.isVisible = false
+    else panel.isVisible = !isSelectedVisible
+  }
+}
+const alwaysOpenToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  selectedPanel.isVisible = !selectedPanel.isVisible
+}
+const flushToggleItem = () => {
+  const selectedPanel = accordionState.value.panels[panelId]
+  if (selectedPanel.isVisible) return
+  commonToggleItem()
+}
+const toggleItem = () => {
+  const actionsMap = {
+    flush: flushToggleItem,
+    alwaysOpen: alwaysOpenToggleItem,
+    default: commonToggleItem,
+  }
+  actionsMap[accordionState.value.mode]()
+}
+
+const { accordionsStates } = useAccordionState()
+const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+</script>
diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/Accordion/AccordionPanel.vue
new file mode 100644
index 0000000..109e6af
--- /dev/null
+++ b/src/components/Accordion/AccordionPanel.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <slot name="header" @click="toggleItem"/>
+    <slot name="content"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeMount, provide } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import { nanoid } from 'nanoid'
+
+const { accordionsStates } = useAccordionState()
+
+const panelId = nanoid()
+const accordionId: any = inject('accordionId')
+provide('panelId', panelId)
+
+const accordionState = computed(() => {
+  return accordionsStates[accordionId]
+})
+
+onBeforeMount(() => {
+  const panelsCount = Object.keys(accordionState.value.panels).length
+  accordionState.value.panels[panelId] = {
+    id: panelId,
+    order: panelsCount,
+    isVisible: !panelsCount,
+  }
+})
+</script>
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
new file mode 100644
index 0000000..306e7f8
--- /dev/null
+++ b/src/components/Accordion/composables/useAccordionState.ts
@@ -0,0 +1,27 @@
+import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
+import type { tAccordionMode, tState } from '@/components/Accordion/types'
+
+const accordionsStates = reactive<tState>({})
+export function useAccordionState(id?: string, mode?: tAccordionMode): {
+  accordionsStates: tState
+} {
+
+  onBeforeMount(() => {
+    if (!id) return
+    accordionsStates[id] = {
+      id: id,
+      mode: mode ? mode : 'default',
+      panels: {},
+    }
+  })
+  onBeforeUnmount(() => {
+    if (!id) return
+    delete accordionsStates[id]
+  })
+
+  return {
+    accordionsStates,
+  }
+}
+
+
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
index 58bd9a2..ffc4a72 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/Accordion/types.ts
@@ -1,8 +1,18 @@
-export type AccordionItem = {
-  header: string
-  icon?: string
-}
-export interface AccordionTransformedItem extends AccordionItem {
+export type tAccordionMode = 'flush' | 'alwaysOpen' | 'default'
+export type tAccordionPanel = {
+  order: number
   id: string
   isVisible: boolean
 }
+type tAccordionPanels = {
+  [key: string]: tAccordionPanel
+}
+type tStateElement = {
+  id: string,
+  mode: tAccordionMode
+
+  panels: tAccordionPanels
+}
+export type tState = {
+  [key: string]: tStateElement
+}

From 13be6cc7bca4f738f7f82bb4eaa72f0f62196c47 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 00:15:09 +0400
Subject: [PATCH 06/17] fix: fixed borders

---
 src/components/Accordion/AccordionContent.vue | 11 ++++++++---
 src/components/Accordion/AccordionHeader.vue  |  8 ++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index 9325428..bad3b60 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -1,7 +1,11 @@
 <template>
   <div
-      :class="{ hidden: !panelState.isVisible }"
-      class="p-5 border [&:not(:last-item)]:border-b-0 last:border-t-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+    :class="{
+      hidden: !panelState.isVisible,
+      'border-b-0': panelState.order !== panelsCount - 1,
+      'border-t-0': panelState.order === panelsCount - 1,
+    }"
+    class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   >
     <slot />
   </div>
@@ -14,7 +18,8 @@ import { computed, inject } from 'vue'
 const accordionId: any = inject('accordionId')
 const panelId: any = inject('panelId')
 
-const { accordionsStates } = useAccordionState()
 
+const { accordionsStates } = useAccordionState()
 const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 </script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index 20e00ce..1bc5c0d 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -2,7 +2,10 @@
   <button
       type="button"
       @click="toggleItem"
-      :class="{ 'rounded-t-xl border-b-0': panelState.order === 0 }"
+      :class="{
+        'rounded-t-xl': panelState.order === 0,
+        'border-b-0': panelState.order !== panelsCount - 1,
+        }"
       class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
   >
     <span class="w-full"><slot /></span>
@@ -21,7 +24,7 @@
 
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, inject, provide } from 'vue'
+import { computed, inject } from 'vue'
 
 
 const accordionId: any = inject('accordionId')
@@ -30,6 +33,7 @@ const panelId: any = inject('panelId')
 const accordionState = computed(() => {
   return accordionsStates[accordionId]
 })
+const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 
 const commonToggleItem = () => {
   const selectedPanel = accordionState.value.panels[panelId]

From a2565704e2740687435f74470f775eff8e273b7e Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 00:18:18 +0400
Subject: [PATCH 07/17] doc: complemented docs

---
 docs/components/accordion/accordion.md | 64 ++++++++++++++++++--------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index a4eb653..0956362 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -18,29 +18,53 @@ Use this example to basic accordion.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import { ref } from 'vue'
+import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
+import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
+import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 
-const items = ref([
-  { header: 'header' },
-  { header: 'another header' },
-  { header: 'and one more header' },
-])
 </script>
 
 <template>
-  <Accordion :items="items">
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
-    <div>
-      <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-    </div>
+  <Accordion>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>another header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
+    <accordion-panel>
+      <template #header>
+        <accordion-header>and one more header</accordion-header>
+      </template>
+      <template #content>
+        <accordion-content>
+          <div>
+            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+          </div>
+        </accordion-content>
+      </template>
+    </accordion-panel>
   </Accordion>
 </template>
 
@@ -167,7 +191,7 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 <AccordionFlushExample />
 
 ## Styling accordion
-You can style headers with `header-classes` prop and content containers with `content-classes` props by pass tailwind classes.
+You can style accordion content and headers by passing tailwind classes into them.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'

From 5cc84883bd94d7873d69396ff05c39978646019a Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 02:08:39 +0400
Subject: [PATCH 08/17] chore: removed undefined method

---
 src/components/Accordion/AccordionPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/Accordion/AccordionPanel.vue
index 109e6af..2fdd374 100644
--- a/src/components/Accordion/AccordionPanel.vue
+++ b/src/components/Accordion/AccordionPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <slot name="header" @click="toggleItem"/>
+    <slot name="header"/>
     <slot name="content"/>
   </div>
 </template>

From 02970f7158840d2a68c1db784515b797140d5cd1 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 11:18:32 +0400
Subject: [PATCH 09/17] fix: properly flush logic

---
 src/components/Accordion/Accordion.vue        |  6 +-----
 src/components/Accordion/AccordionContent.vue |  3 +++
 src/components/Accordion/AccordionHeader.vue  | 20 +++++--------------
 .../composables/useAccordionState.ts          |  5 +++--
 src/components/Accordion/types.ts             |  3 ++-
 5 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/src/components/Accordion/Accordion.vue b/src/components/Accordion/Accordion.vue
index a47c3b7..cdf0f17 100644
--- a/src/components/Accordion/Accordion.vue
+++ b/src/components/Accordion/Accordion.vue
@@ -6,7 +6,6 @@
 <script lang="ts" setup>
 import { provide } from 'vue'
 import { nanoid } from 'nanoid'
-import type { tAccordionMode } from '@/components/Accordion/types'
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 
 const props = defineProps({
@@ -22,8 +21,5 @@ const props = defineProps({
 
 const accordionId = nanoid()
 provide('accordionId', accordionId)
-let mode: tAccordionMode = 'default'
-if (props.alwaysOpen) mode = 'alwaysOpen'
-if (props.flush) mode = 'flush'
-useAccordionState(accordionId, mode)
+useAccordionState(accordionId, { ...props })
 </script>
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index bad3b60..85d0af1 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -4,6 +4,7 @@
       hidden: !panelState.isVisible,
       'border-b-0': panelState.order !== panelsCount - 1,
       'border-t-0': panelState.order === panelsCount - 1,
+      'border-x-0': accordionState.flush,
     }"
     class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
   >
@@ -20,6 +21,8 @@ const panelId: any = inject('panelId')
 
 
 const { accordionsStates } = useAccordionState()
+
+const accordionState = computed(() => accordionsStates[accordionId])
 const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
 const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 </script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index 1bc5c0d..017af7c 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -3,8 +3,9 @@
       type="button"
       @click="toggleItem"
       :class="{
-        'rounded-t-xl': panelState.order === 0,
+        'rounded-t-xl': panelState.order === 0 && !accordionState.flush,
         'border-b-0': panelState.order !== panelsCount - 1,
+        'border-x-0': accordionState.flush,
         }"
       class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
   >
@@ -30,9 +31,7 @@ import { computed, inject } from 'vue'
 const accordionId: any = inject('accordionId')
 const panelId: any = inject('panelId')
 
-const accordionState = computed(() => {
-  return accordionsStates[accordionId]
-})
+const accordionState = computed(() => accordionsStates[accordionId])
 const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
 
 const commonToggleItem = () => {
@@ -48,18 +47,9 @@ const alwaysOpenToggleItem = () => {
   const selectedPanel = accordionState.value.panels[panelId]
   selectedPanel.isVisible = !selectedPanel.isVisible
 }
-const flushToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  if (selectedPanel.isVisible) return
-  commonToggleItem()
-}
 const toggleItem = () => {
-  const actionsMap = {
-    flush: flushToggleItem,
-    alwaysOpen: alwaysOpenToggleItem,
-    default: commonToggleItem,
-  }
-  actionsMap[accordionState.value.mode]()
+  if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
+  commonToggleItem()
 }
 
 const { accordionsStates } = useAccordionState()
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
index 306e7f8..89b13f6 100644
--- a/src/components/Accordion/composables/useAccordionState.ts
+++ b/src/components/Accordion/composables/useAccordionState.ts
@@ -2,7 +2,7 @@ import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
 import type { tAccordionMode, tState } from '@/components/Accordion/types'
 
 const accordionsStates = reactive<tState>({})
-export function useAccordionState(id?: string, mode?: tAccordionMode): {
+export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {
   accordionsStates: tState
 } {
 
@@ -10,7 +10,8 @@ export function useAccordionState(id?: string, mode?: tAccordionMode): {
     if (!id) return
     accordionsStates[id] = {
       id: id,
-      mode: mode ? mode : 'default',
+      flush: options?.flush ?? false,
+      alwaysOpen: options?.alwaysOpen ?? false,
       panels: {},
     }
   })
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
index ffc4a72..e10045c 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/Accordion/types.ts
@@ -9,7 +9,8 @@ type tAccordionPanels = {
 }
 type tStateElement = {
   id: string,
-  mode: tAccordionMode
+  flush: boolean,
+  alwaysOpen: boolean,
 
   panels: tAccordionPanels
 }

From bf759f1ba7248576a9b08757b562efb804aaf640 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 11:34:31 +0400
Subject: [PATCH 10/17] chore: more pure code

---
 src/components/Accordion/AccordionContent.vue | 2 +-
 src/components/Accordion/AccordionHeader.vue  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index 85d0af1..dae8521 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -2,7 +2,7 @@
   <div
     :class="{
       hidden: !panelState.isVisible,
-      'border-b-0': panelState.order !== panelsCount - 1,
+      'border-b-0': panelState.order !== panelsCount - 1 || accordionState.flush,
       'border-t-0': panelState.order === panelsCount - 1,
       'border-x-0': accordionState.flush,
     }"
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index 017af7c..d2d7d84 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -4,7 +4,8 @@
       @click="toggleItem"
       :class="{
         'rounded-t-xl': panelState.order === 0 && !accordionState.flush,
-        'border-b-0': panelState.order !== panelsCount - 1,
+        'border-t-0': panelState.order === 0 && accordionState.flush,
+        'border-b-0': isBottomBorderVisibleForFlush,
         'border-x-0': accordionState.flush,
         }"
       class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
@@ -33,6 +34,10 @@ const panelId: any = inject('panelId')
 
 const accordionState = computed(() => accordionsStates[accordionId])
 const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
+const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
+const isBottomBorderVisibleForFlush = computed(() =>
+    isPanelLast.value ||
+    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
 
 const commonToggleItem = () => {
   const selectedPanel = accordionState.value.panels[panelId]

From 5c59b6813d7d577e08a8fe6637f413562c4d4bb0 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 11:34:44 +0400
Subject: [PATCH 11/17] doc: new doc for flush

---
 docs/components/accordion/accordion.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 0956362..1ba90ec 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -132,7 +132,7 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 <AccordionAlwaysOpenExample />
 
 ## Flush accordion
-Flush prop makes opened tab being not able to close.
+Flush prop removes side borders, and rounded corners
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'

From e4b31bcfb23a953bbd8cc241763c67255c6a4fda Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 23:01:35 +0400
Subject: [PATCH 12/17] refactor: refactored classes logic

---
 docs/.vitepress/config.ts                     |   2 +-
 docs/components/accordion/accordion.md        | 244 +++++++-----------
 .../examples/AccordionAlwaysOpenExample.vue   |  54 ++--
 .../accordion/examples/AccordionExample.vue   |  54 ++--
 .../examples/AccordionFlushExample.vue        |  54 ++--
 .../AccordionStyledHeadersExample.vue         |  56 ++--
 src/components/Accordion/AccordionContent.vue |  21 +-
 src/components/Accordion/AccordionHeader.vue  |  39 +--
 src/components/Accordion/AccordionPanel.vue   |   6 +-
 .../composables/useAccordionContentClasses.ts |  29 +++
 .../composables/useAccordionHeaderClasses.ts  |  35 +++
 .../composables/useAccordionState.ts          |   2 +-
 12 files changed, 268 insertions(+), 328 deletions(-)
 create mode 100644 src/components/Accordion/composables/useAccordionContentClasses.ts
 create mode 100644 src/components/Accordion/composables/useAccordionHeaderClasses.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b52fef6..6638a8e 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -51,7 +51,7 @@ function getComponents() {
     { text: 'Modal', link: 'components/modal/modal.md' },
     { text: 'Navbar', link: 'components/navbar/navbar.md' },
 
-    { text: '- Accordion', link: 'components/accordion/accordion.md' },
+    { text: 'Accordion', link: 'components/accordion/accordion.md' },
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },
diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 1ba90ec..9f52f6d 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -18,52 +18,40 @@ Use this example to basic accordion.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
+import AccordionPanel from 'flowbite'
+import AccordionHeader from 'flowbite'
+import AccordionContent from 'flowbite'
 
 </script>
 
 <template>
   <Accordion>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
@@ -77,52 +65,40 @@ Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
+import AccordionPanel from 'flowbite'
+import AccordionHeader from 'flowbite'
+import AccordionContent from 'flowbite'
 
 </script>
 
 <template>
-  <Accordion>
+  <Accordion always-open>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
@@ -136,52 +112,40 @@ Flush prop removes side borders, and rounded corners
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
+import AccordionPanel from 'flowbite'
+import AccordionHeader from 'flowbite'
+import AccordionContent from 'flowbite'
 
 </script>
 
 <template>
   <Accordion flush>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
@@ -195,52 +159,40 @@ You can style accordion content and headers by passing tailwind classes into the
 ```vue
 <script setup>
 import { Accordion } from 'flowbite'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
+import AccordionPanel from 'flowbite'
+import AccordionHeader from 'flowbite'
+import AccordionContent from 'flowbite'
 
 </script>
 
 <template>
-  <Accordion flush>
+  <Accordion >
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header class="bg-blue-800">another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
index c2a031f..5175917 100644
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 <template>
   <Accordion always-open>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index b378b4d..5c74b27 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 <template>
   <Accordion>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
index 458cdb6..5bb3f7b 100644
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -9,43 +9,31 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 <template>
   <Accordion flush>
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
index f54e5f4..4674045 100644
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -7,45 +7,33 @@ import AccordionContent from '@/components/Accordion/AccordionContent.vue'
 </script>
 
 <template>
-  <Accordion flush>
+  <Accordion >
     <accordion-panel>
-      <template #header>
-        <accordion-header>header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header class="bg-blue-800">another header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header class="bg-pink-200 dark:bg-pink-900 dark:text-gray-50">another header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
     <accordion-panel>
-      <template #header>
-        <accordion-header>and one more header</accordion-header>
-      </template>
-      <template #content>
-        <accordion-content>
-          <div>
-            <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-            <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
-          </div>
-        </accordion-content>
-      </template>
+      <accordion-header>and one more header</accordion-header>
+      <accordion-content>
+        <div>
+          <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
+          <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+        </div>
+      </accordion-content>
     </accordion-panel>
   </Accordion>
 </template>
diff --git a/src/components/Accordion/AccordionContent.vue b/src/components/Accordion/AccordionContent.vue
index dae8521..b55e754 100644
--- a/src/components/Accordion/AccordionContent.vue
+++ b/src/components/Accordion/AccordionContent.vue
@@ -1,28 +1,13 @@
 <template>
   <div
-    :class="{
-      hidden: !panelState.isVisible,
-      'border-b-0': panelState.order !== panelsCount - 1 || accordionState.flush,
-      'border-t-0': panelState.order === panelsCount - 1,
-      'border-x-0': accordionState.flush,
-    }"
-    class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900"
+    :class="contentClasses"
   >
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
-import { computed, inject } from 'vue'
+import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
 
-const accordionId: any = inject('accordionId')
-const panelId: any = inject('panelId')
-
-
-const { accordionsStates } = useAccordionState()
-
-const accordionState = computed(() => accordionsStates[accordionId])
-const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
-const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
+const { contentClasses } = useAccordionContentClasses()
 </script>
diff --git a/src/components/Accordion/AccordionHeader.vue b/src/components/Accordion/AccordionHeader.vue
index d2d7d84..60d4442 100644
--- a/src/components/Accordion/AccordionHeader.vue
+++ b/src/components/Accordion/AccordionHeader.vue
@@ -2,19 +2,12 @@
   <button
       type="button"
       @click="toggleItem"
-      :class="{
-        'rounded-t-xl': panelState.order === 0 && !accordionState.flush,
-        'border-t-0': panelState.order === 0 && accordionState.flush,
-        'border-b-0': isBottomBorderVisibleForFlush,
-        'border-x-0': accordionState.flush,
-        }"
-      class="flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+      :class="headerClasses"
   >
     <span class="w-full"><slot /></span>
     <svg
         data-accordion-icon
-        class="w-6 h-6 shrink-0"
-        :class="{'rotate-180': panelState.isVisible}"
+        :class="arrowClasses"
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -27,36 +20,30 @@
 <script lang="ts" setup>
 import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
 import { computed, inject } from 'vue'
+import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
 
+const accordionId: string = inject('accordionId') ?? ''
+const panelId: string = inject('panelId') ?? ''
 
-const accordionId: any = inject('accordionId')
-const panelId: any = inject('panelId')
-
+const { accordionsStates } = useAccordionState()
 const accordionState = computed(() => accordionsStates[accordionId])
-const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
-const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
-const isBottomBorderVisibleForFlush = computed(() =>
-    isPanelLast.value ||
-    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
+const panelState = computed(() => accordionState.value.panels[panelId])
 
-const commonToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  const isSelectedVisible = selectedPanel.isVisible
+const { headerClasses, arrowClasses } = useAccordionHeaderClasses()
+function commonToggleItem() {
+  const isSelectedVisible = panelState.value.isVisible
   for (const panelIndex in accordionState.value.panels) {
     const panel = accordionState.value.panels[panelIndex]
     if (panel.id !== panelId) panel.isVisible = false
     else panel.isVisible = !isSelectedVisible
   }
 }
-const alwaysOpenToggleItem = () => {
-  const selectedPanel = accordionState.value.panels[panelId]
-  selectedPanel.isVisible = !selectedPanel.isVisible
+function alwaysOpenToggleItem() {
+  panelState.value.isVisible = !panelState.value.isVisible
 }
-const toggleItem = () => {
+function toggleItem() {
   if (accordionState.value.alwaysOpen ) return alwaysOpenToggleItem()
   commonToggleItem()
 }
 
-const { accordionsStates } = useAccordionState()
-const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
 </script>
diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/Accordion/AccordionPanel.vue
index 2fdd374..9d5746f 100644
--- a/src/components/Accordion/AccordionPanel.vue
+++ b/src/components/Accordion/AccordionPanel.vue
@@ -1,7 +1,7 @@
+// TODO: 1 слот
 <template>
   <div>
-    <slot name="header"/>
-    <slot name="content"/>
+    <slot></slot>
   </div>
 </template>
 
@@ -13,7 +13,7 @@ import { nanoid } from 'nanoid'
 const { accordionsStates } = useAccordionState()
 
 const panelId = nanoid()
-const accordionId: any = inject('accordionId')
+const accordionId: string = inject('accordionId') ?? ''
 provide('panelId', panelId)
 
 const accordionState = computed(() => {
diff --git a/src/components/Accordion/composables/useAccordionContentClasses.ts b/src/components/Accordion/composables/useAccordionContentClasses.ts
new file mode 100644
index 0000000..4ed7b56
--- /dev/null
+++ b/src/components/Accordion/composables/useAccordionContentClasses.ts
@@ -0,0 +1,29 @@
+import { computed, inject } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import classNames from 'classnames'
+
+
+const baseContentClasses = 'p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900'
+export function useAccordionContentClasses() {
+  const accordionId: string = inject('accordionId') ?? ''
+  const panelId: string = inject('panelId') ?? ''
+
+
+  const { accordionsStates } = useAccordionState()
+
+  const accordionState = computed(() => accordionsStates[accordionId])
+  const panelState = computed(() => accordionsStates[accordionId].panels[panelId])
+  const panelsCount = computed(() => Object.keys(accordionsStates[accordionId].panels[panelId]).length)
+
+  const contentClasses = computed(() => classNames(baseContentClasses, {
+    hidden: !panelState.value.isVisible,
+    'border-b-0': panelState.value.order !== panelsCount.value - 1 || accordionState.value.flush,
+    'border-t-0': panelState.value.order === panelsCount.value - 1,
+    'border-x-0': accordionState.value.flush,
+  }))
+  return {
+    contentClasses,
+  }
+}
+
+
diff --git a/src/components/Accordion/composables/useAccordionHeaderClasses.ts b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
new file mode 100644
index 0000000..75e60f0
--- /dev/null
+++ b/src/components/Accordion/composables/useAccordionHeaderClasses.ts
@@ -0,0 +1,35 @@
+import { computed, inject } from 'vue'
+import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
+import classNames from 'classnames'
+
+
+const baseHeaderClasses = 'flex items-center p-5 w-full font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+const baseArrowClasses = 'w-6 h-6 shrink-0'
+export function useAccordionHeaderClasses() {
+  const accordionId: string = inject('accordionId') ?? ''
+  const panelId: string = inject('panelId') ?? ''
+
+  const { accordionsStates } = useAccordionState()
+  const accordionState = computed(() => accordionsStates[accordionId])
+  const panelState = computed(() => accordionState.value.panels[panelId])
+  const panelsCount = computed(() => Object.keys(panelState.value).length)
+  const isPanelLast = computed(() => panelState.value.order !== panelsCount.value - 1)
+  const isBottomBorderVisibleForFlush = computed(() =>
+    isPanelLast.value ||
+    (accordionState.value.flush && panelState.value.order === panelsCount.value - 1 && !panelState.value.isVisible))
+
+  const headerClasses = computed(() => classNames(baseHeaderClasses, {
+    'bg-gray-100 dark:bg-gray-800': panelState.value.isVisible,
+    'rounded-t-xl': panelState.value.order === 0 && !accordionState.value.flush,
+    'border-t-0': panelState.value.order === 0 && accordionState.value.flush,
+    'border-b-0': isBottomBorderVisibleForFlush.value,
+    'border-x-0': accordionState.value.flush,
+  }))
+  const arrowClasses = computed(() => classNames(baseArrowClasses,{ 'rotate-180': panelState.value.isVisible }))
+  return {
+    headerClasses,
+    arrowClasses,
+  }
+}
+
+
diff --git a/src/components/Accordion/composables/useAccordionState.ts b/src/components/Accordion/composables/useAccordionState.ts
index 89b13f6..29f5e71 100644
--- a/src/components/Accordion/composables/useAccordionState.ts
+++ b/src/components/Accordion/composables/useAccordionState.ts
@@ -1,5 +1,5 @@
 import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
-import type { tAccordionMode, tState } from '@/components/Accordion/types'
+import type { tState } from '@/components/Accordion/types'
 
 const accordionsStates = reactive<tState>({})
 export function useAccordionState(id?: string, options?: {flush: boolean, alwaysOpen: boolean}): {

From df86e906bab32358bee149c6554b9bf19b68836b Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 23:02:34 +0400
Subject: [PATCH 13/17] chore: accordion moved to top in the sidebar

---
 docs/.vitepress/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6638a8e..0dbea64 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -34,6 +34,7 @@ function buildSidebar() {
 
 function getComponents() {
   return [
+    { text: 'Accordion', link: 'components/accordion/accordion.md' },
     { text: 'Alert', link: '/components/alert/alert.md' },
     { text: 'Avatar', link: 'components/avatar/avatar.md' },
     { text: 'Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
@@ -51,7 +52,6 @@ function getComponents() {
     { text: 'Modal', link: 'components/modal/modal.md' },
     { text: 'Navbar', link: 'components/navbar/navbar.md' },
 
-    { text: 'Accordion', link: 'components/accordion/accordion.md' },
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
     { text: '- Footer', link: 'components/footer/footer.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },

From 2b84cddd90ef78906e8b29487eca6bcaca89bde7 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Sun, 11 Dec 2022 23:19:25 +0400
Subject: [PATCH 14/17] chore: changed accordion imports

---
 docs/components/accordion/accordion.md        | 26 ++++---------------
 .../examples/AccordionAlwaysOpenExample.vue   |  6 +----
 .../accordion/examples/AccordionExample.vue   |  6 +----
 .../examples/AccordionFlushExample.vue        |  6 +----
 .../AccordionStyledHeadersExample.vue         |  6 +----
 src/index.ts                                  |  5 +++-
 6 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 9f52f6d..6ec2c4c 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -17,11 +17,7 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 Use this example to basic accordion. 
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -64,11 +60,7 @@ import AccordionContent from 'flowbite'
 Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -111,11 +103,7 @@ import AccordionContent from 'flowbite'
 Flush prop removes side borders, and rounded corners
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
@@ -158,15 +146,11 @@ import AccordionContent from 'flowbite'
 You can style accordion content and headers by passing tailwind classes into them.
 ```vue
 <script setup>
-import { Accordion } from 'flowbite'
-import AccordionPanel from 'flowbite'
-import AccordionHeader from 'flowbite'
-import AccordionContent from 'flowbite'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
 </script>
 
 <template>
-  <Accordion >
+  <Accordion>
     <accordion-panel>
       <accordion-header>header</accordion-header>
       <accordion-content>
diff --git a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
index 5175917..10f8f2e 100644
--- a/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
+++ b/docs/components/accordion/examples/AccordionAlwaysOpenExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionExample.vue b/docs/components/accordion/examples/AccordionExample.vue
index 5c74b27..96ce3d8 100644
--- a/docs/components/accordion/examples/AccordionExample.vue
+++ b/docs/components/accordion/examples/AccordionExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionFlushExample.vue b/docs/components/accordion/examples/AccordionFlushExample.vue
index 5bb3f7b..363e44a 100644
--- a/docs/components/accordion/examples/AccordionFlushExample.vue
+++ b/docs/components/accordion/examples/AccordionFlushExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
index 4674045..63f3474 100644
--- a/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
+++ b/docs/components/accordion/examples/AccordionStyledHeadersExample.vue
@@ -1,9 +1,5 @@
 <script setup>
-import { Accordion } from '../../../../src/index'
-import AccordionPanel from '@/components/Accordion/AccordionPanel.vue'
-import AccordionHeader from '@/components/Accordion/AccordionHeader.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from '../../../../src/index'
 </script>
 
 <template>
diff --git a/src/index.ts b/src/index.ts
index 627797b..9de0f19 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,7 @@
+export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as AccordionPanel } from './components/Accordion/AccordionPanel.vue'
+export { default as AccordionHeader } from './components/Accordion/AccordionHeader.vue'
+export { default as AccordionContent } from './components/Accordion/AccordionContent.vue'
 export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
@@ -12,7 +16,6 @@ export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbIte
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
 export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
-export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Badge } from './components/Badge/Badge.vue'
 export { default as TheCard } from './components/Card/TheCard.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'

From bed6185f2e43a1c43acb8a256fec8253e4c5cbd2 Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Mon, 12 Dec 2022 11:51:11 +0400
Subject: [PATCH 15/17] chore: -todo

---
 src/components/Accordion/AccordionPanel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Accordion/AccordionPanel.vue b/src/components/Accordion/AccordionPanel.vue
index 9d5746f..8687627 100644
--- a/src/components/Accordion/AccordionPanel.vue
+++ b/src/components/Accordion/AccordionPanel.vue
@@ -1,4 +1,3 @@
-// TODO: 1 слот
 <template>
   <div>
     <slot></slot>

From 2ed0fd852e13b2a36476dd1f25cc60cd491b20da Mon Sep 17 00:00:00 2001
From: victor <viktor.generalov@nlogic.ai>
Date: Mon, 12 Dec 2022 18:04:42 +0400
Subject: [PATCH 16/17] chore: flowbite>flowbite-vue

---
 docs/components/accordion/accordion.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/components/accordion/accordion.md b/docs/components/accordion/accordion.md
index 6ec2c4c..2e2209c 100644
--- a/docs/components/accordion/accordion.md
+++ b/docs/components/accordion/accordion.md
@@ -17,7 +17,7 @@ Original reference: [https://flowbite.com/docs/components/accordion/](https://fl
 Use this example to basic accordion. 
 ```vue
 <script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
 </script>
 
 <template>
@@ -60,7 +60,7 @@ import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'fl
 Always open prop to makes accordion able to open multiple elements.
 ```vue
 <script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
 </script>
 
 <template>
@@ -103,7 +103,7 @@ import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'fl
 Flush prop removes side borders, and rounded corners
 ```vue
 <script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
 </script>
 
 <template>
@@ -146,7 +146,7 @@ import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'fl
 You can style accordion content and headers by passing tailwind classes into them.
 ```vue
 <script setup>
-import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite'
+import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
 </script>
 
 <template>

From 66c5edac8a4b1ca7367873d067bfdb1864ada7d5 Mon Sep 17 00:00:00 2001
From: Ilya Artamonov <ilya.sosidka@gmail.com>
Date: Mon, 12 Dec 2022 19:49:29 +0300
Subject: [PATCH 17/17] Update src/components/Accordion/types.ts

---
 src/components/Accordion/types.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
index e10045c..409f1e9 100644
--- a/src/components/Accordion/types.ts
+++ b/src/components/Accordion/types.ts
@@ -11,7 +11,6 @@ type tStateElement = {
   id: string,
   flush: boolean,
   alwaysOpen: boolean,
-
   panels: tAccordionPanels
 }
 export type tState = {