Mention details

Author: NullVoxPopuli

docs-app/public/docs/3-ui/accordion.md

@@ -2,7 +2,94 @@
 
 An accordion component is an element that organizes content into collapsible sections, enabling users to expand or collapse them for efficient information presentation and navigation.
 
-`<Accordion::Accordion />` can be used in any design system.
+<Callout>
+
+Before reaching for this component, consider if the [native `<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) is sufficient for your use case.
+
+
+<details><summary>example of <code>details</code></summary>
+
+Like with the component, `<details>` and `<summary>` can be styled with CSS.
+
+```gjs live preview
+// No imports needed!
+// Though, as a TODO: for this component, we'll soon have a multi-details 
+// management wrapper in case you want only one `<details>` open at a time.
+
+<template>
+  <div class="demo">
+    <details>
+      <summary>the header</summary>
+
+      <span>
+        Ember.js is a productive, battle-tested JavaScript framework for building modern web
+        applications. It includes everything you need to build rich UIs that work on any device.
+      </span>
+    </details>
+
+    <details>
+      <summary>another header</summary>
+
+      <span>
+        Ember.js is a productive, battle-tested JavaScript framework for building modern web
+        applications. It includes everything you need to build rich UIs that work on any device.
+      </span>
+    </details>
+
+    <details>
+      <summary>a third header</summary>
+
+      <span>
+        Ember.js is a productive, battle-tested JavaScript framework for building modern web
+        applications. It includes everything you need to build rich UIs that work on any device.
+      </span>
+    </details>
+  </div>
+
+  <style>
+    details {
+      position: relative;
+      padding-bottom: 1rem;
+    }
+    summary {
+      cursor: pointer;
+      margin-bottom: -1rem;
+      transition-property: all;
+      transition-duration: 150ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+      background: white;
+      padding: 0.5rem;
+      color: black;
+      border: 1px solid;
+      border-radius: 0.25rem;
+      position: relative;
+      z-index: 2;
+    }
+    details[open] > summary {
+      background: #dcdcff; 
+      font-weight: bold;
+      margin-bottom: 1rem;
+    }
+
+    details > span {
+      position: relative;
+      z-index: 1;
+    }
+
+    .demo {
+      margin: 1rem; 
+      padding: 1rem;
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
+</template>
+```
+
+</details>
+
+</Callout>
 
 ## Examples