@ulu/frontend 0.1.0-beta.104 → 0.1.0-beta.106

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

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">

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

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">

package/docs-dev/sass/index.html

@@ -646,6 +646,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">
@@ -3432,6 +3447,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/progress-bar/">
+          
+    
+    <span class="nav-tree__text">
+      Progress Bar
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/pull-quote/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.104",
+  "version": "0.1.0-beta.106",
   "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/_breakpoint.scss

@@ -72,7 +72,7 @@ $sizes: (
 /// @example scss {compile} Example usage
 ///   .test-get-sizes {
 ///     $sizes: ulu.breakpoint-get-sizes();
-///     height: map.get($sizes, "medium");
+///     content: map.get($sizes, "medium");
 ///   }
 /// @return {Map} Map of breakpoints (equivalent to $sizes)
 
@@ -85,7 +85,7 @@ $sizes: (
 /// @compiler
 /// @example scss {compile} Example usage
 ///   .test-get-size {
-///     height: ulu.breakpoint-get-size("medium");
+///     content: ulu.breakpoint-get-size("medium");
 ///   }
 /// @return {Number} The sizes value
 
@@ -98,8 +98,8 @@ $sizes: (
 /// @compiler
 /// @example scss {compile} Example usage
 ///   .test-get-size-value {
-///     height: ulu.breakpoint-get-size-value("medium", true);
-///     max-height: ulu.breakpoint-get-size-value("medium");
+///     content: ulu.breakpoint-get-size-value("medium", true);
+///     content: ulu.breakpoint-get-size-value("medium");
 ///   }
 /// @return {Number} The value for the given size
 

package/scss/components/_index.scss

@@ -40,6 +40,7 @@
 @forward "placeholder-block" as placeholder-block-*;
 @forward "pull-quote" as pull-quote-*;
 @forward "popover" as popover-*;
+@forward "progress-bar" as progress-bar-*;
 @forward "rail" as rail-*;
 @forward "ratio-box" as ratio-box-*;
 @forward "rule" as rule-*;
@@ -98,6 +99,7 @@
 @use "panel";
 @use "placeholder-block";
 @use "popover";
+@use "progress-bar";
 @use "pull-quote";
 @use "rail";
 @use "ratio-box";
@@ -157,6 +159,7 @@ $all-includes: (
   "pager",
   "panel",
   "popover",
+  "progress-bar",
   "rail",
   "ratio-box",
   "rule",
@@ -325,6 +328,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "popover")) {
     @include popover.styles;
   }
+  @if (list.index($includes, "progress-bar")) {
+    @include progress-bar.styles;
+  }
   @if (list.index($includes, "pull-quote")) {
     @include pull-quote.styles;
   }

package/scss/components/_menu-stack.scss

@@ -75,7 +75,7 @@ $config: (
   "label-line-height" : true,
   "link-separated-margin" : false,
   "link-separated-rule-style" : false,
-  "link-active-selectors" : (".is-active", '[aria-current="page"]'),
+  "link-active-selectors" : (".is-active",),
   "link-background-color" : transparent,
   "link-background-color-active" : rgb(219, 219, 219),
   "link-background-color-hover" : rgb(240, 240, 240),
@@ -181,20 +181,27 @@ $config: (
       color: color.get(get("link-color-hover"));
       background-color: color.get(get("link-background-color-hover"));
     }
-    @each $active-selector in get("link-active-selectors") {
-      &#{ $active-selector } {
-        &,
-        &:hover {
-          color: color.get(get("link-color-active"));
-          background-color: color.get(get("link-background-color-active"));
-        }
-      }
-    }
   }
   #{ $prefix }__selectable {
     padding: 0;
     position: relative;
   }
+
+  // Combine all active selectors using sass:selector functions
+  $base-selectors: #{ $prefix }__link, #{ $prefix }__toggle;
+  $active-from-config: get("link-active-selectors");
+  $traditional-active: sassSelector.append($base-selectors, $active-from-config);
+
+  $checked-active: sassSelector.parse("#{ $prefix }__selectable:has(> [type='checkbox']:checked), #{ $prefix }__selectable:has(> [type='radio']:checked)");
+
+  #{ $traditional-active, $checked-active },
+  #{ $prefix }__link[aria-current="page"] {
+    &,
+    &:hover {
+      color: color.get(get("link-color-active"));
+      background-color: color.get(get("link-background-color-active"));
+    }
+  }
   #{ $prefix }__selectable [type="checkbox"],
   #{ $prefix }__selectable [type="radio"],
   #{ $prefix }__selectable-input {
@@ -258,4 +265,17 @@ $config: (
       padding: get("compact-link-padding-y") get("compact-link-padding-x");
     }
   }
+
+  #{ $prefix }--hide-inputs {
+    #{ $prefix }__selectable-input,
+    #{ $prefix }__selectable [type="checkbox"],
+    #{ $prefix }__selectable [type="radio"] {
+      @include element.hidden-visually();
+    }
+
+    #{ $prefix }__selectable label,
+    #{ $prefix }__selectable-label {
+      padding-left: get("link-padding-x");
+    }
+  }
 }

package/scss/components/_progress-bar.scss

@@ -0,0 +1,257 @@
+////
+/// @group progress-bar
+/// Groups a set of buttons
+////
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:math";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../typography";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+  "value-font-weight" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "font-weight-light"
+  )
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} max-width [20rem] Max-width of the progress bar.
+/// @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.
+/// @prop {Dimension} value-margin [0.5em] Margin for the value text.
+/// @prop {Boolean} value-font-weight [true] Font weight for the value text. If true, falls back to typography's `font-weight-light`.
+/// @prop {Dimension} value-margin-deficit [0.3em] Margin for the deficit value text.
+/// @prop {Color} value-color-deficit ["danger"] Color of the deficit value text.
+/// @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.
+/// @prop {List} track-margin [(0.1em 0)] Margin for the progress bar track.
+/// @prop {Time} animation-duration [200ms] Duration of the width transition animation.
+/// @prop {CssValue} animation-timing [ease] Timing function for the width transition animation.
+/// @prop {Time} animation-initial-duration [500ms] Duration of the initial fill animation.
+/// @prop {CssValue} animation-initial-timing [ease-in] Timing function for the initial fill animation.
+/// @prop {Time} animation-indeterminate-duration [2.5s] Duration of the indeterminate loading animation.
+
+$config: (
+  "max-width" : 20rem,
+  "margin" : (0 0 0.5em 0),
+  "line-height" : true,
+  "value-color" : "type-tertiary",
+  "value-margin" : 0.5em,
+  "value-font-weight" : true,
+  "value-margin-deficit" : 0.3em,
+  "value-color-deficit" : "danger",
+  "bar-height" : 12px,
+  "bar-color" : rgb(80, 80, 171),
+  "bar-color-deficit" : "danger",
+  "icon-margin" : 0.25em,
+  "icon-color" : "type-tertiary",
+  "icon-color-deficit" : "danger",
+  "track-color" : #ccc,
+  "track-margin" : (0.1em 0),
+  "animation-duration" : 200ms,
+  "animation-timing" : ease,
+  "animation-initial-duration" : 500ms,
+  "animation-initial-timing" : ease-in,
+  "animation-indeterminate-duration" : 2.5s
+) !default;
+
+/// @type Map
+/// This is the map of styles (variations in progress bar types)
+/// - Each style becomes the modifier and accepts ("bar-color", "bar-height", "track-color")
+/// - Use this to match whatever progress system(s) your creating
+$styles: (
+  "positive" : (
+    "bar-color" : "success",
+    "icon-color" : "success"
+  ),
+  "negative" : (
+    "bar-color" : "danger",
+    "icon-color" : "danger"
+  ),
+  "small" : (
+    "bar-height" : 8px
+  ),
+  "loader" : (
+    "bar-height" : 4px,
+    "track-color" : transparent
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-progress-bar-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-progress-bar-set-styles(( "small" : ( "bar-height" : 8px ) ));
+
+@mixin set-styles($changes) {
+  $styles: map.merge($styles, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-progress-bar-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "progress-bar [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo progress-bar
+/// @example scss
+///  @include ulu.component-progress-bar-styles();
+
+@mixin styles {
+  $prefix: selector.class("progress-bar");
+  
+  #{ $prefix } {
+    max-width: get("max-width");
+    line-height: get("line-height");
+    margin: get("margin");
+  }
+  #{ $prefix }__header {
+    display: flex;
+    align-items: flex-end;
+  }
+  #{ $prefix }__icon {
+    margin-left: auto;
+    padding-left: get("icon-margin");
+    color: color.get(get("icon-color"));
+  }
+  #{ $prefix }__track {
+    position: relative; // For indeterminate animation
+    margin: get("track-margin");
+    display: flex;
+    width: 100%;
+    height: get("bar-height");
+    overflow: hidden;
+    background-color: color.get(get("track-color"));
+  }
+  #{ $prefix }__bar {
+    display: flex;
+    height: 100%;
+    // This is the animation when the component is living in the page
+    transition: width get("animation-duration") get("animation-timing"); 
+    // This is the initial animation of the bar within itself (ie. filling up)
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      background-color: color.get(get("bar-color"));
+      transform-origin: left center;
+      animation: ulu-progress-bar get("animation-initial-duration") forwards get("animation-initial-timing");
+    }
+  }
+  #{ $prefix }--deficit {
+    #{ $prefix }__icon {
+      color: color.get(get("icon-color-deficit"));
+    }
+  }
+  #{ $prefix }__bar--deficit {
+    align-items: flex-end;
+    margin-left: auto;
+    background-color: color.get(get("bar-color-deficit"));
+  }
+  #{ $prefix }__values {
+    display: flex;
+    font-weight: get("value-font-weight");
+    color: color.get(get("value-color"));
+  }
+  #{ $prefix }__value {
+    margin-right: get("value-margin");
+  }
+  #{ $prefix }__value--deficit {
+    margin-left: auto;
+    margin-right: get("value-margin-deficit");
+    color: color.get(get("value-color-deficit"));
+    & + #{ $prefix }__value--total {
+      margin-left: 0;
+    }
+  }
+  #{ $prefix }__value--total {
+    margin-left: auto;
+    margin-right: 0;
+  }
+  
+  @each $name, $props in $styles {
+    #{ $prefix }--#{ $name } {
+      #{ $prefix }__track {
+        height: map.get($props, "bar-height");
+      }
+      #{ $prefix }__bar:before {
+        background-color: color.get(map.get($props, "bar-color"));
+      }
+      #{ $prefix }__track {
+        background-color: color.get(map.get($props, "track-color"));
+      }
+      #{ $prefix }__icon {
+        color: color.get(map.get($props, "icon-color"));
+      }
+    }
+  }
+
+
+  // For Site Loading (Async Content, not charting/visualization)
+  #{ $prefix }--indeterminate {
+    #{ $prefix }__bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30%;
+      animation: ulu-progress-bar-indeterminate get("animation-indeterminate-duration") linear infinite;
+    }
+    // &#{ $prefix }--loaded {
+    //   #{ $prefix }__bar {
+    //     display: none;
+    //   }
+    // }
+  }
+
+  @keyframes ulu-progress-bar {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes ulu-progress-bar-indeterminate {
+    0% {
+      left: -100%;
+    }
+    50% {
+      left: 100%;
+    }
+    100% {
+      left: -100%;
+    }
+  }
+}

package/scss/helpers/_utilities.scss

@@ -42,6 +42,12 @@
   #{ selector.class("flex-basis-full") } {
     flex-basis: 100%;
   }
+  #{ selector.class("flex-grow") } {
+    flex-grow: 1;
+  }
+  #{ selector.class("flex-shrink") } {
+    flex-shrink: 1;
+  }
   #{ selector.class("full-min-height") } {
     min-height: 100%;
   }

package/types/ui/index.d.ts

@@ -20,5 +20,5 @@ export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
 export * as detailsGroup from "./details-group.js";
-declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_ui_index_ { }
+declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
 //# sourceMappingURL=index.d.ts.map

package/types/utils/index.d.ts

@@ -6,5 +6,5 @@ export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
 export * as fontAwesome from "./font-awesome.js";
-declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
+declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map