@natachah/vanilla-frontend 0.1.12 → 0.1.14

package/docs/pages/components/card.html

@@ -96,7 +96,7 @@
         <p>To make them full width add the class <code>.flush</code></p>
 
         <doc-demo>
-            <div class="card">
+            <div class="card" style="--card-border-color:#000;">
                 <h3>Mycard</h3>
                 <p>Content of the card</p>
                 <div class="group flush">
@@ -105,6 +105,7 @@
                 </div>
                 <p>Content of the card</p>
                 <ul class="list flush">
+                    <li><a href="#" role="button">List F</a></li>
                     <li>List D</li>
                     <li><a>List E</a></li>
                     <li><span>List F</span><button>Button</button></li>
@@ -114,7 +115,7 @@
         </doc-demo>
 
         <doc-code>
-            <div class="card">
+            <div class="card" style="--card-border-color:#000">
                 <h3>Mycard</h3>
                 <p>Content of the card</p>
                 <div class="group flush">
@@ -151,7 +152,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    card
+                card
                 );
             </doc-code>
         </div>
@@ -176,7 +177,7 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    card: (primary)
+                card: (primary)
                 );
             </doc-code>
         </div>

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.12
+                                0.1.14
                             </span>
                         </li>
                         <li>

package/package.json

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

package/scss/abstracts/_mixins.scss

@@ -129,14 +129,14 @@
         margin: 0;
         text-align: var(--list-text-align, left);
 
-        & > *:is(a[role=button]:only-child, button:only-child) {
+        &: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);
         }
 
-        &:not(:has(a[role=button]:only-child, button:only-child)) {
+        &:not(:has(> a[role=button]:only-child, > button:only-child)) {
             @include as-item($name, (), $properties);
         }
 

package/scss/components/_card.scss

@@ -62,6 +62,10 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
         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));
     }
 
+    > .flush {
+        border-radius: 0;
+    }
+
     > picture.flush {
         max-width: inherit;
         overflow: hidden;
@@ -73,12 +77,12 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
 
     > .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;
+
+        &:has(> a[role=button]:only-child, > button:only-child) > * {
             border-inline: none !important;
         }
 
-
         &:first-child,
         &:first-child > :only-child {
             border-top: none !important;
@@ -93,8 +97,6 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
             border-end-end-radius: inherit !important;
         }
 
-
-
     }
 
     > .flush.group {