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

@natachah/vanilla-frontend 0.0.2 → 0.0.3

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

package/docs/pages/components/breadcrumb.html +67 -0
package/docs/pages/javascript/sidebar.html +6 -10
package/docs/pages/quick-start/installation.html +3 -3
package/docs/src/js/doc-layout.js +1 -1
package/docs/src/scss/layout.scss +8 -0
package/js/_autofill.js +1 -1
package/js/_check-all.js +1 -1
package/js/_dialog.js +1 -1
package/js/_dropdown.js +5 -6
package/js/_scroll.js +1 -1
package/js/_sidebar.js +6 -7
package/js/_slider.js +1 -1
package/js/_sortable.js +1 -1
package/js/_tabpanel.js +1 -1
package/js/_toggle.js +6 -8
package/js/_tree.js +4 -5
package/js/tests/dropdown.test.js +1 -1
package/js/utilities/_base-component.js +2 -2
package/package.json +1 -1
package/scss/_breadcrumb.scss +45 -0
package/scss/_button.scss +1 -0
package/scss/vanilla-frontend.scss +1 -1
package/docs/pages/components/nav.html +0 -119
package/scss/_nav.scss +0 -72

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

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Documentations: Components ></title>
+</head>
+<body data-preload>
+    <doc-layout>
+        <h2>Breadcrumb</h2>
+        <p>To create a breadcrumb navigation, always use <code>&lt;ol&gt;</code> with a class <code>.breadcrumb</code> inside a <code>&lt;nav&gt;</code> tag.</p>
+        <p>The breadcrumb will automatically be distributed horizontally.</p>
+        <doc-demo>
+            <nav aria-label="Breadcrumb navigaton">
+                <ol class="breadcrumb">
+                    <li><a href="#">One</a></li>
+                    <li><a href="#">Two</a></li>
+                    <li><a href="#">Three</a></li>
+                    <li aria-current="location">Four</li>
+                </ol>
+            </nav>
+        </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">
+                <nav aria-label="Breadcrumb navigaton">
+                    <ol class="breadcrumb">
+                        <li><a href="#">One</a></li>
+                        <li><a href="#">Two</a></li>
+                        <li><a href="#">Three</a></li>
+                        <li aria-current="location">Four</li>
+                    </ol>
+                </nav>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @import '@natachah/vanilla-frontend/scss/_breadcrumb';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
+                --breadcrumb-divider
+                --breadcrumb-divider-color
+                --breadcrumb-gap
+                --breadcrumb-decoration
+                --breadcrumb-color
+                --breadcrumb-hover-color
+                --breadcrumb-active-color
+                --breadcrumb-disabled-opacity
+            </doc-code>
+        </div>
+        <blockquote class="warning">
+            <p>The custom properties for the breadcrumb is overriding the default ones in the typography setting.</p>
+        </blockquote>
+    </doc-layout>
+    <script type="module" src="/main.js"></script>
+</body>
+</html>

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

@@ -24,16 +24,12 @@
                 <button role="tab" aria-controls="js">JS</button>
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
-                <dialog id="cookies">
-                    <div>
-                        <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
-                        </aside>
-                    </div>
-                </dialog>
+                <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
+                </aside>
             </doc-code>
             <doc-code id="js" data-type="js" role="tabpanel">
                 import Sidebar from '@natachah/vanilla-frontend/js/utilities/_sidebar.js'

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

@@ -30,14 +30,15 @@
             // Can be overide by your own variables files
             @import '@natachah/vanilla-frontend/scss/variables/_root';
             @import '@natachah/vanilla-frontend/scss/variables/_setting';
             // Utilities
             @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
             @import '@natachah/vanilla-frontend/scss/utilities/_reset';
             @import '@natachah/vanilla-frontend/scss/utilities/_typography';
             // Components
             @import '@natachah/vanilla-frontend/scss/_badge';
+            @import '@natachah/vanilla-frontend/scss/_breadcrumb';
             @import '@natachah/vanilla-frontend/scss/_button';
             @import '@natachah/vanilla-frontend/scss/_card';
             @import '@natachah/vanilla-frontend/scss/_dialog';
@@ -49,7 +50,6 @@
             @import '@natachah/vanilla-frontend/scss/_list';
             @import '@natachah/vanilla-frontend/scss/_loading';
             @import '@natachah/vanilla-frontend/scss/_media';
-            @import '@natachah/vanilla-frontend/scss/_nav';
             @import '@natachah/vanilla-frontend/scss/_progress';
             @import '@natachah/vanilla-frontend/scss/_slider';
             @import '@natachah/vanilla-frontend/scss/_table';

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

@@ -64,6 +64,7 @@ class DocLayout extends HTMLElement {
                     <h2>Components</h2>
                     <ul>
                         <li><a href="/pages/components/badge.html">Badge</a></li>
+                        <li><a href="/pages/components/breadcrumb.html">Breadcrumb</a></li>
                         <li><a href="/pages/components/button.html">Button</a></li>
                         <li><a href="/pages/components/card.html">Card</a></li>
                         <li><a href="/pages/components/dialog.html">Dialog</a></li>
@@ -73,7 +74,6 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/components/list.html">List</a></li>
                         <li><a href="/pages/components/loading.html">Loading</a></li>
                         <li><a href="/pages/components/media.html">Media</a></li>
-                        <li><a href="/pages/components/nav.html">Nav</a></li>
                         <li><a href="/pages/components/progress.html">Progress</a></li>
                         <li><a href="/pages/components/slider.html">Slider</a></li>
                         <li><a href="/pages/components/table.html">Table</a></li>

package/docs/src/scss/layout.scss CHANGED Viewed

@@ -29,6 +29,14 @@ doc-layout {
         grid-area: footer;
     }
+    > header > nav > ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 1rem;
+    }
     // The open/close button for the sidebar
     > header button {

package/js/_autofill.js CHANGED Viewed

@@ -24,7 +24,7 @@ export default class Autofill extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'autofill')
         // Check for errors
         if (el.tagName !== 'SELECT' && el.tagName !== 'INPUT') throw new Error(ErrorMessage.typeOf('el', 'input|select'))

package/js/_check-all.js CHANGED Viewed

@@ -23,7 +23,7 @@ export default class CheckAll extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'checkall')
         // Define the properties
         this._checkboxes = document.querySelectorAll(`input[type="checkbox"][name="${this._element.value}"]`)

package/js/_dialog.js CHANGED Viewed

@@ -24,7 +24,7 @@ export default class Dialog extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'dialog')
         // Define the properties
         this._isModal = Boolean(this._element.getAttribute('aria-modal'))

package/js/_dropdown.js CHANGED Viewed

@@ -33,7 +33,7 @@ export default class Dropdown extends BaseComponent {
         if (options.closable && typeof options.closable !== 'boolean') throw new Error(ErrorMessage.typeOf('options.closable', 'boolean'))
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'dropdown')
         // Define the properties
         this._button = this._element.querySelector('[aria-controls]')
@@ -52,12 +52,12 @@ export default class Dropdown extends BaseComponent {
     #init() {
         // Toggle the content on click on the button
-        this._button.addEventListener('click', () => this.#toggle())
+        this._button.addEventListener('click', () => this.toggle())
         // Close the content is click outside
         if (this._options.closable) {
-            this._content.addEventListener('blur', (e) => {
-                if (e.relatedTarget !== this._button) this.#toggle()
+            this._content.addEventListener('focusout', (e) => {
+                if (e.relatedTarget !== this._button && !this._content.contains(e.relatedTarget)) this.toggle()
             })
         }
@@ -76,9 +76,8 @@ export default class Dropdown extends BaseComponent {
     /**
      * Toggle the [hidden] and [aria-expanded] attributes
      *
-     * @private
      */
-    #toggle() {
+    toggle() {
         // Define new value
         const value = !this.value

package/js/_scroll.js CHANGED Viewed

@@ -44,7 +44,7 @@ export default class Scroll extends BaseComponent {
         if (options.navigation && !document.getElementById(options.navigation)) throw new Error(ErrorMessage.existById('element', options.navigation))
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'scroll')
         // Reduce animation
         const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true

package/js/_sidebar.js CHANGED Viewed

@@ -31,7 +31,7 @@ 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)
+        super(el, options, 'sidebar')
         // Define the properties
         this._buttons = document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? []
@@ -55,30 +55,29 @@ export default class Sidebar extends BaseComponent {
     #init() {
         // On load check if need to open/close the sidebar
-        if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.#toggle()
+        if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.toggle()
         // On resize check if need to open/close the sidebar
         window.onresize = () => {
             clearTimeout(this._timeout)
             this._timeout = setTimeout(() => {
-                if ((window.innerWidth <= this._options.breakpoint && this._isOpen) || (window.innerWidth > this._options.breakpoint && !this._isOpen)) this.#toggle()
+                if ((window.innerWidth <= this._options.breakpoint && this._isOpen) || (window.innerWidth > this._options.breakpoint && !this._isOpen)) this.toggle()
             }, 250)
         }
         // On click on the button toggle the sidebar
-        this._buttons.forEach((button) => button.addEventListener('click', () => this.#toggle()))
+        this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle()))
         // On click on the backdrop, close the sidebar
-        this._backdrop.addEventListener('click', () => this.#toggle())
+        this._backdrop.addEventListener('click', () => this.toggle())
     }
     /**
      * Toggle the sidebar
      *
-     * @private
      */
-    #toggle() {
+    toggle() {
         // Change the state
         this._isOpen = !this._isOpen

package/js/_slider.js CHANGED Viewed

@@ -37,7 +37,7 @@ export default class Slider extends BaseComponent {
         if (options.autoplay && (typeof options.autoplay !== 'boolean' && typeof options.autoplay !== 'number')) throw new Error(ErrorMessage.typeOf('options.autoplay', 'boolean|number'))
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'slider')
         // Reduce animation
         const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true

package/js/_sortable.js CHANGED Viewed

@@ -24,7 +24,7 @@ export default class Sortable extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'sortable')
         // Define the properties
         this._withHandle = this._element.querySelector('[data-handle]') ? true : false

package/js/_tabpanel.js CHANGED Viewed

@@ -25,7 +25,7 @@ export default class Tabpanel extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'tabpanel')
         // Check for errors
         if (!el.querySelector('[role="tab"]')) throw new Error(ErrorMessage.exist('button [role="tab"]'))

package/js/_toggle.js CHANGED Viewed

@@ -25,7 +25,7 @@ export default class Toggle extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'toggle')
         // Define the properties
         this._type = this._element.tagName == 'SELECT' ? 'select' : this._element.getAttribute('type') ?? 'button'
@@ -45,21 +45,21 @@ export default class Toggle extends BaseComponent {
      */
     #init() {
-        // On first load run method #toggle()
-        this.#toggle()
+        // On first load run method toggle()
+        this.toggle()
         if (this._type === 'button') {
             // CLICK for <button> and change the [aria-pressed] attribute
             this._element.addEventListener('click', () => {
                 this._element.setAttribute('aria-pressed', this.value === 'false')
-                this.#toggle()
+                this.toggle()
             })
         } else {
             // CHANGE for <checkbox> <radio> <select>
-            this._element.addEventListener('change', () => this.#toggle())
+            this._element.addEventListener('change', () => this.toggle())
         }
@@ -69,7 +69,6 @@ export default class Toggle extends BaseComponent {
      * Define the value: <checkbox> and <radio> = :checked, <button> = [aria-pressed], <else> = value
      *
      * @return {string}
-     * @private
      */
     get value() {
@@ -90,9 +89,8 @@ export default class Toggle extends BaseComponent {
     /**
      * Toggle the [hidden] and [aria-expanded] attributes
      *
-     * @private
      */
-    #toggle() {
+    toggle() {
         // Define the group value for <select>
         const groupValue = this._type === 'select' && this._element.querySelector('option:checked') ? this._element.querySelector('option:checked').parentElement.label ?? null : null

package/js/_tree.js CHANGED Viewed

@@ -23,7 +23,7 @@ export default class Tree extends BaseComponent {
     constructor(el, options = {}) {
         // Run the SUPER constructor from BaseComponent
-        super(el, options)
+        super(el, options, 'tree')
         // Define the properties
         this._type = this._element.role == 'tree' ? 'list' : 'grid'
@@ -47,7 +47,7 @@ export default class Tree extends BaseComponent {
         this._items.forEach(item => item.addEventListener('click', (e) => {
             if (!this._withHandle || e.target.hasAttribute('data-handle')) {
                 e.stopPropagation()
-                this.#toggle(item)
+                this.toggle(item)
             }
         }))
@@ -57,9 +57,8 @@ export default class Tree extends BaseComponent {
      * Toggle the [hidden] and [aria-expanded] attributes
      *
      * @param {HTMLElement} item - The current item
-     * @private
      */
-    #toggle(item) {
+    toggle(item) {
         // Check for errors
         if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
@@ -75,7 +74,7 @@ export default class Tree extends BaseComponent {
         children.forEach(child => child.hidden = isExpanded)
         // 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))
+        if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this.toggle(child))
         // Emmit event
         this.emmitEvent('changed', { isOpen: !isExpanded })

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

@@ -73,7 +73,7 @@ describe('#Init()', () => {
         expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('true')
         expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('true')
         expect(fakeDropdownClosable._content.hidden).toBeFalsy()
-        fireEvent.blur(fakeDropdownClosable._content)
+        fireEvent(fakeDropdownClosable._content, new MouseEvent('focusout'))
         expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('false')
         expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('false')
         expect(fakeDropdownClosable._content.hidden).toBeTruthy()

package/js/utilities/_base-component.js CHANGED Viewed

@@ -22,14 +22,14 @@ export default class BaseComponent {
      * @param {Object} options - The custom options
      * @constructor
      */
-    constructor(el, options = {}) {
+    constructor(el, options = {}, name = this.constructor.name.toLowerCase()) {
         // Check for errors
         if (!(el instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('el', 'HTMLElement'))
         if (!(options instanceof Object)) throw new Error(ErrorMessage.instanceOf('options', 'Object'))
         // Define the #NAME private properties
-        this.#NAME = this.constructor.name.toLowerCase() ?? ''
+        this.#NAME = name
         // Define the _element property
         this._element = el

package/package.json CHANGED Viewed

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

package/scss/_breadcrumb.scss ADDED Viewed

@@ -0,0 +1,45 @@
+////
+/// ------------------------------------------------------------------
+/// Breadcrumb
+/// ------------------------------------------------------------------
+/// Create the breadcrumb component
+///
+/// @example <nav><ol class="breadcrumb">...</ol></nav>
+///
+/// @group components
+/// @author Natacha Herth
+/// @since 1.0.0
+///
+////
+.breadcrumb {
+    // Reset the list style
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    // Design the breadcrumb list as inline by default
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    gap: 0;
+    // Add a divider between links
+    li:not(:last-child)::after {
+        content: var(--breadcrumb-divider, '/');
+        color: var(--breadcrumb-divider-color, currentColor);
+        margin-inline: var(--breadcrumb-gap, .5rem);
+    }
+    // Reset the anchor CSS properties
+    a {
+        --anchor-decoration: var(--breadcrumb-decoration, currentColor);
+        --anchor-color: var(--breadcrumb-color, currentColor);
+        --anchor-hover-color: var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor));
+        --anchor-active-color: var(--breadcrumb-active-color, var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor)));
+        --anchor-disabled-opacity: var(--breadcrumb-disabled-opacity, var(--disabled-opacity));
+    }
+}

package/scss/_button.scss CHANGED Viewed

@@ -21,6 +21,7 @@ button,
     // Customization for button
     display: inline-block;
+    text-align: center;
     // Define as an item
     @include as-item('button', ('focus', 'hover', 'active', 'disabled'));

package/scss/vanilla-frontend.scss CHANGED Viewed

@@ -6,6 +6,7 @@
 @import './utilities/_typography';
 @import './_badge';
+@import './_breadcrumb';
 @import './_button';
 @import './_card';
 @import './_dialog';
@@ -17,7 +18,6 @@
 @import './_list';
 @import './_loading';
 @import './_media';
-@import './_nav';
 @import './_progress';
 @import './_slider';
 @import './_table';

package/docs/pages/components/nav.html DELETED Viewed

@@ -1,119 +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: Components ></title>
-</head>
-<body data-preload>
-    <doc-layout>
-        <h1>Navigation</h1>
-        <p>The navigation is using the native <code>&lt;ul&gt;</code> inside a <code>&lt;nav&gt;</code> tag.</p>
-        <doc-demo>
-            <nav aria-label="Main navigaton">
-                <ul>
-                    <li><a href="#" aria-current="page">Link 1</a></li>
-                    <li><a href="#">Link 2</a></li>
-                    <li><a href="#">Link 3</a></li>
-                    <li><a>Link 4</a></li>
-                    <li><button class="primary">Button</button></li>
-                </ul>
-            </nav>
-        </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">
-                <nav aria-label="Main navigaton">
-                    <ul>
-                        <li><a href="#" aria-current="page">Link 1</a></li>
-                        <li><a href="#">Link 2</a></li>
-                        <li><a href="#">Link 3</a></li>
-                        <li><a>Link 4</a></li>
-                        <li><button class="primary">Button</button></li>
-                    </ul>
-                </nav>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @import '@natachah/vanilla-frontend/scss/_nav';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --nav-direction
-                --nav-justify
-                --nav-align
-                --nav-gap
-                --nav-decoration
-                --nav-color
-                --nav-hover-color
-                --nav-active-color
-                --nav-disabled-opacity
-            </doc-code>
-        </div>
-        <blockquote class="warning">
-            <p>The custom properties for the navigation is overriding the default ones in the typography setting.</p>
-        </blockquote>
-        <p>You can make a vertical menu by setting the CSS property <code>--nav-direction</code> to <code>column</code>.</p>
-        <h2>Breadcrumb</h2>
-        <p>To create a breadcrumb navigation, always use <code>&lt;ol&gt;</code> inside a <code>&lt;nav&gt;</code> tag.</p>
-        <p>The breadcrumb will automatically be distributed horizontally.</p>
-        <doc-demo>
-            <nav aria-label="Breadcrumb navigaton">
-                <ol>
-                    <li><a href="#">One</a></li>
-                    <li><a href="#">Two</a></li>
-                    <li><a href="#">Three</a></li>
-                    <li aria-current="location">Four</li>
-                </ol>
-            </nav>
-        </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">
-                <nav aria-label="Breadcrumb navigaton">
-                    <ol>
-                        <li><a href="#">One</a></li>
-                        <li><a href="#">Two</a></li>
-                        <li><a href="#">Three</a></li>
-                        <li aria-current="location">Four</li>
-                    </ol>
-                </nav>
-            </doc-code>
-            <doc-code id="scss" data-type="scss" role="tabpanel">
-                @import '@natachah/vanilla-frontend/scss/_nav';
-            </doc-code>
-            <doc-code id="css" data-type="css" role="tabpanel">
-                --breadcrumb-divider
-                --breadcrumb-divider-color
-                --breadcrumb-gap
-                --breadcrumb-decoration
-                --breadcrumb-color
-                --breadcrumb-hover-color
-                --breadcrumb-active-color
-                --breadcrumb-disabled-opacity
-            </doc-code>
-        </div>
-        <blockquote class="warning">
-            <p>The custom properties for the breadcrumb is overriding the default ones in the typography setting.</p>
-        </blockquote>
-    </doc-layout>
-    <script type="module" src="/main.js"></script>
-</body>
-</html>

package/scss/_nav.scss DELETED Viewed

@@ -1,72 +0,0 @@
-////
-/// ------------------------------------------------------------------
-/// Nav
-/// ------------------------------------------------------------------
-/// Create the navigation component
-///
-/// @example <nav><ul>...</ul></nav> or <nav><ol>...</ol></nav>
-///
-/// @group components
-/// @author Natacha Herth
-/// @since 1.0.0
-///
-////
-nav {
-    // Reset the list style
-    ul,
-    ol {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-    ul {
-        // Design the nav list as inline by default
-        display: flex;
-        flex-direction: var(--nav-direction, row);
-        justify-content: var(--nav-justify, start);
-        align-items: var(--nav-align, center);
-        gap: var(--nav-gap, 1rem);
-        // Reset the anchor CSS properties
-        a {
-            --anchor-decoration: var(--nav-decoration, currentColor);
-            --anchor-color: var(--nav-color, currentColor);
-            --anchor-hover-color: var(--nav-hover-color, var(--nav-color, currentColor));
-            --anchor-active-color: var(--nav-active-color, var(--nav-hover-color, var(--nav-color, currentColor)));
-            --anchor-disabled-opacity: var(--nav-disabled-opacity, var(--disabled-opacity));
-        }
-    }
-    ol {
-        // Design the breadcrumb list as inline by default
-        display: flex;
-        flex-direction: row;
-        justify-content: start;
-        align-items: center;
-        gap: 0;
-        // Add a divider between links
-        li:not(:last-child)::after {
-            content: var(--breadcrumb-divider, '/');
-            color: var(--breadcrumb-divider-color, currentColor);
-            margin-inline: var(--breadcrumb-gap, .5rem);
-        }
-        // Reset the anchor CSS properties
-        a {
-            --anchor-decoration: var(--breadcrumb-decoration, currentColor);
-            --anchor-color: var(--breadcrumb-color, currentColor);
-            --anchor-hover-color: var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor));
-            --anchor-active-color: var(--breadcrumb-active-color, var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor)));
-            --anchor-disabled-opacity: var(--breadcrumb-disabled-opacity, var(--disabled-opacity));
-        }
-    }
-}