@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

package/docs-dev/sass/components/spoke-spinner/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,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/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,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/">
@@ -5106,18 +5166,6 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-
-                    <li><a href="#variable-styles">$styles</a>
-            		</li>
-                </ol>
-            		</li>
-
                     <li><a href="#mixins">Mixins</a>
             
                 <ol>
@@ -5139,6 +5187,18 @@
                     
                     <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-styles">$styles</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5156,50 +5216,6 @@
 <div class="type-large">
 <p>A spoke style spinner/loader icon, requires ulu.base-keyframes</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">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 48px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"spoke-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"spoke-height"</span> <span class="pjs-token pjs-punctuation">:</span> 12px<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">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 2px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"duration"</span> <span class="pjs-token pjs-punctuation">:</span>  1.2s
-<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> _spoke-spinner.scss</li>
-<li><strong>Group:</strong> spoke-spinner</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 13-14</li>
-<li><strong>Lines (code):</strong> 16-23</li>
-</ul>
-</details>
-<div class="sassdoc-item-header">
-<h3 id="variable-styles" tabindex="-1">$styles</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span>
-  </div>
-</div>
-<p>Map of other sizes (use as modifiers), same properties as config/defaults</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$styles</span></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> _spoke-spinner.scss</li>
-<li><strong>Group:</strong> spoke-spinner</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 25-25</li>
-<li><strong>Lines (code):</strong> 26-26</li>
-</ul>
-</details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5366,6 +5382,50 @@
 <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">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 48px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"spoke-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"spoke-height"</span> <span class="pjs-token pjs-punctuation">:</span> 12px<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">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 2px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"duration"</span> <span class="pjs-token pjs-punctuation">:</span>  1.2s
+<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> _spoke-spinner.scss</li>
+<li><strong>Group:</strong> spoke-spinner</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 13-14</li>
+<li><strong>Lines (code):</strong> 16-23</li>
+</ul>
+</details>
+<div class="sassdoc-item-header">
+<h3 id="variable-styles" tabindex="-1">$styles</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span>
+  </div>
+</div>
+<p>Map of other sizes (use as modifiers), same properties as config/defaults</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$styles</span></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> _spoke-spinner.scss</li>
+<li><strong>Group:</strong> spoke-spinner</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 25-25</li>
+<li><strong>Lines (code):</strong> 26-26</li>
+</ul>
+</details>
 
     </div>
   </div>

package/docs-dev/sass/components/sticky-list/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,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/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,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/">
@@ -5106,15 +5166,6 @@
 <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>
@@ -5139,6 +5190,15 @@
                     
                     <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>
                 </ol>
             		</li>
                 </ol>
@@ -5156,142 +5216,6 @@
 <div class="type-large">
 <p>Sticky first column, sticky elements inside adjacent columns to first. (Sticky list with header)</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">"margin"</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">"mask-offset-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 55vh<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"mask-offset-top"</span> <span class="pjs-token pjs-punctuation">:</span> 5rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"sticky-top"</span> <span class="pjs-token pjs-punctuation">:</span> 45vh<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">"type-size"</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">"title-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40%<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"title-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 8em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"title-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> right<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"background-contexts"</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">"selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".background-dark"</span><span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
-      <span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 1em
-    <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> _sticky-list.scss</li>
-<li><strong>Group:</strong> sticky-list</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 26-41</li>
-<li><strong>Lines (code):</strong> 43-63</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">background-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left">transparent</td>
-<td style="text-align:left">Background color for the entire slider section.</td>
-</tr>
-<tr>
-<td style="text-align:left">margin</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">true</td>
-<td style="text-align:left">Margin on ends of component (defaults to element margin)</td>
-</tr>
-<tr>
-<td style="text-align:left">mask-offset-bottom</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">55vh</td>
-<td style="text-align:left">The offset for the mask (on bottom)</td>
-</tr>
-<tr>
-<td style="text-align:left">mask-offset-top</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">5rem</td>
-<td style="text-align:left">The offset for the mask (on top)</td>
-</tr>
-<tr>
-<td style="text-align:left">sticky-top</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">45vh</td>
-<td style="text-align:left">When to stick</td>
-</tr>
-<tr>
-<td style="text-align:left">breakpoint</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;medium&quot;</td>
-<td style="text-align:left">The upward breakpoint that this is allowed to be sticky</td>
-</tr>
-<tr>
-<td style="text-align:left">type-size</td>
-<td style="text-align:left">String</td>
-<td style="text-align:left">&quot;medium&quot;</td>
-<td style="text-align:left">The typography size to use for title</td>
-</tr>
-<tr>
-<td style="text-align:left">title-width</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">40%</td>
-<td style="text-align:left">The width of the title when this is displayed in columns</td>
-</tr>
-<tr>
-<td style="text-align:left">title-min-width</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">8em</td>
-<td style="text-align:left">The min width for title when displayed in columns</td>
-</tr>
-<tr>
-<td style="text-align:left">title-text-align</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">right</td>
-<td style="text-align:left">Text alignment for title when displayed in columns</td>
-</tr>
-<tr>
-<td style="text-align:left">item-padding-x</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">0</td>
-<td style="text-align:left">Optional padding on the left/right for items</td>
-</tr>
-<tr>
-<td style="text-align:left">gap</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">2rem</td>
-<td style="text-align:left">The gap between title and items when displayed in columns</td>
-</tr>
-<tr>
-<td style="text-align:left">background-color</td>
-<td style="text-align:left">Color</td>
-<td style="text-align:left">white</td>
-<td style="text-align:left">The background color used for the mask</td>
-</tr>
-<tr>
-<td style="text-align:left">background-contexts</td>
-<td style="text-align:left">List</td>
-<td style="text-align:left"></td>
-<td style="text-align:left">Adjust the background mask color by contextual selectors. Pass List of Maps with (&quot;selector&quot; [parent/contextual selector], &quot;background-color&quot;, &quot;item-padding-x&quot; [optional])</td>
-</tr>
-</tbody>
-</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -5395,7 +5319,7 @@
 </details>
 <div class="callout callout--demo crop-margins">
 <h4 id="demo" tabindex="-1">Demo</h4>
-<p><a class="button" href="/frontend/demos/sticky-list">Our Demo</a></p>
+<p><a class="button" href="/frontend/demos/sticky-list">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-sticky-list-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>
@@ -5526,6 +5450,142 @@
 <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">"margin"</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">"mask-offset-bottom"</span> <span class="pjs-token pjs-punctuation">:</span> 55vh<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"mask-offset-top"</span> <span class="pjs-token pjs-punctuation">:</span> 5rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"sticky-top"</span> <span class="pjs-token pjs-punctuation">:</span> 45vh<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">"type-size"</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">"title-width"</span> <span class="pjs-token pjs-punctuation">:</span> 40%<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"title-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 8em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"title-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> right<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"gap"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"background-contexts"</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">"selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".background-dark"</span><span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
+      <span class="pjs-token pjs-string">"item-padding-x"</span> <span class="pjs-token pjs-punctuation">:</span> 1em
+    <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> _sticky-list.scss</li>
+<li><strong>Group:</strong> sticky-list</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 26-41</li>
+<li><strong>Lines (code):</strong> 43-63</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">background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">transparent</td>
+<td style="text-align:left">Background color for the entire slider section.</td>
+</tr>
+<tr>
+<td style="text-align:left">margin</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Margin on ends of component (defaults to element margin)</td>
+</tr>
+<tr>
+<td style="text-align:left">mask-offset-bottom</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">55vh</td>
+<td style="text-align:left">The offset for the mask (on bottom)</td>
+</tr>
+<tr>
+<td style="text-align:left">mask-offset-top</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">5rem</td>
+<td style="text-align:left">The offset for the mask (on top)</td>
+</tr>
+<tr>
+<td style="text-align:left">sticky-top</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">45vh</td>
+<td style="text-align:left">When to stick</td>
+</tr>
+<tr>
+<td style="text-align:left">breakpoint</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;medium&quot;</td>
+<td style="text-align:left">The upward breakpoint that this is allowed to be sticky</td>
+</tr>
+<tr>
+<td style="text-align:left">type-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;medium&quot;</td>
+<td style="text-align:left">The typography size to use for title</td>
+</tr>
+<tr>
+<td style="text-align:left">title-width</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">40%</td>
+<td style="text-align:left">The width of the title when this is displayed in columns</td>
+</tr>
+<tr>
+<td style="text-align:left">title-min-width</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">8em</td>
+<td style="text-align:left">The min width for title when displayed in columns</td>
+</tr>
+<tr>
+<td style="text-align:left">title-text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">right</td>
+<td style="text-align:left">Text alignment for title when displayed in columns</td>
+</tr>
+<tr>
+<td style="text-align:left">item-padding-x</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">0</td>
+<td style="text-align:left">Optional padding on the left/right for items</td>
+</tr>
+<tr>
+<td style="text-align:left">gap</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">2rem</td>
+<td style="text-align:left">The gap between title and items when displayed in columns</td>
+</tr>
+<tr>
+<td style="text-align:left">background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">white</td>
+<td style="text-align:left">The background color used for the mask</td>
+</tr>
+<tr>
+<td style="text-align:left">background-contexts</td>
+<td style="text-align:left">List</td>
+<td style="text-align:left"></td>
+<td style="text-align:left">Adjust the background mask color by contextual selectors. Pass List of Maps with (&quot;selector&quot; [parent/contextual selector], &quot;background-color&quot;, &quot;item-padding-x&quot; [optional])</td>
+</tr>
+</tbody>
+</table>
 
     </div>
   </div>