npm - @natachah/vanilla-frontend - Versions diffs - 0.1.3 → 0.1.5 - Mend

@natachah/vanilla-frontend 0.1.3 → 0.1.5

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 (22) hide show

package/docs/main.js +2 -2
package/docs/pages/components/button.html +16 -2
package/docs/pages/components/form.html +25 -1
package/docs/pages/javascript/{sidebar.html → drawer.html} +17 -16
package/docs/pages/javascript/tree.html +84 -64
package/docs/src/js/doc-layout.js +2 -2
package/js/{_sidebar.js → _drawer.js} +16 -15
package/js/_tree.js +3 -3
package/js/tests/{sidebar.test.js → drawer.test.js} +27 -27
package/js/tests/tree.test.js +11 -10
package/js/utilities/_cookie.js +2 -2
package/natachah-vanilla-frontend-0.1.5.tgz +0 -0
package/package.json +1 -1
package/scss/abstracts/_mixins.scss +2 -0
package/scss/base/_reset.scss +11 -17
package/scss/base/_typography.scss +3 -2
package/scss/components/_button.scss +1 -1
package/scss/components/_card.scss +0 -2
package/scss/components/_dropdown.scss +1 -1
package/scss/components/_form.scss +7 -7
package/scss/themes/_root.scss +8 -0
package/natachah-vanilla-frontend-0.1.3.tgz +0 -0

package/docs/main.js CHANGED Viewed

@@ -22,9 +22,9 @@ if (current.startsWith('/pages/')) document.querySelectorAll(`#sidebar a[href*="
 })
 // My awsome sidebar !!!
-import Sidebar from './../js/_sidebar.js'
+import Drawer from './../js/_drawer.js'
 const sidebar = document.getElementById('sidebar')
-if (sidebar) new Sidebar(sidebar)
+if (sidebar) new Drawer(sidebar)
 // Code group
 import Tabpanel from './../js/_tabpanel.js'

package/docs/pages/components/button.html CHANGED Viewed

@@ -119,7 +119,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    button
+                button
                 );
             </doc-code>
         </div>
@@ -145,11 +145,25 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    button: (primary)
+                button: (primary)
                 );
             </doc-code>
         </div>
+        <h3>As link</h3>
+        <p>You can create a button that look as a simple link with the attribute <code>role="link"</code>.</p>
+        <doc-demo>
+            <button role="link">As link</button>
+            <button role="link" disabled>As disabled link</button>
+        </doc-demo>
+        <doc-code data-typ="html">
+            <button role="link">As link</button>
+            <button role="link" disabled>As disabled link</button>
+        </doc-code>
         <h3>Group</h3>
         <p>You can group some badge by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>

package/docs/pages/components/form.html CHANGED Viewed

@@ -77,6 +77,10 @@
             <input type="file" name="file" accept="image/png, image/jpeg">
         </doc-demo>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-file)</code>.</p>
+        </blockquote>
         <p>The type <b>date</b>, <b>time</b> and <b>datetime-local</b> come with default icon.</p>
         <doc-demo>
             <input type="date" name="date">
@@ -84,6 +88,10 @@
             <input type="datetime-local" name="datetime">
         </doc-demo>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-date)</code> and <code>var(--icon-time)</code>.</p>
+        </blockquote>
         <blockquote class="warning">
             <p>Hard to make it 100% similar on all browser.</p>
         </blockquote>
@@ -113,6 +121,10 @@
             </select>
         </doc-demo>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-select)</code>.</p>
+        </blockquote>
         <h3>Range</h3>
         <p>The <b>range</b> field look more like a progress bar.</p>
         <doc-demo>
@@ -174,6 +186,10 @@
             </fieldset>
         </doc-code>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-radio)</code>.</p>
+        </blockquote>
         <h3>Checkbox</h3>
         <p>The <b>checkbox</b> field must be inside a <code>&lt;fieldset&gt;</code>.</p>
         <p>By default the checkboxes are displayed inline.</p>
@@ -231,6 +247,10 @@
             </fieldset>
         </doc-code>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-check)</code>.</p>
+        </blockquote>
         <h3>Switch</h3>
         <p>The <b>checkbox</b> with the <code>role=&quot;switch&quot;</code> attribute will render a switch component.</p>
         <doc-demo>
@@ -240,6 +260,10 @@
             <input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
         </doc-code>
+        <blockquote class="info">
+            <p>You can change the icon via <code>var(--icon-switch)</code>.</p>
+        </blockquote>
         <h2>States</h2>
         <p>The form fields can have multiple states as <code>:focus</code>, <code>:disabled</code>, <code>:readonly</code> and <code>:validation</code>.</p>
@@ -323,7 +347,7 @@
                 @use '@natachah/vanilla-frontend/scss/components/group';
             </doc-code>
         </div>
     </doc-layout>
     <script type="module" src="/main.js"></script>
 </body>

package/docs/pages/javascript/{sidebar.html → drawer.html} RENAMED Viewed

@@ -4,19 +4,24 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Documentations: Javascript > Sidebar</title>
+    <title>Documentations: Javascript > Drawer</title>
 </head>
 <body data-preload>
     <doc-layout>
-        <h1>Sidebar</h1>
-        <p>The sidebar component make you able to toggle a sidebar with a button and resize window.</p>
+        <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 Sidebar object.</p>
+        <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.</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">
@@ -25,23 +30,19 @@
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
                 <div id="backdrop"></div>
-                <button aria-expanded="false" aria-pressed="false" aria-controls="sidebar">Toggle</button>
-                <aside id="sidebar" tabindex="0" hidden>
-                    <button aria-expanded="false" aria-pressed="false" aria-controls="sidebar">Toggle</button>
-                    My sidebar
+                <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 Sidebar from '@natachah/vanilla-frontend/js/utilities/_sidebar.js'
-                const sidebar = document.getElementById('sidebar')
-                if (sidebar) new Sidebar(sidebar, { breakpoint : 960 })
+                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>
-            <p>This documentation use the sidebar as an exemple !</p>
-        </blockquote>
     </doc-layout>
     <script type="module" src="/main.js"></script>
 </body>

package/docs/pages/javascript/tree.html CHANGED Viewed

@@ -10,28 +10,36 @@
 <body data-preload>
     <doc-layout>
+        <blockquote class="warning">
+            <p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p>
+        </blockquote>
         <h1>Tree</h1>
         <p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p>
         <p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>
         <doc-demo>
-            <ul class="demo-tree" role="tree">
-                <li role="treeitem">1: Lorem, ipsum</li>
-                <li role="treeitem">
-                    <span aria-expanded="false" aria-owns="treelist">1: Inventore, perspiciatis (open me)</span>
+            <ul class="demo-tree">
+                <li>1: Lorem, ipsum</li>
+                <li>
+                    <button role="link" aria-controls="treelist" aria-expanded="false">
+                        1: Inventore, perspiciatis (Open)
+                    </button>
                     <ul id="treelist" hidden>
-                        <li role="treeitem">2: Lorem</li>
-                        <li role="treeitem">
-                            <span aria-expanded="false" aria-owns="subtreelist">2: Adipisci (open me)</span>
+                        <li>2: Lorem</li>
+                        <li>
+                            <button role="link" aria-controls="subtreelist" aria-expanded="false">
+                                2: Adipisci (Open)
+                            </button>
                             <ul id="subtreelist" hidden>
-                                <li role="treeitem">3: Lorem</li>
-                                <li role="treeitem">3: Adipisci</li>
-                                <li role="treeitem">3: Facilis</li>
+                                <li>3: Lorem</li>
+                                <li>3: Adipisci</li>
+                                <li>3: Facilis</li>
                             </ul>
                         </li>
-                        <li role="treeitem">1: Facilis</li>
+                        <li>1: Facilis</li>
                     </ul>
                 </li>
-                <li role="treeitem">Dolor, quis</li>
+                <li>Dolor, quis</li>
             </ul>
         </doc-demo>
@@ -41,47 +49,55 @@
                 <button role="tab" aria-controls="js">JS</button>
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
-                <ul id="treeList" role="tree">
-                    <li role="treeitem">Lorem, ipsum</li>
-                    <li role="treeitem">
-                        <span aria-expanded="false" aria-owns="treelist">Inventore, perspiciatis</span>
+                <ul class="demo-tree">
+                    <li>1: Lorem, ipsum</li>
+                    <li>
+                        <button role="link" aria-controls="treelist" aria-expanded="false">
+                            1: Inventore, perspiciatis (Open)
+                        </button>
                         <ul id="treelist" hidden>
-                            <li role="treeitem">Lorem</li>
-                            <li role="treeitem">
-                                <span aria-expanded="false" aria-owns="subtreelist">Adipisci</span>
+                            <li>2: Lorem</li>
+                            <li>
+                                <button role="link" aria-controls="subtreelist" aria-expanded="false">
+                                    2: Adipisci (Open)
+                                </button>
                                 <ul id="subtreelist" hidden>
-                                    <li role="treeitem">Adipisci: Lorem</li>
-                                    <li role="treeitem">Adipisci: Adipisci</li>
-                                    <li role="treeitem">Adipisci: Facilis</li>
+                                    <li>3: Lorem</li>
+                                    <li>3: Adipisci</li>
+                                    <li>3: Facilis</li>
                                 </ul>
                             </li>
-                            <li role="treeitem">Facilis</li>
+                            <li>1: Facilis</li>
                         </ul>
                     </li>
-                    <li role="treeitem">Dolor, quis</li>
+                    <li>Dolor, quis</li>
                 </ul>
             </doc-code>
             <doc-code id="js" data-type="js" role="tabpanel">
                 import Tree from "@natachah/vanilla-frontend/js/_tree"
-                const treeList = document.getElementById('treeList')
+                const treeList = document.querySelector('.demo-tree')
                 if (treeList) new Tree(treeList)
             </doc-code>
         </div>
+        <blockquote class="note">
+            <p>Into a <code>&lt;li&gt;</code> you must add a <code>&lt;button&gt;</code> to toggle the children, otherwise it will toggle if you click on any child.</p>
+        </blockquote>
         <p>This can also be implemented on a <code>&lt;table&gt;</code> but it required the <code>role=&quot;treegrid&quot;</code> attribute.</p>
         <doc-demo>
-            <table class="demo-tree" role="treegrid">
+            <table class="demo-tree">
                 <tbody>
                     <tr aria-level="1">
                         <td>1: Lorem, ipsum</td>
                     </tr>
-                    <tr aria-level="1" aria-expanded="false" aria-owns="row1 row2 row3">
+                    <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>
                         <td>2: Lorem</td>
                     </tr>
-                    <tr id="row2" aria-level="2" aria-expanded="false" aria-owns="row2-1 row2-2" hidden>
+                    <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>
@@ -106,14 +122,14 @@
                     <tr aria-level="1">
                         <td>1: Lorem, ipsum</td>
                     </tr>
-                    <tr aria-level="1" aria-expanded="false" aria-owns="row1 row2 row3">
-                        <td>1: Cum, dolorum</td>
+                    <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>
                         <td>2: Lorem</td>
                     </tr>
-                    <tr id="row2" aria-level="2" aria-expanded="false" aria-owns="row2-1 row2-2" hidden>
-                        <td>2: Quo</td>
+                    <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>
                         <td>2.1: Quo</td>
@@ -138,41 +154,45 @@
         <h2>Handle</h2>
         <p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>
         <doc-demo>
-            <ul class="demo-tree" role="tree">
-                <li role="treeitem">
-                    <span aria-expanded="false" aria-owns="sublist">
-                        <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>
-                        </span>
-                        Inventore, perspiciatis
-                    </span>
-                    <ul id="sublist" hidden>
-                        <li>Some children</li>
-                        <li>Some children</li>
-                        <li>Some children</li>
-                    </ul>
-                </li>
-            </ul>
+            <table class="demo-tree">
+                <tbody>
+                    <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>
+                        <td></td>
+                        <td>1.1: Lorem</td>
+                    </tr>
+            </table>
         </doc-demo>
         <doc-code>
-            <ul role="tree">
-                ...
-                <li role="treeitem">
-                    <span aria-expanded="false" aria-owns="treelist">
-                        <span data-handle="tree">
-                            HANDLE
-                        </span>
-                        Inventore, perspiciatis
-                    </span>
-                    <ul id="treelist" hidden>
-                        ...
-                    </ul>
-                </li>
-                ...
-            </ul>
+            <table class="demo-tree">
+                <tbody>
+                    <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>
+                        <td></td>
+                        <td>1.1: Lorem</td>
+                    </tr>
+            </table>
         </doc-code>
         <blockquote class="tip">

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

@@ -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.3
+                                0.1.5
                             </span>
                         </li>
                         <li>
@@ -88,9 +88,9 @@ 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/sidebar.html">Sidebar</a></li>
                         <li><a href="/pages/javascript/sortable.html">Sortable</a></li>
                         <li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
                         <li><a href="/pages/javascript/toggle.html">Toggle</a></li>

package/js/{_sidebar.js → _drawer.js} RENAMED Viewed

@@ -1,8 +1,9 @@
 /**
  * ------------------------------------------------------------------
- * Sidebar
+ * Drawer
  * ------------------------------------------------------------------
- * This class enable the functionality to toggles multiple tabpanel
+ * This class enable the functionality to toggles a drawer to show/hide some content
+ * Most used case is a sidebar or a main menu to hide on mobile
  *
  * @author Natacha Herth
  * @copyright Natacha Herth, design & web development
@@ -12,7 +13,7 @@
 import BaseComponent from './utilities/_base-component'
 import ErrorMessage from "./utilities/_error"
-export default class Sidebar extends BaseComponent {
+export default class Drawer extends BaseComponent {
     static OPTIONS = {
         breakpoint: 960,
@@ -30,12 +31,12 @@ export default class Sidebar extends BaseComponent {
         if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
         // Run the SUPER constructor from BaseComponent
-        super(el, options, 'sidebar')
+        super(el, options, 'drawer')
         // Define the properties
         this._buttons = document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? []
-        this._backdrop = document.getElementById('backdrop')
+        this._backdrop = document.getElementById('backdrop') ?? null
         this._timeout = false
@@ -55,10 +56,10 @@ export default class Sidebar extends BaseComponent {
      */
     #init() {
-        // On load check if need to open/close the sidebar
+        // On load check if need to open/close the drawer
         if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.toggle()
-        // On resize check if need to open/close the sidebar
+        // On resize check if need to open/close the drawer
         window.onresize = () => {
             clearTimeout(this._timeout)
             this._timeout = setTimeout(() => {
@@ -66,19 +67,19 @@ export default class Sidebar extends BaseComponent {
             }, 250)
         }
-        // On click on the button toggle the sidebar
-        this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle()))
+        // On click on the button toggle the drawer
+        this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle(true)))
-        // On click on the backdrop, close the sidebar
-        this._backdrop.addEventListener('click', () => this.toggle())
+        // On click on the backdrop, close the drawer
+        if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
     }
     /**
-     * Toggle the sidebar
+     * Toggle the drawer
      *
      */
-    toggle() {
+    toggle(enableFocus = false) {
         // Change the state
         this._isOpen = !this._isOpen
@@ -89,11 +90,11 @@ export default class Sidebar extends BaseComponent {
             button.setAttribute('aria-expanded', this._isOpen)
         })
-        // Change the [hidden] attribute on the sidebar
+        // Change the [hidden] attribute on the drawer
         this._element.hidden = !this._isOpen
         // Toggle the focus
-        if (this._focus && this._isOpen) this._focus.focus()
+        if (enableFocus && this._focus && this._isOpen) this._focus.focus()
     }

package/js/_tree.js CHANGED Viewed

@@ -25,9 +25,9 @@ export default class Tree extends BaseComponent {
         super(el, options, 'tree')
         // Define the properties
-        this._type = this._element.role == 'tree' ? 'list' : 'grid'
+        this._type = this._element.tagName == 'TABLE' ? 'grid' : 'list'
-        this._withHandle = this._element.querySelector('[data-handle=tree]') ? true : false
+        this._withHandle = this._type == 'grid' && this._element.querySelector('[data-handle=tree]') ? true : false
         this._items = this._element.querySelectorAll('[aria-expanded]')
@@ -67,7 +67,7 @@ export default class Tree extends BaseComponent {
         item.setAttribute('aria-expanded', !isExpanded)
         // Get children to toggle
-        const children = item.hasAttribute('aria-owns') ? item.getAttribute('aria-owns').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
+        const children = item.hasAttribute('aria-controls') ? item.getAttribute('aria-controls').split(' ').filter(id => document.getElementById(id)).map(id => document.getElementById(id)) : []
         // Toggle the [hidden] attribute on the children
         children.forEach(child => child.hidden = isExpanded)

package/js/tests/{sidebar.test.js → drawer.test.js} RENAMED Viewed

@@ -1,20 +1,20 @@
 /**
  * ------------------------------------------------------------------
- * TEST for the _sidebar.js
+ * TEST for the _drawer.js
  * ------------------------------------------------------------------
  * The test will take care of:
  * - Constructor: Passing the correct parameters
  * - Constructor: Return the correct properties
- * - #Init: On click on the button toggle the sidebar
- * - #Init: On click on the backdrop, close the sidebar
+ * - #Init: On click on the button toggle the drawer
+ * - #Init: On click on the backdrop, close the drawer
  */
 import { describe, test, expect, beforeAll } from "vitest"
 import { fireEvent } from "@testing-library/dom"
-import Sidebar from "../_sidebar"
+import Drawer from "../_drawer"
 import ErrorMessage from "../utilities/_error"
-let fakeSidebar
+let fakeDrawer
 /**
  * Before all tests
@@ -25,72 +25,72 @@ beforeAll(() => {
     document.body.innerHTML =
         '<div id="backdrop"></div>' +
-        '<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar"></button>' +
-        '<aside id="sidebar" tabindex="0" hidden><button id="focus"></button></aside>'
+        '<button aria-expanded="false" aria-pressed="false" aria-controls="drawer"></button>' +
+        '<aside id="drawer" tabindex="0" hidden><button id="focus"></button></aside>'
     Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
-    fakeSidebar = new Sidebar(document.getElementById('sidebar'))
+    fakeDrawer = new Drawer(document.getElementById('drawer'))
 })
 describe('Structure of the class', () => {
     test('Constructor: Passing the correct parameters', () => {
-        expect(() => new Sidebar(document.getElementById('sidebar'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
+        expect(() => new Drawer(document.getElementById('drawer'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
     })
     test('Constructor: Return the correct properties', () => {
-        expect(fakeSidebar._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="sidebar"]'))
-        expect(fakeSidebar._backdrop).toStrictEqual(document.getElementById('backdrop'))
-        expect(fakeSidebar._isOpen).toBeTruthy()
-        expect(fakeSidebar._focus).toStrictEqual(document.getElementById('focus'))
+        expect(fakeDrawer._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="drawer"]'))
+        expect(fakeDrawer._backdrop).toStrictEqual(document.getElementById('backdrop'))
+        expect(fakeDrawer._isOpen).toBeTruthy()
+        expect(fakeDrawer._focus).toStrictEqual(document.getElementById('focus'))
     })
 })
 describe('#Init(', () => {
-    test('On click on the button toggle the sidebar', () => {
+    test('On click on the button toggle the drawer', () => {
-        const button = fakeSidebar._buttons[0]
+        const button = fakeDrawer._buttons[0]
-        expect(fakeSidebar._isOpen).toBeTruthy()
-        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(fakeDrawer._isOpen).toBeTruthy()
+        expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
         expect(button.getAttribute('aria-pressed')).toBe('true')
         expect(button.getAttribute('aria-expanded')).toBe('true')
         fireEvent(button, new MouseEvent('click'))
-        expect(fakeSidebar._isOpen).toBeFalsy()
-        expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
+        expect(fakeDrawer._isOpen).toBeFalsy()
+        expect(fakeDrawer._element.hasAttribute('hidden')).toBeTruthy()
         expect(button.getAttribute('aria-pressed')).toBe('false')
         expect(button.getAttribute('aria-expanded')).toBe('false')
         fireEvent(button, new MouseEvent('click'))
-        expect(fakeSidebar._isOpen).toBeTruthy()
-        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(fakeDrawer._isOpen).toBeTruthy()
+        expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
         expect(button.getAttribute('aria-pressed')).toBe('true')
         expect(button.getAttribute('aria-expanded')).toBe('true')
     })
-    test('On click on the backdrop, close the sidebar', () => {
+    test('On click on the backdrop, close the drawer', () => {
         Object.defineProperty(window, 'innerWidth', { configurable: true, value: 800 })
-        const button = fakeSidebar._buttons[0]
+        const button = fakeDrawer._buttons[0]
-        expect(fakeSidebar._isOpen).toBeTruthy()
-        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(fakeDrawer._isOpen).toBeTruthy()
+        expect(fakeDrawer._element.hasAttribute('hidden')).toBeFalsy()
         expect(button.getAttribute('aria-pressed')).toBe('true')
         expect(button.getAttribute('aria-expanded')).toBe('true')
         fireEvent(document.getElementById('backdrop'), new MouseEvent('click'))
-        expect(fakeSidebar._isOpen).toBeFalsy()
-        expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
+        expect(fakeDrawer._isOpen).toBeFalsy()
+        expect(fakeDrawer._element.hasAttribute('hidden')).toBeTruthy()
         expect(button.getAttribute('aria-pressed')).toBe('false')
         expect(button.getAttribute('aria-expanded')).toBe('false')

package/js/tests/tree.test.js CHANGED Viewed

@@ -30,26 +30,27 @@ let fakeListTree, fakeGridTree, fakeLi, fakeRow, customClick
 beforeAll(() => {
     document.body.innerHTML =
-        '<ul id="fakeListTree" role="tree">' +
-        '<li role="treeitem"></li>' +
-        '<li role="treeitem" aria-expanded="false" aria-owns="child">' +
-        '<ul id="child" role="group" hidden>' +
-        '<li role="treeitem"></li>' +
+        '<ul id="fakeListTree">' +
+        '<li></li>' +
+        '<li>' +
+        '<button role="link" aria-controls="child" aria-expanded="false">Toggle</button>' +
+        '<ul id="child" hidden>' +
+        '<li></li>' +
         '</ul>' +
         '</li>' +
-        '<li role="treeitem"></li>' +
+        '<li></li>' +
         '</ul>' +
-        '<table id="fakeGridTree" role="treegrid">' +
+        '<table id="fakeGridTree">' +
         '<tr aria-level="1"><td></td></tr>' +
-        '<tr aria-level="1" aria-expanded="false" aria-owns="lvl2"><td data-handle="tree"></td></tr>' +
-        '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-owns="lvl3" hidden><td data-handle="tree"></td></tr>' +
+        '<tr aria-level="1" aria-expanded="false" aria-controls="lvl2"><td data-handle="tree"></td></tr>' +
+        '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-controls="lvl3" hidden><td data-handle="tree"></td></tr>' +
         '<tr id="lvl3" aria-level="3" hidden><td></td></tr>' +
         '<tr aria-level="1"><td></td></tr>' +
         '</table>'
     fakeListTree = new Tree(document.getElementById('fakeListTree'))
     fakeGridTree = new Tree(document.getElementById('fakeGridTree'))
-    fakeLi = fakeListTree._element.querySelector('li[aria-expanded]')
+    fakeLi = fakeListTree._element.querySelector('li [aria-expanded]')
     fakeRow = fakeGridTree._element.querySelector('tr[aria-level="1"][aria-expanded]')
     customClick = new MouseEvent('click')

package/js/utilities/_cookie.js CHANGED Viewed

@@ -61,7 +61,7 @@ export default class Cookie {
      */
     set(value) {
         if (!(value instanceof Object)) throw new Error(ErrorMessage.instanceOf('value', 'Object'))
-        document.cookie = `${this.#NAME}=${JSON.stringify(value)};SameSite=Lax`
+        document.cookie = `${this.#NAME}=${JSON.stringify(value)};SameSite=Lax;Path=/;`
     }
     /**
@@ -91,7 +91,7 @@ export default class Cookie {
      *
      */
     delete() {
-        document.cookie = this.#NAME + "=;SameSite=Lax; expires = Thu, 01 Jan 1970 00:00:00 GMT"
+        document.cookie = this.#NAME + "=;SameSite=Lax;Path=/; expires = Thu, 01 Jan 1970 00:00:00 GMT"
     }
 }

package/natachah-vanilla-frontend-0.1.5.tgz ADDED Viewed

Binary file

package/package.json CHANGED Viewed

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

package/scss/abstracts/_mixins.scss CHANGED Viewed

@@ -117,6 +117,8 @@
     // Reset
     margin: 0;
     padding: 0;
+    border-radius: var(--#{$name}-border-radius, map.get($properties, border-radius));
+    background-color: var(--#{$name}-background, map.get($properties, background));
     &:is(ul, ol) {
         list-style: none;

package/scss/base/_reset.scss CHANGED Viewed

@@ -85,24 +85,13 @@ summary {
 }
 // Change cursor for tree + basic animation on svg
-[role=tree],
-[role=treegrid] {
-    [aria-expanded]:not(:has([data-handle])),
-    [data-handle] {
-        cursor: pointer;
-    }
-    @media screen and (prefers-reduced-motion: no-preference) {
-        [data-handle] > svg {
-            transition: all .25s ease-in-out;
-        }
-    }
-    [aria-expanded=true] > [data-handle] > svg {
-        transform: rotate(90deg);
-    }
+[aria-controls],
+[data-handle] {
+    cursor: pointer;
+}
+[aria-controls][aria-expanded=true] [data-handle] > svg {
+    transform: rotate(90deg);
 }
 // Reduce animation on scroll for #target
@@ -110,6 +99,11 @@ summary {
     :has(:target) {
         scroll-behavior: smooth;
     }
+    [data-handle] > svg {
+        transition: all .25s ease-in-out;
+    }
 }
 // Define the bases for the body

package/scss/base/_typography.scss CHANGED Viewed

@@ -19,7 +19,8 @@
     }
 }
-a {
+a,
+button[role=link] {
     cursor: pointer;
     text-decoration: var(--anchor-decoration, var(--decoration));
@@ -41,7 +42,7 @@ a {
     }
     &:disabled,
-    &:not([href]) {
+    &:is(a):not([href]) {
         pointer-events: none;
         opacity: var(--anchor-disabled-opacity, var(--disabled-opacity));
     }

package/scss/components/_button.scss CHANGED Viewed

@@ -14,7 +14,7 @@
 @use "../abstracts/mixins" as *;
-button,
+button:not([role=link]),
 [type=button],
 [type=reset],
 [type=submit],

package/scss/components/_card.scss CHANGED Viewed

@@ -26,8 +26,6 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
 .card {
-    --card-border-color: red;
     // Design as item
     @include as-item('card', (), $customCardProperties);

package/scss/components/_dropdown.scss CHANGED Viewed

@@ -55,7 +55,7 @@ $customDropdownProperties: map.merge(default.$item-properties, $customDropdown);
         top: calc(100% + var(--dropdown-offset, .5rem));
         // Simple bloc
-        &:not(ul, li) {
+        &:not(ul, ol) {
             @include as-item('dropdown', (), $customDropdownProperties);
         }

package/scss/components/_form.scss CHANGED Viewed

@@ -60,11 +60,11 @@ select {
 [type=date],
 [type=datetime-local] {
-    background-image: 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>');
+    background-image: var(--icon-date);
 }
 [type=time] {
-    background-image: 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>');
+    background-image: var(--icon-time);
 }
 @-moz-document url-prefix() {
@@ -86,7 +86,7 @@ select {
 [type=file] {
-    background-image: 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>');
+    background-image: var(--icon-file);
     // Hide the default button, and make it look like a default input
     &::file-selector-button {
@@ -99,7 +99,7 @@ select {
 }
 select {
-    background-image: 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>');
+    background-image: var(--icon-select);
 }
 [type=color] {
@@ -171,14 +171,14 @@ select {
     &:checked {
         background-size: 50%;
-        background-image: 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>');
+        background-image: var(--icon-radio);
     }
 }
 [type=checkbox]:not([role=switch]):checked {
     background-size: 100%;
-    background-image: 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>');
+    background-image: var(--icon-check);
 }
@@ -189,7 +189,7 @@ select {
     background-position: .125em center;
     background-size: auto calc(100% - .25em);
     background-color: var(--form-background, rgba(black, 25%));
-    background-image: 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>');
+    background-image: var(--icon-switch);
     &:checked {
         background-position: calc(100% - .125em) center;

package/scss/themes/_root.scss CHANGED Viewed

@@ -66,4 +66,12 @@
     // 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);
 }

package/natachah-vanilla-frontend-0.1.3.tgz DELETED Viewed

Binary file