@natachah/vanilla-frontend 0.1.2 → 0.1.3

package/docs/pages/components/card.html

@@ -66,10 +66,11 @@
         </doc-code>
 
         <p>You also can add a <code>&lt;picture&gt;</code> on the top, center or bottom of a card.</p>
+        <p>To make the picture full width add the class <code>.flush</code></p>
 
         <doc-demo>
             <div class="card">
-                <picture>
+                <picture class="flush">
                     <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
                 </picture>
                 <h3>Title of the card</h3>
@@ -79,7 +80,7 @@
 
         <doc-code>
             <div class="card">
-                <picture>
+                <picture class="flush">
                     <img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
                 </picture>
                 <h3>Title of the card</h3>
@@ -92,17 +93,18 @@
         </blockquote>
 
         <p>The card is compatible with the components <b>group</b> and <b>list</b></p>
+        <p>To make them full width add the class <code>.flush</code></p>
 
         <doc-demo>
             <div class="card">
                 <h3>Mycard</h3>
                 <p>Content of the card</p>
-                <div class="group">
+                <div class="group flush">
                     <button>Button A</button>
                     <button>Button B</button>
                 </div>
                 <p>Content of the card</p>
-                <ul class="list">
+                <ul class="list flush">
                     <li>List D</li>
                     <li><a>List E</a></li>
                     <li><span>List F</span><button>Button</button></li>
@@ -115,12 +117,12 @@
             <div class="card">
                 <h3>Mycard</h3>
                 <p>Content of the card</p>
-                <div class="group">
+                <div class="group flush">
                     <button>Button A</button>
                     <button>Button B</button>
                 </div>
                 <p>Content of the card</p>
-                <ul class="list">
+                <ul class="list flush">
                     <li>List D</li>
                     <li><a>List E</a></li>
                     <li><span>List F</span><button>Button</button></li>

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

@@ -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.2
+                                0.1.3
                             </span>
                         </li>
                         <li>

package/js/_sidebar.js

@@ -41,6 +41,8 @@ export default class Sidebar extends BaseComponent {
 
         this._isOpen = !this._element.hidden
 
+        this._focus = this._element.querySelector('a,button') ?? null
+
         // Init the event listener
         this.#init()
 
@@ -90,6 +92,9 @@ export default class Sidebar extends BaseComponent {
         // Change the [hidden] attribute on the sidebar
         this._element.hidden = !this._isOpen
 
+        // Toggle the focus
+        if (this._focus && this._isOpen) this._focus.focus()
+
     }
 
 }

package/js/_sortable.js

@@ -29,8 +29,6 @@ export default class Sortable extends BaseComponent {
         this._withHandle = this._element.querySelector('[data-handle=sortable]') ? true : false
         this._current = null
 
-        console.log(this)
-
         // Init the event listener
         this.#init()
 

package/js/tests/sidebar.test.js

@@ -26,7 +26,7 @@ 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></aside>'
+        '<aside id="sidebar" tabindex="0" hidden><button id="focus"></button></aside>'
 
     Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
 
@@ -44,6 +44,7 @@ describe('Structure of the class', () => {
         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'))
     })
 
 })

package/package.json

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

package/scss/base/_typography.scss

@@ -29,6 +29,11 @@ a {
         color: var(--anchor-hover-color, var(--anchor-color, currentColor));
     }
 
+    &:focus-visible {
+        outline: var(--anchor-focus-size, var(--focus-size)) var(--anchor-focus-style, var(--focus-style)) var(--anchor-focus-color, color-mix(in srgb, var(--anchor-color, var(--color-font)), transparent var(--focus-opacity)));
+        outline-offset: var(--anchor-focus-offset, var(--focus-offset));
+    }
+
     &:active,
     &[aria-current],
     &[aria-selected=true] {

package/scss/components/_card.scss

@@ -26,16 +26,15 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
 
 .card {
 
+    --card-border-color: red;
+
     // Design as item
     @include as-item('card', (), $customCardProperties);
 
     // Design the layout
     > header,
     > footer,
-    > picture,
-    > .list,
-    > .accordion,
-    > .group {
+    > .flush {
         margin-inline: calc(var(--card-padding-inline, map.get($customCard, padding-inline)) * -1);
     }
 
@@ -45,7 +44,7 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
     }
 
     > header,
-    > :first-child:is(picture, .list, .group) {
+    > :first-child:is(.flush) {
         margin-top: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
         border-start-start-radius: inherit;
         border-start-end-radius: inherit;
@@ -53,19 +52,19 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
     }
 
     > footer,
-    > :last-child:is(picture, .list, .group) {
+    > :last-child:is(.flush) {
         margin-bottom: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
         border-end-start-radius: inherit;
         border-end-end-radius: inherit;
         border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
     }
 
-    > :not(:first-child, :last-child):is(picture, .list, .group) {
+    > :not(:first-child, :last-child):is(.flush) {
         border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
         border-bottom: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
     }
 
-    > picture {
+    > picture.flush {
         max-width: inherit;
         overflow: hidden;
 
@@ -74,34 +73,33 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
         }
     }
 
-    > .list > * {
+    > .flush.list > * {
 
         &:not(:has(a[role=button]:only-child, button:only-child)),
         &:has(a[role=button]:only-child, button:only-child) > * {
             border-inline: none !important;
         }
 
-        &:not(:only-child) {
-
-            &:first-child,
-            &:first-child > :only-child {
-                border-top: none !important;
-                border-start-start-radius: inherit !important;
-                border-start-end-radius: inherit !important;
-            }
 
-            &:last-child,
-            &:last-child > :only-child {
-                border-bottom: none !important;
-                border-end-start-radius: inherit !important;
-                border-end-end-radius: inherit !important;
-            }
+        &:first-child,
+        &:first-child > :only-child {
+            border-top: none !important;
+            border-start-start-radius: inherit !important;
+            border-start-end-radius: inherit !important;
+        }
 
+        &:last-child,
+        &:last-child > :only-child {
+            border-bottom: none !important;
+            border-end-start-radius: inherit !important;
+            border-end-end-radius: inherit !important;
         }
 
+
+
     }
 
-    > .group {
+    > .flush.group {
 
         > * {
             width: 100%;