@ulu/frontend 0.1.0-beta.84 → 0.1.0-beta.85

package/docs-dev/{demos/card.1 → sass/components/table-sticky}/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
-    Card
+    Table-sticky
   </title>
   <meta name="description" content="Modular Sass Theming Library">
   <meta name="generator" content="Eleventy v3.0.0">
@@ -130,8 +130,8 @@
         </li>
       
 
-        <li class="nav-tree__item is-active-trail ">
-          <details class="nav-tree__collapsible" open="">
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -166,6 +166,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -181,6 +196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint Manager
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/button/">
@@ -196,6 +226,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button Group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -241,13 +301,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card.1/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -258,11 +318,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Counter List
     </span>
   
         </a>
@@ -376,6 +436,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline Label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/hero/">
@@ -496,6 +571,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/popovers/">
@@ -541,6 +631,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/rule/">
@@ -726,8 +831,8 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          <details class="nav-tree__collapsible">
+        <li class="nav-tree__item is-active-trail ">
+          <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -746,9 +851,9 @@
             
       <ul class="nav-tree" data-menu-depth="2">
         
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active-trail ">
           
-        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
+        <a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
           
     
     <span class="nav-tree__text">
@@ -1137,8 +1242,8 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          <details class="nav-tree__collapsible">
+        <li class="nav-tree__item is-active-trail ">
+          <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -1155,9 +1260,9 @@
             
       <ul class="nav-tree" data-menu-depth="3">
         
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active-trail ">
           
-        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
+        <a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/components/">
           
     
     <span class="nav-tree__text">
@@ -1245,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button-group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button-verbose/">
@@ -1320,6 +1440,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -1425,6 +1560,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline-label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/hero/">
@@ -1635,6 +1785,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/placeholder-block/">
@@ -1680,6 +1845,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/ratio-box/">
@@ -1785,6 +1965,21 @@
         </li>
       
 
+        <li class="nav-tree__item is-active is-active-trail ">
+          
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/sass/components/table-sticky/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Table-sticky
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -1973,21 +2168,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/helpers/print/">
-          
-    
-    <span class="nav-tree__text">
-      Print
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/helpers/typography/">
@@ -2453,6 +2633,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-css/">
+          
+    
+    <span class="nav-tree__text">
+      utils/css
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/javascript/utils-dom/">
@@ -2527,6 +2722,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2616,8 +2826,8 @@
         </li>
       
 
-        <li class="nav-tree__item is-active-trail ">
-          <details class="nav-tree__collapsible" open="">
+        <li class="nav-tree__item  ">
+          <details class="nav-tree__collapsible">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -2652,6 +2862,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/badge/">
+          
+    
+    <span class="nav-tree__text">
+      Badge
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/basic-hero/">
@@ -2667,6 +2892,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/breakpoints-manager/">
+          
+    
+    <span class="nav-tree__text">
+      Breakpoint Manager
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/button/">
@@ -2682,6 +2922,36 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button Group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/button-verbose/">
+          
+    
+    <span class="nav-tree__text">
+      Button Verbose
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/callout/">
@@ -2727,13 +2997,13 @@
         </li>
       
 
-        <li class="nav-tree__item is-active is-active-trail ">
+        <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/demos/card.1/" aria-current="page">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card
+      Card Grid
     </span>
   
         </a>
@@ -2744,11 +3014,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Counter List
     </span>
   
         </a>
@@ -2862,6 +3132,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline Label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/hero/">
@@ -2982,6 +3267,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/popovers/">
@@ -3027,6 +3327,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/rule/">
@@ -3212,8 +3527,8 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          <details class="nav-tree__collapsible">
+        <li class="nav-tree__item is-active-trail ">
+          <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -3232,9 +3547,9 @@
             
       <ul class="nav-tree" data-menu-depth="2">
         
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active-trail ">
           
-        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/">
+        <a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/">
           
     
     <span class="nav-tree__text">
@@ -3623,8 +3938,8 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          <details class="nav-tree__collapsible">
+        <li class="nav-tree__item is-active-trail ">
+          <details class="nav-tree__collapsible" open="">
             <summary class="nav-tree__toggle">
               
     <span class="nav-tree__toggle-content">
@@ -3641,9 +3956,9 @@
             
       <ul class="nav-tree" data-menu-depth="3">
         
-        <li class="nav-tree__item  ">
+        <li class="nav-tree__item is-active-trail ">
           
-        <a class="nav-tree__link nav-tree__link--index " href="/frontend/sass/components/">
+        <a class="nav-tree__link nav-tree__link--index is-active-trail" href="/frontend/sass/components/">
           
     
     <span class="nav-tree__text">
@@ -3731,6 +4046,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/button-group/">
+          
+    
+    <span class="nav-tree__text">
+      Button-group
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/button-verbose/">
@@ -3806,6 +4136,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -3911,6 +4256,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/headline-label/">
+          
+    
+    <span class="nav-tree__text">
+      Headline-label
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/hero/">
@@ -4121,6 +4481,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/panel/">
+          
+    
+    <span class="nav-tree__text">
+      Panel
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/placeholder-block/">
@@ -4166,6 +4541,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/rail/">
+          
+    
+    <span class="nav-tree__text">
+      Rail
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/ratio-box/">
@@ -4271,6 +4661,21 @@
         </li>
       
 
+        <li class="nav-tree__item is-active is-active-trail ">
+          
+        <a class="nav-tree__link  is-active is-active-trail" href="/frontend/sass/components/table-sticky/" aria-current="page">
+          
+    
+    <span class="nav-tree__text">
+      Table-sticky
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -4459,21 +4864,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/helpers/print/">
-          
-    
-    <span class="nav-tree__text">
-      Print
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/helpers/typography/">
@@ -4939,6 +5329,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-css/">
+          
+    
+    <span class="nav-tree__text">
+      utils/css
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/javascript/utils-dom/">
@@ -5013,6 +5418,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -5042,7 +5462,41 @@
 </header>
 		
 			<div class="page__toc page-toc">
-				
+				<h2>Jump To:</h2>
+<div class="toc">
+                <ol>
+                    
+                    <li><a href="#variables">Variables</a>
+            
+                <ol>
+                    
+                    <li><a href="#variable-config">$config</a>
+            		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#mixins">Mixins</a>
+            
+                <ol>
+                    
+                    <li><a href="#mixin-set">set()</a>
+            		</li>
+
+                    <li><a href="#mixin-styles">styles()</a>
+            		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#functions">Functions</a>
+            
+                <ol>
+                    
+                    <li><a href="#function-get">get()</a>
+            		</li>
+                </ol>
+            		</li>
+                </ol>
+            </div>
 			</div>
 		
 		<main id="main" class="page__body">
@@ -5050,164 +5504,164 @@
 			
 			
 			
-  <div class="page__body-top container ">
-    <h1 class="page__title h1">Card</h1>
-
-  <p class="type-large type-light">
-    Cards are...
-  </p>
-
-
-  <hr class="rule rule--light rule--margin-large">
-
-    <h2 class="h2">Interactive Card Demo</h2>
-<div id="icd" class="interactive-demo">
-  <div id="icd-display" class="interactive-demo__display">
+  <div class="page__body-top container api-docs">
+    <div class="wysiwyg">
+      <h1 id="table-sticky" tabindex="-1">Table-sticky</h1>
+<div class="type-large">
+<p>For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.</p>
+</div>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
   </div>
-  <form id="icdForm" class="interactive-demo__form form-theme">
-    <fieldset>
-      <legend>Elements Visible</legend>
-      <div class="form-theme__item">
-        <input type="checkbox" id="fieldBody" name="fieldBody" checked="">
-        <label for="fieldBody">Body</label>
-      </div>
-      <div class="form-theme__item">
-        <input type="checkbox" id="fieldTitle" name="fieldTitle" checked="">
-        <label for="fieldTitle">Title</label>
-      </div>
-      <div class="form-theme__item">
-        <input type="checkbox" id="fieldContent" name="fieldContent" checked="">
-        <label for="fieldContent">Content</label>
-      </div>
-      <div class="form-theme__item">
-        <input type="checkbox" id="fieldFooter" name="fieldFooter" checked="">
-        <label for="fieldFooter">Footer</label>
-      </div>
-    </fieldset>
-    <div class="form-theme__item form-theme__item--select">
-      <label for="fieldAction">
-        Action
-        <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
-      </label>
-      <select id="fieldAction" name="fieldAction">
-        <option value="">None</option>
-        <option value="link">Card is Link</option>
-        <option value="proxy" selected="">Proxy Click</option>
-      </select>
-    </div>
-    <div class="form-theme__item form-theme__item--select">
-      <label for="fieldMedia">
-        Media
-      </label>
-      <select id="fieldMedia" name="fieldMedia">
-        <option value="icon">Icon</option>
-        <option value="image" selected="">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="fieldLayout">
-        Layout
-        <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
-      </label>
-      <select id="fieldLayout" name="fieldLayout">
-        <option value="" selected="">Default</option>
-        <option value="horizontal">Horizontal</option>
-        <option value="overlay">Overlay</option>
-      </select>
-    </div>
-    <!-- <div class="form-theme__actions">
-      <button type="button" id="icdSubmit" class="button button--small">Update</button>
-    </div> -->
-  </form>
 </div>
-<script>
-  (() => {
-    const display = document.getElementById("icd-display");
-    const submit = document.getElementById("icdSubmit");
-    const form = document.getElementById("icdForm");
-  
-    // Run initially and watch for changes
-    render();
-    form.addEventListener("change", update);
-
-    function update() {
-      render();
-      document.dispatchEvent(new CustomEvent("ulu:pageModified", { bubbles: true }));
-    }
-
-    function render() {
-      const formData = new FormData(form);
-      const values = {};
-      formData.forEach((value, key) => { values[key] = value });
-      display.innerHTML = cardTemplate(values);
-    }
-
-    function cardTemplate(options) {
-      const when = (cond, whenTrue, whenFalse = "") => cond ? whenTrue : whenFalse;
-      const imageType = options.fieldMedia;
-      const hasProxy = options.fieldAction == "proxy";
-      const isLink = options.fieldAction == "link";
-      const hasImage = imageType === "image" || imageType === "imageFit";
-      const element = isLink ? "a" : "article";
-      const classes = [
-        "card",
-        options.fieldLayout ? `card--${ options.fieldLayout }` : "",
-        options.fieldMedia === "imageFit" ? `card--image-fit` : "",
-      ];
-
-      return `
-        <${ element } 
-          class="${ classes.filter(v => v).join(' ') }"
-          ${ when(hasProxy, "data-ulu-proxy-click") }
-          ${ when(isLink, "href='https://www.google.com'") }
-        >
-          ${ when(options.fieldBody, `
-            <div class="card__body">
-              ${ when(options.fieldTitle, `
-                <h5 class="card__title">
-                  ${ when(isLink, "Card Title", `
-                    <a 
-                      class="card__title-link" 
-                      href="https://www.google.com" 
-                      ${ when(hasProxy, "data-ulu-proxy-click-source") }
-                    >
-                      Card Title
-                    </a>
-                  `) }
-                </h5>
-              `) }
-              ${ when(options.fieldContent, `
-                <div>
-                  This is the card content. It can contain around 2-3 sentences.
-                </div>
-              `) }
-            </div>
-          `)}
-          ${ when(hasImage, `
-            <div class="card__image">
-              <img src="/frontend/assets/placeholder/image-1.jpg">
-            </div>
-          `) }
-          ${ when(imageType === "icon", `
-            <div class="card__image card__image--icon">
-              <img src="/frontend/assets/placeholder/icon-calendar.svg" width="150" height="150">
-            </div>
-          `) }
-          ${ when(options.fieldFooter, `
-            <div class="card__footer">
-              ${ when(isLink, "Card Footer Text", `
-                <a class="button button--small" href="https://www.yahoo.com/">Footer</a>
-              `) }
-            </div>
-          `) }
-        </${ element }>
-      `;
-    }
-  })();
-</script>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"box-shadow"</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">"ui-color-disabled"</span><span class="pjs-token pjs-punctuation">:</span> #6490af<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>
+<ul>
+<li><strong>File:</strong> _table-sticky.scss</li>
+<li><strong>Group:</strong> table-sticky</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 23-25</li>
+<li><strong>Lines (code):</strong> 27-30</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">box-shadow</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Box shadow for controls, defaults to element box-shadow</td>
+</tr>
+</tbody>
+</table>
+<h2 id="mixins" tabindex="-1">Mixins</h2>
+<div class="sassdoc-item-header">
+<h3 id="mixin-set" tabindex="-1">set()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Change modules $config</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _table-sticky.scss</li>
+<li><strong>Group:</strong> table-sticky</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 32-35</li>
+<li><strong>Lines (code):</strong> 37-39</li>
+</ul>
+</details>
+<h4 id="examples" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-table-sticky-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"property"</span> <span class="pjs-token pjs-punctuation">:</span> value <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="parameters" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
+</ul>
+<div class="sassdoc-item-header">
+<h3 id="mixin-styles" tabindex="-1">styles()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Prints component styles</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _table-sticky.scss</li>
+<li><strong>Group:</strong> table-sticky</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 50-53</li>
+<li><strong>Lines (code):</strong> 55-183</li>
+</ul>
+</details>
+<div class="callout callout--demo crop-margins">
+<h4 id="demo" tabindex="-1">Demo</h4>
+<p><a class="button" href="/frontend/demos/table-sticky">View</a></p>
+</div>
+<h4 id="examples-1" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-table-sticky-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="require-1" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
+</ul>
+<h2 id="functions" tabindex="-1">Functions</h2>
+<div class="sassdoc-item-header">
+<h3 id="function-get" tabindex="-1">get()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Function</strong></span>
+  </div>
+</div>
+<p>Get a config option</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _table-sticky.scss</li>
+<li><strong>Group:</strong> table-sticky</li>
+<li><strong>Type:</strong> function</li>
+<li><strong>Lines (comments):</strong> 41-44</li>
+<li><strong>Lines (code):</strong> 46-49</li>
+</ul>
+</details>
+<h4 id="examples-2" tabindex="-1">Examples</h4>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-table-sticky-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<h4 id="parameters-1" tabindex="-1">Parameters</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$name</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Name of property</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-2" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
+</ul>
 
+    </div>
   </div>
 
 		</main>