@ulu/frontend 0.1.0-beta.100 → 0.1.0-beta.102

package/docs-dev/changelog/index.html

@@ -5586,6 +5586,12 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#0.1.0-beta.101">0.1.0-beta.101</a>
+            		</li>
+
+                    <li><a href="#0.1.0-beta.100">0.1.0-beta.100</a>
+            		</li>
+
                     <li><a href="#0.1.0-beta.99">0.1.0-beta.99</a>
             		</li>
 
@@ -5931,6 +5937,19 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="0.1.0-beta.101" tabindex="-1">0.1.0-beta.101</h2>
+<ul>
+<li><strong>scss/components/tag (Minor Breaking Config Change)</strong>
+<ul>
+<li>$styles (set by set-styles() mixin) will now not include props (padding, type-size, line-height)</li>
+<li>New $sizes (set by set-sizes() mixin) can be used to setup different sizes of tags with props (padding, type-size, line-height)</li>
+</ul>
+</li>
+</ul>
+<h2 id="0.1.0-beta.100" tabindex="-1">0.1.0-beta.100</h2>
+<ul>
+<li><strong>scss/components/skeleton</strong> - Made selectors for skeleton all build off one base class &quot;skeleton&quot; so &quot;skeleton__text or skeleton-text&quot; went to &quot;skeleton--text&quot;</li>
+</ul>
 <h2 id="0.1.0-beta.99" tabindex="-1">0.1.0-beta.99</h2>
 <ul>
 <li><strong>scss/components/skeleton</strong> - Fix some selectors from last change (background)</li>

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

@@ -5604,60 +5604,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-41" name="title" checked="">
-<label for="live-demo-id-41">
+  <input type="checkbox" id="live-demo-id-329" name="title" checked="">
+<label for="live-demo-id-329">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-42" name="body" checked="">
-<label for="live-demo-id-42">
+  <input type="checkbox" id="live-demo-id-330" name="body" checked="">
+<label for="live-demo-id-330">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-43" name="content" checked="">
-<label for="live-demo-id-43">
+  <input type="checkbox" id="live-demo-id-331" name="content" checked="">
+<label for="live-demo-id-331">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-44" name="aside" checked="">
-<label for="live-demo-id-44">
+  <input type="checkbox" id="live-demo-id-332" name="aside" checked="">
+<label for="live-demo-id-332">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-45" name="footer" checked="">
-<label for="live-demo-id-45">
+  <input type="checkbox" id="live-demo-id-333" name="footer" checked="">
+<label for="live-demo-id-333">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-46">
+<label for="live-demo-id-334">
   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-46" name="action">
+  <select id="live-demo-id-334" 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-47">
+<label for="live-demo-id-335">
   Media
 </label>  
-  <select id="live-demo-id-47" name="media">
+  <select id="live-demo-id-335" 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-48">
+<label for="live-demo-id-336">
   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-48" name="layout">
+  <select id="live-demo-id-336" 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/card-grid/index.html

@@ -5603,25 +5603,25 @@
     <h2 class="h2">Card Grid Defaults</h2>
 <ul class="card-grid ">
       <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
@@ -5662,25 +5662,25 @@
 <h2 class="h2">Card Grid Compact</h2>
 <ul class="card-grid card-grid--compact">
       <li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card " data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
@@ -5690,25 +5690,25 @@
 <h2 class="h2">Horizontal Card Grid</h2>
 <ul class="card-grid ">
       <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
@@ -5735,25 +5735,25 @@
   </header>
   <ul class="card-grid list-grid__rows">
       <li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 1 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 2 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">
       <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
     </div></article></li><li class="card-grid__item"><article class="card card--w-image card--image-fit card--horizontal list-grid__card" data-ulu-proxy-click=""><div class="card__body"><div class="card__main"><h5 class="card__title">
-      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Card 3 Title</a>
+      <a class="card__title-link" href="https://www.google.com" data-ulu-proxy-click-source="">Lorem Ipsum</a>
     </h5><div>
-      This is the card content. It can contain around 2-3 sentences.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </div></div><div class="card__aside">This is the aside content</div></div><div class="card__image ">
       <img src="/frontend/assets/placeholder/image-1.jpg"> 
     </div><div class="card__footer">

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

@@ -5642,178 +5642,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-21">
+<table class="data-table data-table--striped" id="dt-165">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-21-type" rowspan="2">Type</th>
-      <th id="dt-21-group" colspan="2">Group</th>
-      <th id="dt-21-details" colspan="2">Details</th>
-      <th id="dt-21-id" rowspan="2">Id</th>
+      <th id="dt-165-type" rowspan="2">Type</th>
+      <th id="dt-165-group" colspan="2">Group</th>
+      <th id="dt-165-details" colspan="2">Details</th>
+      <th id="dt-165-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-21-group" id="dt-21-primary">Primary</th>
-      <th headers="dt-21-group" id="dt-21-secondary">Secondary</th>
-      <th headers="dt-21-details" id="dt-21-before">Before Task</th>
-      <th headers="dt-21-details" id="dt-21-after">After Task</th>
+      <th headers="dt-165-group" id="dt-165-primary">Primary</th>
+      <th headers="dt-165-group" id="dt-165-secondary">Secondary</th>
+      <th headers="dt-165-details" id="dt-165-before">Before Task</th>
+      <th headers="dt-165-details" id="dt-165-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-21-type dt-21-r1" id="dt-21-r1">Default</th>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-165-type dt-165-r1" id="dt-165-r1">Default</th>
+      <td headers="dt-165-group dt-165-primary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-group dt-165-secondary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-before dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-after dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <td headers="dt-165-group dt-165-primary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-group dt-165-secondary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-before dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-after dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <td headers="dt-165-group dt-165-primary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-group dt-165-secondary dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-before dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-details dt-165-after dt-165-r1">Lorem Ipsum</td>
+      <td headers="dt-165-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-22">
+<table class="data-table data-table--large-first" id="dt-166">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-22-type" rowspan="2">Type</th>
-      <th id="dt-22-group" colspan="2">Group</th>
-      <th id="dt-22-details" colspan="2">Details</th>
-      <th id="dt-22-id" rowspan="2">Id</th>
+      <th id="dt-166-type" rowspan="2">Type</th>
+      <th id="dt-166-group" colspan="2">Group</th>
+      <th id="dt-166-details" colspan="2">Details</th>
+      <th id="dt-166-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-22-group" id="dt-22-primary">Primary</th>
-      <th headers="dt-22-group" id="dt-22-secondary">Secondary</th>
-      <th headers="dt-22-details" id="dt-22-before">Before Task</th>
-      <th headers="dt-22-details" id="dt-22-after">After Task</th>
+      <th headers="dt-166-group" id="dt-166-primary">Primary</th>
+      <th headers="dt-166-group" id="dt-166-secondary">Secondary</th>
+      <th headers="dt-166-details" id="dt-166-before">Before Task</th>
+      <th headers="dt-166-details" id="dt-166-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-22-type dt-22-r1" id="dt-22-r1">Default</th>
-      <td headers="dt-22-group dt-22-primary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-group dt-22-secondary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-before dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-after dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-166-type dt-166-r1" id="dt-166-r1">Default</th>
+      <td headers="dt-166-group dt-166-primary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-group dt-166-secondary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-before dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-after dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-22-group dt-22-primary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-group dt-22-secondary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-before dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-after dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-id">OL-53-GHSLE</td>
+      <td headers="dt-166-group dt-166-primary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-group dt-166-secondary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-before dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-after dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-22-group dt-22-primary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-group dt-22-secondary dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-before dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-details dt-22-after dt-22-r1">Lorem Ipsum</td>
-      <td headers="dt-22-id">OL-53-GHSLE</td>
+      <td headers="dt-166-group dt-166-primary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-group dt-166-secondary dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-before dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-details dt-166-after dt-166-r1">Lorem Ipsum</td>
+      <td headers="dt-166-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-23">
+<table class="data-table data-table--large-header" id="dt-167">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-23-type" rowspan="2">Type</th>
-      <th id="dt-23-group" colspan="2">Group</th>
-      <th id="dt-23-details" colspan="2">Details</th>
-      <th id="dt-23-id" rowspan="2">Id</th>
+      <th id="dt-167-type" rowspan="2">Type</th>
+      <th id="dt-167-group" colspan="2">Group</th>
+      <th id="dt-167-details" colspan="2">Details</th>
+      <th id="dt-167-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-23-group" id="dt-23-primary">Primary</th>
-      <th headers="dt-23-group" id="dt-23-secondary">Secondary</th>
-      <th headers="dt-23-details" id="dt-23-before">Before Task</th>
-      <th headers="dt-23-details" id="dt-23-after">After Task</th>
+      <th headers="dt-167-group" id="dt-167-primary">Primary</th>
+      <th headers="dt-167-group" id="dt-167-secondary">Secondary</th>
+      <th headers="dt-167-details" id="dt-167-before">Before Task</th>
+      <th headers="dt-167-details" id="dt-167-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-23-type dt-23-r1" id="dt-23-r1">Default</th>
-      <td headers="dt-23-group dt-23-primary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-group dt-23-secondary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-before dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-after dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-167-type dt-167-r1" id="dt-167-r1">Default</th>
+      <td headers="dt-167-group dt-167-primary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-group dt-167-secondary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-before dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-after dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-23-group dt-23-primary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-group dt-23-secondary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-before dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-after dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-id">OL-53-GHSLE</td>
+      <td headers="dt-167-group dt-167-primary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-group dt-167-secondary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-before dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-after dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-23-group dt-23-primary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-group dt-23-secondary dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-before dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-details dt-23-after dt-23-r1">Lorem Ipsum</td>
-      <td headers="dt-23-id">OL-53-GHSLE</td>
+      <td headers="dt-167-group dt-167-primary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-group dt-167-secondary dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-before dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-details dt-167-after dt-167-r1">Lorem Ipsum</td>
+      <td headers="dt-167-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-24">
+<table class="data-table data-table--no-border" id="dt-168">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-24-type" rowspan="2">Type</th>
-      <th id="dt-24-group" colspan="2">Group</th>
-      <th id="dt-24-details" colspan="2">Details</th>
-      <th id="dt-24-id" rowspan="2">Id</th>
+      <th id="dt-168-type" rowspan="2">Type</th>
+      <th id="dt-168-group" colspan="2">Group</th>
+      <th id="dt-168-details" colspan="2">Details</th>
+      <th id="dt-168-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-24-group" id="dt-24-primary">Primary</th>
-      <th headers="dt-24-group" id="dt-24-secondary">Secondary</th>
-      <th headers="dt-24-details" id="dt-24-before">Before Task</th>
-      <th headers="dt-24-details" id="dt-24-after">After Task</th>
+      <th headers="dt-168-group" id="dt-168-primary">Primary</th>
+      <th headers="dt-168-group" id="dt-168-secondary">Secondary</th>
+      <th headers="dt-168-details" id="dt-168-before">Before Task</th>
+      <th headers="dt-168-details" id="dt-168-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-24-type dt-24-r1" id="dt-24-r1">Default</th>
-      <td headers="dt-24-group dt-24-primary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-group dt-24-secondary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-before dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-after dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-168-type dt-168-r1" id="dt-168-r1">Default</th>
+      <td headers="dt-168-group dt-168-primary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-group dt-168-secondary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-before dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-after dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-24-group dt-24-primary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-group dt-24-secondary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-before dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-after dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-id">OL-53-GHSLE</td>
+      <td headers="dt-168-group dt-168-primary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-group dt-168-secondary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-before dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-after dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-24-group dt-24-primary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-group dt-24-secondary dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-before dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-details dt-24-after dt-24-r1">Lorem Ipsum</td>
-      <td headers="dt-24-id">OL-53-GHSLE</td>
+      <td headers="dt-168-group dt-168-primary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-group dt-168-secondary dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-before dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-details dt-168-after dt-168-r1">Lorem Ipsum</td>
+      <td headers="dt-168-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>