@ulu/frontend 0.1.0-beta.56 → 0.1.0-beta.58

package/docs-dev/changelog/index.html

@@ -5166,6 +5166,15 @@
 <div class="toc">
                 <ol>
                     
+                    <li><a href="#version-0.1.0-beta.57">Version 0.1.0-beta.57</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.56">Version 0.1.0-beta.56</a>
+            		</li>
+
+                    <li><a href="#version-0.1.0-beta.55">Version 0.1.0-beta.55</a>
+            		</li>
+
                     <li><a href="#version-0.1.0-beta.54">Version 0.1.0-beta.54</a>
             		</li>
 
@@ -5385,6 +5394,30 @@
 
     <div class="changelog">
 <h1 id="change-log" tabindex="-1">Change Log</h1>
+<h2 id="version-0.1.0-beta.57" tabindex="-1">Version 0.1.0-beta.57</h2>
+<ul>
+<li><strong>js/ui/slider</strong>
+<ul>
+<li>Setup swipe listener and add option for swipeEnabled (true by default)</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.56" tabindex="-1">Version 0.1.0-beta.56</h2>
+<ul>
+<li><strong>scss/components/counter-list</strong>
+<ul>
+<li>Add counter (font-family, font-weight)</li>
+</ul>
+</li>
+</ul>
+<h2 id="version-0.1.0-beta.55" tabindex="-1">Version 0.1.0-beta.55</h2>
+<ul>
+<li><strong>scss/components/counter-list</strong>
+<ul>
+<li>Fix selector (was nested if using .counter-list__item), Updates for API for $config</li>
+</ul>
+</li>
+</ul>
 <h2 id="version-0.1.0-beta.54" tabindex="-1">Version 0.1.0-beta.54</h2>
 <ul>
 <li><strong>js/ui/modal-builder</strong>

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

@@ -5184,60 +5184,60 @@
   <legend>Elements Visible</legend>
   <div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-33" name="title" checked="">
-<label for="live-demo-id-33">
+  <input type="checkbox" id="live-demo-id-81" name="title" checked="">
+<label for="live-demo-id-81">
   Title
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-34" name="body" checked="">
-<label for="live-demo-id-34">
+  <input type="checkbox" id="live-demo-id-82" name="body" checked="">
+<label for="live-demo-id-82">
   Body
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-35" name="content" checked="">
-<label for="live-demo-id-35">
+  <input type="checkbox" id="live-demo-id-83" name="content" checked="">
+<label for="live-demo-id-83">
   Content
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-36" name="aside" checked="">
-<label for="live-demo-id-36">
+  <input type="checkbox" id="live-demo-id-84" name="aside" checked="">
+<label for="live-demo-id-84">
   Aside
 </label>  
 </div>
 <div class="form-theme__item form-theme__item--checkbox">
-  <input type="checkbox" id="live-demo-id-37" name="footer" checked="">
-<label for="live-demo-id-37">
+  <input type="checkbox" id="live-demo-id-85" name="footer" checked="">
+<label for="live-demo-id-85">
   Footer
 </label>  
 </div>
   </div>
 </fieldset>
 <div class="form-theme__item form-theme__item--select">
-<label for="live-demo-id-38">
+<label for="live-demo-id-86">
   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-38" name="action">
+  <select id="live-demo-id-86" 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-39">
+<label for="live-demo-id-87">
   Media
 </label>  
-  <select id="live-demo-id-39" name="media">
+  <select id="live-demo-id-87" 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-40">
+<label for="live-demo-id-88">
   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-40" name="layout">
+  <select id="live-demo-id-88" name="layout">
     <option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
   </select>
 </div>

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

@@ -5222,178 +5222,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-17">
+<table class="data-table data-table--striped" id="dt-41">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-17-type" rowspan="2">Type</th>
-      <th id="dt-17-group" colspan="2">Group</th>
-      <th id="dt-17-details" colspan="2">Details</th>
-      <th id="dt-17-id" rowspan="2">Id</th>
+      <th id="dt-41-type" rowspan="2">Type</th>
+      <th id="dt-41-group" colspan="2">Group</th>
+      <th id="dt-41-details" colspan="2">Details</th>
+      <th id="dt-41-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-17-group" id="dt-17-primary">Primary</th>
-      <th headers="dt-17-group" id="dt-17-secondary">Secondary</th>
-      <th headers="dt-17-details" id="dt-17-before">Before Task</th>
-      <th headers="dt-17-details" id="dt-17-after">After Task</th>
+      <th headers="dt-41-group" id="dt-41-primary">Primary</th>
+      <th headers="dt-41-group" id="dt-41-secondary">Secondary</th>
+      <th headers="dt-41-details" id="dt-41-before">Before Task</th>
+      <th headers="dt-41-details" id="dt-41-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-17-type dt-17-r1" id="dt-17-r1">Default</th>
-      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-41-type dt-41-r1" id="dt-41-r1">Default</th>
+      <td headers="dt-41-group dt-41-primary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-group dt-41-secondary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-before dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-after dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-id">OL-53-GHSLE</td>
+      <td headers="dt-41-group dt-41-primary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-group dt-41-secondary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-before dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-after dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-17-group dt-17-primary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-group dt-17-secondary dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-before dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-details dt-17-after dt-17-r1">Lorem Ipsum</td>
-      <td headers="dt-17-id">OL-53-GHSLE</td>
+      <td headers="dt-41-group dt-41-primary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-group dt-41-secondary dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-before dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-details dt-41-after dt-41-r1">Lorem Ipsum</td>
+      <td headers="dt-41-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-18">
+<table class="data-table data-table--large-first" id="dt-42">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-18-type" rowspan="2">Type</th>
-      <th id="dt-18-group" colspan="2">Group</th>
-      <th id="dt-18-details" colspan="2">Details</th>
-      <th id="dt-18-id" rowspan="2">Id</th>
+      <th id="dt-42-type" rowspan="2">Type</th>
+      <th id="dt-42-group" colspan="2">Group</th>
+      <th id="dt-42-details" colspan="2">Details</th>
+      <th id="dt-42-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-18-group" id="dt-18-primary">Primary</th>
-      <th headers="dt-18-group" id="dt-18-secondary">Secondary</th>
-      <th headers="dt-18-details" id="dt-18-before">Before Task</th>
-      <th headers="dt-18-details" id="dt-18-after">After Task</th>
+      <th headers="dt-42-group" id="dt-42-primary">Primary</th>
+      <th headers="dt-42-group" id="dt-42-secondary">Secondary</th>
+      <th headers="dt-42-details" id="dt-42-before">Before Task</th>
+      <th headers="dt-42-details" id="dt-42-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-18-type dt-18-r1" id="dt-18-r1">Default</th>
-      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-42-type dt-42-r1" id="dt-42-r1">Default</th>
+      <td headers="dt-42-group dt-42-primary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-group dt-42-secondary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-before dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-after dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-id">OL-53-GHSLE</td>
+      <td headers="dt-42-group dt-42-primary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-group dt-42-secondary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-before dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-after dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-18-group dt-18-primary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-group dt-18-secondary dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-before dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-details dt-18-after dt-18-r1">Lorem Ipsum</td>
-      <td headers="dt-18-id">OL-53-GHSLE</td>
+      <td headers="dt-42-group dt-42-primary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-group dt-42-secondary dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-before dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-details dt-42-after dt-42-r1">Lorem Ipsum</td>
+      <td headers="dt-42-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-19">
+<table class="data-table data-table--large-header" id="dt-43">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-19-type" rowspan="2">Type</th>
-      <th id="dt-19-group" colspan="2">Group</th>
-      <th id="dt-19-details" colspan="2">Details</th>
-      <th id="dt-19-id" rowspan="2">Id</th>
+      <th id="dt-43-type" rowspan="2">Type</th>
+      <th id="dt-43-group" colspan="2">Group</th>
+      <th id="dt-43-details" colspan="2">Details</th>
+      <th id="dt-43-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-19-group" id="dt-19-primary">Primary</th>
-      <th headers="dt-19-group" id="dt-19-secondary">Secondary</th>
-      <th headers="dt-19-details" id="dt-19-before">Before Task</th>
-      <th headers="dt-19-details" id="dt-19-after">After Task</th>
+      <th headers="dt-43-group" id="dt-43-primary">Primary</th>
+      <th headers="dt-43-group" id="dt-43-secondary">Secondary</th>
+      <th headers="dt-43-details" id="dt-43-before">Before Task</th>
+      <th headers="dt-43-details" id="dt-43-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-19-type dt-19-r1" id="dt-19-r1">Default</th>
-      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-43-type dt-43-r1" id="dt-43-r1">Default</th>
+      <td headers="dt-43-group dt-43-primary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-group dt-43-secondary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-before dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-after dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-id">OL-53-GHSLE</td>
+      <td headers="dt-43-group dt-43-primary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-group dt-43-secondary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-before dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-after dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-19-group dt-19-primary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-group dt-19-secondary dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-before dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-details dt-19-after dt-19-r1">Lorem Ipsum</td>
-      <td headers="dt-19-id">OL-53-GHSLE</td>
+      <td headers="dt-43-group dt-43-primary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-group dt-43-secondary dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-before dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-details dt-43-after dt-43-r1">Lorem Ipsum</td>
+      <td headers="dt-43-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-20">
+<table class="data-table data-table--no-border" id="dt-44">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-20-type" rowspan="2">Type</th>
-      <th id="dt-20-group" colspan="2">Group</th>
-      <th id="dt-20-details" colspan="2">Details</th>
-      <th id="dt-20-id" rowspan="2">Id</th>
+      <th id="dt-44-type" rowspan="2">Type</th>
+      <th id="dt-44-group" colspan="2">Group</th>
+      <th id="dt-44-details" colspan="2">Details</th>
+      <th id="dt-44-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-20-group" id="dt-20-primary">Primary</th>
-      <th headers="dt-20-group" id="dt-20-secondary">Secondary</th>
-      <th headers="dt-20-details" id="dt-20-before">Before Task</th>
-      <th headers="dt-20-details" id="dt-20-after">After Task</th>
+      <th headers="dt-44-group" id="dt-44-primary">Primary</th>
+      <th headers="dt-44-group" id="dt-44-secondary">Secondary</th>
+      <th headers="dt-44-details" id="dt-44-before">Before Task</th>
+      <th headers="dt-44-details" id="dt-44-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-20-type dt-20-r1" id="dt-20-r1">Default</th>
-      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-44-type dt-44-r1" id="dt-44-r1">Default</th>
+      <td headers="dt-44-group dt-44-primary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-group dt-44-secondary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-before dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-after dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-id">OL-53-GHSLE</td>
+      <td headers="dt-44-group dt-44-primary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-group dt-44-secondary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-before dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-after dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-20-group dt-20-primary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-group dt-20-secondary dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-before dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-details dt-20-after dt-20-r1">Lorem Ipsum</td>
-      <td headers="dt-20-id">OL-53-GHSLE</td>
+      <td headers="dt-44-group dt-44-primary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-group dt-44-secondary dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-before dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-details dt-44-after dt-44-r1">Lorem Ipsum</td>
+      <td headers="dt-44-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/sass/components/counter-list/index.html

@@ -5228,6 +5228,8 @@
   <span class="pjs-token pjs-string">"counter-style"</span> <span class="pjs-token pjs-punctuation">:</span> numeric<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"counter-border-radius"</span> <span class="pjs-token pjs-punctuation">:</span> 50%<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"counter-font-size"</span> <span class="pjs-token pjs-punctuation">:</span> 1.2em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"counter-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">"counter-font-family"</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">"counter-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
   <span class="pjs-token pjs-string">"counter-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"accent"</span><span class="pjs-token pjs-punctuation">,</span>
 <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
@@ -5238,7 +5240,7 @@
 <li><strong>Group:</strong> counter-list</li>
 <li><strong>Type:</strong> variable</li>
 <li><strong>Lines (comments):</strong> 11-23</li>
-<li><strong>Lines (code):</strong> 25-37</li>
+<li><strong>Lines (code):</strong> 25-39</li>
 </ul>
 </details>
 <h4 id="map-properties" tabindex="-1">Map Properties</h4>
@@ -5334,8 +5336,8 @@
 <li><strong>File:</strong> _counter-list.scss</li>
 <li><strong>Group:</strong> counter-list</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 39-42</li>
-<li><strong>Lines (code):</strong> 44-46</li>
+<li><strong>Lines (comments):</strong> 41-44</li>
+<li><strong>Lines (code):</strong> 46-48</li>
 </ul>
 </details>
 <h4 id="examples" tabindex="-1">Examples</h4>
@@ -5374,8 +5376,8 @@
 <li><strong>File:</strong> _counter-list.scss</li>
 <li><strong>Group:</strong> counter-list</li>
 <li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 57-64</li>
-<li><strong>Lines (code):</strong> 66-133</li>
+<li><strong>Lines (comments):</strong> 59-66</li>
+<li><strong>Lines (code):</strong> 68-137</li>
 </ul>
 </details>
 <div class="callout callout--demo crop-margins">
@@ -5414,8 +5416,8 @@
 <li><strong>File:</strong> _counter-list.scss</li>
 <li><strong>Group:</strong> counter-list</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 48-51</li>
-<li><strong>Lines (code):</strong> 53-55</li>
+<li><strong>Lines (comments):</strong> 50-53</li>
+<li><strong>Lines (code):</strong> 55-57</li>
 </ul>
 </details>
 <h4 id="examples-2" tabindex="-1">Examples</h4>

package/js/ui/slider.js

@@ -20,6 +20,8 @@
 //                                    async stuff to promises and simplify
 //                            1.0.4 | Remove live region announcement (only used if auto rotate)
 
+// Todo:                      - Create destroy method to cleanup listeners
+
 // Reference:                 https://www.w3.org/WAI/tutorials/carousels/working-example/
 //                            https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html#
 //                            https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html
@@ -35,6 +37,7 @@ import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";
 import { log, logError, logWarning } from "../utils/class-logger.js";
+import setupSwipeListener from "swipe-listener";
 
 /**
  * Slider Component Initializer
@@ -124,13 +127,19 @@ export class Slider {
     buttonClasses: ["button", "button--icon"],
     iconClassPrevious: wrapSettingString("iconClassPrevious"),
     iconClassNext: wrapSettingString("iconClassNext"),
-    // transition: true
+    swipeEnabled: true,
+    swipeOptions: {
+      preventScroll: true
+    }
   }
   constructor(elements, config) {
     const options = Object.assign({}, Slider.defaults, config);
     this.options = options;
     this.slide = null;
     this.index = null;
+    this.swipeInstance = null;
+    this.swipeListener = null;
+    this.swipeImageListener = null;
     this.transitioning = false;
 
     if (!hasRequiredProps(requiredElements)) {
@@ -398,13 +407,50 @@ export class Slider {
     const trackCss = trimWhitespace(this.trackCss());
     const trackContainerStyles = trimWhitespace(this.trackContainerStyles());
     const slideCss = trimWhitespace(this.slideCss());
+
     track.setAttribute("style", trackCss);
     trackContainer.setAttribute("style", trackContainerStyles);
+
     this.slides.forEach(slide => {
       slide.element.setAttribute("style", slideCss);
       slide.element.setAttribute('tabindex', '-1');
     });
+    
     container.classList.add(this.getClass());
+
+    if (this.options.swipeEnabled) {
+      this.setupSwipe();
+    }
+  }
+  setupSwipe() {
+    const images = this.elements.track.querySelectorAll("img");
+    
+    // Cache for future destroy
+    // this.swipeInstance = setupSwipeListener(track, {
+    //   preventScroll: true
+    // });
+    this.swipeListener = (event) => {
+      this.onSwipe(event);
+    }
+    this.swipeImageListener = (event) => {
+      event.preventDefault(); // Allow swiping on images
+    };
+    this.slides.forEach(slide => {
+      const { element } = slide;
+      slide.swipeInstance = setupSwipeListener(element, this.options.swipeOptions);
+      element.addEventListener("swipe", this.swipeListener);
+    });
+    
+    images.forEach(image => {
+      image.addEventListener('dragstart', this.swipeImageListener);
+    });
+  }
+  onSwipe(event) {
+    const { directions } = event.detail;
+    const method = directions.left ? "next" : directions.right ? "previous" : null;
+    if (method) {
+      this[method](event);
+    }
   }
   trackContainerStyles() {
     // Crop translated track

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.56",
+  "version": "0.1.0-beta.58",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",
@@ -92,6 +92,7 @@
     "@floating-ui/dom": "^1.6.5",
     "@ulu/utils": "^0.0.20",
     "ally.js": "^1.4.1",
-    "aria-tablist": "^1.2.2"
+    "aria-tablist": "^1.2.2",
+    "swipe-listener" : "^1.3.0"
   }
 }

package/types/ui/slider.d.ts

@@ -32,6 +32,10 @@ export class Slider {
         buttonClasses: string[];
         iconClassPrevious: any;
         iconClassNext: any;
+        swipeEnabled: boolean;
+        swipeOptions: {
+            preventScroll: boolean;
+        };
     };
     constructor(elements: any, config: any);
     options: any;
@@ -41,6 +45,9 @@ export class Slider {
         number: number;
     };
     index: any;
+    swipeInstance: any;
+    swipeListener: (event: any) => void;
+    swipeImageListener: (event: any) => void;
     transitioning: boolean;
     slides: {
         element: any;
@@ -111,6 +118,8 @@ export class Slider {
     }): any;
     goto(index: any, event: any, triggerType: any): void;
     setup(): void;
+    setupSwipe(): void;
+    onSwipe(event: any): void;
     trackContainerStyles(): string;
     transitionCss(property: any): string;
     trackCss(): string;

package/types/ui/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AAsEA;;GAEG;AACH,6BASC;AAED;;;;GAIG;AACH,uCAHW,IAAI,sBAkBd;AAlED;;GAEG;AACH,+CAGG;AA8DH;;GAEG;AACH;IACE,wBAAsB;IACtB;;OAEG;IACH;;;;;;;;;;;;MAaC;IACD,wCAgCC;IA9BC,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAYC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,kCAEC;IACD,iCAIC;CACF;qCArfoC,oBAAoB"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AAyEA;;GAEG;AACH,6BASC;AAED;;;;GAIG;AACH,uCAHW,IAAI,sBAkBd;AAlED;;GAEG;AACH,+CAGG;AA8DH;;GAEG;AACH;IACE,wBAAsB;IACtB;;OAEG;IACH;;;;;;;;;;;;;;;;MAgBC;IACD,wCAmCC;IAjCC,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,mBAAyB;IACzB,oCAAyB;IACzB,yCAA8B;IAC9B,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAmBC;IACD,mBAsBC;IACD,0BAMC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,kCAEC;IACD,iCAIC;CACF;qCAjiBoC,oBAAoB"}