@ulu/frontend 0.1.0-beta.29 → 0.1.0-beta.30

package/docs-dev/changelog/index.html

@@ -5046,7 +5046,10 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#version-0.1.0-beta.29-(unreleased)">Version 0.1.0-beta.29 (unreleased)</a>
+                    <li><a href="#version-0.1.0-beta.30-(released)">Version 0.1.0-beta.30 (released)</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.29">Version 0.1.0-beta.29</a>
             		</li>
 
                     <li><a href="#version-0.1.0-beta.28">Version 0.1.0-beta.28</a>
@@ -5190,13 +5193,34 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
-<h2 id="version-0.1.0-beta.29-(unreleased)" tabindex="-1">Version 0.1.0-beta.29 (unreleased)</h2>
+<h2 id="version-0.1.0-beta.30-(released)" tabindex="-1">Version 0.1.0-beta.30 (released)</h2>
+<ul>
+<li>scss/components/button-verbose
+<ul>
+<li>Add button-verbose__body element</li>
+<li>Allow title-margin to work if body is before title</li>
+</ul>
+</li>
+<li>scss/component/popover
+<ul>
+<li>Change new config property &quot;arrow-mask&quot; to &quot;arrow-box-shadow&quot;, remove &quot;arrow-mask-&quot; properties as they are no longer needed. When &quot;arrow-box-shadow&quot; is enabled the popovers box-shadow will be used on the arrow along with a mask that has an overlap based on the box-shadow's size.</li>
+</ul>
+</li>
+<li>scss/utils
+<ul>
+<li>Add (is-list, is-map, is-number, is-string, is-color) functions to reduce logic based on type (ie. <code>if(utils.is-list($value), $something, $something-else))</code></li>
+<li></li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.29" tabindex="-1">Version 0.1.0-beta.29</h2>
 <ul>
 <li>scss/components/button-verbose
 <ul>
 <li>Setup optional selector changing (class base name)</li>
 <li>Add end cap option</li>
 <li>Adjust default options</li>
+<li>Make inline modifier remove margin right if last child</li>
 </ul>
 </li>
 <li>scss/components/card
@@ -5206,11 +5230,6 @@
 <li>Remove transparent on card__image--icon (will have normal default background for image area now)</li>
 </ul>
 </li>
-<li>scss/components/button-verbose
-<ul>
-<li>Make inline modifier remove margin right if last child</li>
-</ul>
-</li>
 <li>scss/components/form-theme
 <ul>
 <li>Add &quot;description-line-height&quot; option defaulting to typography line-height dense</li>

package/docs-dev/demos/button-verbose/index.html

@@ -5054,6 +5054,9 @@
 
                     <li><a href="#full-width-example">Full Width Example</a>
             		</li>
+
+                    <li><a href="#title-not-first">Title Not First</a>
+            		</li>
                 </ol>
             </div>
 			</div>
@@ -5082,14 +5085,20 @@
 <p class="type-center">
   <a href="#" class="button-verbose button-verbose--inline">
     <strong class="button-verbose__title">Example Link</strong>
-    This is the body
+    <span class="button-verbose__body">This is the body</span>
     <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
   </a>
 </p>
 <h2 id="full-width-example" tabindex="-1">Full Width Example</h2>
 <a href="#" class="button-verbose button-verbose--full-width">
   <strong class="button-verbose__title">Example Link</strong>
-  This is the body
+  <span class="button-verbose__body">This is the body</span>
+  <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
+</a>
+<h2 id="title-not-first" tabindex="-1">Title Not First</h2>
+<a href="#" class="button-verbose button-verbose--full-width">
+  <span class="button-verbose__body">This is the body</span>
+  <strong class="button-verbose__title">Example Link</strong>
   <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
 </a>
 

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-141" name="title" checked="">
-<label for="live-demo-id-141">
+  <input type="checkbox" id="live-demo-id-1" name="title" checked="">
+<label for="live-demo-id-1">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-142" name="body" checked="">
-<label for="live-demo-id-142">
+  <input type="checkbox" id="live-demo-id-2" name="body" checked="">
+<label for="live-demo-id-2">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-143" name="content" checked="">
-<label for="live-demo-id-143">
+  <input type="checkbox" id="live-demo-id-3" name="content" checked="">
+<label for="live-demo-id-3">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-144" name="footer" checked="">
-<label for="live-demo-id-144">
+  <input type="checkbox" id="live-demo-id-4" name="footer" checked="">
+<label for="live-demo-id-4">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-145">
+<label for="live-demo-id-5">
   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-145" name="action">
+  <select id="live-demo-id-5" 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-146">
+<label for="live-demo-id-6">
   Media
 </label>  
-  <select id="live-demo-id-146" name="media">
+  <select id="live-demo-id-6" 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-147">
+<label for="live-demo-id-7">
   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-147" name="layout">
+  <select id="live-demo-id-7" 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-21">
+<table class="data-table" id="dt-1">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-21-type" rowspan="2">Type</th>
-      <th id="dt-21-group" colspan="2">Group</th>
-      <th id="dt-21-details" colspan="2">Details</th>
-      <th id="dt-21-id" rowspan="2">Id</th>
+      <th id="dt-1-type" rowspan="2">Type</th>
+      <th id="dt-1-group" colspan="2">Group</th>
+      <th id="dt-1-details" colspan="2">Details</th>
+      <th id="dt-1-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-21-group" id="dt-21-primary">Primary</th>
-      <th headers="dt-21-group" id="dt-21-secondary">Secondary</th>
-      <th headers="dt-21-details" id="dt-21-before">Before Task</th>
-      <th headers="dt-21-details" id="dt-21-after">After Task</th>
+      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
+      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
+      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
+      <th headers="dt-1-details" id="dt-1-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-21-type dt-21-r1" id="dt-21-r1">Default</th>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-21-group dt-21-primary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-group dt-21-secondary dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-before dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-details dt-21-after dt-21-r1">Lorem Ipsum</td>
-      <td headers="dt-21-id">OL-53-GHSLE</td>
+      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
+      <td headers="dt-1-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

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

@@ -5339,7 +5339,7 @@
 <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-187</li>
+<li><strong>Lines (code):</strong> 111-192</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5347,14 +5347,14 @@
 <p>Basic Example</p>
 <pre class="language-html"><code class="language-html"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>a</span> <span class="pjs-token pjs-attr-name">href</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>#<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
   <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>strong</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose__title<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>Example Link<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>strong</span><span class="pjs-token pjs-punctuation">></span></span>
-  This is the body
+  <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>span</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose__body<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>This is the body<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>span</span><span class="pjs-token pjs-punctuation">></span></span>
   <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;</span>span</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>button-verbose__icon fas fa-arrow-right<span class="pjs-token pjs-punctuation">"</span></span> <span class="pjs-token pjs-attr-name">aria-hidden</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>true<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>span</span><span class="pjs-token pjs-punctuation">></span></span>
 <span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation">&lt;/</span>a</span><span class="pjs-token pjs-punctuation">></span></span></code></pre>
 <h5 id="preview" tabindex="-1">Preview</h5>
 <div>
 <a href="#" class="button-verbose">
   <strong class="button-verbose__title">Example Link</strong>
-  This is the body
+  <span class="button-verbose__body">This is the body</span>
   <span class="button-verbose__icon fas fa-arrow-right" aria-hidden="true"></span>
 </a>
 </div>

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

@@ -5099,7 +5099,8 @@
 <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">"arrow-size"</span>                   <span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"arrow-mask-overlap"</span>           <span class="pjs-token pjs-punctuation">:</span> 4px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"arrow-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">"arrow-box-shadow-extent"</span>      <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"background-color"</span>             <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"border-radius"</span>                <span class="pjs-token pjs-punctuation">:</span> 6px<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"color"</span>                        <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
@@ -5134,8 +5135,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 30-60</li>
-<li><strong>Lines (code):</strong> 62-92</li>
+<li><strong>Lines (comments):</strong> 30-61</li>
+<li><strong>Lines (code):</strong> 63-94</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5156,10 +5157,16 @@
 <td style="text-align:left">Size of the dropdown arrow.</td>
 </tr>
 <tr>
-<td style="text-align:left">arrow-mask-overlap</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">4px</td>
-<td style="text-align:left">Size that the mask extends beyond the arrow size (which covers up the arrow box shadow inside the popover content). This should be adjusted based on the size of the box-shadow being used)</td>
+<td style="text-align:left">arrow-box-shadow</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">true</td>
+<td style="text-align:left">When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)</td>
+</tr>
+<tr>
+<td style="text-align:left">arrow-box-shadow-extent</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)</td>
 </tr>
 <tr>
 <td style="text-align:left">background-color</td>
@@ -5339,8 +5346,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 94-97</li>
-<li><strong>Lines (code):</strong> 99-101</li>
+<li><strong>Lines (comments):</strong> 96-99</li>
+<li><strong>Lines (code):</strong> 101-103</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5379,8 +5386,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 113-115</li>
-<li><strong>Lines (code):</strong> 117-232</li>
+<li><strong>Lines (comments):</strong> 115-117</li>
+<li><strong>Lines (code):</strong> 119-234</li>
 </ul>
 </details>
 <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5403,8 +5410,8 @@
 <li><strong>File:</strong> _popover.scss</li>
 <li><strong>Group:</strong> popover</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 103-106</li>
-<li><strong>Lines (code):</strong> 108-111</li>
+<li><strong>Lines (comments):</strong> 105-108</li>
+<li><strong>Lines (code):</strong> 110-113</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>