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

package/docs-dev/sass/components/data-grid/index.html

@@ -5166,6 +5166,15 @@
 <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>
@@ -5193,15 +5202,6 @@
 
                     <li><a href="#function-get-default-breakpoint">get-default-breakpoint()</a>
             		</li>
-                </ol>
-            		</li>
-
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5219,6 +5219,163 @@
 <div class="type-large">
 <p>A page grid layout component that uses data attribute instead of class names, for brevity and readability</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>
+</div>
+<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">"attribute"</span><span class="pjs-token pjs-punctuation">:</span>           <span class="pjs-token pjs-string">"data-grid"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"attribute-container"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-container"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"attribute-init"</span><span class="pjs-token pjs-punctuation">:</span>      <span class="pjs-token pjs-string">"data-grid-init"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"breakpoint"</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-comment">// Fallback to default</span>
+  <span class="pjs-token pjs-string">"columns"</span><span class="pjs-token pjs-punctuation">:</span>             12<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>              14px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"position-class-column-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-first"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"position-class-column-last"</span><span class="pjs-token pjs-punctuation">:</span>  <span class="pjs-token pjs-string">"position-column-last"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"position-class-row-first"</span><span class="pjs-token pjs-punctuation">:</span>    <span class="pjs-token pjs-string">"position-row-first"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"position-class-row-last"</span><span class="pjs-token pjs-punctuation">:</span>     <span class="pjs-token pjs-string">"position-row-last"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"sticky-bottom"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-bottom-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"sticky-top"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-top-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"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">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"rule-fade-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 400ms<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"extra-breakpoints"</span><span class="pjs-token pjs-punctuation">:</span>   <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>     15px
+    <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+    <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>     20px
+    <span class="pjs-token pjs-punctuation">)</span>
+  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"extra-gutter-scales"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span> 0.6
+  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"extra-rule-styles"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"light"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"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>
+<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> _data-grid.scss</li>
+<li><strong>Group:</strong> data-grid</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 20-36</li>
+<li><strong>Lines (code):</strong> 38-73</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">attribute</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">data-grid</td>
+<td style="text-align:left">Default attribute to use for grid mixin.</td>
+</tr>
+<tr>
+<td style="text-align:left">attribute-container</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">data-grid-container</td>
+<td style="text-align:left">Default attribute to use for grid's container.</td>
+</tr>
+<tr>
+<td style="text-align:left">columns</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">12</td>
+<td style="text-align:left">Default for grid mixin.</td>
+</tr>
+<tr>
+<td style="text-align:left">gutter</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">14px</td>
+<td style="text-align:left">Default gutter for grid mixin.</td>
+</tr>
+<tr>
+<td style="text-align:left">position-class-column-first</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">position-column-first</td>
+<td style="text-align:left">Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)</td>
+</tr>
+<tr>
+<td style="text-align:left">position-class-column-last</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">position-column-last</td>
+<td style="text-align:left">See definition above</td>
+</tr>
+<tr>
+<td style="text-align:left">position-class-row-first</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">position-row-first</td>
+<td style="text-align:left">See definition above</td>
+</tr>
+<tr>
+<td style="text-align:left">position-class-row-last</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">position-row-last</td>
+<td style="text-align:left">See definition above</td>
+</tr>
+<tr>
+<td style="text-align:left">sticky-bottom</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">var(--ulu-sticky-bottom-offset, 0)</td>
+<td style="text-align:left">When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-bottom-offset by default</td>
+</tr>
+<tr>
+<td style="text-align:left">sticky-top</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">var(--ulu-sticky-top-offset, 0)</td>
+<td style="text-align:left">When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-top-offset by default</td>
+</tr>
+<tr>
+<td style="text-align:left">rule-color</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;rule&quot;</td>
+<td style="text-align:left">The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.</td>
+</tr>
+<tr>
+<td style="text-align:left">rule-size</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1px</td>
+<td style="text-align:left">The width of the rule</td>
+</tr>
+<tr>
+<td style="text-align:left">extra-breakpoints</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Default extra breakpoints for grid mixin</td>
+</tr>
+<tr>
+<td style="text-align:left">extra-gutter-scales</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Extra options for gutter scales.</td>
+</tr>
+<tr>
+<td style="text-align:left">extra-rule-styles</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Map</td>
+<td style="text-align:left">Extra options for rule styles.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5458,163 +5615,6 @@
 <ul>
 <li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
 </ul>
-<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>
-</div>
-<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">"attribute"</span><span class="pjs-token pjs-punctuation">:</span>           <span class="pjs-token pjs-string">"data-grid"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"attribute-container"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"data-grid-container"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"attribute-init"</span><span class="pjs-token pjs-punctuation">:</span>      <span class="pjs-token pjs-string">"data-grid-init"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"breakpoint"</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-comment">// Fallback to default</span>
-  <span class="pjs-token pjs-string">"columns"</span><span class="pjs-token pjs-punctuation">:</span>             12<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>              14px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"position-class-column-first"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"position-column-first"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"position-class-column-last"</span><span class="pjs-token pjs-punctuation">:</span>  <span class="pjs-token pjs-string">"position-column-last"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"position-class-row-first"</span><span class="pjs-token pjs-punctuation">:</span>    <span class="pjs-token pjs-string">"position-row-first"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"position-class-row-last"</span><span class="pjs-token pjs-punctuation">:</span>     <span class="pjs-token pjs-string">"position-row-last"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"sticky-bottom"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-bottom-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"sticky-top"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-function">var</span><span class="pjs-token pjs-punctuation">(</span>--ulu-sticky-top-offset<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"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">"rule-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"rule-fade-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 400ms<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"extra-breakpoints"</span><span class="pjs-token pjs-punctuation">:</span>   <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>     15px
-    <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-    <span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"breakpoint"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gutter"</span><span class="pjs-token pjs-punctuation">:</span>     20px
-    <span class="pjs-token pjs-punctuation">)</span>
-  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"extra-gutter-scales"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">:</span> 0.6
-  <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"extra-rule-styles"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"light"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"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>
-<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> _data-grid.scss</li>
-<li><strong>Group:</strong> data-grid</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 20-36</li>
-<li><strong>Lines (code):</strong> 38-73</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">attribute</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">data-grid</td>
-<td style="text-align:left">Default attribute to use for grid mixin.</td>
-</tr>
-<tr>
-<td style="text-align:left">attribute-container</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">data-grid-container</td>
-<td style="text-align:left">Default attribute to use for grid's container.</td>
-</tr>
-<tr>
-<td style="text-align:left">columns</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">12</td>
-<td style="text-align:left">Default for grid mixin.</td>
-</tr>
-<tr>
-<td style="text-align:left">gutter</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">14px</td>
-<td style="text-align:left">Default gutter for grid mixin.</td>
-</tr>
-<tr>
-<td style="text-align:left">position-class-column-first</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">position-column-first</td>
-<td style="text-align:left">Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)</td>
-</tr>
-<tr>
-<td style="text-align:left">position-class-column-last</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">position-column-last</td>
-<td style="text-align:left">See definition above</td>
-</tr>
-<tr>
-<td style="text-align:left">position-class-row-first</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">position-row-first</td>
-<td style="text-align:left">See definition above</td>
-</tr>
-<tr>
-<td style="text-align:left">position-class-row-last</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">position-row-last</td>
-<td style="text-align:left">See definition above</td>
-</tr>
-<tr>
-<td style="text-align:left">sticky-bottom</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">var(--ulu-sticky-bottom-offset, 0)</td>
-<td style="text-align:left">When a column is sticky bottom this is the value for the sticky offset, set to --ulu-sticky-bottom-offset by default</td>
-</tr>
-<tr>
-<td style="text-align:left">sticky-top</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">var(--ulu-sticky-top-offset, 0)</td>
-<td style="text-align:left">When a column is sticky top this is the value for the sticky offset, set to --ulu-sticky-top-offset by default</td>
-</tr>
-<tr>
-<td style="text-align:left">rule-color</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;rule&quot;</td>
-<td style="text-align:left">The color of the rule. This uses color.scss, so the value of this option should be a color variable from color.scss.</td>
-</tr>
-<tr>
-<td style="text-align:left">rule-size</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">1px</td>
-<td style="text-align:left">The width of the rule</td>
-</tr>
-<tr>
-<td style="text-align:left">extra-breakpoints</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Default extra breakpoints for grid mixin</td>
-</tr>
-<tr>
-<td style="text-align:left">extra-gutter-scales</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Extra options for gutter scales.</td>
-</tr>
-<tr>
-<td style="text-align:left">extra-rule-styles</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Map</td>
-<td style="text-align:left">Extra options for rule styles.</td>
-</tr>
-</tbody>
-</table>
 
     </div>
   </div>

package/docs-dev/sass/components/data-table/index.html

@@ -5166,32 +5166,32 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#mixins">Mixins</a>
+                    <li><a href="#variables">Variables</a>
             
                 <ol>
                     
-                    <li><a href="#mixin-set">set()</a>
-            		</li>
-
-                    <li><a href="#mixin-styles">styles()</a>
+                    <li><a href="#variable-config">$config</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#functions">Functions</a>
+                    <li><a href="#mixins">Mixins</a>
             
                 <ol>
                     
-                    <li><a href="#function-get">get()</a>
+                    <li><a href="#mixin-set">set()</a>
+            		</li>
+
+                    <li><a href="#mixin-styles">styles()</a>
             		</li>
                 </ol>
             		</li>
 
-                    <li><a href="#variables">Variables</a>
+                    <li><a href="#functions">Functions</a>
             
                 <ol>
                     
-                    <li><a href="#variable-config">$config</a>
+                    <li><a href="#function-get">get()</a>
             		</li>
                 </ol>
             		</li>
@@ -5210,111 +5210,6 @@
 <div class="type-large">
 <p>For tabular data in native HTML tables. Note, this component can be used with the Vue sticky table plugin.</p>
 </div>
-<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> _data-table.scss</li>
-<li><strong>Group:</strong> data-table</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 89-92</li>
-<li><strong>Lines (code):</strong> 94-96</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-data-table-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>Output component stylesheet</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _data-table.scss</li>
-<li><strong>Group:</strong> data-table</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 108-110</li>
-<li><strong>Lines (code):</strong> 112-220</li>
-</ul>
-</details>
-<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-data-table-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> _data-table.scss</li>
-<li><strong>Group:</strong> data-table</li>
-<li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 98-101</li>
-<li><strong>Lines (code):</strong> 103-106</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-data-table-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>
 <h2 id="variables" tabindex="-1">Variables</h2>
 <div class="sassdoc-item-header">
 <h3 id="variable-config" tabindex="-1">$config</h3>
@@ -5551,6 +5446,111 @@
 </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> _data-table.scss</li>
+<li><strong>Group:</strong> data-table</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 89-92</li>
+<li><strong>Lines (code):</strong> 94-96</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-data-table-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>Output component stylesheet</p>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _data-table.scss</li>
+<li><strong>Group:</strong> data-table</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 108-110</li>
+<li><strong>Lines (code):</strong> 112-220</li>
+</ul>
+</details>
+<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-data-table-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> _data-table.scss</li>
+<li><strong>Group:</strong> data-table</li>
+<li><strong>Type:</strong> function</li>
+<li><strong>Lines (comments):</strong> 98-101</li>
+<li><strong>Lines (code):</strong> 103-106</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-data-table-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>