npm - @natachah/vanilla-frontend - Versions diffs - 0.0.2 - Mend

@natachah/vanilla-frontend 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/.gitlab-ci.yml +40 -0
package/LICENSE.md +7 -0
package/README.md +11 -0
package/docs/index.html +36 -0
package/docs/main.js +32 -0
package/docs/pages/components/badge.html +154 -0
package/docs/pages/components/button.html +186 -0
package/docs/pages/components/card.html +184 -0
package/docs/pages/components/dialog.html +334 -0
package/docs/pages/components/disclosure.html +310 -0
package/docs/pages/components/dropdown.html +255 -0
package/docs/pages/components/form.html +331 -0
package/docs/pages/components/list.html +140 -0
package/docs/pages/components/loading.html +58 -0
package/docs/pages/components/media.html +130 -0
package/docs/pages/components/nav.html +119 -0
package/docs/pages/components/progress.html +47 -0
package/docs/pages/components/slider.html +311 -0
package/docs/pages/components/table.html +168 -0
package/docs/pages/javascript/autofill.html +170 -0
package/docs/pages/javascript/checkall.html +59 -0
package/docs/pages/javascript/comfort.html +134 -0
package/docs/pages/javascript/consent.html +112 -0
package/docs/pages/javascript/cookie.html +81 -0
package/docs/pages/javascript/form.html +199 -0
package/docs/pages/javascript/scroll.html +209 -0
package/docs/pages/javascript/sidebar.html +53 -0
package/docs/pages/javascript/sortable.html +148 -0
package/docs/pages/javascript/toggle.html +191 -0
package/docs/pages/javascript/tree.html +221 -0
package/docs/pages/layout/grid.html +201 -0
package/docs/pages/layout/reset.html +53 -0
package/docs/pages/layout/typography.html +324 -0
package/docs/pages/quick-start/conventions.html +112 -0
package/docs/pages/quick-start/customization.html +187 -0
package/docs/pages/quick-start/installation.html +95 -0
package/docs/pages/quick-start/mixins.html +228 -0
package/docs/pages/test.html +15 -0
package/docs/src/js/demo.js +98 -0
package/docs/src/js/doc-code.js +102 -0
package/docs/src/js/doc-demo.js +14 -0
package/docs/src/js/doc-layout.js +108 -0
package/docs/src/scss/demo.scss +77 -0
package/docs/src/scss/layout.scss +160 -0
package/docs/src/scss/style.scss +278 -0
package/docs/vite.config.mjs +23 -0
package/esbuild.mjs +25 -0
package/js/_autofill.js +131 -0
package/js/_check-all.js +77 -0
package/js/_comfort.js +174 -0
package/js/_consent.js +84 -0
package/js/_dialog.js +164 -0
package/js/_dropdown.js +101 -0
package/js/_scroll.js +184 -0
package/js/_sidebar.js +97 -0
package/js/_slider.js +249 -0
package/js/_sortable.js +143 -0
package/js/_tabpanel.js +88 -0
package/js/_toggle.js +123 -0
package/js/_tree.js +85 -0
package/js/tests/autofill.test.js +157 -0
package/js/tests/base-component.test.js +108 -0
package/js/tests/check-all.test.js +88 -0
package/js/tests/comfort.test.js +219 -0
package/js/tests/consent.test.js +84 -0
package/js/tests/cookie.test.js +102 -0
package/js/tests/dialog.test.js +189 -0
package/js/tests/dropdown.test.js +115 -0
package/js/tests/form-helper.test.js +155 -0
package/js/tests/scroll.test.js +203 -0
package/js/tests/sidebar.test.js +99 -0
package/js/tests/slider.test.js +307 -0
package/js/tests/sortable.test.js +124 -0
package/js/tests/tabpanel.test.js +114 -0
package/js/tests/toggle.test.js +190 -0
package/js/tests/tree.test.js +165 -0
package/js/utilities/_base-component.js +101 -0
package/js/utilities/_cookie.js +98 -0
package/js/utilities/_error.js +80 -0
package/js/utilities/_form-helper.js +101 -0
package/package.json +42 -0
package/scss/_badge.scss +37 -0
package/scss/_button.scss +34 -0
package/scss/_card.scss +122 -0
package/scss/_dialog.scss +116 -0
package/scss/_disclosure.scss +101 -0
package/scss/_dropdown.scss +68 -0
package/scss/_form.scss +197 -0
package/scss/_grid.scss +40 -0
package/scss/_group.scss +57 -0
package/scss/_list.scss +18 -0
package/scss/_loading.scss +49 -0
package/scss/_media.scss +37 -0
package/scss/_nav.scss +72 -0
package/scss/_progress.scss +40 -0
package/scss/_slider.scss +35 -0
package/scss/_table.scss +36 -0
package/scss/utilities/_mixin.scss +322 -0
package/scss/utilities/_reset.scss +145 -0
package/scss/utilities/_typography.scss +107 -0
package/scss/vanilla-frontend.scss +23 -0
package/scss/variables/_root.scss +70 -0
package/scss/variables/_setting.scss +63 -0
package/vitest.config.js +7 -0

package/docs/pages/components/dialog.html ADDED Viewed

@@ -0,0 +1,334 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Components > Dialog</title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h1>Dialog</h1>
+        <p>The dialog is using the native <code>&lt;dialog&gt;</code> tag.</p>
+        <p>You can define if the dialog is a <b>modal</b> with the <code>aria-modal</code> attribute.</p>
+        <blockquote>
+            <p>
+                <b>Difference between modal and non-modal:</b><br>
+                The key difference is the level interaction and interaction restriction.
+                A modal will block interaction with the main content, and they have their own context focus (use of a backdrop). But a non-modal don't impose context and restriction.
+            </p>
+        </blockquote>
+        <doc-demo>
+            <button aria-controls="demoDialog">Open the dialog</button>
+            <dialog id="demoDialog" class="demo-dialog">
+                <h3>Hey this is a dialog as non-modal !</h3>
+                <p>Hello there !</p>
+                <button data-dialog-close>Close the dialog</button>
+            </dialog>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="scss">SCSS</button>
+                <button role="tab" aria-controls="css">CSS</button>
+                <button role="tab" aria-controls="js">JS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <button aria-controls="myDialog">Open the dialog</button>
+                <dialog id="myDialog" aria-modal="true">
+                    Content of the dialog
+                    <button data-dialog-close>Close the dialog</button>
+                </dialog>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_dialog';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --dialog-color
+                --dialog-background
+                --dialog-border-size
+                --dialog-border-style
+                --dialog-border-color
+                --dialog-border-radius
+                --dialog-padding-inline
+                --dialog-padding-block
+                --dialog-position
+                --dialog-width
+                --dialog-height
+                --dialog-max-width
+                --dialog-max-height
+                --dialog-index
+                --dialog-backdrop-background
+                --dialog-backdrop-filter
+                --dialog-open-animation
+                --dialog-open-transform
+                --dialog-close-animation
+                --dialog-close-transform
+                --dialog-divider-size
+                --dialog-divider-style
+                --dialog-divider-color
+            </doc-code>
+            <doc-code id="js" data-type="js" role="tabpanel">
+                import Dialog from "@natachah/vanilla-frontend/js/_dialog"
+                const myDialog = document.getElementById('myDialog')
+                if (myDialog) new Dialog(myDialog)
+            </doc-code>
+        </div>
+        <p>To work properly you must have a <code>&lt;button&gt;</code> in your page with the attribute <code>aria-controls=&quot;IdOfDialogToOpen&quot;</code> that will open the dialog.</p>
+        <p>And inside your <code>&lt;dialog&gt;</code> you should have a <code>&lt;button&gt;</code> with the attribute <code>data-dialog-close</code> to close the dialog.</p>
+        <h2>Layout</h2>
+        <p>The dialog can have a <code>&lt;header&gt;</code> and/or <code>&lt;footer&gt;</code> inside to create a more complexe layout.</p>
+        <doc-demo>
+            <button aria-controls="demoDialogLayout">Open the dialog</button>
+            <dialog id="demoDialogLayout" class="demo-dialog" aria-modal="true">
+                <header>This is a header</header>
+                <div>
+                    <p>This is the content</p>
+                    <p>This dialog is a modal</p>
+                    <button data-dialog-close>Close</button>
+                </div>
+                <footer>This is a footer</footer>
+            </dialog>
+        </doc-demo>
+        <doc-code>
+            <dialog id="myDialog" class="demo-dialog" aria-modal="true">
+                <header>This is a header</header>
+                <div>
+                    <p>This is the content</p>
+                    <button data-dialog-close>Close</button>
+                </div>
+                <footer>This is a footer</footer>
+            </dialog>
+        </doc-code>
+        <h2>Form</h2>
+        <p>You can submit a <code>&lt;form&gt;</code> inside the <code>&lt;dialog&gt;</code>.</p>
+        <doc-demo>
+            <button aria-controls="demoDialogForm">Open the dialog</button>
+            <dialog id="demoDialogForm" class="demo-dialog" aria-modal="true">
+                <h3>Dialog with form</h3>
+                <form method="POST">
+                    <label for="animal">What is your favorite animal</label>
+                    <input id="animal" type="text" name="animal" required>
+                    <button type="reset" data-dialog-close>Cancel</button>
+                    <button type="submit">Default submit</button>
+                </form>
+            </dialog>
+        </doc-demo>
+        <doc-code>
+            <button aria-controls="myDialog">Open the dialog</button>
+            <dialog id="myDialog" aria-modal="true">
+                <h3>Dialog with form</h3>
+                <form method="POST">
+                    <label for="animal">What is your favorite animal</label>
+                    <input id="animal" type="text" name="animal" required>
+                    <button type="reset" data-dialog-close>Cancel</button>
+                    <button type="submit">Default submit</button>
+                </form>
+            </dialog>
+        </doc-code>
+        <p>If you want to submit via <b>javascript</b> add the <code>method=&quot;dialog&quot;</code> attribute on the <code>&lt;form&gt;</code> or the <code>formmethod=&quot;dialog&quot;</code> attribute on the <code>&lt;button&gt;</code>.</p>
+        <p>Then you should use the event <b>dialog:submited</b> to catch the values.</p>
+        <doc-demo>
+            <button aria-controls="demoDialogFormJs">Open the dialog</button>
+            <dialog id="demoDialogFormJs" class="demo-dialog" aria-modal="true">
+                <h3>Dialog with form</h3>
+                <form method="dialog">
+                    <label for="animal">What is your favorite animal</label>
+                    <input id="animal" type="text" name="animal" required>
+                    <button type="reset" data-dialog-close>Cancel</button>
+                    <button type="submit">Javascript submit</button>
+                </form>
+            </dialog>
+            <p>Your favorite animal is: <span id="favorite">--</span></p>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="js">JS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <button aria-controls="myDialog">Open the dialog</button>
+                <dialog id="myDialog" aria-modal="true">
+                    <h3>Dialog with form</h3>
+                    <form method="dialog">
+                        <label for="animal">What is your favorite animal</label>
+                        <input id="animal" type="text" name="animal" required>
+                        <button type="reset" data-dialog-close>Cancel</button>
+                        <button type="submit">Javascript submit</button>
+                    </form>
+                </dialog>
+                <p>Your favorite animal is: <span id="favorite">--</span></p>
+            </doc-code>
+            <doc-code id="js" data-type="js" role="tabpanel">
+                const demoDialogFormJS = document.getElementById('myDialog')
+                if (demoDialogFormJS) {
+                    new Dialog(demoDialogFormJS)
+                    demoDialogFormJS.addEventListener('dialog:submited', (e) => {
+                        const value = e.detail.form.querySelector('input').value
+                        document.getElementById('favorite').innerText = value
+                    })
+                }
+            </doc-code>
+        </div>
+        <h2>Javascript</h2>
+        <blockquote>
+            <p>To work properly the dialog required some javascript.</p>
+        </blockquote>
+        <h3>Methods</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Method</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Method">
+                        <p>open()</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This method will open the dialog</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Method">
+                        <p>close()</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This method will close the dialog</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Method">
+                        <p>submit()</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This method will submit the dialog</p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <h3>Events</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Event</th>
+                    <th>Description</th>
+                    <th>Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:opening</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired when the method <code>open()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p>-</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:opened</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired after the method <code>open()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p>-</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:closing</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired when the method <code>close()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p>-</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:closed</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired after the method <code>close()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p>-</p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:submiting</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired when the method <code>submit()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>form</code> as an <code>HTMLElement</code></p>
+                    </td>
+                </tr>
+                <tr>
+                    <td data-label="Event">
+                        <p>dialog:submited</p>
+                    </td>
+                    <td data-label="Description">
+                        <p>This event is fired after the method <code>submit()</code> is called</p>
+                    </td>
+                    <td data-label="Value">
+                        <p><code>form</code> as an <code>HTMLElement</code></p>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <doc-code data-type="js">
+            // E.G. basic opening
+            document.getElementById('myDialogID').addEventListener('dialog:opening', () => {
+                console.log('The dialog is opening')
+            })
+            // E.G. with form value
+            document.getElementById('myDialogID').addEventListener('dialog:submited', (e) => {
+                const theHTMLForm = e.detail.form
+                ...
+            })
+        </doc-code>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

package/docs/pages/components/disclosure.html ADDED Viewed

@@ -0,0 +1,310 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Components > Disclosure</title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h1>Disclosure</h1>
+        <p>The disclosure is using the native <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags.</p>
+        <doc-demo>
+            <details>
+                <summary>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+                    </svg>
+                    Some disclosure
+                </summary>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
+                        reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
+                        voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                    </p>
+                </div>
+            </details>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="scss">SCSS</button>
+                <button role="tab" aria-controls="css">CSS</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <details>
+                    <summary>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+                        </svg>
+                        Title
+                    </summary>
+                    <div>
+                        Content
+                    </div>
+                </details>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_disclosure';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --disclosure-color
+                --disclosure-background
+                --disclosure-border-size
+                --disclosure-border-style
+                --disclosure-border-color
+                --disclosure-border-radius
+                --disclosure-padding-inline
+                --disclosure-padding-block
+                --disclosure-transition
+                --disclosure-decoration
+                --disclosure-focus-size
+                --disclosure-focus-style
+                --disclosure-focus-color
+                --disclosure-focus-offset
+                --disclosure-hover-color
+                --disclosure-hover-background
+                --disclosure-hover-border-color
+                --disclosure-active-color
+                --disclosure-active-background
+                --disclosure-active-border-color
+                --disclosure-disabled-opacity
+                --disclosure-svg-transform
+            </doc-code>
+        </div>
+        <blockquote class="tip">
+            <p>It's recommended to add a <code>&lt;div&gt;</code> around the inside content for better design.</p>
+        </blockquote>
+        <h2>States</h2>
+        <p>The <code>&lt;summary&gt;</code> can have multiple states as <code>:focus</code>, <code>:hover</code> and <code>:active</code></p>
+        <blockquote>
+            <p>The active state is automatically displayed when the disclosure is <code>open</code>.</p>
+        </blockquote>
+        <h2>Variants</h2>
+        <h3>Outline</h3>
+        <p>You can create an outline variation by adding the class <code>.outline</code>.</p>
+        <doc-demo>
+            <details>
+                <summary class="outline">
+                    Some disclosure
+                </summary>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
+                        reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
+                        voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                    </p>
+                </div>
+            </details>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="scss">setting.scss</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <details>
+                    <summary class="outline">
+                        Some disclosure
+                    </summary>
+                    <div>
+                        ...
+                    </div>
+                </details>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                $outline-variations: (
+                    disclosure
+                );
+            </doc-code>
+        </div>
+        <blockquote class="todo">
+            <p>This feature must be optimize...</p>
+        </blockquote>
+        <h3>Color</h3>
+        <p>You can create a color variation by adding the class <code>.{COLOR}</code>.</p>
+        <p>The variation can be applied on:</p>
+        <ul>
+            <li>The full component on the<code>&lt;details&gt;</code></li>
+            <li>Only the button, on the <code>&lt;summary&gt;</code></li>
+            <li>Only the content, on the <code>&lt;div&gt;</code></li>
+        </ul>
+        <doc-demo>
+            <details class="primary">
+                <summary>
+                    Some disclosure FULL primary
+                </summary>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
+                        reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
+                        voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                    </p>
+                </div>
+            </details>
+            <details style="margin-top:1rem">
+                <summary class="primary">
+                    Some disclosure with ONLY summary as primary
+                </summary>
+                <div>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
+                        reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
+                        voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                    </p>
+                </div>
+            </details>
+            <details style="margin-top:1rem">
+                <summary>
+                    Some disclosure with ONLY content as primary
+                </summary>
+                <div class="primary">
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
+                        reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
+                        voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                    </p>
+                </div>
+            </details>
+        </doc-demo>
+        <div class="code-group">
+            <div role="tablist">
+                <button role="tab" aria-controls="html">HTML</button>
+                <button role="tab" aria-controls="scss">setting.scss</button>
+            </div>
+            <doc-code id="html" data-type="html" role="tabpanel">
+                <details class="primary">
+                    <summary>
+                        Some disclosure FULL primary
+                    </summary>
+                    <div>
+                        ...
+                    </div>
+                </details>
+                <details>
+                    <summary class="primary">
+                        Some disclosure with ONLY summary as primary
+                    </summary>
+                    <div>
+                        ...
+                    </div>
+                </details>
+                <details>
+                    <summary>
+                        Some disclosure with ONLY content as primary
+                    </summary>
+                    <div class="primary">
+                        ...
+                    </div>
+                </details>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                $color-variations: (
+                    disclosure: (primary)
+                );
+            </doc-code>
+        </div>
+        <blockquote class="todo">
+            <p>This feature must be optimize...</p>
+        </blockquote>
+        <h3>Group</h3>
+        <p>You can group some disclosure by putting them in a <code>&lt;div&gt;</code> with the class <code>.accordion</code>.</p>
+        <doc-demo>
+            <div class="accordion">
+                <details>
+                    <summary>
+                        Disclosure A
+                    </summary>
+                    <div>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam.
+                        </p>
+                    </div>
+                </details>
+                <details>
+                    <summary>
+                        Disclosure B
+                    </summary>
+                    <div>
+                        <p>
+                            Ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam.
+                        </p>
+                    </div>
+                </details>
+                <details>
+                    <summary>
+                        Disclosure C
+                    </summary>
+                    <div>
+                        <p>
+                            Aliquid nihil sequi beatae architecto ullam quisquam
+                            voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
+                        </p>
+                    </div>
+                </details>
+            </div>
+        </doc-demo>
+        <doc-code>
+            <div class="accordion">
+                <details>
+                    <summary>
+                        Disclosure A
+                    </summary>
+                    <div>
+                        AAA
+                    </div>
+                </details>
+                <details>
+                    <summary>
+                        Disclosure B
+                    </summary>
+                    <div>
+                        BBB
+                    </div>
+                </details>
+                <details>
+                    <summary>
+                        Disclosure C
+                    </summary>
+                    <div>
+                        CCC
+                    </div>
+                </details>
+            </div>
+        </doc-code>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>