@ulu/frontend 0.1.0-beta.43 → 0.1.0-beta.45

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.43">Version 0.1.0-beta.43</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.42">Version 0.1.0-beta.42</a>
             		</li>
 
@@ -5349,6 +5352,14 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.43" tabindex="-1">Version 0.1.0-beta.43</h2>
+<ul>
+<li><strong>scss/components/card</strong>
+<ul>
+<li>Document all new aside configuration properties change toggle-aside-rule to aside-rule</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.42" tabindex="-1">Version 0.1.0-beta.42</h2>
 <ul>
 <li><strong>scss/components/card</strong>

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

@@ -5184,66 +5184,66 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-1" name="title" checked="">
-<label for="live-demo-id-1">
+  <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-2" name="body" checked="">
-<label for="live-demo-id-2">
+  <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-3" name="content" checked="">
-<label for="live-demo-id-3">
+  <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-4" name="aside" checked="">
-<label for="live-demo-id-4">
+  <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-5" name="footer" checked="">
-<label for="live-demo-id-5">
+  <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-6">
+<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-6" 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-7">
+<label for="live-demo-id-15">
   Media
 </label>  
-  <select id="live-demo-id-7" 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-8">
+<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-8" name="layout">
-    <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
+  <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>
   </form>
   <script type="application/json" data-live-demo-options="">
-    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n{% set classes = [\n  \"card\",\n  layout ? \"card--\" ~ layout : \"\",\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      <div class=\"card__main\">\n        {% if title %}\n          <h5 class=\"card__title\">\n            {# If link don't nest link (no link title) #}\n            {% if isLink %}\n              Card Title\n            {% else %}\n              <a \n                class=\"card__title-link\" \n                href=\"https://www.google.com\" \n                {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n              >\n                Card Title\n              </a>\n            {% endif %}\n          </h5>\n        {% endif %}\n        {% if content %}\n          <div>\n            This is the card content. It can contain around 2-3 sentences.\n          </div>\n        {% endif %}\n      </div>\n      {% if aside %}\n        <div class=\"card__aside\">\n          This is the aside. attach the rule to this element.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>\n\n"}
+    {"debug":false,"template":"{% set hasProxy = action == \"proxy\" %}\n{% set isLink = action == \"link\" %}\n{% set hasImage = media == \"image\" or media == \"imageFit\" %}\n{% set element = isLink ? \"a\" : \"article\" %}\n\n{% set layoutClass = \"\" %}\n{% if layout == \"horizontalCenter\" %}\n  {% set layoutClass = \"card--horizontal card--horizontal-center\" %}\n{% elseif layout %}\n  {% set layoutClass = \"card--\" ~ layout %}\n{% endif %}\n\n{% set classes = [\n  \"card\",\n  layoutClass,\n  media == \"imageFit\" ? \"card--image-fit\" : \"\"\n] %}\n\n<{{ element }} \n  class=\"{{ classes|join(' ') }}\"\n  {{ hasProxy ? \"data-ulu-proxy-click\" }}\n  {{ isLink ? \"href='https://www.google.com'\" }}\n>\n  {% if body %}\n    <div class=\"card__body\">\n      <div class=\"card__main\">\n        {% if title %}\n          <h5 class=\"card__title\">\n            {# If link don't nest link (no link title) #}\n            {% if isLink %}\n              Card Title\n            {% else %}\n              <a \n                class=\"card__title-link\" \n                href=\"https://www.google.com\" \n                {{ hasProxy ? \"data-ulu-proxy-click-source\" }}\n              >\n                Card Title\n              </a>\n            {% endif %}\n          </h5>\n        {% endif %}\n        {% if content %}\n          <div>\n            This is the card content. It can contain around 2-3 sentences.\n          </div>\n        {% endif %}\n      </div>\n      {% if aside %}\n        <div class=\"card__aside\">\n          This is the aside. attach the rule to this element.\n        </div>\n      {% endif %}\n    </div>\n  {% endif %}\n\n  {% if hasImage %}\n    <div class=\"card__image\">\n      <img src=\"/frontend/assets/placeholder/image-1.jpg\">\n    </div>\n  {% endif %}\n\n  {% if media == \"icon\" %}\n    <div class=\"card__image card__image--icon\">\n      <img src=\"/frontend/assets/placeholder/icon-calendar.svg\" width=\"150\" height=\"150\">\n    </div>\n  {% endif %}\n\n  {% if footer %}\n    <div class=\"card__footer\">\n      {# If link don't nest link (no link title) #}\n      {% if isLink %}\n        Card Footer Text\n      {% else %}\n        <a class=\"button button--small\" href=\"https://www.yahoo.com/\">Footer</a>\n      {% endif %}\n    </div>\n  {% endif %}\n</{{ element }}>\n\n"}
   </script>
 </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-1">
+<table class="data-table data-table--striped" id="dt-5">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-1-type" rowspan="2">Type</th>
-      <th id="dt-1-group" colspan="2">Group</th>
-      <th id="dt-1-details" colspan="2">Details</th>
-      <th id="dt-1-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-1-group" id="dt-1-primary">Primary</th>
-      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
-      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
-      <th headers="dt-1-details" id="dt-1-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-1-type dt-1-r1" id="dt-1-r1">Default</th>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-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-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-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-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-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-2">
+<table class="data-table data-table--large-first" id="dt-6">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-2-type" rowspan="2">Type</th>
-      <th id="dt-2-group" colspan="2">Group</th>
-      <th id="dt-2-details" colspan="2">Details</th>
-      <th id="dt-2-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-2-group" id="dt-2-primary">Primary</th>
-      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
-      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
-      <th headers="dt-2-details" id="dt-2-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-2-type dt-2-r1" id="dt-2-r1">Default</th>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-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-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-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-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-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-3">
+<table class="data-table data-table--large-header" id="dt-7">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-3-type" rowspan="2">Type</th>
-      <th id="dt-3-group" colspan="2">Group</th>
-      <th id="dt-3-details" colspan="2">Details</th>
-      <th id="dt-3-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-3-group" id="dt-3-primary">Primary</th>
-      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
-      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
-      <th headers="dt-3-details" id="dt-3-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-3-type dt-3-r1" id="dt-3-r1">Default</th>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-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-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-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-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-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-4">
+<table class="data-table data-table--no-border" id="dt-8">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-4-type" rowspan="2">Type</th>
-      <th id="dt-4-group" colspan="2">Group</th>
-      <th id="dt-4-details" colspan="2">Details</th>
-      <th id="dt-4-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-4-group" id="dt-4-primary">Primary</th>
-      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
-      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
-      <th headers="dt-4-details" id="dt-4-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-4-type dt-4-r1" id="dt-4-r1">Default</th>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-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-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-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-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-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/sass/components/card/index.html

@@ -5277,11 +5277,10 @@
   <span class="pjs-token pjs-string">"overlay-shading"</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">"overlay-body-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-comment">// new below</span>
-  <span class="pjs-token pjs-string">"toggle-aside-rule"</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">"aside-rule-width"</span> <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"aside-rule"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"aside-rule-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"aside-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"aside-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">"aside-rule-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">,</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5289,8 +5288,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 18-68</li>
-<li><strong>Lines (code):</strong> 70-131</li>
+<li><strong>Lines (comments):</strong> 18-72</li>
+<li><strong>Lines (code):</strong> 74-134</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5598,6 +5597,30 @@
 <td style="text-align:left">80rem</td>
 <td style="text-align:left">The max-width of body when horizontal</td>
 </tr>
+<tr>
+<td style="text-align:left">aside-rule</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">false</td>
+<td style="text-align:left">Whether or not to have a rule separating body and aside</td>
+</tr>
+<tr>
+<td style="text-align:left">aside-rule-width</td>
+<td style="text-align:left">CssUnit</td>
+<td style="text-align:left">1px</td>
+<td style="text-align:left">Size of rule</td>
+</tr>
+<tr>
+<td style="text-align:left">aside-rule-color</td>
+<td style="text-align:left">CssUnit</td>
+<td style="text-align:left">&quot;rule-light&quot;</td>
+<td style="text-align:left">Color of rule</td>
+</tr>
+<tr>
+<td style="text-align:left">aside-rule-background-color</td>
+<td style="text-align:left">CssUnit</td>
+<td style="text-align:left">transparent</td>
+<td style="text-align:left">Color of aside background color</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5614,8 +5637,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 133-136</li>
-<li><strong>Lines (code):</strong> 138-140</li>
+<li><strong>Lines (comments):</strong> 136-139</li>
+<li><strong>Lines (code):</strong> 141-143</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5654,8 +5677,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 151-155</li>
-<li><strong>Lines (code):</strong> 157-187</li>
+<li><strong>Lines (comments):</strong> 154-158</li>
+<li><strong>Lines (code):</strong> 160-190</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5702,8 +5725,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 194-198</li>
-<li><strong>Lines (code):</strong> 200-482</li>
+<li><strong>Lines (comments):</strong> 197-201</li>
+<li><strong>Lines (code):</strong> 203-485</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5732,8 +5755,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 142-145</li>
-<li><strong>Lines (code):</strong> 147-149</li>
+<li><strong>Lines (comments):</strong> 145-148</li>
+<li><strong>Lines (code):</strong> 150-152</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.43",
+  "version": "0.1.0-beta.45",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -46,7 +46,10 @@
     "modules",
     "javascript",
     "framework",
-    "mixin"
+    "mixin",
+    "components",
+    "HTML",
+    "frontend framework"
   ],
   "authors": {
     "name": "Joe Scherben, Informatics Studio",

package/scss/_element.scss

@@ -116,9 +116,10 @@ $rule-margins: (
 
 /// Sets rule margins
 /// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
-@mixin set-rule-margins($changes) {
-  $rule-margins: map.merge($rule-margins, $changes) !global;
+@mixin set-rule-margins($changes, $merge-mode: null) {
+  $rule-margins: utils.map-merge($rule-margins, $changes, $merge-mode) !global;
 }
 
 /// Get a rule style

package/scss/_units.scss

@@ -27,13 +27,14 @@ $config: (
 
 /// Update the units config
 /// @param {Map} $changes A map to merge into the color palette
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 /// @example scss Setting the error and type color
 ///   @include ulu.units-set((
 ///     "default" : 1.5em
 ///   ));
 
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
+@mixin set($changes, $merge-mode: null) {
+  $config: utils.map-merge($config, $changes, $merge-mode) !global;
 }
 
 /// Get a unit by name (preset) or number (multiplier of base)

package/scss/components/_card.scss

@@ -89,9 +89,9 @@ $config: (
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
   "horizontal-image-width" : min(33%, 20rem),
-  "horizontal-body-max-width" : 80rem,
-  "horizontal-min-height" : 10rem,
-  "horizontal-max-width" : 40rem,
+  "horizontal-body-max-width" : 40rem,
+  "horizontal-min-height" : 20rem,
+  "horizontal-max-width" : 80rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -398,10 +398,12 @@ $config: (
       min-height: 0;
       padding-top: get("overlay-body-padding-y");
       padding-bottom: get("overlay-body-padding-y");
+      
       &:not(:has(~ #{ $prefix }__footer)) {
         border-bottom-left-radius: get("border-radius");
         border-bottom-right-radius: get("border-radius");
       }
+
       @if (get("overlay-shading")) {
         margin-top: 4rem;
         &::before {
@@ -495,6 +497,11 @@ $config: (
     grid-template-rows: auto auto;
     min-height: get("horizontal-min-height");
     max-width: get("horizontal-max-width");
+
+    // When no footer remove extra row
+    &:not(:has(> #{ $prefix }__footer)) {
+      grid-template-rows: auto;
+    }
     #{ $prefix }__image {
       grid-column: 1 / 2;
       grid-row: 1 / -1;
@@ -507,11 +514,10 @@ $config: (
       grid-column: 2 / 3;
     }
     #{ $prefix }__body {
-      // display: flex;
       flex-direction: row;
-      justify-content: center;
       max-width: get("horizontal-body-max-width");
     }
+    
     @if(get("aside-rule")) {
       #{ $prefix }__main {
         flex: 1 1 60%;
@@ -542,6 +548,11 @@ $config: (
       @include -card-horizontal-no-image-styles();
     }
   }
+  #{ $prefix }--horizontal-center {
+    #{ $prefix }__body {
+      align-self: center;
+    }
+  }
 }
 
 @mixin -card-horizontal-no-image-styles() {