@ulu/frontend 0.1.0-beta.110 → 0.1.0-beta.112

package/docs-dev/sass/helpers/utilities/index.html

@@ -956,13 +956,106 @@
         </li>
       
         
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
+            <summary class="nav-tree__toggle">
+              
+    <span class="nav-tree__toggle-content">
+      
+    
+    <span class="nav-tree__text">
+      Core
+    </span>
+  
+    </span>
+    <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
+  
+            </summary>
+            
+      <ul class="nav-tree" data-menu-depth="3">
+        
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/sass/core/">
+        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
           
     
     <span class="nav-tree__text">
-      Core
+      Introduction
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+        
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/breakpoint/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/button/">
+          
+    
+    <span class="nav-tree__text">
+      Button
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/color/">
+          
+    
+    <span class="nav-tree__text">
+      Color
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/cssvar/">
+          
+    
+    <span class="nav-tree__text">
+      Cssvar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/element/">
+          
+    
+    <span class="nav-tree__text">
+      Element
     </span>
   
         </a>
@@ -971,6 +1064,101 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/layout/">
+          
+    
+    <span class="nav-tree__text">
+      Layout
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/path/">
+          
+    
+    <span class="nav-tree__text">
+      Path
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/selector/">
+          
+    
+    <span class="nav-tree__text">
+      Selector
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/typography/">
+          
+    
+    <span class="nav-tree__text">
+      Typography
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/units/">
+          
+    
+    <span class="nav-tree__text">
+      Units
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/utils/">
+          
+    
+    <span class="nav-tree__text">
+      Utils
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+      </ul>
+    
+          </details>
+        </li>
+      
+
         <li class="nav-tree__item  ">
           <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">
@@ -3614,13 +3802,106 @@
         </li>
       
         
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
+            <summary class="nav-tree__toggle">
+              
+    <span class="nav-tree__toggle-content">
+      
+    
+    <span class="nav-tree__text">
+      Core
+    </span>
+  
+    </span>
+    <span class="nav-tree__toggle-icon fas fa-chevron-down" aria-hidden="true"></span>
+  
+            </summary>
+            
+      <ul class="nav-tree" data-menu-depth="3">
+        
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/sass/core/">
+        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/core/">
           
     
     <span class="nav-tree__text">
-      Core
+      Introduction
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+        
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/breakpoint/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/button/">
+          
+    
+    <span class="nav-tree__text">
+      Button
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/color/">
+          
+    
+    <span class="nav-tree__text">
+      Color
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/cssvar/">
+          
+    
+    <span class="nav-tree__text">
+      Cssvar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/element/">
+          
+    
+    <span class="nav-tree__text">
+      Element
     </span>
   
         </a>
@@ -3629,6 +3910,101 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/layout/">
+          
+    
+    <span class="nav-tree__text">
+      Layout
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/path/">
+          
+    
+    <span class="nav-tree__text">
+      Path
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/selector/">
+          
+    
+    <span class="nav-tree__text">
+      Selector
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/typography/">
+          
+    
+    <span class="nav-tree__text">
+      Typography
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/units/">
+          
+    
+    <span class="nav-tree__text">
+      Units
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/core/utils/">
+          
+    
+    <span class="nav-tree__text">
+      Utils
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+      </ul>
+    
+          </details>
+        </li>
+      
+
         <li class="nav-tree__item  ">
           <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.110",
+  "version": "0.1.0-beta.112",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_accordion.scss

@@ -124,6 +124,7 @@ $config: (
 
   // When not one of our custom classed details components
   #{ $prefix } {
+    position: relative; // For pushing to the top when in accordion groups
     padding: 0;
     margin: get("margin");
     border: $border;
@@ -161,15 +162,26 @@ $config: (
       > #{ $prefix }__summary {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0; 
+
         @if (get("summary-border-enabled")) {
-          border-bottom: get("summary-border-width") solid color.get(get("summary-border-color"));
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            height: get("summary-border-width");
+            background-color: color.get(get("summary-border-color"));
+          }
         }
       }
     }
   }
   #{ $prefix }__summary {
+    position: relative; // For pseudo border (done this way for animations)
     display: flex;
     list-style: none; // Remove the default arrow (old safari?)
+    width: 100%; // For <button>
     background-color: color.get(get("summary-background-color"));
     color: color.get(get("summary-color"));
     line-height: get("summary-line-height");

package/scss/components/_card.scss

@@ -89,9 +89,10 @@ $config: (
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
   "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-body-max-width" : 40rem,
   "horizontal-min-height" : 20rem,
   "horizontal-max-width" : 80rem,
+  "horizontal-main-max-width" : 40rem,
+  "horizontal-aside-width" : 40%,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -126,7 +127,6 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  // new below
   "aside-rule" : false,
   "aside-rule-width" : 1px,
   "aside-background-color" : transparent,
@@ -520,19 +520,17 @@ $config: (
     }
     #{ $prefix }__body {
       flex-direction: row;
-      max-width: get("horizontal-body-max-width");
+      justify-content: space-between;
+    }
+    #{ $prefix }__main {
+      flex-grow: 1;
+      max-width: get("horizontal-main-max-width");
+    }
+    #{ $prefix }__aside {
+      flex: 0 0 get("horizontal-aside-width");
+      height: 100%;
     }
-    
     @if(get("aside-rule")) {
-      #{ $prefix }__main {
-        flex: 1 1 60%;
-      }
-      #{ $prefix }__aside {
-        flex: 1 1 40%;
-        height: 100%;
-        // flex-basis: 40%;
-        // min-width: 40%;
-      }
       #{ $prefix }__aside::after {
         content: "";
         position: absolute;

package/scss/components/_progress-bar.scss

@@ -27,6 +27,7 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Dimension} header-gap [0.25em] Margin/gap for the icon/value
 /// @prop {List} margin [(0 0 0.5em 0)] Margin for the progress bar.
 /// @prop {Boolean} line-height [true] Line height for the progress bar. If true, falls back to typography's `line-height-dense`.
 /// @prop {Color} value-color ["type-tertiary"] Color of the value text.
@@ -37,7 +38,6 @@ $-fallbacks: (
 /// @prop {Dimension} bar-height [12px] Height of the progress bar.
 /// @prop {Color} bar-color [rgb(80, 80, 171)] Color of the progress bar.
 /// @prop {Color} bar-color-deficit ["danger"] Color of the deficit portion of the progress bar.
-/// @prop {Dimension} icon-margin [0.25em] Margin for the icon.
 /// @prop {Color} icon-color ["type-tertiary"] Color of the icon.
 /// @prop {Color} icon-color-deficit ["danger"] Color of the icon in a deficit state.
 /// @prop {Color} track-color [#ccc] Color of the progress bar track.
@@ -50,6 +50,7 @@ $-fallbacks: (
 
 $config: (
   "margin" : (0 0 0.5em 0),
+  "header-gap" : 0.25em,
   "line-height" : true,
   "value-color" : "type-tertiary",
   "value-margin" : 0.5em,
@@ -59,7 +60,6 @@ $config: (
   "bar-height" : 12px,
   "bar-color" : "indicator",
   "bar-color-deficit" : "danger",
-  "icon-margin" : 0.25em,
   "icon-color" : "type-tertiary",
   "icon-color-deficit" : "danger",
   "track-color" : "placeholder-background-alt",
@@ -137,11 +137,19 @@ $styles: (
     display: flex;
     align-items: flex-end;
   }
+  #{ $prefix }__value {
+    font-weight: get("value-font-weight");
+    color: color.get(get("value-color"));
+  }
   #{ $prefix }__icon {
-    margin-left: auto;
-    padding-left: get("icon-margin");
     color: color.get(get("icon-color"));
   }
+  #{ $prefix }__icon,
+  #{ $prefix }__header #{ $prefix }__value {
+    margin-left: auto;
+    padding-left: get("header-gap");
+  }
+  
   #{ $prefix }__track {
     position: relative; // For indeterminate animation
     margin: get("track-margin");
@@ -178,10 +186,8 @@ $styles: (
   }
   #{ $prefix }__values {
     display: flex;
-    font-weight: get("value-font-weight");
-    color: color.get(get("value-color"));
   }
-  #{ $prefix }__value {
+  #{ $prefix }__values #{ $prefix }__value:not(:last-child) {
     margin-right: get("value-margin");
   }
   #{ $prefix }__value--deficit {