@ulu/frontend 0.1.0-beta.109 → 0.1.0-beta.110

package/docs-dev/sass/components/accordion/index.html

@@ -5819,34 +5819,38 @@
 </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">"background-color"</span><span class="pjs-token pjs-punctuation">:</span>            <span class="pjs-token pjs-string">"background"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"background-color-open"</span><span class="pjs-token pjs-punctuation">:</span>       white<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-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-string">"border-radius"</span><span class="pjs-token pjs-punctuation">:</span>               0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"border-width"</span><span class="pjs-token pjs-punctuation">:</span>                1px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                  none<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin"</span><span class="pjs-token pjs-punctuation">:</span>                      3rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-between"</span><span class="pjs-token pjs-punctuation">:</span>              0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span>                   1.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"padding-y"</span><span class="pjs-token pjs-punctuation">:</span>                   1.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-background-color"</span><span class="pjs-token pjs-punctuation">:</span>       transparent<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-background-color-hover"</span><span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-border-radius"</span><span class="pjs-token pjs-punctuation">:</span>          50%<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-color"</span><span class="pjs-token pjs-punctuation">:</span>                  <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-color-hover"</span><span class="pjs-token pjs-punctuation">:</span>            <span class="pjs-token pjs-string">"link-hover"</span><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.5rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-size"</span><span class="pjs-token pjs-punctuation">:</span>                   auto<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"icon-stroke-width"</span><span class="pjs-token pjs-punctuation">:</span>           0.15em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"summary-background-color"</span><span class="pjs-token pjs-punctuation">:</span>    #f6f6f6<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"summary-color"</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">"background-color"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-string">"background"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"background-color-open"</span><span class="pjs-token pjs-punctuation">:</span>          white<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"border-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-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">"border-width"</span><span class="pjs-token pjs-punctuation">:</span>                   1px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">:</span>                     none<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-punctuation">(</span>1.5em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-between"</span><span class="pjs-token pjs-punctuation">:</span>                 0<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"padding-x"</span><span class="pjs-token pjs-punctuation">:</span>                      1.25em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"padding-y"</span><span class="pjs-token pjs-punctuation">:</span>                      1.25em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-background-color"</span><span class="pjs-token pjs-punctuation">:</span>          transparent<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-background-color-hover"</span><span class="pjs-token pjs-punctuation">:</span>    transparent<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-border-radius"</span><span class="pjs-token pjs-punctuation">:</span>             50%<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-color"</span><span class="pjs-token pjs-punctuation">:</span>                     <span class="pjs-token pjs-string">"link"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-color-hover"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-string">"link-hover"</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-font-size"</span><span class="pjs-token pjs-punctuation">:</span>                 1em<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-size"</span><span class="pjs-token pjs-punctuation">:</span>                      auto<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"icon-stroke-width"</span><span class="pjs-token pjs-punctuation">:</span>              0.15em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"summary-background-color"</span><span class="pjs-token pjs-punctuation">:</span>       #f6f6f6<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"summary-color"</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">"summary-background-color-hover"</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">"summary-color-hover"</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">"summary-line-height"</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">"summary-padding-y"</span><span class="pjs-token pjs-punctuation">:</span>           1rem<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"summary-type-size"</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-string">"transparent-padding-x"</span><span class="pjs-token pjs-punctuation">:</span>       0<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"transparent-padding-y"</span><span class="pjs-token pjs-punctuation">:</span>       1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"borderless-margin-between"</span> <span class="pjs-token pjs-punctuation">:</span>  0.5rem
+  <span class="pjs-token pjs-string">"summary-color-hover"</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">"summary-line-height"</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">"summary-padding-y"</span><span class="pjs-token pjs-punctuation">:</span>              1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"summary-type-size"</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-string">"summary-border-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">"summary-border-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-string">"summary-border-width"</span><span class="pjs-token pjs-punctuation">:</span>           1px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"transparent-content-padding"</span><span class="pjs-token pjs-punctuation">:</span>    <span class="pjs-token pjs-punctuation">(</span>0.25em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"borderless-margin-between"</span><span class="pjs-token pjs-punctuation">:</span>      0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"active-selector"</span><span class="pjs-token pjs-punctuation">:</span>                <span class="pjs-token pjs-string">".is-active"</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5854,8 +5858,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 16-44</li>
-<li><strong>Lines (code):</strong> 46-75</li>
+<li><strong>Lines (comments):</strong> 25-58</li>
+<li><strong>Lines (code):</strong> 60-93</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5872,44 +5876,44 @@
 <tr>
 <td style="text-align:left">background-color</td>
 <td style="text-align:left">Color</td>
-<td style="text-align:left">accordion-background</td>
+<td style="text-align:left">background</td>
 <td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
 </tr>
 <tr>
 <td style="text-align:left">background-color-open</td>
 <td style="text-align:left">Color</td>
-<td style="text-align:left">accordion-background-open</td>
-<td style="text-align:left">This is the background color of the accordion before it is expanded. This will change the background color of the accordion's summary as well as the details.</td>
+<td style="text-align:left">white</td>
+<td style="text-align:left">This is the background color of the accordion when it is expanded. This will change the background color of the accordion's summary as well as the details.</td>
 </tr>
 <tr>
 <td style="text-align:left">border-color</td>
 <td style="text-align:left">String</td>
-<td style="text-align:left">&quot;rule&quot;</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">&quot;rule-light&quot;</td>
+<td style="text-align:left">The color of the accordion border.</td>
 </tr>
 <tr>
 <td style="text-align:left">border-radius</td>
+<td style="text-align:left">Boolean</td>
 <td style="text-align:left">Number</td>
-<td style="text-align:left">0</td>
-<td style="text-align:left">This applies a rounding of edges for the accordion. If there are multiple accordions in a stack, this will only apply to the top of the first accordion and the bottom of the last accordion.</td>
+<td style="text-align:left">true</td>
 </tr>
 <tr>
 <td style="text-align:left">border-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1px</td>
-<td style="text-align:left">The width of the borders of the accordions</td>
+<td style="text-align:left">The width of the borders of the accordions.</td>
 </tr>
 <tr>
 <td style="text-align:left">box-shadow</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">none</td>
-<td style="text-align:left">Adds a box shadow to accordion container</td>
+<td style="text-align:left">Adds a box shadow to accordion container.</td>
 </tr>
 <tr>
 <td style="text-align:left">margin</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">3rem</td>
-<td style="text-align:left">text This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.</td>
+<td style="text-align:left">(1.5em 0)</td>
+<td style="text-align:left">This is the margin above and below the accordion. Multiple Accordions will stack. See margin-between below.</td>
 </tr>
 <tr>
 <td style="text-align:left">margin-between</td>
@@ -5921,13 +5925,13 @@
 <td style="text-align:left">padding-x</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1.5em</td>
-<td style="text-align:left">Singular value for the left and right padding</td>
+<td style="text-align:left">Singular value for the left and right padding.</td>
 </tr>
 <tr>
 <td style="text-align:left">padding-y</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1.5em</td>
-<td style="text-align:left">Singular value for the top and bottom padding</td>
+<td style="text-align:left">Singular value for the top and bottom padding.</td>
 </tr>
 <tr>
 <td style="text-align:left">icon-background-color</td>
@@ -5962,10 +5966,16 @@
 <tr>
 <td style="text-align:left">icon-font-size</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">1.5rem</td>
+<td style="text-align:left">1em</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 to the left of the icon.</td>
+</tr>
+<tr>
 <td style="text-align:left">icon-size</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">auto</td>
@@ -5975,13 +5985,19 @@
 <td style="text-align:left">icon-stroke-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.15em</td>
-<td style="text-align:left"></td>
+<td style="text-align:left">The stroke width of the icon.</td>
 </tr>
 <tr>
 <td style="text-align:left">summary-background-color</td>
 <td style="text-align:left">Color</td>
+<td style="text-align:left">#f6f6f6</td>
+<td style="text-align:left">The background color for the summary (toggle button) of the accordion.</td>
+</tr>
+<tr>
+<td style="text-align:left">summary-background-color-hover</td>
+<td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
-<td style="text-align:left">The background color for the summary (toggle button) of the accordion</td>
+<td style="text-align:left">The background color for the summary (toggle button) of the accordion when hovered.</td>
 </tr>
 <tr>
 <td style="text-align:left">summary-color</td>
@@ -6004,32 +6020,50 @@
 <tr>
 <td style="text-align:left">summary-padding-y</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">1rem</td>
+<td style="text-align:left">1em</td>
 <td style="text-align:left">The vertical padding of the summary.</td>
 </tr>
 <tr>
 <td style="text-align:left">summary-type-size</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">false</td>
-<td style="text-align:left">The size of the text in the accordion summary.</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">&quot;large&quot;</td>
 </tr>
 <tr>
-<td style="text-align:left">transparent-padding-y</td>
+<td style="text-align:left">summary-border-enabled</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Whether the summary has a border when the accordion is open.</td>
+</tr>
+<tr>
+<td style="text-align:left">summary-border-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">rule-light</td>
+<td style="text-align:left">The color of the summary border.</td>
+</tr>
+<tr>
+<td style="text-align:left">summary-border-width</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">1em</td>
-<td style="text-align:left">The upper and lower padding of the transparent summary.</td>
+<td style="text-align:left">1px</td>
+<td style="text-align:left">The width of the summary border.</td>
 </tr>
 <tr>
-<td style="text-align:left">transparent-padding-x</td>
+<td style="text-align:left">transparent-content-padding</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">0</td>
-<td style="text-align:left">The upper and lower padding of the transparent summary.</td>
+<td style="text-align:left">(0.25em 0)</td>
+<td style="text-align:left">The padding of the content area for transparent accordions.</td>
 </tr>
 <tr>
 <td style="text-align:left">borderless-margin-between</td>
 <td style="text-align:left">Dimension</td>
-<td style="text-align:left">0.5rem</td>
-<td style="text-align:left">Margin between accordions when using no-border modiifier</td>
+<td style="text-align:left">0.5em</td>
+<td style="text-align:left">Margin between accordions when using no-border modifier.</td>
+</tr>
+<tr>
+<td style="text-align:left">active-selector</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">'.is-active'</td>
+<td style="text-align:left">The selector used for the active state of a non-<details> accordion.</details></td>
 </tr>
 </tbody>
 </table>
@@ -6047,8 +6081,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 77-80</li>
-<li><strong>Lines (code):</strong> 82-84</li>
+<li><strong>Lines (comments):</strong> 95-98</li>
+<li><strong>Lines (code):</strong> 100-102</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -6087,8 +6121,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 95-98</li>
-<li><strong>Lines (code):</strong> 100-231</li>
+<li><strong>Lines (comments):</strong> 114-117</li>
+<li><strong>Lines (code):</strong> 119-262</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -6115,8 +6149,8 @@
 <li><strong>File:</strong> _accordion.scss</li>
 <li><strong>Group:</strong> accordion</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 86-89</li>
-<li><strong>Lines (code):</strong> 91-93</li>
+<li><strong>Lines (comments):</strong> 104-107</li>
+<li><strong>Lines (code):</strong> 109-112</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/docs-dev/sass/core/typography/index.html

@@ -5794,6 +5794,9 @@
                     <li><a href="#mixin-font-size-responsive">font-size-responsive()</a>
             		</li>
 
+                    <li><a href="#mixin-optional-size">optional-size()</a>
+            		</li>
+
                     <li><a href="#mixin-size">size()</a>
             		</li>
                 </ol>
@@ -6296,6 +6299,54 @@
 </tbody>
 </table>
 <div class="sassdoc-item-header">
+<h3 id="mixin-optional-size" tabindex="-1">optional-size()</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
+  </div>
+</div>
+<p>Output an optional typography size</p>
+<ul>
+<li>If $name is not a string (ie. null, etc) no size will be output</li>
+<li>If the size is not defined no size will be output</li>
+</ul>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _typography.scss</li>
+<li><strong>Group:</strong> typography</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 310-314</li>
+<li><strong>Lines (code):</strong> 316-320</li>
+</ul>
+</details>
+<h4 id="parameters-4" 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>*</code></td>
+<td style="text-align:left">Size name</td>
+</tr>
+<tr>
+<td style="text-align:left">$args...</td>
+<td style="text-align:left"><code>*</code></td>
+<td style="text-align:left">All args are passed as-is to size() mixin</td>
+</tr>
+</tbody>
+</table>
+<h4 id="require-2" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/button/#mixin-size">size()</a></li>
+<li><a href="/frontend/sass/core/typography/#function-has-size">has-size()</a></li>
+</ul>
+<div class="sassdoc-item-header">
 <h3 id="mixin-size" tabindex="-1">size()</h3>
   <div class="sassdoc-item-header__labels">
     <span class="tag tag--primary"><strong>Mixin</strong></span>
@@ -6308,11 +6359,11 @@
 <li><strong>File:</strong> _typography.scss</li>
 <li><strong>Group:</strong> typography</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 309-312</li>
-<li><strong>Lines (code):</strong> 314-355</li>
+<li><strong>Lines (comments):</strong> 322-325</li>
+<li><strong>Lines (code):</strong> 327-368</li>
 </ul>
 </details>
-<h4 id="parameters-4" tabindex="-1">Parameters</h4>
+<h4 id="parameters-5" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6339,7 +6390,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-2" tabindex="-1">Require</h4>
+<h4 id="require-3" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/typography/#mixin-font-size-responsive">font-size-responsive()</a></li>
 <li><a href="/frontend/sass/core/breakpoint/#function-get-size">get-size()</a></li>
@@ -6365,7 +6416,7 @@
 <li><strong>Lines (code):</strong> 80-82</li>
 </ul>
 </details>
-<h4 id="parameters-5" tabindex="-1">Parameters</h4>
+<h4 id="parameters-6" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6387,7 +6438,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-3" tabindex="-1">Require</h4>
+<h4 id="require-4" tabindex="-1">Require</h4>
 <ul>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
@@ -6409,7 +6460,7 @@
 <li><strong>Lines (code):</strong> 88-90</li>
 </ul>
 </details>
-<h4 id="parameters-6" tabindex="-1">Parameters</h4>
+<h4 id="parameters-7" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6441,7 +6492,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-4" tabindex="-1">Require</h4>
+<h4 id="require-5" tabindex="-1">Require</h4>
 <ul>
 <li>ratio-scale-size()</li>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
@@ -6463,7 +6514,7 @@
 <li><strong>Lines (code):</strong> 97-99</li>
 </ul>
 </details>
-<h4 id="parameters-7" tabindex="-1">Parameters</h4>
+<h4 id="parameters-8" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6499,7 +6550,7 @@
 <ul>
 <li>Setup breakpoints</li>
 </ul>
-<h4 id="require-5" tabindex="-1">Require</h4>
+<h4 id="require-6" tabindex="-1">Require</h4>
 <ul>
 <li>ratio-scale-size()</li>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
@@ -6521,7 +6572,7 @@
 <li><strong>Lines (code):</strong> 105-111</li>
 </ul>
 </details>
-<h4 id="parameters-8" tabindex="-1">Parameters</h4>
+<h4 id="parameters-9" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6553,7 +6604,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-6" tabindex="-1">Require</h4>
+<h4 id="require-7" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
@@ -6574,7 +6625,7 @@
 <li><strong>Lines (code):</strong> 118-125</li>
 </ul>
 </details>
-<h4 id="parameters-9" tabindex="-1">Parameters</h4>
+<h4 id="parameters-10" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6611,7 +6662,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-7" tabindex="-1">Require</h4>
+<h4 id="require-8" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
@@ -6637,7 +6688,7 @@
 <li><strong>Lines (code):</strong> 144-158</li>
 </ul>
 </details>
-<h4 id="parameters-10" tabindex="-1">Parameters</h4>
+<h4 id="parameters-11" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6664,7 +6715,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-8" tabindex="-1">Require</h4>
+<h4 id="require-9" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
@@ -6704,7 +6755,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-9" tabindex="-1">Require</h4>
+<h4 id="require-10" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/typography/#function-new-size">new-size()</a></li>
 <li><a href="/frontend/sass/core/typography/#function-scale">scale()</a></li>
@@ -6727,7 +6778,7 @@
 <li><strong>Lines (code):</strong> 223-225</li>
 </ul>
 </details>
-<h4 id="parameters-11" tabindex="-1">Parameters</h4>
+<h4 id="parameters-12" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6757,7 +6808,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-10" tabindex="-1">Require</h4>
+<h4 id="require-11" tabindex="-1">Require</h4>
 <ul>
 <li>require-map-get()</li>
 <li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
@@ -6779,7 +6830,7 @@
 <li><strong>Lines (code):</strong> 231-233</li>
 </ul>
 </details>
-<h4 id="parameters-12" tabindex="-1">Parameters</h4>
+<h4 id="parameters-13" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6809,7 +6860,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-11" tabindex="-1">Require</h4>
+<h4 id="require-12" tabindex="-1">Require</h4>
 <ul>
 <li>map-has()</li>
 <li><a href="/frontend/sass/core/breakpoint/#variable-sizes">$sizes</a></li>
@@ -6831,7 +6882,7 @@
 <li><strong>Lines (code):</strong> 239-253</li>
 </ul>
 </details>
-<h4 id="parameters-13" tabindex="-1">Parameters</h4>
+<h4 id="parameters-14" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6857,7 +6908,7 @@
 <ul>
 <li>ULU: Unable to convert to unitless line-height for: #{ $line-height }</li>
 </ul>
-<h4 id="require-12" tabindex="-1">Require</h4>
+<h4 id="require-13" tabindex="-1">Require</h4>
 <ul>
 <li>strip-unit()</li>
 <li><a href="/frontend/sass/core/typography/#function-rem">rem()</a></li>
@@ -6879,7 +6930,7 @@
 <li><strong>Lines (code):</strong> 259-285</li>
 </ul>
 </details>
-<h4 id="parameters-14" tabindex="-1">Parameters</h4>
+<h4 id="parameters-15" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6901,7 +6952,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-13" tabindex="-1">Require</h4>
+<h4 id="require-14" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 <li><a href="/frontend/sass/core/typography/#function-unitless-line-height">unitless-line-height()</a></li>
@@ -6927,7 +6978,7 @@
 <li><strong>Lines (code):</strong> 292-299</li>
 </ul>
 </details>
-<h4 id="parameters-15" tabindex="-1">Parameters</h4>
+<h4 id="parameters-16" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
@@ -6949,7 +7000,7 @@
 </tr>
 </tbody>
 </table>
-<h4 id="require-14" tabindex="-1">Require</h4>
+<h4 id="require-15" tabindex="-1">Require</h4>
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>