@ulu/frontend 0.1.0-beta.75 → 0.1.0-beta.76

package/docs-dev/changelog/index.html

@@ -5196,6 +5196,9 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.76">0.1.0-beta.76</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.75">0.1.0-beta.75</a>
             		</li>
 
@@ -5469,6 +5472,25 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.76" tabindex="-1">0.1.0-beta.76</h2>
+<ul>
+<li><strong>scss/components/modal.scss</strong>
+<ul>
+<li>Add <code>.modal__footer</code> element and configuration for styling it</li>
+<li>Fix modal animations temporarily setting display block instead of flex</li>
+</ul>
+</li>
+<li><strong>js/ui/modal-builder.js</strong>
+<ul>
+<li>Add options for <code>footerElement</code> which will select the element and move it into the modal on creation (when working in DOM with data-attributes)
+<ul>
+<li>Add option for <code>footerHtml</code> which will insert the markup provided into the footer</li>
+</ul>
+</li>
+<li>Output footer element if either setting is set</li>
+</ul>
+</li>
+</ul>
 <h2 id="0.1.0-beta.75" tabindex="-1">0.1.0-beta.75</h2>
 <ul>
 <li><strong>scss/components/modal.scss</strong> | Remove unused selector <code>.modal__content</code></li>

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

@@ -5196,13 +5196,19 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#sizes">Sizes</a>
+            		</li>
+
                     <li><a href="#active-state">Active State</a>
             		</li>
 
-                    <li><a href="#transparent-button">Transparent Button</a>
+                    <li><a href="#with-icon">With Icon</a>
+            		</li>
+
+                    <li><a href="#icon-only">Icon Only</a>
             		</li>
 
-                    <li><a href="#outline-button">Outline Button</a>
+                    <li><a href="#other-preset-styles">Other Preset Styles</a>
             		</li>
                 </ol>
             </div>
@@ -5220,13 +5226,38 @@
   <hr class="rule rule--light rule--margin-large">
 
     <div class="wysiwyg">
-      <h2 id="active-state" tabindex="-1">Active State</h2>
+      <h2 id="sizes" tabindex="-1">Sizes</h2>
+<p>Sizes can be configured this just shows the default sizes</p>
+<p><a href="#" class="button button--small">Small Button</a>
+<a href="#" class="button">Default Button</a>
+<a href="#" class="button button--large">Large Button</a></p>
+<h2 id="active-state" tabindex="-1">Active State</h2>
+<p>Adding the <code>is-active</code> class to enable active state.</p>
 <p><a href="#" class="button">Default Button</a>
 <a href="#" class="button is-active">Active Button</a></p>
-<h2 id="transparent-button" tabindex="-1">Transparent Button</h2>
-<p><a href="#" class="button button--transparent">Transparent Button</a></p>
-<h2 id="outline-button" tabindex="-1">Outline Button</h2>
-<p><a href="#" class="button button--outline">Outline Button</a></p>
+<h2 id="with-icon" tabindex="-1">With Icon</h2>
+<a href="#" class="button">
+  <span class="button__icon fas fa-gear" aria-hidden="true"></span>
+  <span>Icon Before</span>
+</a>
+<a href="#" class="button">
+  <span>Icon After</span>
+  <span class="button__icon fas fa-gear" aria-hidden="true"></span>
+</a>
+<h2 id="icon-only" tabindex="-1">Icon Only</h2>
+<a href="#" class="button button--icon button--small">
+  <span class="fas fa-gear" aria-hidden="true"></span>
+</a>
+<a href="#" class="button button--icon">
+  <span class="fas fa-gear" aria-hidden="true"></span>
+</a>
+<a href="#" class="button button--icon button--large">
+  <span class="fas fa-gear" aria-hidden="true"></span>
+</a>
+<h2 id="other-preset-styles" tabindex="-1">Other Preset Styles</h2>
+<p>These can be configured, so these are just the defaults</p>
+<p><a href="#" class="button button--transparent">Transparent Button</a>
+<a href="#" class="button button--outline">Outline Button</a></p>
 
     </div>
   </div>

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

@@ -5214,60 +5214,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-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-26" name="body" checked="">
-<label for="live-demo-id-26">
+  <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-27" name="content" checked="">
-<label for="live-demo-id-27">
+  <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-28" name="aside" checked="">
-<label for="live-demo-id-28">
+  <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-29" name="footer" checked="">
-<label for="live-demo-id-29">
+  <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-30">
+<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-30" 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-31">
+<label for="live-demo-id-15">
   Media
 </label>  
-  <select id="live-demo-id-31" 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-32">
+<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-32" 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

@@ -5252,178 +5252,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-5">
   <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-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-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-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-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-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-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-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-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-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-14">
+<table class="data-table data-table--large-first" id="dt-6">
   <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-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-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-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-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-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-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-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-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-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-15">
+<table class="data-table data-table--large-header" id="dt-7">
   <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-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-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-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-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-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-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-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-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-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-16">
+<table class="data-table data-table--no-border" id="dt-8">
   <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-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-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-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-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-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-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-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-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-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/modals/index.html

@@ -5228,6 +5228,31 @@
   }' hidden="">
   This is the modal body <button data-ulu-dialog-close="">Close</button>
 </div>
+<h3 class="h3">With Footer Element</h3>
+<p>Footer can be added with &quot;footerElement&quot; option which can be selector or an element. It will be moved into the dialog on creation. This is for dom data-attribute API usage. For inserting text or html see 'footerHtml' example below.</p>
+<p><button class="button" data-ulu-dialog-trigger="modal-id-footer">With Footer Element</button></p>
+<div id="modal-id-footer" class="wysiwyg" data-ulu-modal-builder='{ 
+    "title" : "Test Title",
+    "print" : true,
+    "documentEnd" : true,
+    "footerElement" : "#modal-id-footer-content"
+  }' hidden="">
+  This is the modal body <button data-ulu-dialog-close="">Close</button>
+</div>
+<div id="modal-id-footer-content">
+  <button class="button button--outline" data-ulu-dialog-close="">Cancel</button>
+  <button class="button" data-ulu-dialog-close="">Submit</button>
+</div>
+<h3 class="h3">With Footer HTML</h3>
+<p>Footer can be added with &quot;footerHTML&quot; option which will populate the innerHTML of the footer element on creation.</p>
+<p><button class="button" data-ulu-dialog-trigger="modal-id-footer-html">With Footer HTML</button></p>
+<div id="modal-id-footer-html" class="wysiwyg" data-ulu-modal-builder='{ 
+    "title" : "Test Title",
+    "documentEnd" : true,
+    "footerHtml" : "This works!"
+  }' hidden="">
+  This is the modal body <button data-ulu-dialog-close="">Close</button>
+</div>
 <h3 class="h3">Fullscreen Size</h3>
 <p>The modal will fill the window</p>
 <p><button class="button" data-ulu-dialog-trigger="modal-id-fullscreen">Open Modal</button></p>

package/docs-dev/javascript/ui-modal-builder/index.html

@@ -5448,6 +5448,16 @@ in twig for example)</li>
 <td>The class name for the resizer icon. Uses the wrapped setting string.</td>
 </tr>
 <tr>
+<td>footerElement</td>
+<td><code>string</code> | <code>Node</code></td>
+<td>Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)</td>
+</tr>
+<tr>
+<td>footerHtml</td>
+<td><code>string</code> | <code>Node</code></td>
+<td>Markup to use in the footer</td>
+</tr>
+<tr>
 <td>debug</td>
 <td><code>boolean</code></td>
 <td>Enables debug logging. Defaults to <code>false</code>.</td>