@natachah/vanilla-frontend 0.1.5 → 0.1.7

package/docs/pages/base/typography.html

@@ -96,6 +96,10 @@
                 --anchor-hover-color
                 --anchor-active-color
                 --anchor-disabled-opacity
+                --anchor-focus-size
+                --anchor-focus-style
+                --anchor-focus-color
+                --anchor-focus-offset
             </doc-code>
         </div>
 

package/docs/pages/components/card.html

@@ -151,7 +151,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                card
+                    card
                 );
             </doc-code>
         </div>
@@ -176,7 +176,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                card: (primary)
+                    card: (primary)
                 );
             </doc-code>
         </div>

package/docs/pages/components/dialog.html

@@ -27,7 +27,7 @@
         <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>
+                <h3 tabindex="0">Hey this is a dialog as non-modal !</h3>
                 <p>Hello there !</p>
                 <button data-dialog-close>Close the dialog</button>
             </dialog>
@@ -82,6 +82,8 @@
             </doc-code>
         </div>
 
+        <blockquote class="note">Add a <code>tabindex="0"</code> to the heading to focus on it when opened !</blockquote>
+
         <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>
 
@@ -92,7 +94,7 @@
         <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>
+                <header tabindex="0">This is a header</header>
                 <div>
                     <p>This is the content</p>
                     <p>This dialog is a modal</p>
@@ -104,7 +106,7 @@
 
         <doc-code>
             <dialog id="myDialog" class="demo-dialog" aria-modal="true">
-                <header>This is a header</header>
+                <header tabindex="0">This is a header</header>
                 <div>
                     <p>This is the content</p>
                     <button data-dialog-close>Close</button>
@@ -182,11 +184,11 @@
             <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
-                    })
+                new Dialog(demoDialogFormJS)
+                demoDialogFormJS.addEventListener('dialog:submited', (e) => {
+                const value = e.detail.form.querySelector('input').value
+                document.getElementById('favorite').innerText = value
+                })
                 }
             </doc-code>
         </div>
@@ -316,13 +318,13 @@
         <doc-code data-type="js">
             // E.G. basic opening
             document.getElementById('myDialogID').addEventListener('dialog:opening', () => {
-                console.log('The dialog is opening')
+            console.log('The dialog is opening')
             })
 
             // E.G. with form value
             document.getElementById('myDialogID').addEventListener('dialog:submited', (e) => {
-                const theHTMLForm = e.detail.form
-                ...
+            const theHTMLForm = e.detail.form
+            ...
             })
         </doc-code>
 

package/docs/pages/components/drawer.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Javascript > Drawer</title>
+</head>
+
+<body data-preload>
+    <doc-layout>
+
+        <h1>Drawer</h1>
+        <p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
+
+        <p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>backdrop</code> to quickly design the drawer with some nice animations</p>
+
+        <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">
+                <div id="backdrop"></div>
+                <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
+                    <svg viewbox="0 0 100 100" width="100%">
+                        <rect width="100" height="10" x="0" y="10" rx="0"></rect>
+                        <rect width="100" height="10" x="0" y="45" rx="0"></rect>
+                        <rect width="100" height="10" x="0" y="80" rx="0"></rect>
+                    </svg>
+                </button>
+                <div id="drawer" class="drawer" tabindex="0" hidden>
+                    My awsome drawer !
+                </div>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @use '@natachah/vanilla-frontend/scss/components/drawer';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --drawer-display
+                --drawer-background
+                --drawer-index
+                --drawer-position
+                --drawer-width
+                --drawer-height
+                --drawer-max-width
+                --drawer-max-height
+                --drawer-origin
+                --drawer-animation
+                --drawer-trasnform
+                --drawer-backdrop-color
+                --drawer-backdrop-filter
+                --svg-line-size
+            </doc-code>
+            <doc-code id="js" data-type="js" role="tabpanel">
+                import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
+                const drawer = document.getElementById('drawer')
+                if (drawer) new Drawer(drawer, { breakpoint : 960 })
+            </doc-code>
+        </div>
+
+        <blockquote class="note">The <code>#backdrop</code> must be a child of the <code>&lt;body&gt;</code> ! <br> And the default CSS breakpoint to view the backdrop is 960px</blockquote>
+
+        <h2>Javascript</h2>
+        <p>This component is mostly in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
+        <p>You can customize the breakpoint when initiate the component.</p>
+        <p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
+
+        <blockquote>
+            <p>Main use case are sidebar menu or main navigation menu.</p>
+            <p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
+        </blockquote>
+
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+
+</html>

package/docs/pages/components/list.html

@@ -126,7 +126,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                list
+                    list
                 );
             </doc-code>
         </div>
@@ -161,7 +161,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                list: (primary)
+                    list: (primary)
                 );
             </doc-code>
         </div>

package/docs/pages/javascript/scroll.html

@@ -14,10 +14,10 @@
         <p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p>
         <doc-demo>
             <nav id="demoScrollNav">
-                <ul>
-                    <li><a href="#target1" aria-current="location">One</a></li>
-                    <li><a href="#target2">Two</a></li>
-                    <li><a href="#target3">Three</a></li>
+                <ul class="list">
+                    <li><a role="button" href="#target1" aria-current="location">One</a></li>
+                    <li><a role="button" href="#target2">Two</a></li>
+                    <li><a role="button" href="#target3">Three</a></li>
                     <li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
                     <li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
                 </ul>

package/docs/pages/javascript/tabpanel.html

@@ -76,8 +76,8 @@
         <doc-code data-type="js">
             const myPanel = document.getElementById('myPanel')
             myPanel.addEventListener('tabpanel:changed', (e) => {
-            const thecurrentButton = e.detail.current
-            console.log('It has changed !')
+                const thecurrentButton = e.detail.current
+                console.log('It has changed !')
             })
         </doc-code>
 

package/docs/pages/javascript/toggle.html

@@ -15,7 +15,7 @@
         <p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>
         <doc-demo>
             <button class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
-            <div id="collapse" hidden>
+            <div id="collapse" tabindex="0" hidden>
                 Hello there !
             </div>
         </doc-demo>
@@ -27,7 +27,7 @@
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
                 <button id="toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
-                <div id="collapse" hidden>
+                <div id="collapse" tabindex="0" hidden>
                     Hello there !
                 </div>
             </doc-code>
@@ -179,7 +179,7 @@
         <doc-code data-type="js">
             const myToggle = document.getElementById('myToggle')
             myToggle.addEventListener('toggle:changed', () => {
-                console.log('It has changed !')
+            console.log('It has changed !')
             })
         </doc-code>
 

package/docs/pages/javascript/tree.html

@@ -24,13 +24,13 @@
                     <button role="link" aria-controls="treelist" aria-expanded="false">
                         1: Inventore, perspiciatis (Open)
                     </button>
-                    <ul id="treelist" hidden>
+                    <ul id="treelist" tabindex="0" hidden>
                         <li>2: Lorem</li>
                         <li>
                             <button role="link" aria-controls="subtreelist" aria-expanded="false">
                                 2: Adipisci (Open)
                             </button>
-                            <ul id="subtreelist" hidden>
+                            <ul id="subtreelist" tabindex="0" hidden>
                                 <li>3: Lorem</li>
                                 <li>3: Adipisci</li>
                                 <li>3: Facilis</li>
@@ -55,13 +55,13 @@
                         <button role="link" aria-controls="treelist" aria-expanded="false">
                             1: Inventore, perspiciatis (Open)
                         </button>
-                        <ul id="treelist" hidden>
+                        <ul id="treelist" tabindex="0" hidden>
                             <li>2: Lorem</li>
                             <li>
                                 <button role="link" aria-controls="subtreelist" aria-expanded="false">
                                     2: Adipisci (Open)
                                 </button>
-                                <ul id="subtreelist" hidden>
+                                <ul id="subtreelist" tabindex="0" hidden>
                                     <li>3: Lorem</li>
                                     <li>3: Adipisci</li>
                                     <li>3: Facilis</li>
@@ -94,13 +94,13 @@
                     <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
                         <td>1: Cum, dolorum (open me)</td>
                     </tr>
-                    <tr id="row1" aria-level="2" hidden>
+                    <tr id="row1" aria-level="2" tabindex="0" hidden>
                         <td>2: Lorem</td>
                     </tr>
                     <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
                         <td>2: Quo (open me)</td>
                     </tr>
-                    <tr id="row2-1" aria-level="3" hidden>
+                    <tr id="row2-1" aria-level="3" tabindex="0" hidden>
                         <td>2.1: Quo</td>
                     </tr>
                     <tr id="row2-2" aria-level="3" hidden>
@@ -125,13 +125,13 @@
                     <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
                         <td>1: Cum, dolorum (open me)</td>
                     </tr>
-                    <tr id="row1" aria-level="2" hidden>
+                    <tr id="row1" aria-level="2" tabindex="0" hidden>
                         <td>2: Lorem</td>
                     </tr>
                     <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
                         <td>2: Quo (open me)</td>
                     </tr>
-                    <tr id="row2-1" aria-level="3" hidden>
+                    <tr id="row2-1" aria-level="3" tabindex="0" hidden>
                         <td>2.1: Quo</td>
                     </tr>
                     <tr id="row2-2" aria-level="3" hidden>
@@ -159,15 +159,12 @@
                     <tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
                         <td>
                             <span data-handle="tree">
-                                <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"></path>
-                                </svg>
                                 (open me)
                             </span>
                         </td>
                         <td>1: Cum, dolorum</td>
                     </tr>
-                    <tr id="rowExpandable" aria-level="2" hidden>
+                    <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
                         <td></td>
                         <td>1.1: Lorem</td>
                     </tr>
@@ -188,7 +185,7 @@
                         </td>
                         <td>1: Cum, dolorum</td>
                     </tr>
-                    <tr id="rowExpandable" aria-level="2" hidden>
+                    <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
                         <td></td>
                         <td>1.1: Lorem</td>
                     </tr>

package/docs/pages/quick-start/customization.html

@@ -28,60 +28,69 @@
         <doc-code data-type="scss">
             :root {
 
-                // Typography
-                --font-size: 16px;
-                --line-height: 1.5;
-                --font-family: Arial;
-                --font-weight: normal;
-
-                --font-size-h1: 2.25em; // 36px
-                --font-size-h2: 2.00em; // 32px
-                --font-size-h3: 1.75em; // 28px
-                --font-size-h4: 1.50em; // 24px
-                --font-size-h5: 1.25em; // 20px
-                --font-size-h6: 1.125em; // 18px
-                --font-size-large: 1.125em; // 18px
-                --font-size-small: .875em; // 14px
-
-                // Anchor
-                --decoration: none;
-
-                // Layouts
-                --padding-inline: .75em;
-                --padding-block: .5em;
-
-                // Border
-                --border-size: 1px;
-                --border-style: solid;
-                --border-radius: .25rem;
-
-                // Focus (outline)
-                --focus-size: 3px;
-                --focus-style: solid;
-                --focus-offset: 0;
-                --focus-opacity: 50%;
-
-                // Hover (color-mix)
-                --hover-color: black;
-                --hover-percent: 5%;
-
-                // Active (color-mix)
-                --active-color: black;
-                --active-percent: 10%;
-
-                // Disabled
-                --disabled-opacity: 50%;
-
-                // Colors
-                --color-body: white;
-                --color-font: black;
-                --color-primary: #B790E5;
-                --color-error: #DC3030;
-                --color-success: #008A00;
-                --color-warning: #FFA500;
-
-                // Contrasts
-                --color-warning-contrast: black;
+            // Typography
+            --font-size: 16px;
+            --line-height: 1.5;
+            --font-family: Arial;
+            --font-weight: normal;
+
+            --font-size-h1: 2.25em; // 36px
+            --font-size-h2: 2.00em; // 32px
+            --font-size-h3: 1.75em; // 28px
+            --font-size-h4: 1.50em; // 24px
+            --font-size-h5: 1.25em; // 20px
+            --font-size-h6: 1.125em; // 18px
+            --font-size-large: 1.125em; // 18px
+            --font-size-small: .875em; // 14px
+
+            // Anchor
+            --decoration: none;
+
+            // Layouts
+            --padding-inline: .75em;
+            --padding-block: .5em;
+
+            // Border
+            --border-size: 1px;
+            --border-style: solid;
+            --border-radius: .25rem;
+
+            // Focus (outline)
+            --focus-size: 3px;
+            --focus-style: solid;
+            --focus-offset: 0;
+            --focus-opacity: 50%;
+
+            // Hover (color-mix)
+            --hover-color: black;
+            --hover-percent: 5%;
+
+            // Active (color-mix)
+            --active-color: black;
+            --active-percent: 10%;
+
+            // Disabled
+            --disabled-opacity: 50%;
+
+            // Colors
+            --color-body: white;
+            --color-font: black;
+            --color-primary: #B790E5;
+            --color-error: #DC3030;
+            --color-success: #008A00;
+            --color-warning: #FFA500;
+
+            // Contrasts
+            --color-warning-contrast: black;
+
+            // Icons
+            --icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" /></svg>');
+            --icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" /><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" /></svg>');
+            --icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" /><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z" /></svg>');
+            --icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" /></svg>');
+            --icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" /></svg>');
+            --icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" /></svg>');
+            --icon-switch: var(--icon-radio);
 
             }
         </doc-code>
@@ -129,28 +138,28 @@
         <doc-code data-type="scss">
             @forward '@natachah/vanilla-frontend/scss/abstracts/_options.scss' with (
 
-                $colors: (
-                    primary,
-                    success,
-                    error,
-                    warning
-                );
-
-                $color-variations: (
-                    badge: $colors,
-                    button: $colors,
-                    card: $colors,
-                    disclosure: $colors,
-                    list: $colors
-                );
-
-                $outline-variations: (
-                    badge,
-                    button,
-                    card,
-                    disclosure,
-                    list
-                );
+            $colors: (
+            primary,
+            success,
+            error,
+            warning
+            );
+
+            $color-variations: (
+            badge: $colors,
+            button: $colors,
+            card: $colors,
+            disclosure: $colors,
+            list: $colors
+            );
+
+            $outline-variations: (
+            badge,
+            button,
+            card,
+            disclosure,
+            list
+            );
             );
         </doc-code>
 
@@ -164,16 +173,16 @@
 
         <doc-code data-type="scss">
             @use '@natachah/vanilla-frontend/scss/abstracts/_default.scss' with (
-                $item-properties: (
-                    color: var(--color-font),
-                    background: transparent,
-                    border-size: var(--border-size),
-                    border-style: var(--border-style),
-                    border-color: transparent,
-                    border-radius: var(--border-radius),
-                    padding-inline: var(--padding-inline),
-                    padding-block: var(--padding-block)
-                );
+            $item-properties: (
+            color: var(--color-font),
+            background: transparent,
+            border-size: var(--border-size),
+            border-style: var(--border-style),
+            border-color: transparent,
+            border-radius: var(--border-radius),
+            padding-inline: var(--padding-inline),
+            padding-block: var(--padding-block)
+            );
             );
         </doc-code>
 

package/docs/pages/quick-start/installation.html

@@ -80,6 +80,7 @@
             import Consent from "@natachah/vanilla-frontend/js/_consent"
             import Dialog from "@natachah/vanilla-frontend/js/_dialog"
             import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
+            import Drawer from "@natachah/vanilla-frontend/js/_drawer"
             import Scroll from "@natachah/vanilla-frontend/js/_scroll"
             import Slider from "@natachah/vanilla-frontend/js/_slider"
             import Sortable from "@natachah/vanilla-frontend/js/_sortable"

package/docs/pages/quick-start/mixins.html

@@ -113,7 +113,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                my-component-name
+                    my-component-name
                 );
             </doc-code>
         </div>
@@ -144,7 +144,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $color-variations: (
-                my-component-name: (primary, other-color)
+                    my-component-name: (primary, other-color)
                 );
             </doc-code>
         </div>
@@ -185,9 +185,9 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 @container (max-width:800px) {
-                table {
-                @include as-responsive-table()
-                }
+                    table {
+                        @include as-responsive-table()
+                    }
                 }
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
@@ -219,11 +219,11 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 #wider {
-                @include flex-grid-wider-column(3)
+                    @include flex-grid-wider-column(3)
                 }
 
                 #offset {
-                @include flex-grid-offset-column(2)
+                    @include flex-grid-offset-column(2)
                 }
             </doc-code>
         </div>

package/docs/src/js/doc-code.js

@@ -61,7 +61,7 @@ class DocCode extends HTMLElement {
         const type = this.getAttribute('data-type') ?? 'html'
 
         // Clean the code
-        let content = type === 'html' ? this.innerHTML : this.textContent
+        let content = type === 'html' || type === 'scss' ? this.innerHTML : this.textContent
         var pattern = content.match(/\s*\n[\t\s]*/)
         content = content.replace(new RegExp(pattern, "g"), '\n').replaceAll('=""', '')
         content = content.trim()

package/docs/src/js/doc-layout.js

@@ -4,7 +4,7 @@ class DocLayout extends HTMLElement {
         this.innerHTML = `
             <div id="backdrop"></div>
             <header>
-                <button aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Toggle the sidebar navigation">
+                <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Toggle the sidebar navigation">
                     <svg viewbox="0 0 100 100" width="100%">
                         <rect width="100" height="10" x="0" y="10" rx="0"></rect>
                         <rect width="100" height="10" x="0" y="45" rx="0"></rect>
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.1.5
+                                0.1.7
                             </span>
                         </li>
                         <li>
@@ -36,7 +36,7 @@ class DocLayout extends HTMLElement {
                     </ul>
                 </nav>
             </header>
-            <aside id="sidebar" tabindex="0" hidden>
+            <aside id="sidebar" class="drawer" tabindex="0" hidden>
                 <header>
                     <a href="/index.html">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket" viewBox="0 0 16 16">
@@ -73,6 +73,7 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/components/card.html">Card</a></li>
                         <li><a href="/pages/components/dialog.html">Dialog</a></li>
                         <li><a href="/pages/components/disclosure.html">Disclosure</a></li>
+                        <li><a href="/pages/components/drawer.html">Drawer</a></li>
                         <li><a href="/pages/components/dropdown.html">Dropdown</a></li>
                         <li><a href="/pages/components/form.html">Form</a></li>
                         <li><a href="/pages/components/list.html">List</a></li>
@@ -88,7 +89,6 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/javascript/comfort.html">Comfort</a></li>
                         <li><a href="/pages/javascript/consent.html">Consent</a></li>
                         <li><a href="/pages/javascript/cookie.html">Cookie</a></li>
-                        <li><a href="/pages/javascript/drawer.html">Drawer</a></li>
                         <li><a href="/pages/javascript/form.html">Form helper</a></li>
                         <li><a href="/pages/javascript/scroll.html">Scroll</a></li>
                         <li><a href="/pages/javascript/sortable.html">Sortable</a></li>

package/docs/src/scss/layout.scss

@@ -37,43 +37,6 @@ doc-layout {
         gap: 1rem;
     }
 
-    // The open/close button for the sidebar
-    > header button {
-
-        rect {
-            transition: y .25s ease-in-out .25s, rotate .25s ease-in-out, opacity 0ms .25s;
-            transform-origin: center;
-        }
-
-        // Active
-        &[aria-expanded=true] {
-
-            // Define the rectangle transition for the reverse animation
-            rect {
-                transition: y .25s ease-in-out, rotate .25s ease-in-out .25s, opacity 0ms .25s;
-            }
-
-            // Remove the middle bar
-            rect:not(:first-child, :last-child) {
-                opacity: 0;
-            }
-
-            // Change the first bar
-            rect:first-child {
-                y: calc(50% - var(--svg-line-size, 10px) / 2);
-                rotate: 45deg;
-            }
-
-            // Change the last bar
-            rect:last-child {
-                y: calc(50% - var(--svg-line-size, 10px) / 2);
-                rotate: -45deg;
-            }
-
-        }
-
-    }
-
     > main {
         grid-area: main;
         overflow-y: auto;
@@ -81,38 +44,14 @@ doc-layout {
 
     aside {
 
+        --drawer-display: grid;
+        --drawer-transform: translatex(-100%);
+
         // Set the grid for the sidebar based on the parent grid
         grid-area: aside;
-        display: grid !important;
         grid-template-rows: subgrid;
         grid-template-areas: "header" "main" "footer";
 
-        // Make the sidebar as stiky for mobile
-        position: sticky;
-        z-index: 2;
-        top: 0;
-        width: 320px;
-        max-width: 80vw;
-        height: 100vh;
-
-        // Animation
-        transition: all .5s ease-in-out;
-        transform-origin: left;
-        transform: none;
-
-        // Show the sidebar
-        pointer-events: initial;
-        visibility: visible;
-        transform: translateX(0);
-
-        // Hide the sidebar
-        &[hidden] {
-            pointer-events: none;
-            overflow: hidden auto;
-            visibility: hidden;
-            transform: translateX(-100%);
-        }
-
         // Design the nav
         > nav {
             overflow-y: auto;
@@ -131,34 +70,6 @@ doc-layout {
         }
     }
 
-    #backdrop {
-        // Design the backdrop
-        position: fixed;
-        inset: 0;
-        z-index: 1;
-        background-color: rgba(0, 0, 0, .25);
-        backdrop-filter: blur(.25rem);
-
-        // Animation
-        transition: all .5s ease-in-out;
-
-        // By default it's hidden
-        pointer-events: none;
-        visibility: hidden;
-        opacity: 0;
-    }
-
-    // Make backdrop visible if breakpoint
-    @media (max-width:960px) {
-        &:has(aside:not([hidden])) {
-            #backdrop {
-                visibility: visible;
-                pointer-events: initial;
-                opacity: 1;
-            }
-        }
-    }
-
     @media (min-width: 960px) {
         &:has(aside:not([hidden])) {
             grid-template-columns: 320px 1fr;

package/js/_toggle.js

@@ -103,6 +103,8 @@ export default class Toggle extends BaseComponent {
             // Toggle the [hidden] attribute
             toggable.hidden = this.value !== toggleValue && groupValue !== toggleValue
 
+            if (!toggable.hidden && toggable.hasAttribute('tabindex')) toggable.focus()
+
         })
 
         // Update the [aria-expanded] attribute if there is any toggables visible

package/js/_tree.js

@@ -72,6 +72,12 @@ export default class Tree extends BaseComponent {
         // Toggle the [hidden] attribute on the children
         children.forEach(child => child.hidden = isExpanded)
 
+        // Set the focus on the required child
+        if (!isExpanded) {
+            const childToFocus = children.find(el => el.hasAttribute('tabindex')) ?? null
+            if (childToFocus) childToFocus.focus()
+        }
+
         // If type grid, collapse the subchildren
         if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this.toggle(child))
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.1.5",
+    "version": "0.1.7",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",

package/scss/base/_reset.scss

@@ -65,45 +65,37 @@ summary {
 }
 
 // Force the hidden
-[hidden] {
+[hidden=true],
+[hidden=""] {
     display: none !important;
 }
 
+// Change cursor for item with aria-control or data-handle
+[aria-controls]:not(:has([data-handle])),
+[data-handle] {
+    cursor: pointer;
+}
+
 // Change cursor for draggable
 [draggable] {
 
-    &:not(:has([data-handle])),
-    [data-handle] {
+    &:not(:has([data-handle=sortable])),
+    [data-handle=sortable] {
         cursor: grab;
     }
 
     &[aria-grabbed=true],
-    &[aria-grabbed=true] [data-handle] {
+    &[aria-grabbed=true] [data-handle=sortable] {
         cursor: grabbing;
     }
 
 }
 
-// Change cursor for tree + basic animation on svg
-[aria-controls],
-[data-handle] {
-    cursor: pointer;
-}
-
-[aria-controls][aria-expanded=true] [data-handle] > svg {
-    transform: rotate(90deg);
-}
-
-// Reduce animation on scroll for #target
+// Reduce animation on scroll for #target + data-handle SVG
 @media screen and (prefers-reduced-motion: no-preference) {
     :has(:target) {
         scroll-behavior: smooth;
     }
-
-    [data-handle] > svg {
-        transition: all .25s ease-in-out;
-    }
-
 }
 
 // Define the bases for the body 

package/scss/components/_drawer.scss

@@ -0,0 +1,117 @@
+////
+/// ------------------------------------------------------------------
+/// Drawer
+/// ------------------------------------------------------------------
+/// Create the drawer component
+///
+///
+/// @group components
+/// @author Natacha Herth
+///
+////
+
+.drawer {
+
+    // Design
+    display: var(--drawer-display, block);
+    background-color: var(--drawer-background, var(--color-body));
+
+    // Make the drawer as sticky for mobile
+    position: sticky;
+    z-index: var(--drawer-index, 2);
+    inset: var(--drawer-position, 0);
+
+    // Set the size
+    width: var(--drawer-width, 320px);
+    height: var(--drawer-height, 100vh);
+    max-width: var(--drawer-max-width, 80dvw);
+    max-height: var(--drawer-max-height, 100dvh);
+
+    // For animation
+    transform-origin: var(--drawer-origin, left);
+    transform: none;
+
+    // Show
+    pointer-events: initial;
+    visibility: visible;
+    transform: translateX(0);
+    opacity: 1;
+
+    // Animation
+    @media screen and (prefers-reduced-motion: no-preference) {
+        transition: var(--drawer-animation, all 0.5s ease-in-out);
+    }
+
+    // Hide the drawer
+    &[hidden] {
+        pointer-events: none;
+        overflow: hidden;
+        visibility: hidden;
+        transform: var(--drawer-transform, translatex(100%));
+        opacity: 0;
+        display: var(--drawer-display, block) !important; // ! REQUIRED to avoid the display:none of [hidden]
+    }
+
+}
+
+.drawer-button {
+    rect {
+        transform-origin: center;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+            transition: y .25s ease-in-out .25s, rotate .25s ease-in-out, opacity 0ms .25s;
+        }
+    }
+
+    // Active
+    &[aria-expanded=true] {
+
+        // Remove the middle bar
+        rect:not(:first-child, :last-child) {
+            opacity: 0;
+        }
+
+        // Change the first bar
+        rect:first-child {
+            y: calc(50% - var(--svg-line-size, 10px) / 2);
+            rotate: 45deg;
+        }
+
+        // Change the last bar
+        rect:last-child {
+            y: calc(50% - var(--svg-line-size, 10px) / 2);
+            rotate: -45deg;
+        }
+
+    }
+}
+
+body #backdrop {
+    // Design the backdrop
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    background: var(--drawer-backdrop-background, var(--backdrop-color, rgba(black, .75)));
+    backdrop-filter: var(--drawer-backdrop-filter, var(--backdrop-filter, blur(.5rem)));
+
+    // By default it's hidden
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+
+    // Animation
+    @media screen and (prefers-reduced-motion: no-preference) {
+        transition: all .5s ease-in-out;
+    }
+}
+
+// Make backdrop visible if breakpoint
+@media (max-width:960px) {
+    body:has(.drawer:not([hidden])) {
+        #backdrop {
+            visibility: visible;
+            pointer-events: initial;
+            opacity: 1;
+        }
+    }
+}

package/scss/components/_form.scss

@@ -116,7 +116,7 @@ select {
         width: $size;
         border: none;
         border-radius: $size;
-        box-shadow: calc(-400px - $size / 2) 0 0 400px color-mix(in srgb, var(--range-color, currentColor), transparent 75%);
+        box-shadow: calc(-1000px - $size / 2) 0 0 1000px color-mix(in srgb, var(--range-color, currentColor), transparent 75%);
     }
 
     padding: calc($size / 2) 0;

package/scss/components/index.scss

@@ -4,6 +4,7 @@
 @forward "./card";
 @forward "./dialog";
 @forward "./disclosure";
+@forward "./drawer";
 @forward "./dropdown";
 @forward "./form";
 @forward "./group";

package/docs/pages/javascript/drawer.html

@@ -1,50 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Javascript > Drawer</title>
-</head>
-
-<body data-preload>
-    <doc-layout>
-
-        <h1>Drawer</h1>
-        <p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
-
-        <h2>Javascript</h2>
-        <p>This component is only in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
-        <p>You can customize the breakpoint when initiate the component.</p>
-        <p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
-
-        <blockquote>
-            <p>Main use case are sidebar menu or main navigation menu.</p>
-            <p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
-        </blockquote>
-
-        <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">
-                <div id="backdrop"></div>
-                <button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
-                <aside id="drawer" tabindex="0" hidden>
-                    <button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
-                    My drawer
-                </aside>
-            </doc-code>
-            <doc-code id="js" data-type="js" role="tabpanel">
-                import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
-                const drawer = document.getElementById('drawer')
-                if (drawer) new Drawer(drawer, { breakpoint : 960 })
-            </doc-code>
-        </div>
-
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-
-</html>