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

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

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">

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

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">

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

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">

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

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">

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

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -5626,12 +5686,16 @@
 <li><strong>File:</strong> _utilities.scss</li>
 <li><strong>Group:</strong> utilities</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 10-13</li>
-<li><strong>Lines (code):</strong> 15-124</li>
+<li><strong>Lines (comments):</strong> 11-14</li>
+<li><strong>Lines (code):</strong> 16-130</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">helper-utilities-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="require" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/helpers/units/#function-get">get()</a></li>
+</ul>
 
     </div>
   </div>

package/docs-dev/sass/index.html

@@ -211,6 +211,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -1395,6 +1410,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">
@@ -2967,6 +2997,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/breadcrumb/">
+          
+    
+    <span class="nav-tree__text">
+      Breadcrumb
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button/">

package/package.json

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

@@ -0,0 +1,110 @@
+////
+/// @group breadcrumb
+/// Breadcrumb trail list layout
+////
+
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+
+@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-densest"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {List} margin [(0 0 1.25em 0)] Margin for component
+/// @prop {CssUnit} row-gap [0.35em] Gap when breadcrumbs wrap
+/// @prop {Color} color ["type-tertiary"] Base color (links inherit this)
+/// @prop {Color} color-hover ["link-hover"] Color for link hover
+/// @prop {CssUnit} line-height [true] Line height, defaults to typography line-height-densest
+/// @prop {CssUnit} item-max-width [15em] Max length of item text
+/// @prop {Color} separator-color [null] Optional color to apply to separator
+/// @prop {Number} separator-opacity [0.7] Optional opacity for separator
+/// @prop {List} separator-margin [(0 0.5em)] Separator margin
+
+$config: (
+  "row-gap":              0.5em,
+  "margin" :              (0 0 1.25em 0),
+  "color":                 "type-tertiary",
+  "color-hover":           "link-hover",
+  "line-height":           true,
+  "item-max-width":        15em,
+  "separator-margin":      (0 0.5em),
+  "separator-color":       null,
+  "separator-opacity":     0.7,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-breadcrumb-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-breadcrumb-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "breadcrumb [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo breadcrumb
+/// @example scss
+///  @include ulu.component-breadcrumb-styles();
+
+@mixin styles {
+  $prefix: selector.class("breadcrumb");
+  
+  #{ $prefix } {
+    color: color.get(get("color"));
+    margin: get("margin");
+    line-height: get("line-height");
+  }
+  #{ $prefix }__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: get("row-gap") 0;
+  }
+  #{ $prefix }__item {
+    display: flex;
+    align-items: center;
+  }
+  #{ $prefix }__link,
+  #{ $prefix }__current {
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: get("item-max-width");
+    text-overflow: ellipsis;
+  }
+  #{ $prefix }__link {
+    color: inherit;
+    text-decoration: none;
+    &:hover,
+    &:focus {
+      color: color.get(get("color-hover"));
+    }
+  }
+  #{ $prefix }__separator {
+    margin: get("separator-margin");
+    color: color.get(get("separator-color"));
+    opacity: get("separator-opacity");
+  }
+}

package/scss/components/_index.scss

@@ -11,6 +11,7 @@
 @forward "button" as button-*;
 @forward "button-group" as button-group-*;
 @forward "button-verbose" as button-verbose-*;
+@forward "breadcrumb" as breadcrumb-*;
 @forward "callout" as callout-*;
 @forward "card" as card-*;
 @forward "card-grid" as card-grid-*;
@@ -69,6 +70,7 @@
 @use "button";
 @use "button-group";
 @use "button-verbose";
+@use "breadcrumb";
 @use "callout";
 @use "card";
 @use "card-grid";
@@ -128,6 +130,7 @@ $all-includes: (
   "button",
   "button-group",
   "button-verbose",
+  "breadcrumb",
   "callout",
   "card",
   "card-grid",
@@ -226,6 +229,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "button-verbose")) {
     @include button-verbose.styles;
   }
+  @if (list.index($includes, "breadcrumb")) {
+    @include breadcrumb.styles;
+  }
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }