@ulu/frontend 0.1.0-beta.103 → 0.1.0-beta.105

package/docs-dev/changelog/index.html

@@ -5646,6 +5646,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.105">0.1.0-beta.105</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.104">0.1.0-beta.104</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.103">0.1.0-beta.103</a>
             		</li>
 
@@ -6003,6 +6009,20 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.105" tabindex="-1">0.1.0-beta.105</h2>
+<ul>
+<li><strong>scss/components/menu-stack</strong>
+<ul>
+<li>Reduced active selector list to what is applicable per child type (link vs toggle vs selectable)</li>
+<li>Add hide-inputs option</li>
+<li>Style selectable active state based on inner checked input</li>
+</ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.104" tabindex="-1">0.1.0-beta.104</h2>
+<ul>
+<li><strong>scss/components/breadcrumb</strong> - Change child selector <code>.breadcrumb__text</code> to <code>.breadcrumb__current</code> for clarity</li>
+</ul>
 <h2 id="0.1.0-beta.103" tabindex="-1">0.1.0-beta.103</h2>
 <ul>
 <li><strong>scss/components/breadcrumb</strong> - Add new breadcrumb layout component</li>

package/docs-dev/demos/breadcrumb/index.html

@@ -5670,7 +5670,7 @@
       <span class="breadcrumb__separator fas fa-chevron-right" aria-hidden="true"></span>
     </li>
     <li class="breadcrumb__item" aria-current="page">
-      <span class="breadcrumb__text">Current Page</span>
+      <span class="breadcrumb__current">Current Page</span>
     </li>
   </ol>
 </nav>
@@ -5693,7 +5693,7 @@
       <span class="breadcrumb__separator fas fa-chevron-right" aria-hidden="true"></span>
     </li>
     <li class="breadcrumb__item" aria-current="page">
-      <span class="breadcrumb__text">Current Page</span>
+      <span class="breadcrumb__current">Current Page</span>
     </li>
   </ol>
 </nav>
@@ -5731,7 +5731,7 @@
       <span class="breadcrumb__separator fas fa-chevron-right" aria-hidden="true"></span>
     </li>
     <li class="breadcrumb__item" aria-current="page">
-      <span class="breadcrumb__text">Current Page</span>
+      <span class="breadcrumb__current">Current Page</span>
     </li>
   </ol>
 </nav>

package/docs-dev/demos/card/index.html

@@ -5664,60 +5664,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-385" name="title" checked="">
-<label for="live-demo-id-385">
+  <input type="checkbox" id="live-demo-id-9" name="title" checked="">
+<label for="live-demo-id-9">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-386" name="body" checked="">
-<label for="live-demo-id-386">
+  <input type="checkbox" id="live-demo-id-10" name="body" checked="">
+<label for="live-demo-id-10">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-387" name="content" checked="">
-<label for="live-demo-id-387">
+  <input type="checkbox" id="live-demo-id-11" name="content" checked="">
+<label for="live-demo-id-11">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-388" name="aside" checked="">
-<label for="live-demo-id-388">
+  <input type="checkbox" id="live-demo-id-12" name="aside" checked="">
+<label for="live-demo-id-12">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-389" name="footer" checked="">
-<label for="live-demo-id-389">
+  <input type="checkbox" id="live-demo-id-13" name="footer" checked="">
+<label for="live-demo-id-13">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-390">
+<label for="live-demo-id-14">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-390" name="action">
+  <select id="live-demo-id-14" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-391">
+<label for="live-demo-id-15">
   Media
 </label>  
-  <select id="live-demo-id-391" name="media">
+  <select id="live-demo-id-15" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-392">
+<label for="live-demo-id-16">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-392" name="layout">
+  <select id="live-demo-id-16" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

package/docs-dev/demos/data-table/index.html

@@ -5702,178 +5702,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-193">
+<table class="data-table data-table--striped" id="dt-5">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-193-type" rowspan="2">Type</th>
-      <th id="dt-193-group" colspan="2">Group</th>
-      <th id="dt-193-details" colspan="2">Details</th>
-      <th id="dt-193-id" rowspan="2">Id</th>
+      <th id="dt-5-type" rowspan="2">Type</th>
+      <th id="dt-5-group" colspan="2">Group</th>
+      <th id="dt-5-details" colspan="2">Details</th>
+      <th id="dt-5-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-193-group" id="dt-193-primary">Primary</th>
-      <th headers="dt-193-group" id="dt-193-secondary">Secondary</th>
-      <th headers="dt-193-details" id="dt-193-before">Before Task</th>
-      <th headers="dt-193-details" id="dt-193-after">After Task</th>
+      <th headers="dt-5-group" id="dt-5-primary">Primary</th>
+      <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
+      <th headers="dt-5-details" id="dt-5-before">Before Task</th>
+      <th headers="dt-5-details" id="dt-5-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-193-type dt-193-r1" id="dt-193-r1">Default</th>
-      <td headers="dt-193-group dt-193-primary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-group dt-193-secondary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-before dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-after dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-193-group dt-193-primary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-group dt-193-secondary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-before dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-after dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-id">OL-53-GHSLE</td>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-193-group dt-193-primary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-group dt-193-secondary dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-before dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-details dt-193-after dt-193-r1">Lorem Ipsum</td>
-      <td headers="dt-193-id">OL-53-GHSLE</td>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-194">
+<table class="data-table data-table--large-first" id="dt-6">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-194-type" rowspan="2">Type</th>
-      <th id="dt-194-group" colspan="2">Group</th>
-      <th id="dt-194-details" colspan="2">Details</th>
-      <th id="dt-194-id" rowspan="2">Id</th>
+      <th id="dt-6-type" rowspan="2">Type</th>
+      <th id="dt-6-group" colspan="2">Group</th>
+      <th id="dt-6-details" colspan="2">Details</th>
+      <th id="dt-6-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-194-group" id="dt-194-primary">Primary</th>
-      <th headers="dt-194-group" id="dt-194-secondary">Secondary</th>
-      <th headers="dt-194-details" id="dt-194-before">Before Task</th>
-      <th headers="dt-194-details" id="dt-194-after">After Task</th>
+      <th headers="dt-6-group" id="dt-6-primary">Primary</th>
+      <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
+      <th headers="dt-6-details" id="dt-6-before">Before Task</th>
+      <th headers="dt-6-details" id="dt-6-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-194-type dt-194-r1" id="dt-194-r1">Default</th>
-      <td headers="dt-194-group dt-194-primary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-group dt-194-secondary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-before dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-after dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-194-group dt-194-primary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-group dt-194-secondary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-before dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-after dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-id">OL-53-GHSLE</td>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-194-group dt-194-primary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-group dt-194-secondary dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-before dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-details dt-194-after dt-194-r1">Lorem Ipsum</td>
-      <td headers="dt-194-id">OL-53-GHSLE</td>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-195">
+<table class="data-table data-table--large-header" id="dt-7">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-195-type" rowspan="2">Type</th>
-      <th id="dt-195-group" colspan="2">Group</th>
-      <th id="dt-195-details" colspan="2">Details</th>
-      <th id="dt-195-id" rowspan="2">Id</th>
+      <th id="dt-7-type" rowspan="2">Type</th>
+      <th id="dt-7-group" colspan="2">Group</th>
+      <th id="dt-7-details" colspan="2">Details</th>
+      <th id="dt-7-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-195-group" id="dt-195-primary">Primary</th>
-      <th headers="dt-195-group" id="dt-195-secondary">Secondary</th>
-      <th headers="dt-195-details" id="dt-195-before">Before Task</th>
-      <th headers="dt-195-details" id="dt-195-after">After Task</th>
+      <th headers="dt-7-group" id="dt-7-primary">Primary</th>
+      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
+      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
+      <th headers="dt-7-details" id="dt-7-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-195-type dt-195-r1" id="dt-195-r1">Default</th>
-      <td headers="dt-195-group dt-195-primary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-group dt-195-secondary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-before dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-after dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-195-group dt-195-primary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-group dt-195-secondary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-before dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-after dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-195-group dt-195-primary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-group dt-195-secondary dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-before dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-details dt-195-after dt-195-r1">Lorem Ipsum</td>
-      <td headers="dt-195-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-196">
+<table class="data-table data-table--no-border" id="dt-8">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-196-type" rowspan="2">Type</th>
-      <th id="dt-196-group" colspan="2">Group</th>
-      <th id="dt-196-details" colspan="2">Details</th>
-      <th id="dt-196-id" rowspan="2">Id</th>
+      <th id="dt-8-type" rowspan="2">Type</th>
+      <th id="dt-8-group" colspan="2">Group</th>
+      <th id="dt-8-details" colspan="2">Details</th>
+      <th id="dt-8-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-196-group" id="dt-196-primary">Primary</th>
-      <th headers="dt-196-group" id="dt-196-secondary">Secondary</th>
-      <th headers="dt-196-details" id="dt-196-before">Before Task</th>
-      <th headers="dt-196-details" id="dt-196-after">After Task</th>
+      <th headers="dt-8-group" id="dt-8-primary">Primary</th>
+      <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
+      <th headers="dt-8-details" id="dt-8-before">Before Task</th>
+      <th headers="dt-8-details" id="dt-8-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-196-type dt-196-r1" id="dt-196-r1">Default</th>
-      <td headers="dt-196-group dt-196-primary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-group dt-196-secondary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-before dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-after dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-196-group dt-196-primary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-group dt-196-secondary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-before dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-after dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-id">OL-53-GHSLE</td>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-196-group dt-196-primary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-group dt-196-secondary dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-before dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-details dt-196-after dt-196-r1">Lorem Ipsum</td>
-      <td headers="dt-196-id">OL-53-GHSLE</td>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/menu-stack/index.html

@@ -5790,6 +5790,59 @@
     </li>
   </ul>
 </div>
+<h2 class="h2">Checkbox Menu (hide-inputs)</h2>
+<div class="menu-stack form-theme menu-stack--hide-inputs">
+  <ul class="menu-stack__list">
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-1">
+        <label for="cb-no-input-1"> Example Item that is very long and will wrap in menu </label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-2" checked="">
+        <label for="cb-no-input-2">Example Item 2 (checked)</label>
+      </div>
+    </li>
+    <li class="menu-stack__item menu-stack__item--separator-before">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-3">
+        <label for="cb-no-input-3">Example Item 3</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-4">
+        <label for="cb-no-input-4">Example Item 4</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-5">
+        <label for="cb-no-input-5">Example Item 5</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-6">
+        <label for="cb-no-input-6">Example Item 6</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-7">
+        <label for="cb-no-input-7">Example Item 7</label>
+      </div>
+    </li>
+    <li class="menu-stack__item">
+      <div class="menu-stack__selectable">
+        <input type="checkbox" id="cb-no-input-8">
+        <label for="cb-no-input-8">Example Item 8</label>
+      </div>
+    </li>
+  </ul>
+</div>
 <h2 class="h2">With Icons</h2>
 <div class="menu-stack">
   <h3 class="menu-stack__label">Example Label</h3>

package/docs-dev/sass/core/breakpoint/index.html

@@ -6273,10 +6273,10 @@
 <p>Example usage</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-sizes </span><span class="pjs-token pjs-punctuation">{</span>
   <span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$sizes</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$sizes</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-sizes</span> <span class="pjs-token pjs-punctuation">{</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="returns-1" tabindex="-1">Returns</h4>
 <table>
@@ -6317,10 +6317,10 @@
 <h4 id="examples-9" tabindex="-1">Examples</h4>
 <p>Example usage</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size </span><span class="pjs-token pjs-punctuation">{</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size</span> <span class="pjs-token pjs-punctuation">{</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="parameters-8" tabindex="-1">Parameters</h4>
 <table>
@@ -6379,12 +6379,12 @@
 <h4 id="examples-10" tabindex="-1">Examples</h4>
 <p>Example usage</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size-value </span><span class="pjs-token pjs-punctuation">{</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
-  <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size-value</span> <span class="pjs-token pjs-punctuation">{</span>
-  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 75.99em<span class="pjs-token pjs-punctuation">;</span>
-  <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> 75.99em<span class="pjs-token pjs-punctuation">;</span>
+  <span class="pjs-token pjs-property">content</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
 <span class="pjs-token pjs-punctuation">}</span></code></pre>
 <h4 id="parameters-9" tabindex="-1">Parameters</h4>
 <table>

package/package.json

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

@@ -88,7 +88,7 @@ $config: (
     align-items: center;
   }
   #{ $prefix }__link,
-  #{ $prefix }__text {
+  #{ $prefix }__current {
     white-space: nowrap;
     overflow: hidden;
     max-width: get("item-max-width");