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

package/docs-dev/sass/components/menu-stack/index.html

@@ -4727,33 +4727,35 @@
 </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">"checkbox-area-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"selectable-input-width"</span> <span class="pjs-token pjs-punctuation">:</span> 3em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"nested-indent"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"rule-style"</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-string">"rule-style"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"light"</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"rule-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-separated-margin"</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">"link-separated-rule-style"</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">"toggle-icon-rotate"</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">"compact-link-padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"compact-link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.25em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"label-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">"label-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"label-text-transform"</span> <span class="pjs-token pjs-punctuation">:</span> uppercase<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"label-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">"label-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">"link-separated-margin"</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">"link-separated-rule-style"</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">"link-active-selectors"</span> <span class="pjs-token pjs-punctuation">:</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-string">'[aria-current="page"]'</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> transparent<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-background-color-active"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>219<span class="pjs-token pjs-punctuation">,</span> 219<span class="pjs-token pjs-punctuation">,</span> 219<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>219<span class="pjs-token pjs-punctuation">,</span> 219<span class="pjs-token pjs-punctuation">,</span> 219<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">,</span> 240<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-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">"link-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">"link-color-active"</span> <span class="pjs-token pjs-punctuation">:</span> black<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-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">"link-font-weight"</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">"link-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">"link-icon-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.65em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-icon-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"link-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.2em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.35em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"link-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">"link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.5em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"compact-link-padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"compact-link-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 0.25em<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>
@@ -4761,8 +4763,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 25-53</li>
-<li><strong>Lines (code):</strong> 55-83</li>
+<li><strong>Lines (comments):</strong> 33-63</li>
+<li><strong>Lines (code):</strong> 65-95</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4777,10 +4779,10 @@
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">checkbox-area-width</td>
+<td style="text-align:left">selectable-input-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">3em</td>
-<td style="text-align:left">The width of the checkbox area.</td>
+<td style="text-align:left">The width of the checkbox/radio input</td>
 </tr>
 <tr>
 <td style="text-align:left">link-separated-margin</td>
@@ -4852,7 +4854,13 @@
 <td style="text-align:left">label-type-size</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">false</td>
-<td style="text-align:left">Adjusts the type size of the label.</td>
+<td style="text-align:left">Adjusts the type size of the label. Only uses font-size from type size.</td>
+</tr>
+<tr>
+<td style="text-align:left">label-line-height</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Adjust the label line-height, defaults to typography line-height-dense</td>
 </tr>
 <tr>
 <td style="text-align:left">link-active-selectors</td>
@@ -4909,6 +4917,12 @@
 <td style="text-align:left">The font weight of the menu-stack toggle.</td>
 </tr>
 <tr>
+<td style="text-align:left">label-line-height</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">Adjust the link line-height, defaults to typography line-height-dense</td>
+</tr>
+<tr>
 <td style="text-align:left">link-icon-margin</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.65em</td>
@@ -4954,8 +4968,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 86-89</li>
-<li><strong>Lines (code):</strong> 91-93</li>
+<li><strong>Lines (comments):</strong> 98-101</li>
+<li><strong>Lines (code):</strong> 103-105</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4994,8 +5008,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 110-114</li>
-<li><strong>Lines (code):</strong> 116-244</li>
+<li><strong>Lines (comments):</strong> 122-126</li>
+<li><strong>Lines (code):</strong> 128-261</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5023,8 +5037,8 @@
 <li><strong>File:</strong> _menu-stack.scss</li>
 <li><strong>Group:</strong> menu-stack</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 95-98</li>
-<li><strong>Lines (code):</strong> 100-103</li>
+<li><strong>Lines (comments):</strong> 107-110</li>
+<li><strong>Lines (code):</strong> 112-115</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -4775,6 +4775,7 @@
 <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>
@@ -4782,146 +4783,175 @@
 <td style="text-align:left">arrow-size</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">16px</td>
+<td style="text-align:left">size of the dropdown arrow.</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 popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">border-radius</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">6px</td>
+<td style="text-align:left">Border radius of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">inherit</td>
+<td style="text-align:left">Text color of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">max-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">90vw</td>
+<td style="text-align:left">Max width of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">max-height</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">25rem</td>
+<td style="text-align:left">Max height of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">padding</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">1rem</td>
+<td style="text-align:left">Padding of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">padding-large</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">2rem</td>
+<td style="text-align:left">Padding of the popover if using &quot;--large&quot; or &quot;--large-x&quot; styling.</td>
 </tr>
 <tr>
 <td style="text-align:left">type-size</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">null</td>
+<td style="text-align:left">Font size of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">z-index</td>
 <td style="text-align:left">Number</td>
 <td style="text-align:left">true</td>
+<td style="text-align:left">z-index of the popover.</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 of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">box-shadow-footer</td>
 <td style="text-align:left">CssValue</td>
 <td style="text-align:left">0 0 4px</td>
+<td style="text-align:left">Box shadow of the popover footer.</td>
 </tr>
 <tr>
 <td style="text-align:left">box-shadow-footer-color</td>
 <td style="text-align:left">String</td>
 <td style="text-align:left">&quot;box-shadow&quot;</td>
+<td style="text-align:left">Color of the footer's box shadow.</td>
 </tr>
 <tr>
 <td style="text-align:left">header-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">#ccc</td>
+<td style="text-align:left">Background color of the popover header</td>
 </tr>
 <tr>
 <td style="text-align:left">header-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
+<td style="text-align:left">Text color for the header.</td>
 </tr>
 <tr>
 <td style="text-align:left">header-media-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">black</td>
+<td style="text-align:left">background color for header media.</td>
 </tr>
 <tr>
 <td style="text-align:left">header-padding-y</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.25rem</td>
+<td style="text-align:left">Vertical padding of the header.</td>
 </tr>
 <tr>
 <td style="text-align:left">footer-background-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">#ccc</td>
+<td style="text-align:left">Background color of the footer.</td>
 </tr>
 <tr>
 <td style="text-align:left">footer-color</td>
 <td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
+<td style="text-align:left">Text color of the footer.</td>
 </tr>
 <tr>
 <td style="text-align:left">footer-padding-y</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.25rem</td>
+<td style="text-align:left">Vertical padding of the footer.</td>
 </tr>
 <tr>
 <td style="text-align:left">footer-padding-y-large</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.5rem</td>
+<td style="text-align:left">Vertical padding of the footer if using &quot;--large&quot; or &quot;--large-x&quot; styling.</td>
 </tr>
 <tr>
 <td style="text-align:left">tooltip-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 tooltip.</td>
 </tr>
 <tr>
 <td style="text-align:left">tooltip-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 tooltip.</td>
 </tr>
 <tr>
 <td style="text-align:left">tooltip-max-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">20rem</td>
+<td style="text-align:left">Max width of the tooltip.</td>
 </tr>
 <tr>
 <td style="text-align:left">tooltip-padding</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">0.5rem</td>
+<td style="text-align:left">Padding of the tooltip.</td>
 </tr>
 <tr>
 <td style="text-align:left">tooltip-width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">auto</td>
+<td style="text-align:left">Width of the tooltip.</td>
 </tr>
 <tr>
 <td style="text-align:left">width</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">15rem</td>
+<td style="text-align:left">Width of the popover.</td>
 </tr>
 <tr>
 <td style="text-align:left">width-large</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">30rem</td>
+<td style="text-align:left">Width of the popover if using &quot;--large&quot;.</td>
 </tr>
 <tr>
 <td style="text-align:left">width-large-x</td>
 <td style="text-align:left">Dimension</td>
 <td style="text-align:left">50rem</td>
+<td style="text-align:left">Width of the popover if using &quot;--large-x&quot;.</td>
 </tr>
 </tbody>
 </table>

package/docs-dev/sass/components/pull-quote/index.html

@@ -4764,62 +4764,62 @@
 <tbody>
 <tr>
 <td style="text-align:left">body-line-height</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Number</td>
 <td style="text-align:left">true</td>
 </tr>
 <tr>
 <td style="text-align:left">image-margin-bottom</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Dimension</td>
 <td style="text-align:left">1rem</td>
 </tr>
 <tr>
 <td style="text-align:left">image-margin-top</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Dimension</td>
 <td style="text-align:left">2.5rem</td>
 </tr>
 <tr>
 <td style="text-align:left">name-margin-bottom</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Dimension</td>
 <td style="text-align:left">1rem</td>
 </tr>
 <tr>
 <td style="text-align:left">padding-y</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Dimension</td>
 <td style="text-align:left">2em</td>
 </tr>
 <tr>
 <td style="text-align:left">title-font-style</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">CssValue</td>
 <td style="text-align:left">italic</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-character</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">String</td>
 <td style="text-align:left">&quot;\201c&quot;</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-color</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Color</td>
 <td style="text-align:left">null</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-font-family</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">String</td>
 <td style="text-align:left">&quot;Georgia&quot;</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-font-size</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Dimension</td>
 <td style="text-align:left">3.75em</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-enabled</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Boolean</td>
 <td style="text-align:left">true</td>
 </tr>
 <tr>
 <td style="text-align:left">quote-mark-line-height</td>
-<td style="text-align:left">Map</td>
+<td style="text-align:left">Number</td>
 <td style="text-align:left">0.35</td>
 </tr>
 </tbody>

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

@@ -4737,8 +4737,8 @@
 <li><strong>File:</strong> _vignette.scss</li>
 <li><strong>Group:</strong> vignette</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 12-14</li>
-<li><strong>Lines (code):</strong> 16-19</li>
+<li><strong>Lines (comments):</strong> 12-15</li>
+<li><strong>Lines (code):</strong> 17-20</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -4758,6 +4758,12 @@
 <td style="text-align:left">rgb(0,0,0)</td>
 <td style="text-align:left">Color used for the fade-in of the vignette. Must be actual color not color module palette name</td>
 </tr>
+<tr>
+<td style="text-align:left">image-filter</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">saturate(85%)</td>
+<td style="text-align:left">Filter value placed over image.</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -4774,8 +4780,8 @@
 <li><strong>File:</strong> _vignette.scss</li>
 <li><strong>Group:</strong> vignette</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 21-24</li>
-<li><strong>Lines (code):</strong> 26-28</li>
+<li><strong>Lines (comments):</strong> 22-25</li>
+<li><strong>Lines (code):</strong> 27-29</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4814,8 +4820,8 @@
 <li><strong>File:</strong> _vignette.scss</li>
 <li><strong>Group:</strong> vignette</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 39-41</li>
-<li><strong>Lines (code):</strong> 43-65</li>
+<li><strong>Lines (comments):</strong> 40-42</li>
+<li><strong>Lines (code):</strong> 44-66</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4838,8 +4844,8 @@
 <li><strong>File:</strong> _vignette.scss</li>
 <li><strong>Group:</strong> vignette</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 30-33</li>
-<li><strong>Lines (code):</strong> 35-37</li>
+<li><strong>Lines (comments):</strong> 31-34</li>
+<li><strong>Lines (code):</strong> 36-38</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.11", 
+  "version": "0.1.0-beta.13", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/README.todos

@@ -26,3 +26,4 @@ Daniel Todos:
   ☐ Setup search results page
     ☐ General Node/Page Setup
     ☐ Setup View
+  

package/scss/components/_captioned-figure.scss

@@ -30,6 +30,23 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Boolean} text-alignment-matches [false] Toggles matching alignment.
+/// @prop {Boolean} text-alignment-matches-center-only [true] Toggles matching alignment, but only if center.
+/// @prop {Color} background-color [white] Background color of the component.
+/// @prop {CssValue} box-shadow [true] Box shadow the captioned figure.
+/// @prop {Dimension} margin-bottom [true] Bottom margin of the captioned figure.
+/// @prop {Number} line-height [true] Line height of the captioned figure caption.
+/// @prop {Dimension} caption-padding [0.5em] Padding of the captioned figure caption. 
+/// @prop {Color} color [null] Font color of the captioned figure caption. 
+/// @prop {String} type-size ["small"] Font size of the captioned figure caption. 
+/// @prop {Dimension} caption-max-width [min(100%, 15em)] Max width of the captioned figure caption. 
+/// @prop {Color} caption-background-color [rgba(255,255,255,0.7)] background color of the captioned figure caption. 
+/// @prop {CssValue} caption-backdrop-filter [blur(2px)] Filter of the backdrop of the captioned figure.
+/// @prop {Color} traditional-caption-color [null] Traditional style for font color.
+/// @prop {Color} traditional-caption-background-color [transparent] Traditional style for caption background color.
+/// @prop {Dimension} traditional-caption-padding [0.5em] Traditional style for caption padding.
+/// @prop {Dimension} traditional-caption-max-width [35em] Traditional style for caption max width.
+/// @prop {CssValue} traditional-caption-text-align [right] Traditional style for caption text-align.
 
 $config: (
   "text-alignment-matches" : false,

package/scss/components/_data-table.scss

@@ -24,6 +24,34 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Dimension} cell-padding [(0.5em,)] Padding of the th and td elements.
+/// @prop {CssValue} text-align [left] Text align of the table.
+/// @prop {String} type-size ["small"] Font size of the table.
+/// @prop {Color} background-color [white] Background color of table container.
+/// @prop {Color} header-background-color [#f5f4f4] Background color of the the table header.
+/// @prop {Color} body-background-color [white] Background color of table body.
+/// @prop {Color} footer-background-color [#f3f3f3] Background color of table footer.
+/// @prop {Color} color ["type-secondary"] Font color of the table.
+/// @prop {Color} header-color ["headline"] Font color for the table header.
+/// @prop {Number} line-height [true] Line height for the table.
+/// @prop {Dimension} column-min-width [6em] Min-width of the th element.
+/// @prop {Dimension} first-column-large-min-width [15em] When using "--large-first" style, the min width of the first th element.
+/// @prop {Dimension} border-width [1px] Border width of the table.
+/// @prop {Color} border-color [#dddddd] Border color for the table.
+/// @prop {Color} striped-row-background-color [#eeeeee] Background color for even rows if using "--striped" styling.
+/// @prop {Color} muted-row-background-color [#ccc] Background color for odd rows if using "--striped" styling.
+/// @prop {Color} muted-row-border-color [null] Border color for odd rows if using "--striped" styling.
+/// @prop {Color} highlighted-row-background-color [#ccc] Background color row if using "__row-highlighted" styling.
+/// @prop {Color} highlighted-row-border-color [null]  Border color row if using "__row-highlighted" styling.
+/// @prop {Dimension} large-header-cell-padding-y [1em]  Vertical padding of header if using "--large-header" styling.
+/// @prop {String} caption-type-size ["large"] Type size of table caption.
+/// @prop {Color} caption-background-color [null] Background color of table caption.
+/// @prop {CssValue} caption-font-weight [bold] Font weight of caption.
+/// @prop {CssBalue} caption-border-bottom [null] Bottom border of the caption.
+/// @prop {Dimension} caption-margin [(0,)] Margin of the caption.
+/// @prop {Dimension} caption-padding [(0.65em 0)] Padding of the caption.
+/// @prop {CssValue} caption-text-align [left] Text align of the caption.
+/// @prop {String} extra-selector [".wysiwyg table"] Additional selectors to include table styling.
 
 $config: (
   "cell-padding" : (0.5em,),

package/scss/components/_hero.scss

@@ -15,6 +15,15 @@
 /// Module Settings
 /// @type Map
 /// @prop {Map} extra-split-ratios  [wide 70/30] 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]) 
+/// @prop {String} breakpoint ["medium"] At what breakpoint the hero goes to small screen styling.
+/// @prop {Dimension} height [100vh] Height of the hero.
+/// @prop {Dimension} height-compact [40vh] Height of the hero when using the "--compact" styling.
+/// @prop {Dimension} graphic-height-stacked [60vh] Height of the graphic.
+/// @prop {Dimension} content-max-width [40rem] Max width of the content.
+/// @prop {Dimension} content-padding-top [3rem] Top padding of the content.
+/// @prop {Dimension} content-padding-bottom [3rem] Bottom padding of the content.
+/// @prop {CssValue} text-align [center] Text align of the content.
+
 
 $config: (
   "breakpoint" : "medium",