@natachah/vanilla-frontend 0.1.19 → 0.1.20

package/docs/pages/components/form.html

@@ -288,22 +288,38 @@
         <h3>Validation</h3>
         <p>Use the <code>aria-invalid</code> attribute to display the element as in/valid and use <code>aria-describedby</code> attribute with a <code>&lt;small&gt;</code> tag to display the information.</p>
         <blockquote class="warning">
-            <p>As every design is different, there is no default style for in/valid elements</p>
+            <p>As every design is different, there is not too much default style for in/valid elements. But for accessibility don't forget to add icons to show the errors.</p>
         </blockquote>
 
         <doc-demo>
-            <div>
-                <label for="invalidInput">Invalid input</label>
-                <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
-                <small id="invalidMsg">
-                    <span aria-live="assertive">Incorrect value !</span>
-                </small>
-            </div>
-            <label for="validInput">Valid input</label>
-            <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
-            <small id="validMsg">
-                <span aria-live="assertive">All good !</span>
-            </small>
+            <form action="#">
+                <div>
+                    <label for="invalidInput">Invalid input</label>
+                    <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
+                    <small id="invalidMsg">
+                        <span aria-live="assertive">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                                <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z" />
+                            </svg>
+                            Incorrect value !
+                        </span>
+                    </small>
+                </div>
+                <div>
+                    <label for="validInput">Valid input</label>
+                    <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
+                    <small id="validMsg">
+                        <span aria-live="assertive">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+                                <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05" />
+                            </svg>
+                            All good !
+                        </span>
+                    </small>
+                </div>
+            </form>
         </doc-demo>
 
         <div class="code-group">
@@ -312,28 +328,33 @@
                 <button role="tab" aria-controls="scss">SCSS</button>
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
-                <label for="invalidInput">Invalid input</label>
-                <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
-                <small id="invalidMsg">
-                    <span aria-live="assertive">Incorrect value !</span>
-                </small>
-                <label for="validInput">Valid input</label>
-                <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
-                <small id="validMsg">
-                    <span aria-live="assertive">All good !</span>
-                </small>
+                <div>
+                    <label for="invalidInput">Invalid input</label>
+                    <input id="invalidInput" type="text" aria-describedby="invalidMsg" aria-invalid="true" value="My bad value">
+                    <small id="invalidMsg">
+                        <span aria-live="assertive">Incorrect value !</span>
+                    </small>
+                </div>
+                <div>
+                    <label for="validInput">Valid input</label>
+                    <input id="validInput" type="text" aria-describedby="validMsg" aria-invalid="false" value="My good value">
+                    <small id="validMsg">
+                        <span aria-live="assertive">All good !</span>
+                    </small>
+                </div>
             </doc-code>
-            <doc-code id="scss" data-type="css" role="tabpanel">
-                form {
-                    div:has([aria-invalid=true]) {
-
-                        --form-border-color: var(--color-error);
-
-                        > label,
-                        > small {
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                form div {
+                    &:has([aria-invalid=true]) {
+                        [aria-live] {
                             color: var(--color-error);
                         }
+                    }
 
+                    &:has([aria-invalid=false]) {
+                        [aria-live] {
+                            color: var(--color-success);
+                        }
                     }
                 }
             </doc-code>

package/docs/pages/layouts/grid.html

@@ -65,7 +65,6 @@
         <h2 id="flex-grid">Flex grid</h2>
 
         <p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
-
         <p>This method is more for <b>flexible</b> layout with a random number of items to display.</p>
 
         <doc-demo>
@@ -106,7 +105,26 @@
 
         <p>Both of them can be responsive by changing the CSS custom property <code>--grid-columns</code> inside a <code>@media</code> or a <code>@container</code>.</p>
 
-        <p>Making the grid changes into the CSS will prevent to have multiple unused classes and force you to have controle of our layout.</p>
+        <h3>Auto-fill</h3>
+
+        <p>With <code>.grid</code> you can add an auto layout with a maximum column size by changing the CSS custom properties <code>--grid-columns:auto-fill</code> and <code>--grid-column-size</code> and .</p>
+
+        <doc-demo>
+            <div class="grid" style="--grid-columns: auto-fill; --grid-column-size: 270px">
+                <div>1</div>
+                <div>2</div>
+                <div>3</div>
+                <div>4</div>
+                <div>5</div>
+                <div>6</div>
+                <div>7</div>
+                <div>8</div>
+                <div>9</div>
+                <div>10</div>
+                <div>11</div>
+                <div>12</div>
+            </div>
+        </doc-demo>
 
         <h2>Columns</h2>
 
@@ -191,7 +209,7 @@
             --grid-align
             --grid-columns
             --grid-grow /* only for .flex-grid */
-
+            --grid-column-size /* only for .grid */
         </doc-code>
 
     </doc-layout>

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

@@ -46,6 +46,7 @@
             @use '@natachah/vanilla-frontend/scss/components/_card';
             @use '@natachah/vanilla-frontend/scss/components/_dialog';
             @use '@natachah/vanilla-frontend/scss/components/_disclosure';
+            @use '@natachah/vanilla-frontend/scss/components/_drawer';
             @use '@natachah/vanilla-frontend/scss/components/_dropdown';
             @use '@natachah/vanilla-frontend/scss/components/_form';
             @use '@natachah/vanilla-frontend/scss/components/_grid';

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' || type === 'scss' ? this.innerHTML : this.textContent
+        let content = type === 'html' ? 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

@@ -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.19
+                                0.1.20
                             </span>
                         </li>
                         <li>

package/docs/src/scss/layout.scss

@@ -19,10 +19,6 @@ doc-layout {
     overflow: hidden;
     transition: all .5s ease-in-out;
 
-    :focus {
-        outline: 3px dashed pink;
-    }
-
     > header {
         grid-area: header;
     }

package/package.json

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

package/scss/components/_form.scss

@@ -195,4 +195,19 @@ select {
         background-position: calc(100% - .125em) center;
     }
 
+}
+
+
+form div {
+    &:has([aria-invalid=true]) {
+        [aria-live] {
+            color: var(--color-error);
+        }
+    }
+
+    &:has([aria-invalid=false]) {
+        [aria-live] {
+            color: var(--color-success);
+        }
+    }
 }

package/scss/layouts/_grid.scss

@@ -13,26 +13,23 @@
 
 .grid,
 .flex-grid {
-
     gap: var(--grid-gap-block, 1rem) var(--grid-gap-inline, 1rem);
     justify-content: var(--grid-justify, start);
     align-items: var(--grid-align, initial);
-
 }
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(var(--grid-columns, 12), minmax(0%, 1fr));
+    grid-template-columns: repeat(var(--grid-columns, 12), minmax(min(var(--grid-column-size, 0%), 100%), 1fr));
 }
 
 .flex-grid {
-
     display: flex;
     flex-wrap: wrap;
 
     > * {
         $column: var(--grid-columns, 12);
-        flex-basis: calc((1 / $column * 100%) - (var(--grid-gap-inline, 1rem) * ($column - 1) / $column));
+        flex-basis: calc((1 * 100% - (($column - 1) * var(--grid-gap-inline, 1rem))) / $column);
         flex-grow: var(--grid-grow, 0);
     }