@natachah/vanilla-frontend 0.1.0 → 0.1.2

package/.gitlab-ci.yml

@@ -3,6 +3,8 @@ image: node:latest
 before_script:
   - npm install
   - npm ci
+  - node -v
+  - npm -v
 
 stages:
   - test

package/docs/pages/base/media.html

@@ -87,6 +87,11 @@
         <h2>Video</h2>
         <p>Use the default <code>&lt;video&gt;</code> and <code>&lt;source&gt;</code> tags.</p>
         <p>By default the video take 100% width and have a ratio of 16:9.</p>
+        <doc-demo>
+            <video width="320" height="240" controls>
+                <source src="..." type="video/mp4">
+            </video>
+        </doc-demo>
         <div class="code-group">
             <div role="tablist">
                 <button role="tab" aria-controls="html">HTML</button>
@@ -94,7 +99,7 @@
             </div>
             <doc-code id="html" data-type="html" role="tabpanel">
                 <video width="320" height="240" controls>
-                    <source src="http://localhost:5173/public/video.mp4" type="video/mp4">
+                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                 </video>
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
@@ -108,6 +113,11 @@
         <h2>Audio</h2>
         <p>Use the default <code>&lt;audio&gt;</code> and <code>&lt;source&gt;</code> tags.</p>
         <p>By default the audio take 100% width.</p>
+        <doc-demo>
+            <audio controls>
+                <source src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3" type="audio/mpeg">
+            </audio>
+        </doc-demo>
         <div class="code-group">
             <div role="tablist">
                 <button role="tab" aria-controls="html">HTML</button>

package/docs/pages/base/typography.html

@@ -33,15 +33,6 @@
             <h6>Heading 6</h6>
         </doc-demo>
 
-        <p>You can also group them inside a <code>&lt;hgroup&gt;</code> tag.</p>
-
-        <doc-demo>
-            <hgroup>
-                <h2>Frankenstein</h2>
-                <p>Or the modern Prometheus</p>
-            </hgroup>
-        </doc-demo>
-
         <div class="code-group">
             <div role="tablist">
                 <button role="tab" aria-controls="html">HTML</button>
@@ -54,11 +45,6 @@
                 <h4>Heading 4</h4>
                 <h5>Heading 5</h5>
                 <h6>Heading 6</h6>
-
-                <hgroup>
-                    <h2>Frankenstein</h2>
-                    <p>Or the modern Prometheus</p>
-                </hgroup>
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
                 --font-size-h*

package/docs/pages/components/card.html

@@ -105,7 +105,8 @@
                 <ul class="list">
                     <li>List D</li>
                     <li><a>List E</a></li>
-                    <li><a href="#">List F</a></li>
+                    <li><span>List F</span><button>Button</button></li>
+                    <li><a href="#" role="button">List F</a></li>
                 </ul>
             </div>
         </doc-demo>
@@ -122,7 +123,8 @@
                 <ul class="list">
                     <li>List D</li>
                     <li><a>List E</a></li>
-                    <li><a href="#">List F</a></li>
+                    <li><span>List F</span><button>Button</button></li>
+                    <li><a href="#" role="button">List F</a></li>
                 </ul>
             </div>
         </doc-code>
@@ -147,7 +149,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    card
+                card
                 );
             </doc-code>
         </div>
@@ -172,7 +174,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    card: (primary)
+                card: (primary)
                 );
             </doc-code>
         </div>

package/docs/pages/components/dropdown.html

@@ -94,7 +94,7 @@
 
         <p>To work properly the <code>&lt;button&gt;</code> of the dropdown must have an <code>aria-controls=&quot;IdOfTheContent&quot;</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
 
-        <p>You can also add some buttons into the list to make them look as a vertical group.</p>
+        <p>You can also add some <code>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</code> into the list to make them look as a vertical group.</p>
 
         <doc-demo>
             <div class="dropdown demo-dropdown">
@@ -104,7 +104,7 @@
                         <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"></path>
                     </svg>
                 </button>
-                <ul id="mySecondDropdown" tabindex="0" style="--button-background: var(--color-body);" hidden>
+                <ul id="mySecondDropdown" tabindex="0" hidden>
                     <li><button>Button longer</button></li>
                     <li><button>Button</button></li>
                     <li><button>Button</button></li>
@@ -112,15 +112,9 @@
             </div>
         </doc-demo>
 
-        <h2>States</h2>
-
-        <p>The <code>&lt;button&gt;</code> inside the dropdown will work as the default button component.</p>
-
-        <p>If you add an <code>&lt;ul/ol&gt;</code> with some <code>&lt;a&gt;</code>, it will transform the links into items with all the default states (<code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code>).</p>
-
         <h2>Variants</h2>
 
-        <p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the <code>&lt;button&gt;</code>.</p>
+        <p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the children.</p>
 
         <h3>Group</h3>
 

package/docs/pages/components/list.html

@@ -16,9 +16,9 @@
             <ul class="list">
                 <li>List A</li>
                 <li>List B</li>
-                <li><span>List C with <a href="#">link</a></span></li>
-                <li><a>List D</a></li>
-                <li><a href="#">List E</a></li>
+                <li><a href="#">List C</a></li>
+                <li>List D</li>
+                <li><span>List E</span> <button>button</button></li>
             </ul>
         </doc-demo>
 
@@ -32,9 +32,9 @@
                 <ul class="list">
                     <li>List A</li>
                     <li>List B</li>
-                    <li><span>List C with <a href="#">link</a></span></li>
-                    <li><a>List D</a></li>
-                    <li><a href="#">List E</a></li>
+                    <li><a href="#">List C</a></li>
+                    <li>List D</li>
+                    <li><span>List E</span> <button>button</button></li>
                 </ul>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
@@ -49,6 +49,42 @@
                 --list-border-radius
                 --list-padding-inline
                 --list-padding-block
+                --list-text-align
+            </doc-code>
+        </div>
+
+        <h2>Action list</h2>
+
+        <p>You can use some <b>button</b> components as <code>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</code> inside a list.</p>
+        <doc-demo>
+            <ul class="list">
+                <li><button>List A (button)</button></li>
+                <li><button disabled>List B (button disabled)</button></li>
+                <li>List C</li>
+                <li><a role="button" href="#">List D (link)</a></li>
+                <li><a role="button">List E (link disabled)</a></li>
+            </ul>
+        </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">
+                <ul class="list">
+                    <li><button>List A</button></li>
+                    <li><button disabled>List B</button></li>
+                    <li>List C</li>
+                    <li><a role="button" href="#">List D</a></li>
+                    <li><a role="button">List E</a></li>
+                </ul>
+            </doc-code>
+            <doc-code id="scss" data-type="scss" role="tabpanel">
+                @use '@natachah/vanilla-frontend/scss/components/list';
+            </doc-code>
+            <doc-code id="css" data-type="css" role="tabpanel">
                 --list-transition
                 --list-decoration
                 --list-focus-size
@@ -65,22 +101,14 @@
             </doc-code>
         </div>
 
-        <h2>States</h2>
-        <p>If you add some <code>&lt;a&gt;</code> as direct child, it will transform the links into an interactive item with all the default states (<code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code>).</p>
-
-        <h3>Active</h3>
-        <p>Apply the <code>aria-pressed</code>, <code>aria-current</code>, or <code>aria-selected</code> attribute on the <code>&lt;a&gt;</code> tag to display the active.</p>
-
-        <h3>Disabled</h3>
-        <p>Remove the <code>href</code> attribute on <code>&lt;a&gt;</code> to display the disabled style.</p>
-
         <h2>Variants</h2>
         <h3>Outline</h3>
         <p>You can create an outline variation by adding the class <code>.outline</code> on each children.</p>
         <doc-demo>
             <div class="list">
                 <div class="outline">List A</div>
-                <div><a class="outline">List B</a></div>
+                <div><button class="outline">List B</button></div>
+                <div><a role="button" class="outline" href="#">List C</a></div>
             </div>
         </doc-demo>
 
@@ -92,12 +120,13 @@
             <doc-code id="html" data-type="html" role="tabpanel">
                 <div class="list">
                     <div class="outline">List A</div>
-                    <div><a class="outline">List B</a></div>
+                    <div><button class="outline">List B</button></div>
+                    <div><a role="button" class="outline" href="#">List C</a></div>
                 </div>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    list
+                list
                 );
             </doc-code>
         </div>
@@ -108,8 +137,10 @@
             <div class="list">
                 <div class="primary">List A</div>
                 <div class="primary outline">List B</div>
-                <div><a class="primary">List C</a></div>
-                <div><a class="primary outline">List D</a></div>
+                <div><button class="primary">List C</button></div>
+                <div><button class="primary outline">List D</button></div>
+                <div><a role="button" class="primary" href="#">List E</a></div>
+                <div><a role="button" class="primary outline" href="#">List F</a></div>
             </div>
         </doc-demo>
 
@@ -122,13 +153,15 @@
                 <div class="list">
                     <div class="primary">List A</div>
                     <div class="primary outline">List B</div>
-                    <div><a class="primary">List C</a></div>
-                    <div><a class="primary outline">List D</a></div>
+                    <div><button class="primary">List C</button></div>
+                    <div><button class="primary outline">List D</button></div>
+                    <div><a role="button" class="primary" href="#">List E</a></div>
+                    <div><a role="button" class="primary outline" href="#">List F</a></div>
                 </div>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    list: (primary)
+                list: (primary)
                 );
             </doc-code>
         </div>

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

@@ -17,7 +17,7 @@
         <p>To use them, import this file:</p>
 
         <doc-code data-type="scss">
-            @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
+            @use '@natachah/vanilla-frontend/scss/abstracts/mixins';
         </doc-code>
 
         <h2>Create an item</h2>

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.0
+                                0.1.2
                             </span>
                         </li>
                         <li>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",
@@ -14,6 +14,7 @@
         "email": "info@natachaherth.ch"
     },
     "license": "MIT",
+    "readme": "README.md",
     "scripts": {
         "test": "vitest --coverage",
         "code:build": "node esbuild.mjs",
@@ -29,7 +30,7 @@
         "@testing-library/dom": "^9.3.4",
         "@vitest/coverage-v8": "^1.3.1",
         "autoprefixer": "^10.4.19",
-        "esbuild": "^0.21.5",
+        "esbuild": "0.21.5",
         "esbuild-sass-plugin": "^3.3.1",
         "fast-glob": "^3.3.2",
         "happy-dom": "^13.6.2",

package/scss/abstracts/_mixins.scss

@@ -123,56 +123,43 @@
     }
 
     > * {
-
         position: relative;
         margin: 0;
+        text-align: var(--list-text-align, left);
 
-        // Simple item
-        &:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
-            @include as-item($name, (), $properties);
-        }
-
-        // Item with links
-        &:has(> a:first-child:last-child) > a {
+        &:has(a[role=button]:only-child, button:only-child) > * {
             display: block;
+            width: 100%;
+            text-align: var(--list-text-align, left);
             @include as-item($name, $states, $properties);
         }
 
-        // Item with button
-        &:has(> button:first-child:last-child) > button {
-            width: 100%;
-            text-align: left;
+        &:not(:has(a[role=button]:only-child, button:only-child)) {
+            @include as-item($name, (), $properties);
         }
 
-        // Remove extra border
         & + *,
-        & + * > a,
-        & + * > button {
+        & + * > :only-child {
             border-top: none !important;
         }
 
         // Remove radius on middle child
         &:not(:first-child, :last-child),
-        &:not(:first-child, :last-child) > a,
-        &:not(:first-child, :last-child) > button {
+        &:not(:first-child, :last-child) > :only-child {
             border-radius: 0 !important;
         }
 
-        // Remove the radius
+        // Remove radius on first/last child
         &:not(:only-child) {
 
-            // Remove radius bottom on first child
             &:first-child,
-            &:first-child > a,
-            &:first-child > button {
+            &:first-child > :only-child {
                 border-end-start-radius: 0 !important;
                 border-end-end-radius: 0 !important;
             }
 
-            // Remove radius top on last child
             &:last-child,
-            &:last-child > a,
-            &:last-child > button {
+            &:last-child > :only-child {
                 border-start-start-radius: 0 !important;
                 border-start-end-radius: 0 !important;
             }
@@ -180,6 +167,7 @@
         }
 
     }
+
 }
 
 /// Create a basic item with an header and a footer style

package/scss/base/_reset.scss

@@ -10,7 +10,7 @@
 ////
 
 // Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-*:where(:not(iframe, canvas, img, svg, video, abbr, b, strong, i, em, cite, s, u, sub, sup, mark, code):not(svg *)) {
+*:where(:not(iframe, canvas, img, video, abbr, b, strong, i, em, cite, s, u, sub, sup, mark, code, svg, defs, g, path, rect, circle, line, text)) {
     all: unset;
     display: revert;
 }

package/scss/components/_card.scss

@@ -74,22 +74,29 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
         }
     }
 
-    > .list {
+    > .list > * {
 
-        > *,
-        > * > a {
+        &:not(:has(a[role=button]:only-child, button:only-child)),
+        &:has(a[role=button]:only-child, button:only-child) > * {
             border-inline: none !important;
-            border-radius: inherit !important;
         }
 
-        > *:first-child,
-        > *:first-child > a {
-            border-top: 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;
+            }
 
-        > *:last-child,
-        > *:last-child > a {
-            border-bottom: none !important;
         }
 
     }