@natachah/vanilla-frontend 0.1.1 → 0.1.2

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/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/list.html

@@ -34,7 +34,7 @@
                     <li>List B</li>
                     <li><a href="#">List C</a></li>
                     <li>List D</li>
-                    <li>List E</li>
+                    <li><span>List E</span> <button>button</button></li>
                 </ul>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">

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

package/package.json

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

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;
         }
 
     }