@ulu/frontend 0.1.0-beta.54 → 0.1.0-beta.56

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.54">Version 0.1.0-beta.54</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.53">Version 0.1.0-beta.53</a>
             		</li>
 
@@ -5382,6 +5385,15 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.54" tabindex="-1">Version 0.1.0-beta.54</h2>
+<ul>
+<li><strong>js/ui/modal-builder</strong>
+<ul>
+<li>Add option for titleClass</li>
+<li>Fill in jsdoc documentation for defaults</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.53" tabindex="-1">Version 0.1.0-beta.53</h2>
 <ul>
 <li><strong>scss/components/slider</strong>

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

@@ -5184,60 +5184,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-25" name="title" checked="">
-<label for="live-demo-id-25">
+  <input type="checkbox" id="live-demo-id-33" name="title" checked="">
+<label for="live-demo-id-33">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-26" name="body" checked="">
-<label for="live-demo-id-26">
+  <input type="checkbox" id="live-demo-id-34" name="body" checked="">
+<label for="live-demo-id-34">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-27" name="content" checked="">
-<label for="live-demo-id-27">
+  <input type="checkbox" id="live-demo-id-35" name="content" checked="">
+<label for="live-demo-id-35">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-28" name="aside" checked="">
-<label for="live-demo-id-28">
+  <input type="checkbox" id="live-demo-id-36" name="aside" checked="">
+<label for="live-demo-id-36">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-29" name="footer" checked="">
-<label for="live-demo-id-29">
+  <input type="checkbox" id="live-demo-id-37" name="footer" checked="">
+<label for="live-demo-id-37">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-30">
+<label for="live-demo-id-38">
   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-30" name="action">
+  <select id="live-demo-id-38" 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-31">
+<label for="live-demo-id-39">
   Media
 </label>  
-  <select id="live-demo-id-31" name="media">
+  <select id="live-demo-id-39" 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-32">
+<label for="live-demo-id-40">
   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-32" name="layout">
+  <select id="live-demo-id-40" 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

@@ -5222,178 +5222,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-13">
+<table class="data-table data-table--striped" id="dt-17">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-13-type" rowspan="2">Type</th>
-      <th id="dt-13-group" colspan="2">Group</th>
-      <th id="dt-13-details" colspan="2">Details</th>
-      <th id="dt-13-id" rowspan="2">Id</th>
+      <th id="dt-17-type" rowspan="2">Type</th>
+      <th id="dt-17-group" colspan="2">Group</th>
+      <th id="dt-17-details" colspan="2">Details</th>
+      <th id="dt-17-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-13-group" id="dt-13-primary">Primary</th>
-      <th headers="dt-13-group" id="dt-13-secondary">Secondary</th>
-      <th headers="dt-13-details" id="dt-13-before">Before Task</th>
-      <th headers="dt-13-details" id="dt-13-after">After Task</th>
+      <th headers="dt-17-group" id="dt-17-primary">Primary</th>
+      <th headers="dt-17-group" id="dt-17-secondary">Secondary</th>
+      <th headers="dt-17-details" id="dt-17-before">Before Task</th>
+      <th headers="dt-17-details" id="dt-17-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-13-type dt-13-r1" id="dt-13-r1">Default</th>
-      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-17-type dt-17-r1" id="dt-17-r1">Default</th>
+      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-id">OL-53-GHSLE</td>
+      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-13-group dt-13-primary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-group dt-13-secondary dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-before dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-details dt-13-after dt-13-r1">Lorem Ipsum</td>
-      <td headers="dt-13-id">OL-53-GHSLE</td>
+      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
+      <td headers="dt-17-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-14">
+<table class="data-table data-table--large-first" id="dt-18">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-14-type" rowspan="2">Type</th>
-      <th id="dt-14-group" colspan="2">Group</th>
-      <th id="dt-14-details" colspan="2">Details</th>
-      <th id="dt-14-id" rowspan="2">Id</th>
+      <th id="dt-18-type" rowspan="2">Type</th>
+      <th id="dt-18-group" colspan="2">Group</th>
+      <th id="dt-18-details" colspan="2">Details</th>
+      <th id="dt-18-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-14-group" id="dt-14-primary">Primary</th>
-      <th headers="dt-14-group" id="dt-14-secondary">Secondary</th>
-      <th headers="dt-14-details" id="dt-14-before">Before Task</th>
-      <th headers="dt-14-details" id="dt-14-after">After Task</th>
+      <th headers="dt-18-group" id="dt-18-primary">Primary</th>
+      <th headers="dt-18-group" id="dt-18-secondary">Secondary</th>
+      <th headers="dt-18-details" id="dt-18-before">Before Task</th>
+      <th headers="dt-18-details" id="dt-18-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-14-type dt-14-r1" id="dt-14-r1">Default</th>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-18-type dt-18-r1" id="dt-18-r1">Default</th>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-14-group dt-14-primary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-group dt-14-secondary dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-before dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-details dt-14-after dt-14-r1">Lorem Ipsum</td>
-      <td headers="dt-14-id">OL-53-GHSLE</td>
+      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
+      <td headers="dt-18-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-15">
+<table class="data-table data-table--large-header" id="dt-19">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-15-type" rowspan="2">Type</th>
-      <th id="dt-15-group" colspan="2">Group</th>
-      <th id="dt-15-details" colspan="2">Details</th>
-      <th id="dt-15-id" rowspan="2">Id</th>
+      <th id="dt-19-type" rowspan="2">Type</th>
+      <th id="dt-19-group" colspan="2">Group</th>
+      <th id="dt-19-details" colspan="2">Details</th>
+      <th id="dt-19-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-15-group" id="dt-15-primary">Primary</th>
-      <th headers="dt-15-group" id="dt-15-secondary">Secondary</th>
-      <th headers="dt-15-details" id="dt-15-before">Before Task</th>
-      <th headers="dt-15-details" id="dt-15-after">After Task</th>
+      <th headers="dt-19-group" id="dt-19-primary">Primary</th>
+      <th headers="dt-19-group" id="dt-19-secondary">Secondary</th>
+      <th headers="dt-19-details" id="dt-19-before">Before Task</th>
+      <th headers="dt-19-details" id="dt-19-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-15-type dt-15-r1" id="dt-15-r1">Default</th>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-19-type dt-19-r1" id="dt-19-r1">Default</th>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-15-group dt-15-primary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-group dt-15-secondary dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-before dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-details dt-15-after dt-15-r1">Lorem Ipsum</td>
-      <td headers="dt-15-id">OL-53-GHSLE</td>
+      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
+      <td headers="dt-19-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-16">
+<table class="data-table data-table--no-border" id="dt-20">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-16-type" rowspan="2">Type</th>
-      <th id="dt-16-group" colspan="2">Group</th>
-      <th id="dt-16-details" colspan="2">Details</th>
-      <th id="dt-16-id" rowspan="2">Id</th>
+      <th id="dt-20-type" rowspan="2">Type</th>
+      <th id="dt-20-group" colspan="2">Group</th>
+      <th id="dt-20-details" colspan="2">Details</th>
+      <th id="dt-20-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-16-group" id="dt-16-primary">Primary</th>
-      <th headers="dt-16-group" id="dt-16-secondary">Secondary</th>
-      <th headers="dt-16-details" id="dt-16-before">Before Task</th>
-      <th headers="dt-16-details" id="dt-16-after">After Task</th>
+      <th headers="dt-20-group" id="dt-20-primary">Primary</th>
+      <th headers="dt-20-group" id="dt-20-secondary">Secondary</th>
+      <th headers="dt-20-details" id="dt-20-before">Before Task</th>
+      <th headers="dt-20-details" id="dt-20-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-16-type dt-16-r1" id="dt-16-r1">Default</th>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-20-type dt-20-r1" id="dt-20-r1">Default</th>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-16-group dt-16-primary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-group dt-16-secondary dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-before dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-details dt-16-after dt-16-r1">Lorem Ipsum</td>
-      <td headers="dt-16-id">OL-53-GHSLE</td>
+      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
+      <td headers="dt-20-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/sass/components/counter-list/index.html

@@ -5255,14 +5255,14 @@
 <tr>
 <td style="text-align:left">margin</td>
 <td style="text-align:left">List</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">(2rem 0)</td>
-<td style="text-align:left">The top and bottom margin of the list.</td>
 </tr>
 <tr>
 <td style="text-align:left">item-margin</td>
 <td style="text-align:left">List</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">(0, 0, 1rem, 0)</td>
-<td style="text-align:left">The margin applied to each list item.</td>
 </tr>
 <tr>
 <td style="text-align:left">align-items</td>
@@ -5272,19 +5272,19 @@
 </tr>
 <tr>
 <td style="text-align:left">counter-width</td>
-<td style="text-align:left">Length</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">2.4em</td>
 <td style="text-align:left">The width and height (if height is falsy)</td>
 </tr>
 <tr>
 <td style="text-align:left">counter-height</td>
-<td style="text-align:left">Length</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">null</td>
 <td style="text-align:left">The height (optional)</td>
 </tr>
 <tr>
 <td style="text-align:left">counter-gap</td>
-<td style="text-align:left">Length</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">1em</td>
 <td style="text-align:left">The gap between the counter and the list item content.</td>
 </tr>
@@ -5302,21 +5302,21 @@
 </tr>
 <tr>
 <td style="text-align:left">counter-font-size</td>
-<td style="text-align:left">Length</td>
+<td style="text-align:left">CssUnit</td>
 <td style="text-align:left">1.2em</td>
 <td style="text-align:left">The font-size of the counter text.</td>
 </tr>
 <tr>
 <td style="text-align:left">counter-color</td>
+<td style="text-align:left">Color</td>
 <td style="text-align:left">String</td>
 <td style="text-align:left">white</td>
-<td style="text-align:left">The text color of the counter. Accepts color names or hex codes.</td>
 </tr>
 <tr>
 <td style="text-align:left">counter-background-color</td>
+<td style="text-align:left">Color</td>
 <td style="text-align:left">String</td>
 <td style="text-align:left">&quot;accent&quot;</td>
-<td style="text-align:left">The background color of the counter. Refers to a color in the color module.</td>
 </tr>
 </tbody>
 </table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.54",
+  "version": "0.1.0-beta.56",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_counter-list.scss

@@ -10,17 +10,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} margin [(2rem 0)] The top and bottom margin of the list.
-/// @prop {List} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
+/// @prop {List|CssUnit} margin [(2rem 0)] The top and bottom margin of the list.
+/// @prop {List|CssUnit} item-margin [(0, 0, 1rem, 0)] The margin applied to each list item.
 /// @prop {Keyword} align-items [baseline] How to align the counter (flexbox align-items values)
-/// @prop {Length} counter-width [2.4em] The width and height (if height is falsy)
-/// @prop {Length} counter-height [null] The height (optional)
-/// @prop {Length} counter-gap [1em] The gap between the counter and the list item content.
+/// @prop {CssUnit} counter-width [2.4em] The width and height (if height is falsy)
+/// @prop {CssUnit} counter-height [null] The height (optional)
+/// @prop {CssUnit} counter-gap [1em] The gap between the counter and the list item content.
 /// @prop {String} counter-style [numeric] The list-style-type used for the counter.
 /// @prop {Keyword|Percentage} counter-border-radius [50%] The border-radius of the counter element.
-/// @prop {Length} counter-font-size [1.2em] The font-size of the counter text.
-/// @prop {String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
-/// @prop {String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
+/// @prop {CssUnit} counter-font-size [1.2em] The font-size of the counter text.
+/// @prop {Color|String} counter-color [white] The text color of the counter. Accepts color names or hex codes.
+/// @prop {Color|String} counter-background-color ["accent"] The background color of the counter. Refers to a color in the color module.
 
 $config: (
   "margin" : (2rem 0),
@@ -32,6 +32,8 @@ $config: (
   "counter-style" : numeric,
   "counter-border-radius" : 50%,
   "counter-font-size" : 1.2em,
+  "counter-font-weight" : null,
+  "counter-font-family" : null,
   "counter-color" : white,
   "counter-background-color" : "accent",
 ) !default;
@@ -71,47 +73,49 @@ $config: (
   #{ $prefix } {
     margin: get("margin");
     counter-reset: ulu-counter-list;
+  }
 
-    & > li,
-    & > #{ $prefix }__item {
+  #{ $prefix } > li,
+  #{ $prefix }__item {
+    display: flex;
+    gap: get("counter-gap");
+    align-items: get("align-items");
+    margin: get("item-margin");
+    min-height: $height;
+    &::before {
       display: flex;
-      gap: get("counter-gap");
-      align-items: get("align-items");
-      margin: get("item-margin");
-      min-height: $height;
-      &::before {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $width;
-        height: $height;
-        flex: 0 0 $width;
-        counter-increment: ulu-counter-list;
-        content: counter(ulu-counter-list, get("counter-style"));
-        font-size: get("counter-font-size");
-        color: color.get(get("counter-color"));
-        background-color: color.get(get("counter-background-color"));
-        border-radius: get("counter-border-radius");
-      }
-
-      // Keeping this could be useful
-      // but we need to think about how its setup
-      // - Probably should be a modifier (choice)
-      // - May need either option for how align-items is set (flex-start vs center)
-      // - This could be useful when used in grid
-      // - May need to be pervasive and not linked to a breakpoint (alternate style)
-      // - It's also just useful to know you could override the layout like this 
-      //   to get useful variations (maybe we don't need to include it but users 
-      //   can do specific)
-      // @if ( get("counter-mobile-toggle") ) {
-      //   @include breakpoint.max("small") {
-      //     padding-left: 0;
-      //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
-      //     flex-direction: column;
-      //     align-items: center;
-      //   }
-      // }
+      align-items: center;
+      justify-content: center;
+      width: $width;
+      height: $height;
+      flex: 0 0 $width;
+      counter-increment: ulu-counter-list;
+      content: counter(ulu-counter-list, get("counter-style"));
+      font-size: get("counter-font-size");
+      font-family: get("counter-font-family");
+      font-weight: get("counter-font-weight");
+      color: color.get(get("counter-color"));
+      background-color: color.get(get("counter-background-color"));
+      border-radius: get("counter-border-radius");
     }
+
+    // Keeping this could be useful
+    // but we need to think about how its setup
+    // - Probably should be a modifier (choice)
+    // - May need either option for how align-items is set (flex-start vs center)
+    // - This could be useful when used in grid
+    // - May need to be pervasive and not linked to a breakpoint (alternate style)
+    // - It's also just useful to know you could override the layout like this 
+    //   to get useful variations (maybe we don't need to include it but users 
+    //   can do specific)
+    // @if ( get("counter-mobile-toggle") ) {
+    //   @include breakpoint.max("small") {
+    //     padding-left: 0;
+    //     padding-top: calc(get("counter-width") + get("counter-gap-mobile"));
+    //     flex-direction: column;
+    //     align-items: center;
+    //   }
+    // }
   }
 
   // Modifiers

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_joescherben_Personal_Projects_ULU_frontend_js_ui_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_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_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
+declare namespace ___Users_joe_Projects_Personal_Github_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map