@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.12

package/docs-dev/demos/data-table/index.html

@@ -4728,46 +4728,46 @@
   </tfoot>
 </table>
 <h2 class="h2">Complex Table</h2>
-<table class="data-table" id="dt-57">
+<table class="data-table" id="dt-7">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-57-type" rowspan="2">Type</th>
-      <th id="dt-57-group" colspan="2">Group</th>
-      <th id="dt-57-details" colspan="2">Details</th>
-      <th id="dt-57-id" rowspan="2">Id</th>
+      <th id="dt-7-type" rowspan="2">Type</th>
+      <th id="dt-7-group" colspan="2">Group</th>
+      <th id="dt-7-details" colspan="2">Details</th>
+      <th id="dt-7-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-57-group" id="dt-57-primary">Primary</th>
-      <th headers="dt-57-group" id="dt-57-secondary">Secondary</th>
-      <th headers="dt-57-details" id="dt-57-before">Before Task</th>
-      <th headers="dt-57-details" id="dt-57-after">After Task</th>
+      <th headers="dt-7-group" id="dt-7-primary">Primary</th>
+      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
+      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
+      <th headers="dt-7-details" id="dt-7-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-57-type dt-57-r1" id="dt-57-r1">Default</th>
-      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-57-group dt-57-primary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-group dt-57-secondary dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-before dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-details dt-57-after dt-57-r1">Lorem Ipsum</td>
-      <td headers="dt-57-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/menu-stack/index.html

@@ -4753,49 +4753,49 @@
 <div class="menu-stack form-theme">
   <ul class="menu-stack__list">
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-1">
         <label for="cb-1"> Example Item that is very long and will wrap in menu </label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-2">
         <label for="cb-2">Example Item 2</label>
       </div>
     </li>
     <li class="menu-stack__item menu-stack__item--separator-before">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-3">
         <label for="cb-3">Example Item 3</label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-4">
         <label for="cb-4">Example Item 4</label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-5">
         <label for="cb-5">Example Item 5</label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-6">
         <label for="cb-6">Example Item 6</label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-7">
         <label for="cb-7">Example Item 7</label>
       </div>
     </li>
     <li class="menu-stack__item">
-      <div class="menu-stack__checkbox">
+      <div class="menu-stack__selectable">
         <input type="checkbox" id="cb-8">
         <label for="cb-8">Example Item 8</label>
       </div>

package/docs-dev/sass/components/captioned-figure/index.html

@@ -4752,10 +4752,125 @@
 <li><strong>File:</strong> _captioned-figure.scss</li>
 <li><strong>Group:</strong> captioned-figure</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 31-32</li>
-<li><strong>Lines (code):</strong> 34-52</li>
+<li><strong>Lines (comments):</strong> 31-49</li>
+<li><strong>Lines (code):</strong> 51-69</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">text-alignment-matches</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">false</td>
+<td style="text-align:left">Toggles matching alignment.</td>
+</tr>
+<tr>
+<td style="text-align:left">text-alignment-matches-center-only</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Toggles matching alignment, but only if center.</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">Background color of the component.</td>
+</tr>
+<tr>
+<td style="text-align:left">box-shadow</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Box shadow the captioned figure.</td>
+</tr>
+<tr>
+<td style="text-align:left">margin-bottom</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Bottom margin of the captioned figure.</td>
+</tr>
+<tr>
+<td style="text-align:left">line-height</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Line height of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">0.5em</td>
+<td style="text-align:left">Padding of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Font color of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">type-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;small&quot;</td>
+<td style="text-align:left">Font size of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-max-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">min(100%, 15em)</td>
+<td style="text-align:left">Max width of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">rgba(255,255,255,0.7)</td>
+<td style="text-align:left">background color of the captioned figure caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-backdrop-filter</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">blur(2px)</td>
+<td style="text-align:left">Filter of the backdrop of the captioned figure.</td>
+</tr>
+<tr>
+<td style="text-align:left">traditional-caption-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Traditional style for font color.</td>
+</tr>
+<tr>
+<td style="text-align:left">traditional-caption-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">transparent</td>
+<td style="text-align:left">Traditional style for caption background color.</td>
+</tr>
+<tr>
+<td style="text-align:left">traditional-caption-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">0.5em</td>
+<td style="text-align:left">Traditional style for caption padding.</td>
+</tr>
+<tr>
+<td style="text-align:left">traditional-caption-max-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">35em</td>
+<td style="text-align:left">Traditional style for caption max width.</td>
+</tr>
+<tr>
+<td style="text-align:left">traditional-caption-text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">right</td>
+<td style="text-align:left">Traditional style for caption text-align.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -4770,8 +4885,8 @@
 <li><strong>File:</strong> _captioned-figure.scss</li>
 <li><strong>Group:</strong> captioned-figure</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 54-57</li>
-<li><strong>Lines (code):</strong> 59-61</li>
+<li><strong>Lines (comments):</strong> 71-74</li>
+<li><strong>Lines (code):</strong> 76-78</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4810,8 +4925,8 @@
 <li><strong>File:</strong> _captioned-figure.scss</li>
 <li><strong>Group:</strong> captioned-figure</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 73-75</li>
-<li><strong>Lines (code):</strong> 77-173</li>
+<li><strong>Lines (comments):</strong> 90-92</li>
+<li><strong>Lines (code):</strong> 94-190</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4834,8 +4949,8 @@
 <li><strong>File:</strong> _captioned-figure.scss</li>
 <li><strong>Group:</strong> captioned-figure</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 63-66</li>
-<li><strong>Lines (code):</strong> 68-71</li>
+<li><strong>Lines (comments):</strong> 80-83</li>
+<li><strong>Lines (code):</strong> 85-88</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -4763,10 +4763,191 @@
 <li><strong>File:</strong> _data-table.scss</li>
 <li><strong>Group:</strong> data-table</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 25-26</li>
-<li><strong>Lines (code):</strong> 28-57</li>
+<li><strong>Lines (comments):</strong> 25-54</li>
+<li><strong>Lines (code):</strong> 56-85</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">cell-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(0.5em,)</td>
+<td style="text-align:left">Padding of the th and td elements.</td>
+</tr>
+<tr>
+<td style="text-align:left">text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">left</td>
+<td style="text-align:left">Text align of the table.</td>
+</tr>
+<tr>
+<td style="text-align:left">type-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;small&quot;</td>
+<td style="text-align:left">Font size of the table.</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">Background color of table container.</td>
+</tr>
+<tr>
+<td style="text-align:left">header-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#f5f4f4</td>
+<td style="text-align:left">Background color of the the table header.</td>
+</tr>
+<tr>
+<td style="text-align:left">body-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">white</td>
+<td style="text-align:left">Background color of table body.</td>
+</tr>
+<tr>
+<td style="text-align:left">footer-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#f3f3f3</td>
+<td style="text-align:left">Background color of table footer.</td>
+</tr>
+<tr>
+<td style="text-align:left">color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">&quot;type-secondary&quot;</td>
+<td style="text-align:left">Font color of the table.</td>
+</tr>
+<tr>
+<td style="text-align:left">header-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">&quot;headline&quot;</td>
+<td style="text-align:left">Font color for the table header.</td>
+</tr>
+<tr>
+<td style="text-align:left">line-height</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Line height for the table.</td>
+</tr>
+<tr>
+<td style="text-align:left">column-min-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">6em</td>
+<td style="text-align:left">Min-width of the th element.</td>
+</tr>
+<tr>
+<td style="text-align:left">first-column-large-min-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">15em</td>
+<td style="text-align:left">When using &quot;--large-first&quot; style, the min width of the first th element.</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">Border width of the table.</td>
+</tr>
+<tr>
+<td style="text-align:left">border-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#dddddd</td>
+<td style="text-align:left">Border color for the table.</td>
+</tr>
+<tr>
+<td style="text-align:left">striped-row-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#eeeeee</td>
+<td style="text-align:left">Background color for even rows if using &quot;--striped&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">muted-row-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#ccc</td>
+<td style="text-align:left">Background color for odd rows if using &quot;--striped&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">muted-row-border-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Border color for odd rows if using &quot;--striped&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">highlighted-row-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">#ccc</td>
+<td style="text-align:left">Background color row if using &quot;__row-highlighted&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">highlighted-row-border-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Border color row if using &quot;__row-highlighted&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">large-header-cell-padding-y</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">1em</td>
+<td style="text-align:left">Vertical padding of header if using &quot;--large-header&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-type-size</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;large&quot;</td>
+<td style="text-align:left">Type size of table caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-background-color</td>
+<td style="text-align:left">Color</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Background color of table caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-font-weight</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">bold</td>
+<td style="text-align:left">Font weight of caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-border-bottom</td>
+<td style="text-align:left">CssBalue</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Bottom border of the caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-margin</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(0,)</td>
+<td style="text-align:left">Margin of the caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-padding</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">(0.65em 0)</td>
+<td style="text-align:left">Padding of the caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">caption-text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">left</td>
+<td style="text-align:left">Text align of the caption.</td>
+</tr>
+<tr>
+<td style="text-align:left">extra-selector</td>
+<td style="text-align:left">String</td>
+<td style="text-align:left">&quot;.wysiwyg table&quot;</td>
+<td style="text-align:left">Additional selectors to include table styling.</td>
+</tr>
+</tbody>
+</table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
 <h3 id="mixin-set" tabindex="-1">set()</h3>
@@ -4781,8 +4962,8 @@
 <li><strong>File:</strong> _data-table.scss</li>
 <li><strong>Group:</strong> data-table</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 59-62</li>
-<li><strong>Lines (code):</strong> 64-66</li>
+<li><strong>Lines (comments):</strong> 87-90</li>
+<li><strong>Lines (code):</strong> 92-94</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4821,8 +5002,8 @@
 <li><strong>File:</strong> _data-table.scss</li>
 <li><strong>Group:</strong> data-table</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 78-80</li>
-<li><strong>Lines (code):</strong> 82-189</li>
+<li><strong>Lines (comments):</strong> 106-108</li>
+<li><strong>Lines (code):</strong> 110-217</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4845,8 +5026,8 @@
 <li><strong>File:</strong> _data-table.scss</li>
 <li><strong>Group:</strong> data-table</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 68-71</li>
-<li><strong>Lines (code):</strong> 73-76</li>
+<li><strong>Lines (comments):</strong> 96-99</li>
+<li><strong>Lines (code):</strong> 101-104</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -4745,8 +4745,8 @@
 <li><strong>File:</strong> _hero.scss</li>
 <li><strong>Group:</strong> hero</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 15-17</li>
-<li><strong>Lines (code):</strong> 19-31</li>
+<li><strong>Lines (comments):</strong> 15-25</li>
+<li><strong>Lines (code):</strong> 27-40</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4766,6 +4766,54 @@
 <td style="text-align:left">wide 70/30</td>
 <td style="text-align:left">A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content])</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">At what breakpoint the hero goes to small screen styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">height</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">100vh</td>
+<td style="text-align:left">Height of the hero.</td>
+</tr>
+<tr>
+<td style="text-align:left">height-compact</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">40vh</td>
+<td style="text-align:left">Height of the hero when using the &quot;--compact&quot; styling.</td>
+</tr>
+<tr>
+<td style="text-align:left">graphic-height-stacked</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">60vh</td>
+<td style="text-align:left">Height of the graphic.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-max-width</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">40rem</td>
+<td style="text-align:left">Max width of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-padding-top</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3rem</td>
+<td style="text-align:left">Top padding of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">content-padding-bottom</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">3rem</td>
+<td style="text-align:left">Bottom padding of the content.</td>
+</tr>
+<tr>
+<td style="text-align:left">text-align</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">center</td>
+<td style="text-align:left">Text align of the content.</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -4782,8 +4830,8 @@
 <li><strong>File:</strong> _hero.scss</li>
 <li><strong>Group:</strong> hero</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 33-36</li>
-<li><strong>Lines (code):</strong> 38-40</li>
+<li><strong>Lines (comments):</strong> 42-45</li>
+<li><strong>Lines (code):</strong> 47-49</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4822,8 +4870,8 @@
 <li><strong>File:</strong> _hero.scss</li>
 <li><strong>Group:</strong> hero</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 51-53</li>
-<li><strong>Lines (code):</strong> 55-183</li>
+<li><strong>Lines (comments):</strong> 60-62</li>
+<li><strong>Lines (code):</strong> 64-192</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4846,8 +4894,8 @@
 <li><strong>File:</strong> _hero.scss</li>
 <li><strong>Group:</strong> hero</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 42-45</li>
-<li><strong>Lines (code):</strong> 47-49</li>
+<li><strong>Lines (comments):</strong> 51-54</li>
+<li><strong>Lines (code):</strong> 56-58</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>