@ulu/frontend 0.1.0-beta.92 → 0.1.0-beta.94

package/docs-dev/changelog/index.html

@@ -5526,6 +5526,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.93">0.1.0-beta.93</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.92">0.1.0-beta.92</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.91">0.1.0-beta.91</a>
             		</li>
 
@@ -5847,6 +5853,15 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.93" tabindex="-1">0.1.0-beta.93</h2>
+<ul>
+<li><strong>scss/component/card</strong> - Change default $config &quot;color&quot; from null to &quot;type&quot; as it should always have a color set so that when used as a link this color is used vs link color</li>
+</ul>
+<h2 id="0.1.0-beta.92" tabindex="-1">0.1.0-beta.92</h2>
+<ul>
+<li><strong>scss/component/badge</strong> - Add button/a in selector list for clickable styles (still includes badge--clickable modifier but if using button/a these styles will be used also)</li>
+<li><strong>scss/component/badge-stack</strong> - Add new component for badge lists</li>
+</ul>
 <h2 id="0.1.0-beta.91" tabindex="-1">0.1.0-beta.91</h2>
 <ul>
 <li>Fix mistake in $includes in base scss module</li>

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

@@ -5544,60 +5544,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-177" name="title" checked="">
-<label for="live-demo-id-177">
+  <input type="checkbox" id="live-demo-id-65" name="title" checked="">
+<label for="live-demo-id-65">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-178" name="body" checked="">
-<label for="live-demo-id-178">
+  <input type="checkbox" id="live-demo-id-66" name="body" checked="">
+<label for="live-demo-id-66">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-179" name="content" checked="">
-<label for="live-demo-id-179">
+  <input type="checkbox" id="live-demo-id-67" name="content" checked="">
+<label for="live-demo-id-67">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-180" name="aside" checked="">
-<label for="live-demo-id-180">
+  <input type="checkbox" id="live-demo-id-68" name="aside" checked="">
+<label for="live-demo-id-68">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-181" name="footer" checked="">
-<label for="live-demo-id-181">
+  <input type="checkbox" id="live-demo-id-69" name="footer" checked="">
+<label for="live-demo-id-69">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-182">
+<label for="live-demo-id-70">
   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-182" name="action">
+  <select id="live-demo-id-70" 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-183">
+<label for="live-demo-id-71">
   Media
 </label>  
-  <select id="live-demo-id-183" name="media">
+  <select id="live-demo-id-71" 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-184">
+<label for="live-demo-id-72">
   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-184" name="layout">
+  <select id="live-demo-id-72" 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

@@ -5582,178 +5582,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-89">
+<table class="data-table data-table--striped" id="dt-33">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-89-type" rowspan="2">Type</th>
-      <th id="dt-89-group" colspan="2">Group</th>
-      <th id="dt-89-details" colspan="2">Details</th>
-      <th id="dt-89-id" rowspan="2">Id</th>
+      <th id="dt-33-type" rowspan="2">Type</th>
+      <th id="dt-33-group" colspan="2">Group</th>
+      <th id="dt-33-details" colspan="2">Details</th>
+      <th id="dt-33-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-89-group" id="dt-89-primary">Primary</th>
-      <th headers="dt-89-group" id="dt-89-secondary">Secondary</th>
-      <th headers="dt-89-details" id="dt-89-before">Before Task</th>
-      <th headers="dt-89-details" id="dt-89-after">After Task</th>
+      <th headers="dt-33-group" id="dt-33-primary">Primary</th>
+      <th headers="dt-33-group" id="dt-33-secondary">Secondary</th>
+      <th headers="dt-33-details" id="dt-33-before">Before Task</th>
+      <th headers="dt-33-details" id="dt-33-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-89-type dt-89-r1" id="dt-89-r1">Default</th>
-      <td headers="dt-89-group dt-89-primary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-group dt-89-secondary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-before dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-after dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-33-type dt-33-r1" id="dt-33-r1">Default</th>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-89-group dt-89-primary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-group dt-89-secondary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-before dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-after dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-id">OL-53-GHSLE</td>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-89-group dt-89-primary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-group dt-89-secondary dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-before dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-details dt-89-after dt-89-r1">Lorem Ipsum</td>
-      <td headers="dt-89-id">OL-53-GHSLE</td>
+      <td headers="dt-33-group dt-33-primary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-group dt-33-secondary dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-before dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-details dt-33-after dt-33-r1">Lorem Ipsum</td>
+      <td headers="dt-33-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-90">
+<table class="data-table data-table--large-first" id="dt-34">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-90-type" rowspan="2">Type</th>
-      <th id="dt-90-group" colspan="2">Group</th>
-      <th id="dt-90-details" colspan="2">Details</th>
-      <th id="dt-90-id" rowspan="2">Id</th>
+      <th id="dt-34-type" rowspan="2">Type</th>
+      <th id="dt-34-group" colspan="2">Group</th>
+      <th id="dt-34-details" colspan="2">Details</th>
+      <th id="dt-34-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-90-group" id="dt-90-primary">Primary</th>
-      <th headers="dt-90-group" id="dt-90-secondary">Secondary</th>
-      <th headers="dt-90-details" id="dt-90-before">Before Task</th>
-      <th headers="dt-90-details" id="dt-90-after">After Task</th>
+      <th headers="dt-34-group" id="dt-34-primary">Primary</th>
+      <th headers="dt-34-group" id="dt-34-secondary">Secondary</th>
+      <th headers="dt-34-details" id="dt-34-before">Before Task</th>
+      <th headers="dt-34-details" id="dt-34-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-90-type dt-90-r1" id="dt-90-r1">Default</th>
-      <td headers="dt-90-group dt-90-primary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-group dt-90-secondary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-before dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-after dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-34-type dt-34-r1" id="dt-34-r1">Default</th>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-90-group dt-90-primary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-group dt-90-secondary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-before dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-after dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-id">OL-53-GHSLE</td>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-90-group dt-90-primary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-group dt-90-secondary dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-before dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-details dt-90-after dt-90-r1">Lorem Ipsum</td>
-      <td headers="dt-90-id">OL-53-GHSLE</td>
+      <td headers="dt-34-group dt-34-primary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-group dt-34-secondary dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-before dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-details dt-34-after dt-34-r1">Lorem Ipsum</td>
+      <td headers="dt-34-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-91">
+<table class="data-table data-table--large-header" id="dt-35">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-91-type" rowspan="2">Type</th>
-      <th id="dt-91-group" colspan="2">Group</th>
-      <th id="dt-91-details" colspan="2">Details</th>
-      <th id="dt-91-id" rowspan="2">Id</th>
+      <th id="dt-35-type" rowspan="2">Type</th>
+      <th id="dt-35-group" colspan="2">Group</th>
+      <th id="dt-35-details" colspan="2">Details</th>
+      <th id="dt-35-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-91-group" id="dt-91-primary">Primary</th>
-      <th headers="dt-91-group" id="dt-91-secondary">Secondary</th>
-      <th headers="dt-91-details" id="dt-91-before">Before Task</th>
-      <th headers="dt-91-details" id="dt-91-after">After Task</th>
+      <th headers="dt-35-group" id="dt-35-primary">Primary</th>
+      <th headers="dt-35-group" id="dt-35-secondary">Secondary</th>
+      <th headers="dt-35-details" id="dt-35-before">Before Task</th>
+      <th headers="dt-35-details" id="dt-35-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-91-type dt-91-r1" id="dt-91-r1">Default</th>
-      <td headers="dt-91-group dt-91-primary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-group dt-91-secondary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-before dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-after dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-35-type dt-35-r1" id="dt-35-r1">Default</th>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-91-group dt-91-primary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-group dt-91-secondary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-before dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-after dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-id">OL-53-GHSLE</td>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-91-group dt-91-primary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-group dt-91-secondary dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-before dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-details dt-91-after dt-91-r1">Lorem Ipsum</td>
-      <td headers="dt-91-id">OL-53-GHSLE</td>
+      <td headers="dt-35-group dt-35-primary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-group dt-35-secondary dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-before dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-details dt-35-after dt-35-r1">Lorem Ipsum</td>
+      <td headers="dt-35-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-92">
+<table class="data-table data-table--no-border" id="dt-36">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-92-type" rowspan="2">Type</th>
-      <th id="dt-92-group" colspan="2">Group</th>
-      <th id="dt-92-details" colspan="2">Details</th>
-      <th id="dt-92-id" rowspan="2">Id</th>
+      <th id="dt-36-type" rowspan="2">Type</th>
+      <th id="dt-36-group" colspan="2">Group</th>
+      <th id="dt-36-details" colspan="2">Details</th>
+      <th id="dt-36-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-92-group" id="dt-92-primary">Primary</th>
-      <th headers="dt-92-group" id="dt-92-secondary">Secondary</th>
-      <th headers="dt-92-details" id="dt-92-before">Before Task</th>
-      <th headers="dt-92-details" id="dt-92-after">After Task</th>
+      <th headers="dt-36-group" id="dt-36-primary">Primary</th>
+      <th headers="dt-36-group" id="dt-36-secondary">Secondary</th>
+      <th headers="dt-36-details" id="dt-36-before">Before Task</th>
+      <th headers="dt-36-details" id="dt-36-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-92-type dt-92-r1" id="dt-92-r1">Default</th>
-      <td headers="dt-92-group dt-92-primary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-group dt-92-secondary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-before dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-after dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-36-type dt-36-r1" id="dt-36-r1">Default</th>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-92-group dt-92-primary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-group dt-92-secondary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-before dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-after dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-id">OL-53-GHSLE</td>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-92-group dt-92-primary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-group dt-92-secondary dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-before dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-details dt-92-after dt-92-r1">Lorem Ipsum</td>
-      <td headers="dt-92-id">OL-53-GHSLE</td>
+      <td headers="dt-36-group dt-36-primary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-group dt-36-secondary dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-before dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-details dt-36-after dt-36-r1">Lorem Ipsum</td>
+      <td headers="dt-36-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5541,7 +5541,7 @@
   <hr class="rule rule--light rule--margin-large">
 
     <h2 class="h2">Default Rail (Items aligned start, vertically centered)</h2>
-<div class="rail">
+<div class="rail rail--rule">
   <div class="rail__item">
     <h3 class="h3 no-margin">
       <span class="color-accent fas fa-book" aria-hidden="true"></span>
@@ -5549,15 +5549,14 @@
     </h3>
   </div>
   <div class="rail__item rail__item--pull">
-    <button class="button button--transparent button--icon" aria-label="Open Menu">
+    <button class="button button--transparent button--icon no-margin" aria-label="Open Menu">
       <span class="button__icon fas fa-ellipsis" aria-hidden="true"></span>
     </button>
   </div>
 </div>
-<div class="rule no-margin-top"></div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
 <h2 class="h2">Another Example</h2>
-<div class="rail rail--justified">
+<div class="rail rail--justified rail--rule">
   <div class="rail__item form-theme">
     <label for="test-input" class="type-bold">Label</label>
     <input type="text" id="test-input">
@@ -5586,7 +5585,6 @@
     </div> -->
   </div>
 </div>
-<div class="rule"></div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
 <h2 class="h2">Test No Gap</h2>
 <div class="rail">

package/docs-dev/sass/components/card/index.html

@@ -5593,7 +5593,7 @@
   <span class="pjs-token pjs-string">"clickable-card-enabled"</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-string">"clickable-card-selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"[data-ulu-proxy-click-init]"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"clickable-card-interact-selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"&amp;:hover, &amp;:focus-within"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"footer-padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 0.25rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"footer-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 2.5rem<span class="pjs-token pjs-punctuation">,</span>

package/docs-dev/sass/components/rail/index.html

@@ -5583,13 +5583,16 @@ Item spacing is controlled via margins, allowing for individual item gap adjustm
 <p>Module Settings</p>
 <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
   <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 1.5em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"separator"</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-string">"gap-modifiers"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
     <span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
     <span class="pjs-token pjs-string">"none"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
     <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> 2em
   <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5598,7 +5601,7 @@ Item spacing is controlled via margins, allowing for individual item gap adjustm
 <li><strong>Group:</strong> rail</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 28-33</li>
-<li><strong>Lines (code):</strong> 35-44</li>
+<li><strong>Lines (code):</strong> 35-47</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5652,8 +5655,8 @@ Item spacing is controlled via margins, allowing for individual item gap adjustm
 <li><strong>File:</strong> _rail.scss</li>
 <li><strong>Group:</strong> rail</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 46-49</li>
-<li><strong>Lines (code):</strong> 51-53</li>
+<li><strong>Lines (comments):</strong> 49-52</li>
+<li><strong>Lines (code):</strong> 54-56</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5692,8 +5695,8 @@ Item spacing is controlled via margins, allowing for individual item gap adjustm
 <li><strong>File:</strong> _rail.scss</li>
 <li><strong>Group:</strong> rail</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 65-67</li>
-<li><strong>Lines (code):</strong> 69-120</li>
+<li><strong>Lines (comments):</strong> 68-70</li>
+<li><strong>Lines (code):</strong> 72-127</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5716,8 +5719,8 @@ Item spacing is controlled via margins, allowing for individual item gap adjustm
 <li><strong>File:</strong> _rail.scss</li>
 <li><strong>Group:</strong> rail</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 55-58</li>
-<li><strong>Lines (code):</strong> 60-63</li>
+<li><strong>Lines (comments):</strong> 58-61</li>
+<li><strong>Lines (code):</strong> 63-66</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -5625,7 +5625,7 @@
   <span class="pjs-token pjs-string">"white"</span>                   <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"type"</span>                    <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"type-secondary"</span>          <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>82<span class="pjs-token pjs-punctuation">,</span> 82<span class="pjs-token pjs-punctuation">,</span> 82<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"type-tertiary"</span>           <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>157<span class="pjs-token pjs-punctuation">,</span> 157<span class="pjs-token pjs-punctuation">,</span> 157<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"type-tertiary"</span>           <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>125<span class="pjs-token pjs-punctuation">,</span> 125<span class="pjs-token pjs-punctuation">,</span> 125<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"headline"</span>                <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background"</span>              <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-gray"</span>         <span class="pjs-token pjs-punctuation">:</span> #fafafa<span class="pjs-token pjs-punctuation">,</span>

package/package.json

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

@@ -20,7 +20,7 @@ $palette: (
   "white"                   : white,
   "type"                    : black,
   "type-secondary"          : rgb(82, 82, 82),
-  "type-tertiary"           : rgb(157, 157, 157),
+  "type-tertiary"           : rgb(125, 125, 125),
   "headline"                : inherit,
   "background"              : white,
   "background-gray"         : #fafafa,

package/scss/components/_card.scss

@@ -83,7 +83,7 @@ $config: (
   "clickable-card-enabled" : true,
   "clickable-card-selector" : "[data-ulu-proxy-click-init]",
   "clickable-card-interact-selector" : "&:hover, &:focus-within",
-  "color" : null,
+  "color" : "type",
   "color-hover" : null,
   "footer-padding-y" : 0.25rem,
   "footer-min-height" : 2.5rem,

package/scss/components/_rail.scss

@@ -34,13 +34,16 @@ $-fallbacks: (
 
 $config: (
   "gap" : 1em,
-  "margin-bottom" : 1em,
+  "margin-bottom" : 1.5em,
   "separator" : true,
   "gap-modifiers": (
     "small" : 0.5em,
     "none" : 0,
     "large" : 2em
   ),
+  "rule-size" : 1px,
+  "rule-color" : "rule",
+  "rule-margin" : 1em
 ) !default;
 
 /// Change modules $config
@@ -78,6 +81,10 @@ $config: (
     margin-bottom: get("margin-bottom");
     max-width: 100%;
   }
+  #{ $prefix }--rule {
+    border-bottom: get("rule-size") solid color.get(get("rule-color"));
+    padding-bottom: get("rule-margin");
+  }
 
   // Modifiers
   // - Note: Originally had mods for each type of flexbox layout