From 67400ee2ec4e7facb7aa80107e7a645dfcccee4f Mon Sep 17 00:00:00 2001
From: CyanSalt <c.salt@hotmail.com>
Date: Wed, 28 Jun 2023 20:00:39 +0800
Subject: [PATCH] feat: add details

---
 docs/.vitepress/config.ts     |   5 +-
 docs/components/button.md     |  90 ++++++++++++++++++++-------
 docs/components/details.md    | 114 ++++++++++++++++++++++++++++++++++
 docs/components/graphics.md   |   0
 docs/components/grid-guide.md |  31 ++++++---
 docs/components/link.md       |  20 +++++-
 docs/components/space.md      |  49 ++++++++++++---
 docs/components/table.md      |  60 ++++++++++++++----
 docs/components/text.md       |  28 +++++++--
 src/button/index.vue          |  12 ++--
 src/components.ts             |   1 +
 src/details/index.vue         |  89 ++++++++++++++++++++++++++
 src/graphics/index.vue        |   6 +-
 src/grid-guide/index.vue      |  10 ++-
 src/link/index.vue            |   4 +-
 src/space/index.vue           |  10 +--
 src/table/index.vue           |   9 ++-
 src/text/index.vue            |   4 +-
 18 files changed, 448 insertions(+), 94 deletions(-)
 create mode 100644 docs/components/details.md
 create mode 100644 docs/components/graphics.md
 create mode 100644 src/details/index.vue

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8335277..1fab011 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -26,6 +26,7 @@ export default defineConfig({
             text: 'Basic',
             items: [
               { text: 'Button', link: '/components/button' },
+              { text: 'Details', link: '/components/details' },
               { text: 'Grid Guide', link: '/components/grid-guide' },
               { text: 'Link', link: '/components/link' },
               { text: 'Space', link: '/components/space' },
@@ -51,10 +52,6 @@ export default defineConfig({
             text: 'Feedback',
             items: [],
           },
-          {
-            text: 'Configuration',
-            items: [],
-          },
         ],
       },
     ],
diff --git a/docs/components/button.md b/docs/components/button.md
index 3868b2a..8f6dc09 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RButton, RLink, RSpace, RTable } from 'roughness'
+import { RButton, RDetails, RSpace, RTable } from 'roughness'
 </script>
 
 # Button
@@ -10,6 +10,9 @@ Squares are buttons.
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -27,6 +30,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton>Normal</RButton>
   <RButton type="primary">Primary</RButton>
@@ -38,6 +43,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Filled
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -55,6 +63,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton filled>Normal</RButton>
   <RButton type="primary" filled>Primary</RButton>
@@ -66,6 +76,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Rounded
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -79,6 +92,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton rounded>Enter the Pipe</RButton>
   <RButton type="error" filled rounded>Eat the Mushroom</RButton>
@@ -86,6 +101,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Disabled
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -99,6 +117,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton disabled>Train AlphaGo</RButton>
   <RButton type="primary" filled disabled>Let there be light</RButton>
@@ -106,26 +126,34 @@ import { RButton, RSpace } from 'roughness'
 
 ### Block
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
 </script>
 
 <template>
-  <RSpace vertical align="stretch">
+  <RSpace vertical>
     <RButton block>Switch Account</RButton>
     <RButton type="error" block>Log out of Chaos</RButton>
   </RSpace>
 </template>
 ```
 
-<RSpace vertical align="stretch">
+</RDetails>
+
+<RSpace vertical>
   <RButton block>Switch Account</RButton>
   <RButton type="error" block>Log out of Chaos</RButton>
 </RSpace>
 
 ### Tag
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -139,6 +167,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RButton tag="a" type="primary" filled>Remote Bomb</RButton>
   <RButton tag="a" type="error">Magnesis</RButton>
@@ -157,63 +187,81 @@ import { RButton, RSpace } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:block.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:block.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:block.description>
     Whether the button is displayed as block.
   </template>
 
   <template #body:filled.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:filled.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:filled.description>
     Whether the button is filled with its color.
   </template>
 
   <template #body:html-type.type>
-    <RLink
-      href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#htmlbuttonelement.type"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <code>'submit' | 'reset' | 'button'</code>
-    </RLink>
+
+  [`'submit' | 'reset' | 'button'`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement#htmlbuttonelement.type)
+
   </template>
   <template #body:html-type.description>
-    The <code>type</code> attribute of <code>HTMLButtonElement</code>.
+
+  The `type` attribute of `HTMLButtonElement`.
+
   </template>
 
   <template #body:rounded.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:rounded.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:rounded.description>
     Whether the button is round.
   </template>
 
   <template #body:tag.type>
-    <code>string</code>, but usually <code>'button' | 'a'</code>
+
+  `string`, but usually `'button' | 'a'`
+
   </template>
   <template #body:tag.default>
-    <code>'button'</code>
+
+  `'button'`
+
   </template>
   <template #body:tag.description>
     HTML tag for rendering the button.
   </template>
 
   <template #body:type.type>
-    <code>string</code>, but usually <code>'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'</code>
+
+  `string`, but usually `'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'`
+
   </template>
   <template #body:type.default>
-    <code>'default'</code>
+
+  `'default'`
+
   </template>
   <template #body:type.description>
     Button style type.
diff --git a/docs/components/details.md b/docs/components/details.md
new file mode 100644
index 0000000..7bb2675
--- /dev/null
+++ b/docs/components/details.md
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { RButton, RDetails, RSpace, RTable } from 'roughness'
+import { ref } from 'vue'
+
+let open = ref(true)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+# Details
+
+The devil is in the details.
+
+## Example
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RDetails } from 'roughness'
+import { ref } from 'vue'
+
+let open = ref(true)
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <RSpace vertical>
+    <RDetails v-model:open="open">
+      <template #summary>Hanger</template>
+      Clown suits
+    </RDetails>
+    <RButton :filled="!open" @click="toggle">Closet Door</RButton>
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace vertical>
+  <RDetails v-model:open="open">
+    <template #summary>Hanger</template>
+    Clown suits
+  </RDetails>
+  <RButton :filled="!open" @click="toggle">Closet Door</RButton>
+</RSpace>
+
+## Usage
+
+### Props
+
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['open']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:open.type>
+
+  `boolean`
+
+  </template>
+  <template #body:open.default>
+
+  `false`
+
+  </template>
+  <template #body:open.description>
+    Whether the details are currently visible.
+  </template>
+</RTable>
+
+### Events
+
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['update:open']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:update:open.parameters>
+
+  `(open: boolean)`
+
+  </template>
+  <template #body:update:open.description>
+    Callback function triggered when visibility of the details are changed.
+  </template>
+</RTable>
+
+### Slots
+
+<RTable
+  :columns="['name', 'parameters', 'description']"
+  :rows="['summary', 'default']"
+>
+  <template #head:*="{ column, helpers }">{{ helpers.startCase(column) }}</template>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:summary.description>
+    The content of the summary.
+  </template>
+  <template #body:default.description>
+    The content of the details.
+  </template>
+</RTable>
diff --git a/docs/components/graphics.md b/docs/components/graphics.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/components/grid-guide.md b/docs/components/grid-guide.md
index 3b1c60e..4b772b7 100644
--- a/docs/components/grid-guide.md
+++ b/docs/components/grid-guide.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RGridGuide, RTable } from 'roughness'
+import { RDetails, RGridGuide, RTable } from 'roughness'
 </script>
 
 # Grid Guide
@@ -8,6 +8,9 @@ Guide lines are always straight.
 
 ## Example
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RGridGuide } from 'roughness'
@@ -20,6 +23,8 @@ import { RGridGuide } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <section :style="{ height: '240px' }">
   <RGridGuide :style="{ '--r-grid-guide-color': 'var(--r-common-primary-color)' }" />
 </section>
@@ -36,30 +41,42 @@ import { RGridGuide } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:max-sections.type>
-    <code>number</code>
+
+  `number`
+
   </template>
   <template #body:max-sections.default>
-    <code>10</code>
+
+  `10`
+
   </template>
   <template #body:max-sections.description>
     The maximum number of sections that can be displayed under the current viewport dimensions.
   </template>
 
   <template #body:responsive.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:responsive.default>
-    <code>true</code>
+
+  `true`
+
   </template>
   <template #body:responsive.description>
     Whether to adjust the size to fit the parent element.
   </template>
 
   <template #body:section-cells.type>
-    <code>number</code>
+
+  `number`
+
   </template>
   <template #body:section-cells.default>
-    <code>8</code>
+
+  `8`
+
   </template>
   <template #body:section-cells.description>
     The number of cells in one section dimension.
diff --git a/docs/components/link.md b/docs/components/link.md
index 238ab32..67bfb72 100644
--- a/docs/components/link.md
+++ b/docs/components/link.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RLink, RSpace, RTable } from 'roughness'
+import { RDetails, RLink, RSpace, RTable } from 'roughness'
 </script>
 
 # Link
@@ -10,6 +10,9 @@ The blood moon rises once again. Please be careful, Link...
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RLink, RSpace } from 'roughness'
@@ -27,6 +30,8 @@ import { RLink, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RLink>Normal</RLink>
   <RLink type="primary">Primary</RLink>
@@ -38,6 +43,9 @@ import { RLink, RSpace } from 'roughness'
 
 ### With `href` attribute
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RLink, RSpace } from 'roughness'
@@ -51,6 +59,8 @@ import { RLink, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RLink href="https://en.wikipedia.org/wiki/Telephone">Start</RLink>
   <RLink type="error" href="https://en.wikipedia.org/wiki/Nuclear_weapon">End</RLink>
@@ -68,10 +78,14 @@ import { RLink, RSpace } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:type.type>
-    <code>string</code>, but usually <code>'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'</code>
+
+  `string`, but usually `'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'`
+
   </template>
   <template #body:type.default>
-    <code>'default'</code>
+
+  `'default'`
+
   </template>
   <template #body:type.description>
     Link style type.
diff --git a/docs/components/space.md b/docs/components/space.md
index 7e27798..df013c1 100644
--- a/docs/components/space.md
+++ b/docs/components/space.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RButton, RSpace, RTable } from 'roughness'
+import { RButton, RDetails, RSpace, RTable } from 'roughness'
 </script>
 
 # Space
@@ -10,6 +10,9 @@ We need to keep our distance.
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -24,6 +27,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace :style="{ 'max-width': '600px' }">
   <RButton>Rocket to the moon</RButton>
   <RButton>Bring newton back to life</RButton>
@@ -32,6 +37,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### Vertical
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -46,6 +54,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace vertical>
   <RButton>Mars</RButton>
   <RButton>Jupiter</RButton>
@@ -54,6 +64,9 @@ import { RButton, RSpace } from 'roughness'
 
 ### From Center
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RButton, RSpace } from 'roughness'
@@ -68,6 +81,8 @@ import { RButton, RSpace } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace justify="center">
   <RButton>Squidward</RButton>
   <RButton type="warning">SpongeBob</RButton>
@@ -86,40 +101,56 @@ import { RButton, RSpace } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:align.type>
-    <code>'start' | 'end' | 'center' | 'baseline' | 'stretch'</code>
+
+  `'start' | 'end' | 'center' | 'baseline' | 'stretch'`
+
   </template>
   <template #body:align.default>
-    <code>'start'</code>
+
+  `stretch` if `vertical`, `'start'` else
+
   </template>
   <template #body:align.description>
     Vertical arrangement.
   </template>
 
   <template #body:justify.type>
-    <code>'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'</code>
+
+  `'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'`
+
   </template>
   <template #body:justify.default>
-    <code>'start'</code>
+
+  `'start'`
+
   </template>
   <template #body:justify.description>
     Horizontal arrangement.
   </template>
 
   <template #body:vertical.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:vertical.default>
-    <code>false</code>
+
+  `false`
+
   </template>
   <template #body:vertical.description>
     Whether to layout vertically.
   </template>
 
   <template #body:wrap.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:wrap.default>
-    <code>true</code>
+
+  `true`
+
   </template>
   <template #body:wrap.description>
     Whether to exceed the line break.
diff --git a/docs/components/table.md b/docs/components/table.md
index 884a755..e7c6080 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RTable, RText } from 'roughness'
+import { RDetails, RTable, RText } from 'roughness'
 </script>
 
 # Table
@@ -10,6 +10,9 @@ Tic, tac, toe.
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RTable, RText } from 'roughness'
@@ -31,6 +34,8 @@ import { RTable, RText } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RTable
   :columns="['name', 'age']"
   :rows="['html', 'js', 'css']"
@@ -46,6 +51,9 @@ import { RTable, RText } from 'roughness'
 
 ### Without Header
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RTable, RText } from 'roughness'
@@ -66,6 +74,8 @@ import { RTable, RText } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RTable
   :columns="['name', 'life']"
   :rows="['unified', 'western', 'eastern']"
@@ -90,7 +100,9 @@ import { RTable, RText } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:columns.type>
-    <code>string[]</code>
+
+  `string[]`
+
   </template>
   <template #body:columns.default>
     <RText type="error">Required</RText>
@@ -100,17 +112,23 @@ import { RTable, RText } from 'roughness'
   </template>
 
   <template #body:header.type>
-    <code>boolean</code>
+
+  `boolean`
+
   </template>
   <template #body:header.default>
-    <code>true</code>
+
+  `true`
+
   </template>
   <template #body:header.description>
     Whether to display the table header.
   </template>
 
   <template #body:rows.type>
-    <code>string[]</code>
+
+  `string[]`
+
   </template>
   <template #body:rows.default>
     <RText type="error">Required</RText>
@@ -130,36 +148,52 @@ import { RTable, RText } from 'roughness'
   <template #body:*.name="{ row }">{{ row.replace(/_(\w+)_/g, '[$1]') }}</template>
 
   <template #body:head:_column_.description>
-    Header cell in the column corresponding to <code>[column]</code>. Fallback to <code>head:*</code>.
+
+  Header cell in the column corresponding to `[column]`. Fallback to `head:*`.
+
   </template>
 
   <template #body:head:*.parameters>
-    <code>{ column: string }</code>
+
+  `{ column: string }`
+
   </template>
   <template #body:head:*.description>
     Header cell in each column.
   </template>
 
   <template #body:body:_row_._column_.description>
-    Body cell in the row corresponding to <code>[row]</code> and the column corresponding to <code>[column]</code>. Fallback to <code>body:*.[column]</code>.
+
+  Body cell in the row corresponding to `[row]` and the column corresponding to `[column]`. Fallback to `body:*.[column]`.
+
   </template>
 
   <template #body:body:*._column_.parameters>
-    <code>{ row: string }</code>
+
+  `{ row: string }`
+
   </template>
   <template #body:body:*._column_.description>
-    Body cell in the column corresponding to <code>[column]</code>. Fallback to <code>body:[row].*</code>.
+
+  Body cell in the column corresponding to `[column]`. Fallback to `body:[row].*`.
+
   </template>
 
   <template #body:body:_row_.*.parameters>
-    <code>{ column: string }</code>
+
+  `{ column: string }`
+
   </template>
   <template #body:body:_row_.*.description>
-    Body cell in the row corresponding to <code>[row]</code>. Fallback to <code>body:*.*</code>.
+
+  Body cell in the row corresponding to `[row]`. Fallback to `body:*.*`.
+
   </template>
 
   <template #body:body:*.*.parameters>
-    <code>{ row: string, column: string }</code>
+
+  `{ row: string, column: string }`
+
   </template>
   <template #body:body:*.*.description>
     Body cell in each row and column.
diff --git a/docs/components/text.md b/docs/components/text.md
index ad6b8ea..75f5ab7 100644
--- a/docs/components/text.md
+++ b/docs/components/text.md
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RSpace, RTable, RText } from 'roughness'
+import { RDetails, RSpace, RTable, RText } from 'roughness'
 </script>
 
 # Text
@@ -10,6 +10,9 @@ The secret of being boring is to say everything.
 
 ### Basic
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RSpace, RText } from 'roughness'
@@ -27,6 +30,8 @@ import { RSpace, RText } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RText>Normal</RText>
   <RText type="primary">Primary</RText>
@@ -38,6 +43,9 @@ import { RSpace, RText } from 'roughness'
 
 ### Tag
 
+<RDetails>
+  <template #summary>Show Code</template>
+
 ```vue
 <script lang="ts" setup>
 import { RSpace, RText } from 'roughness'
@@ -49,6 +57,8 @@ import { RSpace, RText } from 'roughness'
 </template>
 ```
 
+</RDetails>
+
 <RSpace>
   <RText tag="h1" type="error">Statement on the second meeting of the International Health Regulations (2005) Emergency Committee regarding the outbreak of novel coronavirus (2019-nCoV)</RText>
   <RText tag="small">Who really cares?</RText>
@@ -66,20 +76,28 @@ import { RSpace, RText } from 'roughness'
   <template #body:*.name="{ row }">{{ row }}</template>
 
   <template #body:tag.type>
-    <code>string</code>
+
+  `string`
+
   </template>
   <template #body:tag.default>
-    <code>'span'</code>
+
+  `'span'`
+
   </template>
   <template #body:tag.description>
     HTML tag for rendering the text.
   </template>
 
   <template #body:type.type>
-    <code>string</code>, but usually <code>'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'</code>
+
+  `string`, but usually `'default' | 'primary' | 'info' | 'success' | 'warning' | 'error'`
+
   </template>
   <template #body:type.default>
-    <code>'default'</code>
+
+  `'default'`
+
   </template>
   <template #body:type.description>
     Text style type.
diff --git a/src/button/index.vue b/src/button/index.vue
index bf4c0b7..44f57c7 100644
--- a/src/button/index.vue
+++ b/src/button/index.vue
@@ -51,8 +51,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   }
   if (rounded) {
     const ellipse = rc.ellipse(
-      Math.round(svg.width.baseVal.value / 2) - padding,
-      Math.round(svg.height.baseVal.value / 2) - padding,
+      Math.round(svg.width.baseVal.value / 2),
+      Math.round(svg.height.baseVal.value / 2),
       svg.width.baseVal.value - padding * 2,
       svg.height.baseVal.value - padding * 2,
       options,
@@ -86,13 +86,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 <style lang="scss" scoped>
 @use '../common/_partials';
 
-:global(:root) {
-  --r-button-border-width: 1;
-  --r-button-border-dash: none;
-  --r-button-color: var(--r-common-text-color);
-}
 .r-button {
+  --r-button-color: var(--r-common-text-color);
   --r-button-border-color: var(--r-button-color);
+  --r-button-border-width: 1;
+  --r-button-border-dash: none;
   appearance: none;
   display: inline-block;
   padding: var(--r-common-box-padding);
diff --git a/src/components.ts b/src/components.ts
index 133900e..7b64add 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -1,4 +1,5 @@
 export { default as RButton } from './button/index.vue'
+export { default as RDetails } from './details/index.vue'
 export { default as RGraphics } from './graphics/index.vue'
 export { default as RGridGuide } from './grid-guide/index.vue'
 export { default as RSpace } from './space/index.vue'
diff --git a/src/details/index.vue b/src/details/index.vue
new file mode 100644
index 0000000..291b1d1
--- /dev/null
+++ b/src/details/index.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { useElementHover } from '@vueuse/core'
+import type { Options } from 'roughjs/bin/core'
+import type { Point } from 'roughjs/bin/geometry'
+import type { RoughSVG } from 'roughjs/bin/svg'
+import { watchEffect } from 'vue'
+import RGraphics from '../graphics/index.vue'
+
+const {
+  open = false,
+} = defineProps<{
+  open?: boolean,
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:open', value: typeof open): void,
+}>()
+
+let internalOpen = $ref(open)
+
+watchEffect(() => {
+  internalOpen = open
+})
+
+function toggle(event: Event) {
+  internalOpen = (event.target as HTMLDetailsElement).open
+  emit('update:open', internalOpen)
+}
+
+let summary = $ref<HTMLElement>()
+
+const hovered = $(useElementHover($$(summary)))
+
+function draw(rc: RoughSVG, svg: SVGSVGElement) {
+  void hovered
+  const options: Options = {
+    stroke: 'var(--r-detail-summary-color)',
+    fill: 'var(--r-detail-summary-color)',
+  }
+  const padding = 2
+  const points: Point[] = internalOpen ? [
+    [padding, Math.round(svg.height.baseVal.value / 8) + padding],
+    [svg.width.baseVal.value - padding * 2, Math.round(svg.height.baseVal.value / 8) + padding],
+    [Math.round(svg.width.baseVal.value / 2), svg.height.baseVal.value - padding * 2],
+  ] : [
+    [Math.round(svg.width.baseVal.value / 8) + padding, padding],
+    [Math.round(svg.width.baseVal.value / 8) + padding, svg.height.baseVal.value - padding * 2],
+    [svg.width.baseVal.value - padding * 2, Math.round(svg.height.baseVal.value / 2)],
+  ]
+  const polygon = rc.polygon(points, options)
+  svg.appendChild(polygon)
+}
+</script>
+
+<template>
+  <details :data-open="open" :open="internalOpen" class="r-details" @toggle="toggle">
+    <summary ref="summary" class="r-details__summary">
+      <span class="r-details__summary-marker">
+        <RGraphics @draw="draw" />
+      </span>
+      <slot name="summary"></slot>
+    </summary>
+    <slot></slot>
+  </details>
+</template>
+
+<style lang="scss" scoped>
+.r-details {
+  --r-detail-summary-color: var(--r-common-text-color);
+  --r-details-summary-marker-size: var(--r-common-line-height);
+}
+.r-details__summary {
+  display: flex;
+  align-items: center;
+  color: var(--r-detail-summary-color);
+  cursor: pointer;
+  &::marker {
+    content: none;
+  }
+}
+.r-details__summary-marker {
+  display: inline-block;
+  flex: none;
+  width: var(--r-details-summary-marker-size);
+  height: var(--r-details-summary-marker-size);
+  margin-right: calc(var(--r-details-summary-marker-size) / 4);
+  pointer-events: none;
+}
+</style>
diff --git a/src/graphics/index.vue b/src/graphics/index.vue
index 41f41bf..727e113 100644
--- a/src/graphics/index.vue
+++ b/src/graphics/index.vue
@@ -10,17 +10,15 @@ defineOptions({
 })
 
 const {
-  ctx,
   responsive = true,
   tag = 'svg',
 } = defineProps<{
-  ctx?: any,
   responsive?: boolean,
   tag?: T,
 }>()
 
 const emit = defineEmits<{
-  (event: 'draw', rc: T extends 'canvas' ? RoughCanvas : RoughSVG, svg: T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement, ctx: any): void,
+  (event: 'draw', rc: T extends 'canvas' ? RoughCanvas : RoughSVG, svg: T extends 'canvas' ? HTMLCanvasElement : SVGSVGElement): void,
 }>()
 
 const parent = $(useParentElement())
@@ -57,7 +55,7 @@ watchEffect(() => {
   } else {
     root.innerHTML = ''
   }
-  emit('draw', rc, root, ctx)
+  emit('draw', rc, root)
 })
 </script>
 
diff --git a/src/grid-guide/index.vue b/src/grid-guide/index.vue
index bfa2681..57ad205 100644
--- a/src/grid-guide/index.vue
+++ b/src/grid-guide/index.vue
@@ -90,13 +90,8 @@ watchEffect(() => {
 </template>
 
 <style lang="scss" scoped>
-:global(:root) {
-  --r-grid-guide-color: #f5f5f5;
-}
-:global(:root.dark) {
-  --r-grid-guide-color: rgb(255 255 255 / 0.1);
-}
 .r-grid-guide {
+  --r-grid-guide-color: #f5f5f5;
   pointer-events: none;
   &.is-responsive {
     position: absolute;
@@ -105,6 +100,9 @@ watchEffect(() => {
     width: 100%;
     height: 100%;
   }
+  :root.dark & {
+    --r-grid-guide-color: rgb(255 255 255 / 0.1);
+  }
 }
 :global(:has(> .r-grid-guide.is-responsive)) {
   position: relative;
diff --git a/src/link/index.vue b/src/link/index.vue
index a5b8e9e..724c870 100644
--- a/src/link/index.vue
+++ b/src/link/index.vue
@@ -19,11 +19,9 @@ const {
 <style lang="scss" scoped>
 @use '../common/_partials';
 
-:global(:root) {
+.r-link {
   --r-link-color: var(--r-common-text-color);
   --r-link-underline-width: 1;
-}
-.r-link {
   color: var(--r-link-color);
   font-size: var(--r-common-font-size);
   line-height: var(--r-common-line-height);
diff --git a/src/space/index.vue b/src/space/index.vue
index f0e7e5d..e073d4f 100644
--- a/src/space/index.vue
+++ b/src/space/index.vue
@@ -6,7 +6,7 @@ defineOptions({
 })
 
 const {
-  align = 'start',
+  align: userAlign,
   justify = 'start',
   vertical = false,
   wrap = true,
@@ -17,6 +17,10 @@ const {
   wrap?: boolean,
 }>()
 
+const align = $computed(() => {
+  return userAlign ?? (vertical ? 'stretch' : 'start')
+})
+
 const style = $computed<HTMLAttributes['style']>(() => {
   return {
     'justify-content': ['start', 'end'].includes(justify) ? `flex-${justify}` : justify,
@@ -34,10 +38,8 @@ const style = $computed<HTMLAttributes['style']>(() => {
 </template>
 
 <style lang="scss" scoped>
-:global(:root) {
-  --r-space-size: 12px;
-}
 .r-space {
+  --r-space-size: 12px;
   display: flex;
   gap: var(--r-space-size);
 }
diff --git a/src/table/index.vue b/src/table/index.vue
index ec2b902..0fa73ae 100644
--- a/src/table/index.vue
+++ b/src/table/index.vue
@@ -77,7 +77,8 @@ onMounted(() => {
   calculateDimensions()
 })
 
-function draw(rc: RoughSVG, svg: SVGSVGElement, { x, y }: TableDimensions) {
+function draw(rc: RoughSVG, svg: SVGSVGElement) {
+  const { x, y } = dimensions
   const padding = 2
   const options: Options = {
     stroke: 'var(--r-table-border-color)',
@@ -114,7 +115,7 @@ const helpers = {
 
 <template>
   <table class="r-table">
-    <RGraphics :ctx="dimensions" @draw="draw" />
+    <RGraphics @draw="draw" />
     <thead v-if="header" ref="head">
       <tr>
         <th v-for="column in columns" :key="column">
@@ -141,10 +142,8 @@ const helpers = {
 </template>
 
 <style lang="scss" scoped>
-:global(:root) {
-  --r-table-border-color: var(--r-common-text-color);
-}
 .r-table {
+  --r-table-border-color: var(--r-common-text-color);
   td, th {
     padding: var(--r-common-box-padding);
     color: var(--r-button-color);
diff --git a/src/text/index.vue b/src/text/index.vue
index 0ec6bce..341260d 100644
--- a/src/text/index.vue
+++ b/src/text/index.vue
@@ -19,10 +19,8 @@ const {
 </template>
 
 <style lang="scss" scoped>
-:global(:root) {
-  --r-text-color: var(--r-common-text-color);
-}
 .r-text {
+  --r-text-color: var(--r-common-text-color);
   color: var(--r-text-color);
   &.primary {
     --r-text-color: var(--r-common-primary-color);