From b5f42cdd3ab96c02c9152d3846728bf98edbd384 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 27 Jun 2024 15:39:15 +0200
Subject: [PATCH] docs: update

---
 docs/app/components/content/ComponentApi.vue  | 24 +++++--
 .../components/content/ComponentEvents.vue    | 42 +++++++++++
 .../app/components/content/ComponentProps.vue | 69 +++++++++++++++++++
 .../app/components/content/ComponentSlots.vue | 46 +++++++++++++
 .../app/components/content/ComponentTheme.vue |  7 +-
 docs/content/2.components/accordion.md        | 16 ++++-
 docs/content/2.components/alert.md            | 16 ++++-
 docs/content/2.components/avatar-group.md     | 16 ++++-
 docs/content/2.components/avatar.md           | 16 ++++-
 docs/content/2.components/badge.md            | 16 ++++-
 docs/content/2.components/breadcrumb.md       | 16 ++++-
 docs/content/2.components/button-group.md     | 16 ++++-
 docs/content/2.components/button.md           | 16 ++++-
 docs/content/2.components/card.md             | 16 ++++-
 docs/content/2.components/carousel.md         | 16 ++++-
 docs/content/2.components/checkbox.md         | 16 ++++-
 docs/content/2.components/chip.md             | 16 ++++-
 docs/content/2.components/collapsible.md      | 16 ++++-
 docs/content/2.components/command-palette.md  | 16 ++++-
 docs/content/2.components/container.md        | 16 ++++-
 docs/content/2.components/context-menu.md     | 16 ++++-
 docs/content/2.components/drawer.md           | 16 ++++-
 docs/content/2.components/dropdown-menu.md    | 16 ++++-
 docs/content/2.components/form-field.md       | 16 ++++-
 docs/content/2.components/input-menu.md       | 16 ++++-
 docs/content/2.components/input.md            | 16 ++++-
 docs/content/2.components/kbd.md              | 16 ++++-
 docs/content/2.components/meter.md            | 16 ++++-
 docs/content/2.components/modal.md            | 16 ++++-
 docs/content/2.components/navigation-menu.md  | 16 ++++-
 docs/content/2.components/pagination.md       | 16 ++++-
 docs/content/2.components/popover.md          | 16 ++++-
 docs/content/2.components/progress.md         | 16 ++++-
 docs/content/2.components/radio-group.md      | 16 ++++-
 docs/content/2.components/select-menu.md      | 16 ++++-
 docs/content/2.components/select.md           | 16 ++++-
 docs/content/2.components/separator.md        | 16 ++++-
 docs/content/2.components/skeleton.md         | 16 ++++-
 docs/content/2.components/slideover.md        | 16 ++++-
 docs/content/2.components/slider.md           | 16 ++++-
 docs/content/2.components/switch.md           | 16 ++++-
 docs/content/2.components/table.md            | 16 ++++-
 docs/content/2.components/tabs.md             | 16 ++++-
 docs/content/2.components/textarea.md         | 16 ++++-
 docs/content/2.components/toast.md            | 16 ++++-
 docs/content/2.components/tooltip.md          | 16 ++++-
 46 files changed, 792 insertions(+), 52 deletions(-)
 create mode 100644 docs/app/components/content/ComponentEvents.vue
 create mode 100644 docs/app/components/content/ComponentProps.vue
 create mode 100644 docs/app/components/content/ComponentSlots.vue

diff --git a/docs/app/components/content/ComponentApi.vue b/docs/app/components/content/ComponentApi.vue
index cce22b49..20d9ab50 100644
--- a/docs/app/components/content/ComponentApi.vue
+++ b/docs/app/components/content/ComponentApi.vue
@@ -1,16 +1,28 @@
 <script setup lang="ts">
 import { upperFirst, camelCase } from 'scule'
 import type { ComponentMeta } from 'vue-component-meta'
-
-const props = defineProps<{ slug?: string }>()
+import * as theme from '#build/ui'
 
 const route = useRoute()
 
-const name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
+const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const name = `U${upperFirst(camelName)}`
 
+const componentTheme = theme[camelName]
 const componentMeta = await useComponentMeta(name as any)
 
-const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
+const meta: ComputedRef<ComponentMeta> = computed(() => {
+  const meta = componentMeta.value.meta
+
+  if (meta.props?.length) {
+    meta.props = meta.props.map((prop) => {
+      prop.default = prop.default ?? componentTheme.defaultVariants?.[prop.name]
+      return prop
+    })
+  }
+
+  return meta
+})
 
 const { data: ast } = await useAsyncData(`${name}-api`, () => parseMarkdown(`
 ## API
@@ -66,7 +78,7 @@ function table(items: any[], columns?: { key: string, addKey?: string, label: st
       let code = item[col.key] ? `<code>${item[col.key].replaceAll('|', '&#124;')}</code>` : ''
 
       if (col.addKey) {
-        code += item[col.addKey] ? `<p class="!mt-1">${item[col.addKey].replaceAll('\n\n', '<br>').replaceAll('\n', '<br>')}</p>` : ''
+        code += item[col.addKey] ? `<p class="!mt-2">${item[col.addKey].replaceAll('\n\n', '<br>').replaceAll('\n', '<br>')}</p>` : ''
       }
 
       return code
@@ -78,5 +90,5 @@ function table(items: any[], columns?: { key: string, addKey?: string, label: st
 </script>
 
 <template>
-  <MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" :tag="false" />
+  <MDCRenderer v-if="ast && (meta.props?.length || meta.slots?.length || meta.events?.length)" :body="ast.body" :data="ast.data" />
 </template>
diff --git a/docs/app/components/content/ComponentEvents.vue b/docs/app/components/content/ComponentEvents.vue
new file mode 100644
index 00000000..cccaba46
--- /dev/null
+++ b/docs/app/components/content/ComponentEvents.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+import type { ComponentMeta } from 'vue-component-meta'
+
+const route = useRoute()
+
+const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const name = `U${upperFirst(camelName)}`
+
+const componentMeta = await useComponentMeta(name as any)
+
+const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Event
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="event in meta.events" :key="event.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ event.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="event.type" lang="ts">
+            {{ event.type }}
+          </ProseCodeInline>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue
new file mode 100644
index 00000000..5b038f97
--- /dev/null
+++ b/docs/app/components/content/ComponentProps.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+import type { ComponentMeta } from 'vue-component-meta'
+import * as theme from '#build/ui'
+
+const route = useRoute()
+
+const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const name = `U${upperFirst(camelName)}`
+
+const componentTheme = theme[camelName]
+const componentMeta = await useComponentMeta(name as any)
+
+const meta: ComputedRef<ComponentMeta> = computed(() => {
+  const meta = componentMeta.value.meta
+
+  if (meta.props?.length) {
+    meta.props = meta.props.map((prop) => {
+      prop.default = prop.default ?? componentTheme.defaultVariants?.[prop.name]
+      return prop
+    })
+  }
+
+  return meta
+})
+
+console.log('meta.value', meta.value)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Prop
+        </ProseTh>
+        <ProseTh>
+          Default
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="prop in meta.props" :key="prop.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ prop.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.default">
+            {{ prop.default }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="prop.type" lang="ts">
+            {{ prop.type }}
+          </ProseCodeInline>
+
+          <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
+            {{ prop.description }}
+          </ProseP>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/docs/app/components/content/ComponentSlots.vue b/docs/app/components/content/ComponentSlots.vue
new file mode 100644
index 00000000..6dbe38b6
--- /dev/null
+++ b/docs/app/components/content/ComponentSlots.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { upperFirst, camelCase } from 'scule'
+import type { ComponentMeta } from 'vue-component-meta'
+
+const route = useRoute()
+
+const camelName = camelCase(route.params.slug[route.params.slug.length - 1])
+const name = `U${upperFirst(camelName)}`
+
+const componentMeta = await useComponentMeta(name as any)
+
+const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta)
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh>
+          Slot
+        </ProseTh>
+        <ProseTh>
+          Type
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="slot in meta.slots" :key="slot.name">
+        <ProseTd>
+          <ProseCodeInline>
+            {{ slot.name }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline v-if="slot.type" lang="ts">
+            {{ slot.type }}
+          </ProseCodeInline>
+
+          <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
+            {{ slot.description }}
+          </ProseP>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue
index 5a60dbc7..f97baf70 100644
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import json5 from 'json5'
+import { camelCase } from 'scule'
 import { parseMarkdown } from '@nuxtjs/mdc/runtime'
 import * as theme from '#build/ui'
 
-const props = defineProps<{ slug?: string }>()
-
 const route = useRoute()
 
-const name = props.slug || route.params.slug[route.params.slug.length - 1]
+const name = camelCase(route.params.slug[route.params.slug.length - 1])
 
 const { data: ast } = await useAsyncData(`${name}-theme`, () => parseMarkdown(`
-## Theme
-
 \`\`\`yml
 ${json5.stringify(theme[name], null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
 \`\`\`\
diff --git a/docs/content/2.components/accordion.md b/docs/content/2.components/accordion.md
index ffe285a1..c8da68a3 100644
--- a/docs/content/2.components/accordion.md
+++ b/docs/content/2.components/accordion.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/alert.md b/docs/content/2.components/alert.md
index 4f0bb716..8435f518 100644
--- a/docs/content/2.components/alert.md
+++ b/docs/content/2.components/alert.md
@@ -9,6 +9,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/avatar-group.md b/docs/content/2.components/avatar-group.md
index 910884e9..acd65b47 100644
--- a/docs/content/2.components/avatar-group.md
+++ b/docs/content/2.components/avatar-group.md
@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/avatar.md b/docs/content/2.components/avatar.md
index 979e6335..9457e5be 100644
--- a/docs/content/2.components/avatar.md
+++ b/docs/content/2.components/avatar.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/badge.md b/docs/content/2.components/badge.md
index b01c3f22..113d9063 100644
--- a/docs/content/2.components/badge.md
+++ b/docs/content/2.components/badge.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/breadcrumb.md b/docs/content/2.components/breadcrumb.md
index 2ed91c0b..e25401eb 100644
--- a/docs/content/2.components/breadcrumb.md
+++ b/docs/content/2.components/breadcrumb.md
@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/button-group.md b/docs/content/2.components/button-group.md
index bf8bc015..19d3b8ce 100644
--- a/docs/content/2.components/button-group.md
+++ b/docs/content/2.components/button-group.md
@@ -11,6 +11,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/button.md b/docs/content/2.components/button.md
index 30d22d58..21d4630b 100644
--- a/docs/content/2.components/button.md
+++ b/docs/content/2.components/button.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/card.md b/docs/content/2.components/card.md
index 3ed06511..a915dfd6 100644
--- a/docs/content/2.components/card.md
+++ b/docs/content/2.components/card.md
@@ -20,6 +20,20 @@ componentProps:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/carousel.md b/docs/content/2.components/carousel.md
index faa62885..2e95cb5d 100644
--- a/docs/content/2.components/carousel.md
+++ b/docs/content/2.components/carousel.md
@@ -16,6 +16,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/checkbox.md b/docs/content/2.components/checkbox.md
index 6f6173b8..d0536bfe 100644
--- a/docs/content/2.components/checkbox.md
+++ b/docs/content/2.components/checkbox.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/chip.md b/docs/content/2.components/chip.md
index fa13a149..b3e08624 100644
--- a/docs/content/2.components/chip.md
+++ b/docs/content/2.components/chip.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/collapsible.md b/docs/content/2.components/collapsible.md
index 3247db8e..fa15a45d 100644
--- a/docs/content/2.components/collapsible.md
+++ b/docs/content/2.components/collapsible.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/command-palette.md b/docs/content/2.components/command-palette.md
index 8292baac..e41deb4b 100644
--- a/docs/content/2.components/command-palette.md
+++ b/docs/content/2.components/command-palette.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/container.md b/docs/content/2.components/container.md
index 81c16dcc..b3277b99 100644
--- a/docs/content/2.components/container.md
+++ b/docs/content/2.components/container.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/context-menu.md b/docs/content/2.components/context-menu.md
index c56b4d93..a9b75c41 100644
--- a/docs/content/2.components/context-menu.md
+++ b/docs/content/2.components/context-menu.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/drawer.md b/docs/content/2.components/drawer.md
index 287d8b5e..19981365 100644
--- a/docs/content/2.components/drawer.md
+++ b/docs/content/2.components/drawer.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/dropdown-menu.md b/docs/content/2.components/dropdown-menu.md
index 5dc675d5..082a3a11 100644
--- a/docs/content/2.components/dropdown-menu.md
+++ b/docs/content/2.components/dropdown-menu.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/form-field.md b/docs/content/2.components/form-field.md
index 63b926e3..341a12e6 100644
--- a/docs/content/2.components/form-field.md
+++ b/docs/content/2.components/form-field.md
@@ -265,6 +265,20 @@ componentProps:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/input-menu.md b/docs/content/2.components/input-menu.md
index 511de9a0..571414fc 100644
--- a/docs/content/2.components/input-menu.md
+++ b/docs/content/2.components/input-menu.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
index a6a6b175..473051f0 100644
--- a/docs/content/2.components/input.md
+++ b/docs/content/2.components/input.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/kbd.md b/docs/content/2.components/kbd.md
index 3f3faf71..242dc15c 100644
--- a/docs/content/2.components/kbd.md
+++ b/docs/content/2.components/kbd.md
@@ -13,6 +13,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/meter.md b/docs/content/2.components/meter.md
index 0257e193..991d805f 100644
--- a/docs/content/2.components/meter.md
+++ b/docs/content/2.components/meter.md
@@ -17,6 +17,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/modal.md b/docs/content/2.components/modal.md
index 8699f807..37831619 100644
--- a/docs/content/2.components/modal.md
+++ b/docs/content/2.components/modal.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/navigation-menu.md b/docs/content/2.components/navigation-menu.md
index 4f4119c5..e791aeb2 100644
--- a/docs/content/2.components/navigation-menu.md
+++ b/docs/content/2.components/navigation-menu.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/pagination.md b/docs/content/2.components/pagination.md
index 91799382..36d00de1 100644
--- a/docs/content/2.components/pagination.md
+++ b/docs/content/2.components/pagination.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/popover.md b/docs/content/2.components/popover.md
index 97bea48a..d8faaf61 100644
--- a/docs/content/2.components/popover.md
+++ b/docs/content/2.components/popover.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/progress.md b/docs/content/2.components/progress.md
index 5c0a9ae3..b5b65bad 100644
--- a/docs/content/2.components/progress.md
+++ b/docs/content/2.components/progress.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/radio-group.md b/docs/content/2.components/radio-group.md
index 59ec173b..efacb8a3 100644
--- a/docs/content/2.components/radio-group.md
+++ b/docs/content/2.components/radio-group.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md
index 87c73d2f..f2889d5c 100644
--- a/docs/content/2.components/select-menu.md
+++ b/docs/content/2.components/select-menu.md
@@ -14,6 +14,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/select.md b/docs/content/2.components/select.md
index b3d603be..1eda4e9f 100644
--- a/docs/content/2.components/select.md
+++ b/docs/content/2.components/select.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/separator.md b/docs/content/2.components/separator.md
index 1f135ec7..dc3bffc3 100644
--- a/docs/content/2.components/separator.md
+++ b/docs/content/2.components/separator.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/skeleton.md b/docs/content/2.components/skeleton.md
index 0a1a210c..328f659f 100644
--- a/docs/content/2.components/skeleton.md
+++ b/docs/content/2.components/skeleton.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/slideover.md b/docs/content/2.components/slideover.md
index 8cfa3858..3e417b5b 100644
--- a/docs/content/2.components/slideover.md
+++ b/docs/content/2.components/slideover.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/slider.md b/docs/content/2.components/slider.md
index fc5845c2..096048a6 100644
--- a/docs/content/2.components/slider.md
+++ b/docs/content/2.components/slider.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/switch.md b/docs/content/2.components/switch.md
index e7faf154..02909b99 100644
--- a/docs/content/2.components/switch.md
+++ b/docs/content/2.components/switch.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index f44e9745..08054fd6 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -16,6 +16,20 @@ navigation:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/tabs.md b/docs/content/2.components/tabs.md
index 4b70dcd0..df6d2647 100644
--- a/docs/content/2.components/tabs.md
+++ b/docs/content/2.components/tabs.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/textarea.md b/docs/content/2.components/textarea.md
index efd46987..84c6d8f9 100644
--- a/docs/content/2.components/textarea.md
+++ b/docs/content/2.components/textarea.md
@@ -10,6 +10,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/toast.md b/docs/content/2.components/toast.md
index a9760f0b..94709a5b 100644
--- a/docs/content/2.components/toast.md
+++ b/docs/content/2.components/toast.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme
diff --git a/docs/content/2.components/tooltip.md b/docs/content/2.components/tooltip.md
index 3cbca7ec..7489176a 100644
--- a/docs/content/2.components/tooltip.md
+++ b/docs/content/2.components/tooltip.md
@@ -13,6 +13,20 @@ links:
 
 ## Examples
 
-:component-api
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Events
+
+:component-events
+
+## Theme
 
 :component-theme