@ulu/frontend 0.1.0-beta.31 → 0.1.0-beta.32

package/docs-dev/changelog/index.html

@@ -5046,7 +5046,10 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#version-0.1.0-beta.30-(released)">Version 0.1.0-beta.30 (released)</a>
+                    <li><a href="#version-0.1.0-beta.31">Version 0.1.0-beta.31</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.30">Version 0.1.0-beta.30</a>
             		</li>
 
                     <li><a href="#version-0.1.0-beta.29">Version 0.1.0-beta.29</a>
@@ -5193,7 +5196,15 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
-<h2 id="version-0.1.0-beta.30-(released)" tabindex="-1">Version 0.1.0-beta.30 (released)</h2>
+<h2 id="version-0.1.0-beta.31" tabindex="-1">Version 0.1.0-beta.31</h2>
+<ul>
+<li>scss/components/button-verbose
+<ul>
+<li>Change left-cap default to false off (like it was before the change in 0.1.0-beta.29)</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.30" tabindex="-1">Version 0.1.0-beta.30</h2>
 <ul>
 <li>scss/components/button-verbose
 <ul>

package/docs-dev/demos/card/index.html

@@ -5068,54 +5068,54 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-15" name="title" checked="">
-<label for="live-demo-id-15">
+  <input type="checkbox" id="live-demo-id-57" name="title" checked="">
+<label for="live-demo-id-57">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-16" name="body" checked="">
-<label for="live-demo-id-16">
+  <input type="checkbox" id="live-demo-id-58" name="body" checked="">
+<label for="live-demo-id-58">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-17" name="content" checked="">
-<label for="live-demo-id-17">
+  <input type="checkbox" id="live-demo-id-59" name="content" checked="">
+<label for="live-demo-id-59">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-18" name="footer" checked="">
-<label for="live-demo-id-18">
+  <input type="checkbox" id="live-demo-id-60" name="footer" checked="">
+<label for="live-demo-id-60">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-19">
+<label for="live-demo-id-61">
   Action
   <span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
 </label>  
-  <select id="live-demo-id-19" name="action">
+  <select id="live-demo-id-61" name="action">
     <option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-20">
+<label for="live-demo-id-62">
   Media
 </label>  
-  <select id="live-demo-id-20" name="media">
+  <select id="live-demo-id-62" name="media">
     <option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
   </select>
 </div>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-21">
+<label for="live-demo-id-63">
   Layout
   <span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
 </label>  
-  <select id="live-demo-id-21" name="layout">
+  <select id="live-demo-id-63" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

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

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

package/docs-dev/sass/components/button-verbose/index.html

@@ -5101,7 +5101,7 @@
 <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> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> #F7F8F7<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-string">"border-radius"</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">"box-shadow"</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">"box-shadow-hover"</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">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type"</span><span class="pjs-token pjs-punctuation">,</span>
@@ -5121,7 +5121,8 @@
   <span class="pjs-token pjs-string">"left-cap"</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">"left-cap-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">"left-cap-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">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem
+  <span class="pjs-token pjs-string">"left-cap-width"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"left-cap-match-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-punctuation">;</span></code></pre>
 <details>
   <summary>File Information</summary>
@@ -5129,8 +5130,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 30-54</li>
-<li><strong>Lines (code):</strong> 56-80</li>
+<li><strong>Lines (comments):</strong> 30-55</li>
+<li><strong>Lines (code):</strong> 57-82</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5282,6 +5283,12 @@
 <td style="text-align:left">0.5rem</td>
 <td style="text-align:left">Width of the cap</td>
 </tr>
+<tr>
+<td style="text-align:left">left-cap-match-radius</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">The cap should have be rounded to match the parent's border radius</td>
+</tr>
 </tbody>
 </table>
 <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5298,8 +5305,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 82-85</li>
-<li><strong>Lines (code):</strong> 87-89</li>
+<li><strong>Lines (comments):</strong> 84-87</li>
+<li><strong>Lines (code):</strong> 89-91</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5338,8 +5345,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 101-109</li>
-<li><strong>Lines (code):</strong> 111-192</li>
+<li><strong>Lines (comments):</strong> 103-111</li>
+<li><strong>Lines (code):</strong> 113-198</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5376,8 +5383,8 @@
 <li><strong>File:</strong> _button-verbose.scss</li>
 <li><strong>Group:</strong> button-verbose</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 91-94</li>
-<li><strong>Lines (code):</strong> 96-99</li>
+<li><strong>Lines (comments):</strong> 93-96</li>
+<li><strong>Lines (code):</strong> 98-101</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -5293,8 +5293,8 @@
 <li><strong>File:</strong> _callout.scss</li>
 <li><strong>Group:</strong> callout</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 113-115</li>
-<li><strong>Lines (code):</strong> 117-164</li>
+<li><strong>Lines (comments):</strong> 102-104</li>
+<li><strong>Lines (code):</strong> 106-152</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>

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

@@ -5163,8 +5163,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 17-67</li>
-<li><strong>Lines (code):</strong> 69-124</li>
+<li><strong>Lines (comments):</strong> 18-68</li>
+<li><strong>Lines (code):</strong> 70-125</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5488,8 +5488,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 126-129</li>
-<li><strong>Lines (code):</strong> 131-133</li>
+<li><strong>Lines (comments):</strong> 127-130</li>
+<li><strong>Lines (code):</strong> 132-134</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5528,8 +5528,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 144-148</li>
-<li><strong>Lines (code):</strong> 150-180</li>
+<li><strong>Lines (comments):</strong> 145-149</li>
+<li><strong>Lines (code):</strong> 151-181</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5576,8 +5576,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 187-191</li>
-<li><strong>Lines (code):</strong> 193-468</li>
+<li><strong>Lines (comments):</strong> 188-192</li>
+<li><strong>Lines (code):</strong> 194-453</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5606,8 +5606,8 @@
 <li><strong>File:</strong> _card.scss</li>
 <li><strong>Group:</strong> card</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 135-138</li>
-<li><strong>Lines (code):</strong> 140-142</li>
+<li><strong>Lines (comments):</strong> 136-139</li>
+<li><strong>Lines (code):</strong> 141-143</li>
 </ul>
 </details>
 <h4 id="examples-3" tabindex="-1">Examples</h4>

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

@@ -5116,8 +5116,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-25</li>
-<li><strong>Lines (code):</strong> 27-40</li>
+<li><strong>Lines (comments):</strong> 16-26</li>
+<li><strong>Lines (code):</strong> 28-41</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5201,8 +5201,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> 42-45</li>
-<li><strong>Lines (code):</strong> 47-49</li>
+<li><strong>Lines (comments):</strong> 43-46</li>
+<li><strong>Lines (code):</strong> 48-50</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5241,8 +5241,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> 60-62</li>
-<li><strong>Lines (code):</strong> 64-192</li>
+<li><strong>Lines (comments):</strong> 61-63</li>
+<li><strong>Lines (code):</strong> 65-185</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5265,8 +5265,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> 51-54</li>
-<li><strong>Lines (code):</strong> 56-58</li>
+<li><strong>Lines (comments):</strong> 52-55</li>
+<li><strong>Lines (code):</strong> 57-59</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/overlay-section/index.html

@@ -5122,8 +5122,8 @@
 <li><strong>File:</strong> _overlay-section.scss</li>
 <li><strong>Group:</strong> overlay-section</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 13-21</li>
-<li><strong>Lines (code):</strong> 23-41</li>
+<li><strong>Lines (comments):</strong> 14-22</li>
+<li><strong>Lines (code):</strong> 24-42</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5195,8 +5195,8 @@
 <li><strong>File:</strong> _overlay-section.scss</li>
 <li><strong>Group:</strong> overlay-section</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 43-46</li>
-<li><strong>Lines (code):</strong> 48-50</li>
+<li><strong>Lines (comments):</strong> 44-47</li>
+<li><strong>Lines (code):</strong> 49-51</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5235,8 +5235,8 @@
 <li><strong>File:</strong> _overlay-section.scss</li>
 <li><strong>Group:</strong> overlay-section</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 61-63</li>
-<li><strong>Lines (code):</strong> 65-122</li>
+<li><strong>Lines (comments):</strong> 62-64</li>
+<li><strong>Lines (code):</strong> 66-119</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5259,8 +5259,8 @@
 <li><strong>File:</strong> _overlay-section.scss</li>
 <li><strong>Group:</strong> overlay-section</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 52-55</li>
-<li><strong>Lines (code):</strong> 57-59</li>
+<li><strong>Lines (comments):</strong> 53-56</li>
+<li><strong>Lines (code):</strong> 58-60</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/docs-dev/sass/components/ratio-box/index.html

@@ -5112,8 +5112,8 @@
 <li><strong>File:</strong> _ratio-box.scss</li>
 <li><strong>Group:</strong> ratio-box</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 9-12</li>
-<li><strong>Lines (code):</strong> 14-21</li>
+<li><strong>Lines (comments):</strong> 10-13</li>
+<li><strong>Lines (code):</strong> 15-22</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5155,8 +5155,8 @@
 <li><strong>File:</strong> _ratio-box.scss</li>
 <li><strong>Group:</strong> ratio-box</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 23-26</li>
-<li><strong>Lines (code):</strong> 28-30</li>
+<li><strong>Lines (comments):</strong> 24-27</li>
+<li><strong>Lines (code):</strong> 29-31</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5195,8 +5195,8 @@
 <li><strong>File:</strong> _ratio-box.scss</li>
 <li><strong>Group:</strong> ratio-box</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 41-43</li>
-<li><strong>Lines (code):</strong> 45-64</li>
+<li><strong>Lines (comments):</strong> 42-44</li>
+<li><strong>Lines (code):</strong> 46-61</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5219,8 +5219,8 @@
 <li><strong>File:</strong> _ratio-box.scss</li>
 <li><strong>Group:</strong> ratio-box</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 32-35</li>
-<li><strong>Lines (code):</strong> 37-39</li>
+<li><strong>Lines (comments):</strong> 33-36</li>
+<li><strong>Lines (code):</strong> 38-40</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

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

@@ -5108,8 +5108,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-15</li>
-<li><strong>Lines (code):</strong> 17-20</li>
+<li><strong>Lines (comments):</strong> 13-16</li>
+<li><strong>Lines (code):</strong> 18-21</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5151,8 +5151,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> 22-25</li>
-<li><strong>Lines (code):</strong> 27-29</li>
+<li><strong>Lines (comments):</strong> 23-26</li>
+<li><strong>Lines (code):</strong> 28-30</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5191,8 +5191,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> 40-42</li>
-<li><strong>Lines (code):</strong> 44-66</li>
+<li><strong>Lines (comments):</strong> 41-43</li>
+<li><strong>Lines (code):</strong> 45-63</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5215,8 +5215,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> 31-34</li>
-<li><strong>Lines (code):</strong> 36-38</li>
+<li><strong>Lines (comments):</strong> 32-35</li>
+<li><strong>Lines (code):</strong> 37-39</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.31",
+  "version": "0.1.0-beta.32",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_breakpoint.scss

@@ -220,7 +220,7 @@ $sizes: (
 /// - Breakpoints always min-width (upwards) for javascript setup
 
 @mixin embed-for-scripts() {
-  &:before {
+  &::before {
     display: none;
     content: get("null-name");
     @each $size, $breakpoint in $sizes {

package/scss/_layout.scss

@@ -240,14 +240,14 @@ $containers: (
 /// Prints clearfix styles
 
 @mixin clearfix() {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     display: table;
     flex-basis: 0; // Flexbox, clear fix for pseudo elements in Safari
     order: 1;
   }
-  &:after { 
+  &::after { 
     clear: both; 
   }
 }

package/scss/components/_button-verbose.scss

@@ -52,11 +52,12 @@ $-fallbacks: (
 /// @prop {Color} left-cap-color ["link"] The color for the left cap
 /// @prop {color} left-cap-color-hover ["link-hover"] The color for the left cap when the button is hovered
 /// @prop {Number} left-cap-color-hover [0.5rem] Width of the cap
+/// @prop {Number} left-cap-match-radius [true] The cap should have be rounded to match the parent's border radius
 
 $config: (
   "background-color" : white,
   "background-color-hover" : #F7F8F7,
-  "border-radius" : "border-radius",
+  "border-radius" : true,
   "box-shadow" : true,
   "box-shadow-hover" : true,
   "color" : "type",
@@ -76,7 +77,8 @@ $config: (
   "left-cap" : false,
   "left-cap-color" : "link",
   "left-cap-color-hover" : "link-hover",
-  "left-cap-width" : 0.5rem
+  "left-cap-width" : 0.5rem,
+  "left-cap-match-radius" : true
 ) !default;
 
 /// Change modules $config
@@ -113,7 +115,7 @@ $config: (
   
   #{ $prefix } {
     text-decoration: none;
-    border-radius: element.get(get("border-radius"));
+    border-radius: get("border-radius");
     box-shadow: get("box-shadow");
     line-height: get("line-height");
     position: relative;
@@ -138,6 +140,10 @@ $config: (
         left: 0;
         width: get("left-cap-width");
         background-color: color.get(get("left-cap-color"));
+        @if get("left-cap-match-radius") {
+          border-top-left-radius: get("border-radius");
+          border-bottom-left-radius: get("border-radius");
+        }
       }
     }
     &:hover {