npm - @ulu/frontend - Versions diffs - 0.1.0-beta.41 → 0.1.0-beta.43 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/CHANGELOG.md +12 -0
package/dist/ulu-frontend.min.css +1 -1
package/docs-dev/changelog/index.html +16 -0
package/docs-dev/demos/card/index.html +16 -16
package/docs-dev/demos/data-table/index.html +100 -100
package/docs-dev/demos/popovers/index.html +5453 -0
package/docs-dev/sass/base/elements/index.html +70 -70
package/docs-dev/sass/base/index/index.html +56 -56
package/docs-dev/sass/base/layout/index.html +63 -63
package/docs-dev/sass/components/accordion/index.html +118 -118
package/docs-dev/sass/components/adaptive-spacing/index.html +124 -124
package/docs-dev/sass/components/badge/index.html +96 -96
package/docs-dev/sass/components/basic-hero/index.html +62 -62
package/docs-dev/sass/components/button/index.html +49 -49
package/docs-dev/sass/components/button-verbose/index.html +128 -128
package/docs-dev/sass/components/callout/index.html +163 -163
package/docs-dev/sass/components/captioned-figure/index.html +114 -114
package/docs-dev/sass/components/card/index.html +170 -170
package/docs-dev/sass/components/card-grid/index.html +70 -70
package/docs-dev/sass/components/counter-list/index.html +119 -119
package/docs-dev/sass/components/css-icon/index.html +140 -140
package/docs-dev/sass/components/data-grid/index.html +166 -166
package/docs-dev/sass/components/data-table/index.html +114 -114
package/docs-dev/sass/components/flipcard/index.html +162 -162
package/docs-dev/sass/components/flipcard-grid/index.html +57 -57
package/docs-dev/sass/components/form-theme/index.html +265 -265
package/docs-dev/sass/components/hero/index.html +107 -107
package/docs-dev/sass/components/horizontal-rule/index.html +56 -56
package/docs-dev/sass/components/image-grid/index.html +63 -63
package/docs-dev/sass/components/index/index.html +95 -95
package/docs-dev/sass/components/list-inline/index.html +77 -77
package/docs-dev/sass/components/list-lines/index.html +98 -98
package/docs-dev/sass/components/menu-stack/index.html +119 -119
package/docs-dev/sass/components/modal/index.html +114 -114
package/docs-dev/sass/components/nav-strip/index.html +114 -114
package/docs-dev/sass/components/overlay-section/index.html +101 -101
package/docs-dev/sass/components/pager/index.html +114 -114
package/docs-dev/sass/components/placeholder-block/index.html +114 -114
package/docs-dev/sass/components/popover/index.html +114 -114
package/docs-dev/sass/components/pull-quote/index.html +114 -114
package/docs-dev/sass/components/ratio-box/index.html +60 -60
package/docs-dev/sass/components/rule/index.html +63 -63
package/docs-dev/sass/components/scroll-slider/index.html +114 -114
package/docs-dev/sass/components/skip-link/index.html +34 -34
package/docs-dev/sass/components/slider/index.html +114 -114
package/docs-dev/sass/components/spoke-spinner/index.html +56 -56
package/docs-dev/sass/components/sticky-list/index.html +145 -145
package/docs-dev/sass/components/tabs/index.html +114 -114
package/docs-dev/sass/components/tag/index.html +161 -161
package/docs-dev/sass/components/tile-button/index.html +101 -101
package/docs-dev/sass/components/tile-grid/index.html +142 -142
package/docs-dev/sass/components/tile-grid-overlay/index.html +37 -37
package/docs-dev/sass/components/vignette/index.html +56 -56
package/docs-dev/sass/components/wysiwyg/index.html +65 -65
package/docs-dev/sass/core/breakpoint/index.html +100 -100
package/docs-dev/sass/core/button/index.html +535 -535
package/docs-dev/sass/core/color/index.html +157 -157
package/docs-dev/sass/core/cssvar/index.html +49 -49
package/docs-dev/sass/core/element/index.html +504 -504
package/docs-dev/sass/core/layout/index.html +107 -107
package/docs-dev/sass/core/path/index.html +32 -32
package/docs-dev/sass/core/selector/index.html +49 -49
package/docs-dev/sass/core/typography/index.html +265 -265
package/docs-dev/sass/core/units/index.html +81 -81
package/docs-dev/sass/core/utils/index.html +70 -70
package/docs-dev/sass/helpers/index/index.html +53 -53
package/docs-dev/sass/helpers/units/index.html +47 -47
package/package.json +1 -1
package/scss/components/_card.scss +10 -7

package/docs-dev/sass/components/tile-button/index.html CHANGED Viewed

@@ -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,6 +5210,98 @@
 <div class="type-large">
 <p>Button to be used within tile-grid. Used in combination with button component classes.</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">"border-radius"</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">"description-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small-x"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"line-height"</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">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>1em 0.5em<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"row-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-font-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-opacity"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"transition-enabled"</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">"transition-duration"</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">"transition-properties"</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-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _tile-button.scss</li>
+<li><strong>Group:</strong> tile-button</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 38-47</li>
+<li><strong>Lines (code):</strong> 49-61</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">border-radius</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">The border radius of the tile button. If set to true, will use the element.scss property for &quot;border-radius&quot;.</td>
+</tr>
+<tr>
+<td style="text-align:left">description-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">small-x</td>
+<td style="text-align:left">The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss.</td>
+</tr>
+<tr>
+<td style="text-align:left">line-height</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">The line-height of the tile-button. If set to true, will use the typography.scss property for &quot;line-height-densest&quot;.</td>
+</tr>
+<tr>
+<td style="text-align:left">padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(1em 0.5em)</td>
+<td style="text-align:left">The padding of the tile button</td>
+</tr>
+<tr>
+<td style="text-align:left">row-margin</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">0.5em</td>
+<td style="text-align:left">The margin between rows.</td>
+</tr>
+<tr>
+<td style="text-align:left">icon-font-size</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1.5em</td>
+<td style="text-align:left">The font size of the icon.</td>
+</tr>
+<tr>
+<td style="text-align:left">icon-margin</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1em</td>
+<td style="text-align:left">The margin for the icon.</td>
+</tr>
+<tr>
+<td style="text-align:left">icon-opacity</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">0.5</td>
+<td style="text-align:left">The opacity of the icon.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5315,98 +5407,6 @@
 <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>
-  <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">"border-radius"</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">"description-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small-x"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"line-height"</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">"padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>1em 0.5em<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"row-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-font-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-opacity"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"transition-enabled"</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">"transition-duration"</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">"transition-properties"</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-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _tile-button.scss</li>
-<li><strong>Group:</strong> tile-button</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 38-47</li>
-<li><strong>Lines (code):</strong> 49-61</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">border-radius</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">true</td>
-<td style="text-align:left">The border radius of the tile button. If set to true, will use the element.scss property for &quot;border-radius&quot;.</td>
-</tr>
-<tr>
-<td style="text-align:left">description-size</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">small-x</td>
-<td style="text-align:left">The type size of the description. This uses typography.scss, so the value of this options should be a variable from typography.scss.</td>
-</tr>
-<tr>
-<td style="text-align:left">line-height</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">true</td>
-<td style="text-align:left">The line-height of the tile-button. If set to true, will use the typography.scss property for &quot;line-height-densest&quot;.</td>
-</tr>
-<tr>
-<td style="text-align:left">padding</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">(1em 0.5em)</td>
-<td style="text-align:left">The padding of the tile button</td>
-</tr>
-<tr>
-<td style="text-align:left">row-margin</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">0.5em</td>
-<td style="text-align:left">The margin between rows.</td>
-</tr>
-<tr>
-<td style="text-align:left">icon-font-size</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">1.5em</td>
-<td style="text-align:left">The font size of the icon.</td>
-</tr>
-<tr>
-<td style="text-align:left">icon-margin</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">1em</td>
-<td style="text-align:left">The margin for the icon.</td>
-</tr>
-<tr>
-<td style="text-align:left">icon-opacity</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">0.5</td>
-<td style="text-align:left">The opacity of the icon.</td>
-</tr>
-</tbody>
-</table>
     </div>
   </div>

package/docs-dev/sass/components/tile-grid/index.html CHANGED Viewed

@@ -5166,6 +5166,21 @@
 <div class="toc">
                 <ol>
+                    <li><a href="#variables">Variables</a>
+                <ol>
+                    <li><a href="#variable-config">$config</a>
+            		</li>
+                    <li><a href="#variable-sizes">$sizes</a>
+            		</li>
+                    <li><a href="#variable-static-sizes">$static-sizes</a>
+            		</li>
+                </ol>
+            		</li>
                     <li><a href="#mixins">Mixins</a>
                 <ol>
@@ -5190,21 +5205,6 @@
                     <li><a href="#function-get">get()</a>
             		</li>
-                </ol>
-            		</li>
-                    <li><a href="#variables">Variables</a>
-                <ol>
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-                    <li><a href="#variable-sizes">$sizes</a>
-            		</li>
-                    <li><a href="#variable-static-sizes">$static-sizes</a>
-            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5222,6 +5222,133 @@
 <div class="type-large">
 <p>Creates a CSS grid with items that have matching aspect ratios. Reflows to fit as many items as can be fit withing current grid's width by default. Allows passing static styles to create fixed number of columns per row. Static styles are set adaptively and can adjust the number of columns at different breakpoints.</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">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"width"</span> <span class="pjs-token pjs-punctuation">:</span> 10em<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> _tile-grid.scss</li>
+<li><strong>Group:</strong> tile-grid</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 14-18</li>
+<li><strong>Lines (code):</strong> 20-24</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">aspect-ratio</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">list.slash(4, 3)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">gap</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1rem</td>
+<td style="text-align:left">The gap for the tile grid.</td>
+</tr>
+<tr>
+<td style="text-align:left">width</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">10em</td>
+<td style="text-align:left"></td>
+</tr>
+</tbody>
+</table>
+<div class="sassdoc-item-header">
+<h3 id="variable-sizes" tabindex="-1">$sizes</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>Alternate Sizes for reflowable grid</p>
+<ul>
+<li>Map of preferred width for columns and optional aspect-ratio for item</li>
+</ul>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><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">"width"</span> <span class="pjs-token pjs-punctuation">:</span> 20em<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> _tile-grid.scss</li>
+<li><strong>Group:</strong> tile-grid</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 26-28</li>
+<li><strong>Lines (code):</strong> 30-34</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="variable-static-sizes" tabindex="-1">$static-sizes</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>Static grid width styles</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$static-sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"static"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 1<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<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">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 2<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 3<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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>
+  <span class="pjs-token pjs-string">"static-wide"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+    <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 1<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<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">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 2<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _tile-grid.scss</li>
+<li><strong>Group:</strong> tile-grid</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 36-37</li>
+<li><strong>Lines (code):</strong> 39-69</li>
+</ul>
+</details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5415,133 +5542,6 @@
 <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>
-  <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">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"width"</span> <span class="pjs-token pjs-punctuation">:</span> 10em<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> _tile-grid.scss</li>
-<li><strong>Group:</strong> tile-grid</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 14-18</li>
-<li><strong>Lines (code):</strong> 20-24</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">aspect-ratio</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">list.slash(4, 3)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">gap</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1rem</td>
-<td style="text-align:left">The gap for the tile grid.</td>
-</tr>
-<tr>
-<td style="text-align:left">width</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">10em</td>
-<td style="text-align:left"></td>
-</tr>
-</tbody>
-</table>
-<div class="sassdoc-item-header">
-<h3 id="variable-sizes" tabindex="-1">$sizes</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>Alternate Sizes for reflowable grid</p>
-<ul>
-<li>Map of preferred width for columns and optional aspect-ratio for item</li>
-</ul>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><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">"width"</span> <span class="pjs-token pjs-punctuation">:</span> 20em<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> _tile-grid.scss</li>
-<li><strong>Group:</strong> tile-grid</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 26-28</li>
-<li><strong>Lines (code):</strong> 30-34</li>
-</ul>
-</details>
-<div class="sassdoc-item-header">
-<h3 id="variable-static-sizes" tabindex="-1">$static-sizes</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>Static grid width styles</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$static-sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"static"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 1<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<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">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 2<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 3<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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>
-  <span class="pjs-token pjs-string">"static-wide"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-    <span class="pjs-token pjs-string">"default"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 1<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"aspect-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>4<span class="pjs-token pjs-punctuation">,</span> 3<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">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-      <span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"columns"</span> <span class="pjs-token pjs-punctuation">:</span> 2<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</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><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _tile-grid.scss</li>
-<li><strong>Group:</strong> tile-grid</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 36-37</li>
-<li><strong>Lines (code):</strong> 39-69</li>
-</ul>
-</details>
     </div>
   </div>