@ulu/frontend 0.1.0-beta.7 → 0.1.0-beta.8

package/CHANGELOG.md

@@ -1,9 +1,13 @@
 # Change Log
 
+## Version 0.1.0-beta.8
+
+- Update "scss/components/data-table" to have border and no margin on caption by default, add caption config properties (caption-text-align, caption-background-color)
+
 ## Version 0.1.0-beta.7
 
-- Add "list-inline" component
-- Update "list-lines" component to have adjustable base selector
+- Add "scss/components/list-inline" component
+- Update "scss/components/list-lines" component to have adjustable base selector
 
 ## Version 0.1.0-beta.6
 

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

@@ -4737,7 +4737,7 @@
       <p>The grid is for page layout, it provides different column sizes at each of the configured breakpoints.</p>
 <p>On the smallest size the grid columns will span 100%. The grid is setup using two attributes, data-grid=&quot;&quot; for the parent grid container and data-grid-item=&quot;&quot; for each grid column. The grid uses a script to set position classes, which are used for rule placement since the grid and reflow at different breakpoints.</p>
 <h2 id="options" tabindex="-1">Options</h2>
-<p></p><table class="data-table options-table">
+<table class="data-table options-table">
 <caption> Options for 'data-grid'</caption>
 <thead>
 <tr>
@@ -4746,190 +4746,130 @@
 <th>Description/Example</th>
 </tr>
 </thead>
-<tbody><p></p>
-<p><tr>
+<tbody>
+<tr>
 <td><strong>columns</strong></td>
 <td><strong>12</strong></td>
 <td>
-<p v-if="item.description">
-Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;columns: 12&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
+<p class="options-table__example"><code>&lt;div data-grid="columns: 12"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>justify</strong></td>
 <td><strong>(center|end)</strong></td>
 <td>
-<p v-if="item.description">
-Allows you to justify the columns (horizontal alignment). The defualt is start (left aligned)
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., justify: center&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Allows you to justify the columns (horizontal alignment). The defualt is start (left aligned)</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., justify: center"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>align</strong></td>
 <td><strong>(center|start|end|stretch-end|stretch-center)</strong></td>
 <td>
-<p v-if="item.description">
-Allows you to align the columns (vertical alignment within row). The defualt is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., align: center&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Allows you to align the columns (vertical alignment within row). The defualt is stretch start. Note using stretch-end or stretch-center will stretch all columns to be the same height but will align the columns content to the end or center.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., align: center"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>gutters</strong></td>
 <td><strong>false</strong></td>
 <td>
-<p v-if="item.description">
-You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., gutters: false&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">You can remove the gutters between columns by adding this setting. The grid shows the default gutters size by default.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., gutters: false"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>gutters-row</strong></td>
 <td><strong>(true|top|bottom|fit)</strong></td>
 <td>
-<p v-if="item.description">
-If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., gutters-row: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">If set to 'top' gutters will be between items starting at the top including the first row (so it makes space above the first grid row. Bottom works the same way but on the bottom. True adds gutters between rows and to the top and bottom of the first/last grid row. Fit will only put gutters between the rows.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., gutters-row: true"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>gutter-scale</strong></td>
 <td><strong>[scale key]</strong></td>
 <td>
-<p v-if="item.description">
-No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., gutter-scale: large&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">No alternated scales are configured for this site. Allows for different gutter scales to be used with grid. Requires setting up the scales when you configure/create the grid.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., gutter-scale: large"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-row</strong></td>
 <td><strong>(top|bottom|between)</strong></td>
 <td>
-<p v-if="item.description">
-Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Sets rules (dividers) between rows. Top adds rules to the rows top edge. Bottom adds rules to the rows bottom edge. Between adds rules between rows but not on top or bottom.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row: true"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-row-style</strong></td>
 <td><strong>[style key]</strong></td>
 <td>
-<p v-if="item.description">
-If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row-style: light&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row-style: light"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-row-align</strong></td>
 <td><strong>(gutter)</strong></td>
 <td>
-<p v-if="item.description">
-The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row-align: gutter&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">The default (without this set), will align to the outer edge of the grid item. If this is set to 'gutter' it will align to the grid columns gutters instead of extending to the edge.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row-align: gutter"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-row-persist</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">
-If set the rules between rows will persist when the grid is no longer in use (ie. mobile, smallest breakpoint before columns start to show. Useful to retain divider between rows on mobile.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row-persist: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">If set the rules between rows will persist when the grid is no longer in use (ie. mobile, smallest breakpoint before columns start to show. Useful to retain divider between rows on mobile.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row-persist: true"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-row-stacked-only</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">
-Same as persist adds rules to row before grid is being used (ie. mobile/small), except there will only be rules during this smallest breakpoint (mobile). Useful for when dividers don't make sense when the grid is displaying in columns but do make sense when columns are stacked on mobile.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row-stacked-only: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Same as persist adds rules to row before grid is being used (ie. mobile/small), except there will only be rules during this smallest breakpoint (mobile). Useful for when dividers don't make sense when the grid is displaying in columns but do make sense when columns are stacked on mobile.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row-stacked-only: true"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-column</strong></td>
 <td><strong>(left|right)</strong></td>
 <td>
-<p v-if="item.description">
-Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-column: left&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Sets rules (dividers) between columns. Left adds rules between columns using the left side of the column. Right adds rules between columns using the left side of the column</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-column: left"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-column-style</strong></td>
 <td><strong>[style key]</strong></td>
 <td>
-<p v-if="item.description">
-If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-row-style: light&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">If alternate rule styles are configured, applies them by the key that was used to configure the alternate style when initializing the grid in SCSS.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-row-style: light"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-column-ends</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">
-Specify that the rules should not be removed at the beginning or end of rows. Which happens by default depending on if the rules are on the left or right of the element.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-column-ends: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Specify that the rules should not be removed at the beginning or end of rows. Which happens by default depending on if the rules are on the left or right of the element.</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-column-ends: true"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>rules-column-align</strong></td>
 <td><strong>true</strong></td>
 <td>
-<p v-if="item.description">
-Sets rules (dividers) between columns
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid=&quot;..., rules-column: true&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p></p></tbody>
-</table><p></p>
-<p></p><table class="data-table options-table">
+<p v-if="item.description">Sets rules (dividers) between columns</p>
+<p class="options-table__example"><code>&lt;div data-grid="..., rules-column: true"&gt;...</code></p>
+</td>
+</tr>
+</tbody>
+</table>  
+<table class="data-table options-table">
 <caption> Options for 'data-grid-item'</caption>
 <thead>
 <tr>
@@ -4938,69 +4878,49 @@ Sets rules (dividers) between columns
 <th>Description/Example</th>
 </tr>
 </thead>
-<tbody><p></p>
-<p><tr>
+<tbody>
+<tr>
 <td><strong>width</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">
-Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid-item=&quot;width: 4&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Number of columns for grid, must match grids that are setup in site. For most projects this is just '12'. This is set up this way to allow mutliple grids.</p>
+<p class="options-table__example"><code>&lt;div data-grid-item="width: 4"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>width-[breakpoint]</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">
-Sets the width at a given breakpoint. Breakpoints are configured when initializing the grid in SCSS. Note this can be combined or used independently with the 'width' setting (above). For example if you only wanted the grid to start at the medium breakpoint you would just set 'width-medium'
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid-item=&quot;width-medium: 2&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Sets the width at a given breakpoint. Breakpoints are configured when initializing the grid in SCSS. Note this can be combined or used independently with the 'width' setting (above). For example if you only wanted the grid to start at the medium breakpoint you would just set 'width-medium'</p>
+<p class="options-table__example"><code>&lt;div data-grid-item="width-medium: 2"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>offset</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">
-Offsets the column by a certain number of columns
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid-item=&quot;..., offset: 2&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Offsets the column by a certain number of columns</p>
+<p class="options-table__example"><code>&lt;div data-grid-item="..., offset: 2"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>offset-[breakpoint]</strong></td>
 <td><strong>[# of columns]</strong></td>
 <td>
-<p v-if="item.description">
-Same as width-[breakpoint] except for offset instead of width
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid-item=&quot;..., offset: 2&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p><tr>
+<p v-if="item.description">Same as width-[breakpoint] except for offset instead of width</p>
+<p class="options-table__example"><code>&lt;div data-grid-item="..., offset: 2"&gt;...</code></p>
+</td>
+</tr>
+<tr>
 <td><strong>sticky</strong></td>
 <td><strong>[top, bottom]</strong></td>
 <td>
-<p v-if="item.description">
-Set's a column to be sticky
-</p></td></tr></p>
-<p></p><div class="options-table__example">
-<code>&lt;div data-grid-item=&quot;..., sticky: top&quot;&gt;...</code>
-</div>
-
-<p></p>
-<p></p></tbody>
-</table><p></p>
+<p v-if="item.description">Set's a column to be sticky</p>
+<p class="options-table__example"><code>&lt;div data-grid-item="..., sticky: top"&gt;...</code></p>
+</td>
+</tr>
+</tbody>
+</table>  
 <h2 id="examples" tabindex="-1">Examples</h2>
 <ul>
 <li>Dotted Line is the container holding the data-grid</li>

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-31">
+<table class="data-table" id="dt-39">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-31-type" rowspan="2">Type</th>
-      <th id="dt-31-group" colspan="2">Group</th>
-      <th id="dt-31-details" colspan="2">Details</th>
-      <th id="dt-31-id" rowspan="2">Id</th>
+      <th id="dt-39-type" rowspan="2">Type</th>
+      <th id="dt-39-group" colspan="2">Group</th>
+      <th id="dt-39-details" colspan="2">Details</th>
+      <th id="dt-39-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-31-group" id="dt-31-primary">Primary</th>
-      <th headers="dt-31-group" id="dt-31-secondary">Secondary</th>
-      <th headers="dt-31-details" id="dt-31-before">Before Task</th>
-      <th headers="dt-31-details" id="dt-31-after">After Task</th>
+      <th headers="dt-39-group" id="dt-39-primary">Primary</th>
+      <th headers="dt-39-group" id="dt-39-secondary">Secondary</th>
+      <th headers="dt-39-details" id="dt-39-before">Before Task</th>
+      <th headers="dt-39-details" id="dt-39-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-31-type dt-31-r1" id="dt-31-r1">Default</th>
-      <td headers="dt-31-group dt-31-primary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-group dt-31-secondary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-before dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-after dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-39-type dt-39-r1" id="dt-39-r1">Default</th>
+      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-31-group dt-31-primary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-group dt-31-secondary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-before dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-after dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-id">OL-53-GHSLE</td>
+      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-31-group dt-31-primary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-group dt-31-secondary dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-before dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-details dt-31-after dt-31-r1">Lorem Ipsum</td>
-      <td headers="dt-31-id">OL-53-GHSLE</td>
+      <td headers="dt-39-group dt-39-primary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-group dt-39-secondary dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-before dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-details dt-39-after dt-39-r1">Lorem Ipsum</td>
+      <td headers="dt-39-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -4748,9 +4748,11 @@
   <span class="pjs-token pjs-string">"highlighted-row-border-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">"large-header-cell-padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"caption-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">"caption-background-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">"caption-font-weight"</span> <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"caption-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0 0 1em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"caption-padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0<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">"caption-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0<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">"caption-padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.5em<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">"caption-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> left<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"extra-selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".wysiwyg table"</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
 <details>
@@ -4760,7 +4762,7 @@
 <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-53</li>
+<li><strong>Lines (code):</strong> 28-55</li>
 </ul>
 </details>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -4777,8 +4779,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> 55-58</li>
-<li><strong>Lines (code):</strong> 60-62</li>
+<li><strong>Lines (comments):</strong> 57-60</li>
+<li><strong>Lines (code):</strong> 62-64</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -4817,8 +4819,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> 74-76</li>
-<li><strong>Lines (code):</strong> 78-180</li>
+<li><strong>Lines (comments):</strong> 76-78</li>
+<li><strong>Lines (code):</strong> 80-184</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -4841,8 +4843,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> 64-67</li>
-<li><strong>Lines (code):</strong> 69-72</li>
+<li><strong>Lines (comments):</strong> 66-69</li>
+<li><strong>Lines (code):</strong> 71-74</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.7", 
+  "version": "0.1.0-beta.8", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_data-table.scss

@@ -46,9 +46,11 @@ $config: (
   "highlighted-row-border-color" : null,
   "large-header-cell-padding-y" : 1em,
   "caption-type-size" : "large",
+  "caption-background-color" : null,
   "caption-font-weight" : bold,
-  "caption-margin" : (0 0 1em 0),
-  "caption-padding" : (0,),
+  "caption-margin" : (0,),
+  "caption-padding" : (0.5em,),
+  "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
 
@@ -107,9 +109,11 @@ $config: (
         @include typography.size(get("caption-type-size"));
       }
       font-weight: get("caption-font-weight");
-      text-align: left;
+      text-align: get("caption-text-align");
       margin: get("caption-margin");
       padding: get("caption-padding");
+      background-color: get("caption-background-color");
+      border-bottom: $border;
     }
     th,
     tr,